@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-QUENPT24.js

@@ -0,0 +1,100 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var emptyMediaVariants = cva(
+  // Base styles (always applied)
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-[color:var(--empty-state-media-icon-bg)] text-[color:var(--empty-state-media-icon-fg)] flex size-[var(--empty-state-media-icon-size)] shrink-0 items-center justify-center rounded-[var(--empty-state-media-icon-radius)] [&_svg:not([class*='size-'])]:size-[var(--empty-state-media-icon-icon-size)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      "data-slot": "empty",
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      "data-slot": "empty-header",
+      ...props
+    }
+  );
+}
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(emptyMediaVariants({ variant, className })),
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("text-lg font-medium tracking-tight", className),
+      "data-slot": "empty-title",
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      "data-slot": "empty-description",
+      ...props
+    }
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      "data-slot": "empty-content",
+      ...props
+    }
+  );
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };
+//# sourceMappingURL=chunk-QUENPT24.js.map
+//# sourceMappingURL=chunk-QUENPT24.js.map

package/dist/chunk-QUENPT24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.variants.ts","../src/components/data-display/EmptyState/EmptyState.tsx"],"names":[],"mappings":";;;;AAUO,IAAM,kBAAA,GAAqB,GAAA;AAAA;AAAA,EAEhC,6FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,gBAAA;AAAA,QACT,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;ACnBA,SAAS,KAAA,CAAM,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACnE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,8HAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,OAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,uDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAA0E;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,OAAA,EAAS,SAAA,EAAW,CAAC,CAAA;AAAA,MACxD,WAAA,EAAU,YAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACb,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,oCAAA,EAAsC,SAAS,CAAA;AAAA,MAC7D,WAAA,EAAU,aAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAC5E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yGAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC1E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+EAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,eAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-QUENPT24.js","sourcesContent":["// EmptyState/EmptyState.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * EmptyMedia style variants using CVA\n *\n * Controls the visual presentation of the media/icon area in an EmptyState.\n *\n * @see https://cva.style/docs\n */\nexport const emptyMediaVariants = cva(\n  // Base styles (always applied)\n  \"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-[color:var(--empty-state-media-icon-bg)] text-[color:var(--empty-state-media-icon-fg)] flex size-[var(--empty-state-media-icon-size)] shrink-0 items-center justify-center rounded-[var(--empty-state-media-icon-radius)] [&_svg:not([class*='size-'])]:size-[var(--empty-state-media-icon-icon-size)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n// Export variant prop types\nexport type EmptyMediaVariantProps = VariantProps<typeof emptyMediaVariants>\n","import { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { emptyMediaVariants } from \"./EmptyState.variants\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\n        className\n      )}\n      data-slot=\"empty\"\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex max-w-sm flex-col items-center gap-2 text-center\",\n        className\n      )}\n      data-slot=\"empty-header\"\n      {...props}\n    />\n  )\n}\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      className={cn(emptyMediaVariants({ variant, className }))}\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      data-slot=\"empty-title\"\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      data-slot=\"empty-description\"\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      data-slot=\"empty-content\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  emptyMediaVariants,\n  EmptyTitle,\n}\n"]}

package/dist/chunk-QYWCXM7F.js

