@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-SM4AZOEP.js

@@ -0,0 +1,222 @@
+import { SkeletonLoader } from './chunk-QHKOBGLW.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var dashboardCardVariants = cva(
+  // Base styles (always applied)
+  [
+    "flex flex-col justify-between",
+    "rounded-2xl border bg-card text-card-foreground",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border shadow-sm",
+        ghost: "border-transparent bg-transparent shadow-none",
+        outline: "border-border bg-transparent",
+        elevated: "border-border shadow-md"
+      },
+      size: {
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var dashboardCardHeaderVariants = cva([
+  "flex items-center justify-between gap-2"
+]);
+var dashboardCardTitleVariants = cva([
+  "text-sm font-bold text-foreground"
+]);
+var dashboardCardValueVariants = cva([
+  "mt-2 flex items-baseline gap-2"
+]);
+var dashboardCardValueTextVariants = cva([
+  "text-xl font-semibold text-foreground tabular-nums"
+]);
+var dashboardCardValueDescriptionVariants = cva([
+  "text-sm text-muted-foreground"
+]);
+var dashboardCardContentVariants = cva(["mt-4"]);
+var dashboardCardFooterVariants = cva([
+  "mt-6 text-xs text-muted-foreground"
+]);
+var dashboardCardCtaLinkVariants = cva([
+  "text-primary hover:text-primary/80 hover:underline"
+]);
+function DashboardCardHeader({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardHeaderVariants(), className),
+      "data-slot": "dashboard-card-header",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardTitle({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(dashboardCardTitleVariants(), className),
+      "data-slot": "dashboard-card-title",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardValue({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardValueVariants(), className),
+      "data-slot": "dashboard-card-value",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardContentVariants(), className),
+      "data-slot": "dashboard-card-content",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardFooterVariants(), className),
+      "data-slot": "dashboard-card-footer",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCard({
+  title,
+  badge,
+  value,
+  valueDescription,
+  icon,
+  ctaText,
+  ctaLink,
+  ctaDescription,
+  loading = false,
+  variant,
+  size,
+  className,
+  children,
+  ...props
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(dashboardCardVariants({ variant, size }), className),
+        "data-slot": "dashboard-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardHeaderVariants()), children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-5 w-12" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn(dashboardCardValueVariants()), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-7 w-32" }) }),
+          /* @__PURE__ */ jsx("div", { className: cn(dashboardCardContentVariants()), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-32 w-full" }) })
+        ]
+      }
+    );
+  }
+  const hasSimpleProps = title || value;
+  if (!hasSimpleProps && children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(dashboardCardVariants({ variant, size }), className),
+        "data-slot": "dashboard-card",
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(dashboardCardVariants({ variant, size }), className),
+      "data-slot": "dashboard-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          (title || badge || icon) && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardHeaderVariants()), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              title && /* @__PURE__ */ jsx("h3", { className: cn(dashboardCardTitleVariants()), children: title }),
+              badge
+            ] }),
+            icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground",
+                "data-slot": "dashboard-card-icon",
+                children: icon
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardValueVariants()), children: [
+            /* @__PURE__ */ jsx("span", { className: cn(dashboardCardValueTextVariants()), children: value }),
+            valueDescription && /* @__PURE__ */ jsx("span", { className: cn(dashboardCardValueDescriptionVariants()), children: valueDescription })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: cn(dashboardCardContentVariants()), children })
+        ] }),
+        (ctaText || ctaDescription) && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardFooterVariants()), children: [
+          ctaDescription,
+          " ",
+          ctaText && ctaLink && /* @__PURE__ */ jsx("a", { className: cn(dashboardCardCtaLinkVariants()), href: ctaLink, children: ctaText })
+        ] })
+      ]
+    }
+  );
+}
+DashboardCard.Header = DashboardCardHeader;
+DashboardCard.Title = DashboardCardTitle;
+DashboardCard.Value = DashboardCardValue;
+DashboardCard.Content = DashboardCardContent;
+DashboardCard.Footer = DashboardCardFooter;
+DashboardCard.displayName = "DashboardCard";
+
+export { DashboardCard, DashboardCardContent, DashboardCardFooter, DashboardCardHeader, DashboardCardTitle, DashboardCardValue, dashboardCardContentVariants, dashboardCardFooterVariants, dashboardCardHeaderVariants, dashboardCardTitleVariants, dashboardCardValueVariants, dashboardCardVariants };
+//# sourceMappingURL=chunk-SM4AZOEP.js.map
+//# sourceMappingURL=chunk-SM4AZOEP.js.map

