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

package/dist/chunk-4RNPI3LU.js

@@ -0,0 +1,83 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { FocusTrap as FocusTrap$1 } from 'focus-trap-react';
+import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function FocusTrap({
+  active = true,
+  allowOutsideClick = false,
+  children,
+  className,
+  clickOutsideDeactivates = false,
+  delayInitialFocus,
+  escapeDeactivates = false,
+  fallbackFocus,
+  focusTrapOptions,
+  initialFocus,
+  isKeyBackward,
+  isKeyForward,
+  onActivate,
+  onDeactivate,
+  onPostActivate,
+  onPostDeactivate,
+  paused = false,
+  preventScroll = false,
+  returnFocus = true,
+  setReturnFocus: _setReturnFocus,
+  ...props
+}) {
+  const getInitialFocus = useMemo(() => {
+    if (!initialFocus) {
+      return void 0;
+    }
+    if (typeof initialFocus === "string") {
+      return initialFocus;
+    }
+    if (typeof initialFocus === "function") {
+      return initialFocus;
+    }
+    return () => initialFocus.current ?? false;
+  }, [initialFocus]);
+  const trapOptions = useMemo(
+    () => ({
+      allowOutsideClick,
+      clickOutsideDeactivates,
+      delayInitialFocus,
+      escapeDeactivates,
+      fallbackFocus,
+      initialFocus: getInitialFocus,
+      ...isKeyBackward ? { isKeyBackward } : {},
+      ...isKeyForward ? { isKeyForward } : {},
+      onActivate,
+      onDeactivate,
+      onPostActivate,
+      onPostDeactivate,
+      preventScroll,
+      returnFocusOnDeactivate: typeof returnFocus === "boolean" ? returnFocus : true,
+      ...typeof returnFocus === "function" ? { setReturnFocus: returnFocus } : {},
+      ...focusTrapOptions
+    }),
+    [
+      allowOutsideClick,
+      clickOutsideDeactivates,
+      delayInitialFocus,
+      escapeDeactivates,
+      fallbackFocus,
+      focusTrapOptions,
+      getInitialFocus,
+      isKeyBackward,
+      isKeyForward,
+      onActivate,
+      onDeactivate,
+      onPostActivate,
+      onPostDeactivate,
+      preventScroll,
+      returnFocus
+    ]
+  );
+  return /* @__PURE__ */ jsx(FocusTrap$1, { active, focusTrapOptions: trapOptions, paused, children: /* @__PURE__ */ jsx("div", { className: cn(className), "data-slot": "focus-trap", ...props, children }) });
+}
+
+export { FocusTrap };
+//# sourceMappingURL=chunk-4RNPI3LU.js.map
+//# sourceMappingURL=chunk-4RNPI3LU.js.map

