@onesaz/ui 0.4.10 → 0.4.11

package/dist/index.d.ts

@@ -191,7 +191,7 @@ declare const Caption: React.ForwardRefExoticComponent<Omit<TypographyProps, "va
 
 type ButtonColor = 'default' | 'success' | 'warning' | 'error' | 'destructive';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    variant?: 'contained' | 'destructive' | 'outlined' | 'secondary' | 'ghost' | 'link';
     size?: 'default' | 'sm' | 'lg' | 'icon';
     color?: ButtonColor;
     /** Whether the button should take the full width of its container */
@@ -540,7 +540,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
 
 type ChipColor = 'default' | 'success' | 'warning' | 'error' | 'destructive';
-type ChipVariant = 'filled' | 'outlined';
+type ChipVariant = 'contained' | 'outlined';
 type ChipSize = 'small' | 'medium';
 interface ChipProps extends React.HTMLAttributes<HTMLElement> {
     /** The text content of the chip */

package/dist/index.js

@@ -870,28 +870,28 @@ var useButtonGroup = () => React6.useContext(ButtonGroupContext);
 var colorMap = {
   success: {
     contained: "bg-success-500 text-white hover:bg-success-600 dark:bg-success-600 dark:hover:bg-success-700",
-    outline: "border border-success-500 bg-transparent text-success-600 hover:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/10",
+    outlined: "border border-success-500 bg-transparent text-success-600 hover:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/10",
     secondary: "bg-success-500/10 text-success-700 hover:bg-success-500/15 dark:text-success-300 dark:hover:bg-success-500/15",
     ghost: "text-success-600 hover:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/10",
     link: "text-success-600 dark:text-success-400"
   },
   warning: {
     contained: "bg-warning-500 text-white hover:bg-warning-600 dark:bg-warning-600 dark:hover:bg-warning-700",
-    outline: "border border-warning-500 bg-transparent text-warning-600 hover:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/10",
+    outlined: "border border-warning-500 bg-transparent text-warning-600 hover:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/10",
     secondary: "bg-warning-500/10 text-warning-700 hover:bg-warning-500/15 dark:text-warning-300 dark:hover:bg-warning-500/15",
     ghost: "text-warning-600 hover:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/10",
     link: "text-warning-600 dark:text-warning-400"
   },
   error: {
     contained: "bg-error-500 text-white hover:bg-error-600 dark:bg-error-600 dark:hover:bg-error-700",
-    outline: "border border-error-500 bg-transparent text-error-600 hover:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/10",
+    outlined: "border border-error-500 bg-transparent text-error-600 hover:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/10",
     secondary: "bg-error-500/10 text-error-700 hover:bg-error-500/15 dark:text-error-300 dark:hover:bg-error-500/15",
     ghost: "text-error-600 hover:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/10",
     link: "text-error-600 dark:text-error-400"
   },
   destructive: {
     contained: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-    outline: "border border-destructive bg-transparent text-destructive hover:bg-destructive/10",
+    outlined: "border border-destructive bg-transparent text-destructive hover:bg-destructive/10",
     secondary: "bg-destructive/10 text-destructive hover:bg-destructive/20",
     ghost: "text-destructive hover:bg-destructive/10",
     link: "text-destructive"
@@ -899,8 +899,8 @@ var colorMap = {
 };
 function variantToShape(variant) {
   switch (variant) {
-    case "outline":
-      return "outline";
+    case "outlined":
+      return "outlined";
     case "secondary":
       return "secondary";
     case "ghost":
@@ -947,15 +947,15 @@ var Button = React6.forwardRef(
     ...props
   }, ref) => {
     const groupCtx = useButtonGroup();
-    const resolvedVariant = variant ?? groupCtx.variant ?? "default";
+    const resolvedVariant = variant ?? groupCtx.variant ?? "contained";
     const resolvedSize = size ?? "default";
     const resolvedColor = color ?? groupCtx.color ?? "default";
     const resolvedDisabled = disabled ?? groupCtx.disabled;
     const colorOverride = resolvedColor !== "default" ? colorMap[resolvedColor]?.[variantToShape(resolvedVariant)] ?? null : null;
     const variantClasses3 = colorOverride ? null : {
-      "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "default",
+      "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "contained",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": resolvedVariant === "destructive",
-      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": resolvedVariant === "outline",
+      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": resolvedVariant === "outlined",
       "bg-muted text-foreground hover:bg-muted/80": resolvedVariant === "secondary",
       "hover:bg-muted hover:text-foreground": resolvedVariant === "ghost",
       "text-accent underline-offset-4 hover:underline": resolvedVariant === "link"
@@ -1003,12 +1003,12 @@ var iconButtonSizes = {
   lg: "h-12 w-12"
 };
 var IconButton = React6.forwardRef(
-  ({ className, variant = "ghost", color = "default", size = "md", rounded = false, loading = false, ...props }, ref) => {
+  ({ className, variant = "contained", color = "default", size = "md", rounded = false, loading = false, ...props }, ref) => {
     const colorOverride = color !== "default" ? colorMap[color]?.[variantToShape(variant)] ?? null : null;
     const variantClasses3 = colorOverride ? null : {
-      "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "default",
+      "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "contained",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
-      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": variant === "outline",
+      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": variant === "outlined",
       "bg-muted text-foreground hover:bg-muted/80": variant === "secondary",
       "hover:bg-muted hover:text-foreground": variant === "ghost",
       "text-accent underline-offset-4 hover:underline": variant === "link"
@@ -3451,14 +3451,14 @@ Badge.displayName = "Badge";
 // src/components/chip.tsx
 import * as React21 from "react";
 import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var filledClasses = {
+var containedClasses2 = {
   default: "bg-accent text-accent-foreground",
   success: "bg-success-500 text-white dark:bg-success-600",
   warning: "bg-warning-500 text-white dark:bg-warning-600",
   error: "bg-error-500 text-white dark:bg-error-600",
   destructive: "bg-destructive text-destructive-foreground"
 };
-var filledHoverClasses = {
+var containedHoverClasses = {
   default: "hover:bg-accent-hover",
   success: "hover:bg-success-600 dark:hover:bg-success-500",
   warning: "hover:bg-warning-600 dark:hover:bg-warning-500",
@@ -3500,7 +3500,7 @@ var Chip = React21.forwardRef(
   ({
     className,
     label,
-    variant = "filled",
+    variant = "contained",
     color = "default",
     size = "medium",
     icon,
@@ -3520,9 +3520,9 @@ var Chip = React21.forwardRef(
     const isClickable = clickable || !!onClick || !!href;
     const Component = component ?? (href ? "a" : "div");
     const safeSize = size in sizeClasses3 ? size : "medium";
-    const safeVariant = variant === "filled" || variant === "outlined" ? variant : "filled";
-    const colorClass = safeVariant === "filled" ? filledClasses[color] ?? filledClasses.default : outlinedClasses2[color] ?? outlinedClasses2.default;
-    const hoverClass = isClickable && !disabled ? safeVariant === "filled" ? filledHoverClasses[color] ?? filledHoverClasses.default : outlinedHoverClasses[color] ?? outlinedHoverClasses.default : "";
+    const safeVariant = variant === "contained" || variant === "outlined" ? variant : "contained";
+    const colorClass = safeVariant === "contained" ? containedClasses2[color] ?? containedClasses2.default : outlinedClasses2[color] ?? outlinedClasses2.default;
+    const hoverClass = isClickable && !disabled ? safeVariant === "contained" ? containedHoverClasses[color] ?? containedHoverClasses.default : outlinedHoverClasses[color] ?? outlinedHoverClasses.default : "";
     const handleKeyDown = (e) => {
       if (!disabled) {
         if (isClickable && (e.key === "Enter" || e.key === " ")) {
@@ -5186,7 +5186,7 @@ var PaginationLink = React35.forwardRef(
     Button,
     {
       ref,
-      variant: isActive ? "default" : "outline",
+      variant: isActive ? "contained" : "outlined",
       size: "icon",
       className: cn("h-9 w-9", className),
       ...props
@@ -5198,7 +5198,7 @@ var PaginationPrevious = React35.forwardRef(({ className, ...props }, ref) => /*
   Button,
   {
     ref,
-    variant: "outline",
+    variant: "outlined",
     size: "default",
     className: cn("gap-1 pl-2.5", className),
     ...props,
@@ -5228,7 +5228,7 @@ var PaginationNext = React35.forwardRef(({ className, ...props }, ref) => /* @__
   Button,
   {
     ref,
-    variant: "outline",
+    variant: "outlined",
     size: "default",
     className: cn("gap-1 pr-2.5", className),
     ...props,
@@ -6071,7 +6071,7 @@ var ColumnVisibilityDropdown = ({
     /* @__PURE__ */ jsxs24(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "sm",
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
@@ -6212,7 +6212,7 @@ var DataGridPagination = ({
     /* @__PURE__ */ jsx37(PaginationItem, { children: /* @__PURE__ */ jsx37(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "icon",
         className: "h-8 w-8",
         onClick: () => table.setPageIndex(0),
@@ -6223,7 +6223,7 @@ var DataGridPagination = ({
     /* @__PURE__ */ jsx37(PaginationItem, { children: /* @__PURE__ */ jsx37(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "icon",
         className: "h-8 w-8",
         onClick: () => table.previousPage(),
@@ -6235,7 +6235,7 @@ var DataGridPagination = ({
     /* @__PURE__ */ jsx37(PaginationItem, { children: /* @__PURE__ */ jsx37(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "icon",
         className: "h-8 w-8",
         onClick: () => table.nextPage(),
@@ -6246,7 +6246,7 @@ var DataGridPagination = ({
     /* @__PURE__ */ jsx37(PaginationItem, { children: /* @__PURE__ */ jsx37(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "icon",
         className: "h-8 w-8",
         onClick: () => table.setPageIndex(pageCount - 1),
@@ -6330,7 +6330,7 @@ var ExportDropdown = ({
     /* @__PURE__ */ jsxs24(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "sm",
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
@@ -6395,7 +6395,7 @@ var MoreOptionsDropdown = ({
     /* @__PURE__ */ jsx37(
       Button,
       {
-        variant: "outline",
+        variant: "outlined",
         size: "icon",
         onClick: () => setOpen(!open),
         className: "h-9 w-9",
@@ -10593,9 +10593,9 @@ var PlaygroundContent = () => {
     ] }),
     /* @__PURE__ */ jsxs35(Section, { title: "Button", children: [
       /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx50(Button, { variant: "default", children: "Default" }),
+        /* @__PURE__ */ jsx50(Button, { variant: "contained", children: "Default" }),
         /* @__PURE__ */ jsx50(Button, { variant: "destructive", children: "Destructive" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "outline", children: "Outline" }),
+        /* @__PURE__ */ jsx50(Button, { variant: "outlined", children: "Outline" }),
         /* @__PURE__ */ jsx50(Button, { variant: "secondary", children: "Secondary" }),
         /* @__PURE__ */ jsx50(Button, { variant: "ghost", children: "Ghost" }),
         /* @__PURE__ */ jsx50(Button, { variant: "link", children: "Link" })
@@ -10608,7 +10608,7 @@ var PlaygroundContent = () => {
       ] }),
       /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx50(Button, { disabled: true, children: "Disabled" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
+        /* @__PURE__ */ jsx50(Button, { variant: "outlined", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
     /* @__PURE__ */ jsx50(Section, { title: "Input", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4 max-w-md", children: [
@@ -10751,7 +10751,7 @@ var PlaygroundContent = () => {
         ] }),
         /* @__PURE__ */ jsx50(CardContent, { children: /* @__PURE__ */ jsx50("p", { className: "text-foreground", children: "This is the card content area." }) }),
         /* @__PURE__ */ jsxs35(CardFooter, { children: [
-          /* @__PURE__ */ jsx50(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
+          /* @__PURE__ */ jsx50(Button, { variant: "outlined", className: "mr-2", children: "Cancel" }),
           /* @__PURE__ */ jsx50(Button, { children: "Submit" })
         ] })
       ] }),
@@ -10809,7 +10809,7 @@ var PlaygroundContent = () => {
           ] })
         ] }),
         /* @__PURE__ */ jsxs35(DialogFooter, { children: [
-          /* @__PURE__ */ jsx50(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
+          /* @__PURE__ */ jsx50(Button, { variant: "outlined", onClick: () => setDialogOpen(false), children: "CANCEL" }),
           /* @__PURE__ */ jsx50(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })