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

package/dist/chunk-YC5VVIZO.js

@@ -0,0 +1,92 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { GripVerticalIcon } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var resizablePanelGroupVariants = cva([
+  "flex h-full w-full",
+  "data-[panel-group-direction=vertical]:flex-col"
+]);
+var resizablePanelVariants = cva([
+  // Base styles - intentionally minimal as panel content varies
+]);
+var resizableHandleVariants = cva(
+  [
+    "bg-[color:var(--resizable-handle-bg)] relative flex items-center justify-center",
+    "focus-visible:ring-[color:var(--resizable-handle-ring)] focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
+    // Horizontal (default) styles
+    "w-[var(--resizable-handle-width-default)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+    // Vertical direction styles
+    "data-[panel-group-direction=vertical]:h-[var(--resizable-handle-width-vertical)] data-[panel-group-direction=vertical]:w-full",
+    "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1",
+    "data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0",
+    "data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+    // Rotate handle icon in vertical mode
+    "[&[data-panel-group-direction=vertical]>div]:rotate-90"
+  ],
+  {
+    variants: {
+      /**
+       * Visual variant of the handle
+       * - default: Visible border line
+       * - invisible: No visible line, just cursor change
+       * - highlighted: More prominent handle on hover
+       */
+      variant: {
+        default: "",
+        invisible: "bg-transparent after:bg-transparent",
+        highlighted: "hover:bg-primary/20 transition-colors"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var resizableHandleGripVariants = cva([
+  "bg-[color:var(--resizable-handle-grip-bg)] z-10 flex h-[var(--resizable-handle-grip-height)] w-[var(--resizable-handle-grip-width)] items-center justify-center rounded-[var(--resizable-handle-grip-radius)] border"
+]);
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      className: cn(resizablePanelGroupVariants(), className),
+      "data-slot": "resizable-panel-group",
+      ...props
+    }
+  );
+}
+function ResizablePanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Panel,
+    {
+      className: cn(resizablePanelVariants(), className),
+      "data-slot": "resizable-panel",
+      ...props
+    }
+  );
+}
+function ResizableHandle({
+  withHandle,
+  variant,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      className: cn(resizableHandleVariants({ variant }), className),
+      "data-slot": "resizable-handle",
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: cn(resizableHandleGripVariants()), children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-2.5" }) })
+    }
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, resizableHandleGripVariants, resizableHandleVariants, resizablePanelGroupVariants, resizablePanelVariants };
+//# sourceMappingURL=chunk-YC5VVIZO.js.map
+//# sourceMappingURL=chunk-YC5VVIZO.js.map

