@etus/ui 0.4.0-beta.1 → 0.4.0-beta.11

package/dist/chunk-FBFP6LWC.js

@@ -0,0 +1,143 @@
+import { buttonVariants } from './chunk-6TBA37U7.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--alert-dialog-overlay-bg)]",
+        className
+      ),
+      "data-slot": "alert-dialog-overlay",
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        className: cn(
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] duration-200",
+          "bg-[color:var(--alert-dialog-content-bg)] rounded-[var(--alert-dialog-content-radius)] border-[color:var(--alert-dialog-content-border)] shadow-[var(--alert-dialog-content-shadow)] gap-[var(--alert-dialog-content-gap)] p-[var(--alert-dialog-content-padding)] max-w-[var(--alert-dialog-content-max-width)]",
+          className
+        ),
+        "data-slot": "alert-dialog-content",
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-[var(--alert-dialog-header-gap)] text-center sm:text-left", className),
+      "data-slot": "alert-dialog-header",
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse gap-[var(--alert-dialog-footer-gap)] sm:flex-row sm:justify-end",
+        className
+      ),
+      "data-slot": "alert-dialog-footer",
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      className: cn("text-lg font-semibold", className),
+      "data-slot": "alert-dialog-title",
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      className: cn("text-muted-foreground text-sm", className),
+      "data-slot": "alert-dialog-description",
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(buttonVariants({ variant }), className),
+      "data-slot": "alert-dialog-action",
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      "data-slot": "alert-dialog-cancel",
+      ...props
+    }
+  );
+}
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+//# sourceMappingURL=chunk-FBFP6LWC.js.map
+//# sourceMappingURL=chunk-FBFP6LWC.js.map

package/dist/chunk-FBFP6LWC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":";;;;;;AAQA,SAAS,WAAA,CAAY;AAAA,EACnB,GAAG;AACL,CAAA,EAA2D;AACzD,EAAA,2BAA6B,oBAAA,CAAA,IAAA,EAArB,EAA0B,WAAA,EAAU,cAAA,EAAgB,GAAG,KAAA,EAAO,CAAA;AACxE;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,2BACwB,oBAAA,CAAA,OAAA,EAArB,EAA6B,WAAA,EAAU,sBAAA,EAAwB,GAAG,KAAA,EAAO,CAAA;AAE9E;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,GAAG;AACL,CAAA,EAA6D;AAC3D,EAAA,2BACwB,oBAAA,CAAA,MAAA,EAArB,EAA4B,WAAA,EAAU,qBAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAE5E;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,OAAA;AAAA,IAArB;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,sLAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,sBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8D;AAC5D,EAAA,4BACG,iBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,CAAA;AAAA,oBACpB,GAAA;AAAA,MAAsB,oBAAA,CAAA,OAAA;AAAA,MAArB;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,qRAAA;AAAA,UACA,kTAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,WAAA,EAAU,sBAAA;AAAA,QACT,GAAG;AAAA;AAAA;AACN,GAAA,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACtG,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,uFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,gBAAA,CAAiB;AAAA,EACxB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4D;AAC1D,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,KAAA;AAAA,IAArB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,MAChD,WAAA,EAAU,oBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,sBAAA,CAAuB;AAAA,EAC9B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkE;AAChE,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,WAAA;AAAA,IAArB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACxD,WAAA,EAAU,0BAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,GAAG;AACL,CAAA,EAEG;AACD,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,MAAA;AAAA,IAArB;AAAA,MACC,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACpD,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6D;AAC3D,EAAA,uBACE,GAAA;AAAA,IAAsB,oBAAA,CAAA,MAAA;AAAA,IAArB;AAAA,MACC,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,MAC/D,WAAA,EAAU,qBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-FBFP6LWC.js","sourcesContent":["\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { buttonVariants } from \"../../primitives/Button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[color:var(--alert-dialog-overlay-bg)]\",\n        className\n      )}\n      data-slot=\"alert-dialog-overlay\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        className={cn(\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] duration-200\",\n          \"bg-[color:var(--alert-dialog-content-bg)] rounded-[var(--alert-dialog-content-radius)] border-[color:var(--alert-dialog-content-border)] shadow-[var(--alert-dialog-content-shadow)] gap-[var(--alert-dialog-content-gap)] p-[var(--alert-dialog-content-padding)] max-w-[var(--alert-dialog-content-max-width)]\",\n          className\n        )}\n        data-slot=\"alert-dialog-content\"\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-[var(--alert-dialog-header-gap)] text-center sm:text-left\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-[var(--alert-dialog-footer-gap)] sm:flex-row sm:justify-end\",\n        className\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\"text-lg font-semibold\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & {\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants({ variant }), className)}\n      data-slot=\"alert-dialog-action\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      data-slot=\"alert-dialog-cancel\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"]}

