@customafk/lunas-ui 0.0.20 → 0.0.22

package/packages/components/ui/button.tsx

@@ -1,78 +1,195 @@
-"use client";
+'use client'
 
-import { Slot } from "radix-ui";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from 'radix-ui'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
   [
-    "relative shrink-0 cursor-pointer rounded-md font-medium whitespace-normal outline-0 transition-all shadow-btn",
-    "[&_svg]:pointer-events-none",
-    "[&_svg]:shrink-0",
+    'relative shrink-0 cursor-pointer rounded-md font-medium whitespace-normal transition-all',
+    'hover:shadow-md',
+    'active:ring-0',
+    '[&_svg]:pointer-events-none',
+    '[&_svg]:shrink-0',
     "[&_svg:not([class*='size-'])]:size-4",
-    "aria-invalid:ring-destructive/20",
-    "aria-invalid:border-destructive",
-    "disabled:pointer-events-none",
-    "disabled:cursor-default disabled:opacity-50",
+    'disabled:pointer-events-none',
+    'disabled:cursor-default disabled:opacity-50',
   ],
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-primary/50 hover:bg-primary/90 active:bg-primary/90 focus:ring-ring",
-        destructive:
-          "bg-destructive hover:bg-destructive/90 focus:ring-destructive/40 dark:bg-destructive/60 text-white",
+        default: '-outline-offset-1 outline-1 text-text-negative-strong',
         outline:
-          "border-border bg-card hover:bg-accent hover:text-accent-foreground focus:bg-background focus:ring-border/40 border",
+          '-outline-offset-1 outline-1 text-text-positive hover:text-text-positive-strong focus:text-text-positive-strong active:text-text-positive-strong',
+        ghost: 'outline-0 shadow-none hover:shadow-none',
 
-        secondary:
-          "bg-secondary text-secondary-foreground focus:ring-border hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 focus:!ring-0 shadow-none",
-        link: "text-primary underline-offset-4 hover:underline focus:!ring-0 shadow-none",
+        link: '',
+      },
+      color: {
+        primary: 'hover:shadow-primary-weak',
+        secondary: 'hover:shadow-secondary-weak',
+        muted: 'hover:shadow-border-weak',
+        success: 'hover:shadow-success-weak',
+        important: 'hover:shadow-important-weak',
+        info: 'hover:shadow-info-weak',
+        warning: 'hover:shadow-warning-weak',
+        danger: 'hover:shadow-danger-weak',
       },
       size: {
-        sm: "h-8 gap-1.5 rounded-md px-3 text-xs font-semibold focus:ring-4 has-[>svg]:px-2.5",
-        default:
-          "h-9 px-4 py-2 text-sm font-medium focus:ring-4 has-[>svg]:px-3",
-        lg: "h-10 rounded-md px-6 text-base font-semibold focus:ring-6 has-[>svg]:px-4",
-        icon: "size-8",
+        sm: 'px-2 py-1.5 gap-1 text-xs focus:ring-4 has-[>svg]:px-2.5',
+        default: 'px-2.5 py-2 gap-1 text-sm focus:ring-4 has-[>svg]:px-3',
+        lg: 'px-3 py-2.5 gap-1 text-base focus:ring-6 has-[>svg]:px-4',
+        icon: 'size-8',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      color: 'primary',
+      size: 'default',
     },
