@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/feedback/error-page/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Error400 } from './error-400';
+export { default as Error401 } from './error-401';
+export { default as Error403 } from './error-403';
+export { default as Error404 } from './error-404';
+export type { Error400Props } from './error-400';
+export type { Error401Props } from './error-401';
+export type { Error403Props } from './error-403';
+export type { Error404Props } from './error-404';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/error-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/error-page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAElD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/feedback/loading-container/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './loading-container';
+export type { LoadingContainerProps } from './loading-container';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/loading-container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/feedback/loading-container/loading-container.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ContainerProps } from '../../layout/container/container';
+import { StackProps } from '../../layout/stack/stack';
+import { SpinnerProps } from '../spinner/spinner';
+export type LoadingContainerProps = {
+    /** Minimum height for the loading area */
+    minHeight?: React.CSSProperties['minHeight'];
+    /** Props forwarded to the Container wrapper */
+    containerProps?: Omit<ContainerProps, 'children'>;
+    /** Props forwarded to the Stack wrapper */
+    stackProps?: Omit<StackProps, 'children'>;
+    /** Props forwarded to the Spinner */
+    spinnerProps?: SpinnerProps;
+};
+export default function LoadingContainer({ minHeight, containerProps, stackProps, spinnerProps }: LoadingContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-container.d.ts.map

package/dist/components/feedback/loading-container/loading-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-container.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-container/loading-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7C,+CAA+C;IAC/C,cAAc,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;IAClD,2CAA2C;IAC3C,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAC1C,qCAAqC;IACrC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAkB,EAClB,cAAc,EACd,UAAU,EACV,YAAY,EACb,EAAE,qBAAqB,2CAiBvB"}

package/dist/components/feedback/loading-container/loading-container.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import Container from "../../layout/container/container.js";
+import Stack from "../../layout/stack/stack.js";
+import Spinner from "../spinner/spinner.js";
+function LoadingContainer({
+  minHeight = "50vh",
+  containerProps,
+  stackProps,
+  spinnerProps
+}) {
+  const { style: stackStyle, ...restStackProps } = stackProps ?? {};
+  return /* @__PURE__ */ jsx(Container, { marginX: "md", paddingY: "sm", ...containerProps, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: "vertical",
+      align: "center",
+      justify: "center",
+      spacing: "md",
+      style: { minHeight, ...stackStyle },
+      ...restStackProps,
+      children: /* @__PURE__ */ jsx(Spinner, { ...spinnerProps })
+    }
+  ) });
+}
+export {
+  LoadingContainer as default
+};
+//# sourceMappingURL=loading-container.js.map