package/dist/chunk-YC5VVIZO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ResizablePanels/ResizablePanels.variants.ts","../src/components/layout/ResizablePanels/ResizablePanels.tsx"],"names":[],"mappings":";;;;;;AAMO,IAAM,8BAA8B,GAAA,CAAI;AAAA,EAC7C,oBAAA;AAAA,EACA;AACF,CAAC;AAMM,IAAM,yBAAyB,GAAA,CAAI;AAAA;AAE1C,CAAC;AAMM,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC;AAAA,IACE,iFAAA;AAAA,IACA,uIAAA;AAAA;AAAA,IAEA,0HAAA;AAAA;AAAA,IAEA,+HAAA;AAAA,IACA,oGAAA;AAAA,IACA,8GAAA;AAAA,IACA,8DAAA;AAAA;AAAA,IAEA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,EAAA;AAAA,QACT,SAAA,EAAW,qCAAA;AAAA,QACX,WAAA,EAAa;AAAA;AACf,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAKO,IAAM,8BAA8B,GAAA,CAAI;AAAA,EAC7C;AACF,CAAC;AC3CD,SAAS,mBAAA,CAAoB;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,KAAA;AAAA,IAAnB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA4B,EAAG,SAAS,CAAA;AAAA,MACtD,WAAA,EAAU,uBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AACpE,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,KAAA;AAAA,IAAnB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAuB,EAAG,SAAS,CAAA;AAAA,MACjD,WAAA,EAAU,iBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,UAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAoB,kBAAA,CAAA,SAAA;AAAA,IAAnB;AAAA,MACC,WAAW,EAAA,CAAG,uBAAA,CAAwB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC7D,WAAA,EAAU,kBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,UAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,2BAAA,EAA6B,CAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,UAAA,EAAW,CAAA,EACzC;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-YC5VVIZO.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ResizablePanelGroup variant styles\n * Container for resizable panels with direction support\n */\nexport const resizablePanelGroupVariants = cva([\n  \"flex h-full w-full\",\n  \"data-[panel-group-direction=vertical]:flex-col\",\n])\n\n/**\n * ResizablePanel variant styles\n * Individual panel that can be resized\n */\nexport const resizablePanelVariants = cva([\n  // Base styles - intentionally minimal as panel content varies\n])\n\n/**\n * ResizableHandle variant styles\n * Draggable divider between panels\n */\nexport const resizableHandleVariants = cva(\n  [\n    \"bg-[color:var(--resizable-handle-bg)] relative flex items-center justify-center\",\n    \"focus-visible:ring-[color:var(--resizable-handle-ring)] focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden\",\n    // Horizontal (default) styles\n    \"w-[var(--resizable-handle-width-default)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2\",\n    // Vertical direction styles\n    \"data-[panel-group-direction=vertical]:h-[var(--resizable-handle-width-vertical)] data-[panel-group-direction=vertical]:w-full\",\n    \"data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1\",\n    \"data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0\",\n    \"data-[panel-group-direction=vertical]:after:-translate-y-1/2\",\n    // Rotate handle icon in vertical mode\n    \"[&[data-panel-group-direction=vertical]>div]:rotate-90\",\n  ],\n  {\n    variants: {\n      /**\n       * Visual variant of the handle\n       * - default: Visible border line\n       * - invisible: No visible line, just cursor change\n       * - highlighted: More prominent handle on hover\n       */\n      variant: {\n        default: \"\",\n        invisible: \"bg-transparent after:bg-transparent\",\n        highlighted: \"hover:bg-primary/20 transition-colors\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ResizableHandle grip (visible handle indicator) styles\n */\nexport const resizableHandleGripVariants = cva([\n  \"bg-[color:var(--resizable-handle-grip-bg)] z-10 flex h-[var(--resizable-handle-grip-height)] w-[var(--resizable-handle-grip-width)] items-center justify-center rounded-[var(--resizable-handle-grip-radius)] border\",\n])\n\nexport type ResizablePanelGroupVariantProps = VariantProps<typeof resizablePanelGroupVariants>\nexport type ResizablePanelVariantProps = VariantProps<typeof resizablePanelVariants>\nexport type ResizableHandleVariantProps = VariantProps<typeof resizableHandleVariants>\n","\"use client\"\n\nimport type {\n  ResizableHandleProps,\n  ResizablePanelGroupProps,\n  ResizablePanelProps,\n} from \"./ResizablePanels.types\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  resizableHandleGripVariants,\n  resizableHandleVariants,\n  resizablePanelGroupVariants,\n  resizablePanelVariants,\n} from \"./ResizablePanels.variants\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      className={cn(resizablePanelGroupVariants(), className)}\n      data-slot=\"resizable-panel-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ className, ...props }: ResizablePanelProps) {\n  return (\n    <ResizablePrimitive.Panel\n      className={cn(resizablePanelVariants(), className)}\n      data-slot=\"resizable-panel\"\n      {...props}\n    />\n  )\n}\n\nfunction ResizableHandle({\n  withHandle,\n  variant,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.Separator\n      className={cn(resizableHandleVariants({ variant }), className)}\n      data-slot=\"resizable-handle\"\n      {...props}\n    >\n      {withHandle && (\n        <div className={cn(resizableHandleGripVariants())}>\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"]}

package/dist/chunk-YMQDTTO7.js