package/dist/chunk-4RNPI3LU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/FocusTrap/FocusTrap.tsx"],"names":["FocusTrapLib"],"mappings":";;;;;AA4BA,SAAS,SAAA,CAAU;AAAA,EACjB,MAAA,GAAS,IAAA;AAAA,EACT,iBAAA,GAAoB,KAAA;AAAA,EACpB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,uBAAA,GAA0B,KAAA;AAAA,EAC1B,iBAAA;AAAA,EACA,iBAAA,GAAoB,KAAA;AAAA,EACpB,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,aAAA,GAAgB,KAAA;AAAA,EAChB,WAAA,GAAc,IAAA;AAAA,EACd,cAAA,EAAgB,eAAA;AAAA,EAChB,GAAG;AACL,CAAA,EAAmB;AAEjB,EAAA,MAAM,eAAA,GAAkB,QAAQ,MAAwC;AACtE,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA,OAAO,MAAA;AAAA,IACT;AACA,IAAA,IAAI,OAAO,iBAAiB,QAAA,EAAU;AACpC,MAAA,OAAO,YAAA;AAAA,IACT;AACA,IAAA,IAAI,OAAO,iBAAiB,UAAA,EAAY;AACtC,MAAA,OAAO,YAAA;AAAA,IACT;AAEA,IAAA,OAAO,MAAM,aAAa,OAAA,IAAW,KAAA;AAAA,EACvC,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAKjB,EAAA,MAAM,WAAA,GAAc,OAAA;AAAA,IAClB,OAAyB;AAAA,MACvB,iBAAA;AAAA,MACA,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA,EAAc,eAAA;AAAA,MACd,GAAI,aAAA,GAAgB,EAAE,aAAA,KAAkB,EAAC;AAAA,MACzC,GAAI,YAAA,GAAe,EAAE,YAAA,KAAiB,EAAC;AAAA,MACvC,UAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,uBAAA,EAAyB,OAAO,WAAA,KAAgB,SAAA,GAAY,WAAA,GAAc,IAAA;AAAA,MAC1E,GAAI,OAAO,WAAA,KAAgB,UAAA,GAAa,EAAE,cAAA,EAAgB,WAAA,KAAgB,EAAC;AAAA,MAC3E,GAAG;AAAA,KACL,CAAA;AAAA,IACA;AAAA,MACE,iBAAA;AAAA,MACA,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,2BACGA,WAAA,EAAA,EAAa,MAAA,EAAgB,gBAAA,EAAkB,WAAA,EAAa,QAC3D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,SAAS,CAAA,EAAG,WAAA,EAAU,cAAc,GAAG,KAAA,EACvD,UACH,CAAA,EACF,CAAA;AAEJ","file":"chunk-4RNPI3LU.js","sourcesContent":["\"use client\"\n\nimport type { FocusTrapProps } from \"./FocusTrap.types\"\nimport type { Options as FocusTrapOptions } from \"focus-trap\"\n\nimport { FocusTrap as FocusTrapLib } from \"focus-trap-react\"\nimport { useMemo } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * FocusTrap component\n *\n * Confines keyboard navigation (Tab/Shift+Tab) within a container.\n * Essential for accessibility in modals, dialogs, and other interfaces\n * that require restricted focus to prevent users from \"escaping\" the\n * current context.\n *\n * @example\n * ```tsx\n * <FocusTrap active={isOpen} onDeactivate={() => setIsOpen(false)}>\n *   <div className=\"modal\">\n *     <input />\n *     <button>Submit</button>\n *   </div>\n * </FocusTrap>\n * ```\n */\nfunction FocusTrap({\n  active = true,\n  allowOutsideClick = false,\n  children,\n  className,\n  clickOutsideDeactivates = false,\n  delayInitialFocus,\n  escapeDeactivates = false,\n  fallbackFocus,\n  focusTrapOptions,\n  initialFocus,\n  isKeyBackward,\n  isKeyForward,\n  onActivate,\n  onDeactivate,\n  onPostActivate,\n  onPostDeactivate,\n  paused = false,\n  preventScroll = false,\n  returnFocus = true,\n  setReturnFocus: _setReturnFocus,\n  ...props\n}: FocusTrapProps) {\n  // Convert initialFocus to focus-trap format\n  const getInitialFocus = useMemo((): FocusTrapOptions[\"initialFocus\"] => {\n    if (!initialFocus) {\n      return undefined\n    }\n    if (typeof initialFocus === \"string\") {\n      return initialFocus\n    }\n    if (typeof initialFocus === \"function\") {\n      return initialFocus\n    }\n    // RefObject - return a function that gets the current element\n    return () => initialFocus.current ?? false\n  }, [initialFocus])\n\n  // Build focus-trap options\n  // Only include isKeyForward/isKeyBackward when defined — focus-trap library\n  // calls them as functions if the key exists in config, even when undefined.\n  const trapOptions = useMemo(\n    (): FocusTrapOptions => ({\n      allowOutsideClick,\n      clickOutsideDeactivates,\n      delayInitialFocus,\n      escapeDeactivates,\n      fallbackFocus,\n      initialFocus: getInitialFocus,\n      ...(isKeyBackward ? { isKeyBackward } : {}),\n      ...(isKeyForward ? { isKeyForward } : {}),\n      onActivate,\n      onDeactivate,\n      onPostActivate,\n      onPostDeactivate,\n      preventScroll,\n      returnFocusOnDeactivate: typeof returnFocus === \"boolean\" ? returnFocus : true,\n      ...(typeof returnFocus === \"function\" ? { setReturnFocus: returnFocus } : {}),\n      ...focusTrapOptions,\n    }),\n    [\n      allowOutsideClick,\n      clickOutsideDeactivates,\n      delayInitialFocus,\n      escapeDeactivates,\n      fallbackFocus,\n      focusTrapOptions,\n      getInitialFocus,\n      isKeyBackward,\n      isKeyForward,\n      onActivate,\n      onDeactivate,\n      onPostActivate,\n      onPostDeactivate,\n      preventScroll,\n      returnFocus,\n    ]\n  )\n\n  return (\n    <FocusTrapLib active={active} focusTrapOptions={trapOptions} paused={paused}>\n      <div className={cn(className)} data-slot=\"focus-trap\" {...props}>\n        {children}\n      </div>\n    </FocusTrapLib>\n  )\n}\n\nexport { FocusTrap }\n"]}