package/dist/components/feedback/loading-container/loading-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-container.js","sources":["../../../../src/components/feedback/loading-container/loading-container.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { ContainerProps } from '../../layout/container/container';\nimport type { StackProps } from '../../layout/stack/stack';\nimport type { SpinnerProps } from '../spinner/spinner';\nimport Container from '../../layout/container/container';\nimport Stack from '../../layout/stack/stack';\nimport Spinner from '../spinner/spinner';\n\nexport type LoadingContainerProps = {\n  /** Minimum height for the loading area */\n  minHeight?: React.CSSProperties['minHeight'];\n  /** Props forwarded to the Container wrapper */\n  containerProps?: Omit<ContainerProps, 'children'>;\n  /** Props forwarded to the Stack wrapper */\n  stackProps?: Omit<StackProps, 'children'>;\n  /** Props forwarded to the Spinner */\n  spinnerProps?: SpinnerProps;\n};\n\nexport default function LoadingContainer({\n  minHeight = '50vh',\n  containerProps,\n  stackProps,\n  spinnerProps\n}: LoadingContainerProps) {\n  const { style: stackStyle, ...restStackProps } = stackProps ?? {};\n\n  return (\n    <Container marginX=\"md\" paddingY=\"sm\" {...containerProps}>\n      <Stack\n        direction=\"vertical\"\n        align=\"center\"\n        justify=\"center\"\n        spacing=\"md\"\n        style={{ minHeight, ...stackStyle }}\n        {...restStackProps}\n      >\n        <Spinner {...spinnerProps} />\n      </Stack>\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;;AAoBA,SAAwB,iBAAiB;AAAA,EACvC,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,EAAE,OAAO,YAAY,GAAG,eAAA,IAAmB,cAAc,CAAA;AAE/D,6BACG,WAAA,EAAU,SAAQ,MAAK,UAAS,MAAM,GAAG,gBACxC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,OAAO,EAAE,WAAW,GAAG,WAAA;AAAA,MACtB,GAAG;AAAA,MAEJ,UAAA,oBAAC,SAAA,EAAS,GAAG,aAAA,CAAc;AAAA,IAAA;AAAA,EAAA,GAE/B;AAEJ;"}

package/dist/components/feedback/modal/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './modal';
+export type { ModalProps } from './modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/feedback/modal/modal.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export type ModalProps = {
+    /** Controls the visibility state of the modal */
+    isOpen: boolean;
+    /** Callback function invoked when the modal should close (ESC key or backdrop click) */
+    onClose: () => void;
+    /** Raw children (ignored if structured props provided) */
+    children?: React.ReactNode;
+    /** Structured title (string or React) */
+    title?: React.ReactNode;
+    /** Optional description text */
+    description?: React.ReactNode;
+    /** Main body content */
+    content?: React.ReactNode;
+    /** Footer actions (buttons) */
+    actions?: React.ReactNode;
+    /** Additional CSS classes to apply to the modal dialog container */
+    className?: string;
+    /** Accessible label for the modal, used for screen readers */
+    ariaLabel?: string;
+    /** Center vs top alignment */
+    align?: 'center' | 'top';
+};
+/**
+ * Modal - Overlay dialog component using pure Tailwind CSS
+ * Achieves DaisyUI modal styling with Tailwind utilities
+ */
+declare function Modal({ isOpen, onClose, children, title, description, content, actions, className, ariaLabel, align }: Readonly<ModalProps>): React.ReactPortal | null;
+declare namespace Modal {
+    var displayName: string;
+}
+export default Modal;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/feedback/modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,UAAU,GAAG;IACvB,iDAAiD;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC1B,CAAC;AAEF;;;GAGG;AACH,iBAAS,KAAK,CAAC,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAc,EACd,SAAS,EACT,KAAgB,EACjB,EAAE,QAAQ,CAAC,UAAU,CAAC,4BAoGtB;kBA/GQ,KAAK;;;AAmHd,eAAe,KAAK,CAAC"}

package/dist/components/feedback/modal/modal.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import useOverlay from "../overlay/useOverlay.js";
+import Text from "../../typography/text/text.js";
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  description,
+  content,
+  actions,
+  className = "",
+  ariaLabel,
+  align = "center"
+}) {
+  const {
+    phase,
+    shouldRender,
+    ref: dialogRef,
+    getPhaseClass
+  } = useOverlay({
+    isOpen,
+    focusTrap: true,
+    lockScroll: true,
+    animationFrames: 2,
+    restoreFocus: true
+  });
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  if (!shouldRender) return null;
+  const enteringClasses = "scale-100 translate-y-0 opacity-100";
+  const exitingClasses = "scale-[0.97] -translate-y-1 opacity-0";
+  const scaleClass = getPhaseClass(enteringClasses, exitingClasses);
+  const backdropOpacity = phase === "visible" || phase === "animating-in" ? "opacity-100" : "opacity-0 transition-opacity delay-50";
+  const hasStructured = title || description || content || actions;
+  const alignmentClasses = align === "center" ? "grid place-items-center" : "flex items-start justify-center pt-20";
+  const panel = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-phase": phase,
+      className: `fixed inset-0 z-[999] ${alignmentClasses} bg-black/40 backdrop-blur-sm p-4 overflow-y-auto overscroll-contain transition-opacity duration-300 will-change-opacity ${backdropOpacity}`,
+      onMouseDown: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      "aria-label": ariaLabel || "Close modal",
+      role: "presentation",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dialogRef,
+          "data-phase": phase,
+          className: `relative w-11/12 sm:w-full max-w-2xl max-h-[calc(100vh-5em)] sm:max-h-[calc(100vh-8em)] bg-card text-card-foreground rounded-2xl border border-border shadow-2xl focus:outline-none transform transition-[transform,opacity] duration-250 ease-[cubic-bezier(.33,.66,.33,1)] will-change-transform will-change-opacity select-none [backface-visibility:hidden] [transform-style:preserve-3d] overflow-hidden ${scaleClass} ${className}`,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          onTransitionEnd: (e) => {
+            if (e.target !== dialogRef.current) return;
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-[calc(100vh-5em)] sm:max-h-[calc(100vh-8em)] p-4 sm:p-6", children: hasStructured ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            title && /* @__PURE__ */ jsxs(Fragment, { children: [
+              typeof title === "string" ? /* @__PURE__ */ jsx(Text, { weight: "bold", size: "2xl", children: title }) : title,
+              description && /* @__PURE__ */ jsx(Text, { variant: "muted", size: "sm", hasMargin: true, children: description })
+            ] }),
+            content && /* @__PURE__ */ jsx("section", { className: "text-sm leading-relaxed space-y-3 mt-4", children: content }),
+            actions && /* @__PURE__ */ jsx("footer", { className: "flex justify-end gap-2 pt-2 mt-4 border-t border-border/60", children: actions })
+          ] }) : children })
+        }
+      )
+    }
+  );
+  return createPortal(panel, document.body);
+}
+Modal.displayName = "Modal";
+export {
+  Modal as default
+};
+//# sourceMappingURL=modal.js.map

