@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/cjs/components/DataTable/DataTable.utils.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Compute the next sorting direction for a column.
+ * - string: undefined → asc → desc → undefined
+ * - number/date: undefined → 1 → -1 → undefined
+ */
+const nextSortDirection = (prev, type = 'string') => {
+    if (type === 'string') {
+        if (!prev)
+            return 'asc';
+        if (prev === 'asc')
+            return 'desc';
+        return undefined;
+    }
+    // number / date
+    if (!prev)
+        return '1';
+    if (prev === '1')
+        return '-1';
+    return undefined;
+};
+/**
+ * Update the sort query object for a table column.
+ * Toggles sort direction, removing key when reset.
+ */
+const updateSortQuery = (sortQuery, name, type = 'string') => {
+    const next = nextSortDirection(sortQuery[name], type);
+    // Shallow clone once
+    const updated = { ...sortQuery };
+    if (next == null) {
+        delete updated[name];
+    }
+    else {
+        updated[name] = next;
+    }
+    return updated;
+};
+/**
+ * Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.
+ * Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.
+ */
+const useRowSelection = ({ items, getKey, selectedRowKeys, defaultSelectedRowKeys = [], onSelectionChange, isRowSelectable, }) => {
+    const [internalKeys, setInternalKeys] = React.useState(defaultSelectedRowKeys);
+    const isControlled = selectedRowKeys !== undefined;
+    const keys = isControlled ? selectedRowKeys : internalKeys;
+    const keySet = React.useMemo(() => new Set(keys), [keys]);
+    const selectableEntries = React.useMemo(() => items
+        .map((item, idx) => ({ item, key: getKey(item, idx) }))
+        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)), [items, getKey, isRowSelectable]);
+    const emit = React.useCallback((nextKeys) => {
+        if (!isControlled)
+            setInternalKeys(nextKeys);
+        const nextKeySet = new Set(nextKeys);
+        const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)));
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(nextKeys, nextItems);
+    }, [isControlled, items, getKey, onSelectionChange]);
+    const toggleRow = React.useCallback((key) => {
+        emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key]);
+    }, [keys, keySet, emit]);
+    const allSelected = selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key));
+    const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key));
+    const toggleAll = React.useCallback(() => {
+        const selectableKeySet = new Set(selectableEntries.map(({ key }) => key));
+        if (allSelected) {
+            emit(keys.filter((k) => !selectableKeySet.has(k)));
+        }
+        else {
+            emit(Array.from(new Set([...keys, ...selectableKeySet])));
+        }
+    }, [allSelected, selectableEntries, keys, emit]);
+    return {
+        selectedKeys: keys,
+        isSelected: (key) => keySet.has(key),
+        toggleRow,
+        toggleAll,
+        allSelected,
+        someSelected,
+    };
+};
+
+exports.nextSortDirection = nextSortDirection;
+exports.updateSortQuery = updateSortQuery;
+exports.useRowSelection = useRowSelection;
+//# sourceMappingURL=DataTable.utils.js.map

