@oneplatformdev/ui 0.1.2-1 → 0.1.9-11

package/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,90 @@
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+import * as t from "react";
+import { Slot as n } from "@radix-ui/react-slot";
+import { ChevronRight as c, MoreHorizontal as d } from "lucide-react";
+import { cn as o } from "@oneplatformdev/utils";
+const l = t.forwardRef(({ ...r }, e) => /* @__PURE__ */ s("nav", { ref: e, "aria-label": "breadcrumb", ...r }));
+l.displayName = "Breadcrumb";
+const p = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "ol",
+  {
+    ref: a,
+    className: o(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      r
+    ),
+    ...e
+  }
+));
+p.displayName = "BreadcrumbList";
+const u = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "li",
+  {
+    ref: a,
+    className: o("inline-flex items-center gap-1.5", r),
+    ...e
+  }
+));
+u.displayName = "BreadcrumbItem";
+const f = t.forwardRef(({ asChild: r, className: e, ...a }, m) => /* @__PURE__ */ s(
+  r ? n : "a",
+  {
+    ref: m,
+    className: o("transition-colors hover:text-foreground", e),
+    ...a
+  }
+));
+f.displayName = "BreadcrumbLink";
+const b = t.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ s(
+  "span",
+  {
+    ref: a,
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: o("font-normal text-foreground", r),
+    ...e
+  }
+));
+b.displayName = "BreadcrumbPage";
+const N = ({
+  children: r,
+  className: e,
+  ...a
+}) => /* @__PURE__ */ s(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("[&>svg]:w-3.5 [&>svg]:h-3.5", e),
+    ...a,
+    children: r ?? /* @__PURE__ */ s(c, {})
+  }
+);
+N.displayName = "BreadcrumbSeparator";
+const B = ({
+  className: r,
+  ...e
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: o("flex h-9 w-9 items-center justify-center", r),
+    ...e,
+    children: [
+      /* @__PURE__ */ s(d, { className: "h-4 w-4" }),
+      /* @__PURE__ */ s("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+B.displayName = "BreadcrumbElipssis";
+export {
+  l as Breadcrumb,
+  B as BreadcrumbEllipsis,
+  u as BreadcrumbItem,
+  f as BreadcrumbLink,
+  p as BreadcrumbList,
+  b as BreadcrumbPage,
+  N as BreadcrumbSeparator
+};

package/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Breadcrumb';
+//# sourceMappingURL=index.d.ts.map

package/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/Breadcrumb/index.js

@@ -0,0 +1,10 @@
+import { Breadcrumb as a, BreadcrumbEllipsis as m, BreadcrumbItem as b, BreadcrumbLink as c, BreadcrumbList as d, BreadcrumbPage as u, BreadcrumbSeparator as B } from "./Breadcrumb.js";
+export {
+  a as Breadcrumb,
+  m as BreadcrumbEllipsis,
+  b as BreadcrumbItem,
+  c as BreadcrumbLink,
+  d as BreadcrumbList,
+  u as BreadcrumbPage,
+  B as BreadcrumbSeparator
+};

package/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from './Button.types';
+import * as React from "react";
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,eAAO,MAAM,MAAM,uFAmBlB,CAAA;AAGD,eAAe,MAAM,CAAC"}

package/Button/Button.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as i from "react";
+import { Slot as u } from "@radix-ui/react-slot";
+import { cn as c } from "@oneplatformdev/utils";
+import { buttonVariants as l } from "./buttonVariants.js";
+import "../Tooltip/TooltipRoot.js";
+import { Tooltip as d } from "../Tooltip/Tooltip.js";
+const y = i.forwardRef(
+  ({ disabled: o, className: a, variant: e, size: p, asChild: n = !1, title: t = "", tooltip: r, ...s }, f) => /* @__PURE__ */ m(
+    d,
+    {
+      open: o || !t && !r ? !1 : void 0,
+      message: r || t,
+      delay: 300,
+      children: /* @__PURE__ */ m(
+        n ? u : "button",
+        {
+          type: "button",
+          ref: f,
+          disabled: o,
+          className: c(l({ variant: e, size: p, className: a })),
+          ...s
+        }
+      )
+    }
+  )
+);
+y.displayName = "Button";
+export {
+  y as Button,
+  y as default
+};

package/Button/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react';
+import { ButtonProps } from './Button.types';
+import { default as React } from 'react';
+declare const meta: Meta<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

package/Button/Button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,IAAI,6FASqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/Button/Button.stories.js

@@ -0,0 +1,20 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Button as t } from "./Button.js";
+const o = (e) => /* @__PURE__ */ a(t, { ...e }), n = {
+  title: "Button",
+  component: t,
+  render: o,
+  args: {
+    variant: "default",
+    size: "default",
+    disabled: !1
+  }
+}, s = {
+  args: {
+    children: "Default"
+  }
+};
+export {
+  s as Default,
+  n as default
+};

package/Button/Button.types.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './buttonVariants';
+import { ReactNode } from 'react';
+import * as React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    tooltip?: ReactNode;
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../src/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/Button/Button.types.js

@@ -0,0 +1 @@
+

package/Button/buttonVariants.d.ts

@@ -0,0 +1,5 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+//# sourceMappingURL=buttonVariants.d.ts.map

package/Button/buttonVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonVariants.d.ts","sourceRoot":"","sources":["../../src/Button/buttonVariants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;;8EAkC1B,CAAA"}

package/Button/buttonVariants.js

@@ -0,0 +1,35 @@
+import { cva as e } from "class-variance-authority";
+const r = e(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "whitespace-nowrap rounded-lg text-sm font-medium",
+    "transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:opacity-[.8]",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs [&_svg]:size-4",
+        lg: "h-10 px-8 [&_svg]:size-5 px-3 py-2",
+        icon: "h-9 w-9 [&_svg]:size-5!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "lg"
+    }
+  }
+);
+export {
+  r as buttonVariants
+};

package/Button/index.d.ts

@@ -0,0 +1,4 @@
+export { Button as default, Button } from './Button';
+export * from './buttonVariants';
+export type * from './Button.types';
+//# sourceMappingURL=index.d.ts.map

package/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACrD,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,gBAAgB,CAAC"}

package/Button/index.js

@@ -0,0 +1,7 @@
+import { Button as r, Button as a } from "./Button.js";
+import { buttonVariants as u } from "./buttonVariants.js";
+export {
+  r as Button,
+  u as buttonVariants,
+  a as default
+};

package/ButtonIcon/ButtonIcon.d.ts

@@ -0,0 +1,4 @@
+import { ButtonIconProps } from './ButtonIcon.types';
+import * as React from "react";
+export declare const ButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=ButtonIcon.d.ts.map

package/ButtonIcon/ButtonIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,eAAO,MAAM,UAAU,2FAkBtB,CAAA"}

package/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as f from "react";
+import { cn as l } from "@oneplatformdev/utils";
+import { buttonIconVariants as u } from "./buttonIconVariants.js";
+import "../Tooltip/TooltipRoot.js";
+import { Tooltip as d } from "../Tooltip/Tooltip.js";
+const h = f.forwardRef(
+  ({ disabled: o, className: m, variant: e, color: p, size: a, rounded: s, title: t = "", tooltip: r, ...i }, c) => /* @__PURE__ */ n(
+    d,
+    {
+      open: o || !t && !r ? !1 : void 0,
+      message: r || t,
+      delay: 300,
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          className: l(u({ variant: e, size: a, color: p, disabled: o, rounded: s, className: m })),
+          ref: c,
+          disabled: !!o,
+          ...i
+        }
+      )
+    }
+  )
+);
+h.displayName = "Button";
+export {
+  h as ButtonIcon
+};