package/dist/components/feedback/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../src/components/feedback/modal/modal.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport useOverlay from '../overlay/useOverlay';\nimport Text from '../../typography/text/text';\n\nexport type ModalProps = {\n  /** Controls the visibility state of the modal */\n  isOpen: boolean;\n  /** Callback function invoked when the modal should close (ESC key or backdrop click) */\n  onClose: () => void;\n  /** Raw children (ignored if structured props provided) */\n  children?: React.ReactNode;\n  /** Structured title (string or React) */\n  title?: React.ReactNode;\n  /** Optional description text */\n  description?: React.ReactNode;\n  /** Main body content */\n  content?: React.ReactNode;\n  /** Footer actions (buttons) */\n  actions?: React.ReactNode;\n  /** Additional CSS classes to apply to the modal dialog container */\n  className?: string;\n  /** Accessible label for the modal, used for screen readers */\n  ariaLabel?: string;\n  /** Center vs top alignment */\n  align?: 'center' | 'top';\n};\n\n/**\n * Modal - Overlay dialog component using pure Tailwind CSS\n * Achieves DaisyUI modal styling with Tailwind utilities\n */\nfunction Modal({\n  isOpen,\n  onClose,\n  children,\n  title,\n  description,\n  content,\n  actions,\n  className = '',\n  ariaLabel,\n  align = 'center'\n}: Readonly<ModalProps>) {\n  const {\n    phase,\n    shouldRender,\n    ref: dialogRef,\n    getPhaseClass\n  } = useOverlay<HTMLDivElement>({\n    isOpen,\n    focusTrap: true,\n    lockScroll: true,\n    animationFrames: 2,\n    restoreFocus: true\n  });\n\n  // ESC key handling separate from useOverlay to allow optional close logic\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [isOpen, onClose]);\n\n  // Manage mounting phases\n\n  // If closed & unmounting, skip render\n  if (!shouldRender) return null;\n\n  const enteringClasses = 'scale-100 translate-y-0 opacity-100';\n  const exitingClasses = 'scale-[0.97] -translate-y-1 opacity-0';\n  const scaleClass = getPhaseClass(enteringClasses, exitingClasses);\n  // Stagger backdrop fade slightly after panel starts exiting to reduce perceived flicker\n  const backdropOpacity =\n    phase === 'visible' || phase === 'animating-in' ? 'opacity-100' : 'opacity-0 transition-opacity delay-50';\n\n  const hasStructured = title || description || content || actions;\n  const alignmentClasses = align === 'center' ? 'grid place-items-center' : 'flex items-start justify-center pt-20';\n\n  const panel = (\n    <div\n      data-phase={phase}\n      className={`fixed inset-0 z-[999] ${alignmentClasses} bg-black/40 backdrop-blur-sm p-4 overflow-y-auto overscroll-contain transition-opacity duration-300 will-change-opacity ${backdropOpacity}`}\n      onMouseDown={(e) => {\n        // close only if clicking backdrop not dialog\n        if (e.target === e.currentTarget) onClose();\n      }}\n      aria-label={ariaLabel || 'Close modal'}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        data-phase={phase}\n        className={`relative w-11/12 sm:w-full max-w-2xl max-h-[calc(100vh-5em)] sm:max-h-[calc(100vh-8em)] bg-card text-card-foreground rounded-2xl border border-border shadow-2xl focus:outline-none transform transition-[transform,opacity] duration-250 ease-[cubic-bezier(.33,.66,.33,1)] will-change-transform will-change-opacity select-none [backface-visibility:hidden] [transform-style:preserve-3d] overflow-hidden ${scaleClass} ${className}`}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        onTransitionEnd={(e) => {\n          if (e.target !== dialogRef.current) return;\n          if (phase === 'animating-out') {\n            // handled by useOverlay via shouldRender state change upstream; keep minimal here\n          }\n        }}\n      >\n        <div className=\"overflow-y-auto max-h-[calc(100vh-5em)] sm:max-h-[calc(100vh-8em)] p-4 sm:p-6\">\n          {hasStructured ? (\n            <>\n              {title && (\n                <>\n                  {typeof title === 'string' ? (\n                    <Text weight=\"bold\" size=\"2xl\">\n                      {title}\n                    </Text>\n                  ) : (\n                    title\n                  )}\n                  {description && (\n                    <Text variant=\"muted\" size=\"sm\" hasMargin>\n                      {description}\n                    </Text>\n                  )}\n                </>\n              )}\n              {content && <section className=\"text-sm leading-relaxed space-y-3 mt-4\">{content}</section>}\n              {actions && (\n                <footer className=\"flex justify-end gap-2 pt-2 mt-4 border-t border-border/60\">{actions}</footer>\n              )}\n            </>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  return createPortal(panel, document.body);\n}\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":[],"mappings":";;;;;AAgCA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,QAAQ;AACV,GAAyB;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,EAAA,IACE,WAA2B;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,EAAA,CACf;AAGD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,eAAe,CAAC,MAAqB;AACzC,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,eAAA;AACF,gBAAA;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,YAAY;AACjD,WAAO,MAAM,SAAS,oBAAoB,WAAW,YAAY;AAAA,EACnE,GAAG,CAAC,QAAQ,OAAO,CAAC;AAKpB,MAAI,CAAC,aAAc,QAAO;AAE1B,QAAM,kBAAkB;AACxB,QAAM,iBAAiB;AACvB,QAAM,aAAa,cAAc,iBAAiB,cAAc;AAEhE,QAAM,kBACJ,UAAU,aAAa,UAAU,iBAAiB,gBAAgB;AAEpE,QAAM,gBAAgB,SAAS,eAAe,WAAW;AACzD,QAAM,mBAAmB,UAAU,WAAW,4BAA4B;AAE1E,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW,yBAAyB,gBAAgB,4HAA4H,eAAe;AAAA,MAC/L,aAAa,CAAC,MAAM;AAElB,YAAI,EAAE,WAAW,EAAE,cAAe,SAAA;AAAA,MACpC;AAAA,MACA,cAAY,aAAa;AAAA,MACzB,MAAK;AAAA,MAEL,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAW,iZAAiZ,UAAU,IAAI,SAAS;AAAA,UACnb,MAAK;AAAA,UACL,cAAW;AAAA,UACX,UAAU;AAAA,UACV,iBAAiB,CAAC,MAAM;AACtB,gBAAI,EAAE,WAAW,UAAU,QAAS;AAAA,UAItC;AAAA,UAEA,UAAA,oBAAC,OAAA,EAAI,WAAU,iFACZ,0BACC,qBAAA,UAAA,EACG,UAAA;AAAA,YAAA,SACC,qBAAA,UAAA,EACG,UAAA;AAAA,cAAA,OAAO,UAAU,WAChB,oBAAC,MAAA,EAAK,QAAO,QAAO,MAAK,OACtB,UAAA,MAAA,CACH,IAEA;AAAA,cAED,mCACE,MAAA,EAAK,SAAQ,SAAQ,MAAK,MAAK,WAAS,MACtC,UAAA,YAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YAED,WAAW,oBAAC,WAAA,EAAQ,WAAU,0CAA0C,UAAA,SAAQ;AAAA,YAChF,WACC,oBAAC,UAAA,EAAO,WAAU,8DAA8D,UAAA,QAAA,CAAQ;AAAA,UAAA,EAAA,CAE5F,IAEA,SAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIJ,SAAO,aAAa,OAAO,SAAS,IAAI;AAC1C;AAEA,MAAM,cAAc;"}

package/dist/components/feedback/overlay/useOverlay.d.ts

@@ -0,0 +1,24 @@
+export type OverlayPhase = 'mount' | 'animating-in' | 'visible' | 'animating-out';
+export interface UseOverlayOptions {
+    isOpen: boolean;
+    onClose?: () => void;
+    focusTrap?: boolean;
+    lockScroll?: boolean;
+    animationFrames?: number;
+    restoreFocus?: boolean;
+    exitDuration?: number;
+    unmountOnExit?: boolean;
+}
+export interface UseOverlayResult<T extends HTMLElement> {
+    phase: OverlayPhase;
+    shouldRender: boolean;
+    ref: React.RefObject<T>;
+    getPhaseClass: (openClass: string, closedClass: string) => string;
+}
+/**
+ * useOverlay - shared lifecycle for animated overlays (Modal, Drawer, Popover, etc.)
+ * Handles phased mounting, focus trap, scroll locking, and focus restoration.
+ */
+export declare function useOverlay<T extends HTMLElement>(options: UseOverlayOptions): UseOverlayResult<T>;
+export default useOverlay;
+//# sourceMappingURL=useOverlay.d.ts.map

package/dist/components/feedback/overlay/useOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/overlay/useOverlay.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,eAAe,CAAC;AAElF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,WAAW;IACrD,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;CACnE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAuIjG;AAED,eAAe,UAAU,CAAC"}

package/dist/components/feedback/overlay/useOverlay.js

@@ -0,0 +1,119 @@
+import { useRef, useState, useLayoutEffect, useEffect, useCallback } from "react";
+function useOverlay(options) {
+  const {
+    isOpen,
+    focusTrap = true,
+    lockScroll = true,
+    animationFrames = 2,
+    restoreFocus = true,
+    exitDuration = 300,
+    unmountOnExit = true
+  } = options;
+  const previouslyFocusedRef = useRef(null);
+  const containerRef = useRef(null);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [phase, setPhase] = useState("mount");
+  useLayoutEffect(() => {
+    if (isOpen && !shouldRender) {
+      setShouldRender(true);
+      setPhase("mount");
+    } else if (isOpen && shouldRender && phase === "mount") {
+      requestAnimationFrame(() => {
+        setPhase("animating-in");
+        let frame = 0;
+        const step = () => {
+          frame += 1;
+          if (frame >= animationFrames) {
+            setPhase("visible");
+          } else {
+            requestAnimationFrame(step);
+          }
+        };
+        if (animationFrames > 0) {
+          requestAnimationFrame(step);
+        } else {
+          setPhase("visible");
+        }
+      });
+    } else if (!isOpen && shouldRender && phase !== "animating-out") {
+      setPhase("animating-out");
+    }
+  }, [isOpen, shouldRender, phase, animationFrames]);
+  useEffect(() => {
+    if (phase === "animating-out" && unmountOnExit) {
+      const timeout = setTimeout(() => {
+        setShouldRender(false);
+        setPhase("mount");
+      }, exitDuration);
+      return () => clearTimeout(timeout);
+    }
+    return void 0;
+  }, [phase, exitDuration, unmountOnExit]);
+  useEffect(() => {
+    if (isOpen) {
+      if (typeof document !== "undefined") {
+        if (restoreFocus) previouslyFocusedRef.current = document.activeElement;
+        if (lockScroll) document.body.style.overflow = "hidden";
+      }
+    }
+    return () => {
+      if (typeof document !== "undefined") {
+        if (lockScroll) document.body.style.overflow = "";
+        if (!isOpen && restoreFocus && previouslyFocusedRef.current) {
+          previouslyFocusedRef.current.focus();
+        }
+      }
+    };
+  }, [isOpen, lockScroll, restoreFocus]);
+  useEffect(() => {
+    if (phase === "visible" && containerRef.current) {
+      const el = containerRef.current;
+      try {
+        el.focus?.({ preventScroll: true });
+      } catch {
+        el.focus?.();
+      }
+    }
+  }, [phase]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!focusTrap || phase !== "visible" || e.key !== "Tab" || !containerRef.current) return;
+      const node = containerRef.current;
+      const focusable = node.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first || document.activeElement === node) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    },
+    [focusTrap, phase]
+  );
+  useEffect(() => {
+    if (focusTrap && phase === "visible") {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+    return void 0;
+  }, [phase, focusTrap, handleKeyDown]);
+  const getPhaseClass = useCallback(
+    (openClass, closedClass) => {
+      return phase === "animating-in" || phase === "visible" ? openClass : closedClass;
+    },
+    [phase]
+  );
+  return { phase, shouldRender, ref: containerRef, getPhaseClass };
+}
+export {
+  useOverlay as default,
+  useOverlay
+};
+//# sourceMappingURL=useOverlay.js.map