@@ -0,0 +1,354 @@
+import { SkeletonLoader } from './chunk-NGX3ITG4.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-U7TPJMGY.js';
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var listVariants = cva(
+  "flex flex-col bg-background text-foreground transition-colors duration-150",
+  {
+    variants: {
+      variant: {
+        default: "border border-border rounded-md",
+        flat: "divide-y divide-border",
+        card: "gap-4 flex-col",
+        minimal: "divide-y divide-border border-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var listItemVariants = cva(
+  "group/list-item flex items-center text-sm transition-colors duration-150 outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-b border-border last:border-b-0",
+        flat: "",
+        card: "border border-border rounded-md bg-background",
+        minimal: ""
+      },
+      size: {
+        sm: "px-3 py-2 min-h-8 gap-2",
+        default: "px-4 py-3 min-h-10 gap-3",
+        lg: "px-5 py-4 min-h-12 gap-4"
+      },
+      selectable: {
+        true: "cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        false: ""
+      },
+      selected: {
+        true: "bg-muted",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      selectable: false,
+      selected: false,
+      disabled: false
+    }
+  }
+);
+function List({
+  className,
+  variant = "default",
+  items,
+  selectable = false,
+  multiple = false,
+  loading = false,
+  onSelect,
+  children,
+  ref,
+  ...props
+}) {
+  const [selectedIds, setSelectedIds] = React.useState(() => /* @__PURE__ */ new Set());
+  const [focusedIndex, setFocusedIndex] = React.useState(-1);
+  const itemRefsRef = React.useRef(/* @__PURE__ */ new Map());
+  const handleSelect = React.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (multiple) {
+        setSelectedIds((prev) => {
+          const newSet = new Set(prev);
+          if (newSet.has(item.id)) {
+            newSet.delete(item.id);
+          } else {
+            newSet.add(item.id);
+          }
+          return newSet;
+        });
+      } else {
+        setSelectedIds(/* @__PURE__ */ new Set([item.id]));
+      }
+      onSelect?.(item);
+      item.onClick?.();
+    },
+    [multiple, onSelect]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (!items || items.length === 0) return;
+      const enabledIndices = items.map((item, index) => item.disabled ? -1 : index).filter((i) => i !== -1);
+      let newIndex = focusedIndex;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[0] ?? -1;
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex);
+            const nextPos = Math.min(
+              currentEnabledPos + 1,
+              enabledIndices.length - 1
+            );
+            newIndex = enabledIndices[nextPos] ?? focusedIndex;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (focusedIndex === -1) {
+            newIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+          } else {
+            const currentEnabledPos = enabledIndices.indexOf(focusedIndex);
+            const prevPos = Math.max(currentEnabledPos - 1, 0);
+            newIndex = enabledIndices[prevPos] ?? focusedIndex;
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedIndex >= 0 && selectable && items[focusedIndex]) {
+            handleSelect(items[focusedIndex]);
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          newIndex = enabledIndices[0] ?? -1;
+          break;
+        case "End":
+          e.preventDefault();
+          newIndex = enabledIndices[enabledIndices.length - 1] ?? -1;
+          break;
+      }
+      if (newIndex !== focusedIndex) {
+        setFocusedIndex(newIndex);
+        itemRefsRef.current.get(newIndex)?.focus();
+      }
+    },
+    [items, focusedIndex, selectable, handleSelect]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "data-loading": true,
+        "aria-busy": "true",
+        "aria-label": "Loading list",
+        className: cn(listVariants({ variant }), className),
+        "data-slot": "list",
+        "data-variant": variant,
+        role: "list",
+        ...props,
+        children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn(listItemVariants({ variant, size: "default" })),
+            "data-slot": "list-item",
+            children: [
+              /* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 rounded-full" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+                /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-32" }),
+                /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-3 w-24" })
+              ] })
+            ]
+          },
+          i
+        ))
+      }
+    );
+  }
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        "aria-label": props["aria-label"],
+        className: cn(listVariants({ variant }), className),
+        "data-slot": "list",
+        "data-variant": variant,
+        role: selectable ? "listbox" : "list",
+        tabIndex: selectable ? 0 : void 0,
+        onKeyDown: selectable ? handleKeyDown : void 0,
+        ...props,
+        children: items.map((item, index) => {
+          const isSelected = selectedIds.has(item.id);
+          const isFocused = focusedIndex === index;
+          return /* @__PURE__ */ jsx(
+            ListItemInternal,
+            {
+              ref: (el) => {
+                if (el) {
+                  itemRefsRef.current.set(index, el);
+                } else {
+                  itemRefsRef.current.delete(index);
+                }
+              },
+              tabIndex: selectable ? isFocused || focusedIndex === -1 && index === 0 ? 0 : -1 : void 0,
+              "aria-disabled": item.disabled ? true : void 0,
+              "aria-selected": selectable ? isSelected : void 0,
+              "data-focused": isFocused ? true : void 0,
+              "data-selected": isSelected ? true : void 0,
+              disabled: item.disabled,
+              isFocused,
+              item,
+              selectable,
+              selected: isSelected,
+              variant,
+              onClick: selectable && !item.disabled ? () => {
+                handleSelect(item);
+              } : void 0
+            },
+            item.id
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      "aria-label": props["aria-label"],
+      className: cn(listVariants({ variant }), className),
+      "data-slot": "list",
+      "data-variant": variant,
+      role: "list",
+      ...props,
+      children
+    }
+  );
+}
+function ListItemInternal({
+  ref,
+  item,
+  variant = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  isFocused = false,
+  onClick,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      className: cn(
+        listItemVariants({
+          variant,
+          size: "default",
+          selectable,
+          selected,
+          disabled
+        }),
+        isFocused && "ring-[3px] ring-ring/50",
+        className
+      ),
+      "data-slot": "list-item",
+      role: selectable ? "option" : void 0,
+      onClick,
+      ...props,
+      children: [
+        item.avatar && /* @__PURE__ */ jsxs(Avatar, { className: "size-10", "data-slot": "list-item-avatar", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { alt: item.label, src: item.avatar }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: item.label.slice(0, 2).toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-0.5", "data-slot": "list-item-content", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium leading-snug", children: item.label }),
+          item.description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-muted-foreground text-xs leading-normal",
+              "data-slot": "list-item-description",
+              children: item.description
+            }
+          )
+        ] }),
+        item.badge && /* @__PURE__ */ jsx("div", { "data-slot": "list-item-actions", children: /* @__PURE__ */ jsx(Badge, { color: "muted", type: "pill-color", children: item.badge }) })
+      ]
+    }
+  );
+}
+function ListItem({
+  className,
+  variant = "default",
+  size = "default",
+  selectable = false,
+  selected = false,
+  disabled = false,
+  ref,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: cn(
+        listItemVariants({ variant, size, selectable, selected, disabled }),
+        className
+      ),
+      "aria-disabled": disabled ? true : void 0,
+      "aria-selected": selectable ? selected : void 0,
+      "data-disabled": disabled ? true : void 0,
+      "data-selected": selected ? true : void 0,
+      "data-size": size,
+      "data-slot": "list-item",
+      "data-variant": variant,
+      role: selectable ? "option" : void 0,
+      tabIndex: selectable && !disabled ? 0 : void 0,
+      ...restProps
+    }
+  );
+}
+function ListItemContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-1 flex-col gap-0.5", className),
+      "data-slot": "list-item-content",
+      ...props
+    }
+  );
+}
+function ListItemActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-slot": "list-item-actions",
+      ...props
+    }
+  );
+}
+
+export { List, ListItem, ListItemActions, ListItemContent, listItemVariants, listVariants };
+//# sourceMappingURL=chunk-YMQDTTO7.js.map
+//# sourceMappingURL=chunk-YMQDTTO7.js.map

