@pk-design/react-tailwind 1.8.1 → 1.10.0

package/dist/es/components/StickyActionBar/StickyActionBar.js

@@ -5,14 +5,14 @@ import { Drawer } from '../Drawer/Drawer.js';
 
 const ChevronUpIcon = ({ className }) => (jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsx("polyline", { points: "18 15 12 9 6 15" }) }));
 const StickyActionBar = forwardRef((props, ref) => {
-    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', className, ...restProps } = props;
+    const { summaryContent, actionsContent, drawerContent, drawerTitle = 'Summary Details', position = 'fixed', containerMaxWidth = 'max-w-5xl', safeArea = true, bottomOffset, className, style, ...restProps } = props;
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
     const positionClass = position === 'fixed'
         ? 'fixed bottom-0 left-0 right-0 z-30'
         : position === 'sticky'
             ? 'sticky bottom-0 z-30'
             : 'relative z-10';
-    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', className), "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: buildClassName(positionClass, 'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all', safeArea && 'pb-[calc(0.875rem+env(safe-area-inset-bottom,0px))]', className), style: bottomOffset && position !== 'relative' ? { bottom: bottomOffset, ...style } : style, "data-testid": "sticky-action-bar", ...restProps, children: jsxs("div", { className: buildClassName('mx-auto flex items-center justify-between gap-3', containerMaxWidth), children: [summaryContent && (jsx("div", { className: "flex items-center gap-2", children: drawerContent ? (jsxs("button", { type: "button", onClick: () => setIsDrawerOpen(true), className: "flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1", "aria-label": "Expand summary details", "data-testid": "summary-trigger", children: [jsx("div", { children: summaryContent }), jsx(ChevronUpIcon, { className: "size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0" })] })) : (jsx("div", { children: summaryContent })) })), actionsContent && (jsx("div", { className: "flex items-center gap-2 shrink-0 ml-auto", "data-testid": "actions-stack", children: actionsContent }))] }) }), drawerContent && (jsx(Drawer, { isOpen: isDrawerOpen, onClose: () => setIsDrawerOpen(false), align: "bottom", size: "full", title: drawerTitle, showBackButton: true, contentClass: "px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto", children: drawerContent }))] }));
 });
 StickyActionBar.displayName = 'StickyActionBar';
 