package/dist/chunk-FCSYPOHF.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var containerVariants = cva(
+  [
+    "w-full"
+  ],
+  {
+    variants: {
+      /**
+       * Maximum width of the container
+       * - sm: 640px - Forms, focused content
+       * - md: 768px - Articles, documentation
+       * - lg: 1024px - General content pages
+       * - xl: 1280px - Dashboards, applications (default)
+       * - 2xl: 1536px - Wide-screen applications
+       * - full: 100% - No width limit
+       */
+      maxWidth: {
+        sm: "max-w-screen-sm",
+        md: "max-w-screen-md",
+        lg: "max-w-screen-lg",
+        xl: "max-w-screen-xl",
+        "2xl": "max-w-screen-2xl",
+        full: "max-w-full"
+      },
+      /**
+       * Horizontal padding
+       * - none: No padding
+       * - sm: Compact padding (px-4)
+       * - md: Responsive padding (px-4 sm:px-6 lg:px-8)
+       * - lg: Generous padding (px-6 sm:px-8 lg:px-12)
+       */
+      padding: {
+        none: "",
+        sm: "px-4",
+        md: "px-4 sm:px-6 lg:px-8",
+        lg: "px-6 sm:px-8 lg:px-12"
+      },
+      /**
+       * Center the container with mx-auto
+       */
+      centered: {
+        true: "mx-auto",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      maxWidth: "xl",
+      padding: "md",
+      centered: true
+    }
+  }
+);
+function Container({
+  as: Component = "div",
+  maxWidth,
+  padding,
+  centered,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(containerVariants({ maxWidth, padding, centered }), className),
+      "data-slot": "container",
+      ...props
+    }
+  );
+}
+
+export { Container, containerVariants };
+//# sourceMappingURL=chunk-FCSYPOHF.js.map
+//# sourceMappingURL=chunk-FCSYPOHF.js.map

package/dist/chunk-FCSYPOHF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Container/Container.variants.ts","../src/components/layout/Container/Container.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,iBAAA,GAAoB,GAAA;AAAA,EAC/B;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUR,QAAA,EAAU;AAAA,QACR,EAAA,EAAI,iBAAA;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,KAAA,EAAO,kBAAA;AAAA,QACP,IAAA,EAAM;AAAA,OACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,EAAA;AAAA,QACN,EAAA,EAAI,MAAA;AAAA,QACJ,EAAA,EAAI,sBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA;AAAA;AAAA;AAAA,MAIA,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,SAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU,IAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU;AAAA;AACZ;AAEJ;ACjDA,SAAS,SAAA,CAAU;AAAA,EACjB,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,UAAU,OAAA,EAAS,QAAA,EAAU,CAAA,EAAG,SAAS,CAAA;AAAA,MAC3E,WAAA,EAAU,WAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-FCSYPOHF.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Container variant styles\n * Layout component for centering and limiting content width\n */\nexport const containerVariants = cva(\n  [\n    \"w-full\",\n  ],\n  {\n    variants: {\n      /**\n       * Maximum width of the container\n       * - sm: 640px - Forms, focused content\n       * - md: 768px - Articles, documentation\n       * - lg: 1024px - General content pages\n       * - xl: 1280px - Dashboards, applications (default)\n       * - 2xl: 1536px - Wide-screen applications\n       * - full: 100% - No width limit\n       */\n      maxWidth: {\n        sm: \"max-w-screen-sm\",\n        md: \"max-w-screen-md\",\n        lg: \"max-w-screen-lg\",\n        xl: \"max-w-screen-xl\",\n        \"2xl\": \"max-w-screen-2xl\",\n        full: \"max-w-full\",\n      },\n      /**\n       * Horizontal padding\n       * - none: No padding\n       * - sm: Compact padding (px-4)\n       * - md: Responsive padding (px-4 sm:px-6 lg:px-8)\n       * - lg: Generous padding (px-6 sm:px-8 lg:px-12)\n       */\n      padding: {\n        none: \"\",\n        sm: \"px-4\",\n        md: \"px-4 sm:px-6 lg:px-8\",\n        lg: \"px-6 sm:px-8 lg:px-12\",\n      },\n      /**\n       * Center the container with mx-auto\n       */\n      centered: {\n        true: \"mx-auto\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      maxWidth: \"xl\",\n      padding: \"md\",\n      centered: true,\n    },\n  }\n)\n\nexport type ContainerVariantProps = VariantProps<typeof containerVariants>\n","import type { ContainerProps } from \"./Container.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { containerVariants } from \"./Container.variants\"\n\nfunction Container({\n  as: Component = \"div\",\n  maxWidth,\n  padding,\n  centered,\n  className,\n  ...props\n}: ContainerProps) {\n  return (\n    <Component\n      className={cn(containerVariants({ maxWidth, padding, centered }), className)}\n      data-slot=\"container\"\n      {...props}\n    />\n  )\n}\n\nexport { Container }\n"]}