package/dist/chunk-YMQDTTO7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/List/List.tsx"],"names":[],"mappings":"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","file":"chunk-YMQDTTO7.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\n\n// ============================================\n// TYPES\n// ============================================\ninterface ListItem {\n  avatar?: string\n  badge?: string\n  description?: string\n  disabled?: boolean\n  id: string\n  label: string\n  onClick?: () => void\n}\n\n// ============================================\n// VARIANTS\n// ============================================\nconst listVariants = cva(\n  \"flex flex-col bg-background text-foreground transition-colors duration-150\",\n  {\n    variants: {\n      variant: {\n        default: \"border border-border rounded-md\",\n        flat: \"divide-y divide-border\",\n        card: \"gap-4 flex-col\",\n        minimal: \"divide-y divide-border border-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst listItemVariants = cva(\n  \"group/list-item flex items-center text-sm transition-colors duration-150 outline-none\",\n  {\n    variants: {\n      variant: {\n        default: \"border-b border-border last:border-b-0\",\n        flat: \"\",\n        card: \"border border-border rounded-md bg-background\",\n        minimal: \"\",\n      },\n      size: {\n        sm: \"px-3 py-2 min-h-8 gap-2\",\n        default: \"px-4 py-3 min-h-10 gap-3\",\n        lg: \"px-5 py-4 min-h-12 gap-4\",\n      },\n      selectable: {\n        true: \"cursor-pointer hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        false: \"\",\n      },\n      selected: {\n        true: \"bg-muted\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      selectable: false,\n      selected: false,\n      disabled: false,\n    },\n  }\n)\n\n// ============================================\n// LIST COMPONENT\n// ============================================\ntype ListProps = React.ComponentProps<\"ul\"> &\n  VariantProps<typeof listVariants> & {\n    items?: ListItem[]\n    loading?: boolean\n    multiple?: boolean\n    onSelect?: (item: ListItem) => void\n    selectable?: boolean\n  }\n\nfunction List({\n  className,\n  variant = \"default\",\n  items,\n  selectable = false,\n  multiple = false,\n  loading = false,\n  onSelect,\n  children,\n  ref,\n  ...props\n}: ListProps) {\n  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set())\n  const [focusedIndex, setFocusedIndex] = React.useState<number>(-1)\n  const itemRefsRef = React.useRef<Map<number, HTMLLIElement>>(new Map())\n\n  const handleSelect = React.useCallback(\n    (item: ListItem) => {\n      if (item.disabled) return\n\n      if (multiple) {\n        setSelectedIds((prev) => {\n          const newSet = new Set(prev)\n          if (newSet.has(item.id)) {\n            newSet.delete(item.id)\n          } else {\n            newSet.add(item.id)\n          }\n          return newSet\n        })\n      } else {\n        setSelectedIds(new Set([item.id]))\n      }\n\n      onSelect?.(item)\n      item.onClick?.()\n    },\n    [multiple, onSelect]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLUListElement>) => {\n      if (!items || items.length === 0) return\n\n      const enabledIndices = items\n        .map((item, index) => (item.disabled ? -1 : index))\n        .filter((i) => i !== -1)\n\n      let newIndex = focusedIndex\n\n      switch (e.key) {\n        case \"ArrowDown\":\n          e.preventDefault()\n          if (focusedIndex === -1) {\n            newIndex = enabledIndices[0] ?? -1\n          } else {\n            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)\n            const nextPos = Math.min(\n              currentEnabledPos + 1,\n              enabledIndices.length - 1\n            )\n            newIndex = enabledIndices[nextPos] ?? focusedIndex\n          }\n          break\n        case \"ArrowUp\":\n          e.preventDefault()\n          if (focusedIndex === -1) {\n            newIndex = enabledIndices[enabledIndices.length - 1] ?? -1\n          } else {\n            const currentEnabledPos = enabledIndices.indexOf(focusedIndex)\n            const prevPos = Math.max(currentEnabledPos - 1, 0)\n            newIndex = enabledIndices[prevPos] ?? focusedIndex\n          }\n          break\n        case \"Enter\":\n        case \" \":\n          e.preventDefault()\n          if (focusedIndex >= 0 && selectable && items[focusedIndex]) {\n            handleSelect(items[focusedIndex])\n          }\n          break\n        case \"Home\":\n          e.preventDefault()\n          newIndex = enabledIndices[0] ?? -1\n          break\n        case \"End\":\n          e.preventDefault()\n          newIndex = enabledIndices[enabledIndices.length - 1] ?? -1\n          break\n      }\n\n      if (newIndex !== focusedIndex) {\n        setFocusedIndex(newIndex)\n        itemRefsRef.current.get(newIndex)?.focus()\n      }\n    },\n    [items, focusedIndex, selectable, handleSelect]\n  )\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <ul\n        ref={ref}\n        data-loading\n        aria-busy=\"true\"\n        aria-label=\"Loading list\"\n        className={cn(listVariants({ variant }), className)}\n        data-slot=\"list\"\n        data-variant={variant}\n        role=\"list\"\n        {...props}\n      >\n        {[1, 2, 3].map((i) => (\n          <li\n            key={i}\n            className={cn(listItemVariants({ variant, size: \"default\" }))}\n            data-slot=\"list-item\"\n          >\n            <SkeletonLoader className=\"size-10 rounded-full\" />\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <SkeletonLoader className=\"h-4 w-32\" />\n              <SkeletonLoader className=\"h-3 w-24\" />\n            </div>\n          </li>\n        ))}\n      </ul>\n    )\n  }\n\n  // Render with items prop\n  if (items && items.length > 0) {\n    return (\n      <ul\n        ref={ref}\n        aria-label={props[\"aria-label\"]}\n        className={cn(listVariants({ variant }), className)}\n        data-slot=\"list\"\n        data-variant={variant}\n        role={selectable ? \"listbox\" : \"list\"}\n        tabIndex={selectable ? 0 : undefined}\n        onKeyDown={selectable ? handleKeyDown : undefined}\n        {...props}\n      >\n        {items.map((item, index) => {\n          const isSelected = selectedIds.has(item.id)\n          const isFocused = focusedIndex === index\n\n          return (\n            <ListItemInternal\n              key={item.id}\n              ref={(el) => {\n                if (el) {\n                  itemRefsRef.current.set(index, el)\n                } else {\n                  itemRefsRef.current.delete(index)\n                }\n              }}\n              tabIndex={\n                selectable\n                  ? isFocused || (focusedIndex === -1 && index === 0)\n                    ? 0\n                    : -1\n                  : undefined\n              }\n              aria-disabled={item.disabled ? true : undefined}\n              aria-selected={selectable ? isSelected : undefined}\n              data-focused={isFocused ? true : undefined}\n              data-selected={isSelected ? true : undefined}\n              disabled={item.disabled}\n              isFocused={isFocused}\n              item={item}\n              selectable={selectable}\n              selected={isSelected}\n              variant={variant}\n              onClick={\n                selectable && !item.disabled\n                  ? () => { handleSelect(item); }\n                  : undefined\n              }\n            />\n          )\n        })}\n      </ul>\n    )\n  }\n\n  // Render with children\n  return (\n    <ul\n      ref={ref}\n      aria-label={props[\"aria-label\"]}\n      className={cn(listVariants({ variant }), className)}\n      data-slot=\"list\"\n      data-variant={variant}\n      role=\"list\"\n      {...props}\n    >\n      {children}\n    </ul>\n  )\n}\n\n// ============================================\n// INTERNAL LIST ITEM (for items prop rendering)\n// ============================================\ninterface ListItemInternalProps\n  extends Omit<React.ComponentProps<\"li\">, \"onClick\"> {\n  disabled?: boolean\n  isFocused?: boolean\n  item: ListItem\n  onClick?: () => void\n  selectable?: boolean\n  selected?: boolean\n  variant?: \"card\" | \"default\" | \"flat\" | \"minimal\" | null\n}\n\nfunction ListItemInternal({\n  ref,\n  item,\n  variant = \"default\",\n  selectable = false,\n  selected = false,\n  disabled = false,\n  isFocused = false,\n  onClick,\n  className,\n  ...props\n}: ListItemInternalProps & { ref?: React.Ref<HTMLLIElement | null> }) {\n    return (\n      <li\n        ref={ref}\n        className={cn(\n          listItemVariants({\n            variant,\n            size: \"default\",\n            selectable,\n            selected,\n            disabled,\n          }),\n          isFocused && \"ring-[3px] ring-ring/50\",\n          className\n        )}\n        data-slot=\"list-item\"\n        role={selectable ? \"option\" : undefined}\n        onClick={onClick}\n        {...props}\n      >\n        {item.avatar && (\n          <Avatar className=\"size-10\" data-slot=\"list-item-avatar\">\n            <AvatarImage alt={item.label} src={item.avatar} />\n            <AvatarFallback>\n              {item.label.slice(0, 2).toUpperCase()}\n            </AvatarFallback>\n          </Avatar>\n        )}\n\n        <div className=\"flex flex-1 flex-col gap-0.5\" data-slot=\"list-item-content\">\n          <span className=\"font-medium leading-snug\">{item.label}</span>\n          {item.description && (\n            <span\n              className=\"text-muted-foreground text-xs leading-normal\"\n              data-slot=\"list-item-description\"\n            >\n              {item.description}\n            </span>\n          )}\n        </div>\n\n        {item.badge && (\n          <div data-slot=\"list-item-actions\">\n            <Badge color=\"muted\" type=\"pill-color\">{item.badge}</Badge>\n          </div>\n        )}\n      </li>\n    )\n  }\n\n// ============================================\n// PUBLIC LIST ITEM COMPONENT\n// ============================================\ninterface ListItemProps extends Omit<React.ComponentProps<\"li\">, \"disabled\"> {\n  disabled?: boolean\n  selectable?: boolean\n  selected?: boolean\n  size?: \"default\" | \"lg\" | \"sm\"\n  variant?: \"card\" | \"default\" | \"flat\" | \"minimal\"\n}\n\nfunction ListItem({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  selectable = false,\n  selected = false,\n  disabled = false,\n  ref,\n  ...restProps\n}: ListItemProps) {\n  return (\n    <li\n      ref={ref}\n      className={cn(\n        listItemVariants({ variant, size, selectable, selected, disabled }),\n        className\n      )}\n      aria-disabled={disabled ? true : undefined}\n      aria-selected={selectable ? selected : undefined}\n      data-disabled={disabled ? true : undefined}\n      data-selected={selected ? true : undefined}\n      data-size={size}\n      data-slot=\"list-item\"\n      data-variant={variant}\n      role={selectable ? \"option\" : undefined}\n      tabIndex={selectable && !disabled ? 0 : undefined}\n      {...restProps}\n    />\n  )\n}\n\n// ============================================\n// LIST ITEM CONTENT\n// ============================================\nfunction ListItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-1 flex-col gap-0.5\", className)}\n      data-slot=\"list-item-content\"\n      {...props}\n    />\n  )\n}\n\n// ============================================\n// LIST ITEM ACTIONS\n// ============================================\nfunction ListItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex items-center gap-2\", className)}\n      data-slot=\"list-item-actions\"\n      {...props}\n    />\n  )\n}\n\n// ============================================\n// EXPORTS\n// ============================================\nexport {\n  List,\n  ListItem,\n  ListItemActions,\n  ListItemContent,\n  listItemVariants,\n  listVariants,\n}\nexport type { ListItemProps, ListItem as ListItemType, ListProps }\n"]}