package/dist/es/components/StickyActionBar/StickyActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyActionBar.js","sources":["../../../../../src/components/StickyActionBar/StickyActionBar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Drawer } from '../Drawer'\nimport type { StickyActionBarProps } from './StickyActionBar.types'\n\nconst ChevronUpIcon = ({ className }: { className?: string }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"18 15 12 9 6 15\" />\n  </svg>\n)\n\nexport const StickyActionBar = forwardRef<HTMLDivElement, StickyActionBarProps>((props, ref) => {\n  const {\n    summaryContent,\n    actionsContent,\n    drawerContent,\n    drawerTitle = 'Summary Details',\n    position = 'fixed',\n    containerMaxWidth = 'max-w-5xl',\n    className,\n    ...restProps\n  } = props\n\n  const [isDrawerOpen, setIsDrawerOpen] = useState(false)\n\n  const positionClass =\n    position === 'fixed'\n      ? 'fixed bottom-0 left-0 right-0 z-30'\n      : position === 'sticky'\n        ? 'sticky bottom-0 z-30'\n        : 'relative z-10'\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className={buildClassName(\n          positionClass,\n          'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all',\n          className,\n        )}\n        data-testid=\"sticky-action-bar\"\n        {...restProps}\n      >\n        <div\n          className={buildClassName(\n            'mx-auto flex items-center justify-between gap-3',\n            containerMaxWidth,\n          )}\n        >\n          {/* Summary Content Slot */}\n          {summaryContent && (\n            <div className=\"flex items-center gap-2\">\n              {drawerContent ? (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsDrawerOpen(true)}\n                  className=\"flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1\"\n                  aria-label=\"Expand summary details\"\n                  data-testid=\"summary-trigger\"\n                >\n                  <div>{summaryContent}</div>\n                  <ChevronUpIcon className=\"size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0\" />\n                </button>\n              ) : (\n                <div>{summaryContent}</div>\n              )}\n            </div>\n          )}\n\n          {/* Actions Stack Slot */}\n          {actionsContent && (\n            <div className=\"flex items-center gap-2 shrink-0 ml-auto\" data-testid=\"actions-stack\">\n              {actionsContent}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Optional Expandable Details Drawer */}\n      {drawerContent && (\n        <Drawer\n          isOpen={isDrawerOpen}\n          onClose={() => setIsDrawerOpen(false)}\n          align=\"bottom\"\n          size=\"full\"\n          title={drawerTitle}\n          showBackButton\n          contentClass=\"px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto\"\n        >\n          {drawerContent}\n        </Drawer>\n      )}\n    </>\n  )\n})\n\nStickyActionBar.displayName = 'StickyActionBar'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,MAC1DA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAE,SAAS,EAAA,aAAA,EACR,MAAM,YAElBA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACjC,CACP;AAEM,MAAM,eAAe,GAAG,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,KAAI;IAC7F,MAAM,EACJ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,GAAG,iBAAiB,EAC/B,QAAQ,GAAG,OAAO,EAClB,iBAAiB,GAAG,WAAW,EAC/B,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,aAAa,GACjB,QAAQ,KAAK;AACX,UAAE;UACA,QAAQ,KAAK;AACb,cAAE;cACA,eAAe;AAEvB,IAAA,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CACvB,aAAa,EACb,oHAAoH,EACpH,SAAS,CACV,EAAA,aAAA,EACW,mBAAmB,EAAA,GAC3B,SAAS,EAAA,QAAA,EAEbC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,iDAAiD,EACjD,iBAAiB,CAClB,EAAA,QAAA,EAAA,CAGA,cAAc,KACbD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EACrC,aAAa,IACZC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAC,8LAA8L,EAAA,YAAA,EAC7L,wBAAwB,EAAA,aAAA,EACvB,iBAAiB,aAE7BD,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,EAC3BA,IAAC,aAAa,EAAA,EAAC,SAAS,EAAC,6DAA6D,EAAA,CAAG,CAAA,EAAA,CAClF,KAETA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,CAC5B,EAAA,CACG,CACP,EAGA,cAAc,KACbA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,EAAA,aAAA,EAAa,eAAe,YAClF,cAAc,EAAA,CACX,CACP,CAAA,EAAA,CACG,GACF,EAGL,aAAa,KACZA,IAAC,MAAM,EAAA,EACL,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,cAAc,EAAA,IAAA,EACd,YAAY,EAAC,qDAAqD,YAEjE,aAAa,EAAA,CACP,CACV,CAAA,EAAA,CACA;AAEP,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"StickyActionBar.js","sources":["../../../../../src/components/StickyActionBar/StickyActionBar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Drawer } from '../Drawer'\nimport type { StickyActionBarProps } from './StickyActionBar.types'\n\nconst ChevronUpIcon = ({ className }: { className?: string }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"18 15 12 9 6 15\" />\n  </svg>\n)\n\nexport const StickyActionBar = forwardRef<HTMLDivElement, StickyActionBarProps>((props, ref) => {\n  const {\n    summaryContent,\n    actionsContent,\n    drawerContent,\n    drawerTitle = 'Summary Details',\n    position = 'fixed',\n    containerMaxWidth = 'max-w-5xl',\n    safeArea = true,\n    bottomOffset,\n    className,\n    style,\n    ...restProps\n  } = props\n\n  const [isDrawerOpen, setIsDrawerOpen] = useState(false)\n\n  const positionClass =\n    position === 'fixed'\n      ? 'fixed bottom-0 left-0 right-0 z-30'\n      : position === 'sticky'\n        ? 'sticky bottom-0 z-30'\n        : 'relative z-10'\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className={buildClassName(\n          positionClass,\n          'border-t border-[var(--ui-border)] bg-white/90 p-3.5 backdrop-blur-md shadow-lg dark:bg-gray-900/90 transition-all',\n          safeArea && 'pb-[calc(0.875rem+env(safe-area-inset-bottom,0px))]',\n          className,\n        )}\n        style={bottomOffset && position !== 'relative' ? { bottom: bottomOffset, ...style } : style}\n        data-testid=\"sticky-action-bar\"\n        {...restProps}\n      >\n        <div\n          className={buildClassName(\n            'mx-auto flex items-center justify-between gap-3',\n            containerMaxWidth,\n          )}\n        >\n          {/* Summary Content Slot */}\n          {summaryContent && (\n            <div className=\"flex items-center gap-2\">\n              {drawerContent ? (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsDrawerOpen(true)}\n                  className=\"flex items-center gap-2 text-left transition-opacity hover:opacity-80 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary-ring)] rounded-lg p-1 -m-1\"\n                  aria-label=\"Expand summary details\"\n                  data-testid=\"summary-trigger\"\n                >\n                  <div>{summaryContent}</div>\n                  <ChevronUpIcon className=\"size-4 text-[var(--ui-primary)] dark:text-blue-400 shrink-0\" />\n                </button>\n              ) : (\n                <div>{summaryContent}</div>\n              )}\n            </div>\n          )}\n\n          {/* Actions Stack Slot */}\n          {actionsContent && (\n            <div className=\"flex items-center gap-2 shrink-0 ml-auto\" data-testid=\"actions-stack\">\n              {actionsContent}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Optional Expandable Details Drawer */}\n      {drawerContent && (\n        <Drawer\n          isOpen={isDrawerOpen}\n          onClose={() => setIsDrawerOpen(false)}\n          align=\"bottom\"\n          size=\"full\"\n          title={drawerTitle}\n          showBackButton\n          contentClass=\"px-4 pb-6 max-h-[calc(100svh-6rem)] overflow-y-auto\"\n        >\n          {drawerContent}\n        </Drawer>\n      )}\n    </>\n  )\n})\n\nStickyActionBar.displayName = 'StickyActionBar'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAA0B,MAC1DA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,SAAS,EAAE,SAAS,EAAA,aAAA,EACR,MAAM,YAElBA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CACjC,CACP;AAEM,MAAM,eAAe,GAAG,UAAU,CAAuC,CAAC,KAAK,EAAE,GAAG,KAAI;AAC7F,IAAA,MAAM,EACJ,cAAc,EACd,cAAc,EACd,aAAa,EACb,WAAW,GAAG,iBAAiB,EAC/B,QAAQ,GAAG,OAAO,EAClB,iBAAiB,GAAG,WAAW,EAC/B,QAAQ,GAAG,IAAI,EACf,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEvD,IAAA,MAAM,aAAa,GACjB,QAAQ,KAAK;AACX,UAAE;UACA,QAAQ,KAAK;AACb,cAAE;cACA,eAAe;AAEvB,IAAA,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEF,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,cAAc,CACvB,aAAa,EACb,oHAAoH,EACpH,QAAQ,IAAI,qDAAqD,EACjE,SAAS,CACV,EACD,KAAK,EAAE,YAAY,IAAI,QAAQ,KAAK,UAAU,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,EAAA,aAAA,EAC/E,mBAAmB,EAAA,GAC3B,SAAS,YAEbC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,iDAAiD,EACjD,iBAAiB,CAClB,EAAA,QAAA,EAAA,CAGA,cAAc,KACbD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EACrC,aAAa,IACZC,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,EACpC,SAAS,EAAC,8LAA8L,EAAA,YAAA,EAC7L,wBAAwB,EAAA,aAAA,EACvB,iBAAiB,aAE7BD,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,GAAO,EAC3BA,GAAA,CAAC,aAAa,EAAA,EAAC,SAAS,EAAC,6DAA6D,GAAG,CAAA,EAAA,CAClF,KAETA,GAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAM,cAAc,EAAA,CAAO,CAC5B,GACG,CACP,EAGA,cAAc,KACbA,aAAK,SAAS,EAAC,0CAA0C,EAAA,aAAA,EAAa,eAAe,YAClF,cAAc,EAAA,CACX,CACP,CAAA,EAAA,CACG,EAAA,CACF,EAGL,aAAa,KACZA,GAAA,CAAC,MAAM,EAAA,EACL,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,eAAe,CAAC,KAAK,CAAC,EACrC,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,cAAc,QACd,YAAY,EAAC,qDAAqD,EAAA,QAAA,EAEjE,aAAa,GACP,CACV,CAAA,EAAA,CACA;AAEP,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/es/components/Toast/Toast.js

@@ -86,7 +86,7 @@ const Toast = ({ id, title, message, type, variant = 'accent', action, icon, sho
     const renderedIcon = icon !== null && icon !== void 0 ? icon : (variant === 'filled' ? filledIconMap[type] : iconMap[type]);
     return (jsx(Transition, { appear: true, show: true, enter: "transform transition duration-300 ease-out", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200 ease-in", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxs("div", { role: "status", id: id.toString(), className: buildClassName('relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all', variantStyleMap[variant][type], className), children: [jsx("div", { className: "shrink-0 mt-0.5", children: variant === 'filled' ? (renderedIcon) : (jsx(TextContent, { className: buildClassName(textColorMap[type]), children: renderedIcon })) }), jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [title && (jsx("div", { className: buildClassName('font-semibold text-sm leading-snug', variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100'), children: title })), jsx("div", { className: buildClassName('text-sm font-medium leading-relaxed', variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300'), children: message }), action && (jsx("div", { className: "mt-1.5", children: jsx("button", { type: "button", onClick: action.onClick, className: buildClassName('text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none', variant === 'filled'
                                     ? 'text-white hover:opacity-85'
-                                    : 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsx(Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary', noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4" }) }), showProgressBar && duration > 0 && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden", children: jsx("div", { className: buildClassName('h-full transition-all duration-75 ease-linear', variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type]), style: { width: `${Math.max(0, progress)}%` } }) }))] }) }));
+                                    : 'text-[var(--ui-primary)] hover:opacity-80'), children: action.label }) }))] }), jsx(Button, { onClick: onClose, "aria-label": "Close toast", className: buildClassName('shrink-0 mt-0.5 opacity-60 hover:opacity-100 focus-visible:opacity-100 transition', variant === 'filled' && 'text-white hover:text-white focus-visible:outline-current'), iconOnly: true, size: "xs", variant: "plain", theme: variant === 'filled' ? 'primary' : 'secondary', children: jsx(SvgX, { className: "size-4" }) }), showProgressBar && duration > 0 && (jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden", children: jsx("div", { className: buildClassName('h-full transition-all duration-75 ease-linear', variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type]), style: { width: `${Math.max(0, progress)}%` } }) }))] }) }));
 };
 Toast.displayName = 'Toast';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Transition } from '@headlessui/react'\nimport XIcon from '../Icons/X.svg'\nimport CheckCircle from '../Icons/CircleCheck.svg'\nimport AlertCircle from '../Icons/CircleAlert.svg'\nimport Info from '../Icons/Info.svg'\nimport AlertTriangle from '../Icons/TriangleAlert.svg'\n\nimport { Button } from '../Button'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport type { ToastProps, ToastType, ToastVariant } from './Toast.types'\n\n/**\n * Icons for each toast type\n */\nconst iconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-[var(--ui-success)]\" />,\n  error: <AlertCircle className=\"size-5 text-[var(--ui-danger)]\" />,\n  info: <Info className=\"size-5 text-[var(--ui-info)]\" />,\n  warning: <AlertTriangle className=\"size-5 text-[var(--ui-warning)]\" />,\n}\n\nconst filledIconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-white\" />,\n  error: <AlertCircle className=\"size-5 text-white\" />,\n  info: <Info className=\"size-5 text-white\" />,\n  warning: <AlertTriangle className=\"size-5 text-white\" />,\n}\n\nconst textColorMap: Record<ToastType, string> = {\n  success: 'text-[var(--ui-success-text)]',\n  error: 'text-[var(--ui-danger-text)]',\n  info: 'text-[var(--ui-info-text)]',\n  warning: 'text-[var(--ui-warning-text)]',\n}\n\nconst progressBarColorMap: Record<ToastType, string> = {\n  success: 'bg-[var(--ui-success)]',\n  error: 'bg-[var(--ui-danger)]',\n  info: 'bg-[var(--ui-info)]',\n  warning: 'bg-[var(--ui-warning)]',\n}\n\nconst variantStyleMap: Record<ToastVariant, Record<ToastType, string>> = {\n  accent: {\n    success:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    error:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    warning:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n  },\n  filled: {\n    success: 'bg-[var(--ui-success)] text-white shadow-lg',\n    error: 'bg-[var(--ui-danger)] text-white shadow-lg',\n    info: 'bg-[var(--ui-info)] text-white shadow-lg',\n    warning: 'bg-[var(--ui-warning)] text-white shadow-lg',\n  },\n  outlined: {\n    success:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',\n    error:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',\n    info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',\n    warning:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',\n  },\n  glass: {\n    success:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    error:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    warning:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n  },\n}\n\nexport const Toast: React.FC<ToastProps & { isTop?: boolean }> = ({\n  id,\n  title,\n  message,\n  type,\n  variant = 'accent',\n  action,\n  icon,\n  showProgressBar = true,\n  duration = 4000,\n  isPaused = false,\n  onClose,\n  className,\n  isTop = true,\n}) => {\n  const [progress, setProgress] = useState(100)\n\n  useEffect(() => {\n    if (!showProgressBar || !duration || isPaused) return\n\n    const intervalTime = 50\n    const step = (intervalTime / duration) * 100\n\n    const timer = setInterval(() => {\n      setProgress((prev) => {\n        if (prev <= 0) {\n          clearInterval(timer)\n          return 0\n        }\n        return prev - step\n      })\n    }, intervalTime)\n\n    return () => clearInterval(timer)\n  }, [showProgressBar, duration, isPaused])\n\n  const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95'\n  const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95'\n\n  const renderedIcon = icon ?? (variant === 'filled' ? filledIconMap[type] : iconMap[type])\n\n  return (\n    <Transition\n      appear\n      show\n      enter=\"transform transition duration-300 ease-out\"\n      enterFrom={enterFrom}\n      enterTo=\"opacity-100 translate-y-0 scale-100\"\n      leave=\"transition duration-200 ease-in\"\n      leaveFrom=\"opacity-100 translate-y-0 scale-100\"\n      leaveTo={leaveTo}\n    >\n      <div\n        role=\"status\"\n        id={id.toString()}\n        className={buildClassName(\n          'relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all',\n          variantStyleMap[variant][type],\n          className,\n        )}\n      >\n        {/* Icon */}\n        <div className=\"shrink-0 mt-0.5\">\n          {variant === 'filled' ? (\n            renderedIcon\n          ) : (\n            <TextContent className={buildClassName(textColorMap[type])}>{renderedIcon}</TextContent>\n          )}\n        </div>\n\n        {/* Content Body */}\n        <div className=\"flex-1 flex flex-col gap-0.5\">\n          {title && (\n            <div\n              className={buildClassName(\n                'font-semibold text-sm leading-snug',\n                variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          <div\n            className={buildClassName(\n              'text-sm font-medium leading-relaxed',\n              variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300',\n            )}\n          >\n            {message}\n          </div>\n\n          {/* Action Button */}\n          {action && (\n            <div className=\"mt-1.5\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className={buildClassName(\n                  'text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none',\n                  variant === 'filled'\n                    ? 'text-white hover:opacity-85'\n                    : 'text-[var(--ui-primary)] hover:opacity-80',\n                )}\n              >\n                {action.label}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Close button */}\n        <Button\n          onClick={onClose}\n          aria-label=\"Close toast\"\n          className={buildClassName(\n            'shrink-0 mt-0.5 opacity-60 hover:opacity-100 transition',\n            variant === 'filled' && 'text-white hover:text-white',\n          )}\n          iconOnly\n          size=\"xs\"\n          variant=\"plain\"\n          theme={variant === 'filled' ? 'primary' : 'secondary'}\n          noOutlineOnFocus\n        >\n          <XIcon className=\"size-4\" />\n        </Button>\n\n        {/* Progress Bar Countdown */}\n        {showProgressBar && duration > 0 && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n            <div\n              className={buildClassName(\n                'h-full transition-all duration-75 ease-linear',\n                variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type],\n              )}\n              style={{ width: `${Math.max(0, progress)}%` }}\n            />\n          </div>\n        )}\n      </div>\n    </Transition>\n  )\n}\n\nToast.displayName = 'Toast'\n"],"names":["_jsx","CheckCircle","AlertCircle","Info","AlertTriangle","_jsxs","XIcon"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport { Transition } from '@headlessui/react'\nimport XIcon from '../Icons/X.svg'\nimport CheckCircle from '../Icons/CircleCheck.svg'\nimport AlertCircle from '../Icons/CircleAlert.svg'\nimport Info from '../Icons/Info.svg'\nimport AlertTriangle from '../Icons/TriangleAlert.svg'\n\nimport { Button } from '../Button'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport type { ToastProps, ToastType, ToastVariant } from './Toast.types'\n\n/**\n * Icons for each toast type\n */\nconst iconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-[var(--ui-success)]\" />,\n  error: <AlertCircle className=\"size-5 text-[var(--ui-danger)]\" />,\n  info: <Info className=\"size-5 text-[var(--ui-info)]\" />,\n  warning: <AlertTriangle className=\"size-5 text-[var(--ui-warning)]\" />,\n}\n\nconst filledIconMap: Record<ToastType, React.ReactNode> = {\n  success: <CheckCircle className=\"size-5 text-white\" />,\n  error: <AlertCircle className=\"size-5 text-white\" />,\n  info: <Info className=\"size-5 text-white\" />,\n  warning: <AlertTriangle className=\"size-5 text-white\" />,\n}\n\nconst textColorMap: Record<ToastType, string> = {\n  success: 'text-[var(--ui-success-text)]',\n  error: 'text-[var(--ui-danger-text)]',\n  info: 'text-[var(--ui-info-text)]',\n  warning: 'text-[var(--ui-warning-text)]',\n}\n\nconst progressBarColorMap: Record<ToastType, string> = {\n  success: 'bg-[var(--ui-success)]',\n  error: 'bg-[var(--ui-danger)]',\n  info: 'bg-[var(--ui-info)]',\n  warning: 'bg-[var(--ui-warning)]',\n}\n\nconst variantStyleMap: Record<ToastVariant, Record<ToastType, string>> = {\n  accent: {\n    success:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    error:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    info: 'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n    warning:\n      'bg-white dark:bg-gray-900 border-l-4 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-lg border-y border-r border-[var(--ui-border)]',\n  },\n  filled: {\n    success: 'bg-[var(--ui-success)] text-white shadow-lg',\n    error: 'bg-[var(--ui-danger)] text-white shadow-lg',\n    info: 'bg-[var(--ui-info)] text-white shadow-lg',\n    warning: 'bg-[var(--ui-warning)] text-white shadow-lg',\n  },\n  outlined: {\n    success:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-success)] text-gray-900 dark:text-gray-100 shadow-md',\n    error:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-danger)] text-gray-900 dark:text-gray-100 shadow-md',\n    info: 'bg-white dark:bg-gray-900 border-2 border-[var(--ui-info)] text-gray-900 dark:text-gray-100 shadow-md',\n    warning:\n      'bg-white dark:bg-gray-900 border-2 border-[var(--ui-warning)] text-gray-900 dark:text-gray-100 shadow-md',\n  },\n  glass: {\n    success:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-emerald-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    error:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-rose-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    info: 'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-blue-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n    warning:\n      'backdrop-blur-md bg-white/85 dark:bg-gray-900/85 border border-amber-500/30 text-gray-900 dark:text-gray-100 shadow-xl',\n  },\n}\n\nexport const Toast: React.FC<ToastProps & { isTop?: boolean }> = ({\n  id,\n  title,\n  message,\n  type,\n  variant = 'accent',\n  action,\n  icon,\n  showProgressBar = true,\n  duration = 4000,\n  isPaused = false,\n  onClose,\n  className,\n  isTop = true,\n}) => {\n  const [progress, setProgress] = useState(100)\n\n  useEffect(() => {\n    if (!showProgressBar || !duration || isPaused) return\n\n    const intervalTime = 50\n    const step = (intervalTime / duration) * 100\n\n    const timer = setInterval(() => {\n      setProgress((prev) => {\n        if (prev <= 0) {\n          clearInterval(timer)\n          return 0\n        }\n        return prev - step\n      })\n    }, intervalTime)\n\n    return () => clearInterval(timer)\n  }, [showProgressBar, duration, isPaused])\n\n  const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95'\n  const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95'\n\n  const renderedIcon = icon ?? (variant === 'filled' ? filledIconMap[type] : iconMap[type])\n\n  return (\n    <Transition\n      appear\n      show\n      enter=\"transform transition duration-300 ease-out\"\n      enterFrom={enterFrom}\n      enterTo=\"opacity-100 translate-y-0 scale-100\"\n      leave=\"transition duration-200 ease-in\"\n      leaveFrom=\"opacity-100 translate-y-0 scale-100\"\n      leaveTo={leaveTo}\n    >\n      <div\n        role=\"status\"\n        id={id.toString()}\n        className={buildClassName(\n          'relative overflow-hidden flex items-start gap-3 rounded-xl px-4 py-3.5 min-w-[280px] max-w-md transition-all',\n          variantStyleMap[variant][type],\n          className,\n        )}\n      >\n        {/* Icon */}\n        <div className=\"shrink-0 mt-0.5\">\n          {variant === 'filled' ? (\n            renderedIcon\n          ) : (\n            <TextContent className={buildClassName(textColorMap[type])}>{renderedIcon}</TextContent>\n          )}\n        </div>\n\n        {/* Content Body */}\n        <div className=\"flex-1 flex flex-col gap-0.5\">\n          {title && (\n            <div\n              className={buildClassName(\n                'font-semibold text-sm leading-snug',\n                variant === 'filled' ? 'text-white' : 'text-gray-900 dark:text-gray-100',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          <div\n            className={buildClassName(\n              'text-sm font-medium leading-relaxed',\n              variant === 'filled' ? 'text-white/95' : 'text-gray-700 dark:text-gray-300',\n            )}\n          >\n            {message}\n          </div>\n\n          {/* Action Button */}\n          {action && (\n            <div className=\"mt-1.5\">\n              <button\n                type=\"button\"\n                onClick={action.onClick}\n                className={buildClassName(\n                  'text-xs font-semibold underline underline-offset-2 transition-opacity focus:outline-none',\n                  variant === 'filled'\n                    ? 'text-white hover:opacity-85'\n                    : 'text-[var(--ui-primary)] hover:opacity-80',\n                )}\n              >\n                {action.label}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Close button */}\n        <Button\n          onClick={onClose}\n          aria-label=\"Close toast\"\n          className={buildClassName(\n            'shrink-0 mt-0.5 opacity-60 hover:opacity-100 focus-visible:opacity-100 transition',\n            variant === 'filled' && 'text-white hover:text-white focus-visible:outline-current',\n          )}\n          iconOnly\n          size=\"xs\"\n          variant=\"plain\"\n          theme={variant === 'filled' ? 'primary' : 'secondary'}\n        >\n          <XIcon className=\"size-4\" />\n        </Button>\n\n        {/* Progress Bar Countdown */}\n        {showProgressBar && duration > 0 && (\n          <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n            <div\n              className={buildClassName(\n                'h-full transition-all duration-75 ease-linear',\n                variant === 'filled' ? 'bg-white/70' : progressBarColorMap[type],\n              )}\n              style={{ width: `${Math.max(0, progress)}%` }}\n            />\n          </div>\n        )}\n      </div>\n    </Transition>\n  )\n}\n\nToast.displayName = 'Toast'\n"],"names":["_jsx","CheckCircle","AlertCircle","Info","AlertTriangle","_jsxs","XIcon"],"mappings":"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"}