package/dist/cjs/components/DataTable/DataTable.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.utils.js","sources":["../../../../../src/components/DataTable/DataTable.utils.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport type { DataValueType, Sorting, SortQuery } from './DataTable.types'\n\n/**\n * Compute the next sorting direction for a column.\n * - string: undefined → asc → desc → undefined\n * - number/date: undefined → 1 → -1 → undefined\n */\nexport const nextSortDirection = (\n  prev: Sorting | undefined,\n  type: 'string' | 'number' | 'date' = 'string',\n): Sorting | undefined => {\n  if (type === 'string') {\n    if (!prev) return 'asc'\n    if (prev === 'asc') return 'desc'\n    return undefined\n  }\n\n  // number / date\n  if (!prev) return '1'\n  if (prev === '1') return '-1'\n  return undefined\n}\n\n/**\n * Update the sort query object for a table column.\n * Toggles sort direction, removing key when reset.\n */\nexport const updateSortQuery = (\n  sortQuery: SortQuery,\n  name: string,\n  type: DataValueType = 'string',\n): SortQuery => {\n  const next = nextSortDirection(sortQuery[name], type)\n\n  // Shallow clone once\n  const updated = { ...sortQuery }\n\n  if (next == null) {\n    delete updated[name]\n  } else {\n    updated[name] = next\n  }\n\n  return updated\n}\n\n/** Options for {@link useRowSelection}. */\nexport interface UseRowSelectionOptions<T> {\n  items: T[]\n  getKey: (item: T, idx: number) => string | number\n  selectedRowKeys?: Array<string | number>\n  defaultSelectedRowKeys?: Array<string | number>\n  onSelectionChange?: (selectedRowKeys: Array<string | number>, selectedItems: T[]) => void\n  isRowSelectable?: (item: T) => boolean\n}\n\n/**\n * Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.\n * Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.\n */\nexport const useRowSelection = <T>({\n  items,\n  getKey,\n  selectedRowKeys,\n  defaultSelectedRowKeys = [],\n  onSelectionChange,\n  isRowSelectable,\n}: UseRowSelectionOptions<T>) => {\n  const [internalKeys, setInternalKeys] = useState<Array<string | number>>(defaultSelectedRowKeys)\n  const isControlled = selectedRowKeys !== undefined\n  const keys = isControlled ? selectedRowKeys : internalKeys\n  const keySet = useMemo(() => new Set(keys), [keys])\n\n  const selectableEntries = useMemo(\n    () =>\n      items\n        .map((item, idx) => ({ item, key: getKey(item, idx) }))\n        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)),\n    [items, getKey, isRowSelectable],\n  )\n\n  const emit = useCallback(\n    (nextKeys: Array<string | number>) => {\n      if (!isControlled) setInternalKeys(nextKeys)\n      const nextKeySet = new Set(nextKeys)\n      const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)))\n      onSelectionChange?.(nextKeys, nextItems)\n    },\n    [isControlled, items, getKey, onSelectionChange],\n  )\n\n  const toggleRow = useCallback(\n    (key: string | number) => {\n      emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key])\n    },\n    [keys, keySet, emit],\n  )\n\n  const allSelected =\n    selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key))\n  const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key))\n\n  const toggleAll = useCallback(() => {\n    const selectableKeySet = new Set(selectableEntries.map(({ key }) => key))\n    if (allSelected) {\n      emit(keys.filter((k) => !selectableKeySet.has(k)))\n    } else {\n      emit(Array.from(new Set([...keys, ...selectableKeySet])))\n    }\n  }, [allSelected, selectableEntries, keys, emit])\n\n  return {\n    selectedKeys: keys,\n    isSelected: (key: string | number) => keySet.has(key),\n    toggleRow,\n    toggleAll,\n    allSelected,\n    someSelected,\n  }\n}\n"],"names":["useState","useMemo","useCallback"],"mappings":"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"}

package/dist/cjs/components/DetailedInformation/DetailedInformation.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var HeadingText = require('../HeadingText/HeadingText.js');
+
+const COLUMN_GRID_CLASS = {
+    1: 'grid-cols-1',
+    2: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3',
+    3: 'grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-3',
+    4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3',
+};
+function CopyableValue({ text, children }) {
+    const [copied, setCopied] = React.useState(false);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Ignore clipboard error
+        }
+    };
+    return (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 group/copy", children: [jsxRuntime.jsx("span", { children: children }), jsxRuntime.jsx("button", { type: "button", onClick: handleCopy, className: "opacity-0 group-hover/copy:opacity-100 focus:opacity-100 transition-opacity p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer", title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: copied ? (jsxRuntime.jsx("svg", { className: "size-3.5 text-emerald-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : (jsxRuntime.jsx("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })) })] }));
+}
+const DetailedInformation = React.forwardRef((props, ref) => {
+    const { className, title, subTitle, action, details = [], columns = 1, layout = 'horizontal', variant = 'flat', compact = false, bordered = false, divider = true, emptyValue = '- -', titleClass, detailsClass, labelClass, ...divProps } = props;
+    const isCard = variant === 'card';
+    const isBordered = bordered || variant === 'bordered' || isCard;
+    const hasTitles = title || subTitle || action;
+    const filteredDetails = details.filter((detail) => !detail.hidden);
+    const isMultiColumn = columns > 1;
+    return (jsxRuntime.jsxs("div", { ref: ref, className: buildClassname.buildClassName(isCard
+            ? compact
+                ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
+                : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
+            : isBordered
+                ? compact
+                    ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'
+                    : 'p-4 sm:p-6 border border-[var(--ui-border)] rounded-2xl'
+                : compact
+                    ? 'p-2 md:p-3'
+                    : 'p-3 md:p-4', className), ...divProps, children: [hasTitles && (jsxRuntime.jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [jsxRuntime.jsxs("div", { children: [title && (jsxRuntime.jsx(HeadingText.HeadingText.SubTitle2, { className: buildClassname.buildClassName(titleClass), children: title })), subTitle && (jsxRuntime.jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400 font-normal", children: subTitle }))] }), action && jsxRuntime.jsx("div", { className: "shrink-0 flex items-center", children: action })] })), filteredDetails.length ? (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('border-[var(--ui-border-muted)]', hasTitles && !isMultiColumn && 'border-t pt-2', detailsClass), children: jsxRuntime.jsx("dl", { className: buildClassname.buildClassName(COLUMN_GRID_CLASS[columns] || COLUMN_GRID_CLASS[1], !isMultiColumn && divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail, index) => {
+                        var _a;
+                        const itemFallback = (_a = detail.emptyValue) !== null && _a !== void 0 ? _a : emptyValue;
+                        const hasValue = detail.value !== undefined && detail.value !== null && detail.value !== '';
+                        const displayValue = hasValue ? detail.value : itemFallback;
+                        const copyText = typeof detail.value === 'string' || typeof detail.value === 'number'
+                            ? String(detail.value)
+                            : '';
+                        const isVertical = layout === 'vertical' || isMultiColumn;
+                        return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName(isMultiColumn && isCard
+                                ? compact
+                                    ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
+                                    : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
+                                : isVertical
+                                    ? 'flex flex-col gap-1 py-2 px-1'
+                                    : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1', compact && !isMultiColumn ? 'py-1.5' : ''), children: [jsxRuntime.jsxs("dt", { className: buildClassname.buildClassName('text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5', labelClass, detail.labelClass), children: [detail.icon && jsxRuntime.jsx("span", { className: "shrink-0 text-gray-400", children: detail.icon }), jsxRuntime.jsx("span", { children: detail.label }), detail.helpText && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 font-normal cursor-help", title: detail.helpText, children: "(?)" }))] }), jsxRuntime.jsx("dd", { className: buildClassname.buildClassName('text-sm/6 text-gray-700 dark:text-gray-300', !isVertical && 'sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.copyable && copyText ? (jsxRuntime.jsx(CopyableValue, { text: copyText, children: displayValue })) : (displayValue) })] }, detail.label || index));
+                    }) }) })) : null] }));
+});
+DetailedInformation.displayName = 'DetailedInformation';
+
+exports.DetailedInformation = DetailedInformation;
+//# sourceMappingURL=DetailedInformation.js.map

