@smwb/ui-solid 0.1.0

package/dist/headless/components/navigation/tabs/tabs.js

@@ -0,0 +1,134 @@
+import { createComponent as C, use as b, spread as W, mergeProps as N, insert as p, effect as _, setStyleProperty as M, style as X, className as D, setAttribute as j, template as x } from "solid-js/web";
+import { mergeProps as k, splitProps as q, createSignal as L, onMount as R, createEffect as S, on as F, onCleanup as G, Show as H } from "solid-js";
+import y from "clsx";
+import { debounce as J } from "../../../utils/debounce.js";
+import { animate as K } from "../../../utils/animate.js";
+import { TabsContext as Q } from "./tabsContext.js";
+import { mergeRefs as U } from "../../../primitives/mergeRefs.js";
+var Y = /* @__PURE__ */ x("<span class=smwb-tabs__indicator><span class=smwb-tabs__indicator-content>"), Z = /* @__PURE__ */ x("<div><div><div class=smwb-tabs__scroll-area role=tablist>");
+const E = 40;
+function it(z) {
+  const P = k({
+    indicatorContent: !1,
+    scrollable: !1
+  }, z), [o, $] = q(P, ["class", "children", "onChange", "value", "indicatorContent", "scrollable", "aria-label", "ref"]), [T, V] = L(!1), [c, u] = L({
+    root: {}
+  });
+  let i, d, B = 0;
+  const h = [], v = () => {
+    let t;
+    if (i) {
+      const l = i.getBoundingClientRect();
+      t = {
+        clientWidth: i.clientWidth,
+        scrollLeft: i.scrollLeft,
+        left: l.left,
+        right: l.right
+      };
+    }
+    let e = null, n = null;
+    if (i && d && d.children.length > 0) {
+      const l = d.children[o.value];
+      e = l ? l.getBoundingClientRect() : null, o.indicatorContent && (n = h[o.value]?.getBoundingClientRect() ?? null);
+    }
+    return {
+      tabsMeta: t,
+      tabMeta: e,
+      tabContentMeta: n
+    };
+  }, m = () => {
+    const {
+      tabsMeta: t,
+      tabMeta: e,
+      tabContentMeta: n
+    } = v();
+    let l = 0;
+    e && t && (l = e.left - t.left + t.scrollLeft);
+    const r = {
+      root: {
+        left: l,
+        width: e ? e.width : 0
+      }
+    };
+    o.indicatorContent && n && (r.content = {
+      width: n.width
+    });
+    const s = c();
+    if (s.root.left === void 0 || s.root.width === void 0) {
+      u(r);
+      return;
+    }
+    const a = Math.abs((s.root.left ?? 0) - (r.root.left ?? 0)), f = Math.abs((s.root.width ?? 0) - (r.root.width ?? 0));
+    (a >= 1 || f >= 1) && u(r);
+  }, g = (t) => {
+    i && K(i, "scrollLeft", t, {
+      duration: 300
+    });
+  }, I = () => {
+    const {
+      tabsMeta: t,
+      tabMeta: e
+    } = v();
+    !e || !t || (e.left < t.left ? g(t.scrollLeft + (e.left - t.left) - E) : e.right > t.right && g(t.scrollLeft + (e.right - t.right) + E));
+  };
+  R(() => V(!0)), S(F(() => o.value, () => m())), R(() => {
+    const t = J(() => m(), 166), e = i?.ownerDocument.defaultView;
+    e?.addEventListener("resize", t);
+    let n;
+    typeof ResizeObserver < "u" && d && (n = new ResizeObserver(t), Array.from(d.children).forEach((l) => n?.observe(l))), G(() => {
+      t.cancel(), e?.removeEventListener("resize", t), n?.disconnect();
+    });
+  }), S(() => {
+    c(), I();
+  });
+  const A = {
+    value: () => o.value,
+    onChange: o.onChange,
+    indicatorContent: o.indicatorContent,
+    registerTab: () => B++,
+    setContentRef: (t, e) => {
+      h[t] = e;
+    }
+  };
+  return C(Q.Provider, {
+    value: A,
+    get children() {
+      var t = Z(), e = t.firstChild, n = e.firstChild, l = U(o.ref);
+      return typeof l == "function" && b(l, t), W(t, N($, {
+        get class() {
+          return y("smwb-tabs", o.class);
+        },
+        role: "tabpanel"
+      }), !1, !0), b((r) => i = r, e), b((r) => d = r, n), p(n, () => o.children), p(e, C(H, {
+        get when() {
+          return T();
+        },
+        get children() {
+          var r = Y(), s = r.firstChild;
+          return _((a) => {
+            var f = `${c().root.left ?? 0}px`, w = `${c().root.width ?? 0}px`, O = c().content ? {
+              width: `${c().content?.width ?? 0}px`
+            } : {};
+            return f !== a.e && M(r, "left", a.e = f), w !== a.t && M(r, "width", a.t = w), a.a = X(s, O, a.a), a;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), r;
+        }
+      }), null), _((r) => {
+        var s = y("smwb-tabs__scroller", {
+          "smwb-tabs__scroller--scrollable": o.scrollable
+        }), a = o["aria-label"];
+        return s !== r.e && D(e, r.e = s), a !== r.t && j(n, "aria-label", r.t = a), r;
+      }, {
+        e: void 0,
+        t: void 0
+      }), t;
+    }
+  });
+}
+export {
+  it as Tabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/headless/components/navigation/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps({ indicatorContent: false, scrollable: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator in sync with resize.\n  onMount(() => {\n    const onResize = debounce(() => updateIndicatorState(), 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div {...rest} class={cn(\"smwb-tabs\", local.class)} role=\"tabpanel\" ref={mergeRefs(local.ref)}>\n        <div\n          class={cn(\"smwb-tabs__scroller\", { \"smwb-tabs__scroller--scrollable\": local.scrollable })}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"names":["VIEW_NEXT_TAB_PX","Tabs","props","merged","mergeProps","indicatorContent","scrollable","local","rest","splitProps","mounted","setMounted","createSignal","indicatorStyle","setIndicatorStyle","root","tabsEl","tabListEl","tabCounter","contentRefs","getTabsMeta","tabsMeta","rect","getBoundingClientRect","clientWidth","scrollLeft","left","right","tabMeta","tabContentMeta","children","length","tab","value","updateIndicatorState","startValue","next","width","content","prev","undefined","dStart","Math","abs","dSize","scroll","scrollValue","animate","duration","scrollSelectedIntoView","onMount","createEffect","on","onResize","debounce","view","ownerDocument","defaultView","addEventListener","resizeObserver","ResizeObserver","Array","from","forEach","child","observe","onCleanup","cancel","removeEventListener","disconnect","contextValue","onChange","registerTab","setContentRef","index","el","_$createComponent","TabsContext","Provider","_el$","_tmpl$2","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","Show","when","_el$4","_tmpl$","_el$5","_$effect","_p$","_v$","_v$2","_v$3","e","_$setStyleProperty","t","a","_$style","_v$4","_v$5","_$className","_$setAttribute"],"mappings":"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"}

package/dist/headless/components/navigation/tabs/tabsContext.js

@@ -0,0 +1,7 @@
+import { createContext as t, useContext as e } from "solid-js";
+const o = t(), s = () => e(o);
+export {
+  o as TabsContext,
+  s as useTabsContext
+};
+//# sourceMappingURL=tabsContext.js.map

package/dist/headless/components/navigation/tabs/tabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsContext.js","sources":["../../../../../src/components/navigation/tabs/tabsContext.ts"],"sourcesContent":["import { type Accessor, createContext, useContext } from \"solid-js\";\n\nexport interface TabsContextValue {\n  value: Accessor<number>;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent: boolean;\n  /** Each Tab registers on setup to learn its index (in DOM order). */\n  registerTab: () => number;\n  setContentRef: (index: number, el: HTMLSpanElement) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue>();\n\nexport const useTabsContext = (): TabsContextValue | undefined => useContext(TabsContext);\n"],"names":["TabsContext","createContext","useTabsContext","useContext"],"mappings":";AAWO,MAAMA,IAAcC,EAAA,GAEdC,IAAiB,MAAoCC,EAAWH,CAAW;"}

package/dist/headless/index.js

@@ -0,0 +1,294 @@
+import { mergeRefs as o } from "./primitives/mergeRefs.js";
+import { createId as a } from "./primitives/createId.js";
+import { createControllableState as p } from "./primitives/createControllableState.js";
+import { Theme as f, createTheme as i } from "./primitives/createTheme.js";
+import { createFloating as s } from "./primitives/createFloating.js";
+import { createFocusTrap as c } from "./primitives/createFocusTrap.js";
+import { createCssTransition as C } from "./primitives/createCssTransition.js";
+import { createDropzone as g } from "./primitives/createDropzone.js";
+import { createVirtualList as d } from "./primitives/createVirtualList.js";
+import { createMaskedInput as M } from "./primitives/createMaskedInput.js";
+import { buildFloatingMiddleware as A, placements as D, resolvePlacement as P } from "./utils/floating.js";
+import { Accordion as L } from "./components/dataDisplay/accordion/accordion.js";
+import { AnimateHeight as F } from "./components/base/animateHeight/animateHeight.js";
+import { AppBar as E } from "./components/navigation/appBar/appBar.js";
+import { AppLayout as v } from "./components/layout/appLayout/appLayout.js";
+import { Avatar as w, AvatarGroup as H } from "./components/dataDisplay/avatar/avatar.js";
+import { Badge as O } from "./components/dataDisplay/badge/badge.js";
+import { BottomBar as G } from "./components/navigation/bottomBar/bottomBar.js";
+import { Breadcrumbs as N } from "./components/navigation/breadcrumbs/breadcrumbs.js";
+import { Button as X } from "./components/inputs/button/button.js";
+import { ButtonGroup as z } from "./components/inputs/buttonGroups/buttonGroup.js";
+import { CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES as q, CHAT_EXPAND_LAYOUTS as J, CHAT_MESSAGE_DELIVERY_STATUSES as K, CHAT_MESSAGE_STATUS_ICONS as Q, CHAT_MESSAGE_STATUS_LABELS as Z } from "./components/dataDisplay/chat/types.js";
+import { Card as ee } from "./components/dataDisplay/card/card.js";
+import { Carousel as oe } from "./components/dataDisplay/carousel/carousel.js";
+import { Chat as ae } from "./components/dataDisplay/chat/chat.js";
+import { ChatAttachmentImage as pe } from "./components/dataDisplay/chat/chatAttachmentImage.js";
+import { ChatAttachments as fe } from "./components/dataDisplay/chat/chatAttachments.js";
+import { ChatComposer as ne } from "./components/dataDisplay/chat/chatComposer.js";
+import { ChatHeader as le } from "./components/dataDisplay/chat/chatHeader.js";
+import { ChatIconButton as ue } from "./components/dataDisplay/chat/chatIconButton.js";
+import { ChatLayout as Te } from "./components/dataDisplay/chat/chatLayout.js";
+import { ChatMessageAvatar as he } from "./components/dataDisplay/chat/chatMessageAvatar.js";
+import { ChatMessageBubble as Se } from "./components/dataDisplay/chat/chatMessageBubble.js";
+import { ChatMessageIncoming as Ie } from "./components/dataDisplay/chat/chatMessageIncoming.js";
+import { ChatMessageItem as De } from "./components/dataDisplay/chat/chatMessageItem.js";
+import { ChatMessageOutgoing as be } from "./components/dataDisplay/chat/chatMessageOutgoing.js";
+import { ChatMessageSkeleton as ke } from "./components/dataDisplay/chat/chatMessageSkeleton.js";
+import { ChatMessageStatus as Be } from "./components/dataDisplay/chat/chatMessageStatus.js";
+import { ChatMessageSystem as _e } from "./components/dataDisplay/chat/chatMessageSystem.js";
+import { ChatMessages as ye } from "./components/dataDisplay/chat/chatMessages.js";
+import { ChatOverlayLayout as He } from "./components/dataDisplay/chat/chatOverlayLayout.js";
+import { ChatShell as Oe } from "./components/dataDisplay/chat/chatShell.js";
+import { Checkbox as Ge } from "./components/inputs/checkbox/checkbox.js";
+import { Chip as Ne } from "./components/dataDisplay/chip/chip.js";
+import { CircularProgress as Xe, ProgressIndicator as Ye } from "./components/feedBack/progressIndicator/progressIndicator.js";
+import { ClickAwayListener as je } from "./components/clickAwayListener/clickAwayListener.js";
+import { Column as Je, Container as Ke, Grid as Qe, Row as Ze } from "./components/layout/grid/grid.js";
+import { CountPreview as er } from "./components/inputs/fileDrop/countPreview.js";
+import { DEFAULT_TIME_FORMAT as or } from "./components/inputs/timePicker/timeUtils.js";
+import { DataPickerDays as ar } from "./components/inputs/datePicker/dataPickerDays.js";
+import { DataPickerHeader as pr } from "./components/inputs/datePicker/dataPickerHeader.js";
+import { DataPickerInput as fr } from "./components/inputs/datePicker/dataPickerInput.js";
+import { DatePicker as nr } from "./components/inputs/datePicker/datePicker.js";
+import { DatePickerActionLabel as lr } from "./components/inputs/datePicker/datePickerActionLabel.js";
+import { DatePickerDay as ur } from "./components/inputs/datePicker/datePickerDay.js";
+import { DatePickerIconButton as Tr } from "./components/inputs/datePicker/datePickerIconButton.js";
+import { DatePickerList as hr } from "./components/inputs/datePicker/datePickerList.js";
+import { DateTimePicker as Sr } from "./components/inputs/dateTimePicker/dateTimePicker.js";
+import { DateTimePickerInput as Ir } from "./components/inputs/dateTimePicker/dateTimePickerInput.js";
+import { Divider as Dr } from "./components/layout/divider/divider.js";
+import { DropdownMenu as br } from "./components/inputs/selectField/dropdownMenu.js";
+import { ExpansionPanel as kr } from "./components/dataDisplay/expansionPanel/expansionPanel.js";
+import { FileDrop as Br } from "./components/inputs/fileDrop/fileDrop.js";
+import { FileInput as _r } from "./components/inputs/fileInput/fileInput.js";
+import { FloatingButton as yr } from "./components/inputs/floatingButton/floatingButton.js";
+import { Icon as Hr } from "./components/base/icon/icon.js";
+import { ImagesList as Or } from "./components/dataDisplay/imagesList/imagesList.js";
+import { ImagesListItem as Gr } from "./components/dataDisplay/imagesList/imagesListItem/imagesListItem.js";
+import { ImagesListItemModal as Nr } from "./components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js";
+import { List as Xr } from "./components/dataDisplay/list/list.js";
+import { ListItem as zr } from "./components/dataDisplay/list/listItem.js";
+import { Menu as qr } from "./components/navigation/menu/menu.js";
+import { MenuContext as Kr, useMenuContext as Qr } from "./components/navigation/menu/menuContext.js";
+import { MenuDivider as $r } from "./components/navigation/menu/menuDivider.js";
+import { MenuFloating as ro, buildMenuFloatingMiddleware as oo } from "./components/navigation/menu/menuFloating.js";
+import { MenuItem as ao } from "./components/navigation/menu/menuItem.js";
+import { MenuItemIcon as po } from "./components/navigation/menu/menuItemIcon.js";
+import { MenuItemText as fo } from "./components/navigation/menu/menuItemText.js";
+import { MenuList as no } from "./components/navigation/menu/menuList.js";
+import { MenuSubmenu as lo } from "./components/navigation/menu/menuSubmenu.js";
+import { Message as uo, MessageContainer as Co } from "./components/feedBack/message/message.js";
+import { Modal as go } from "./components/feedBack/modal/modal.js";
+import { OpenView as So } from "./components/inputs/datePicker/openView.js";
+import { Page as Io } from "./components/layout/page/page.js";
+import { PageHeader as Do } from "./components/layout/pageHeader/pageHeader.js";
+import { Pagination as bo } from "./components/navigation/pagination/pagination.js";
+import { Preview as ko } from "./components/inputs/fileDrop/preview.js";
+import { PreviewWrapper as Bo } from "./components/inputs/fileDrop/previewWrapper.js";
+import { RadioButton as _o } from "./components/inputs/radioButton/radioButton.js";
+import { Rating as yo } from "./components/inputs/rating/rating.js";
+import { Ripple as Ho } from "./components/base/ripple/ripple.js";
+import { ScreenDivider as Oo } from "./components/layout/screenDivider/screenDivider.js";
+import { SelectField as Go } from "./components/inputs/selectField/selectField.js";
+import { Sheet as No } from "./components/layout/sheet/sheet.js";
+import { Sidebar as Xo } from "./components/navigation/sidebar/sidebar.js";
+import { Skeleton as zo } from "./components/feedBack/skeleton/skeleton.js";
+import { Slider as qo } from "./components/inputs/slider/slider.js";
+import { Snackbar as Ko, SnackbarProvider as Qo, useSnackbar as Zo } from "./components/feedBack/snackbar/snackbar.js";
+import { Stack as et } from "./components/layout/stack/stack.js";
+import { Stepper as ot } from "./components/navigation/stepper/stepper.js";
+import { Tab as at } from "./components/navigation/tabs/tab/tab.js";
+import { Table as pt } from "./components/dataDisplay/table/table.js";
+import { TableBody as ft } from "./components/dataDisplay/table/tableBody.js";
+import { TableCell as nt } from "./components/dataDisplay/table/tableCell.js";
+import { TableHead as lt } from "./components/dataDisplay/table/tableHead.js";
+import { TableHeadCell as ut } from "./components/dataDisplay/table/tableHeadCell.js";
+import { TablePagination as Tt } from "./components/dataDisplay/table/tablePagination/tablePagination.js";
+import { TableRow as ht } from "./components/dataDisplay/table/tableRow.js";
+import { Tabs as St } from "./components/navigation/tabs/tabs.js";
+import { TabsContext as It, useTabsContext as At } from "./components/navigation/tabs/tabsContext.js";
+import { TextField as Pt } from "./components/inputs/textField/textField.js";
+import { TextFieldAdornment as Lt } from "./components/inputs/textField/textFieldAdornment.js";
+import { TextFieldWrapper as Ft } from "./components/inputs/textField/textFieldWrapper.js";
+import { TimePicker as Et } from "./components/inputs/timePicker/timePicker.js";
+import { TimePickerColumns as vt } from "./components/inputs/timePicker/timePickerColumns.js";
+import { TimePickerInput as wt } from "./components/inputs/timePicker/timePickerInput.js";
+import { Toggle as Ut } from "./components/inputs/toggle/toggle.js";
+import { Tooltip as Rt } from "./components/feedBack/tooltip/tooltip.js";
+import { TreeView as Vt } from "./components/dataDisplay/treeView/treeView.js";
+import { Typography as Wt } from "./components/dataDisplay/typography/typography.js";
+import { createChatFileUpload as Yt, resolveChatFileUploadMaxFiles as zt } from "./components/dataDisplay/chat/useChatFileUpload.js";
+import { createChatInfiniteScroll as qt } from "./components/dataDisplay/chat/useChatInfiniteScroll.js";
+import { createChatStickToBottom as Kt, isScrolledToBottom as Qt, scrollChatToBottom as Zt } from "./components/dataDisplay/chat/useChatStickToBottom.js";
+import { createDateInput as ea } from "./components/inputs/datePicker/useDateInput.js";
+import { createDateTimeInput as oa, getCurrentDateTimeFormat as ta, getDisplayDateTime as aa } from "./components/inputs/dateTimePicker/useDateTimeInput.js";
+import { createTimeInput as pa } from "./components/inputs/timePicker/useTimeInput.js";
+import { formatChatTimestamp as fa, getChatLayoutActions as ia, isChatMessageDeliveryStatus as na, isImageAttachment as sa, resolveAllowedLayouts as la, resolveChatMessageStatusIcon as ca, resolveChatMessageStatusLabel as ua, shouldComposerNewlineOnEnter as Ca, shouldShowChatCloseButton as Ta } from "./components/dataDisplay/chat/utils.js";
+import { formatDateTimeByPattern as ha, isDateTimePatternMatch as da, parseDateTimeByPattern as Sa } from "./components/inputs/dateTimePicker/dateTimeFormat.js";
+import { isImageFile as Ia } from "./components/inputs/fileDrop/utils.js";
+export {
+  L as Accordion,
+  F as AnimateHeight,
+  E as AppBar,
+  v as AppLayout,
+  w as Avatar,
+  H as AvatarGroup,
+  O as Badge,
+  G as BottomBar,
+  N as Breadcrumbs,
+  X as Button,
+  z as ButtonGroup,
+  q as CHAT_DEFAULT_FILE_UPLOAD_MAX_FILES,
+  J as CHAT_EXPAND_LAYOUTS,
+  K as CHAT_MESSAGE_DELIVERY_STATUSES,
+  Q as CHAT_MESSAGE_STATUS_ICONS,
+  Z as CHAT_MESSAGE_STATUS_LABELS,
+  ee as Card,
+  oe as Carousel,
+  ae as Chat,
+  pe as ChatAttachmentImage,
+  fe as ChatAttachments,
+  ne as ChatComposer,
+  le as ChatHeader,
+  ue as ChatIconButton,
+  Te as ChatLayout,
+  he as ChatMessageAvatar,
+  Se as ChatMessageBubble,
+  Ie as ChatMessageIncoming,
+  De as ChatMessageItem,
+  be as ChatMessageOutgoing,
+  ke as ChatMessageSkeleton,
+  Be as ChatMessageStatus,
+  _e as ChatMessageSystem,
+  ye as ChatMessages,
+  He as ChatOverlayLayout,
+  Oe as ChatShell,
+  Ge as Checkbox,
+  Ne as Chip,
+  Xe as CircularProgress,
+  je as ClickAwayListener,
+  Je as Column,
+  Ke as Container,
+  er as CountPreview,
+  or as DEFAULT_TIME_FORMAT,
+  ar as DataPickerDays,
+  pr as DataPickerHeader,
+  fr as DataPickerInput,
+  nr as DatePicker,
+  lr as DatePickerActionLabel,
+  ur as DatePickerDay,
+  Tr as DatePickerIconButton,
+  hr as DatePickerList,
+  Sr as DateTimePicker,
+  Ir as DateTimePickerInput,
+  Dr as Divider,
+  br as DropdownMenu,
+  kr as ExpansionPanel,
+  Br as FileDrop,
+  _r as FileInput,
+  yr as FloatingButton,
+  Qe as Grid,
+  Hr as Icon,
+  Or as ImagesList,
+  Gr as ImagesListItem,
+  Nr as ImagesListItemModal,
+  Xr as List,
+  zr as ListItem,
+  qr as Menu,
+  Kr as MenuContext,
+  $r as MenuDivider,
+  ro as MenuFloating,
+  ao as MenuItem,
+  po as MenuItemIcon,
+  fo as MenuItemText,
+  no as MenuList,
+  lo as MenuSubmenu,
+  uo as Message,
+  Co as MessageContainer,
+  go as Modal,
+  So as OpenView,
+  Io as Page,
+  Do as PageHeader,
+  bo as Pagination,
+  ko as Preview,
+  Bo as PreviewWrapper,
+  Ye as ProgressIndicator,
+  _o as RadioButton,
+  yo as Rating,
+  Ho as Ripple,
+  Ze as Row,
+  Oo as ScreenDivider,
+  Go as SelectField,
+  No as Sheet,
+  Xo as Sidebar,
+  zo as Skeleton,
+  qo as Slider,
+  Ko as Snackbar,
+  Qo as SnackbarProvider,
+  et as Stack,
+  ot as Stepper,
+  at as Tab,
+  pt as Table,
+  ft as TableBody,
+  nt as TableCell,
+  lt as TableHead,
+  ut as TableHeadCell,
+  Tt as TablePagination,
+  ht as TableRow,
+  St as Tabs,
+  It as TabsContext,
+  Pt as TextField,
+  Lt as TextFieldAdornment,
+  Ft as TextFieldWrapper,
+  f as Theme,
+  Et as TimePicker,
+  vt as TimePickerColumns,
+  wt as TimePickerInput,
+  Ut as Toggle,
+  Rt as Tooltip,
+  Vt as TreeView,
+  Wt as Typography,
+  A as buildFloatingMiddleware,
+  oo as buildMenuFloatingMiddleware,
+  Yt as createChatFileUpload,
+  qt as createChatInfiniteScroll,
+  Kt as createChatStickToBottom,
+  p as createControllableState,
+  C as createCssTransition,
+  ea as createDateInput,
+  oa as createDateTimeInput,
+  g as createDropzone,
+  s as createFloating,
+  c as createFocusTrap,
+  a as createId,
+  M as createMaskedInput,
+  i as createTheme,
+  pa as createTimeInput,
+  d as createVirtualList,
+  fa as formatChatTimestamp,
+  ha as formatDateTimeByPattern,
+  ia as getChatLayoutActions,
+  ta as getCurrentDateTimeFormat,
+  aa as getDisplayDateTime,
+  na as isChatMessageDeliveryStatus,
+  da as isDateTimePatternMatch,
+  sa as isImageAttachment,
+  Ia as isImageFile,
+  Qt as isScrolledToBottom,
+  o as mergeRefs,
+  Sa as parseDateTimeByPattern,
+  D as placements,
+  la as resolveAllowedLayouts,
+  zt as resolveChatFileUploadMaxFiles,
+  ca as resolveChatMessageStatusIcon,
+  ua as resolveChatMessageStatusLabel,
+  P as resolvePlacement,
+  Zt as scrollChatToBottom,
+  Ca as shouldComposerNewlineOnEnter,
+  Ta as shouldShowChatCloseButton,
+  Qr as useMenuContext,
+  Zo as useSnackbar,
+  At as useTabsContext
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/index.js.map

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

package/dist/headless/primitives/callHandler.js

@@ -0,0 +1,7 @@
+function o(f, i) {
+  f && (typeof f == "function" ? f(i) : f[0](f[1], i));
+}
+export {
+  o as callHandler
+};
+//# sourceMappingURL=callHandler.js.map

package/dist/headless/primitives/callHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callHandler.js","sources":["../../../src/primitives/callHandler.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\n\n/**\n * Invoke a Solid `EventHandlerUnion` (a function, or a `[handler, data]` bound\n * tuple) uniformly. Used when a component needs to call a user-supplied event\n * handler from inside its own wrapper handler.\n */\nexport function callHandler<T, E extends Event>(\n  handler: JSX.EventHandlerUnion<T, E> | undefined,\n  event: E & { currentTarget: T; target: Element }\n): void {\n  if (!handler) return;\n  if (typeof handler === \"function\") {\n    handler(event);\n  } else {\n    handler[0](handler[1], event);\n  }\n}\n"],"names":["callHandler","handler","event"],"mappings":"AAOO,SAASA,EACdC,GACAC,GACM;AACN,EAAKD,MACD,OAAOA,KAAY,aACrBA,EAAQC,CAAK,IAEbD,EAAQ,CAAC,EAAEA,EAAQ,CAAC,GAAGC,CAAK;AAEhC;"}

package/dist/headless/primitives/createControllableState.js

@@ -0,0 +1,12 @@
+import { createSignal as a } from "solid-js";
+function f(e) {
+  const [c, r] = a(e.defaultValue), o = () => e.value?.() !== void 0, n = () => o() ? e.value() : c();
+  return [n, (t) => {
+    const u = n(), l = typeof t == "function" ? t(u) : t;
+    o() || r(() => l), e.onChange?.(l);
+  }];
+}
+export {
+  f as createControllableState
+};
+//# sourceMappingURL=createControllableState.js.map

package/dist/headless/primitives/createControllableState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createControllableState.js","sources":["../../../src/primitives/createControllableState.ts"],"sourcesContent":["import { type Accessor, createSignal } from \"solid-js\";\n\ntype Updater<T> = T | ((prev: T) => T);\n\nexport interface CreateControllableStateParams<T> {\n  /** Reactive controlled value. When it resolves to a non-undefined value the\n   *  state is controlled: the returned accessor mirrors it and the setter only\n   *  calls `onChange`. */\n  value?: Accessor<T | undefined> | undefined;\n  /** Initial value for uncontrolled mode. */\n  defaultValue: T;\n  /** Called whenever the value should change (both modes). */\n  onChange?: ((next: T) => void) | undefined;\n}\n\n/**\n * Controlled/uncontrolled state helper — the Solid analogue of summer-ui's\n * useControllableState. Controlled-ness is evaluated reactively so a component\n * can transition between modes if its `value` prop appears/disappears.\n */\nexport function createControllableState<T>(\n  params: CreateControllableStateParams<T>\n): [Accessor<T>, (next: Updater<T>) => void] {\n  const [internal, setInternal] = createSignal<T>(params.defaultValue);\n\n  const isControlled = (): boolean => params.value?.() !== undefined;\n  const value: Accessor<T> = () => (isControlled() ? (params.value!() as T) : internal());\n\n  const setValue = (next: Updater<T>): void => {\n    const prev = value();\n    const resolved = typeof next === \"function\" ? (next as (p: T) => T)(prev) : next;\n    if (!isControlled()) {\n      setInternal(() => resolved);\n    }\n    params.onChange?.(resolved);\n  };\n\n  return [value, setValue];\n}\n"],"names":["createControllableState","params","internal","setInternal","createSignal","isControlled","value","next","prev","resolved"],"mappings":";AAoBO,SAASA,EACdC,GAC2C;AAC3C,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAgBH,EAAO,YAAY,GAE7DI,IAAe,MAAeJ,EAAO,QAAA,MAAc,QACnDK,IAAqB,MAAOD,EAAA,IAAkBJ,EAAO,MAAA,IAAiBC,EAAA;AAW5E,SAAO,CAACI,GATS,CAACC,MAA2B;AAC3C,UAAMC,IAAOF,EAAA,GACPG,IAAW,OAAOF,KAAS,aAAcA,EAAqBC,CAAI,IAAID;AAC5E,IAAKF,OACHF,EAAY,MAAMM,CAAQ,GAE5BR,EAAO,WAAWQ,CAAQ;AAAA,EAC5B,CAEuB;AACzB;"}

package/dist/headless/primitives/createCssTransition.js

@@ -0,0 +1,40 @@
+import { createSignal as v, createEffect as x, onCleanup as D } from "solid-js";
+const F = (...t) => t.filter(Boolean).join(" ");
+function C(t) {
+  const [l, m] = v(t.in()), [A, i] = v("");
+  let o = !0, r, n, s;
+  const f = () => {
+    r !== void 0 && clearTimeout(r), n !== void 0 && cancelAnimationFrame(n), s !== void 0 && cancelAnimationFrame(s), r = void 0, n = void 0, s = void 0;
+  }, u = (c, e, a, d, p) => {
+    i(c ?? ""), n = requestAnimationFrame(() => {
+      s = requestAnimationFrame(() => i(F(c, e)));
+    }), r = setTimeout(() => {
+      p ? p() : i(a ?? "");
+    }, d);
+  };
+  return x(() => {
+    const c = t.in();
+    f();
+    const e = t.classNames;
+    if (c)
+      if (m(!0), o && !t.appear)
+        i(e.enterDone ?? "");
+      else {
+        const a = o && !!t.appear;
+        u(
+          a ? e.appear : e.enter,
+          a ? e.appearActive : e.enterActive,
+          a ? e.appearDone ?? e.enterDone : e.enterDone,
+          a ? t.timeout.appear ?? t.timeout.enter : t.timeout.enter
+        );
+      }
+    else l() && u(e.exit, e.exitActive, e.exitDone, t.timeout.exit, () => {
+      m(!1), i("");
+    });
+    o = !1;
+  }), D(f), { mounted: l, classes: A };
+}
+export {
+  C as createCssTransition
+};
+//# sourceMappingURL=createCssTransition.js.map

package/dist/headless/primitives/createCssTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCssTransition.js","sources":["../../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","clearTimers","run","start","active","done","duration","onEnd","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC;AAEJ,QAAMC,IAAc,MAAY;AAC9B,IAAIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEME,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,IAAAX,EAAWO,KAAS,EAAE,GACtBJ,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAMJ,EAAWR,EAAKe,GAAOC,CAAM,CAAC,CAAC;AAAA,IACpE,CAAC,GACDN,IAAQ,WAAW,MAAM;AACvB,MAAIS,IAAOA,EAAA,IACNX,EAAWS,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAE,EAAa,MAAM;AACjB,UAAMC,IAAOlB,EAAQ,GAAA;AACrB,IAAAU,EAAA;AACA,UAAMS,IAAMnB,EAAQ;AAEpB,QAAIkB;AAEF,UADAhB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWc,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYd,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAW;AAAA,UACES,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAapB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTU,EAAIQ,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUnB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDe,EAAUX,CAAW,GAEd,EAAE,SAAAT,GAAS,SAAAG,EAAA;AACpB;"}

package/dist/headless/primitives/createDropzone.js

@@ -0,0 +1,36 @@
+import { createSignal as c } from "solid-js";
+function u(e) {
+  if (e)
+    return typeof e == "string" ? e : Object.entries(e).flatMap(([t, a]) => [t, ...a]).join(",");
+}
+function g(e = {}) {
+  let t;
+  const [a, i] = c(!1), n = () => {
+    e.disabled || t?.click();
+  }, f = (r, s) => {
+    if (!r) return;
+    let l = Array.from(r);
+    e.maxFiles && e.maxFiles > 0 && (l = l.slice(0, e.maxFiles)), e.onDrop?.(l, s), e.onDropAccepted?.(l, s);
+  };
+  return { getRootProps: () => ({
+    onClick: () => n(),
+    onDragOver: (r) => {
+      r.preventDefault(), e.disabled || i(!0);
+    },
+    onDragLeave: () => i(!1),
+    onDrop: (r) => {
+      r.preventDefault(), i(!1), e.disabled || f(r.dataTransfer?.files ?? null, r);
+    }
+  }), getInputProps: () => ({
+    type: "file",
+    multiple: e.multiple,
+    accept: u(e.accept),
+    disabled: e.disabled,
+    style: { display: "none" },
+    onChange: (r) => f(r.currentTarget.files, r)
+  }), inputRef: (r) => t = r, isDragActive: a, open: n };
+}
+export {
+  g as createDropzone
+};
+//# sourceMappingURL=createDropzone.js.map

package/dist/headless/primitives/createDropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDropzone.js","sources":["../../../src/primitives/createDropzone.ts"],"sourcesContent":["import { type Accessor, type JSX, createSignal } from \"solid-js\";\n\nexport interface DropzoneOptions {\n  /** Record of mime → extensions, or a raw accept string. */\n  accept?: Record<string, string[]> | string | undefined;\n  multiple?: boolean | undefined;\n  maxFiles?: number | undefined;\n  disabled?: boolean | undefined;\n  onDrop?: (files: File[], event: Event) => void;\n  onDropAccepted?: (files: File[], event: Event) => void;\n}\n\nexport interface DropzoneRootProps {\n  onClick: () => void;\n  onDragOver: (event: DragEvent) => void;\n  onDragLeave: () => void;\n  onDrop: (event: DragEvent) => void;\n}\n\nexport interface DropzoneInputProps {\n  type: \"file\";\n  multiple: boolean | undefined;\n  accept: string | undefined;\n  disabled: boolean | undefined;\n  style: JSX.CSSProperties;\n  onChange: (event: Event & { currentTarget: HTMLInputElement; target: Element }) => void;\n}\n\nexport interface DropzoneState {\n  getRootProps: () => DropzoneRootProps;\n  getInputProps: () => DropzoneInputProps;\n  inputRef: (el: HTMLInputElement) => void;\n  isDragActive: Accessor<boolean>;\n  open: () => void;\n}\n\nfunction acceptToString(accept: DropzoneOptions[\"accept\"]): string | undefined {\n  if (!accept) return undefined;\n  if (typeof accept === \"string\") return accept;\n  return Object.entries(accept)\n    .flatMap(([mime, exts]) => [mime, ...exts])\n    .join(\",\");\n}\n\n/**\n * Dependency-free file dropzone — the Solid replacement for react-dropzone's\n * useDropzone. Provides root/input prop getters, drag-active state and a\n * programmatic `open()`.\n */\nexport function createDropzone(options: DropzoneOptions = {}): DropzoneState {\n  let inputEl: HTMLInputElement | undefined;\n  const [isDragActive, setIsDragActive] = createSignal(false);\n\n  const open = (): void => {\n    if (!options.disabled) inputEl?.click();\n  };\n\n  const handleFiles = (list: FileList | null, event: Event): void => {\n    if (!list) return;\n    let files = Array.from(list);\n    if (options.maxFiles && options.maxFiles > 0) files = files.slice(0, options.maxFiles);\n    options.onDrop?.(files, event);\n    options.onDropAccepted?.(files, event);\n  };\n\n  const getRootProps = (): DropzoneRootProps => ({\n    onClick: () => open(),\n    onDragOver: (event) => {\n      event.preventDefault();\n      if (!options.disabled) setIsDragActive(true);\n    },\n    onDragLeave: () => setIsDragActive(false),\n    onDrop: (event) => {\n      event.preventDefault();\n      setIsDragActive(false);\n      if (!options.disabled) handleFiles(event.dataTransfer?.files ?? null, event);\n    },\n  });\n\n  const getInputProps = (): DropzoneInputProps => ({\n    type: \"file\",\n    multiple: options.multiple,\n    accept: acceptToString(options.accept),\n    disabled: options.disabled,\n    style: { display: \"none\" },\n    onChange: (event) => handleFiles(event.currentTarget.files, event),\n  });\n\n  return { getRootProps, getInputProps, inputRef: (el) => (inputEl = el), isDragActive, open };\n}\n"],"names":["acceptToString","accept","mime","exts","createDropzone","options","inputEl","isDragActive","setIsDragActive","createSignal","open","handleFiles","list","event","files","el"],"mappings":";AAoCA,SAASA,EAAeC,GAAuD;AAC7E,MAAKA;AACL,WAAI,OAAOA,KAAW,WAAiBA,IAChC,OAAO,QAAQA,CAAM,EACzB,QAAQ,CAAC,CAACC,GAAMC,CAAI,MAAM,CAACD,GAAM,GAAGC,CAAI,CAAC,EACzC,KAAK,GAAG;AACb;AAOO,SAASC,EAAeC,IAA2B,IAAmB;AAC3E,MAAIC;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAa,EAAK,GAEpDC,IAAO,MAAY;AACvB,IAAKL,EAAQ,YAAUC,GAAS,MAAA;AAAA,EAClC,GAEMK,IAAc,CAACC,GAAuBC,MAAuB;AACjE,QAAI,CAACD,EAAM;AACX,QAAIE,IAAQ,MAAM,KAAKF,CAAI;AAC3B,IAAIP,EAAQ,YAAYA,EAAQ,WAAW,UAAWS,EAAM,MAAM,GAAGT,EAAQ,QAAQ,IACrFA,EAAQ,SAASS,GAAOD,CAAK,GAC7BR,EAAQ,iBAAiBS,GAAOD,CAAK;AAAA,EACvC;AAyBA,SAAO,EAAE,cAvBY,OAA0B;AAAA,IAC7C,SAAS,MAAMH,EAAA;AAAA,IACf,YAAY,CAACG,MAAU;AACrB,MAAAA,EAAM,eAAA,GACDR,EAAQ,YAAUG,EAAgB,EAAI;AAAA,IAC7C;AAAA,IACA,aAAa,MAAMA,EAAgB,EAAK;AAAA,IACxC,QAAQ,CAACK,MAAU;AACjB,MAAAA,EAAM,eAAA,GACNL,EAAgB,EAAK,GAChBH,EAAQ,YAAUM,EAAYE,EAAM,cAAc,SAAS,MAAMA,CAAK;AAAA,IAC7E;AAAA,EAAA,IAYqB,eATD,OAA2B;AAAA,IAC/C,MAAM;AAAA,IACN,UAAUR,EAAQ;AAAA,IAClB,QAAQL,EAAeK,EAAQ,MAAM;AAAA,IACrC,UAAUA,EAAQ;AAAA,IAClB,OAAO,EAAE,SAAS,OAAA;AAAA,IAClB,UAAU,CAACQ,MAAUF,EAAYE,EAAM,cAAc,OAAOA,CAAK;AAAA,EAAA,IAG7B,UAAU,CAACE,MAAQT,IAAUS,GAAK,cAAAR,GAAc,MAAAG,EAAA;AACxF;"}

package/dist/headless/primitives/createFloating.js

@@ -0,0 +1,31 @@
+import { autoUpdate as b, computePosition as h } from "@floating-ui/dom";
+import { createSignal as a, createEffect as w, onCleanup as S } from "solid-js";
+function $(t = {}) {
+  const s = t.strategy ?? "absolute", [o, d] = a(null), [l, i] = a(null), [f, p] = a(0), [m, g] = a(0), [y, x] = a(t.placement?.() ?? "bottom"), u = () => {
+    const e = o(), n = l();
+    if (!e || !n) return;
+    const c = (t.middleware?.() ?? []).filter(Boolean);
+    h(e, n, {
+      placement: t.placement?.() ?? "bottom",
+      strategy: s,
+      middleware: c
+    }).then((r) => {
+      p(r.x), g(r.y), x(r.placement);
+    });
+  };
+  return w(() => {
+    const e = o(), n = l();
+    if (t.placement?.(), t.middleware?.(), !e || !n) return;
+    const c = b(e, n, u);
+    S(c);
+  }), { setReference: d, setFloating: i, reference: o, floating: l, x: f, y: m, placement: y, floatingStyles: () => ({
+    position: s,
+    top: "0",
+    left: "0",
+    transform: `translate(${Math.round(f())}px, ${Math.round(m())}px)`
+  }), update: u };
+}
+export {
+  $ as createFloating
+};
+//# sourceMappingURL=createFloating.js.map