package/ButtonIcon/ButtonIcon.stories.d.ts

@@ -0,0 +1,37 @@
+import { ButtonIconProps } from './ButtonIcon.types';
+import { default as React } from 'react';
+declare const meta: Meta<React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLButtonElement>>>;
+export default meta;
+export declare const Playground: {
+    ({ rounded, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        onClick: {
+            action: (e: React.MouseEvent<HTMLButtonElement>) => React.MouseEvent<HTMLButtonElement, MouseEvent>;
+        };
+    };
+};
+export declare const Variants: {
+    ({ variant, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const Colors: {
+    ({ color, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const Disabled: {
+    ({ variant, color, ...args }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        controls: {
+            include: never[];
+        };
+    };
+};
+//# sourceMappingURL=ButtonIcon.stories.d.ts.map

package/ButtonIcon/ButtonIcon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.stories.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,QAAA,MAAM,IAAI,iGAkDyB,CAAC;AACpC,eAAe,IAAI,CAAC;AAIpB,eAAO,MAAM,UAAU;2BAA0B,eAAe;;;wBAqCvC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC;;;CAF3D,CAAC;AAKF,eAAO,MAAM,QAAQ;2BAA0B,eAAe;;;;;;CAY7D,CAAC;AAQF,eAAO,MAAM,MAAM;yBAAwB,eAAe;;;;;;CAYzD,CAAC;AAQF,eAAO,MAAM,QAAQ;kCAAiC,eAAe;;;;;;CAsBpE,CAAC"}

package/ButtonIcon/ButtonIcon.stories.js

@@ -0,0 +1,126 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { ButtonIcon as m } from "./ButtonIcon.js";
+import { PencilLineIcon as x } from "lucide-react";
+const s = ["contained", "outlined", "ghost", "link"], c = [
+  "primary",
+  "secondary",
+  "error",
+  "success",
+  "disabled"
+], f = ["sm", "md", "lg"], l = (a) => /* @__PURE__ */ o(m, { ...a, children: /* @__PURE__ */ o(x, {}) }), z = {
+  title: "ButtonIcon",
+  component: m,
+  render: l,
+  argTypes: {
+    variant: {
+      name: "variant",
+      description: "ButtonIcon variant",
+      defaultValue: "contained",
+      options: s,
+      control: {
+        type: "inline-radio"
+      }
+    },
+    color: {
+      options: c,
+      control: {
+        type: "inline-radio"
+      }
+    },
+    size: {
+      options: f,
+      control: {
+        type: "inline-radio"
+      }
+    },
+    tooltip: {
+      control: {
+        type: "text"
+      }
+    },
+    disabled: {
+      control: {
+        type: "boolean"
+      }
+    },
+    rounded: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    variant: "contained",
+    color: "primary",
+    size: "md",
+    disabled: !1,
+    rounded: !1,
+    tooltip: "ButtonIcon tooltip"
+  }
+}, u = ({ rounded: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
+  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { rounded: a, ...n }) }),
+  /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((e) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((t) => {
+    const i = `${e}-${t}`;
+    return /* @__PURE__ */ o("div", { className: "flex gap-2", children: f.map((r) => {
+      const p = `${i}-${r}`;
+      return /* @__PURE__ */ o(
+        l,
+        {
+          color: t,
+          size: r,
+          variant: e,
+          rounded: a,
+          tooltip: p
+        },
+        p
+      );
+    }) }, i);
+  }) }, e)) })
+] });
+u.args = {
+  onClick: { action: (a) => a }
+};
+const g = ({ variant: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-10", children: [
+  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { variant: a, ...n }) }),
+  /* @__PURE__ */ o("div", { className: "flex gap-2", children: s.map((e) => /* @__PURE__ */ o(l, { variant: e, tooltip: e }, e)) })
+] });
+g.parameters = {
+  controls: {
+    include: ["disabled", "color", "size", "variant"]
+  }
+};
+const h = ({ color: a, ...n }) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(l, { color: a, ...n }) }),
+  /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((e) => /* @__PURE__ */ o(l, { color: e, tooltip: e, ...n }, e)) })
+] });
+h.parameters = {
+  controls: {
+    include: ["disabled", "color", "size", "variant"]
+  }
+};
+const v = ({ variant: a, color: n, ...e }) => /* @__PURE__ */ o("div", { className: "flex flex-col gap-10", children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: s.map((t) => /* @__PURE__ */ o("div", { className: "flex gap-2", children: c.map((i) => {
+  const r = `${t}-${i}`;
+  return /* @__PURE__ */ o(
+    l,
+    {
+      variant: t,
+      color: i,
+      disabled: !0,
+      tooltip: r,
+      ...e
+    },
+    r
+  );
+}) }, t)) }) });
+v.parameters = {
+  controls: {
+    include: []
+  }
+};
+export {
+  h as Colors,
+  v as Disabled,
+  u as Playground,
+  g as Variants,
+  z as default
+};

