feat: Update button,form,formItem.Add Card

Author: Onlylonger

src/components/button/button.tsx

@@ -0,0 +1,33 @@
+import { Loader2Icon } from 'lucide-react'
+import './style.css'
+import type { ButtonProps } from './type'
+import { getBtnClx } from './style'
+
+const Button = (props: ButtonProps) => {
+  const { className, children, render, variant, size, loading, ...reset } =
+    props
+
+  const btnCommonProps = {
+    'data-slot': 'sl-button',
+    className: getBtnClx({ variant, size, className }),
+    children: (
+      <>
+        {loading && <Loader2Icon className="animate-spin" />}
+        {children}
+      </>
+    ),
+  }
+
+  const btnProps = {
+    ...btnCommonProps,
+    ...reset,
+  }
+
+  if (typeof render === 'function') {
+    return render(btnProps)
+  }
+
+  return <button {...btnProps} />
+}
+
+export { Button }

src/components/button/index.tsx

@@ -1,41 +1,2 @@
-import { cva, type VariantProps } from '@shilong/utils'
-import './style.css'
-
-const getBtnClx = cva({
-  base: 'slButtonBase',
-  variants: {
-    variant: {
-      default: 'slButtonVariantDefault',
-      destructive: 'slButtonVariantDestructive',
-      outline: 'slButtonVariantOutline',
-      secondary: 'slButtonVariantSecondary',
-      ghost: 'slButtonVariantGhost',
-      link: 'slButtonVariantLink',
-    },
-    size: {
-      default: 'slButtonSizeDefault',
-      sm: 'slButtonSizeSm',
-      lg: 'slButtonSizeLg',
-      icon: 'slButtonSizeIcon',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-})
-
-export type ButtonVariants = VariantProps<typeof getBtnClx>
-export type ButtonProps = ButtonVariants & React.ComponentProps<'button'>
-
-export const Button = (props: ButtonProps) => {
-  const { className, variant, size, ...reset } = props
-
-  return (
-    <button
-      data-slot="sl-button"
-      className={getBtnClx({ variant, size, className })}
-      {...reset}
-    />
-  )
-}
+export * from './button'
+export * from './type'

src/components/button/style.ts

@@ -0,0 +1,25 @@
+import { cva } from '@shilong/utils'
+
+export const getBtnClx = cva({
+  base: 'slButtonBase',
+  variants: {
+    variant: {
+      default: 'slButtonVariantDefault',
+      destructive: 'slButtonVariantDestructive',
+      outline: 'slButtonVariantOutline',
+      secondary: 'slButtonVariantSecondary',
+      ghost: 'slButtonVariantGhost',
+      link: 'slButtonVariantLink',
+    },
+    size: {
+      default: 'slButtonSizeDefault',
+      sm: 'slButtonSizeSm',
+      lg: 'slButtonSizeLg',
+      icon: 'slButtonSizeIcon',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+})

src/components/button/type.ts

@@ -0,0 +1,16 @@
+import type { VariantProps } from '@shilong/utils'
+import type { ReactNode } from 'react'
+import type { getBtnClx } from './style'
+
+type ButtonSelf = {
+  children?: ReactNode
+  loading?: boolean
+  render?: (props: ButtonRenderProps) => ReactNode
+} & VariantProps<typeof getBtnClx>
+
+export type ButtonRenderProps = {
+  'data-slot': string
+} & Omit<ButtonSelf, 'variant' | 'size' | 'render'> &
+  Record<string, unknown>
+
+export type ButtonProps = ButtonSelf & React.ComponentProps<'button'>

src/components/card/index.tsx

@@ -0,0 +1,79 @@
+import { clsx } from '@shilong/utils'
+import * as React from 'react'
+import './style.css'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="sl-card" className={clsx('slCard', className)} {...props} />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-header"
+      className={clsx('slCardHeader', className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-title"
+      className={clsx('slCardTitle', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-description"
+      className={clsx('slCardDescription', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-action"
+      className={clsx('slCardAction', className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-content"
+      className={clsx('slCardContent', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sl-card-footer"
+      className={clsx('slCardFooter', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/card/style.css

@@ -0,0 +1,29 @@
+@reference "../../global.css";
+
+.slCard {
+  @apply bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm;
+}
+
+.slCardHeader {
+  @apply @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6;
+}
+
+.slCardTitle {
+  @apply leading-none font-semibold;
+}
+
+.slCardDescription {
+  @apply text-muted-foreground text-sm;
+}
+
+.slCardAction {
+  @apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
+}
+
+.slCardContent {
+  @apply px-6;
+}
+
+.slCardFooter {
+  @apply flex items-center px-6 [.border-t]:pt-6;
+}

src/components/form-item/index.tsx

@@ -13,6 +13,7 @@ export type FormItemProps = {
   rules?: any
   render: React.ReactElement
   controlled?: boolean
+  vertical?: boolean
 }
 
 export const FormItem = (props: FormItemProps) => {
@@ -24,14 +25,19 @@ export const FormItem = (props: FormItemProps) => {
     name,
     rules,
     controlled = false,
+    vertical = false,
   } = props
 
   const { register, errors, control } = useForm()
 
   const id = useId()
 
   return (
-    <div className={clsx('slFormItem', className)}>
+    <div
+      className={clsx('slFormItem', className, {
+        slFormItemVertical: vertical,
+      })}
+    >
       <Label
         className={clsx('slFormItemLabel', labelClassName)}
         htmlFor={controlled ? undefined : id}

src/components/form-item/style.css

@@ -1,17 +1,21 @@
 @reference "../../global.css";
 
 .slFormItem {
-  @apply flex justify-start gap-2;
+  @apply flex items-center justify-start gap-2 pb-7;
+}
+
+.slFormItemVertical {
+  @apply flex-col items-start [&_.slFormItemLabel]:w-full [&_.slFormItemLabel]:text-left [&_.slFormItemValue]:w-full;
 }
 
 .slFormItemLabel {
-  @apply w-2/7 shrink-0 break-all;
+  @apply inline-block w-2/7 shrink-0 text-right;
 }
 
 .slFormItemValue {
-  @apply relative w-5/7 shrink-0;
+  @apply relative flex-1;
 }
 
 .slFormItemError {
-  @apply text-destructive absolute top-full left-0 mt-1 text-sm;
+  @apply text-destructive absolute top-full left-0 mt-0.5 ml-0.5 text-sm;
 }

src/components/form/index.tsx

@@ -1,12 +1,16 @@
 import { clsx } from '@shilong/utils'
 import { type PropsWithChildren } from 'react'
-import { useForm as useReackHookForm } from 'react-hook-form'
+import {
+  useForm as useReackHookForm,
+  type FieldValues,
+  type SubmitHandler,
+} from 'react-hook-form'
 import './style.css'
 import { formContext } from './context'
 
 export type FormProps = {
   hookFormOptions?: any
-  onSubmit: any
+  onSubmit: SubmitHandler<FieldValues>
 } & React.ComponentProps<'form'>
 
 export const Form = (props: PropsWithChildren<FormProps>) => {

src/components/form/style.css

@@ -1,5 +1 @@
 @reference "../../global.css";
-
-.slForm {
-  @apply flex flex-col gap-8;
-}