package/dist/chunk-SM4AZOEP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DashboardCard/DashboardCard.variants.ts","../src/components/data-display/DashboardCard/DashboardCard.tsx"],"names":[],"mappings":"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","file":"chunk-SM4AZOEP.js","sourcesContent":["// DashboardCard/DashboardCard.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * DashboardCard style variants using CVA\n */\nexport const dashboardCardVariants = cva(\n  // Base styles (always applied)\n  [\n    \"flex flex-col justify-between\",\n    \"rounded-2xl border bg-card text-card-foreground\",\n    \"transition-colors duration-200\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border shadow-sm\",\n        ghost: \"border-transparent bg-transparent shadow-none\",\n        outline: \"border-border bg-transparent\",\n        elevated: \"border-border shadow-md\",\n      },\n      size: {\n        sm: \"p-4\",\n        md: \"p-6\",\n        lg: \"p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nexport const dashboardCardHeaderVariants = cva([\n  \"flex items-center justify-between gap-2\",\n])\n\nexport const dashboardCardTitleVariants = cva([\n  \"text-sm font-bold text-foreground\",\n])\n\nexport const dashboardCardValueVariants = cva([\n  \"mt-2 flex items-baseline gap-2\",\n])\n\nexport const dashboardCardValueTextVariants = cva([\n  \"text-xl font-semibold text-foreground tabular-nums\",\n])\n\nexport const dashboardCardValueDescriptionVariants = cva([\n  \"text-sm text-muted-foreground\",\n])\n\nexport const dashboardCardContentVariants = cva([\"mt-4\"])\n\nexport const dashboardCardFooterVariants = cva([\n  \"mt-6 text-xs text-muted-foreground\",\n])\n\nexport const dashboardCardCtaLinkVariants = cva([\n  \"text-primary hover:text-primary/80 hover:underline\",\n])\n\nexport type DashboardCardVariantProps = VariantProps<\n  typeof dashboardCardVariants\n>\n","// DashboardCard/DashboardCard.tsx\nimport type {\n  DashboardCardContentProps,\n  DashboardCardFooterProps,\n  DashboardCardHeaderProps,\n  DashboardCardProps,\n  DashboardCardTitleProps,\n  DashboardCardValueProps,\n} from \"./DashboardCard.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\nimport {\n  dashboardCardContentVariants,\n  dashboardCardCtaLinkVariants,\n  dashboardCardFooterVariants,\n  dashboardCardHeaderVariants,\n  dashboardCardTitleVariants,\n  dashboardCardValueDescriptionVariants,\n  dashboardCardValueTextVariants,\n  dashboardCardValueVariants,\n  dashboardCardVariants,\n} from \"./DashboardCard.variants\"\n\n/**\n * DashboardCardHeader - Header section with title and optional badge/icon\n */\nfunction DashboardCardHeader({\n  className,\n  children,\n  ...props\n}: DashboardCardHeaderProps) {\n  return (\n    <div\n      className={cn(dashboardCardHeaderVariants(), className)}\n      data-slot=\"dashboard-card-header\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * DashboardCardTitle - Title text for the card\n */\nfunction DashboardCardTitle({\n  className,\n  children,\n  ...props\n}: DashboardCardTitleProps) {\n  return (\n    <h3\n      className={cn(dashboardCardTitleVariants(), className)}\n      data-slot=\"dashboard-card-title\"\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\n/**\n * DashboardCardValue - Main value display area\n */\nfunction DashboardCardValue({\n  className,\n  children,\n  ...props\n}: DashboardCardValueProps) {\n  return (\n    <div\n      className={cn(dashboardCardValueVariants(), className)}\n      data-slot=\"dashboard-card-value\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * DashboardCardContent - Content area for charts, progress bars, etc.\n */\nfunction DashboardCardContent({\n  className,\n  children,\n  ...props\n}: DashboardCardContentProps) {\n  return (\n    <div\n      className={cn(dashboardCardContentVariants(), className)}\n      data-slot=\"dashboard-card-content\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * DashboardCardFooter - Footer with optional CTA\n */\nfunction DashboardCardFooter({\n  className,\n  children,\n  ...props\n}: DashboardCardFooterProps) {\n  return (\n    <div\n      className={cn(dashboardCardFooterVariants(), className)}\n      data-slot=\"dashboard-card-footer\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * DashboardCard - Card wrapper for dashboard widgets\n *\n * Displays KPIs, charts, progress bars, and other dashboard content\n * with a consistent structure: header, value, content, and footer.\n *\n * @example\n * ```tsx\n * // Simple usage\n * <DashboardCard\n *   title=\"Revenue\"\n *   value=\"$45,231\"\n *   valueDescription=\"total this month\"\n *   badge={<Badge variant=\"success\">+12%</Badge>}\n * >\n *   <LineChart data={chartData} />\n * </DashboardCard>\n *\n * // Composable usage\n * <DashboardCard>\n *   <DashboardCard.Header>\n *     <DashboardCard.Title>Custom Title</DashboardCard.Title>\n *   </DashboardCard.Header>\n *   <DashboardCard.Value>$99,999</DashboardCard.Value>\n *   <DashboardCard.Content>\n *     <ProgressBar value={75} />\n *   </DashboardCard.Content>\n *   <DashboardCard.Footer>\n *     <a href=\"/details\">View details</a>\n *   </DashboardCard.Footer>\n * </DashboardCard>\n * ```\n */\nfunction DashboardCard({\n  title,\n  badge,\n  value,\n  valueDescription,\n  icon,\n  ctaText,\n  ctaLink,\n  ctaDescription,\n  loading = false,\n  variant,\n  size,\n  className,\n  children,\n  ...props\n}: DashboardCardProps) {\n  // Loading state\n  if (loading) {\n    return (\n      <div\n        className={cn(dashboardCardVariants({ variant, size }), className)}\n        data-slot=\"dashboard-card\"\n        {...props}\n      >\n        <div className={cn(dashboardCardHeaderVariants())}>\n          <SkeletonLoader className=\"h-4 w-24\" />\n          <SkeletonLoader className=\"h-5 w-12\" />\n        </div>\n        <div className={cn(dashboardCardValueVariants())}>\n          <SkeletonLoader className=\"h-7 w-32\" />\n        </div>\n        <div className={cn(dashboardCardContentVariants())}>\n          <SkeletonLoader className=\"h-32 w-full\" />\n        </div>\n      </div>\n    )\n  }\n\n  // If only children provided, render as composable\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Intentional: checking truthiness, not null/undefined\n  const hasSimpleProps = title || value\n\n  if (!hasSimpleProps && children) {\n    return (\n      <div\n        className={cn(dashboardCardVariants({ variant, size }), className)}\n        data-slot=\"dashboard-card\"\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  // Simple/declarative usage\n  return (\n    <div\n      className={cn(dashboardCardVariants({ variant, size }), className)}\n      data-slot=\"dashboard-card\"\n      {...props}\n    >\n      <div>\n        {/* Header */}\n        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Intentional: checking truthiness */}\n        {(title || badge || icon) && (\n          <div className={cn(dashboardCardHeaderVariants())}>\n            <div className=\"flex items-center gap-2\">\n              {title && (\n                <h3 className={cn(dashboardCardTitleVariants())}>{title}</h3>\n              )}\n              {badge}\n            </div>\n            {icon && (\n              <span\n                className=\"text-muted-foreground\"\n                data-slot=\"dashboard-card-icon\"\n              >\n                {icon}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Value */}\n        {value && (\n          <div className={cn(dashboardCardValueVariants())}>\n            <span className={cn(dashboardCardValueTextVariants())}>\n              {value}\n            </span>\n            {valueDescription && (\n              <span className={cn(dashboardCardValueDescriptionVariants())}>\n                {valueDescription}\n              </span>\n            )}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && (\n          <div className={cn(dashboardCardContentVariants())}>{children}</div>\n        )}\n      </div>\n\n      {/* Footer/CTA */}\n      {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Intentional: checking truthiness */}\n      {(ctaText || ctaDescription) && (\n        <div className={cn(dashboardCardFooterVariants())}>\n          {ctaDescription}{\" \"}\n          {ctaText && ctaLink && (\n            <a className={cn(dashboardCardCtaLinkVariants())} href={ctaLink}>\n              {ctaText}\n            </a>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// Attach subcomponents\nDashboardCard.Header = DashboardCardHeader\nDashboardCard.Title = DashboardCardTitle\nDashboardCard.Value = DashboardCardValue\nDashboardCard.Content = DashboardCardContent\nDashboardCard.Footer = DashboardCardFooter\n\nDashboardCard.displayName = \"DashboardCard\"\n\nexport {\n  DashboardCard,\n  DashboardCardContent,\n  DashboardCardFooter,\n  DashboardCardHeader,\n  DashboardCardTitle,\n  DashboardCardValue,\n}\n"]}