@@ -0,0 +1,96 @@
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuItem } from './chunk-OXDWUKGP.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-3BBOSSDG.js';
+import { Badge } from './chunk-4GVOOXYD.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { ChevronsUpDown, Check } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function AccountSwitch({
+  className,
+  accounts,
+  triggerShape = "pill",
+  header,
+  footer,
+  onSelect,
+  ...props
+}) {
+  const currentAccount = accounts.find((a) => a.isCurrent) ?? accounts[0];
+  const handleSelect = (account) => {
+    if (account.id !== currentAccount?.id) {
+      onSelect?.(account);
+    }
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 h-[var(--input-size-md-h)] border bg-card text-card-foreground transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          triggerShape === "pill" ? "rounded-full pl-1.5 pr-3" : "rounded-[var(--radius-md)] px-3",
+          className
+        ),
+        "data-slot": "account-switch-trigger",
+        type: "button",
+        ...props,
+        children: [
+          currentAccount && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+              currentAccount.avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { alt: currentAccount.name, src: currentAccount.avatarSrc }),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: currentAccount.avatarFallback ?? currentAccount.name.charAt(0) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate max-w-[var(--account-switch-name-max-width)]", children: currentAccount.name })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              "aria-hidden": "true",
+              className: "size-3.5 text-muted-foreground shrink-0 ml-auto"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "min-w-[var(--account-switch-content-min-width)]",
+        "data-slot": "account-switch-content",
+        children: [
+          header && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: header }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Contas" }),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: accounts.map((account) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              className: "flex items-center gap-2",
+              onClick: () => {
+                handleSelect(account);
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+                  account.avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { alt: account.name, src: account.avatarSrc }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { children: account.avatarFallback ?? account.name.charAt(0) })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: account.name }),
+                account.plan && /* @__PURE__ */ jsx(Badge, { color: account.plan === "PRO" ? "primary" : "muted", size: "sm", type: "pill-color", children: account.plan }),
+                account.isCurrent && /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3.5 text-primary" })
+              ]
+            },
+            account.id
+          )) }),
+          footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            footer
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { AccountSwitch };
+//# sourceMappingURL=chunk-QYWCXM7F.js.map
+//# sourceMappingURL=chunk-QYWCXM7F.js.map

package/dist/chunk-QYWCXM7F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AccountSwitch/AccountSwitch.tsx"],"names":[],"mappings":"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","file":"chunk-QYWCXM7F.js","sourcesContent":["\"use client\"\n\nimport type { AccountSwitchAccount, AccountSwitchProps } from \"./AccountSwitch.types\"\n\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\"\nimport { Badge } from \"../../primitives/Badge\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu\"\n\nfunction AccountSwitch({\n  className,\n  accounts,\n  triggerShape = \"pill\",\n  header,\n  footer,\n  onSelect,\n  ...props\n}: AccountSwitchProps) {\n  const currentAccount = accounts.find((a) => a.isCurrent) ?? accounts[0]\n\n  const handleSelect = (account: AccountSwitchAccount) => {\n    if (account.id !== currentAccount?.id) {\n      onSelect?.(account)\n    }\n  }\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          className={cn(\n            \"inline-flex items-center gap-2 h-[var(--input-size-md-h)] border bg-card text-card-foreground transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\",\n            triggerShape === \"pill\"\n              ? \"rounded-full pl-1.5 pr-3\"\n              : \"rounded-[var(--radius-md)] px-3\",\n            className\n          )}\n          data-slot=\"account-switch-trigger\"\n          type=\"button\"\n          {...props}\n        >\n          {currentAccount && (\n            <>\n              <Avatar size=\"xs\">\n                {currentAccount.avatarSrc && (\n                  <AvatarImage alt={currentAccount.name} src={currentAccount.avatarSrc} />\n                )}\n                <AvatarFallback>\n                  {currentAccount.avatarFallback ?? currentAccount.name.charAt(0)}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"text-sm font-medium truncate max-w-[var(--account-switch-name-max-width)]\">\n                {currentAccount.name}\n              </span>\n            </>\n          )}\n          <ChevronsUpDown\n            aria-hidden=\"true\"\n            className=\"size-3.5 text-muted-foreground shrink-0 ml-auto\"\n          />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align=\"start\"\n        className=\"min-w-[var(--account-switch-content-min-width)]\"\n        data-slot=\"account-switch-content\"\n      >\n        {header && (\n          <>\n            <div className=\"px-2 py-1.5\">{header}</div>\n            <DropdownMenuSeparator />\n          </>\n        )}\n        <DropdownMenuLabel className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n          Contas\n        </DropdownMenuLabel>\n        <DropdownMenuGroup>\n          {accounts.map((account) => (\n            <DropdownMenuItem\n              key={account.id}\n              className=\"flex items-center gap-2\"\n              onClick={() => {\n                handleSelect(account)\n              }}\n            >\n              <Avatar size=\"xs\">\n                {account.avatarSrc && (\n                  <AvatarImage alt={account.name} src={account.avatarSrc} />\n                )}\n                <AvatarFallback>\n                  {account.avatarFallback ?? account.name.charAt(0)}\n                </AvatarFallback>\n              </Avatar>\n              <span className=\"flex-1 truncate\">{account.name}</span>\n              {account.plan && (\n                <Badge color={account.plan === \"PRO\" ? \"primary\" : \"muted\"} size=\"sm\" type=\"pill-color\">\n                  {account.plan}\n                </Badge>\n              )}\n              {account.isCurrent && <Check aria-hidden=\"true\" className=\"size-3.5 text-primary\" />}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n        {footer && (\n          <>\n            <DropdownMenuSeparator />\n            {footer}\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\nexport { AccountSwitch }\n"]}

