@jbpark/ui-kit 10.0.1 → 10.1.0

package/dist/core/field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"field.mjs","names":[],"sources":["../../src/core/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Label } from './label';\nimport { Separator } from './separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'm-0 flex flex-col gap-6 border-0 p-0',\n        `has-[>[data-slot=checkbox-group]]:gap-3\n        has-[>[data-slot=radio-group]]:gap-3`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        'p-0',\n        'mb-3 font-medium',\n        'data-[variant=legend]:text-base',\n        'data-[variant=label]:text-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        `group/field-group @container/field-group flex w-full flex-col gap-7\n        data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',\n  {\n    variants: {\n      orientation: {\n        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n        horizontal: [\n          'flex-row items-center',\n          '[&>[data-slot=field-label]]:flex-auto',\n          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n        responsive: [\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',\n          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  },\n);\n\nfunction Field({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        `group/field-label peer/field-label flex w-fit gap-2 leading-snug\n        group-data-[disabled=true]/field:opacity-50`,\n        `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\n        has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border\n        [&>*]:data-[slot=field]:p-4`,\n        `has-data-[state=checked]:bg-primary/5\n        has-data-[state=checked]:border-primary\n        dark:has-data-[state=checked]:bg-primary/10`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        `flex w-fit items-center gap-2 text-sm leading-snug font-medium\n        group-data-[disabled=true]/field:opacity-50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        `text-muted-foreground text-sm leading-normal font-normal\n        group-has-[[data-orientation=horizontal]]/field:text-balance`,\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        `relative -my-2 h-5 text-sm\n        group-data-[variant=outline]/field-group:-mb-2`,\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"bg-background text-muted-foreground relative mx-auto block\n            w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map(error => [error?.message, error])).values(),\n    ];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"m-0 ml-4 flex list-disc flex-col gap-1 p-0\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}
+{"version":3,"file":"field.mjs","names":[],"sources":["../../src/core/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Label } from './label';\nimport { Separator } from './separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        'm-0 flex flex-col gap-6 border-0 p-0',\n        `has-[>[data-slot=checkbox-group]]:gap-3\n        has-[>[data-slot=radio-group]]:gap-3`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        'p-0',\n        'mb-3 font-medium',\n        'data-[variant=legend]:text-base',\n        'data-[variant=label]:text-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        `group/field-group @container/field-group flex w-full flex-col gap-7\n        data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\n  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',\n  {\n    variants: {\n      orientation: {\n        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n        horizontal: [\n          'flex-row items-center',\n          '[&>[data-slot=field-label]]:flex-auto',\n          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n        responsive: [\n          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',\n          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  },\n);\n\nfunction Field({\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        `group/field-label peer/field-label flex w-fit gap-2 leading-snug\n        group-data-[disabled=true]/field:opacity-50`,\n        `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\n        has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border\n        [&>*]:data-[slot=field]:p-4`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        `flex w-fit items-center gap-2 text-sm leading-snug font-medium\n        group-data-[disabled=true]/field:opacity-50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        `text-muted-foreground text-sm leading-normal font-normal\n        group-has-[[data-orientation=horizontal]]/field:text-balance`,\n        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        `relative -my-2 h-5 text-sm\n        group-data-[variant=outline]/field-group:-mb-2`,\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"bg-background text-muted-foreground relative mx-auto block\n            w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<'div'> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map(error => [error?.message, error])).values(),\n    ];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1 p-0\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/core/index.d.mts

@@ -3,6 +3,7 @@ import "./badge.mjs";
 import "./button.mjs";
 import "./calendar.mjs";
 import "./checkbox.mjs";
+import "./combobox.mjs";
 import "./dialog.mjs";
 import "./drawer.mjs";
 import "./label.mjs";
@@ -16,4 +17,6 @@ import "./select.mjs";
 import "./separator.mjs";
 import "./slider.mjs";
 import "./switch.mjs";
-import "./textarea.mjs";
+import "./tabs.mjs";
+import "./textarea.mjs";
+import "./tooltip.mjs";

package/dist/core/select.mjs