package/dist/chunk-SXJMERQL.js

@@ -0,0 +1,40 @@
+import { cva } from 'class-variance-authority';
+
+// src/components/forms/ToggleGroup/ToggleGroup.variants.ts
+var toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] rounded-[var(--toggle-root-border-radius)] border-[length:var(--toggle-root-border-width)] transition-[var(--toggle-root-transition)] hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]",
+        outline: "border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] shadow-xs hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)]"
+      },
+      size: {
+        default: "h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]",
+        sm: "h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]",
+        md: "h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]",
+        lg: "h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]"
+      },
+      connected: {
+        true: "rounded-none first:rounded-l-md last:rounded-r-md",
+        false: "rounded-md"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        connected: true,
+        className: "border-l-0 first:border-l"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      connected: false
+    }
+  }
+);
+
+export { toggleGroupItemVariants };
+//# sourceMappingURL=chunk-SXJMERQL.js.map
+//# sourceMappingURL=chunk-SXJMERQL.js.map

package/dist/chunk-SXJMERQL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/ToggleGroup/ToggleGroup.variants.ts"],"names":[],"mappings":";;;AAMO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,s1BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,kKAAA;AAAA,QACT,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,8HAAA;AAAA,QACT,EAAA,EAAI,+GAAA;AAAA,QACJ,EAAA,EAAI,+GAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,SAAA,EAAW;AAAA,QACT,IAAA,EAAM,mDAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB;AAAA,QACE,OAAA,EAAS,SAAA;AAAA,QACT,SAAA,EAAW,IAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM,SAAA;AAAA,MACN,SAAA,EAAW;AAAA;AACb;AAEJ","file":"chunk-SXJMERQL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ToggleGroupItem variants - matches primitives/Toggle\n * Re-exported for forms/ToggleGroup compatibility\n */\nexport const toggleGroupItemVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] rounded-[var(--toggle-root-border-radius)] border-[length:var(--toggle-root-border-width)] transition-[var(--toggle-root-transition)] hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]\",\n        outline:\n          \"border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] shadow-xs hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)]\",\n      },\n      size: {\n        default: \"h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]\",\n        sm: \"h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]\",\n        md: \"h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]\",\n        lg: \"h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]\",\n      },\n      connected: {\n        true: \"rounded-none first:rounded-l-md last:rounded-r-md\",\n        false: \"rounded-md\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"outline\",\n        connected: true,\n        className: \"border-l-0 first:border-l\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      connected: false,\n    },\n  }\n)\n\nexport type ToggleGroupItemVariantProps = VariantProps<typeof toggleGroupItemVariants>\n"]}