package/dist/chunk-R52QIEJZ.js

@@ -0,0 +1,183 @@
+import { Textarea } from './chunk-U6EOAIPK.js';
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { Button } from './chunk-6TBA37U7.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var inputGroupVariants = cva(
+  // Base styles
+  [
+    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--input-group-radius)] border shadow-xs transition-[color,box-shadow] outline-none",
+    "min-w-0 has-[>textarea]:h-auto",
+    // Variants based on alignment
+    "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+    "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+    // Focus state
+    "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+    // Error state
+    "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        md: "h-9",
+        lg: "h-10"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[var(--input-group-button-radius)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+var inputGroupButtonVariants = cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[var(--input-group-button-radius)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-[var(--input-group-button-radius)] has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[var(--input-group-button-radius)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+var inputGroupInputVariants = cva(
+  "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+);
+var inputGroupTextareaVariants = cva(
+  "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent"
+);
+var InputGroupContext = React.createContext({});
+function InputGroup({
+  className,
+  size,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(InputGroupContext, { value: { disabled }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputGroupVariants({ size }), className),
+      "data-disabled": disabled ?? void 0,
+      "data-slot": "input-group",
+      role: "group",
+      ...props
+    }
+  ) });
+}
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputGroupAddonVariants({ align }), className),
+      "data-align": align,
+      "data-slot": "input-group-addon",
+      role: "group",
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  disabled,
+  ...props
+}) {
+  const group = React.use(InputGroupContext);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(inputGroupButtonVariants({ size }), className),
+      "data-size": size,
+      disabled: disabled ?? group.disabled,
+      type,
+      variant,
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  disabled,
+  ...props
+}) {
+  const group = React.use(InputGroupContext);
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      className: cn(inputGroupInputVariants(), className),
+      "data-slot": "input-group-control",
+      disabled: disabled ?? group.disabled,
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  disabled,
+  ...props
+}) {
+  const group = React.use(InputGroupContext);
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      className: cn(inputGroupTextareaVariants(), className),
+      "data-slot": "input-group-control",
+      disabled: disabled ?? group.disabled,
+      ...props
+    }
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupInputVariants, inputGroupTextareaVariants, inputGroupVariants };
+//# sourceMappingURL=chunk-R52QIEJZ.js.map
+//# sourceMappingURL=chunk-R52QIEJZ.js.map