package/dist/chunk-4SFBDK4E.js

@@ -0,0 +1,72 @@
+import { TextInput } from './chunk-K4UCALQQ.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { CheckCircle2Icon, XCircleIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var emailValidationIconVariants = 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 EmailInput({
+  className,
+  size = "md",
+  variant,
+  validationState = "idle",
+  showValidationIcon = false,
+  validIcon,
+  invalidIcon,
+  disabled,
+  ...props
+}) {
+  const showIcon = showValidationIcon && validationState !== "idle";
+  const trailing = showIcon ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(emailValidationIconVariants({ size, validationState })),
+      "data-slot": "email-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": "email-input",
+      disabled,
+      size,
+      trailingIcon: trailing,
+      type: "email",
+      variant,
+      ...props
+    }
+  );
+}
+
+export { EmailInput, emailValidationIconVariants };
+//# sourceMappingURL=chunk-4SFBDK4E.js.map
+//# sourceMappingURL=chunk-4SFBDK4E.js.map

package/dist/chunk-4SFBDK4E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/EmailInput/EmailInput.variants.ts","../src/components/forms/EmailInput/EmailInput.tsx"],"names":[],"mappings":";;;;;;AAKO,IAAM,2BAAA,GAA8B,GAAA;AAAA,EACzC,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;ACRA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,eAAA,GAAkB,MAAA;AAAA,EAClB,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,QAAA,GAAW,sBAAsB,eAAA,KAAoB,MAAA;AAE3D,EAAA,MAAM,WAAW,QAAA,mBACf,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAW,EAAA,CAAG,2BAAA,CAA4B,EAAE,IAAA,EAAM,eAAA,EAAiB,CAAC,CAAA;AAAA,MACpE,WAAA,EAAU,uBAAA;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,aAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,QAAA;AAAA,MACd,IAAA,EAAK,OAAA;AAAA,MACL,OAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-4SFBDK4E.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Email validation icon visual variants\n */\nexport const emailValidationIconVariants = 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 EmailValidationIconVariantProps = VariantProps<typeof emailValidationIconVariants>\n","\"use client\"\n\nimport type { EmailInputProps } from \"./EmailInput.types\"\n\nimport { CheckCircle2Icon, XCircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { TextInput } from \"../TextInput\"\nimport { emailValidationIconVariants } from \"./EmailInput.variants\"\n\n/**\n * EmailInput component with optional validation state indicator.\n * Now uses TextInput internally for consistency.\n *\n * @example\n * ```tsx\n * <EmailInput placeholder=\"Enter email\" />\n * ```\n */\nfunction EmailInput({\n  className,\n  size = \"md\",\n  variant,\n  validationState = \"idle\",\n  showValidationIcon = false,\n  validIcon,\n  invalidIcon,\n  disabled,\n  ...props\n}: EmailInputProps) {\n  const showIcon = showValidationIcon && validationState !== \"idle\"\n\n  const trailing = showIcon ? (\n    <div\n      aria-hidden=\"true\"\n      className={cn(emailValidationIconVariants({ size, validationState }))}\n      data-slot=\"email-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=\"email-input\"\n      disabled={disabled}\n      size={size}\n      trailingIcon={trailing}\n      type=\"email\"\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport { EmailInput }"]}

package/dist/chunk-4XXAIWQ4.js