package/dist/chunk-YNTS4GRT.js

@@ -0,0 +1,95 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FloatLabel({
+  children,
+  label,
+  hasValue = false,
+  variant = "over",
+  className,
+  ...props
+}) {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputId, setInputId] = React.useState();
+  const generatedId = React.useId();
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const input = wrapperRef.current.querySelector("input, select, textarea");
+      if (input) {
+        const existingId = input.getAttribute("id");
+        if (existingId) {
+          setInputId(existingId);
+        } else {
+          const newId = `float-label-input-${generatedId.replaceAll(":", "")}`;
+          input.setAttribute("id", newId);
+          setInputId(newId);
+        }
+      }
+    }
+  }, [generatedId, children]);
+  const handleFocusIn = React.useCallback(() => {
+    setIsFocused(true);
+  }, []);
+  const handleFocusOut = React.useCallback((event) => {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
+      setIsFocused(false);
+    }
+  }, []);
+  const isFloated = isFocused || hasValue;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "group relative",
+        // No wrapper padding - label uses negative positioning to float above
+        className
+      ),
+      "data-focused": isFocused || void 0,
+      "data-has-value": hasValue || void 0,
+      "data-slot": "float-label",
+      "data-variant": variant,
+      onBlur: handleFocusOut,
+      onFocus: handleFocusIn,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: cn(
+              "pointer-events-none absolute text-muted-foreground transition-all duration-200 motion-reduce:transition-none",
+              // Error state: if input is invalid (aria-invalid="true"), label turns red
+              "group-has-[[aria-invalid=true]]:text-destructive",
+              // Unfocused: label centered in input
+              !isFloated && "left-3 top-1/2 -translate-y-1/2 text-sm",
+              // Focused: variant-specific positioning (aligned with PrimeVue metrics)
+              isFloated && [
+                "text-xs font-medium text-foreground",
+                // Error state color persistence when floated
+                "group-has-[[aria-invalid=true]]:text-destructive",
+                // "over": top: -20px (label floats above)
+                variant === "over" && "left-3 -top-5",
+                // "in": top: -2 (label at top inside input)
+                // PrimeVue 'in' actually floats to top inside. Input needs padding-top.
+                variant === "in" && "left-3 top-2",
+                // "on": top: -2 (label ON border with background)
+                // sits on the border line
+                variant === "on" && "left-2 -top-2 bg-background px-1"
+              ]
+            ),
+            "data-slot": "float-label-text",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { FloatLabel };
+//# sourceMappingURL=chunk-YNTS4GRT.js.map
+//# sourceMappingURL=chunk-YNTS4GRT.js.map