package/dist/chunk-FDES5YDF.js

@@ -0,0 +1,159 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var barListVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListItemVariants = cva(
+  "relative flex items-center",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+var barListBarVariants = cva(
+  "absolute left-0 h-full rounded-[var(--radius-sm)] transition-all duration-300",
+  {
+    variants: {
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      animated: true
+    }
+  }
+);
+var barListContentVariants = cva(
+  "relative z-10 flex w-full items-center justify-between gap-2 px-2 py-1.5",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListNameVariants = cva(
+  "flex items-center gap-2 truncate text-sm font-medium",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListValueVariants = cva(
+  "text-sm tabular-nums text-muted-foreground",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+function defaultValueFormatter(value) {
+  return value.toLocaleString();
+}
+function sortData(data, order) {
+  if (order === "none") return data;
+  return [...data].sort(
+    (a, b) => order === "ascending" ? a.value - b.value : b.value - a.value
+  );
+}
+function BarList({
+  className,
+  color = "var(--primary)",
+  data,
+  onClick,
+  showAnimation = true,
+  sortOrder = "descending",
+  valueFormatter = defaultValueFormatter,
+  ...props
+}) {
+  const sortedData = React.useMemo(
+    () => sortData(data, sortOrder),
+    [data, sortOrder]
+  );
+  const maxValue = React.useMemo(
+    () => Math.max(...sortedData.map((d) => d.value), 0),
+    [sortedData]
+  );
+  const isClickable = Boolean(onClick);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(barListVariants(), className),
+      "data-slot": "bar-list",
+      ...props,
+      children: sortedData.map((item, index) => {
+        const percentage = maxValue > 0 ? item.value / maxValue * 100 : 0;
+        const barColor = item.color ?? color;
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                backgroundColor: barColor,
+                opacity: 0.15,
+                width: `${String(percentage)}%`
+              },
+              className: cn(barListBarVariants({ animated: showAnimation }))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: barListContentVariants(), children: [
+            /* @__PURE__ */ jsxs("span", { className: barListNameVariants(), children: [
+              item.icon,
+              item.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: "hover:underline focus:outline-none focus:underline",
+                  href: item.href,
+                  rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
+                  target: item.target,
+                  onClick: (e) => {
+                    if (onClick) {
+                      e.preventDefault();
+                      onClick(item, index);
+                    }
+                  },
+                  children: item.name
+                }
+              ) : item.name
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: barListValueVariants(), children: valueFormatter(item.value) })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(barListItemVariants({ clickable: isClickable && !item.href })),
+            role: isClickable && !item.href ? "button" : void 0,
+            tabIndex: isClickable && !item.href ? 0 : void 0,
+            onClick: isClickable && !item.href ? () => onClick?.(item, index) : void 0,
+            onKeyDown: isClickable && !item.href ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.(item, index);
+              }
+            } : void 0,
+            children: content
+          },
+          item.name
+        );
+      })
+    }
+  );
+}
+BarList.displayName = "BarList";
+
+export { BarList };
+//# sourceMappingURL=chunk-FDES5YDF.js.map
+//# sourceMappingURL=chunk-FDES5YDF.js.map