package/dist/components/feedback/overlay/useOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlay.js","sources":["../../../../src/components/feedback/overlay/useOverlay.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';\n\nexport type OverlayPhase = 'mount' | 'animating-in' | 'visible' | 'animating-out';\n\nexport interface UseOverlayOptions {\n  isOpen: boolean;\n  onClose?: () => void; // reserved for future outside-click/escape wiring\n  focusTrap?: boolean;\n  lockScroll?: boolean;\n  animationFrames?: number; // number of rAF hops before visible (default 2)\n  restoreFocus?: boolean;\n  exitDuration?: number; // ms matching CSS transition duration for animating-out\n  unmountOnExit?: boolean; // default true\n}\n\nexport interface UseOverlayResult<T extends HTMLElement> {\n  phase: OverlayPhase;\n  shouldRender: boolean;\n  ref: React.RefObject<T>;\n  getPhaseClass: (openClass: string, closedClass: string) => string;\n}\n\n/**\n * useOverlay - shared lifecycle for animated overlays (Modal, Drawer, Popover, etc.)\n * Handles phased mounting, focus trap, scroll locking, and focus restoration.\n */\nexport function useOverlay<T extends HTMLElement>(options: UseOverlayOptions): UseOverlayResult<T> {\n  const {\n    isOpen,\n    focusTrap = true,\n    lockScroll = true,\n    animationFrames = 2,\n    restoreFocus = true,\n    exitDuration = 300,\n    unmountOnExit = true\n  } = options;\n  const previouslyFocusedRef = useRef<HTMLElement | null>(null);\n  // Cast so consumer sees RefObject<T>; internal null checks still done.\n  const containerRef = useRef<T>(null as unknown as T);\n  const [shouldRender, setShouldRender] = useState(isOpen);\n  const [phase, setPhase] = useState<OverlayPhase>('mount');\n\n  // Mount / animation phases\n  useLayoutEffect(() => {\n    if (isOpen && !shouldRender) {\n      // Opening: mount first\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setShouldRender(true);\n      setPhase('mount');\n    } else if (isOpen && shouldRender && phase === 'mount') {\n      // Already mounted, start animation\n      requestAnimationFrame(() => {\n        setPhase('animating-in');\n        let frame = 0;\n        const step = () => {\n          frame += 1;\n          if (frame >= animationFrames) {\n            setPhase('visible');\n          } else {\n            requestAnimationFrame(step);\n          }\n        };\n        if (animationFrames > 0) {\n          requestAnimationFrame(step);\n        } else {\n          setPhase('visible');\n        }\n      });\n    } else if (!isOpen && shouldRender && phase !== 'animating-out') {\n      // Closing: start exit animation\n      setPhase('animating-out');\n    }\n  }, [isOpen, shouldRender, phase, animationFrames]);\n\n  // Handle exit unmount timing aligned with CSS duration\n  useEffect(() => {\n    if (phase === 'animating-out' && unmountOnExit) {\n      const timeout = setTimeout(() => {\n        setShouldRender(false);\n        setPhase('mount');\n      }, exitDuration);\n      return () => clearTimeout(timeout);\n    }\n    return undefined;\n  }, [phase, exitDuration, unmountOnExit]);\n\n  // Scroll lock & focus capture\n  useEffect(() => {\n    if (isOpen) {\n      if (typeof document !== 'undefined') {\n        if (restoreFocus) previouslyFocusedRef.current = document.activeElement as HTMLElement;\n        if (lockScroll) document.body.style.overflow = 'hidden';\n      }\n    }\n    return () => {\n      if (typeof document !== 'undefined') {\n        if (lockScroll) document.body.style.overflow = '';\n        if (!isOpen && restoreFocus && previouslyFocusedRef.current) {\n          previouslyFocusedRef.current.focus();\n        }\n      }\n    };\n  }, [isOpen, lockScroll, restoreFocus]);\n\n  // Focus dialog/panel when visible without scrolling document\n  useEffect(() => {\n    if (phase === 'visible' && containerRef.current) {\n      const el = containerRef.current as unknown as HTMLElement;\n      try {\n        // preventScroll supported in modern browsers; fallback to normal focus\n        el.focus?.({ preventScroll: true } as FocusOptions);\n      } catch {\n        el.focus?.();\n      }\n    }\n  }, [phase]);\n\n  // Focus trap\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!focusTrap || phase !== 'visible' || e.key !== 'Tab' || !containerRef.current) return;\n      const node = containerRef.current as unknown as HTMLElement;\n      const focusable = node.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      if (!focusable.length) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (document.activeElement === first || document.activeElement === node) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else if (document.activeElement === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    },\n    [focusTrap, phase]\n  );\n\n  useEffect(() => {\n    if (focusTrap && phase === 'visible') {\n      document.addEventListener('keydown', handleKeyDown);\n      return () => document.removeEventListener('keydown', handleKeyDown);\n    }\n    return undefined;\n  }, [phase, focusTrap, handleKeyDown]);\n\n  const getPhaseClass = useCallback(\n    (openClass: string, closedClass: string) => {\n      // mount: closed (initial state before animation)\n      // animating-in: open (CSS transition from closed to open)\n      // visible: open (fully open)\n      // animating-out: closed (CSS transition from open to closed)\n      return phase === 'animating-in' || phase === 'visible' ? openClass : closedClass;\n    },\n    [phase]\n  );\n\n  return { phase, shouldRender, ref: containerRef, getPhaseClass };\n}\n\nexport default useOverlay;\n"],"names":[],"mappings":"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"}