package/dist/chunk-TAZPML2P.js

@@ -0,0 +1,198 @@
+import { Divider } from './chunk-3L5G7VI2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.use(ButtonGroupContext);
+}
+var buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      variant: {
+        default: "",
+        segmented: "border border-[color:var(--button-group-root-border-color-default)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none",
+        primary: "border border-[color:var(--button-group-root-border-color-primary)] bg-[color:var(--button-group-root-bg-primary)] text-[color:var(--button-group-root-fg-primary)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none"
+      },
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    compoundVariants: [
+      // Segmented variant removes default border handling (items have their own dividers)
+      {
+        variant: "segmented",
+        orientation: "horizontal",
+        className: "[&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-border"
+      },
+      {
+        variant: "segmented",
+        orientation: "vertical",
+        className: "[&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "horizontal"
+    }
+  }
+);
+var buttonGroupItemVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--button-group-item-gap)] leading-[length:var(--button-group-item-line-height)] font-[var(--button-group-item-font-weight)] transition-colors outline-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--button-group-item-height-sm)] text-[length:var(--button-group-item-font-size-sm)]",
+        md: "h-[var(--button-group-item-height-md)] text-[length:var(--button-group-item-font-size-md)]",
+        lg: "h-[var(--button-group-item-height-lg)] text-[length:var(--button-group-item-font-size-lg)]"
+      },
+      iconMode: {
+        none: "",
+        leading: "",
+        dot: "",
+        only: ""
+      },
+      current: {
+        true: "bg-[color:var(--button-group-item-background-active)]",
+        false: "bg-[color:var(--button-group-item-background)] hover:bg-[color:var(--button-group-item-background-hover)]"
+      }
+    },
+    compoundVariants: [
+      // Padding pairs per size × iconMode (only is icon-only, gets symmetric px)
+      { size: "sm", iconMode: "none", className: "px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "leading", className: "pl-2.5 pr-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "sm", iconMode: "only", className: "px-2 py-[var(--button-group-item-padding-y-sm)]" },
+      { size: "md", iconMode: "none", className: "px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "leading", className: "pl-3 pr-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]" },
+      { size: "md", iconMode: "only", className: "px-2.5 py-[var(--button-group-item-padding-y-md)]" },
+      { size: "lg", iconMode: "none", className: "px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "leading", className: "pl-3.5 pr-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "dot", className: "px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]" },
+      { size: "lg", iconMode: "only", className: "px-3 py-[var(--button-group-item-padding-y-lg)]" }
+    ],
+    defaultVariants: {
+      size: "md",
+      iconMode: "none",
+      current: false
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  variant,
+  size,
+  buttonVariant,
+  disabled,
+  children,
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({ size, buttonVariant, disabled }),
+    [size, buttonVariant, disabled]
+  );
+  return /* @__PURE__ */ jsx(ButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(buttonGroupVariants({ orientation, variant }), className),
+      "data-orientation": orientation,
+      "data-slot": "button-group",
+      "data-variant": variant,
+      role: "group",
+      ...props,
+      children
+    }
+  ) });
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-[color:var(--button-group-text-background)] flex items-center gap-2 rounded-[var(--button-group-root-radius)] border px-[var(--button-group-text-padding-x)] text-[length:var(--button-group-text-font-size)] font-[var(--button-group-text-font-weight)] shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      "data-slot": "button-group-text",
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      className: cn(
+        "bg-[color:var(--button-group-separator-color)] relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      "data-slot": "button-group-separator",
+      orientation,
+      ...props
+    }
+  );
+}
+function ButtonGroupItem({
+  className,
+  current = false,
+  iconMode = "none",
+  icon,
+  dot,
+  children,
+  disabled,
+  size = "md",
+  ...props
+}) {
+  const effectiveIconMode = icon && !children ? "only" : dot ? "dot" : icon ? "leading" : iconMode;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        buttonGroupItemVariants({
+          size,
+          iconMode: effectiveIconMode,
+          current
+        }),
+        className
+      ),
+      "data-current": current,
+      "data-slot": "button-group-item",
+      disabled,
+      type: "button",
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-2 rounded-full shrink-0",
+              typeof dot === "string" ? dot : "bg-success"
+            ),
+            "data-slot": "button-group-item-dot"
+          }
+        ),
+        icon && effectiveIconMode !== "dot" && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "button-group-item-icon", children: icon }),
+        children && effectiveIconMode !== "only" && /* @__PURE__ */ jsx("span", { "data-slot": "button-group-item-text", children })
+      ]
+    }
+  );
+}
+
+export { ButtonGroup, ButtonGroupContext, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText, buttonGroupItemVariants, buttonGroupVariants, useButtonGroup };
+//# sourceMappingURL=chunk-TAZPML2P.js.map
+//# sourceMappingURL=chunk-TAZPML2P.js.map