package/dist/es/hooks/use-breakpoint.js

@@ -0,0 +1,43 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+const BREAKPOINT_QUERIES = {
+    medium: '(min-width: 768px)',
+    expanded: '(min-width: 1024px)',
+};
+// jsdom and some embedded webviews have no matchMedia; treat every query as
+// unmatched there (the compact layout) rather than throwing.
+const hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+/** Live result of a CSS media query. `false` during server rendering or without `matchMedia`. */
+const useMediaQuery = (query) => {
+    const subscribe = useCallback((onChange) => {
+        if (!hasMatchMedia())
+            return () => { };
+        const list = window.matchMedia(query);
+        list.addEventListener('change', onChange);
+        return () => list.removeEventListener('change', onChange);
+    }, [query]);
+    return useSyncExternalStore(subscribe, () => hasMatchMedia() && window.matchMedia(query).matches, () => false);
+};
+/** Current layout range; `compact` during server rendering. */
+const useBreakpoint = () => {
+    const isMedium = useMediaQuery(BREAKPOINT_QUERIES.medium);
+    const isExpanded = useMediaQuery(BREAKPOINT_QUERIES.expanded);
+    if (isExpanded)
+        return 'expanded';
+    return isMedium ? 'medium' : 'compact';
+};
+/** Resolves a `ResponsiveValue` for the current viewport. */
+const useResponsiveValue = (value) => {
+    var _a, _b, _c;
+    const breakpoint = useBreakpoint();
+    if (typeof value !== 'object' || value === null || !('base' in value))
+        return value;
+    if (breakpoint === 'expanded')
+        return (_b = (_a = value.lg) !== null && _a !== void 0 ? _a : value.md) !== null && _b !== void 0 ? _b : value.base;
+    if (breakpoint === 'medium')
+        return (_c = value.md) !== null && _c !== void 0 ? _c : value.base;
+    return value.base;
+};
+
+export { BREAKPOINT_QUERIES, useBreakpoint, useMediaQuery, useResponsiveValue };
+//# sourceMappingURL=use-breakpoint.js.map