+    compoundVariants: [
+      {
+        variant: 'default',
+        color: 'primary',
+        className: 'outline-primary-strong bg-primary focus:ring-primary-weak focus:outline-primary-intense focus:bg-primary-strong active:bg-primary-strong',
+      },
+      {
+        variant: 'default',
+        color: 'secondary',
+        className:
+          'outline-secondary-strong bg-secondary focus:ring-secondary-weak focus:outline-secondary-intense focus:bg-secondary-strong active:bg-secondary-strong',
+      },
+      {
+        variant: 'default',
+        color: 'success',
+        className: 'outline-success-strong bg-success focus:ring-success-weak focus:outline-success-intense focus:bg-success-strong active:bg-success-strong',
+      },
+      {
+        variant: 'default',
+        color: 'important',
+        className:
+          'outline-important-strong bg-important focus:ring-important-weak focus:outline-important-intense focus:bg-important-strong active:bg-important-strong',
+      },
+      {
+        variant: 'default',
+        color: 'info',
+        className: 'outline-info-strong bg-info focus:ring-info-weak focus:outline-info-intense focus:bg-info-strong active:bg-info-strong',
+      },
+      {
+        variant: 'default',
+        color: 'warning',
+        className: 'outline-warning-strong bg-warning focus:ring-warning-weak focus:outline-warning-intense focus:bg-warning-strong active:bg-warning-strong',
+      },
+      {
+        variant: 'default',
+        color: 'danger',
+        className: 'outline-danger-strong bg-danger focus:ring-danger-weak focus:outline-danger-intense focus:bg-danger-strong active:bg-danger-strong',
+      },
+      {
+        variant: 'outline',
+        color: 'muted',
+        className: 'outline-border bg-background focus:ring-border-weak focus:outline-border-strong focus:bg-border-muted active:bg-border-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'primary',
+        className: 'outline-primary-strong bg-background focus:ring-primary-weak focus:outline-primary-intense focus:bg-primary-muted active:bg-primary-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'secondary',
+        className:
+          'outline-secondary-strong bg-background focus:ring-secondary-weak focus:outline-secondary-intense focus:bg-secondary-muted active:bg-secondary-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'success',
+        className: 'outline-success-strong bg-background focus:ring-success-weak focus:outline-success-intense focus:bg-success-muted active:bg-success-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'important',
+        className:
+          'outline-important-strong bg-background focus:ring-important-weak focus:outline-important-intense focus:bg-important-muted active:bg-important-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'info',
+        className: 'outline-info-strong bg-background focus:ring-info-weak focus:outline-info-intense focus:bg-info-muted active:bg-info-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'warning',
+        className: 'outline-warning-strong bg-background focus:ring-warning-weak focus:outline-warning-intense focus:bg-warning-muted active:bg-warning-muted',
+      },
+      {
+        variant: 'outline',
+        color: 'danger',
+        className: 'outline-danger-strong bg-background focus:ring-danger-weak focus:outline-danger-intense focus:bg-danger-muted active:bg-danger-muted',
+      },
+      {
+        variant: 'ghost',
+        color: 'primary',
+        className: 'text-primary-strong hover:bg-primary-muted focus:ring-primary-weak focus:bg-primary/10 active:bg-primary/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'secondary',
+        className: 'text-secondary-strong hover:bg-secondary-muted focus:ring-secondary-weak focus:bg-secondary/10 active:bg-secondary/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'muted',
+        className: 'text-text-positive hover:bg-border-muted focus:ring-border-weak focus:bg-border/10 active:bg-border/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'success',
+        className: 'text-success-strong hover:bg-success-muted focus:ring-success-weak focus:bg-success/10 active:bg-success/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'important',
+        className: 'text-important-strong hover:bg-important-muted focus:ring-important-weak focus:bg-important/10 active:bg-important/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'info',
+        className: 'text-info-strong hover:bg-info-muted focus:ring-info-weak focus:bg-info/10 active:bg-info/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'warning',
+        className: 'text-warning-strong hover:bg-warning-muted focus:ring-warning-weak focus:bg-warning/10 active:bg-warning/10',
+      },
+      {
+        variant: 'ghost',
+        color: 'danger',
+        className: 'text-danger-strong hover:bg-danger-muted focus:ring-danger-weak focus:bg-danger/10 active:bg-danger/10',
+      },
+    ],
   },
-);
+)
 
 function Button({
   className,
   variant,
   size,
+  color,
   asChild = false,
   isLoading = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-    isLoading?: boolean;
+    asChild?: boolean
+    isLoading?: boolean
   }) {
-  const Comp = asChild ? Slot.Root : "button";
+  const Comp = asChild ? Slot.Root : 'button'
 
   return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    >
-      <div
-        className={cn(
-          "flex size-full items-center justify-center gap-2 text-nowrap",
-          isLoading && "opacity-0",
-        )}
-      >
+    <Comp data-slot="button" className={cn(buttonVariants({ variant, size, color, className }))} {...props}>
+      <div className={cn('flex size-full items-center justify-center gap-2 text-nowrap', isLoading && 'opacity-0')}>
         <Slot.Slottable>{props.children}</Slot.Slottable>
       </div>
       {isLoading && (
@@ -81,8 +198,8 @@ function Button({
         </div>
       )}
     </Comp>
-  );
+  )
 }
 
 // eslint-disable-next-line react-refresh/only-export-components
-export { Button, buttonVariants };
+export { Button, buttonVariants }

package/packages/components/ui/buttons/add-new.tsx

@@ -1,26 +1,19 @@
-import { PlusIcon } from "lucide-react";
+import { PlusIcon } from 'lucide-react'
 
-import { Paragraph } from "@/components/typography/paragraph";
+import { Paragraph } from '@/components/typography/paragraph'
 
