levannta-ui 1.0.0 → 1.0.1

package/dist/components/ui/Button.d.ts

@@ -1,11 +1,15 @@
-import React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-import './Button.css';
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant?: "outlined" | "filled" | "icon" | null | undefined;
+    color?: "primary" | "secondary" | "error" | "clear" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    pill?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    color?: 'primary' | 'secondary' | 'error' | 'clear';
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/dist/index.css

@@ -1 +1 @@
-.button{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .2s;outline:none;cursor:pointer;border:none}.button:focus-visible{outline:2px solid hsl(221.2 83.2% 53.3%);outline-offset:2px}.button:disabled{opacity:.5;pointer-events:none}.button-default{background-color:#2563eb;color:#fff}.button-default:hover{background-color:#2563ebe6}.button-destructive{background-color:#ef4444;color:#f8fafc}.button-destructive:hover{background-color:#ef4444e6}.button-outline{border:1px solid hsl(214.3 31.8% 91.4%);background-color:#fff}.button-outline:hover,.button-secondary{background-color:#f1f5f9;color:#0f172a}.button-secondary:hover{background-color:#f1f5f9cc}.button-ghost:hover{background-color:#f1f5f9;color:#0f172a}.button-link{color:#2563eb;text-decoration:none}.button-link:hover{text-decoration:underline;text-underline-offset:4px}.button-size-default{height:2.5rem;padding:.5rem 1rem}.button-size-sm{height:2.25rem;padding:0 .75rem;border-radius:.375rem}.button-size-lg{height:2.75rem;padding:0 2rem;border-radius:.375rem}
+.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:2.5rem;height:2.5rem;padding:0;justify-content:center;align-items:center;border-radius:.375rem;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{width:94px;height:48px;font-size:12px}.button-size-md{width:101px;height:56px;font-size:16px}.button-size-lg{width:107px;height:72px;font-size:18px}.button-size-xl{width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}