@jbpark/ui-kit 10.0.2 → 10.1.0

package/dist/core/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":["Tabs","TabsPrimitive"],"sources":["../../src/core/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs';\n\nimport { cn } from '@repo/ui/utils';\n\ntype RootProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'className'\n> & {\n  className?: string;\n};\ntype ListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'className'\n> & {\n  className?: string;\n};\ntype TabProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Tab>,\n  'className'\n> & {\n  className?: string;\n};\ntype PanelProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Panel>,\n  'className'\n> & {\n  className?: string;\n};\n\nfunction Tabs({ className, ...props }: RootProps) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      className={cn(\n        'flex flex-col data-[orientation=vertical]:flex-row',\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsList({ className, ...props }: ListProps) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      className={cn(\n        `border-border flex shrink-0 border-b\n        data-[orientation=vertical]:flex-col\n        data-[orientation=vertical]:border-r\n        data-[orientation=vertical]:border-b-0`,\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTab({ className, ...props }: TabProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-tab\"\n      className={cn(\n        `text-muted-foreground hover:text-foreground focus-visible:ring-ring/50\n        data-active:border-primary data-active:text-foreground relative -mb-px\n        inline-flex items-center justify-center gap-2 border-b-2\n        border-transparent px-4 py-2 text-sm font-medium whitespace-nowrap\n        transition-colors outline-none focus-visible:rounded-sm\n        focus-visible:ring-[3px] data-disabled:pointer-events-none\n        data-disabled:opacity-50 data-[orientation=vertical]:-mr-px\n        data-[orientation=vertical]:mb-0\n        data-[orientation=vertical]:justify-start\n        data-[orientation=vertical]:border-r-2\n        data-[orientation=vertical]:border-b-0\n        data-[orientation=vertical]:text-left`,\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsPanel({ className, ...props }: PanelProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-panel\"\n      className={cn(\n        `focus-visible:ring-ring/50 min-w-0 flex-1 p-4 outline-none\n        focus-visible:ring-[3px]`,\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTab, TabsPanel };\n"],"mappings":";;;;;;;;;;;;AA+BA,SAASA,OAAK,EAAE,WAAW,GAAG,SAAoB;CAChD,OACE,oBAACC,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GACT,sDACA,SAEF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAoB;CACpD,OACE,oBAACA,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GACT;;;iDAIA,SAEF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAmB;CAClD,OACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACV,WAAW,GACT;;;;;;;;;;;gDAYA,SAEF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqB;CACtD,OACE,oBAACA,KAAc,OAAf;EACE,aAAU;EACV,WAAW,GACT;mCAEA,SAEF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/core/tooltip.d.mts

@@ -0,0 +1,2 @@
+import "react";
+import { Tooltip } from "@base-ui/react/tooltip";

package/dist/core/tooltip.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
+import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/core/tooltip.tsx
+var tooltip_exports = /* @__PURE__ */ __exportAll({
+	Tooltip: () => Tooltip$1,
+	TooltipContent: () => TooltipContent,
+	TooltipTrigger: () => TooltipTrigger
+});
+const Tooltip$1 = Tooltip.Root;
+const TooltipTrigger = Tooltip.Trigger;
+function TooltipContent({ className, side = "top", align = "center", sideOffset = 8, container, ...props }) {
+	const { getContainer } = useConfig();
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: container ?? getContainer(),
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			align,
+			sideOffset,
+			className: OVERLAY_LAYER,
+			children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+				"data-slot": "tooltip-content",
+				className: cn(`bg-popover text-popover-foreground max-w-xs
+            origin-(--transform-origin) rounded-md border px-2 py-1 text-xs
+            shadow-md transition-[opacity,transform] duration-150
+            data-ending-style:scale-95 data-ending-style:opacity-0
+            data-starting-style:scale-95 data-starting-style:opacity-0`, className),
+				...props
+			})
+		})
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipTrigger, tooltip_exports };
+
+//# sourceMappingURL=tooltip.mjs.map