@@ -19,7 +19,8 @@ var select_exports = /* @__PURE__ */ __exportAll({
 	SelectScrollUpButton: () => SelectScrollUpButton,
 	SelectSeparator: () => SelectSeparator,
 	SelectTrigger: () => SelectTrigger,
-	SelectValue: () => SelectValue
+	SelectValue: () => SelectValue,
+	selectTriggerStyles: () => selectTriggerStyles
 });
 function Select$1({ dir, ...props }) {
 	const root = /* @__PURE__ */ jsx(Select.Root, {
@@ -43,24 +44,25 @@ function SelectValue({ ...props }) {
 		...props
 	});
 }
+const selectTriggerStyles = `border-input data-placeholder:text-muted-foreground
+  [&_svg:not([class*='text-'])]:text-muted-foreground
+  focus-visible:border-ring focus-visible:ring-ring/50
+  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+  aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50
+  flex w-fit items-center justify-between gap-2 rounded-md border
+  bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
+  transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+  data-disabled:cursor-not-allowed data-disabled:opacity-50
+  data-[size=default]:h-9 data-[size=sm]:h-8
+  *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex
+  *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2
+  [&_svg]:pointer-events-none [&_svg]:shrink-0
+  [&_svg:not([class*='size-'])]:size-4`;
 function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn(`border-input data-placeholder:text-muted-foreground
-        [&_svg:not([class*='text-'])]:text-muted-foreground
-        focus-visible:border-ring focus-visible:ring-ring/50
-        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
-        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50
-        flex w-fit items-center justify-between gap-2 rounded-md border
-        bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
-        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
-        data-disabled:cursor-not-allowed data-disabled:opacity-50
-        data-[size=default]:h-9 data-[size=sm]:h-8
-        *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex
-        *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2
-        [&_svg]:pointer-events-none [&_svg]:shrink-0
-        [&_svg:not([class*='size-'])]:size-4`, className),
+		className: cn(selectTriggerStyles, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
 			render: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
@@ -81,16 +83,17 @@ function SelectContent({ className, children, position = "item-aligned", align =
 			className: cn(OVERLAY_LAYER, !alignItemWithTrigger && "min-w-(--anchor-width)"),
 			children: /* @__PURE__ */ jsxs(Select.Popup, {
 				"data-slot": "select-content",
-				className: cn(`bg-popover text-popover-foreground max-h-(--available-height)
-            min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-md
-            border shadow-md transition-[opacity,transform] duration-150
+				className: cn(`bg-popover text-popover-foreground relative
+            max-h-(--available-height) min-w-[8rem] origin-(--transform-origin)
+            overflow-hidden rounded-md border 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,
 				children: [
 					/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
 					/* @__PURE__ */ jsx(Select.List, {
-						className: "overflow-y-auto p-1",
+						className: "scroll-py-6 overflow-y-auto p-1",
 						children
 					}),
 					/* @__PURE__ */ jsx(SelectScrollDownButton, {})
@@ -133,7 +136,8 @@ function SelectSeparator({ className, ...props }) {
 function SelectScrollUpButton({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
 		"data-slot": "select-scroll-up-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: cn(`bg-popover text-popover-foreground absolute top-0 z-1 flex h-6 w-full
+        cursor-default items-center justify-center`, className),
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
 	});
@@ -141,12 +145,13 @@ function SelectScrollUpButton({ className, ...props }) {
 function SelectScrollDownButton({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
 		"data-slot": "select-scroll-down-button",
-		className: cn("flex cursor-default items-center justify-center py-1", className),
+		className: cn(`bg-popover text-popover-foreground absolute bottom-0 z-1 flex h-6
+        w-full cursor-default items-center justify-center`, className),
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
 	});
 }
 //#endregion
-export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, select_exports };
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerStyles, select_exports };
 
 //# sourceMappingURL=select.mjs.map

package/dist/core/select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["Select","SelectPrimitive"],"sources":["../../src/core/select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n// Base UI primitives with repo-owned styling; no longer vendored from shadcn.\ntype SelectRootProps = SelectPrimitive.Root.Props<string> & {\n  /** Explicit reading direction, retained from the previous Radix API. */\n  dir?: 'ltr' | 'rtl';\n};\n\nfunction Select({ dir, ...props }: SelectRootProps) {\n  const root = <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n\n  return dir ? (\n    <DirectionProvider direction={dir}>{root}</DirectionProvider>\n  ) : (\n    root\n  );\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        `border-input data-placeholder:text-muted-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground\n        focus-visible:border-ring focus-visible:ring-ring/50\n        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\n        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50\n        flex w-fit items-center justify-between gap-2 rounded-md border\n        bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs\n        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]\n        data-disabled:cursor-not-allowed data-disabled:opacity-50\n        data-[size=default]:h-9 data-[size=sm]:h-8\n        *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex\n        *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\n        [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_svg:not([class*='size-'])]:size-4`,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={<ChevronDownIcon />}\n        className=\"opacity-50\"\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype SelectContentProps = Omit<\n  React.ComponentProps<typeof SelectPrimitive.Popup>,\n  'className'\n> & {\n  className?: string;\n  position?: 'item-aligned' | 'popper';\n  align?: SelectPrimitive.Positioner.Props['align'];\n  side?: SelectPrimitive.Positioner.Props['side'];\n  sideOffset?: number;\n  container?: HTMLElement;\n};\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'item-aligned',\n  align = 'center',\n  side = 'bottom',\n  sideOffset = 4,\n  container,\n  ...props\n}: SelectContentProps) {\n  const { getContainer } = useConfig();\n  const alignItemWithTrigger = position === 'item-aligned';\n\n  return (\n    <SelectPrimitive.Portal container={container ?? getContainer()}>\n      <SelectPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className={cn(\n          OVERLAY_LAYER,\n          !alignItemWithTrigger && 'min-w-(--anchor-width)',\n        )}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            `bg-popover text-popover-foreground max-h-(--available-height)\n            min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-md\n            border 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          <SelectScrollUpButton />\n          <SelectPrimitive.List className=\"overflow-y-auto p-1\">\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        `data-highlighted:bg-accent data-highlighted:text-accent-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full\n        cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm\n        outline-hidden select-none data-disabled:pointer-events-none\n        data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_svg:not([class*='size-'])]:size-4`,\n        className,\n        //\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.mjs","names":["Select","SelectPrimitive"],"sources":["../../src/core/select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { DirectionProvider } from '@base-ui/react/direction-provider';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n// Base UI primitives with repo-owned styling; no longer vendored from shadcn.\ntype SelectRootProps = SelectPrimitive.Root.Props<string> & {\n  /** Explicit reading direction, retained from the previous Radix API. */\n  dir?: 'ltr' | 'rtl';\n};\n\nfunction Select({ dir, ...props }: SelectRootProps) {\n  const root = <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n\n  return dir ? (\n    <DirectionProvider direction={dir}>{root}</DirectionProvider>\n  ) : (\n    root\n  );\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nconst selectTriggerStyles = `border-input data-placeholder:text-muted-foreground\n  [&_svg:not([class*='text-'])]:text-muted-foreground\n  focus-visible:border-ring focus-visible:ring-ring/50\n  aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\n  aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50\n  flex w-fit items-center justify-between gap-2 rounded-md border\n  bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs\n  transition-[color,box-shadow] outline-none focus-visible:ring-[3px]\n  data-disabled:cursor-not-allowed data-disabled:opacity-50\n  data-[size=default]:h-9 data-[size=sm]:h-8\n  *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex\n  *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\n  [&_svg]:pointer-events-none [&_svg]:shrink-0\n  [&_svg:not([class*='size-'])]:size-4`;\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        selectTriggerStyles,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={<ChevronDownIcon />}\n        className=\"opacity-50\"\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype SelectContentProps = Omit<\n  React.ComponentProps<typeof SelectPrimitive.Popup>,\n  'className'\n> & {\n  className?: string;\n  position?: 'item-aligned' | 'popper';\n  align?: SelectPrimitive.Positioner.Props['align'];\n  side?: SelectPrimitive.Positioner.Props['side'];\n  sideOffset?: number;\n  container?: HTMLElement;\n};\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'item-aligned',\n  align = 'center',\n  side = 'bottom',\n  sideOffset = 4,\n  container,\n  ...props\n}: SelectContentProps) {\n  const { getContainer } = useConfig();\n  const alignItemWithTrigger = position === 'item-aligned';\n\n  return (\n    <SelectPrimitive.Portal container={container ?? getContainer()}>\n      <SelectPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className={cn(\n          OVERLAY_LAYER,\n          !alignItemWithTrigger && 'min-w-(--anchor-width)',\n        )}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            `bg-popover text-popover-foreground relative\n            max-h-(--available-height) min-w-[8rem] origin-(--transform-origin)\n            overflow-hidden rounded-md border shadow-md\n            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          <SelectScrollUpButton />\n          <SelectPrimitive.List className=\"scroll-py-6 overflow-y-auto p-1\">\n            {children}\n          </SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        `data-highlighted:bg-accent data-highlighted:text-accent-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full\n        cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm\n        outline-hidden select-none data-disabled:pointer-events-none\n        data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_svg:not([class*='size-'])]:size-4`,\n        className,\n        //\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemIndicator\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <CheckIcon className=\"size-4\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        `bg-popover text-popover-foreground absolute top-0 z-1 flex h-6 w-full\n        cursor-default items-center justify-center`,\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        `bg-popover text-popover-foreground absolute bottom-0 z-1 flex h-6\n        w-full cursor-default items-center justify-center`,\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  selectTriggerStyles,\n};\n"],"mappings":"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"}

package/dist/core/tabs.d.mts

@@ -0,0 +1,9 @@
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/core/tabs.d.ts
+type RootProps = Omit<React.ComponentProps<typeof Tabs.Root>, 'className'> & {
+  className?: string;
+};
+declare function Tabs$1({ className, ...props }: RootProps): import("react").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs };
+//# sourceMappingURL=tabs.d.mts.map

package/dist/core/tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../src/core/tabs.tsx"],"mappings":";;KAMK,YAAY,KACf,MAAM,sBAAsB,KAAc;EAG1C;;iBAqBO,SAAO,cAAc,SAAS,4BAAS,IAAA"}

package/dist/core/tabs.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/core/tabs.tsx
+var tabs_exports = /* @__PURE__ */ __exportAll({
+	Tabs: () => Tabs$1,
+	TabsList: () => TabsList,
+	TabsPanel: () => TabsPanel,
+	TabsTab: () => TabsTab
+});
+function Tabs$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("flex flex-col data-[orientation=vertical]:flex-row", className),
+		...props
+	});
+}
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn(`border-border flex shrink-0 border-b
+        data-[orientation=vertical]:flex-col
+        data-[orientation=vertical]:border-r
+        data-[orientation=vertical]:border-b-0`, className),
+		...props
+	});
+}
+function TabsTab({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-tab",
+		className: cn(`text-muted-foreground hover:text-foreground focus-visible:ring-ring/50
+        data-active:border-primary data-active:text-foreground relative -mb-px
+        inline-flex items-center justify-center gap-2 border-b-2
+        border-transparent px-4 py-2 text-sm font-medium whitespace-nowrap
+        transition-colors outline-none focus-visible:rounded-sm
+        focus-visible:ring-[3px] data-disabled:pointer-events-none
+        data-disabled:opacity-50 data-[orientation=vertical]:-mr-px
+        data-[orientation=vertical]:mb-0
+        data-[orientation=vertical]:justify-start
+        data-[orientation=vertical]:border-r-2
+        data-[orientation=vertical]:border-b-0
+        data-[orientation=vertical]:text-left`, className),
+		...props
+	});
+}
+function TabsPanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-panel",
+		className: cn(`focus-visible:ring-ring/50 min-w-0 flex-1 p-4 outline-none
+        focus-visible:ring-[3px]`, className),
+		...props
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsPanel, TabsTab, tabs_exports };
+
+//# sourceMappingURL=tabs.mjs.map

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"}