-import { Button } from "../button";
+import { Button } from '../button'
 
 type Props = {
-  onClick?: () => void;
-};
-export const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({
-  onClick = () => {},
-}) => {
+  onClick?: () => void
+}
+export const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {
   return (
-    <Button
-      aria-label="Tạo mới"
-      variant="outline"
-      className="aspect-square max-sm:p-0"
-      onClick={onClick}
-    >
+    <Button aria-label="Tạo mới" variant="outline" className="aspect-square max-sm:p-0" onClick={onClick}>
       <PlusIcon className="opacity-60 sm:-ms-1" size={16} aria-hidden="true" />
       <Paragraph variant="sm" className="max-sm:sr-only">
         Create New
       </Paragraph>
     </Button>
-  );
-};
+  )
+}

package/packages/components/ui/buttons/edit.tsx

@@ -1,20 +1,14 @@
-import { Edit2Icon } from "lucide-react";
+import { Edit2Icon } from 'lucide-react'
 
-import { Button } from "../button";
+import { Button } from '../button'
 
 type Props = {
-  onClick?: () => void;
-};
+  onClick?: () => void
+}
 export const EditBtn: React.FC<Props> = ({ onClick }) => {
   return (
-    <Button
-      aria-label="Chỉnh sửa"
-      variant="ghost"
-      size="icon"
-      className="aspect-square max-sm:p-0"
-      onClick={onClick}
-    >
+    <Button aria-label="Chỉnh sửa" variant="ghost" size="icon" className="aspect-square max-sm:p-0" onClick={onClick}>
       <Edit2Icon size={16} className="opacity-60" />
     </Button>
-  );
-};
+  )
+}

package/packages/components/ui/buttons/refresh.tsx

@@ -1,30 +1,19 @@
-import { RefreshCwIcon } from "lucide-react";
+import { RefreshCwIcon } from 'lucide-react'
 
-import { Paragraph } from "@/components/typography/paragraph";
+import { Paragraph } from '@/components/typography/paragraph'
 
-import { Button } from "../button";
+import { Button } from '../button'
 
 type Props = {
-  onClick?: () => void;
-};
-export const RefreshBtn: React.FC<React.PropsWithChildren<Props>> = ({
-  onClick = () => {},
-}) => {
+  onClick?: () => void
+}
+export const RefreshBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {
   return (
-    <Button
-      aria-label="Tạo mới"
-      variant="outline"
-      className="aspect-square max-sm:p-0"
-      onClick={onClick}
-    >
-      <RefreshCwIcon
-        className="opacity-60 sm:-ms-1"
-        size={16}
-        aria-hidden="true"
-      />
+    <Button aria-label="Tạo mới" variant="outline" className="aspect-square max-sm:p-0" onClick={onClick}>
+      <RefreshCwIcon className="opacity-60 sm:-ms-1" size={16} aria-hidden="true" />
       <Paragraph variant="sm" className="max-sm:sr-only">
         Reset
       </Paragraph>
     </Button>
-  );
-};
+  )
+}

package/packages/components/ui/buttons/trash.tsx

@@ -1,20 +1,14 @@
-import { Trash2Icon } from "lucide-react";
+import { Trash2Icon } from 'lucide-react'
 
-import { Button } from "../button";
+import { Button } from '../button'
 
 type Props = {
-  onClick?: () => void;
-};
+  onClick?: () => void
+}
 export const TrashBtn: React.FC<Props> = ({ onClick }) => {
   return (
-    <Button
-      aria-label="Xoá"
-      variant="ghost"
-      size="icon"
-      className="aspect-square max-sm:p-0"
-      onClick={onClick}
-    >
+    <Button aria-label="Xoá" variant="ghost" size="icon" className="aspect-square max-sm:p-0" onClick={onClick}>
       <Trash2Icon size={16} className="opacity-60" aria-hidden="true" />
     </Button>
-  );
-};
+  )
+}

package/packages/components/ui/buttons/upload-image.tsx

@@ -1,18 +1,15 @@
-import React from "react";
-import type { PropsWithChildren } from "react";
-import { UploadIcon } from "lucide-react";
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { UploadIcon } from 'lucide-react'
 
-import { Button } from "../button";
+import { Button } from '../button'
 
 type Props = {
-  size?: number;
-  onClick?: () => void;
-};
+  size?: number
+  onClick?: () => void
+}
 
-export const UploadImageBtn: React.FC<PropsWithChildren<Props>> = ({
-  size = "5rem",
-  onClick,
-}) => {
+export const UploadImageBtn: React.FC<PropsWithChildren<Props>> = ({ size = '5rem', onClick }) => {
   return (
     <Button
       style={{
@@ -24,5 +21,5 @@ export const UploadImageBtn: React.FC<PropsWithChildren<Props>> = ({
     >
       <UploadIcon className="size-6" />
     </Button>
-  );
-};
+  )
+}