package/dist/chunk-TAZPML2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"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","file":"chunk-TAZPML2P.js","sourcesContent":["import type {\n  ButtonGroupContextValue,\n  ButtonGroupItemProps,\n  ButtonGroupProps,\n  ButtonGroupSeparatorProps,\n  ButtonGroupTextProps,\n} from \"./ButtonGroup.types\"\n\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Divider } from \"../Divider\"\n\n/**\n * Context for ButtonGroup prop inheritance\n * Child buttons can use useButtonGroup() to access group-level props\n */\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\n/**\n * Hook to access ButtonGroup context values\n * Returns null if not inside a ButtonGroup\n */\nfunction useButtonGroup(): ButtonGroupContextValue | null {\n  return React.use(ButtonGroupContext)\n}\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        segmented:\n          \"border border-[color:var(--button-group-root-border-color-default)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none\",\n        primary:\n          \"border border-[color:var(--button-group-root-border-color-primary)] bg-[color:var(--button-group-root-bg-primary)] text-[color:var(--button-group-root-fg-primary)] rounded-[var(--button-group-root-radius)] shadow-[var(--button-group-root-shadow)] overflow-clip isolate [&>*:not(:first-child)]:rounded-none [&>*:first-child]:rounded-l-[var(--button-group-root-radius)] [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-r-[var(--button-group-root-radius)] [&>*:last-child]:rounded-l-none\",\n      },\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    compoundVariants: [\n      // Segmented variant removes default border handling (items have their own dividers)\n      {\n        variant: \"segmented\",\n        orientation: \"horizontal\",\n        className:\n          \"[&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-border\",\n      },\n      {\n        variant: \"segmented\",\n        orientation: \"vertical\",\n        className:\n          \"[&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nconst buttonGroupItemVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--button-group-item-gap)] leading-[length:var(--button-group-item-line-height)] font-[var(--button-group-item-font-weight)] transition-colors outline-none whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:pointer-events-none disabled:text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--button-group-item-height-sm)] text-[length:var(--button-group-item-font-size-sm)]\",\n        md: \"h-[var(--button-group-item-height-md)] text-[length:var(--button-group-item-font-size-md)]\",\n        lg: \"h-[var(--button-group-item-height-lg)] text-[length:var(--button-group-item-font-size-lg)]\",\n      },\n      iconMode: {\n        none: \"\",\n        leading: \"\",\n        dot: \"\",\n        only: \"\",\n      },\n      current: {\n        true: \"bg-[color:var(--button-group-item-background-active)]\",\n        false: \"bg-[color:var(--button-group-item-background)] hover:bg-[color:var(--button-group-item-background-hover)]\",\n      },\n    },\n    compoundVariants: [\n      // Padding pairs per size × iconMode (only is icon-only, gets symmetric px)\n      { size: \"sm\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"leading\", className: \"pl-2.5 pr-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-sm)] py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"sm\", iconMode: \"only\", className: \"px-2 py-[var(--button-group-item-padding-y-sm)]\" },\n      { size: \"md\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"leading\", className: \"pl-3 pr-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-md)] py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"md\", iconMode: \"only\", className: \"px-2.5 py-[var(--button-group-item-padding-y-md)]\" },\n      { size: \"lg\", iconMode: \"none\", className: \"px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"leading\", className: \"pl-3.5 pr-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"dot\", className: \"px-[var(--button-group-item-padding-x-lg)] py-[var(--button-group-item-padding-y-lg)]\" },\n      { size: \"lg\", iconMode: \"only\", className: \"px-3 py-[var(--button-group-item-padding-y-lg)]\" },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      iconMode: \"none\",\n      current: false,\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  variant,\n  size,\n  buttonVariant,\n  disabled,\n  children,\n  ...props\n}: ButtonGroupProps) {\n  const contextValue = React.useMemo<ButtonGroupContextValue>(\n    () => ({ size, buttonVariant, disabled }),\n    [size, buttonVariant, disabled]\n  )\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        className={cn(buttonGroupVariants({ orientation, variant }), className)}\n        data-orientation={orientation}\n        data-slot=\"button-group\"\n        data-variant={variant}\n        role=\"group\"\n        {...props}\n      >\n        {children}\n      </div>\n    </ButtonGroupContext>\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: ButtonGroupTextProps) {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-[color:var(--button-group-text-background)] flex items-center gap-2 rounded-[var(--button-group-root-radius)] border px-[var(--button-group-text-padding-x)] text-[length:var(--button-group-text-font-size)] font-[var(--button-group-text-font-weight)] shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"button-group-text\"\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ButtonGroupSeparatorProps) {\n  return (\n    <Divider\n      className={cn(\n        \"bg-[color:var(--button-group-separator-color)] relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      {...props}\n    />\n  )\n}\n\n/**\n * ButtonGroupItem - Individual segment in a segmented button group\n * Use within ButtonGroup variant=\"segmented\"\n */\nfunction ButtonGroupItem({\n  className,\n  current = false,\n  iconMode = \"none\",\n  icon,\n  dot,\n  children,\n  disabled,\n  size = \"md\",\n  ...props\n}: ButtonGroupItemProps) {\n  // Determine effective icon mode based on props\n  const effectiveIconMode = icon && !children ? \"only\" : dot ? \"dot\" : icon ? \"leading\" : iconMode\n\n  return (\n    <button\n      className={cn(\n        buttonGroupItemVariants({\n          size,\n          iconMode: effectiveIconMode,\n          current,\n        }),\n        className\n      )}\n      data-current={current}\n      data-slot=\"button-group-item\"\n      disabled={disabled}\n      type=\"button\"\n      {...props}\n    >\n      {/* Status dot */}\n      {dot && (\n        <span\n          className={cn(\n            \"size-2 rounded-full shrink-0\",\n            typeof dot === \"string\" ? dot : \"bg-success\"\n          )}\n          data-slot=\"button-group-item-dot\"\n        />\n      )}\n\n      {/* Leading icon */}\n      {icon && effectiveIconMode !== \"dot\" && (\n        <span className=\"shrink-0\" data-slot=\"button-group-item-icon\">\n          {icon}\n        </span>\n      )}\n\n      {/* Text content */}\n      {children && effectiveIconMode !== \"only\" && (\n        <span data-slot=\"button-group-item-text\">{children}</span>\n      )}\n    </button>\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupContext,\n  ButtonGroupItem,\n  buttonGroupItemVariants,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n  useButtonGroup,\n}\n"]}