package/dist/chunk-R52QIEJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputGroup/InputGroup.variants.ts","../src/components/forms/InputGroup/InputGroup.tsx"],"names":[],"mappings":"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","file":"chunk-R52QIEJZ.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputGroup container variant styles using CVA\n */\nexport const inputGroupVariants = cva(\n  // Base styles\n  [\n    \"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--input-group-radius)] border shadow-xs transition-[color,box-shadow] outline-none\",\n    \"min-w-0 has-[>textarea]:h-auto\",\n\n    // Variants based on alignment\n    \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n    \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n    \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n    // Focus state\n    \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\n\n    // Error state\n    \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-8\",\n        md: \"h-9\",\n        lg: \"h-10\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputGroupAddon variant styles using CVA\n */\nexport const inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[var(--input-group-button-radius)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\n/**\n * InputGroupButton variant styles using CVA\n */\nexport const inputGroupButtonVariants = cva(\n  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-2 rounded-[var(--input-group-button-radius)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        sm: \"h-8 px-2.5 gap-1.5 rounded-[var(--input-group-button-radius)] has-[>svg]:px-2.5\",\n        \"icon-xs\":\n          \"size-6 rounded-[var(--input-group-button-radius)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\n/**\n * InputGroupInput variant styles (for the input within the group)\n */\nexport const inputGroupInputVariants = cva(\n  \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\"\n)\n\n/**\n * InputGroupTextarea variant styles (for the textarea within the group)\n */\nexport const inputGroupTextareaVariants = cva(\n  \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\"\n)\n\n// Export variant types\nexport type InputGroupVariantProps = VariantProps<typeof inputGroupVariants>\nexport type InputGroupAddonVariantProps = VariantProps<typeof inputGroupAddonVariants>\nexport type InputGroupButtonVariantProps = VariantProps<typeof inputGroupButtonVariants>\nexport type InputGroupInputVariantProps = VariantProps<typeof inputGroupInputVariants>\nexport type InputGroupTextareaVariantProps = VariantProps<typeof inputGroupTextareaVariants>\n","\"use client\"\n\nimport type {\n  InputGroupAddonProps,\n  InputGroupButtonProps,\n  InputGroupInputProps,\n  InputGroupProps,\n  InputGroupTextareaProps,\n  InputGroupTextProps,\n} from \"./InputGroup.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Button } from \"../../primitives/Button\"\nimport { Textarea } from \"../Textarea\"\nimport { TextInput, type TextInputProps } from \"../TextInput\"\nimport {\n  inputGroupAddonVariants,\n  inputGroupButtonVariants,\n  inputGroupInputVariants,\n  inputGroupTextareaVariants,\n  inputGroupVariants,\n} from \"./InputGroup.variants\"\n\n/**\n * Context that propagates the root `disabled` state down to control children\n * (InputGroupInput / InputGroupTextarea / InputGroupButton) so a single\n * `<InputGroup disabled>` disables the whole composite.\n */\nconst InputGroupContext = React.createContext<{ disabled?: boolean }>({})\n\nfunction InputGroup({\n  className,\n  size,\n  disabled,\n  ...props\n}: InputGroupProps) {\n  return (\n    <InputGroupContext value={{ disabled }}>\n      <div\n        className={cn(inputGroupVariants({ size }), className)}\n        data-disabled={disabled ?? undefined}\n        data-slot=\"input-group\"\n        role=\"group\"\n        {...props}\n      />\n    </InputGroupContext>\n  )\n}\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      data-align={align}\n      data-slot=\"input-group-addon\"\n      role=\"group\"\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  disabled,\n  ...props\n}: InputGroupButtonProps) {\n  const group = React.use(InputGroupContext)\n\n  return (\n    <Button\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      data-size={size}\n      disabled={disabled ?? group.disabled}\n      type={type}\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  disabled,\n  ...props\n}: InputGroupInputProps) {\n  const group = React.use(InputGroupContext)\n\n  return (\n    <TextInput\n      className={cn(inputGroupInputVariants(), className)}\n      data-slot=\"input-group-control\"\n      disabled={disabled ?? group.disabled}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  disabled,\n  ...props\n}: InputGroupTextareaProps) {\n  const group = React.use(InputGroupContext)\n\n  return (\n    <Textarea\n      className={cn(inputGroupTextareaVariants(), className)}\n      data-slot=\"input-group-control\"\n      disabled={disabled ?? group.disabled}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n}\n\n// Re-export types\nexport type { TextInputProps }\n"]}