@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/feedback/Toast/Toast.js

@@ -0,0 +1,216 @@
+import { jsxs as y, Fragment as Y, jsx as t } from "react/jsx-runtime";
+import { forwardRef as B, useState as b, useEffect as T, useCallback as x } from "react";
+import { createPortal as N } from "react-dom";
+import { cx as P } from "../../../utils/styles.js";
+import { ToastContext as R } from "./ToastContext.js";
+const $ = {
+  info: {
+    bg: "var(--brycks-info-50)",
+    border: "var(--brycks-info-200)",
+    icon: "var(--brycks-info-default)"
+  },
+  success: {
+    bg: "var(--brycks-success-50)",
+    border: "var(--brycks-success-200)",
+    icon: "var(--brycks-success-default)"
+  },
+  warning: {
+    bg: "var(--brycks-warning-50)",
+    border: "var(--brycks-warning-200)",
+    icon: "var(--brycks-warning-default)"
+  },
+  error: {
+    bg: "var(--brycks-error-50)",
+    border: "var(--brycks-error-200)",
+    icon: "var(--brycks-error-default)"
+  }
+};
+function D({ intent: m }) {
+  return /* @__PURE__ */ t("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ t("path", { d: {
+    info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+    success: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
+    warning: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+    error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+  }[m] }) });
+}
+function H() {
+  return /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ t("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+const C = B(function({
+  intent: n = "info",
+  title: a,
+  description: i,
+  isOpen: r = !0,
+  duration: c = 5e3,
+  onClose: l,
+  showCloseButton: g = !0,
+  action: d,
+  icon: p,
+  className: h,
+  style: k,
+  testId: e,
+  ...o
+}, u) {
+  const [f, w] = b(r), [M, S] = b(!1);
+  if (T(() => {
+    if (r)
+      w(!0), S(!1);
+    else {
+      S(!0);
+      const s = setTimeout(() => w(!1), 200);
+      return () => clearTimeout(s);
+    }
+  }, [r]), T(() => {
+    if (!r || c === 0) return;
+    const s = setTimeout(() => {
+      l?.();
+    }, c);
+    return () => clearTimeout(s);
+  }, [r, c, l]), !f) return null;
+  const v = $[n], z = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 12,
+    padding: "12px 16px",
+    backgroundColor: v.bg,
+    border: `1px solid ${v.border}`,
+    borderRadius: "var(--brycks-radius-lg)",
+    boxShadow: "var(--brycks-shadow-lg)",
+    maxWidth: 400,
+    animation: M ? "brycks-toast-out 200ms ease-in forwards" : "brycks-toast-in 200ms ease-out",
+    ...k
+  }, I = {
+    color: v.icon,
+    flexShrink: 0,
+    marginTop: 2
+  }, L = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  }, E = {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-default)",
+    lineHeight: 1.4
+  }, W = {
+    fontSize: 13,
+    color: "var(--brycks-foreground-muted)",
+    lineHeight: 1.4
+  }, j = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 24,
+    height: 24,
+    borderRadius: "var(--brycks-radius-sm)",
+    color: "var(--brycks-foreground-muted)",
+    transition: "all 150ms ease-out",
+    flexShrink: 0,
+    marginLeft: "auto"
+  };
+  return /* @__PURE__ */ y(Y, { children: [
+    /* @__PURE__ */ t("style", { children: `
+          @keyframes brycks-toast-in {
+            from { opacity: 0; transform: translateY(-8px) scale(0.95); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
+          }
+          @keyframes brycks-toast-out {
+            from { opacity: 1; transform: translateY(0) scale(1); }
+            to { opacity: 0; transform: translateY(-8px) scale(0.95); }
+          }
+        ` }),
+    /* @__PURE__ */ y(
+      "div",
+      {
+        ref: u,
+        role: "alert",
+        "aria-live": "polite",
+        className: P("brycks-toast", `brycks-toast--${n}`, h),
+        style: z,
+        "data-testid": e,
+        ...o,
+        children: [
+          /* @__PURE__ */ t("span", { style: I, children: p || /* @__PURE__ */ t(D, { intent: n }) }),
+          /* @__PURE__ */ y("div", { style: L, children: [
+            a && /* @__PURE__ */ t("span", { style: E, children: a }),
+            i && /* @__PURE__ */ t("span", { style: W, children: i }),
+            d && /* @__PURE__ */ t("div", { style: { marginTop: 8 }, children: d })
+          ] }),
+          g && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              style: j,
+              onClick: l,
+              "aria-label": "Close toast",
+              onMouseEnter: (s) => {
+                s.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
+              },
+              onMouseLeave: (s) => {
+                s.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: /* @__PURE__ */ t(H, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+C.displayName = "Toast";
+const V = {
+  "top-left": { top: 16, left: 16 },
+  "top-center": { top: 16, left: "50%", transform: "translateX(-50%)" },
+  "top-right": { top: 16, right: 16 },
+  "bottom-left": { bottom: 16, left: 16 },
+  "bottom-center": { bottom: 16, left: "50%", transform: "translateX(-50%)" },
+  "bottom-right": { bottom: 16, right: 16 }
+};
+let X = 0;
+function K({
+  children: m,
+  position: n = "top-right",
+  maxToasts: a = 5
+}) {
+  const [i, r] = b([]), [c, l] = b(!1);
+  T(() => {
+    l(!0);
+  }, []);
+  const g = x(
+    (e) => {
+      const o = `toast-${++X}`;
+      return r((u) => {
+        const f = [...u, { id: o, props: e }];
+        return f.length > a ? f.slice(-a) : f;
+      }), o;
+    },
+    [a]
+  ), d = x((e) => {
+    r((o) => o.filter((u) => u.id !== e));
+  }, []), p = x(() => {
+    r([]);
+  }, []), h = {
+    position: "fixed",
+    zIndex: "var(--brycks-z-toast)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    pointerEvents: "none",
+    ...V[n]
+  }, k = {
+    pointerEvents: "auto"
+  };
+  return /* @__PURE__ */ y(R.Provider, { value: { toasts: i, addToast: g, removeToast: d, removeAll: p }, children: [
+    m,
+    c && N(
+      /* @__PURE__ */ t("div", { className: "brycks-toast-container", style: h, children: i.map(({ id: e, props: o }) => /* @__PURE__ */ t("div", { style: k, children: /* @__PURE__ */ t(C, { ...o, isOpen: !0, onClose: () => d(e) }) }, e)) }),
+      document.body
+    )
+  ] });
+}
+export {
+  C as Toast,
+  K as ToastProvider
+};
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["/**\n * Toast Component\n *\n * A notification toast with auto-dismiss and action support.\n * Includes a toast container for managing multiple toasts.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useEffect,\n  useCallback,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { ToastContext } from './ToastContext'\nimport type { ToastItem } from './ToastContext'\n\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'error'\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Toast intent/type */\n  intent?: ToastIntent\n  /** Toast title */\n  title?: ReactNode\n  /** Toast description */\n  description?: ReactNode\n  /** Whether the toast is visible */\n  isOpen?: boolean\n  /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */\n  duration?: number\n  /** Callback when toast should close */\n  onClose?: () => void\n  /** Whether to show close button */\n  showCloseButton?: boolean\n  /** Action button */\n  action?: ReactNode\n  /** Custom icon */\n  icon?: ReactNode\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst intentConfig: Record<ToastIntent, { bg: string; border: string; icon: string }> = {\n  info: {\n    bg: 'var(--brycks-info-50)',\n    border: 'var(--brycks-info-200)',\n    icon: 'var(--brycks-info-default)',\n  },\n  success: {\n    bg: 'var(--brycks-success-50)',\n    border: 'var(--brycks-success-200)',\n    icon: 'var(--brycks-success-default)',\n  },\n  warning: {\n    bg: 'var(--brycks-warning-50)',\n    border: 'var(--brycks-warning-200)',\n    icon: 'var(--brycks-warning-default)',\n  },\n  error: {\n    bg: 'var(--brycks-error-50)',\n    border: 'var(--brycks-error-200)',\n    icon: 'var(--brycks-error-default)',\n  },\n}\n\nfunction ToastIcon({ intent }: { intent: ToastIntent }) {\n  const paths: Record<ToastIntent, string> = {\n    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',\n    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',\n    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',\n    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',\n  }\n\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d={paths[intent]} />\n    </svg>\n  )\n}\n\nfunction CloseIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  {\n    intent = 'info',\n    title,\n    description,\n    isOpen = true,\n    duration = 5000,\n    onClose,\n    showCloseButton = true,\n    action,\n    icon,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [isVisible, setIsVisible] = useState(isOpen)\n  const [isExiting, setIsExiting] = useState(false)\n\n  useEffect(() => {\n    if (isOpen) {\n      setIsVisible(true)\n      setIsExiting(false)\n    } else {\n      setIsExiting(true)\n      const timer = setTimeout(() => setIsVisible(false), 200)\n      return () => clearTimeout(timer)\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    if (!isOpen || duration === 0) return\n\n    const timer = setTimeout(() => {\n      onClose?.()\n    }, duration)\n\n    return () => clearTimeout(timer)\n  }, [isOpen, duration, onClose])\n\n  if (!isVisible) return null\n\n  const config = intentConfig[intent]\n\n  const toastStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 12,\n    padding: '12px 16px',\n    backgroundColor: config.bg,\n    border: `1px solid ${config.border}`,\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    maxWidth: 400,\n    animation: isExiting\n      ? 'brycks-toast-out 200ms ease-in forwards'\n      : 'brycks-toast-in 200ms ease-out',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    color: config.icon,\n    flexShrink: 0,\n    marginTop: 2,\n  }\n\n  const contentStyle: CSSProperties = {\n    flex: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  }\n\n  const titleStyle: CSSProperties = {\n    fontSize: 14,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-default)',\n    lineHeight: 1.4,\n  }\n\n  const descriptionStyle: CSSProperties = {\n    fontSize: 13,\n    color: 'var(--brycks-foreground-muted)',\n    lineHeight: 1.4,\n  }\n\n  const closeButtonStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 24,\n    height: 24,\n    borderRadius: 'var(--brycks-radius-sm)',\n    color: 'var(--brycks-foreground-muted)',\n    transition: 'all 150ms ease-out',\n    flexShrink: 0,\n    marginLeft: 'auto',\n  }\n\n  return (\n    <>\n      <style>\n        {`\n          @keyframes brycks-toast-in {\n            from { opacity: 0; transform: translateY(-8px) scale(0.95); }\n            to { opacity: 1; transform: translateY(0) scale(1); }\n          }\n          @keyframes brycks-toast-out {\n            from { opacity: 1; transform: translateY(0) scale(1); }\n            to { opacity: 0; transform: translateY(-8px) scale(0.95); }\n          }\n        `}\n      </style>\n      <div\n        ref={ref}\n        role=\"alert\"\n        aria-live=\"polite\"\n        className={cx('brycks-toast', `brycks-toast--${intent}`, className)}\n        style={toastStyle}\n        data-testid={testId}\n        {...props}\n      >\n        <span style={iconStyle}>\n          {icon || <ToastIcon intent={intent} />}\n        </span>\n        <div style={contentStyle}>\n          {title && <span style={titleStyle}>{title}</span>}\n          {description && <span style={descriptionStyle}>{description}</span>}\n          {action && <div style={{ marginTop: 8 }}>{action}</div>}\n        </div>\n        {showCloseButton && (\n          <button\n            type=\"button\"\n            style={closeButtonStyle}\n            onClick={onClose}\n            aria-label=\"Close toast\"\n            onMouseEnter={(e) => {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = 'transparent'\n            }}\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    </>\n  )\n})\n\nToast.displayName = 'Toast'\n\n// Toast Provider\nexport interface ToastProviderProps {\n  children: ReactNode\n  position?: ToastPosition\n  maxToasts?: number\n}\n\nconst positionStyles: Record<ToastPosition, CSSProperties> = {\n  'top-left': { top: 16, left: 16 },\n  'top-center': { top: 16, left: '50%', transform: 'translateX(-50%)' },\n  'top-right': { top: 16, right: 16 },\n  'bottom-left': { bottom: 16, left: 16 },\n  'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },\n  'bottom-right': { bottom: 16, right: 16 },\n}\n\nlet toastCounter = 0\n\nexport function ToastProvider({\n  children,\n  position = 'top-right',\n  maxToasts = 5,\n}: ToastProviderProps) {\n  const [toasts, setToasts] = useState<ToastItem[]>([])\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const addToast = useCallback(\n    (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => {\n      const id = `toast-${++toastCounter}`\n      setToasts((prev) => {\n        const newToasts = [...prev, { id, props }]\n        if (newToasts.length > maxToasts) {\n          return newToasts.slice(-maxToasts)\n        }\n        return newToasts\n      })\n      return id\n    },\n    [maxToasts]\n  )\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((t) => t.id !== id))\n  }, [])\n\n  const removeAll = useCallback(() => {\n    setToasts([])\n  }, [])\n\n  const containerStyle: CSSProperties = {\n    position: 'fixed',\n    zIndex: 'var(--brycks-z-toast)' as unknown as number,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    pointerEvents: 'none',\n    ...positionStyles[position],\n  }\n\n  const toastWrapperStyle: CSSProperties = {\n    pointerEvents: 'auto',\n  }\n\n  return (\n    <ToastContext.Provider value={{ toasts, addToast, removeToast, removeAll }}>\n      {children}\n      {mounted &&\n        createPortal(\n          <div className=\"brycks-toast-container\" style={containerStyle}>\n            {toasts.map(({ id, props }) => (\n              <div key={id} style={toastWrapperStyle}>\n                <Toast {...props} isOpen onClose={() => removeToast(id)} />\n              </div>\n            ))}\n          </div>,\n          document.body\n        )}\n    </ToastContext.Provider>\n  )\n}\n"],"names":["intentConfig","ToastIcon","intent","jsx","CloseIcon","Toast","forwardRef","title","description","isOpen","duration","onClose","showCloseButton","action","icon","className","style","testId","props","ref","isVisible","setIsVisible","useState","isExiting","setIsExiting","useEffect","timer","config","toastStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","closeButtonStyle","jsxs","Fragment","cx","e","positionStyles","toastCounter","ToastProvider","children","position","maxToasts","toasts","setToasts","mounted","setMounted","addToast","useCallback","id","prev","newToasts","removeToast","t","removeAll","containerStyle","toastWrapperStyle","ToastContext","createPortal"],"mappings":"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"}

package/dist/components/feedback/Toast/ToastContext.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=e.createContext(null);function s(){const t=e.useContext(o);if(!t)throw new Error("useToast must be used within a ToastProvider");return t}exports.ToastContext=o;exports.useToast=s;
+//# sourceMappingURL=ToastContext.cjs.map

package/dist/components/feedback/Toast/ToastContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.cjs","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"sourcesContent":["/**\r\n * Toast Context\r\n *\r\n * Context and hook for managing toasts.\r\n */\r\n\r\nimport { createContext, useContext } from 'react'\r\nimport type { ToastProps } from './Toast'\r\n\r\nexport interface ToastItem {\r\n  id: string\r\n  props: Omit<ToastProps, 'isOpen' | 'onClose'>\r\n}\r\n\r\nexport interface ToastContextValue {\r\n  toasts: ToastItem[]\r\n  addToast: (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => string\r\n  removeToast: (id: string) => void\r\n  removeAll: () => void\r\n}\r\n\r\nexport const ToastContext = createContext<ToastContextValue | null>(null)\r\n\r\nexport function useToast() {\r\n  const context = useContext(ToastContext)\r\n  if (!context) {\r\n    throw new Error('useToast must be used within a ToastProvider')\r\n  }\r\n  return context\r\n}\r\n"],"names":["ToastContext","createContext","useToast","context","useContext"],"mappings":"yGAqBaA,EAAeC,EAAAA,cAAwC,IAAI,EAEjE,SAASC,GAAW,CACzB,MAAMC,EAAUC,EAAAA,WAAWJ,CAAY,EACvC,GAAI,CAACG,EACH,MAAM,IAAI,MAAM,8CAA8C,EAEhE,OAAOA,CACT"}

package/dist/components/feedback/Toast/ToastContext.js

@@ -0,0 +1,13 @@
+import { createContext as o, useContext as e } from "react";
+const n = o(null);
+function s() {
+  const t = e(n);
+  if (!t)
+    throw new Error("useToast must be used within a ToastProvider");
+  return t;
+}
+export {
+  n as ToastContext,
+  s as useToast
+};
+//# sourceMappingURL=ToastContext.js.map

package/dist/components/feedback/Toast/ToastContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.js","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"sourcesContent":["/**\r\n * Toast Context\r\n *\r\n * Context and hook for managing toasts.\r\n */\r\n\r\nimport { createContext, useContext } from 'react'\r\nimport type { ToastProps } from './Toast'\r\n\r\nexport interface ToastItem {\r\n  id: string\r\n  props: Omit<ToastProps, 'isOpen' | 'onClose'>\r\n}\r\n\r\nexport interface ToastContextValue {\r\n  toasts: ToastItem[]\r\n  addToast: (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => string\r\n  removeToast: (id: string) => void\r\n  removeAll: () => void\r\n}\r\n\r\nexport const ToastContext = createContext<ToastContextValue | null>(null)\r\n\r\nexport function useToast() {\r\n  const context = useContext(ToastContext)\r\n  if (!context) {\r\n    throw new Error('useToast must be used within a ToastProvider')\r\n  }\r\n  return context\r\n}\r\n"],"names":["ToastContext","createContext","useToast","context","useContext"],"mappings":";AAqBO,MAAMA,IAAeC,EAAwC,IAAI;AAEjE,SAASC,IAAW;AACzB,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT;"}

package/dist/components/feedback/Tooltip/Tooltip.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("react"),P=require("react-dom"),I=require("../../../utils/styles.cjs"),B=require("../../../hooks/useMediaQuery.cjs"),v=e.forwardRef(function({content:k,placement:i="top",delay:x=200,isDisabled:R,className:T,testId:M,children:S,...j},l){const[u,p]=e.useState(!1),[b,E]=e.useState({top:0,left:0}),h=e.useRef(null),g=e.useRef(null),a=e.useRef(null),y=e.useId(),L=B.usePrefersReducedMotion(),c=e.useCallback(()=>{if(!h.current||!g.current)return;const t=h.current.getBoundingClientRect(),o=g.current.getBoundingClientRect(),d=8;let s=0,n=0;switch(i){case"top":s=t.top-o.height-d,n=t.left+(t.width-o.width)/2;break;case"bottom":s=t.bottom+d,n=t.left+(t.width-o.width)/2;break;case"left":s=t.top+(t.height-o.height)/2,n=t.left-o.width-d;break;case"right":s=t.top+(t.height-o.height)/2,n=t.right+d;break}const f=8;n=Math.max(f,Math.min(n,window.innerWidth-o.width-f)),s=Math.max(f,Math.min(s,window.innerHeight-o.height-f)),E({top:s,left:n})},[i]);e.useEffect(()=>(u&&(c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c)),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}),[u,c]);const m=()=>{R||(a.current=setTimeout(()=>{p(!0)},x))},w=()=>{a.current&&clearTimeout(a.current),p(!1)};e.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]);const z={display:"inline-flex"},q={position:"fixed",top:b.top,left:b.left,zIndex:"var(--brycks-z-tooltip)",maxWidth:300,padding:"var(--brycks-space-1-5) var(--brycks-space-2-5)",fontSize:"var(--brycks-font-size-xs)",fontWeight:500,lineHeight:1.4,color:"var(--brycks-foreground-inverse)",backgroundColor:"var(--brycks-background-inverse)",borderRadius:"var(--brycks-radius-md)",boxShadow:"var(--brycks-shadow-lg)",pointerEvents:"none",animation:L?"none":"brycks-tooltip-in 150ms ease-out"},C={position:"absolute",width:8,height:8,backgroundColor:"var(--brycks-background-inverse)",transform:"rotate(45deg)",...i==="top"&&{bottom:-4,left:"50%",marginLeft:-4},...i==="bottom"&&{top:-4,left:"50%",marginLeft:-4},...i==="left"&&{right:-4,top:"50%",marginTop:-4},...i==="right"&&{left:-4,top:"50%",marginTop:-4}};return r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:h,style:z,onMouseEnter:m,onMouseLeave:w,onFocus:m,onBlur:w,"aria-describedby":u?y:void 0,children:S}),u&&P.createPortal(r.jsxs(r.Fragment,{children:[r.jsx("style",{children:`
+                @keyframes brycks-tooltip-in {
+                  from { opacity: 0; transform: scale(0.95); }
+                  to { opacity: 1; transform: scale(1); }
+                }
+              `}),r.jsxs("div",{ref:t=>{g.current=t,typeof l=="function"?l(t):l&&(l.current=t)},id:y,role:"tooltip",className:I.cx("brycks-tooltip",`brycks-tooltip--${i}`,T),style:q,"data-testid":M,...j,children:[k,r.jsx("span",{style:C})]})]}),document.body)]})});v.displayName="Tooltip";exports.Tooltip=v;
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/components/feedback/Tooltip/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/feedback/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\r\n * Tooltip Component\r\n *\r\n * Lightweight tooltip for displaying additional information on hover.\r\n * Clean animation with proper positioning.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  useId,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\r\n\r\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\r\n  /** Tooltip content */\r\n  content: ReactNode\r\n  /** Placement relative to trigger */\r\n  placement?: TooltipPlacement\r\n  /** Delay before showing (ms) */\r\n  delay?: number\r\n  /** Whether tooltip is disabled */\r\n  isDisabled?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Trigger element */\r\n  children: ReactNode\r\n}\r\n\r\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\r\n  {\r\n    content,\r\n    placement = 'top',\r\n    delay = 200,\r\n    isDisabled,\r\n    className,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isVisible, setIsVisible] = useState(false)\r\n  const [position, setPosition] = useState({ top: 0, left: 0 })\r\n  const triggerRef = useRef<HTMLDivElement>(null)\r\n  const tooltipRef = useRef<HTMLDivElement>(null)\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\r\n  const tooltipId = useId()\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  const calculatePosition = useCallback(() => {\r\n    if (!triggerRef.current || !tooltipRef.current) return\r\n\r\n    const triggerRect = triggerRef.current.getBoundingClientRect()\r\n    const tooltipRect = tooltipRef.current.getBoundingClientRect()\r\n    const gap = 8\r\n\r\n    let top = 0\r\n    let left = 0\r\n\r\n    switch (placement) {\r\n      case 'top':\r\n        top = triggerRect.top - tooltipRect.height - gap\r\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2\r\n        break\r\n      case 'bottom':\r\n        top = triggerRect.bottom + gap\r\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2\r\n        break\r\n      case 'left':\r\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2\r\n        left = triggerRect.left - tooltipRect.width - gap\r\n        break\r\n      case 'right':\r\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2\r\n        left = triggerRect.right + gap\r\n        break\r\n    }\r\n\r\n    // Keep tooltip within viewport\r\n    const padding = 8\r\n    left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding))\r\n    top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding))\r\n\r\n    setPosition({ top, left })\r\n  }, [placement])\r\n\r\n  useEffect(() => {\r\n    if (isVisible) {\r\n      calculatePosition()\r\n      window.addEventListener('scroll', calculatePosition, true)\r\n      window.addEventListener('resize', calculatePosition)\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('scroll', calculatePosition, true)\r\n      window.removeEventListener('resize', calculatePosition)\r\n    }\r\n  }, [isVisible, calculatePosition])\r\n\r\n  const showTooltip = () => {\r\n    if (isDisabled) return\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsVisible(true)\r\n    }, delay)\r\n  }\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current)\r\n    }\r\n    setIsVisible(false)\r\n  }\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) {\r\n        clearTimeout(timeoutRef.current)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  const triggerStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n  }\r\n\r\n  const tooltipStyle: CSSProperties = {\r\n    position: 'fixed',\r\n    top: position.top,\r\n    left: position.left,\r\n    zIndex: 'var(--brycks-z-tooltip)',\r\n    maxWidth: 300,\r\n    padding: 'var(--brycks-space-1-5) var(--brycks-space-2-5)',\r\n    fontSize: 'var(--brycks-font-size-xs)',\r\n    fontWeight: 500,\r\n    lineHeight: 1.4,\r\n    color: 'var(--brycks-foreground-inverse)',\r\n    backgroundColor: 'var(--brycks-background-inverse)',\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    boxShadow: 'var(--brycks-shadow-lg)',\r\n    pointerEvents: 'none',\r\n    animation: prefersReducedMotion ? 'none' : 'brycks-tooltip-in 150ms ease-out',\r\n  }\r\n\r\n  const arrowStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: 8,\r\n    height: 8,\r\n    backgroundColor: 'var(--brycks-background-inverse)',\r\n    transform: 'rotate(45deg)',\r\n    ...(placement === 'top' && { bottom: -4, left: '50%', marginLeft: -4 }),\r\n    ...(placement === 'bottom' && { top: -4, left: '50%', marginLeft: -4 }),\r\n    ...(placement === 'left' && { right: -4, top: '50%', marginTop: -4 }),\r\n    ...(placement === 'right' && { left: -4, top: '50%', marginTop: -4 }),\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        ref={triggerRef}\r\n        style={triggerStyle}\r\n        onMouseEnter={showTooltip}\r\n        onMouseLeave={hideTooltip}\r\n        onFocus={showTooltip}\r\n        onBlur={hideTooltip}\r\n        aria-describedby={isVisible ? tooltipId : undefined}\r\n      >\r\n        {children}\r\n      </div>\r\n\r\n      {isVisible &&\r\n        createPortal(\r\n          <>\r\n            <style>\r\n              {`\r\n                @keyframes brycks-tooltip-in {\r\n                  from { opacity: 0; transform: scale(0.95); }\r\n                  to { opacity: 1; transform: scale(1); }\r\n                }\r\n              `}\r\n            </style>\r\n            <div\r\n              ref={(node) => {\r\n                (tooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n                if (typeof ref === 'function') ref(node)\r\n                else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n              }}\r\n              id={tooltipId}\r\n              role=\"tooltip\"\r\n              className={cx('brycks-tooltip', `brycks-tooltip--${placement}`, className)}\r\n              style={tooltipStyle}\r\n              data-testid={testId}\r\n              {...props}\r\n            >\r\n              {content}\r\n              <span style={arrowStyle} />\r\n            </div>\r\n          </>,\r\n          document.body\r\n        )}\r\n    </>\r\n  )\r\n})\r\n\r\nTooltip.displayName = 'Tooltip'\r\n"],"names":["Tooltip","forwardRef","content","placement","delay","isDisabled","className","testId","children","props","ref","isVisible","setIsVisible","useState","position","setPosition","triggerRef","useRef","tooltipRef","timeoutRef","tooltipId","useId","prefersReducedMotion","usePrefersReducedMotion","calculatePosition","useCallback","triggerRect","tooltipRect","gap","top","left","padding","useEffect","showTooltip","hideTooltip","triggerStyle","tooltipStyle","arrowStyle","jsxs","Fragment","jsx","createPortal","node","cx"],"mappings":"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"}

package/dist/components/feedback/Tooltip/Tooltip.js

@@ -0,0 +1,128 @@
+import { jsxs as p, Fragment as v, jsx as h } from "react/jsx-runtime";
+import { forwardRef as F, useState as x, useRef as g, useId as H, useCallback as N, useEffect as R } from "react";
+import { createPortal as V } from "react-dom";
+import { cx as $ } from "../../../utils/styles.js";
+import { usePrefersReducedMotion as q } from "../../../hooks/useMediaQuery.js";
+const A = F(function({
+  content: T,
+  placement: o = "top",
+  delay: M = 200,
+  isDisabled: E,
+  className: L,
+  testId: z,
+  children: S,
+  ...C
+}, c) {
+  const [a, m] = x(!1), [b, I] = x({ top: 0, left: 0 }), u = g(null), f = g(null), s = g(null), y = H(), P = q(), n = N(() => {
+    if (!u.current || !f.current) return;
+    const t = u.current.getBoundingClientRect(), e = f.current.getBoundingClientRect(), l = 8;
+    let r = 0, i = 0;
+    switch (o) {
+      case "top":
+        r = t.top - e.height - l, i = t.left + (t.width - e.width) / 2;
+        break;
+      case "bottom":
+        r = t.bottom + l, i = t.left + (t.width - e.width) / 2;
+        break;
+      case "left":
+        r = t.top + (t.height - e.height) / 2, i = t.left - e.width - l;
+        break;
+      case "right":
+        r = t.top + (t.height - e.height) / 2, i = t.right + l;
+        break;
+    }
+    const d = 8;
+    i = Math.max(d, Math.min(i, window.innerWidth - e.width - d)), r = Math.max(d, Math.min(r, window.innerHeight - e.height - d)), I({ top: r, left: i });
+  }, [o]);
+  R(() => (a && (n(), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n)), () => {
+    window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n);
+  }), [a, n]);
+  const w = () => {
+    E || (s.current = setTimeout(() => {
+      m(!0);
+    }, M));
+  }, k = () => {
+    s.current && clearTimeout(s.current), m(!1);
+  };
+  R(() => () => {
+    s.current && clearTimeout(s.current);
+  }, []);
+  const B = {
+    display: "inline-flex"
+  }, W = {
+    position: "fixed",
+    top: b.top,
+    left: b.left,
+    zIndex: "var(--brycks-z-tooltip)",
+    maxWidth: 300,
+    padding: "var(--brycks-space-1-5) var(--brycks-space-2-5)",
+    fontSize: "var(--brycks-font-size-xs)",
+    fontWeight: 500,
+    lineHeight: 1.4,
+    color: "var(--brycks-foreground-inverse)",
+    backgroundColor: "var(--brycks-background-inverse)",
+    borderRadius: "var(--brycks-radius-md)",
+    boxShadow: "var(--brycks-shadow-lg)",
+    pointerEvents: "none",
+    animation: P ? "none" : "brycks-tooltip-in 150ms ease-out"
+  }, j = {
+    position: "absolute",
+    width: 8,
+    height: 8,
+    backgroundColor: "var(--brycks-background-inverse)",
+    transform: "rotate(45deg)",
+    ...o === "top" && { bottom: -4, left: "50%", marginLeft: -4 },
+    ...o === "bottom" && { top: -4, left: "50%", marginLeft: -4 },
+    ...o === "left" && { right: -4, top: "50%", marginTop: -4 },
+    ...o === "right" && { left: -4, top: "50%", marginTop: -4 }
+  };
+  return /* @__PURE__ */ p(v, { children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        ref: u,
+        style: B,
+        onMouseEnter: w,
+        onMouseLeave: k,
+        onFocus: w,
+        onBlur: k,
+        "aria-describedby": a ? y : void 0,
+        children: S
+      }
+    ),
+    a && V(
+      /* @__PURE__ */ p(v, { children: [
+        /* @__PURE__ */ h("style", { children: `
+                @keyframes brycks-tooltip-in {
+                  from { opacity: 0; transform: scale(0.95); }
+                  to { opacity: 1; transform: scale(1); }
+                }
+              ` }),
+        /* @__PURE__ */ p(
+          "div",
+          {
+            ref: (t) => {
+              f.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+            },
+            id: y,
+            role: "tooltip",
+            className: $("brycks-tooltip", `brycks-tooltip--${o}`, L),
+            style: W,
+            "data-testid": z,
+            ...C,
+            children: [
+              T,
+              /* @__PURE__ */ h("span", { style: j })
+            ]
+          }
+        )
+      ] }),
+      document.body
+    )
+  ] });
+});
+A.displayName = "Tooltip";
+export {
+  A as Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/feedback/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\r\n * Tooltip Component\r\n *\r\n * Lightweight tooltip for displaying additional information on hover.\r\n * Clean animation with proper positioning.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  useId,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\r\n\r\nexport interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\r\n  /** Tooltip content */\r\n  content: ReactNode\r\n  /** Placement relative to trigger */\r\n  placement?: TooltipPlacement\r\n  /** Delay before showing (ms) */\r\n  delay?: number\r\n  /** Whether tooltip is disabled */\r\n  isDisabled?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Trigger element */\r\n  children: ReactNode\r\n}\r\n\r\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\r\n  {\r\n    content,\r\n    placement = 'top',\r\n    delay = 200,\r\n    isDisabled,\r\n    className,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isVisible, setIsVisible] = useState(false)\r\n  const [position, setPosition] = useState({ top: 0, left: 0 })\r\n  const triggerRef = useRef<HTMLDivElement>(null)\r\n  const tooltipRef = useRef<HTMLDivElement>(null)\r\n  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null)\r\n  const tooltipId = useId()\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  const calculatePosition = useCallback(() => {\r\n    if (!triggerRef.current || !tooltipRef.current) return\r\n\r\n    const triggerRect = triggerRef.current.getBoundingClientRect()\r\n    const tooltipRect = tooltipRef.current.getBoundingClientRect()\r\n    const gap = 8\r\n\r\n    let top = 0\r\n    let left = 0\r\n\r\n    switch (placement) {\r\n      case 'top':\r\n        top = triggerRect.top - tooltipRect.height - gap\r\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2\r\n        break\r\n      case 'bottom':\r\n        top = triggerRect.bottom + gap\r\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2\r\n        break\r\n      case 'left':\r\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2\r\n        left = triggerRect.left - tooltipRect.width - gap\r\n        break\r\n      case 'right':\r\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2\r\n        left = triggerRect.right + gap\r\n        break\r\n    }\r\n\r\n    // Keep tooltip within viewport\r\n    const padding = 8\r\n    left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding))\r\n    top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding))\r\n\r\n    setPosition({ top, left })\r\n  }, [placement])\r\n\r\n  useEffect(() => {\r\n    if (isVisible) {\r\n      calculatePosition()\r\n      window.addEventListener('scroll', calculatePosition, true)\r\n      window.addEventListener('resize', calculatePosition)\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('scroll', calculatePosition, true)\r\n      window.removeEventListener('resize', calculatePosition)\r\n    }\r\n  }, [isVisible, calculatePosition])\r\n\r\n  const showTooltip = () => {\r\n    if (isDisabled) return\r\n    timeoutRef.current = setTimeout(() => {\r\n      setIsVisible(true)\r\n    }, delay)\r\n  }\r\n\r\n  const hideTooltip = () => {\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current)\r\n    }\r\n    setIsVisible(false)\r\n  }\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) {\r\n        clearTimeout(timeoutRef.current)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  const triggerStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n  }\r\n\r\n  const tooltipStyle: CSSProperties = {\r\n    position: 'fixed',\r\n    top: position.top,\r\n    left: position.left,\r\n    zIndex: 'var(--brycks-z-tooltip)',\r\n    maxWidth: 300,\r\n    padding: 'var(--brycks-space-1-5) var(--brycks-space-2-5)',\r\n    fontSize: 'var(--brycks-font-size-xs)',\r\n    fontWeight: 500,\r\n    lineHeight: 1.4,\r\n    color: 'var(--brycks-foreground-inverse)',\r\n    backgroundColor: 'var(--brycks-background-inverse)',\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    boxShadow: 'var(--brycks-shadow-lg)',\r\n    pointerEvents: 'none',\r\n    animation: prefersReducedMotion ? 'none' : 'brycks-tooltip-in 150ms ease-out',\r\n  }\r\n\r\n  const arrowStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: 8,\r\n    height: 8,\r\n    backgroundColor: 'var(--brycks-background-inverse)',\r\n    transform: 'rotate(45deg)',\r\n    ...(placement === 'top' && { bottom: -4, left: '50%', marginLeft: -4 }),\r\n    ...(placement === 'bottom' && { top: -4, left: '50%', marginLeft: -4 }),\r\n    ...(placement === 'left' && { right: -4, top: '50%', marginTop: -4 }),\r\n    ...(placement === 'right' && { left: -4, top: '50%', marginTop: -4 }),\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        ref={triggerRef}\r\n        style={triggerStyle}\r\n        onMouseEnter={showTooltip}\r\n        onMouseLeave={hideTooltip}\r\n        onFocus={showTooltip}\r\n        onBlur={hideTooltip}\r\n        aria-describedby={isVisible ? tooltipId : undefined}\r\n      >\r\n        {children}\r\n      </div>\r\n\r\n      {isVisible &&\r\n        createPortal(\r\n          <>\r\n            <style>\r\n              {`\r\n                @keyframes brycks-tooltip-in {\r\n                  from { opacity: 0; transform: scale(0.95); }\r\n                  to { opacity: 1; transform: scale(1); }\r\n                }\r\n              `}\r\n            </style>\r\n            <div\r\n              ref={(node) => {\r\n                (tooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n                if (typeof ref === 'function') ref(node)\r\n                else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n              }}\r\n              id={tooltipId}\r\n              role=\"tooltip\"\r\n              className={cx('brycks-tooltip', `brycks-tooltip--${placement}`, className)}\r\n              style={tooltipStyle}\r\n              data-testid={testId}\r\n              {...props}\r\n            >\r\n              {content}\r\n              <span style={arrowStyle} />\r\n            </div>\r\n          </>,\r\n          document.body\r\n        )}\r\n    </>\r\n  )\r\n})\r\n\r\nTooltip.displayName = 'Tooltip'\r\n"],"names":["Tooltip","forwardRef","content","placement","delay","isDisabled","className","testId","children","props","ref","isVisible","setIsVisible","useState","position","setPosition","triggerRef","useRef","tooltipRef","timeoutRef","tooltipId","useId","prefersReducedMotion","usePrefersReducedMotion","calculatePosition","useCallback","triggerRect","tooltipRect","gap","top","left","padding","useEffect","showTooltip","hideTooltip","triggerStyle","tooltipStyle","arrowStyle","jsxs","Fragment","jsx","createPortal","node","cx"],"mappings":"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"}

package/dist/components/feedback.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./feedback/Modal/Modal.cjs"),e=require("./feedback/Alert/Alert.cjs"),t=require("./feedback/Tooltip/Tooltip.cjs"),r=require("./feedback/Toast/Toast.cjs"),s=require("./feedback/Toast/ToastContext.cjs"),a=require("./feedback/Drawer/Drawer.cjs"),i=require("./feedback/Popover/Popover.cjs"),u=require("./feedback/Progress/Progress.cjs");exports.Modal=o.Modal;exports.Alert=e.Alert;exports.Tooltip=t.Tooltip;exports.Toast=r.Toast;exports.ToastProvider=r.ToastProvider;exports.useToast=s.useToast;exports.Drawer=a.Drawer;exports.Popover=i.Popover;exports.Progress=u.Progress;
+//# sourceMappingURL=feedback.cjs.map

package/dist/components/feedback.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/feedback.d.ts

@@ -0,0 +1,2 @@
+export * from './feedback/index'
+export {}

package/dist/components/feedback.js

@@ -0,0 +1,20 @@
+import { Modal as e } from "./feedback/Modal/Modal.js";
+import { Alert as p } from "./feedback/Alert/Alert.js";
+import { Tooltip as m } from "./feedback/Tooltip/Tooltip.js";
+import { Toast as s, ToastProvider as a } from "./feedback/Toast/Toast.js";
+import { useToast as l } from "./feedback/Toast/ToastContext.js";
+import { Drawer as d } from "./feedback/Drawer/Drawer.js";
+import { Popover as v } from "./feedback/Popover/Popover.js";
+import { Progress as u } from "./feedback/Progress/Progress.js";
+export {
+  p as Alert,
+  d as Drawer,
+  e as Modal,
+  v as Popover,
+  u as Progress,
+  s as Toast,
+  a as ToastProvider,
+  m as Tooltip,
+  l as useToast
+};
+//# sourceMappingURL=feedback.js.map

package/dist/components/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs"),h=require("../../../design-system/primitives/typography.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist/components/form/Checkbox/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox Component\r\n *\r\n * Apple-inspired checkbox with smooth animations and tactile feedback.\r\n *\r\n * @module components/form/Checkbox\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport {\r\n  controlSizes,\r\n  componentGap,\r\n  componentFontSize,\r\n  componentLineHeight,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type CheckboxSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Checkbox size */\r\n  size?: CheckboxSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Error state */\r\n  isInvalid?: boolean\r\n  /** Indeterminate state */\r\n  isIndeterminate?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\n/** Checkmark icon */\r\nfunction CheckIcon({ size }: { size: number }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 6L5 8.5L9.5 4\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/** Indeterminate/minus icon */\r\nfunction MinusIcon({ size }: { size: number }) {\r\n  return (\r\n    <svg width={size} height={size} viewBox=\"0 0 12 12\" fill=\"none\">\r\n      <path\r\n        d=\"M2.5 6H9.5\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n}\r\n\r\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    isInvalid,\r\n    isIndeterminate,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [isHovered, setIsHovered] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = controlSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const isCheckedOrIndeterminate = checked || isIndeterminate\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.lg,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const boxStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.box,\r\n    height: config.box,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    border: `1.5px solid ${\r\n      isInvalid\r\n        ? 'var(--brycks-error-default)'\r\n        : isCheckedOrIndeterminate\r\n          ? 'var(--brycks-primary-default)'\r\n          : isFocused\r\n            ? 'var(--brycks-border-focus)'\r\n            : 'var(--brycks-border-default)'\r\n    }`,\r\n    backgroundColor: isCheckedOrIndeterminate\r\n      ? 'var(--brycks-primary-default)'\r\n      : isHovered\r\n        ? 'var(--brycks-background-subtle)'\r\n        : 'var(--brycks-background-app)',\r\n    transition: transition.quick,\r\n    transform: isPressed ? `scale(${scale.controlPressed})` : `scale(${scale.normal})`,\r\n    boxShadow: isFocused ? focusRing.default : focusRing.none,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    color: 'var(--brycks-primary-foreground)',\r\n    opacity: isCheckedOrIndeterminate ? 1 : 0,\r\n    transform: isCheckedOrIndeterminate ? `scale(${scale.normal})` : `scale(${scale.hidden})`,\r\n    transition: transition.quick,\r\n  }\r\n\r\n  const inputStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: '100%',\r\n    height: '100%',\r\n    opacity: 0,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    margin: 0,\r\n  }\r\n\r\n  const labelContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: componentGap.xs,\r\n    paddingTop: (config.box - fontSize) / 2,\r\n  }\r\n\r\n  const labelTextStyle: CSSProperties = {\r\n    fontSize,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-default)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSize - 1,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-checkbox',\r\n        `brycks-checkbox--${size}`,\r\n        isCheckedOrIndeterminate && 'brycks-checkbox--checked',\r\n        isInvalid && 'brycks-checkbox--invalid',\r\n        disabled && 'brycks-checkbox--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => {\r\n        setIsHovered(false)\r\n        setIsPressed(false)\r\n      }}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n    >\r\n      <span style={boxStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-invalid={isInvalid}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={iconStyle}>\r\n          {isIndeterminate ? <MinusIcon size={config.icon} /> : <CheckIcon size={config.icon} />}\r\n        </span>\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelTextStyle}>{label}</span>}\r\n          {description && <span style={descriptionStyle}>{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nCheckbox.displayName = 'Checkbox'\r\n"],"names":["CheckIcon","size","jsx","MinusIcon","Checkbox","forwardRef","label","description","isInvalid","isIndeterminate","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isHovered","setIsHovered","isPressed","setIsPressed","config","controlSizes","fontSize","componentFontSize","isCheckedOrIndeterminate","wrapperStyle","componentGap","stateOpacity","boxStyle","transition","scale","focusRing","iconStyle","inputStyle","labelContainerStyle","labelTextStyle","componentLineHeight","descriptionStyle","jsxs","cx"],"mappings":"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"}