package/dist/chunk-TQBUBD3E.js

@@ -0,0 +1,100 @@
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { LinkIcon, CheckCircle2Icon, XCircleIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var urlLinkIconVariants = cva(
+  "flex items-center justify-center text-muted-foreground/80",
+  {
+    variants: {
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-4.5",
+        xl: "[&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var urlValidationIconVariants = cva(
+  "flex items-center justify-center transition-colors",
+  {
+    variants: {
+      validationState: {
+        idle: "text-muted-foreground",
+        valid: "text-success",
+        invalid: "text-destructive"
+      },
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-4.5",
+        xl: "[&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      validationState: "idle",
+      size: "md"
+    }
+  }
+);
+function URLInput({
+  className,
+  size = "md",
+  variant,
+  validationState = "idle",
+  showValidationIcon = false,
+  linkIcon,
+  validIcon,
+  invalidIcon,
+  disabled,
+  ...props
+}) {
+  const showValidation = showValidationIcon && validationState !== "idle";
+  const leading = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(urlLinkIconVariants({ size })),
+      "data-slot": "link-icon",
+      children: linkIcon ?? /* @__PURE__ */ jsx(LinkIcon, {})
+    }
+  );
+  const trailing = showValidation ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(urlValidationIconVariants({ size, validationState })),
+      "data-slot": "url-validation-icon",
+      children: [
+        validationState === "valid" && (validIcon ?? /* @__PURE__ */ jsx(CheckCircle2Icon, {})),
+        validationState === "invalid" && (invalidIcon ?? /* @__PURE__ */ jsx(XCircleIcon, {}))
+      ]
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      "aria-invalid": validationState === "invalid" ? true : void 0,
+      className,
+      "data-slot": "url-input",
+      disabled,
+      leadingIcon: leading,
+      size,
+      trailingIcon: trailing,
+      type: "url",
+      variant,
+      ...props
+    }
+  );
+}
+
+export { URLInput, urlLinkIconVariants, urlValidationIconVariants };
+//# sourceMappingURL=chunk-TQBUBD3E.js.map
+//# sourceMappingURL=chunk-TQBUBD3E.js.map