package/dist/cjs/components/DetailedInformation/DetailedInformation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedInformation.js","sources":["../../../../../src/components/DetailedInformation/DetailedInformation.tsx"],"sourcesContent":["import { forwardRef, useState, type ReactNode } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { HeadingText } from '../HeadingText'\nimport type { Detail, DetailedInformationProps } from './DetailedInformation.types'\n\nconst COLUMN_GRID_CLASS: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3',\n  3: 'grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-3',\n  4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3',\n}\n\nfunction CopyableValue({ text, children }: { text: string; children: ReactNode }) {\n  const [copied, setCopied] = useState(false)\n\n  const handleCopy = async (e: React.MouseEvent) => {\n    e.stopPropagation()\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch {\n      // Ignore clipboard error\n    }\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1.5 group/copy\">\n      <span>{children}</span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"opacity-0 group-hover/copy:opacity-100 focus:opacity-100 transition-opacity p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer\"\n        title=\"Copy to clipboard\"\n        aria-label=\"Copy to clipboard\"\n      >\n        {copied ? (\n          <svg\n            className=\"size-3.5 text-emerald-500\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n        ) : (\n          <svg className=\"size-3.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"\n            />\n          </svg>\n        )}\n      </button>\n    </span>\n  )\n}\n\nexport const DetailedInformation = forwardRef<HTMLDivElement, DetailedInformationProps>(\n  (props, ref) => {\n    const {\n      className,\n      title,\n      subTitle,\n      action,\n      details = [],\n      columns = 1,\n      layout = 'horizontal',\n      variant = 'flat',\n      compact = false,\n      bordered = false,\n      divider = true,\n      emptyValue = '- -',\n      titleClass,\n      detailsClass,\n      labelClass,\n      ...divProps\n    } = props\n\n    const isCard = variant === 'card'\n    const isBordered = bordered || variant === 'bordered' || isCard\n    const hasTitles = title || subTitle || action\n    const filteredDetails = details.filter((detail) => !detail.hidden)\n    const isMultiColumn = columns > 1\n\n    return (\n      <div\n        ref={ref}\n        className={buildClassName(\n          isCard\n            ? compact\n              ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'\n              : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'\n            : isBordered\n              ? compact\n                ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'\n                : 'p-4 sm:p-6 border border-[var(--ui-border)] rounded-2xl'\n              : compact\n                ? 'p-2 md:p-3'\n                : 'p-3 md:p-4',\n          className,\n        )}\n        {...divProps}\n      >\n        {hasTitles && (\n          <div className=\"mb-4 flex items-start justify-between gap-4\">\n            <div>\n              {title && (\n                <HeadingText.SubTitle2 className={buildClassName(titleClass)}>\n                  {title}\n                </HeadingText.SubTitle2>\n              )}\n              {subTitle && (\n                <p className=\"mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400 font-normal\">\n                  {subTitle}\n                </p>\n              )}\n            </div>\n            {action && <div className=\"shrink-0 flex items-center\">{action}</div>}\n          </div>\n        )}\n\n        {filteredDetails.length ? (\n          <div\n            className={buildClassName(\n              'border-[var(--ui-border-muted)]',\n              hasTitles && !isMultiColumn && 'border-t pt-2',\n              detailsClass,\n            )}\n          >\n            <dl\n              className={buildClassName(\n                COLUMN_GRID_CLASS[columns] || COLUMN_GRID_CLASS[1],\n                !isMultiColumn && divider && 'divide-y divide-[var(--ui-border-muted)]',\n              )}\n            >\n              {filteredDetails.map((detail, index) => {\n                const itemFallback = detail.emptyValue ?? emptyValue\n                const hasValue =\n                  detail.value !== undefined && detail.value !== null && detail.value !== ''\n                const displayValue = hasValue ? detail.value : itemFallback\n                const copyText =\n                  typeof detail.value === 'string' || typeof detail.value === 'number'\n                    ? String(detail.value)\n                    : ''\n\n                const isVertical = layout === 'vertical' || isMultiColumn\n\n                return (\n                  <div\n                    key={detail.label || index}\n                    className={buildClassName(\n                      isMultiColumn && isCard\n                        ? compact\n                          ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'\n                          : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'\n                        : isVertical\n                          ? 'flex flex-col gap-1 py-2 px-1'\n                          : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1',\n                      compact && !isMultiColumn ? 'py-1.5' : '',\n                    )}\n                  >\n                    <dt\n                      className={buildClassName(\n                        'text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5',\n                        labelClass,\n                        detail.labelClass,\n                      )}\n                    >\n                      {detail.icon && <span className=\"shrink-0 text-gray-400\">{detail.icon}</span>}\n                      <span>{detail.label}</span>\n                      {detail.helpText && (\n                        <span\n                          className=\"text-xs text-gray-400 font-normal cursor-help\"\n                          title={detail.helpText}\n                        >\n                          (?)\n                        </span>\n                      )}\n                    </dt>\n                    <dd\n                      className={buildClassName(\n                        'text-sm/6 text-gray-700 dark:text-gray-300',\n                        !isVertical && 'sm:col-span-2 sm:mt-0',\n                        detail.contentClass,\n                      )}\n                    >\n                      {detail.copyable && copyText ? (\n                        <CopyableValue text={copyText}>{displayValue}</CopyableValue>\n                      ) : (\n                        displayValue\n                      )}\n                    </dd>\n                  </div>\n                )\n              })}\n            </dl>\n          </div>\n        ) : null}\n      </div>\n    )\n  },\n)\n\nDetailedInformation.displayName = 'DetailedInformation'\n"],"names":["useState","_jsxs","_jsx","forwardRef","buildClassName","HeadingText"],"mappings":"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"}

package/dist/cjs/components/Dot/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+const Dot = ({ as = 'span', className, ...props }) => React.createElement(as, {
+    className: buildClassname.buildClassName('inline-block rounded-full bg-gray-500 dark:bg-gray-300', 'w-1 h-1', className),
+    ...props,
+});
+
+exports.Dot = Dot;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Dot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Dot/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport const Dot: React.FC<\n  HTMLAttributes<HTMLElement> & {\n    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>\n  }\n> = ({ as = 'span', className, ...props }) =>\n  React.createElement(as, {\n    className: buildClassName(\n      'inline-block rounded-full bg-gray-500 dark:bg-gray-300',\n      'w-1 h-1',\n      className,\n    ),\n    ...props,\n  })\n"],"names":["buildClassName"],"mappings":";;;;;MAGa,GAAG,GAIZ,CAAC,EAAE,EAAE,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KACvC,KAAK,CAAC,aAAa,CAAC,EAAE,EAAE;IACtB,SAAS,EAAEA,6BAAc,CACvB,wDAAwD,EACxD,SAAS,EACT,SAAS,CACV;AACD,IAAA,GAAG,KAAK;AACT,CAAA;;;;"}

package/dist/cjs/components/Drawer/Drawer.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@headlessui/react');
+var buildClassname = require('../../utils/build-classname.js');
+var Button = require('../Button/Button.js');
+var ChevronLeft = require('../Icons/ChevronLeft.svg.js');
+var X = require('../Icons/X.svg.js');
+
+const alignmentMap = {
+    center: 'items-center justify-center h-full',
+    start: 'justify-start h-full',
+    end: 'justify-end h-full',
+    top: 'items-start justify-center w-full',
+    bottom: 'items-end justify-center h-full',
+};
+const panelAlignmentMap = {
+    center: 'data-[closed]:scale-95 rounded-2xl',
+    start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
+    end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
+    top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
+    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',
+};
+const panelSizeMap = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    full: 'w-full',
+};
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+    const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
+    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
+    const [viewportHeight, setViewportHeight] = React.useState(null);
+    React.useEffect(() => {
+        if (!isOpen) {
+            setViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                setViewportHeight(window.visualViewport.height);
+            }
+        };
+        updateHeight();
+        const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
+        return () => {
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
+        };
+    }, [isOpen]);
+    const handleDialogClose = () => {
+        if (closeOnOutsideClick) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsxRuntime.jsxs(react.Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsxRuntime.jsx(react.DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsxRuntime.jsx("div", { className: "fixed left-0 top-0 w-full", style: { height: viewportHeight ? `${viewportHeight}px` : '100dvh' }, children: jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex', alignmentMap[align]), children: jsxRuntime.jsxs(react.DialogPanel, { transition: true, className: buildClassname.buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), showTitleSection && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsxRuntime.jsx(Button.Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsxRuntime.jsx(ChevronLeft.default, { className: "size-4" }) })), title && (jsxRuntime.jsx(react.DialogTitle, { as: "h3", className: buildClassname.buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsxRuntime.jsx(Button.Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsxRuntime.jsx(X.default, { className: "size-4" }) }))] }), description && (jsxRuntime.jsx("p", { className: buildClassname.buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
+};
+Drawer.displayName = 'Drawer';
+
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/dist/cjs/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\nimport { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport ChevronLeftIcon from '../Icons/ChevronLeft.svg'\nimport XIcon from '../Icons/X.svg'\nimport type { AlignmentMap, DrawerProps, SizeMap } from './Drawer.types'\n\nconst alignmentMap: AlignmentMap = {\n  center: 'items-center justify-center h-full',\n  start: 'justify-start h-full',\n  end: 'justify-end h-full',\n  top: 'items-start justify-center w-full',\n  bottom: 'items-end justify-center h-full',\n}\n\nconst panelAlignmentMap: AlignmentMap = {\n  center: 'data-[closed]:scale-95 rounded-2xl',\n  start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',\n  end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',\n  top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',\n  bottom:\n    'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',\n}\n\nconst panelSizeMap: SizeMap = {\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  full: 'w-full',\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose = () => {},\n  closeOnOutsideClick = true,\n  align = 'end',\n  size = 'md',\n  backdrop = true,\n  title,\n  description,\n  children,\n  footer,\n  footerSticky = false,\n  panelClass = '',\n  contentClass = '',\n  titleClass = '',\n  descriptionClass = '',\n  titleSticky = false,\n  showBackButton = false,\n  showCloseButton = true,\n  dragHandle,\n}) => {\n  const showTitleSection = Boolean(title || description || showBackButton || showCloseButton)\n  const shouldShowDragHandle = dragHandle ?? align === 'bottom'\n  const [viewportHeight, setViewportHeight] = React.useState<number | null>(null)\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setViewportHeight(null)\n      return\n    }\n\n    const updateHeight = () => {\n      if (typeof window !== 'undefined' && window.visualViewport) {\n        setViewportHeight(window.visualViewport.height)\n      }\n    }\n\n    updateHeight()\n    const vv = typeof window !== 'undefined' ? window.visualViewport : null\n    vv?.addEventListener('resize', updateHeight)\n    vv?.addEventListener('scroll', updateHeight)\n\n    return () => {\n      vv?.removeEventListener('resize', updateHeight)\n      vv?.removeEventListener('scroll', updateHeight)\n    }\n  }, [isOpen])\n\n  const handleDialogClose = () => {\n    if (closeOnOutsideClick) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Dialog\n      open={isOpen}\n      as=\"div\"\n      className=\"relative z-50 focus:outline-none\"\n      onClose={handleDialogClose}\n      transition\n    >\n      {backdrop && (\n        <DialogBackdrop className=\"fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200\" />\n      )}\n\n      <div\n        className=\"fixed left-0 top-0 w-full\"\n        style={{ height: viewportHeight ? `${viewportHeight}px` : '100dvh' }}\n      >\n        <div className={buildClassName('flex', alignmentMap[align])}>\n          <DialogPanel\n            transition\n            className={buildClassName(\n              'w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0',\n              'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0',\n              panelAlignmentMap[align],\n              panelSizeMap[size],\n              panelClass,\n            )}\n          >\n            {/* Top drag handle indicator for mobile bottom sheet */}\n            {shouldShowDragHandle && (\n              <div\n                className=\"w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab\"\n                data-testid=\"drawer-drag-handle\"\n              />\n            )}\n\n            {/* Header Section */}\n            {showTitleSection && (\n              <div\n                className={buildClassName(\n                  'space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0',\n                  titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10',\n                )}\n              >\n                <div className=\"flex items-center justify-between gap-3 min-w-0\">\n                  <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                    {showBackButton && (\n                      <Button\n                        iconOnly\n                        aria-label=\"Back\"\n                        variant=\"plain\"\n                        theme=\"secondary\"\n                        size=\"xs\"\n                        onClick={onClose}\n                      >\n                        <ChevronLeftIcon className=\"size-4\" />\n                      </Button>\n                    )}\n                    {title && (\n                      <DialogTitle\n                        as=\"h3\"\n                        className={buildClassName(\n                          'text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0',\n                          titleClass,\n                        )}\n                      >\n                        {title}\n                      </DialogTitle>\n                    )}\n                  </div>\n\n                  {showCloseButton && (\n                    <Button\n                      iconOnly\n                      aria-label=\"Close drawer\"\n                      variant=\"plain\"\n                      theme=\"secondary\"\n                      size=\"xs\"\n                      onClick={onClose}\n                      className=\"rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0\"\n                    >\n                      <XIcon className=\"size-4\" />\n                    </Button>\n                  )}\n                </div>\n\n                {description && (\n                  <p\n                    className={buildClassName(\n                      'text-sm text-gray-500 dark:text-gray-400 font-normal truncate',\n                      descriptionClass,\n                    )}\n                  >\n                    {description}\n                  </p>\n                )}\n              </div>\n            )}\n\n            {/* Content Body */}\n            <div className={buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass)}>\n              {children}\n            </div>\n\n            {/* Footer Section */}\n            {footer && (\n              <div\n                className={buildClassName(\n                  'p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0',\n                  footerSticky && 'sticky bottom-0 z-10',\n                )}\n              >\n                {footer}\n              </div>\n            )}\n          </DialogPanel>\n        </div>\n      </div>\n    </Dialog>\n  )\n}\n\nDrawer.displayName = 'Drawer'\n"],"names":["_jsxs","Dialog","_jsx","DialogBackdrop","buildClassName","DialogPanel","Button","ChevronLeftIcon","DialogTitle","XIcon"],"mappings":"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"}

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@headlessui/react');
+var buildClassname = require('../../utils/build-classname.js');
+
+const WIDTH_CLASS = {
+    auto: 'w-auto min-w-[120px]',
+    sm: 'w-44',
+    md: 'w-56',
+    lg: 'w-64',
+    xl: 'w-72',
+};
+const Dropdown = ({ triggerButton, renderTriggerButton, className, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', width = 'md', menuItemClass, onMenuClick, ...restProps }) => {
+    var _a, _b, _c, _d;
+    const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md;
+    const { theme, variant, size, disabled } = restProps;
+    return (jsxRuntime.jsxs(react.Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: (state) => {
+                    const rendered = renderTriggerButton(state);
+                    if (React.isValidElement(rendered) && className) {
+                        return React.cloneElement(rendered, {
+                            className: buildClassname.buildClassName(rendered.props.className, className),
+                        });
+                    }
+                    return rendered;
+                } })) : React.isValidElement(triggerButton) ? (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: React.cloneElement(triggerButton, {
+                    className: buildClassname.buildClassName(triggerButton.props.className, className),
+                    theme: (_a = triggerButton.props.theme) !== null && _a !== void 0 ? _a : theme,
+                    variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
+                    size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
+                    disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
+                }) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassname.buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [item.groupTitle && (jsxRuntime.jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), !item.divider && (jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsxRuntime.jsx("div", { onClick: () => {
+                                    var _a;
+                                    if (!disabled) {
+                                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx);
+                                    }
+                                }, className: buildClassname.buildClassName('flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none', item.danger
+                                    ? buildClassname.buildClassName('text-rose-600 dark:text-rose-400', active
+                                        ? 'bg-rose-50 dark:bg-rose-950/40'
+                                        : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
+                                    : buildClassname.buildClassName('text-gray-700 dark:text-gray-200', active
+                                        ? 'bg-gray-100 dark:bg-gray-700/80'
+                                        : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && (jsxRuntime.jsx("span", { className: "font-medium truncate", children: item.label })), item.description && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsxRuntime.jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) })), item.divider && idx < items.length - 1 && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
+};
+Dropdown.displayName = 'Dropdown';
+
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.js.map

package/dist/cjs/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n  auto: 'w-auto min-w-[120px]',\n  sm: 'w-44',\n  md: 'w-56',\n  lg: 'w-64',\n  xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  triggerButton,\n  renderTriggerButton,\n  className,\n  items,\n  renderItem,\n  itemsContainerClass,\n  transition = true,\n  anchor = 'bottom start',\n  width = 'md',\n  menuItemClass,\n  onMenuClick,\n  ...restProps\n}: DropdownProps & Record<string, any>) => {\n  const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n  const { theme, variant, size, disabled } = restProps\n\n  return (\n    <Menu as=\"div\" className=\"relative inline-block\">\n      {/* Trigger */}\n      {renderTriggerButton ? (\n        <MenuButton as={Fragment}>\n          {(state) => {\n            const rendered = renderTriggerButton(state)\n            if (isValidElement(rendered) && className) {\n              return cloneElement(rendered as React.ReactElement<any>, {\n                className: buildClassName((rendered.props as any).className, className),\n              })\n            }\n            return rendered as React.ReactElement\n          }}\n        </MenuButton>\n      ) : isValidElement(triggerButton) ? (\n        <MenuButton as={Fragment}>\n          {cloneElement(triggerButton as React.ReactElement<any>, {\n            className: buildClassName((triggerButton.props as any).className, className),\n            theme: (triggerButton.props as any).theme ?? theme,\n            variant: (triggerButton.props as any).variant ?? variant,\n            size: (triggerButton.props as any).size ?? size,\n            disabled: (triggerButton.props as any).disabled ?? disabled,\n          })}\n        </MenuButton>\n      ) : (\n        <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n      )}\n\n      {/* Dropdown Panel */}\n      <MenuItems\n        transition={transition}\n        anchor={anchor}\n        className={buildClassName(\n          'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n          'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n          'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n          '[--anchor-gap:--spacing(1)]',\n          widthClass,\n          itemsContainerClass,\n        )}\n        data-testid=\"dropdown-items\"\n        as=\"ul\"\n      >\n        {items.map((item: DropdownItem, idx: number) => (\n          <Fragment key={item.id}>\n            {item.groupTitle && (\n              <li\n                key={`group-${item.id}`}\n                className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n                data-testid={`dropdown-group-${item.id}`}\n              >\n                {item.groupTitle}\n              </li>\n            )}\n            {!item.divider && (\n              <MenuItem as=\"li\" disabled={item.disabled}>\n                {({ disabled, active }) => (\n                  <div\n                    onClick={() => {\n                      if (!disabled) {\n                        item.onClick?.(item)\n                        onMenuClick?.(item, idx)\n                      }\n                    }}\n                    className={buildClassName(\n                      'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n                      item.danger\n                        ? buildClassName(\n                            'text-rose-600 dark:text-rose-400',\n                            active\n                              ? 'bg-rose-50 dark:bg-rose-950/40'\n                              : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n                          )\n                        : buildClassName(\n                            'text-gray-700 dark:text-gray-200',\n                            active\n                              ? 'bg-gray-100 dark:bg-gray-700/80'\n                              : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n                          ),\n                      disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                      menuItemClass,\n                    )}\n                    data-testid={`dropdown-item-${item.id}`}\n                  >\n                    {renderItem ? (\n                      renderItem(item)\n                    ) : (\n                      <>\n                        <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n                          {item.icon && (\n                            <span\n                              className={buildClassName(\n                                'shrink-0',\n                                item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n                              )}\n                            >\n                              {item.icon}\n                            </span>\n                          )}\n                          <div className=\"flex flex-col min-w-0\">\n                            {item.label && (\n                              <span className=\"font-medium truncate\">{item.label}</span>\n                            )}\n                            {item.description && (\n                              <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n                                {item.description}\n                              </span>\n                            )}\n                          </div>\n                        </div>\n                        {item.shortcut && (\n                          <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n                            {item.shortcut}\n                          </kbd>\n                        )}\n                      </>\n                    )}\n                  </div>\n                )}\n              </MenuItem>\n            )}\n            {item.divider && idx < items.length - 1 && (\n              <li\n                key={`divider-${item.id}`}\n                className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n                data-testid=\"dropdown-divider\"\n              />\n            )}\n          </Fragment>\n        ))}\n      </MenuItems>\n    </Menu>\n  )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","Menu","_jsx","MenuButton","Fragment","isValidElement","cloneElement","buildClassName","MenuItems","MenuItem"],"mappings":"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"}

package/dist/cjs/components/EmptyState/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var FolderPlus = require('../Icons/FolderPlus.svg.js');
+var HeadingText = require('../HeadingText/HeadingText.js');
+var BodyText = require('../BodyText/BodyText.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+const EmptyState = ({ title, description, className, action = null, }) => {
+    return (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxRuntime.jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsxRuntime.jsx(FolderPlus.default, { className: "size-8 text-[var(--ui-text)]" }), jsxRuntime.jsx(HeadingText.HeadingText.SubTitle, { children: title }), description && (jsxRuntime.jsx(BodyText.BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
+};
+
+exports.EmptyState = EmptyState;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/EmptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\nimport FolderPlusIcon from '../Icons/FolderPlus.svg'\nimport { HeadingText } from '../HeadingText'\nimport { BodyText } from '../BodyText'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport interface EmptyStateProps {\n  title: string\n  description?: string\n  action?: ReactNode\n  className?: string\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = ({\n  title,\n  description,\n  className,\n  action = null,\n}) => {\n  return (\n    <div className={buildClassName('w-full flex justify-center px-4 pt-16', className)}>\n      <div className=\"max-w-md flex flex-col items-center gap-4\">\n        <FolderPlusIcon className=\"size-8 text-[var(--ui-text)]\" />\n        <HeadingText.SubTitle>{title}</HeadingText.SubTitle>\n        {description && (\n          <BodyText as=\"p\" className=\"text-center\" muted small>\n            {description}\n          </BodyText>\n        )}\n        {action}\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsx","buildClassName","_jsxs","FolderPlusIcon","HeadingText","BodyText"],"mappings":";;;;;;;;AAaO,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,WAAW,EACX,SAAS,EACT,MAAM,GAAG,IAAI,GACd,KAAI;IACH,QACEA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,6BAAc,CAAC,uCAAuC,EAAE,SAAS,CAAC,EAAA,QAAA,EAChFC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACxDF,cAAA,CAACG,kBAAc,EAAA,EAAC,SAAS,EAAC,8BAA8B,EAAA,CAAG,EAC3DH,cAAA,CAACI,uBAAW,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAwB,EACnD,WAAW,KACVJ,cAAA,CAACK,iBAAQ,EAAA,EAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAA,IAAA,EAAC,KAAK,EAAA,IAAA,EAAA,QAAA,EACjD,WAAW,EAAA,CACH,CACZ,EACA,MAAM,CAAA,EAAA,CACH,EAAA,CACF;AAEV;;;;"}

package/dist/cjs/components/Flex/Flex.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var commonResponsive = require('../common-responsive.js');
+
+const FlexItem = React.forwardRef((props, ref) => {
+    const { as: Component = 'div', span, sm, md, lg, xl, xxl, grow, shrink, order, className, style, children, ...restProps } = props;
+    const classes = buildClassname.buildClassName('min-w-0 box-border', span && commonResponsive.FLEX_SPAN_MAP[String(span)], sm && commonResponsive.FLEX_SM_SPAN_MAP[String(sm)], md && commonResponsive.FLEX_MD_SPAN_MAP[String(md)], lg && commonResponsive.FLEX_LG_SPAN_MAP[String(lg)], xl && commonResponsive.FLEX_XL_SPAN_MAP[String(xl)], xxl && commonResponsive.FLEX_XXL_SPAN_MAP[String(xxl)], commonResponsive.resolveOrderClassName(order), grow === true && 'grow', grow === false && 'grow-0', shrink === true && 'shrink', shrink === false && 'shrink-0', className);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: classes, style: { ...commonResponsive.resolveOrderStyle(order), ...style }, ...restProps, children: children }));
+});
+FlexItem.displayName = 'Flex.Item';
+const Flex = React.forwardRef((props, ref) => {
+    const { as: Component = 'div', gap, gapX, gapY, align = 'stretch', justify = 'start', direction = 'row', wrap = 'wrap', inline = false, className, children, ...restProps } = props;
+    const classes = buildClassname.buildClassName(inline ? 'inline-flex' : 'flex', commonResponsive.DIRECTION_MAP[direction] || 'flex-row', commonResponsive.WRAP_MAP[wrap] || 'flex-wrap', 'w-full', !gapX && !gapY && gap && commonResponsive.GAP_MAP[gap], gapX && commonResponsive.GAP_X_MAP[gapX], gapY && commonResponsive.GAP_Y_MAP[gapY], commonResponsive.ALIGN_MAP[align] || 'items-stretch', commonResponsive.JUSTIFY_MAP[justify] || 'justify-start', className);
+    return (jsxRuntime.jsx(Component, { ref: ref, className: classes, ...restProps, children: children }));
+});
+Flex.Item = FlexItem;
+Flex.Col = FlexItem;
+Flex.displayName = 'Flex';
+
+exports.Flex = Flex;
+exports.FlexItem = FlexItem;
+//# sourceMappingURL=Flex.js.map

package/dist/cjs/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport {\n  ALIGN_MAP,\n  DIRECTION_MAP,\n  FLEX_LG_SPAN_MAP,\n  FLEX_MD_SPAN_MAP,\n  FLEX_SM_SPAN_MAP,\n  FLEX_SPAN_MAP,\n  FLEX_XL_SPAN_MAP,\n  FLEX_XXL_SPAN_MAP,\n  GAP_MAP,\n  GAP_X_MAP,\n  GAP_Y_MAP,\n  JUSTIFY_MAP,\n  WRAP_MAP,\n  resolveOrderClassName,\n  resolveOrderStyle,\n} from '../common-responsive'\nimport type { FlexComponent, FlexItemProps, FlexProps } from './Flex.types'\n\nexport const FlexItem = forwardRef<HTMLDivElement, FlexItemProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    span,\n    sm,\n    md,\n    lg,\n    xl,\n    xxl,\n    grow,\n    shrink,\n    order,\n    className,\n    style,\n    children,\n    ...restProps\n  } = props\n\n  const classes = buildClassName(\n    'min-w-0 box-border',\n    span && FLEX_SPAN_MAP[String(span)],\n    sm && FLEX_SM_SPAN_MAP[String(sm)],\n    md && FLEX_MD_SPAN_MAP[String(md)],\n    lg && FLEX_LG_SPAN_MAP[String(lg)],\n    xl && FLEX_XL_SPAN_MAP[String(xl)],\n    xxl && FLEX_XXL_SPAN_MAP[String(xxl)],\n    resolveOrderClassName(order),\n    grow === true && 'grow',\n    grow === false && 'grow-0',\n    shrink === true && 'shrink',\n    shrink === false && 'shrink-0',\n    className,\n  )\n\n  return (\n    <Component\n      ref={ref}\n      className={classes}\n      style={{ ...resolveOrderStyle(order), ...style }}\n      {...restProps}\n    >\n      {children}\n    </Component>\n  )\n})\n\nFlexItem.displayName = 'Flex.Item'\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const {\n    as: Component = 'div',\n    gap,\n    gapX,\n    gapY,\n    align = 'stretch',\n    justify = 'start',\n    direction = 'row',\n    wrap = 'wrap',\n    inline = false,\n    className,\n    children,\n    ...restProps\n  } = props\n\n  const classes = buildClassName(\n    inline ? 'inline-flex' : 'flex',\n    DIRECTION_MAP[direction] || 'flex-row',\n    WRAP_MAP[wrap] || 'flex-wrap',\n    'w-full',\n    !gapX && !gapY && gap && GAP_MAP[gap],\n    gapX && GAP_X_MAP[gapX],\n    gapY && GAP_Y_MAP[gapY],\n    ALIGN_MAP[align] || 'items-stretch',\n    JUSTIFY_MAP[justify] || 'justify-start',\n    className,\n  )\n\n  return (\n    <Component ref={ref} className={classes} {...restProps}>\n      {children}\n    </Component>\n  )\n}) as unknown as FlexComponent\n\nFlex.Item = FlexItem\nFlex.Col = FlexItem\nFlex.displayName = 'Flex'\n"],"names":["forwardRef","buildClassName","FLEX_SPAN_MAP","FLEX_SM_SPAN_MAP","FLEX_MD_SPAN_MAP","FLEX_LG_SPAN_MAP","FLEX_XL_SPAN_MAP","FLEX_XXL_SPAN_MAP","resolveOrderClassName","_jsx","resolveOrderStyle","DIRECTION_MAP","WRAP_MAP","GAP_MAP","GAP_X_MAP","GAP_Y_MAP","ALIGN_MAP","JUSTIFY_MAP"],"mappings":";;;;;;;AAqBO,MAAM,QAAQ,GAAGA,gBAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,KAAI;AAC/E,IAAA,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,IAAI,EACJ,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,GAAG,EACH,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,OAAO,GAAGC,6BAAc,CAC5B,oBAAoB,EACpB,IAAI,IAAIC,8BAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EACnC,EAAE,IAAIC,iCAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAClC,EAAE,IAAIC,iCAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAClC,EAAE,IAAIC,iCAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAClC,EAAE,IAAIC,iCAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAClC,GAAG,IAAIC,kCAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EACrCC,sCAAqB,CAAC,KAAK,CAAC,EAC5B,IAAI,KAAK,IAAI,IAAI,MAAM,EACvB,IAAI,KAAK,KAAK,IAAI,QAAQ,EAC1B,MAAM,KAAK,IAAI,IAAI,QAAQ,EAC3B,MAAM,KAAK,KAAK,IAAI,UAAU,EAC9B,SAAS,CACV;AAED,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,EAAE,GAAGC,kCAAiB,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAA,GAC5C,SAAS,EAAA,QAAA,EAEZ,QAAQ,EAAA,CACC;AAEhB,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,WAAW;AAE3B,MAAM,IAAI,GAAGV,gBAAU,CAA4B,CAAC,KAAK,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,OAAO,EACjB,SAAS,GAAG,KAAK,EACjB,IAAI,GAAG,MAAM,EACb,MAAM,GAAG,KAAK,EACd,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK;AAET,IAAA,MAAM,OAAO,GAAGC,6BAAc,CAC5B,MAAM,GAAG,aAAa,GAAG,MAAM,EAC/BU,8BAAa,CAAC,SAAS,CAAC,IAAI,UAAU,EACtCC,yBAAQ,CAAC,IAAI,CAAC,IAAI,WAAW,EAC7B,QAAQ,EACR,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,IAAIC,wBAAO,CAAC,GAAG,CAAC,EACrC,IAAI,IAAIC,0BAAS,CAAC,IAAI,CAAC,EACvB,IAAI,IAAIC,0BAAS,CAAC,IAAI,CAAC,EACvBC,0BAAS,CAAC,KAAK,CAAC,IAAI,eAAe,EACnCC,4BAAW,CAAC,OAAO,CAAC,IAAI,eAAe,EACvC,SAAS,CACV;AAED,IAAA,QACER,cAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAA,GAAM,SAAS,YACnD,QAAQ,EAAA,CACC;AAEhB,CAAC;AAED,IAAI,CAAC,IAAI,GAAG,QAAQ;AACpB,IAAI,CAAC,GAAG,GAAG,QAAQ;AACnB,IAAI,CAAC,WAAW,GAAG,MAAM;;;;;"}