@@ -0,0 +1,181 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var feedVariants = cva("flex flex-col transition-colors duration-200", {
+  variants: {
+    variant: {
+      default: "border-l border-border pl-4 gap-4",
+      compact: "gap-2",
+      highlighted: "gap-4"
+    },
+    size: {
+      sm: "",
+      default: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var feedItemVariants = cva(
+  "relative flex gap-3 transition-colors duration-200",
+  {
+    variants: {
+      size: {
+        sm: "py-2 px-3",
+        default: "py-4 px-4",
+        lg: "py-6 px-6"
+      },
+      isActive: {
+        true: "bg-muted",
+        false: ""
+      },
+      isHighlighted: {
+        true: "bg-muted/50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isActive: false,
+      isHighlighted: false
+    }
+  }
+);
+function formatRelativeTime(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1e3);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  if (diffSec < 60) return "just now";
+  if (diffMin < 60) return `${String(diffMin)}m ago`;
+  if (diffHour < 24) return `${String(diffHour)}h ago`;
+  if (diffDay < 7) return `${String(diffDay)}d ago`;
+  return date.toLocaleDateString();
+}
+function FeedItemComponent({
+  className,
+  item,
+  size,
+  isActive,
+  isHighlighted,
+  isLast,
+  showDivider = true,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      className: cn(
+        feedItemVariants({ size, isActive, isHighlighted }),
+        "hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        !isLast && showDivider && "border-b border-border",
+        className
+      ),
+      "data-active": isActive ? "" : void 0,
+      "data-highlighted": isHighlighted ? "" : void 0,
+      "data-slot": "feed-item",
+      role: "article",
+      tabIndex: 0,
+      ...props,
+      children: item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.icon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-muted",
+            "data-slot": "feed-icon",
+            children: item.icon
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", "data-slot": "feed-content", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: item.title }),
+            item.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: item.description }),
+            item.metadata?.author && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+              "by ",
+              item.metadata.author
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "text-xs text-muted-foreground",
+                "data-slot": "feed-timestamp",
+                dateTime: item.timestamp.toISOString(),
+                children: formatRelativeTime(item.timestamp)
+              }
+            ),
+            item.action && /* @__PURE__ */ jsx("span", { "data-slot": "feed-action", children: item.action })
+          ] })
+        ] }) })
+      ] }) : children
+    }
+  );
+}
+function FeedSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex animate-pulse gap-3 py-4 px-4",
+      "data-slot": "feed-skeleton",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 rounded-full bg-muted" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-muted" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 rounded bg-muted" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-12 shrink-0 rounded bg-muted" })
+      ]
+    },
+    `skeleton-${String(index)}`
+  )) });
+}
+function Feed({
+  className,
+  variant,
+  size,
+  items,
+  reverse = false,
+  divider = true,
+  loading = false,
+  children,
+  ...props
+}) {
+  const sortedItems = items ? reverse ? [...items].reverse() : items : void 0;
+  const hasContent = loading || sortedItems && sortedItems.length > 0 || children;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": hasContent ? loading : void 0,
+      "aria-label": hasContent ? "Activity feed" : void 0,
+      "aria-live": hasContent ? "polite" : void 0,
+      className: cn(feedVariants({ variant, size }), className),
+      "data-loading": loading ? "" : void 0,
+      "data-slot": "feed",
+      "data-variant": variant ?? "default",
+      role: hasContent ? "feed" : void 0,
+      ...props,
+      children: loading ? /* @__PURE__ */ jsx(FeedSkeleton, {}) : sortedItems ? sortedItems.map((item, index) => /* @__PURE__ */ jsx(
+        FeedItemComponent,
+        {
+          isLast: index === sortedItems.length - 1,
+          item,
+          showDivider: divider,
+          size
+        },
+        item.id
+      )) : children
+    }
+  );
+}
+
+export { Feed, FeedItemComponent, FeedSkeleton, feedItemVariants, feedVariants };
+//# sourceMappingURL=chunk-4XXAIWQ4.js.map
+//# sourceMappingURL=chunk-4XXAIWQ4.js.map