package/dist/chunk-TQBUBD3E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/URLInput/URLInput.variants.ts","../src/components/forms/URLInput/URLInput.tsx"],"names":[],"mappings":";;;;;;AAKO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,2DAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,yBAAA,GAA4B,GAAA;AAAA,EACvC,oDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,eAAA,EAAiB;AAAA,QACf,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO,cAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,eAAA,EAAiB,MAAA;AAAA,MACjB,IAAA,EAAM;AAAA;AACR;AAEJ;AC7BA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,eAAA,GAAkB,MAAA;AAAA,EAClB,kBAAA,GAAqB,KAAA;AAAA,EACrB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,cAAA,GAAiB,sBAAsB,eAAA,KAAoB,MAAA;AAEjE,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,MAC3C,WAAA,EAAU,WAAA;AAAA,MAET,QAAA,EAAA,QAAA,wBAAa,QAAA,EAAA,EAAS;AAAA;AAAA,GACzB;AAGF,EAAA,MAAM,WAAW,cAAA,mBACf,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,IAAA,EAAM,eAAA,EAAiB,CAAC,CAAA;AAAA,MAClE,WAAA,EAAU,qBAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,eAAA,KAAoB,OAAA,KAAY,SAAA,oBAAa,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,CAAA;AAAA,QAC/D,eAAA,KAAoB,SAAA,KAAc,WAAA,oBAAe,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA;AAAA;AAAA;AAAA,GACjE,GACE,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,eAAA,KAAoB,SAAA,GAAY,IAAA,GAAO,MAAA;AAAA,MACrD,SAAA;AAAA,MACA,WAAA,EAAU,WAAA;AAAA,MACV,QAAA;AAAA,MACA,WAAA,EAAa,OAAA;AAAA,MACb,IAAA;AAAA,MACA,YAAA,EAAc,QAAA;AAAA,MACd,IAAA,EAAK,KAAA;AAAA,MACL,OAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-TQBUBD3E.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * URL link icon visual variants\n */\nexport const urlLinkIconVariants = cva(\n  \"flex items-center justify-center text-muted-foreground/80\",\n  {\n    variants: {\n      size: {\n        xs: \"[&_svg]:size-3\",\n        sm: \"[&_svg]:size-3.5\",\n        md: \"[&_svg]:size-4\",\n        lg: \"[&_svg]:size-4.5\",\n        xl: \"[&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * URL validation icon visual variants\n */\nexport const urlValidationIconVariants = cva(\n  \"flex items-center justify-center transition-colors\",\n  {\n    variants: {\n      validationState: {\n        idle: \"text-muted-foreground\",\n        valid: \"text-success\",\n        invalid: \"text-destructive\",\n      },\n      size: {\n        xs: \"[&_svg]:size-3\",\n        sm: \"[&_svg]:size-3.5\",\n        md: \"[&_svg]:size-4\",\n        lg: \"[&_svg]:size-4.5\",\n        xl: \"[&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      validationState: \"idle\",\n      size: \"md\",\n    },\n  }\n)\n\nexport type URLLinkIconVariantProps = VariantProps<typeof urlLinkIconVariants>\nexport type URLValidationIconVariantProps = VariantProps<typeof urlValidationIconVariants>\n","\"use client\"\n\nimport type { URLInputProps } from \"./URLInput.types\"\n\nimport { CheckCircle2Icon, LinkIcon, XCircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { TextInput } from \"../TextInput\"\nimport { urlLinkIconVariants, urlValidationIconVariants } from \"./URLInput.variants\"\n\n/**\n * URLInput component with link icon and optional validation state indicator.\n * Now uses TextInput internally for consistency.\n *\n * @example\n * ```tsx\n * <URLInput placeholder=\"Enter URL\" />\n * ```\n */\nfunction URLInput({\n  className,\n  size = \"md\",\n  variant,\n  validationState = \"idle\",\n  showValidationIcon = false,\n  linkIcon,\n  validIcon,\n  invalidIcon,\n  disabled,\n  ...props\n}: URLInputProps) {\n  const showValidation = showValidationIcon && validationState !== \"idle\"\n\n  const leading = (\n    <div\n      aria-hidden=\"true\"\n      className={cn(urlLinkIconVariants({ size }))}\n      data-slot=\"link-icon\"\n    >\n      {linkIcon ?? <LinkIcon />}\n    </div>\n  )\n\n  const trailing = showValidation ? (\n    <div\n      aria-hidden=\"true\"\n      className={cn(urlValidationIconVariants({ size, validationState }))}\n      data-slot=\"url-validation-icon\"\n    >\n      {validationState === \"valid\" && (validIcon ?? <CheckCircle2Icon />)}\n      {validationState === \"invalid\" && (invalidIcon ?? <XCircleIcon />)}\n    </div>\n  ) : undefined\n\n  return (\n    <TextInput\n      aria-invalid={validationState === \"invalid\" ? true : undefined}\n      className={className}\n      data-slot=\"url-input\"\n      disabled={disabled}\n      leadingIcon={leading}\n      size={size}\n      trailingIcon={trailing}\n      type=\"url\"\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport { URLInput }"]}