package/dist/cjs/components/FloatingActionButton/FloatingActionButton.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+function FloatingActionButton({ icon, activeIcon, label, variant = 'primary', size = 'md', position = 'bottom-right', speedDialActions, isOpen: externalIsOpen, onToggle, disabled = false, onClick, 'aria-label': ariaLabel, containerClass = '', className = '', }) {
+    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const isSpeedDial = Array.isArray(speedDialActions) && speedDialActions.length > 0;
+    const isOpen = externalIsOpen !== undefined ? externalIsOpen : internalIsOpen;
+    const toggleOpen = () => {
+        const nextState = !isOpen;
+        setInternalIsOpen(nextState);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextState);
+    };
+    const handleMainClick = () => {
+        if (disabled)
+            return;
+        if (isSpeedDial) {
+            toggleOpen();
+        }
+        else {
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    const handleSubActionClick = (action) => {
+        var _a;
+        if (action.disabled)
+            return;
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        setInternalIsOpen(false);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(false);
+    };
+    const positionClasses = {
+        'bottom-right': 'fixed bottom-6 right-6 z-40',
+        'bottom-left': 'fixed bottom-6 left-6 z-40',
+        'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2 z-40',
+        inline: 'relative inline-flex z-10',
+    }[position];
+    const variantClasses = {
+        primary: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-lg shadow-blue-600/30',
+        secondary: 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 border border-[var(--ui-border)] shadow-lg',
+        danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-lg shadow-red-600/30',
+        dark: 'bg-gray-900 hover:bg-black active:bg-black text-white shadow-lg shadow-gray-900/40',
+    }[variant];
+    const sizeClasses = {
+        sm: label ? 'px-3.5 py-2 text-xs gap-2 rounded-full' : 'p-2.5 rounded-full',
+        md: label ? 'px-5 py-3 text-sm gap-2.5 rounded-full' : 'p-3.5 rounded-full',
+        lg: label ? 'px-6 py-4 text-base gap-3 rounded-full' : 'p-4 rounded-full',
+    }[size];
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName(positionClasses, containerClass), "data-testid": "fab-container", children: [isSpeedDial && isOpen && (jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/25 backdrop-blur-xs z-30 transition-opacity duration-200", onClick: () => toggleOpen(), "data-testid": "fab-backdrop" })), isSpeedDial && (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('absolute bottom-full mb-3 flex flex-col gap-2.5 z-40 transition-all duration-200 origin-bottom', position === 'bottom-left'
+                    ? 'items-start left-0'
+                    : position === 'bottom-center'
+                        ? 'items-center left-1/2 -translate-x-1/2'
+                        : 'items-end right-0', isOpen
+                    ? 'scale-100 opacity-100 pointer-events-auto'
+                    : 'scale-90 opacity-0 pointer-events-none'), "data-testid": "fab-speed-dial-menu", children: speedDialActions.map((action) => {
+                    const isDanger = action.theme === 'danger';
+                    const isPrimary = action.theme === 'primary';
+                    return (jsxRuntime.jsxs("button", { type: "button", disabled: action.disabled, onClick: () => handleSubActionClick(action), className: buildClassname.buildClassName('flex items-center gap-2.5 py-2 px-3.5 rounded-full text-xs font-semibold shadow-md transition-all duration-150 cursor-pointer group', action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none', !action.disabled &&
+                            (isDanger
+                                ? 'bg-red-600 text-white hover:bg-red-700'
+                                : isPrimary
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                    : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 border border-[var(--ui-border)]')), "data-testid": `fab-action-${action.id}`, children: [jsxRuntime.jsx("span", { className: "text-sm", children: action.icon }), jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: action.label })] }, action.id));
+                }) })), jsxRuntime.jsxs("button", { type: "button", disabled: disabled, onClick: handleMainClick, "aria-label": ariaLabel || (typeof label === 'string' ? label : 'Floating action'), "aria-expanded": isSpeedDial ? isOpen : undefined, className: buildClassname.buildClassName('inline-flex items-center justify-center font-semibold transition-all duration-200 cursor-pointer select-none z-40 active:scale-95', disabled && 'opacity-50 cursor-not-allowed pointer-events-none shadow-none', variantClasses, sizeClasses, className), "data-testid": "fab-button", children: [jsxRuntime.jsx("span", { className: buildClassname.buildClassName('transition-transform duration-200', isOpen && 'rotate-45'), children: isOpen && activeIcon ? activeIcon : icon }), label && jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label })] })] }));
+}
+FloatingActionButton.displayName = 'FloatingActionButton';
+
+exports.FloatingActionButton = FloatingActionButton;
+//# sourceMappingURL=FloatingActionButton.js.map