package/dist/chunk-4XXAIWQ4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Feed/Feed.tsx"],"names":[],"mappings":"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","file":"chunk-4XXAIWQ4.js","sourcesContent":["import type { ReactNode } from \"react\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst feedVariants = cva(\"flex flex-col transition-colors duration-200\", {\n  variants: {\n    variant: {\n      default: \"border-l border-border pl-4 gap-4\",\n      compact: \"gap-2\",\n      highlighted: \"gap-4\",\n    },\n    size: {\n      sm: \"\",\n      default: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\nconst feedItemVariants = cva(\n  \"relative flex gap-3 transition-colors duration-200\",\n  {\n    variants: {\n      size: {\n        sm: \"py-2 px-3\",\n        default: \"py-4 px-4\",\n        lg: \"py-6 px-6\",\n      },\n      isActive: {\n        true: \"bg-muted\",\n        false: \"\",\n      },\n      isHighlighted: {\n        true: \"bg-muted/50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      isActive: false,\n      isHighlighted: false,\n    },\n  }\n)\n\n/**\n * Feed item data structure\n */\ninterface FeedItem {\n  /** Optional action element */\n  action?: ReactNode\n  /** Optional description */\n  description?: string\n  /** Optional icon element */\n  icon?: ReactNode\n  /** Unique identifier for the item */\n  id: string\n  /** Optional metadata */\n  metadata?: {\n    author?: string\n    avatar?: string\n  }\n  /** Timestamp of the event */\n  timestamp: Date\n  /** Title of the feed item */\n  title: string\n}\n\ninterface FeedProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof feedVariants> {\n  /** Custom content (alternative to items prop) */\n  children?: ReactNode\n  /** Show divider between items @default true */\n  divider?: boolean\n  /** Array of feed items */\n  items?: FeedItem[]\n  /** Loading state @default false */\n  loading?: boolean\n  /** Reverse chronological order @default false */\n  reverse?: boolean\n}\n\ninterface FeedItemProps\n  extends React.ComponentProps<\"article\">,\n    VariantProps<typeof feedItemVariants> {\n  /** Whether the item is the last in the list */\n  isLast?: boolean\n  /** The feed item data */\n  item?: FeedItem\n  /** Show divider after item @default true */\n  showDivider?: boolean\n}\n\n/**\n * Format a date to relative time (e.g., \"2 hours ago\")\n */\nfunction formatRelativeTime(date: Date): string {\n  const now = new Date()\n  const diffMs = now.getTime() - date.getTime()\n  const diffSec = Math.floor(diffMs / 1000)\n  const diffMin = Math.floor(diffSec / 60)\n  const diffHour = Math.floor(diffMin / 60)\n  const diffDay = Math.floor(diffHour / 24)\n\n  if (diffSec < 60) return \"just now\"\n  if (diffMin < 60) return `${String(diffMin)}m ago`\n  if (diffHour < 24) return `${String(diffHour)}h ago`\n  if (diffDay < 7) return `${String(diffDay)}d ago`\n\n  return date.toLocaleDateString()\n}\n\n/**\n * FeedItem component renders a single feed entry\n */\nfunction FeedItemComponent({\n  className,\n  item,\n  size,\n  isActive,\n  isHighlighted,\n  isLast,\n  showDivider = true,\n  children,\n  ...props\n}: FeedItemProps) {\n  return (\n    <article\n      className={cn(\n        feedItemVariants({ size, isActive, isHighlighted }),\n        \"hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        !isLast && showDivider && \"border-b border-border\",\n        className\n      )}\n      data-active={isActive ? \"\" : undefined}\n      data-highlighted={isHighlighted ? \"\" : undefined}\n      data-slot=\"feed-item\"\n      role=\"article\"\n      tabIndex={0}\n      {...props}\n    >\n      {item ? (\n        <>\n          {item.icon && (\n            <div\n              className=\"mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-muted\"\n              data-slot=\"feed-icon\"\n            >\n              {item.icon}\n            </div>\n          )}\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"flex items-start justify-between gap-2\">\n              <div className=\"min-w-0 flex-1\" data-slot=\"feed-content\">\n                <p className=\"font-medium text-foreground\">{item.title}</p>\n                {item.description && (\n                  <p className=\"mt-1 text-sm text-muted-foreground\">\n                    {item.description}\n                  </p>\n                )}\n                {item.metadata?.author && (\n                  <p className=\"mt-1 text-xs text-muted-foreground\">\n                    by {item.metadata.author}\n                  </p>\n                )}\n              </div>\n              <div className=\"flex shrink-0 items-center gap-2\">\n                <time\n                  className=\"text-xs text-muted-foreground\"\n                  data-slot=\"feed-timestamp\"\n                  dateTime={item.timestamp.toISOString()}\n                >\n                  {formatRelativeTime(item.timestamp)}\n                </time>\n                {item.action && (\n                  <span data-slot=\"feed-action\">{item.action}</span>\n                )}\n              </div>\n            </div>\n          </div>\n        </>\n      ) : (\n        children\n      )}\n    </article>\n  )\n}\n\n/**\n * Feed loading skeleton component\n */\nfunction FeedSkeleton({ count = 3 }: { count?: number }) {\n  return (\n    <>\n      {Array.from({ length: count }).map((_, index) => (\n        <div\n          key={`skeleton-${String(index)}`}\n          className=\"flex animate-pulse gap-3 py-4 px-4\"\n          data-slot=\"feed-skeleton\"\n        >\n          <div className=\"size-8 shrink-0 rounded-full bg-muted\" />\n          <div className=\"min-w-0 flex-1 space-y-2\">\n            <div className=\"h-4 w-3/4 rounded bg-muted\" />\n            <div className=\"h-3 w-1/2 rounded bg-muted\" />\n          </div>\n          <div className=\"h-3 w-12 shrink-0 rounded bg-muted\" />\n        </div>\n      ))}\n    </>\n  )\n}\n\n/**\n * Feed component displays a series of events or activities in chronological order.\n *\n * @example\n * ```tsx\n * const items = [\n *   { id: \"1\", timestamp: new Date(), title: \"New comment\", description: \"John commented on your post\" }\n * ]\n * <Feed items={items} />\n * ```\n */\nfunction Feed({\n  className,\n  variant,\n  size,\n  items,\n  reverse = false,\n  divider = true,\n  loading = false,\n  children,\n  ...props\n}: FeedProps) {\n  const sortedItems = items\n    ? reverse\n      ? [...items].reverse()\n      : items\n    : undefined\n\n  // Determine if we have content (for ARIA role)\n  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Using || for truthy check, not null/undefined check\n  const hasContent = loading || (sortedItems && sortedItems.length > 0) || children\n\n  return (\n    <div\n      aria-busy={hasContent ? loading : undefined}\n      aria-label={hasContent ? \"Activity feed\" : undefined}\n      aria-live={hasContent ? \"polite\" : undefined}\n      className={cn(feedVariants({ variant, size }), className)}\n      data-loading={loading ? \"\" : undefined}\n      data-slot=\"feed\"\n      data-variant={variant ?? \"default\"}\n      role={hasContent ? \"feed\" : undefined}\n      {...props}\n    >\n      {loading ? (\n        <FeedSkeleton />\n      ) : sortedItems ? (\n        sortedItems.map((item, index) => (\n          <FeedItemComponent\n            key={item.id}\n            isLast={index === sortedItems.length - 1}\n            item={item}\n            showDivider={divider}\n            size={size}\n          />\n        ))\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n\nexport {\n  Feed,\n  FeedItemComponent as FeedItem,\n  feedItemVariants,\n  FeedSkeleton,\n  feedVariants,\n}\nexport type { FeedItem as FeedItemData, FeedItemProps, FeedProps }\n"]}