package/dist/chunk-YNTS4GRT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/FloatLabel/FloatLabel.tsx"],"names":[],"mappings":"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","file":"chunk-YNTS4GRT.js","sourcesContent":["import type { FloatLabelProps } from \"./FloatLabel.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * FloatLabel - A wrapper component that provides floating label behavior\n *\n * Wraps form inputs (TextInput, Autocomplete, Select, etc.) to provide\n * a label that floats up when the input is focused or has a value.\n *\n * @example\n * ```tsx\n * <FloatLabel label=\"Email\" hasValue={!!email}>\n *   <TextInput value={email} onChange={(e) => setEmail(e.target.value)} />\n * </FloatLabel>\n * ```\n */\nfunction FloatLabel({\n  children,\n  label,\n  hasValue = false,\n  variant = \"over\",\n  className,\n  ...props\n}: FloatLabelProps) {\n  const [isFocused, setIsFocused] = React.useState(false)\n  const [inputId, setInputId] = React.useState<string | undefined>()\n  const generatedId = React.useId()\n  const wrapperRef = React.useRef<HTMLDivElement>(null)\n\n  // Find the input element and get its id\n  /* eslint-disable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- DOM discovery for label-input association */\n  React.useEffect(() => {\n    if (wrapperRef.current) {\n      const input = wrapperRef.current.querySelector(\"input, select, textarea\")\n      if (input) {\n        const existingId = input.getAttribute(\"id\")\n        if (existingId) {\n          setInputId(existingId)\n        } else {\n          // Generate and set an id if none exists\n          const newId = `float-label-input-${generatedId.replaceAll(':', \"\")}`\n          input.setAttribute(\"id\", newId)\n          setInputId(newId)\n        }\n      }\n    }\n  }, [generatedId, children])\n  /* eslint-enable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  // Handle focus/blur events on the wrapper\n  const handleFocusIn = React.useCallback(() => {\n    setIsFocused(true)\n  }, [])\n\n  const handleFocusOut = React.useCallback((event: React.FocusEvent) => {\n    // Check if focus is still within the wrapper\n    if (!wrapperRef.current?.contains(event.relatedTarget as Node)) {\n      setIsFocused(false)\n    }\n  }, [])\n\n  // Determine if label should be floated (focused or has value)\n  const isFloated = isFocused || hasValue\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cn(\n        \"group relative\",\n        // No wrapper padding - label uses negative positioning to float above\n        className\n      )}\n      data-focused={isFocused || undefined}\n      data-has-value={hasValue || undefined}\n      data-slot=\"float-label\"\n      data-variant={variant}\n      onBlur={handleFocusOut}\n      onFocus={handleFocusIn}\n      {...props}\n    >\n      <label\n        className={cn(\n          \"pointer-events-none absolute text-muted-foreground transition-all duration-200 motion-reduce:transition-none\",\n          // Error state: if input is invalid (aria-invalid=\"true\"), label turns red\n          \"group-has-[[aria-invalid=true]]:text-destructive\",\n          \n          // Unfocused: label centered in input\n          !isFloated && \"left-3 top-1/2 -translate-y-1/2 text-sm\",\n          \n          // Focused: variant-specific positioning (aligned with PrimeVue metrics)\n          isFloated && [\n            \"text-xs font-medium text-foreground\",\n             // Error state color persistence when floated\n            \"group-has-[[aria-invalid=true]]:text-destructive\",\n\n            // \"over\": top: -20px (label floats above)\n            variant === \"over\" && \"left-3 -top-5\",\n            \n            // \"in\": top: -2 (label at top inside input)\n            // PrimeVue 'in' actually floats to top inside. Input needs padding-top.\n            variant === \"in\" && \"left-3 top-2\",\n            \n            // \"on\": top: -2 (label ON border with background)\n            // sits on the border line\n            variant === \"on\" && \"left-2 -top-2 bg-background px-1\",\n          ]\n        )}\n        data-slot=\"float-label-text\"\n        htmlFor={inputId}\n      >\n        {label}\n      </label>\n      {children}\n    </div>\n  )\n}\n\nexport { FloatLabel }\n"]}