package/dist/components/feedback/popover/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './popover';
+export type { PopoverProps } from './popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/feedback/popover/popover.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type PopoverProps = {
+    /** Trigger element to click for opening the popover (alternative to children) */
+    trigger?: React.ReactNode;
+    /** Trigger element to click for opening the popover (takes precedence over trigger prop) */
+    children?: React.ReactNode;
+    /** Content to display inside the popover panel when opened */
+    content: React.ReactNode;
+    /** Position of the popover relative to the trigger element */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes to apply to the popover wrapper container */
+    className?: string;
+};
+/**
+ * Popover - Click-to-open content overlay
+ *
+ * Displays rich content in a floating panel when clicked.
+ * Uses portal rendering to escape overflow constraints.
+ */
+declare function Popover({ trigger, children, content, position, className }: Readonly<PopoverProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+}
+export default Popover;
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/feedback/popover/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,MAAM,MAAM,YAAY,GAAG;IACzB,iFAAiF;IACjF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8DAA8D;IAC9D,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAmB,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAiI3G;kBAjIQ,OAAO;;;AAqIhB,eAAe,OAAO,CAAC"}

package/dist/components/feedback/popover/popover.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+function Popover({ trigger, children, content, position = "bottom", className = "" }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const triggerContent = children || trigger;
+  const calculatePosition = useCallback(() => {
+    if (!triggerRef.current || !popoverRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = triggerRect.top - popoverRect.height - offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.left - popoverRect.width - offset;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+    const padding = 8;
+    if (left < padding) left = padding;
+    if (left + popoverRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - popoverRect.width - padding;
+    }
+    if (top < padding) top = padding;
+    if (top + popoverRect.height > window.innerHeight - padding) {
+      top = window.innerHeight - popoverRect.height - padding;
+    }
+    setCoords({ top, left });
+  }, [position]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        calculatePosition();
+      });
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      window.addEventListener("scroll", calculatePosition, true);
+      window.addEventListener("resize", calculatePosition);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+        window.removeEventListener("scroll", calculatePosition, true);
+        window.removeEventListener("resize", calculatePosition);
+      };
+    }
+    return void 0;
+  }, [isOpen, calculatePosition]);
+  const popover = isOpen ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popoverRef,
+      role: "dialog",
+      "aria-modal": "false",
+      className: `
+        fixed z-9999
+        min-w-[200px] max-w-sm
+        bg-popover text-popover-foreground 
+        border border-border 
+        rounded-lg 
+        shadow-xl 
+        p-4
+        animate-in fade-in-0 zoom-in-95
+        ${className}
+      `,
+      style: {
+        top: `${coords.top}px`,
+        left: `${coords.left}px`
+      },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        onClick: () => setIsOpen(!isOpen),
+        className: "inline-flex bg-transparent border-0 p-0 cursor-pointer",
+        type: "button",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        children: triggerContent
+      }
+    ),
+    popover && createPortal(popover, document.body)
+  ] });
+}
+Popover.displayName = "Popover";
+export {
+  Popover as default
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/feedback/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/components/feedback/popover/popover.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type PopoverProps = {\n  /** Trigger element to click for opening the popover (alternative to children) */\n  trigger?: React.ReactNode;\n  /** Trigger element to click for opening the popover (takes precedence over trigger prop) */\n  children?: React.ReactNode;\n  /** Content to display inside the popover panel when opened */\n  content: React.ReactNode;\n  /** Position of the popover relative to the trigger element */\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  /** Additional CSS classes to apply to the popover wrapper container */\n  className?: string;\n};\n\n/**\n * Popover - Click-to-open content overlay\n *\n * Displays rich content in a floating panel when clicked.\n * Uses portal rendering to escape overflow constraints.\n */\nfunction Popover({ trigger, children, content, position = 'bottom', className = '' }: Readonly<PopoverProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [coords, setCoords] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerContent = children || trigger;\n\n  const calculatePosition = useCallback(() => {\n    if (!triggerRef.current || !popoverRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const offset = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (position) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n      case 'right':\n        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;\n        left = triggerRect.right + offset;\n        break;\n    }\n\n    // Viewport clamping\n    const padding = 8;\n    if (left < padding) left = padding;\n    if (left + popoverRect.width > window.innerWidth - padding) {\n      left = window.innerWidth - popoverRect.width - padding;\n    }\n    if (top < padding) top = padding;\n    if (top + popoverRect.height > window.innerHeight - padding) {\n      top = window.innerHeight - popoverRect.height - padding;\n    }\n\n    setCoords({ top, left });\n  }, [position]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        popoverRef.current &&\n        !popoverRef.current.contains(event.target as Node) &&\n        triggerRef.current &&\n        !triggerRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      // Position on next frame\n      requestAnimationFrame(() => {\n        calculatePosition();\n      });\n\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleEscape);\n      window.addEventListener('scroll', calculatePosition, true);\n      window.addEventListener('resize', calculatePosition);\n\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('keydown', handleEscape);\n        window.removeEventListener('scroll', calculatePosition, true);\n        window.removeEventListener('resize', calculatePosition);\n      };\n    }\n    return undefined;\n  }, [isOpen, calculatePosition]);\n\n  const popover = isOpen ? (\n    <div\n      ref={popoverRef}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      className={`\n        fixed z-9999\n        min-w-[200px] max-w-sm\n        bg-popover text-popover-foreground \n        border border-border \n        rounded-lg \n        shadow-xl \n        p-4\n        animate-in fade-in-0 zoom-in-95\n        ${className}\n      `}\n      style={{\n        top: `${coords.top}px`,\n        left: `${coords.left}px`\n      }}\n    >\n      {content}\n    </div>\n  ) : null;\n\n  return (\n    <>\n      <button\n        ref={triggerRef}\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"inline-flex bg-transparent border-0 p-0 cursor-pointer\"\n        type=\"button\"\n        aria-expanded={isOpen}\n        aria-haspopup=\"dialog\"\n      >\n        {triggerContent}\n      </button>\n      {popover && createPortal(popover, document.body)}\n    </>\n  );\n}\n\nPopover.displayName = 'Popover';\n\nexport default Popover;\n"],"names":[],"mappings":"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"}

package/dist/components/feedback/progress-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './progress-bar';
+export type { ProgressBarProps } from './progress-bar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/feedback/progress-bar/progress-bar.d.ts

@@ -0,0 +1,22 @@
+import { ColorVariant } from '../../../theme/tokens';
+export type ProgressBarProps = {
+    /** Current progress value */
+    value: number;
+    /** Maximum value for the progress bar (defaults to 100) */
+    max?: number;
+    /** Whether to display the percentage label next to the progress bar */
+    showLabel?: boolean;
+    /** Visual style variant indicating the progress state */
+    variant?: ColorVariant;
+    /** Additional CSS classes to apply to the progress bar container */
+    className?: string;
+};
+/**
+ * ProgressBar - Visual representation of completion
+ */
+declare function ProgressBar({ value, max, showLabel, variant, className }: Readonly<ProgressBarProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ProgressBar {
+    var displayName: string;
+}
+export default ProgressBar;
+//# sourceMappingURL=progress-bar.d.ts.map

package/dist/components/feedback/progress-bar/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,GAAS,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAsBpH;kBAtBQ,WAAW;;;AA0BpB,eAAe,WAAW,CAAC"}