package/dist/chunk-5ETVWWA5.js

@@ -0,0 +1,249 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Component } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function DefaultFallback({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center gap-4 rounded-lg border border-destructive bg-destructive/10 p-6"
+      ),
+      "aria-live": "assertive",
+      "data-slot": "error-boundary-fallback",
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-destructive", children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "size-12",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-center", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-destructive", children: "Something went wrong" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error.message || "An unexpected error occurred" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "inline-flex h-9 items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            ),
+            "data-slot": "error-boundary-reset-button",
+            type: "button",
+            onClick: resetErrorBoundary,
+            children: "Try again"
+          }
+        )
+      ]
+    }
+  );
+}
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      error,
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    const { onError } = this.props;
+    onError?.(error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    const { resetKeys } = this.props;
+    const { hasError } = this.state;
+    if (hasError && prevProps.resetKeys !== resetKeys) {
+      if (resetKeys && prevProps.resetKeys) {
+        const hasKeyChanged = resetKeys.some(
+          (key, index) => prevProps.resetKeys?.[index] !== key
+        );
+        if (hasKeyChanged) {
+          this.reset();
+        }
+      } else if (resetKeys !== prevProps.resetKeys) {
+        this.reset();
+      }
+    }
+  }
+  reset = () => {
+    const { onReset } = this.props;
+    onReset?.();
+    this.setState({
+      error: null,
+      hasError: false
+    });
+  };
+  render() {
+    const { children, className, fallback, FallbackComponent } = this.props;
+    const { error, hasError } = this.state;
+    if (hasError && error) {
+      const fallbackProps = {
+        error,
+        resetErrorBoundary: this.reset
+      };
+      if (FallbackComponent) {
+        return /* @__PURE__ */ jsx("div", { className, "data-slot": "error-boundary", children: /* @__PURE__ */ jsx(FallbackComponent, { ...fallbackProps }) });
+      }
+      if (typeof fallback === "function") {
+        const renderFallback = fallback;
+        return /* @__PURE__ */ jsx("div", { className, "data-slot": "error-boundary", children: renderFallback(fallbackProps) });
+      }
+      if (fallback !== void 0) {
+        return /* @__PURE__ */ jsx("div", { className, "data-slot": "error-boundary", children: fallback });
+      }
+      return /* @__PURE__ */ jsx("div", { className, "data-slot": "error-boundary", children: /* @__PURE__ */ jsx(DefaultFallback, { ...fallbackProps }) });
+    }
+    return children;
+  }
+};
+var errorBoundaryFallbackVariants = cva(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      variant: {
+        minimal: "p-4 gap-2",
+        detailed: "p-6 gap-4",
+        action: "p-6 gap-4",
+        fullscreen: "min-h-screen p-8 gap-6"
+      },
+      severity: {
+        error: "text-destructive",
+        warning: "text-warning",
+        info: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "detailed",
+      severity: "error"
+    }
+  }
+);
+var errorBoundaryCardVariants = cva(
+  "rounded-lg border bg-background p-6",
+  {
+    variants: {
+      variant: {
+        minimal: "border-border",
+        detailed: "border-destructive/50 bg-destructive/5",
+        action: "border-destructive/50 bg-destructive/5",
+        fullscreen: "border-destructive/50 bg-destructive/5 max-w-md w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "detailed"
+    }
+  }
+);
+var errorBoundaryIconVariants = cva(
+  "shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8",
+        md: "h-12 w-12",
+        lg: "h-16 w-16"
+      },
+      severity: {
+        error: "text-destructive",
+        warning: "text-warning",
+        info: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      severity: "error"
+    }
+  }
+);
+var errorBoundaryTitleVariants = cva(
+  "font-semibold",
+  {
+    variants: {
+      size: {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var errorBoundaryMessageVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var errorBoundaryStackVariants = cva(
+  "w-full overflow-auto rounded-md bg-muted p-4 text-left font-mono text-xs text-muted-foreground",
+  {
+    variants: {
+      collapsed: {
+        true: "max-h-24",
+        false: "max-h-64"
+      }
+    },
+    defaultVariants: {
+      collapsed: true
+    }
+  }
+);
+var errorBoundaryActionVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-9 px-4 text-sm",
+        lg: "h-10 px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+
+export { DefaultFallback, ErrorBoundary, errorBoundaryActionVariants, errorBoundaryCardVariants, errorBoundaryFallbackVariants, errorBoundaryIconVariants, errorBoundaryMessageVariants, errorBoundaryStackVariants, errorBoundaryTitleVariants };
+//# sourceMappingURL=chunk-5ETVWWA5.js.map
+//# sourceMappingURL=chunk-5ETVWWA5.js.map