package/dist/core/tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.mjs","names":["Tooltip","TooltipPrimitive"],"sources":["../../src/core/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\ntype TooltipContentProps = React.ComponentProps<\n  typeof TooltipPrimitive.Popup\n> & {\n  side?: TooltipPrimitive.Positioner.Props['side'];\n  align?: TooltipPrimitive.Positioner.Props['align'];\n  sideOffset?: number;\n  container?: HTMLElement;\n};\n\nfunction TooltipContent({\n  className,\n  side = 'top',\n  align = 'center',\n  sideOffset = 8,\n  container,\n  ...props\n}: TooltipContentProps) {\n  const { getContainer } = useConfig();\n\n  return (\n    <TooltipPrimitive.Portal container={container ?? getContainer()}>\n      <TooltipPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className={OVERLAY_LAYER}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            `bg-popover text-popover-foreground max-w-xs\n            origin-(--transform-origin) rounded-md border px-2 py-1 text-xs\n            shadow-md transition-[opacity,transform] duration-150\n            data-ending-style:scale-95 data-ending-style:opacity-0\n            data-starting-style:scale-95 data-starting-style:opacity-0`,\n            className,\n            //\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipContent, TooltipTrigger };\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAMA,YAAUC,QAAiB;AACjC,MAAM,iBAAiBA,QAAiB;AAWxC,SAAS,eAAe,EACtB,WACA,OAAO,OACP,QAAQ,UACR,aAAa,GACb,WACA,GAAG,SACmB;CACtB,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAACA,QAAiB,QAAlB;EAAyB,WAAW,aAAa,aAAa;EAC5D,UAAA,oBAACA,QAAiB,YAAlB;GACQ;GACC;GACK;GACZ,WAAW;GAEX,UAAA,oBAACA,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT;;;;yEAKA,SAEF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B"}

package/dist/index.d.mts

@@ -1,16 +1,19 @@
 import Button from "./Button.mjs";
 import Tag from "./Tag.mjs";
 import Typography from "./Typography.mjs";
-import Card, { Props } from "./Card.mjs";
-import Menu, { Props as Props$14 } from "./components/molecules/menu/menu.mjs";
-import { Props as Props$18 } from "./components/molecules/reveals/reveals.mjs";
+import Breadcrumb, { Props } from "./Breadcrumb.mjs";
+import Card, { Props as Props$1 } from "./Card.mjs";
+import Menu, { Props as Props$15 } from "./components/molecules/menu/menu.mjs";
+import Pagination, { Props as Props$18 } from "./Pagination.mjs";
+import { Props as Props$20 } from "./components/molecules/reveals/reveals.mjs";
 import Reveals from "./Reveals.mjs";
-import Space, { Props as Props$21 } from "./Space.mjs";
-import { Props as Props$5 } from "./components/templates/layout/content.mjs";
-import { Props as Props$9 } from "./components/templates/layout/footer.mjs";
-import { Props as Props$10 } from "./components/templates/layout/header.mjs";
-import { Props as Props$11 } from "./components/templates/layout/layout.mjs";
-import { Props as Props$20 } from "./components/templates/layout/sider.mjs";
+import Space, { Props as Props$23 } from "./Space.mjs";
+import Table, { Column, PaginationOptions, Props as Props$26 } from "./Table.mjs";
+import { Props as Props$6 } from "./components/templates/layout/content.mjs";
+import { Props as Props$10 } from "./components/templates/layout/footer.mjs";
+import { Props as Props$11 } from "./components/templates/layout/header.mjs";
+import { Props as Props$12 } from "./components/templates/layout/layout.mjs";
+import { Props as Props$22 } from "./components/templates/layout/sider.mjs";
 import Layout from "./Layout.mjs";
 import Checkbox from "./components/atoms/checkbox/index.mjs";
 import ColorPicker from "./components/atoms/color-picker.mjs";
@@ -27,31 +30,33 @@ import Slider from "./components/atoms/slider/slider.mjs";
 import Spin from "./components/atoms/spin.mjs";
 import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
 import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
-import Config, { Props as Props$3 } from "./providers/config/config.mjs";
+import Config, { Props as Props$4 } from "./providers/config/config.mjs";
 import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
 import Switch from "./components/atoms/switch.mjs";
+import Tooltip from "./components/atoms/tooltip.mjs";
 import "./components/atoms/index.mjs";
-import Collapse, { Props as Props$2 } from "./components/molecules/collapse.mjs";
-import Dropdown, { Props as Props$7 } from "./components/molecules/dropdown.mjs";
-import { Props as Props$13 } from "./components/molecules/marquees/marquees.mjs";
+import Collapse, { Props as Props$3 } from "./components/molecules/collapse.mjs";
+import Dropdown, { Props as Props$8 } from "./components/molecules/dropdown.mjs";
+import { Props as Props$14 } from "./components/molecules/marquees/marquees.mjs";
 import Marquees from "./components/molecules/marquees/index.mjs";
-import { Props as Props$22 } from "./components/molecules/splitter/splitter.mjs";
+import { Props as Props$24 } from "./components/molecules/splitter/splitter.mjs";
 import Splitter from "./components/molecules/splitter/index.mjs";
-import Upload, { Props as Props$24, UploadFile } from "./components/molecules/upload.mjs";
+import Tabs, { Props as Props$27 } from "./components/molecules/tabs.mjs";
+import Upload, { Props as Props$28, UploadFile } from "./components/molecules/upload.mjs";
 import "./components/molecules/index.mjs";
-import Drawer, { Props as Props$6 } from "./components/organisms/drawer.mjs";
-import { Props as Props$12 } from "./components/organisms/list/list.mjs";
+import Drawer, { Props as Props$7 } from "./components/organisms/drawer.mjs";
+import { Props as Props$13 } from "./components/organisms/list/list.mjs";
 import List from "./components/organisms/list/index.mjs";
-import Modal, { Props as Props$15 } from "./components/organisms/modal.mjs";
-import { Props as Props$23 } from "./components/organisms/swiper/swiper.mjs";
+import Modal, { Props as Props$16 } from "./components/organisms/modal.mjs";
+import { Props as Props$25 } from "./components/organisms/swiper/swiper.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
 import Toast, { ToastOptions as StaticProps } from "./components/organisms/toast.mjs";
 import "./components/organisms/index.mjs";
-import Container, { Props as Props$4 } from "./components/templates/container.mjs";
-import Empty, { Props as Props$8 } from "./components/templates/empty.mjs";
-import Result, { Props as Props$17 } from "./components/templates/result.mjs";
-import PageHeader, { Props as Props$16 } from "./components/templates/page-header.mjs";
-import Row, { Props as Props$19 } from "./components/templates/grid/row.mjs";
-import Col, { Props as Props$1 } from "./components/templates/grid/col.mjs";
+import Container, { Props as Props$5 } from "./components/templates/container.mjs";
+import Empty, { Props as Props$9 } from "./components/templates/empty.mjs";
+import Result, { Props as Props$19 } from "./components/templates/result.mjs";
+import PageHeader, { Props as Props$17 } from "./components/templates/page-header.mjs";
+import Row, { Props as Props$21 } from "./components/templates/grid/row.mjs";
+import Col, { Props as Props$2 } from "./components/templates/grid/col.mjs";
 import "./components/templates/index.mjs";
-export { Button, Card, type Props as CardProps, Checkbox, Col, type Props$1 as ColProps, Collapse, type Props$2 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$3 as ConfigProps, ConfigSnapshotProvider, Container, type Props$4 as ContainerProps, type Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$6 as DrawerProps, Dropdown, type Props$7 as DropdownProps, Empty, type Props$8 as EmptyProps, FloatButton, type Props$9 as FooterProps, type Props$10 as HeaderProps, Input, Layout, type Props$11 as LayoutProps, List, type Props$12 as ListProps, type Locale, Marquees, type Props$13 as MarqueesProps, Menu, type Props$14 as MenuProps, Modal, type Props$15 as ModalProps, PageHeader, type Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, type Props$17 as ResultProps, Reveals, type Props$18 as RevealsProps, RichTextEditor, Row, type Props$19 as RowProps, Select, type Props$20 as SiderProps, Skeleton, Slider, Space, type Props$21 as SpaceProps, Spin, Splitter, type Props$22 as SplitterProps, Swiper, type Props$23 as SwiperProps, Switch, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Typography, Upload, type UploadFile, type Props$24 as UploadProps, getRootConfigValue, useConfig };
+export { Breadcrumb, type Props as BreadcrumbProps, Button, Card, type Props$1 as CardProps, Checkbox, Col, type Props$2 as ColProps, Collapse, type Props$3 as CollapseProps, ColorPicker, type ComponentSize, Config, type Props$4 as ConfigProps, ConfigSnapshotProvider, Container, type Props$5 as ContainerProps, type Props$6 as ContentProps, DEFAULT_LOCALE, DatePicker, type DefaultProps, Drawer, type Props$7 as DrawerProps, Dropdown, type Props$8 as DropdownProps, Empty, type Props$9 as EmptyProps, FloatButton, type Props$10 as FooterProps, type Props$11 as HeaderProps, Input, Layout, type Props$12 as LayoutProps, List, type Props$13 as ListProps, type Locale, Marquees, type Props$14 as MarqueesProps, Menu, type Props$15 as MenuProps, Modal, type Props$16 as ModalProps, PageHeader, type Props$17 as PageHeaderProps, Pagination, type Props$18 as PaginationProps, Popover, Progress, Radio, Result, type Props$19 as ResultProps, Reveals, type Props$20 as RevealsProps, RichTextEditor, Row, type Props$21 as RowProps, Select, type Props$22 as SiderProps, Skeleton, Slider, Space, type Props$23 as SpaceProps, Spin, Splitter, type Props$24 as SplitterProps, Swiper, type Props$25 as SwiperProps, Switch, Table, type Column as TableColumn, type PaginationOptions as TablePaginationOptions, type Props$26 as TableProps, Tabs, type Props$27 as TabsProps, Tag, type ThemeConfig, type ThemeToken, Toast, type StaticProps as ToastOptions, Tooltip, Typography, Upload, type UploadFile, type Props$28 as UploadProps, getRootConfigValue, useConfig };

package/dist/index.mjs

@@ -19,25 +19,30 @@ import slider_default from "./components/atoms/slider/index.mjs";
 import Spin from "./components/atoms/spin.mjs";
 import Switch from "./components/atoms/switch.mjs";
 import Tag from "./Tag.mjs";
+import Tooltip from "./components/atoms/tooltip.mjs";
 import Card from "./Card.mjs";
+import Breadcrumb from "./Breadcrumb.mjs";
 import Collapse from "./components/molecules/collapse.mjs";
 import Menu from "./components/molecules/menu/menu.mjs";
 import Dropdown from "./components/molecules/dropdown.mjs";
 import Marquees from "./components/molecules/marquees/index.mjs";
+import Pagination from "./Pagination.mjs";
 import Reveals from "./Reveals.mjs";
 import Splitter from "./components/molecules/splitter/index.mjs";
 import Space from "./Space.mjs";
+import Tabs from "./components/molecules/tabs.mjs";
 import Upload from "./components/molecules/upload.mjs";
 import Drawer from "./components/organisms/drawer.mjs";
 import List from "./components/organisms/list/index.mjs";
 import Modal from "./components/organisms/modal.mjs";
 import Swiper from "./components/organisms/swiper/index.mjs";
+import Empty from "./components/templates/empty.mjs";
+import Table from "./Table.mjs";
 import Toast from "./components/organisms/toast.mjs";
 import Layout from "./Layout.mjs";
 import Container from "./components/templates/container.mjs";
-import Empty from "./components/templates/empty.mjs";
 import Result from "./components/templates/result.mjs";
 import PageHeader from "./components/templates/page-header.mjs";
 import Row from "./components/templates/grid/row.mjs";
 import Col from "./components/templates/grid/col.mjs";
-export { Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Popover, Progress, Radio, Result, Reveals, RichTextEditor, Row, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Swiper, Switch, Tag, Toast, Typography, Upload, getRootConfigValue, useConfig };
+export { Breadcrumb, Button, Card, Checkbox, Col, Collapse, ColorPicker, Config, ConfigSnapshotProvider, Container, DEFAULT_LOCALE, DatePicker, Drawer, Dropdown, Empty, FloatButton, Input, Layout, List, Marquees, Menu, Modal, PageHeader, Pagination, Popover, Progress, Radio, Result, Reveals, RichTextEditor, Row, Select, Skeleton, slider_default as Slider, Space, Spin, Splitter, Swiper, Switch, Table, Tabs, Tag, Toast, Tooltip, Typography, Upload, getRootConfigValue, useConfig };

package/dist/lib/z-layers.mjs

@@ -21,6 +21,27 @@
 * under the navbar. 1000 clears Infima's whole scale and sits in the band every
 * major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).
 *
+* **Why `[data-ui-root]` isolation doesn't replace this (#411).** `globals.css`
+* gives a root marked `data-ui-root` `isolation: isolate`, so Base UI portals,
+* appended to `body` beside that root, paint above everything inside it at any
+* z-index. Measured in Chromium with this constant neutralised: a right Drawer
+* clears a `z-index: 200` navbar when the navbar lives *inside* the marked
+* root, but not when the root isn't marked, or when the host's chrome sits
+* outside it. The attribute is opt-in, and a published library can't assume
+* either, so the portalled sites keep the explicit layer. Nested portals are
+* unaffected either way: a Select opened from a Drawer, or a Popover opened
+* from a Modal, lands on top with or without this value, by DOM order alone.
+*
+* **The in-flow sites (dropdown, float button, `Layout.Header`) can't benefit
+* from isolation at all**, and at 1000 they paint over a host overlay that
+* sits lower — a portalled `z-50` shadcn/Radix dialog, say. A separate, lower
+* chrome layer was considered and rejected: whatever value it took would
+* still be above some host's overlay and below some host's page content, so
+* it only moves the collision. `data-ui-root` is the host-side fix. Marking
+* the app root isolates it at `z-index: auto`, so a host overlay portalled to
+* `body` covers the whole app, this chrome included (verified with a `z-50`
+* overlay against a sticky `Layout.Header` and a `FloatButton`).
+*
 * Retune per call site with `className` / `classNames.mask` — both land after
 * this in `cn()`, so `tailwind-merge` lets them win.
 */

package/dist/lib/z-layers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-layers.mjs","names":[],"sources":["../../src/lib/z-layers.ts"],"sourcesContent":["/**\n * The single stacking layer every floating/overlay primitive in this library\n * shares — dialog and drawer (mask + content), popover, select, dropdown,\n * float button, and `Layout.Header`.\n *\n * **They are all deliberately equal.** Nothing here ranks against anything else\n * here by z-index; relative order falls out of DOM order, which is what puts a\n * Select popup above the Drawer it was opened from (Base UI appends each portal\n * to `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a\n * different value and those pairs silently invert. `Modal.confirm` and the\n * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /\n * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative\n * Modal still lands on top.\n *\n * **Why 1000 and not shadcn's default of 50.** 50 assumes you own the whole app\n * and keep its chrome below that. This package is published, so it doesn't get\n * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`\n * and its own overlay at 400, so on this repo's own docs site a right-anchored\n * Drawer had its top 60px — the entire header, title and close button — painted\n * under the navbar. 1000 clears Infima's whole scale and sits in the band every\n * major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).\n *\n * Retune per call site with `className` / `classNames.mask` — both land after\n * this in `cn()`, so `tailwind-merge` lets them win.\n */\nexport const OVERLAY_LAYER = 'z-1000';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,gBAAgB"}
+{"version":3,"file":"z-layers.mjs","names":[],"sources":["../../src/lib/z-layers.ts"],"sourcesContent":["/**\n * The single stacking layer every floating/overlay primitive in this library\n * shares — dialog and drawer (mask + content), popover, select, dropdown,\n * float button, and `Layout.Header`.\n *\n * **They are all deliberately equal.** Nothing here ranks against anything else\n * here by z-index; relative order falls out of DOM order, which is what puts a\n * Select popup above the Drawer it was opened from (Base UI appends each portal\n * to `body` as it opens) and a Drawer above `Layout.Header`. Give one of them a\n * different value and those pairs silently invert. `Modal.confirm` and the\n * imperative `Toast`/`Modal` stack roots sit above this on purpose (`z-10000` /\n * `zIndex = '10000'`), so an imperative confirm opened from inside a declarative\n * Modal still lands on top.\n *\n * **Why 1000 and not shadcn's default of 50.** 50 assumes you own the whole app\n * and keep its chrome below that. This package is published, so it doesn't get\n * that assumption: Infima (Docusaurus) puts its navbar at `--ifm-z-index-fixed: 200`\n * and its own overlay at 400, so on this repo's own docs site a right-anchored\n * Drawer had its top 60px — the entire header, title and close button — painted\n * under the navbar. 1000 clears Infima's whole scale and sits in the band every\n * major library reserves for modals (antd 1000, Bootstrap 1055, MUI 1300).\n *\n * **Why `[data-ui-root]` isolation doesn't replace this (#411).** `globals.css`\n * gives a root marked `data-ui-root` `isolation: isolate`, so Base UI portals,\n * appended to `body` beside that root, paint above everything inside it at any\n * z-index. Measured in Chromium with this constant neutralised: a right Drawer\n * clears a `z-index: 200` navbar when the navbar lives *inside* the marked\n * root, but not when the root isn't marked, or when the host's chrome sits\n * outside it. The attribute is opt-in, and a published library can't assume\n * either, so the portalled sites keep the explicit layer. Nested portals are\n * unaffected either way: a Select opened from a Drawer, or a Popover opened\n * from a Modal, lands on top with or without this value, by DOM order alone.\n *\n * **The in-flow sites (dropdown, float button, `Layout.Header`) can't benefit\n * from isolation at all**, and at 1000 they paint over a host overlay that\n * sits lower — a portalled `z-50` shadcn/Radix dialog, say. A separate, lower\n * chrome layer was considered and rejected: whatever value it took would\n * still be above some host's overlay and below some host's page content, so\n * it only moves the collision. `data-ui-root` is the host-side fix. Marking\n * the app root isolates it at `z-index: auto`, so a host overlay portalled to\n * `body` covers the whole app, this chrome included (verified with a `z-50`\n * overlay against a sticky `Layout.Header` and a `FloatButton`).\n *\n * Retune per call site with `className` / `classNames.mask` — both land after\n * this in `cn()`, so `tailwind-merge` lets them win.\n */\nexport const OVERLAY_LAYER = 'z-1000';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,gBAAgB"}

package/dist/providers/config/dark-mode.mjs

@@ -1,17 +1,9 @@
 "use client";
 import { useConfig } from "./context.mjs";
-import { useSyncExternalStore } from "react";
+import { useMediaQuery } from "@jbpark/use-hooks";
 //#region src/providers/config/dark-mode.ts
 const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
-const subscribeToSystemColorScheme = (callback) => {
-	if (typeof window === "undefined") return () => {};
-	const mql = window.matchMedia(DARK_MEDIA_QUERY);
-	mql.addEventListener("change", callback);
-	return () => mql.removeEventListener("change", callback);
-};
-const getSystemPrefersDark = () => typeof window !== "undefined" && window.matchMedia(DARK_MEDIA_QUERY).matches;
-const getServerSnapshot = () => false;
-const useSystemPrefersDark = () => useSyncExternalStore(subscribeToSystemColorScheme, getSystemPrefersDark, getServerSnapshot);
+const useSystemPrefersDark = () => useMediaQuery(DARK_MEDIA_QUERY);
 /**
 * Turns the three-valued `theme.dark` setting into the boolean that decides
 * whether dark treatments actually apply. Kept as a pure function so `Config`

package/dist/providers/config/dark-mode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dark-mode.mjs","names":[],"sources":["../../../src/providers/config/dark-mode.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\nimport { useConfig } from './context';\nimport type { ThemeConfig } from './types';\n\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\nconst subscribeToSystemColorScheme = (callback: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const mql = window.matchMedia(DARK_MEDIA_QUERY);\n  mql.addEventListener('change', callback);\n  return () => mql.removeEventListener('change', callback);\n};\n\nconst getSystemPrefersDark = () =>\n  typeof window !== 'undefined' && window.matchMedia(DARK_MEDIA_QUERY).matches;\n\n// No `window` during SSR, so there's no way to know the visitor's actual\n// preference before hydration — assume light (the conservative default)\n// and let useSyncExternalStore correct it client-side once matchMedia is\n// available, same flash-of-incorrect-guess tradeoff already accepted for\n// Sider's breakpoint prop elsewhere in this library.\nconst getServerSnapshot = () => false;\n\nexport const useSystemPrefersDark = () =>\n  useSyncExternalStore(\n    subscribeToSystemColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\n/**\n * Turns the three-valued `theme.dark` setting into the boolean that decides\n * whether dark treatments actually apply. Kept as a pure function so `Config`\n * can resolve the theme it is about to publish (its merged value isn't in\n * context yet) while consumers resolve the one already in context, without the\n * two drifting apart.\n */\nexport const resolveDark = (\n  dark: ThemeConfig['dark'],\n  systemPrefersDark: boolean,\n) => (dark === 'system' ? systemPrefersDark : dark === 'dark');\n\n/**\n * Whether dark mode is active for the nearest `Config`, with `'system'`\n * resolved against `prefers-color-scheme`.\n *\n * Internal to the package: components that render *CSS* can just use Tailwind's\n * `dark:` variants against the `.dark` class `Config` puts on its wrapper. This\n * exists for the ones that have to hand a light/dark choice to a third party in\n * JS instead — `CodeEditor` picking a CodeMirror theme extension.\n */\nexport const useIsDarkActive = () => {\n  const { theme } = useConfig();\n\n  return resolveDark(theme.dark, useSystemPrefersDark());\n};\n"],"mappings":";;;;AAOA,MAAM,mBAAmB;AAEzB,MAAM,gCAAgC,aAAyB;CAC7D,IAAI,OAAO,WAAW,aACpB,aAAa,CAAC;CAGhB,MAAM,MAAM,OAAO,WAAW,gBAAgB;CAC9C,IAAI,iBAAiB,UAAU,QAAQ;CACvC,aAAa,IAAI,oBAAoB,UAAU,QAAQ;AACzD;AAEA,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,gBAAgB,CAAC,CAAC;AAOvE,MAAM,0BAA0B;AAEhC,MAAa,6BACX,qBACE,8BACA,sBACA,iBACF;;;;;;;;AASF,MAAa,eACX,MACA,sBACI,SAAS,WAAW,oBAAoB,SAAS;;;;;;;;;;AAWvD,MAAa,wBAAwB;CACnC,MAAM,EAAE,UAAU,UAAU;CAE5B,OAAO,YAAY,MAAM,MAAM,qBAAqB,CAAC;AACvD"}
+{"version":3,"file":"dark-mode.mjs","names":[],"sources":["../../../src/providers/config/dark-mode.ts"],"sourcesContent":["'use client';\n\nimport { useMediaQuery } from '@jbpark/use-hooks';\n\nimport { useConfig } from './context';\nimport type { ThemeConfig } from './types';\n\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\n// No `window` during SSR, so there's no way to know the visitor's actual\n// preference before hydration — assume light (the conservative default)\n// and let useSyncExternalStore correct it client-side once matchMedia is\n// available, same flash-of-incorrect-guess tradeoff already accepted for\n// Sider's breakpoint prop elsewhere in this library. `useMediaQuery`'s\n// server snapshot is its `defaultValue`, which is `false` when omitted.\nexport const useSystemPrefersDark = () => useMediaQuery(DARK_MEDIA_QUERY);\n\n/**\n * Turns the three-valued `theme.dark` setting into the boolean that decides\n * whether dark treatments actually apply. Kept as a pure function so `Config`\n * can resolve the theme it is about to publish (its merged value isn't in\n * context yet) while consumers resolve the one already in context, without the\n * two drifting apart.\n */\nexport const resolveDark = (\n  dark: ThemeConfig['dark'],\n  systemPrefersDark: boolean,\n) => (dark === 'system' ? systemPrefersDark : dark === 'dark');\n\n/**\n * Whether dark mode is active for the nearest `Config`, with `'system'`\n * resolved against `prefers-color-scheme`.\n *\n * Internal to the package: components that render *CSS* can just use Tailwind's\n * `dark:` variants against the `.dark` class `Config` puts on its wrapper. This\n * exists for the ones that have to hand a light/dark choice to a third party in\n * JS instead — `CodeEditor` picking a CodeMirror theme extension.\n */\nexport const useIsDarkActive = () => {\n  const { theme } = useConfig();\n\n  return resolveDark(theme.dark, useSystemPrefersDark());\n};\n"],"mappings":";;;;AAOA,MAAM,mBAAmB;AAQzB,MAAa,6BAA6B,cAAc,gBAAgB;;;;;;;;AASxE,MAAa,eACX,MACA,sBACI,SAAS,WAAW,oBAAoB,SAAS;;;;;;;;;;AAWvD,MAAa,wBAAwB;CACnC,MAAM,EAAE,UAAU,UAAU;CAE5B,OAAO,YAAY,MAAM,MAAM,qBAAqB,CAAC;AACvD"}