package/ButtonIcon/ButtonIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { buttonIconVariants } from './buttonIconVariants';
+import { ReactNode } from 'react';
+import * as React from "react";
+export interface ButtonIconProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'disabled'>, VariantProps<typeof buttonIconVariants> {
+    tooltip?: ReactNode;
+}
+//# sourceMappingURL=ButtonIcon.types.d.ts.map

package/ButtonIcon/ButtonIcon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.types.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/ButtonIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC/E,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB"}

package/ButtonIcon/ButtonIcon.types.js

@@ -0,0 +1 @@
+

package/ButtonIcon/buttonIconVariants.d.ts

@@ -0,0 +1,8 @@
+export declare const buttonIconVariants: (props?: ({
+    variant?: "link" | "ghost" | "contained" | "outlined" | null | undefined;
+    color?: "disabled" | "secondary" | "primary" | "error" | "success" | null | undefined;
+    size?: "sm" | "lg" | "icon" | "md" | null | undefined;
+    disabled?: boolean | null | undefined;
+    rounded?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+//# sourceMappingURL=buttonIconVariants.d.ts.map

package/ButtonIcon/buttonIconVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonIconVariants.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;8EAsI9B,CAAA"}

package/ButtonIcon/buttonIconVariants.js

@@ -0,0 +1,139 @@
+import { cva as r } from "class-variance-authority";
+const e = r(
+  "aspect-square inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        contained: "border shadow-sm",
+        outlined: "border bg-transparent hover:shadow-xs",
+        ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline bg-transparent hover:bg-transparent"
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        error: "",
+        success: "",
+        disabled: "contrast-50"
+      },
+      size: {
+        sm: "w-8 h-8 rounded-sm text-xs [&_svg]:size-4",
+        md: "w-9 h-9 px-4 rounded-md [&_svg]:size-5",
+        lg: "w-10 h-10 rounded-md [&_svg]:size-6",
+        icon: "h-9 w-9 [&_svg]:size-5 rounded-sm"
+      },
+      disabled: {
+        true: "cursor-not-allowed contrast-50",
+        false: "cursor-pointer"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // contained
+      {
+        variant: "contained",
+        color: "primary",
+        disabled: !1,
+        className: "bg-typography-primary border-typography-primary text-white dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
+      },
+      {
+        variant: "contained",
+        color: "secondary",
+        disabled: !1,
+        className: "bg-gray-2 border-gray-2 text-typography-primary dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
+      },
+      {
+        variant: "contained",
+        color: "error",
+        disabled: !1,
+        className: "bg-typography-error/90 border-typography-error/90 text-white dark:bg-typography-error/80 dark:border-typography-error/80 dark:text-typography-primary"
+      },
+      {
+        variant: "contained",
+        color: "success",
+        disabled: !1,
+        className: "bg-typography-success/90 border-typography-success/90 text-white dark:bg-typography-success/80 dark:border-typography-success/80 dark:text-typography-primary"
+      },
+      // outlined
+      {
+        variant: "outlined",
+        color: "primary",
+        disabled: !1,
+        className: "border-typography-primary text-typography-primary hover:bg-typography-primary/15"
+      },
+      {
+        variant: "outlined",
+        color: "secondary",
+        disabled: !1,
+        className: "border-border text-typography-secondary hover:bg-border-border/15"
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        disabled: !1,
+        className: "border-typography-error text-typography-error hover:bg-typography-error/15"
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        disabled: !1,
+        className: "border-typography-success text-typography-success hover:bg-typography-success/15"
+      },
+      // link - ghost
+      {
+        variant: ["link", "ghost"],
+        color: "primary",
+        className: "text-typography-primary"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "secondary",
+        className: "text-typography-secondary"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "success",
+        className: "text-typography-success"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "error",
+        className: "text-typography-error"
+      },
+      // ghost
+      {
+        variant: "ghost",
+        color: "primary",
+        className: "hover:bg-typography-primary/15"
+      },
+      {
+        variant: "ghost",
+        color: "secondary",
+        className: "hover:bg-typography-secondary/15"
+      },
+      {
+        variant: "ghost",
+        color: "success",
+        className: "hover:bg-typography-success/15"
+      },
+      {
+        variant: "ghost",
+        color: "error",
+        className: "hover:bg-typography-error/15"
+      }
+    ],
+    defaultVariants: {
+      variant: "contained",
+      size: "md",
+      color: "primary",
+      disabled: !1,
+      rounded: !1
+    }
+  }
+);
+export {
+  e as buttonIconVariants
+};

package/ButtonIcon/index.d.ts

@@ -0,0 +1,4 @@
+export { ButtonIcon as default, ButtonIcon } from './ButtonIcon';
+export * from './buttonIconVariants';
+export type * from './ButtonIcon.types';
+//# sourceMappingURL=index.d.ts.map

package/ButtonIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACjE,cAAc,sBAAsB,CAAC;AACrC,mBAAmB,oBAAoB,CAAC"}

package/ButtonIcon/index.js

@@ -0,0 +1,7 @@
+import { ButtonIcon as n, ButtonIcon as r } from "./ButtonIcon.js";
+import { buttonIconVariants as u } from "./buttonIconVariants.js";
+export {
+  n as ButtonIcon,
+  u as buttonIconVariants,
+  r as default
+};