package/dist/cjs/components/FloatingActionButton/FloatingActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingActionButton.js","sources":["../../../../../src/components/FloatingActionButton/FloatingActionButton.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport type { FloatingActionButtonProps, FABSpeedDialAction } from './FloatingActionButton.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function FloatingActionButton({\n  icon,\n  activeIcon,\n  label,\n  variant = 'primary',\n  size = 'md',\n  position = 'bottom-right',\n  speedDialActions,\n  isOpen: externalIsOpen,\n  onToggle,\n  disabled = false,\n  onClick,\n  'aria-label': ariaLabel,\n  containerClass = '',\n  className = '',\n}: FloatingActionButtonProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false)\n\n  const isSpeedDial = Array.isArray(speedDialActions) && speedDialActions.length > 0\n  const isOpen = externalIsOpen !== undefined ? externalIsOpen : internalIsOpen\n\n  const toggleOpen = () => {\n    const nextState = !isOpen\n    setInternalIsOpen(nextState)\n    onToggle?.(nextState)\n  }\n\n  const handleMainClick = () => {\n    if (disabled) return\n    if (isSpeedDial) {\n      toggleOpen()\n    } else {\n      onClick?.()\n    }\n  }\n\n  const handleSubActionClick = (action: FABSpeedDialAction) => {\n    if (action.disabled) return\n    action.onClick?.()\n    setInternalIsOpen(false)\n    onToggle?.(false)\n  }\n\n  const positionClasses = {\n    'bottom-right': 'fixed bottom-6 right-6 z-40',\n    'bottom-left': 'fixed bottom-6 left-6 z-40',\n    'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2 z-40',\n    inline: 'relative inline-flex z-10',\n  }[position]\n\n  const variantClasses = {\n    primary:\n      'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-lg shadow-blue-600/30',\n    secondary:\n      'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 border border-[var(--ui-border)] shadow-lg',\n    danger: 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-lg shadow-red-600/30',\n    dark: 'bg-gray-900 hover:bg-black active:bg-black text-white shadow-lg shadow-gray-900/40',\n  }[variant]\n\n  const sizeClasses = {\n    sm: label ? 'px-3.5 py-2 text-xs gap-2 rounded-full' : 'p-2.5 rounded-full',\n    md: label ? 'px-5 py-3 text-sm gap-2.5 rounded-full' : 'p-3.5 rounded-full',\n    lg: label ? 'px-6 py-4 text-base gap-3 rounded-full' : 'p-4 rounded-full',\n  }[size]\n\n  return (\n    <div className={buildClassName(positionClasses, containerClass)} data-testid=\"fab-container\">\n      {/* Speed Dial Backdrop Overlay */}\n      {isSpeedDial && isOpen && (\n        <div\n          className=\"fixed inset-0 bg-black/25 backdrop-blur-xs z-30 transition-opacity duration-200\"\n          onClick={() => toggleOpen()}\n          data-testid=\"fab-backdrop\"\n        />\n      )}\n\n      {/* Speed Dial Sub-Actions List */}\n      {isSpeedDial && (\n        <div\n          className={buildClassName(\n            'absolute bottom-full mb-3 flex flex-col gap-2.5 z-40 transition-all duration-200 origin-bottom',\n            position === 'bottom-left'\n              ? 'items-start left-0'\n              : position === 'bottom-center'\n                ? 'items-center left-1/2 -translate-x-1/2'\n                : 'items-end right-0',\n            isOpen\n              ? 'scale-100 opacity-100 pointer-events-auto'\n              : 'scale-90 opacity-0 pointer-events-none',\n          )}\n          data-testid=\"fab-speed-dial-menu\"\n        >\n          {speedDialActions.map((action) => {\n            const isDanger = action.theme === 'danger'\n            const isPrimary = action.theme === 'primary'\n\n            return (\n              <button\n                key={action.id}\n                type=\"button\"\n                disabled={action.disabled}\n                onClick={() => handleSubActionClick(action)}\n                className={buildClassName(\n                  'flex items-center gap-2.5 py-2 px-3.5 rounded-full text-xs font-semibold shadow-md transition-all duration-150 cursor-pointer group',\n                  action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',\n                  !action.disabled &&\n                    (isDanger\n                      ? 'bg-red-600 text-white hover:bg-red-700'\n                      : isPrimary\n                        ? 'bg-blue-600 text-white hover:bg-blue-700'\n                        : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 border border-[var(--ui-border)]'),\n                )}\n                data-testid={`fab-action-${action.id}`}\n              >\n                <span className=\"text-sm\">{action.icon}</span>\n                <span className=\"whitespace-nowrap\">{action.label}</span>\n              </button>\n            )\n          })}\n        </div>\n      )}\n\n      {/* Primary Floating Action Button */}\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={handleMainClick}\n        aria-label={ariaLabel || (typeof label === 'string' ? label : 'Floating action')}\n        aria-expanded={isSpeedDial ? isOpen : undefined}\n        className={buildClassName(\n          'inline-flex items-center justify-center font-semibold transition-all duration-200 cursor-pointer select-none z-40 active:scale-95',\n          disabled && 'opacity-50 cursor-not-allowed pointer-events-none shadow-none',\n          variantClasses,\n          sizeClasses,\n          className,\n        )}\n        data-testid=\"fab-button\"\n      >\n        <span\n          className={buildClassName('transition-transform duration-200', isOpen && 'rotate-45')}\n        >\n          {isOpen && activeIcon ? activeIcon : icon}\n        </span>\n        {label && <span className=\"whitespace-nowrap\">{label}</span>}\n      </button>\n    </div>\n  )\n}\n\nFloatingActionButton.displayName = 'FloatingActionButton'\n"],"names":["useState","_jsxs","buildClassName","_jsx"],"mappings":"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"}