package/dist/es/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","sources":["../../../../src/hooks/use-breakpoint.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\n\n/**\n * Layout ranges matching Tailwind's `md` (768px) and `lg` (1024px) tokens, so a\n * JS decision and an `md:`/`lg:` class always agree:\n * - `compact`: phones\n * - `medium`: tablets and narrow windows\n * - `expanded`: desktop\n *\n * Width only. Unlike `useIsMobile`, touch capability is never considered, so a\n * phone in landscape and a narrow desktop window get the layout for their size.\n */\nexport type Breakpoint = 'compact' | 'medium' | 'expanded'\n\nexport const BREAKPOINT_QUERIES = {\n  medium: '(min-width: 768px)',\n  expanded: '(min-width: 1024px)',\n} as const\n\n// jsdom and some embedded webviews have no matchMedia; treat every query as\n// unmatched there (the compact layout) rather than throwing.\nconst hasMatchMedia = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n\n/** Live result of a CSS media query. `false` during server rendering or without `matchMedia`. */\nexport const useMediaQuery = (query: string): boolean => {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!hasMatchMedia()) return () => {}\n      const list = window.matchMedia(query)\n      list.addEventListener('change', onChange)\n      return () => list.removeEventListener('change', onChange)\n    },\n    [query],\n  )\n\n  return useSyncExternalStore(\n    subscribe,\n    () => hasMatchMedia() && window.matchMedia(query).matches,\n    () => false,\n  )\n}\n\n/** Current layout range; `compact` during server rendering. */\nexport const useBreakpoint = (): Breakpoint => {\n  const isMedium = useMediaQuery(BREAKPOINT_QUERIES.medium)\n  const isExpanded = useMediaQuery(BREAKPOINT_QUERIES.expanded)\n  if (isExpanded) return 'expanded'\n  return isMedium ? 'medium' : 'compact'\n}\n\n/** A value per breakpoint; missing ranges fall back to the next smaller one. */\nexport type ResponsiveValue<T> = T | { base: T; md?: T; lg?: T }\n\n/** Resolves a `ResponsiveValue` for the current viewport. */\nexport const useResponsiveValue = <T,>(value: ResponsiveValue<T>): T => {\n  const breakpoint = useBreakpoint()\n  if (typeof value !== 'object' || value === null || !('base' in value)) return value as T\n  if (breakpoint === 'expanded') return value.lg ?? value.md ?? value.base\n  if (breakpoint === 'medium') return value.md ?? value.base\n  return value.base\n}\n"],"names":[],"mappings":";;AAcO,MAAM,kBAAkB,GAAG;AAChC,IAAA,MAAM,EAAE,oBAAoB;AAC5B,IAAA,QAAQ,EAAE,qBAAqB;;AAGjC;AACA;AACA,MAAM,aAAa,GAAG,MAAM,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;AAEpG;AACO,MAAM,aAAa,GAAG,CAAC,KAAa,KAAa;AACtD,IAAA,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,QAAoB,KAAI;QACvB,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,MAAK,EAAE,CAAC;QACrC,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACrC,QAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACzC,OAAO,MAAM,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAC3D,IAAA,CAAC,EACD,CAAC,KAAK,CAAC,CACR;IAED,OAAO,oBAAoB,CACzB,SAAS,EACT,MAAM,aAAa,EAAE,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,EACzD,MAAM,KAAK,CACZ;AACH;AAEA;AACO,MAAM,aAAa,GAAG,MAAiB;IAC5C,MAAM,QAAQ,GAAG,aAAa,CAAC,kBAAkB,CAAC,MAAM,CAAC;IACzD,MAAM,UAAU,GAAG,aAAa,CAAC,kBAAkB,CAAC,QAAQ,CAAC;AAC7D,IAAA,IAAI,UAAU;AAAE,QAAA,OAAO,UAAU;IACjC,OAAO,QAAQ,GAAG,QAAQ,GAAG,SAAS;AACxC;AAKA;AACO,MAAM,kBAAkB,GAAG,CAAK,KAAyB,KAAO;;AACrE,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC;AAAE,QAAA,OAAO,KAAU;IACxF,IAAI,UAAU,KAAK,UAAU;AAAE,QAAA,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK,CAAC,IAAI;IACxE,IAAI,UAAU,KAAK,QAAQ;QAAE,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,EAAE,mCAAI,KAAK,CAAC,IAAI;IAC1D,OAAO,KAAK,CAAC,IAAI;AACnB;;;;"}

package/dist/es/index.js

@@ -56,6 +56,7 @@ export { Textarea } from './components/Textarea/Textarea.js';
 export { ToastProvider, useToast } from './components/Toast/ToastProvider.js';
 export { Toast } from './components/Toast/Toast.js';
 export { VirtualizedDataTable } from './components/VirtualizedDataTable/VirtualizedDataTable.js';
+export { BREAKPOINT_QUERIES, useBreakpoint, useMediaQuery, useResponsiveValue } from './hooks/use-breakpoint.js';
 export { useDebounce, useDebounceFn } from './hooks/use-debounce.js';
 export { useIsMobile } from './hooks/use-is-mobile.js';
 export { useIsTablet } from './hooks/use-is-tablet.js';

package/dist/es/index.js.map

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