package/dist/chunk-FDES5YDF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/BarList/BarList.variants.ts","../src/components/data-display/BarList/BarList.tsx"],"names":[],"mappings":"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","file":"chunk-FDES5YDF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const barListVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListItemVariants = cva(\n  \"relative flex items-center\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n\nexport const barListBarVariants = cva(\n  \"absolute left-0 h-full rounded-[var(--radius-sm)] transition-all duration-300\",\n  {\n    variants: {\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      animated: true,\n    },\n  }\n)\n\nexport const barListContentVariants = cva(\n  \"relative z-10 flex w-full items-center justify-between gap-2 px-2 py-1.5\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListNameVariants = cva(\n  \"flex items-center gap-2 truncate text-sm font-medium\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListValueVariants = cva(\n  \"text-sm tabular-nums text-muted-foreground\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { BarListDataItem, BarListProps } from \"./BarList.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  barListBarVariants,\n  barListContentVariants,\n  barListItemVariants,\n  barListNameVariants,\n  barListValueVariants,\n  barListVariants,\n} from \"./BarList.variants\"\n\n/**\n * Default value formatter\n */\nfunction defaultValueFormatter(value: number): string {\n  return value.toLocaleString()\n}\n\n/**\n * Sort data by value\n */\nfunction sortData(\n  data: BarListDataItem[],\n  order: BarListProps[\"sortOrder\"]\n): BarListDataItem[] {\n  if (order === \"none\") return data\n\n  return [...data].sort((a, b) =>\n    order === \"ascending\" ? a.value - b.value : b.value - a.value\n  )\n}\n\n/**\n * BarList - Horizontal bar list for ranked data\n *\n * Displays items as horizontal bars proportional to their values.\n * Commonly used for top items, rankings, category breakdowns, etc.\n *\n * @example\n * ```tsx\n * const data = [\n *   { name: \"Twitter\", value: 456 },\n *   { name: \"Google\", value: 351 },\n *   { name: \"GitHub\", value: 271 },\n * ]\n *\n * <BarList data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With custom colors and click handler\n * const data = [\n *   { name: \"Direct\", value: 456, color: \"var(--chart-1)\" },\n *   { name: \"Organic\", value: 351, color: \"var(--chart-2)\" },\n * ]\n *\n * <BarList\n *   data={data}\n *   onClick={(item) => console.log(item.name)}\n *   valueFormatter={(v) => `${v} visits`}\n * />\n * ```\n */\nexport function BarList({\n  className,\n  color = \"var(--primary)\",\n  data,\n  onClick,\n  showAnimation = true,\n  sortOrder = \"descending\",\n  valueFormatter = defaultValueFormatter,\n  ...props\n}: BarListProps) {\n  const sortedData = React.useMemo(\n    () => sortData(data, sortOrder),\n    [data, sortOrder]\n  )\n\n  // Calculate max value for bar widths\n  const maxValue = React.useMemo(\n    () => Math.max(...sortedData.map((d) => d.value), 0),\n    [sortedData]\n  )\n\n  const isClickable = Boolean(onClick)\n\n  return (\n    <div\n      className={cn(barListVariants(), className)}\n      data-slot=\"bar-list\"\n      {...props}\n    >\n      {sortedData.map((item, index) => {\n        const percentage = maxValue > 0 ? (item.value / maxValue) * 100 : 0\n        const barColor = item.color ?? color\n\n        const content = (\n          <>\n            <div\n              style={{\n                backgroundColor: barColor,\n                opacity: 0.15,\n                width: `${String(percentage)}%`,\n              }}\n              className={cn(barListBarVariants({ animated: showAnimation }))}\n            />\n            <div className={barListContentVariants()}>\n              <span className={barListNameVariants()}>\n                {item.icon}\n                {item.href ? (\n                  <a\n                    className=\"hover:underline focus:outline-none focus:underline\"\n                    href={item.href}\n                    rel={item.target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                    target={item.target}\n                    onClick={(e) => {\n                      if (onClick) {\n                        e.preventDefault()\n                        onClick(item, index)\n                      }\n                    }}\n                  >\n                    {item.name}\n                  </a>\n                ) : (\n                  item.name\n                )}\n              </span>\n              <span className={barListValueVariants()}>\n                {valueFormatter(item.value)}\n              </span>\n            </div>\n          </>\n        )\n\n        return (\n          <div\n            key={item.name}\n            className={cn(barListItemVariants({ clickable: isClickable && !item.href }))}\n            role={isClickable && !item.href ? \"button\" : undefined}\n            tabIndex={isClickable && !item.href ? 0 : undefined}\n            onClick={\n              isClickable && !item.href\n                ? () => onClick?.(item, index)\n                : undefined\n            }\n            onKeyDown={\n              isClickable && !item.href\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      e.preventDefault()\n                      onClick?.(item, index)\n                    }\n                  }\n                : undefined\n            }\n          >\n            {content}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nBarList.displayName = \"BarList\"\n"]}