@vitinnczk/onyx-ui 0.0.0-stage → 0.1.0

package/dist/components/Table/Table.module.js

@@ -0,0 +1,23 @@
+// src/components/Table/Table.module.css
+var e = "onyx-wrapper-Qd7Cl", t = "onyx-table-Dkosn", n = "onyx-compact-haE8n", r = "onyx-caption-9vU1I", i = "onyx-hidden-3k90-", a = "onyx-headerCell-vZciR", o = "onyx-sticky-QfxLu", s = "onyx-sortButton-V9clQ onyx-focusRing-qmcYD", c = "onyx-end-eOUuQ", l = "onyx-center-kj838", u = "onyx-sortIcon-V3-dH", d = "onyx-sortIconActive-zctsc", f = "onyx-cell-nJrDK", p = "onyx-rowHeader-BTDF0", m = "onyx-row-DD8Km", h = "onyx-striped-5BaG7", g = "onyx-empty-O1nyD", _ = {
+	wrapper: e,
+	table: t,
+	compact: n,
+	caption: r,
+	hidden: i,
+	headerCell: a,
+	sticky: o,
+	sortButton: s,
+	end: c,
+	center: l,
+	sortIcon: u,
+	sortIconActive: d,
+	cell: f,
+	rowHeader: p,
+	row: m,
+	striped: h,
+	empty: g
+};
+export { r as caption, f as cell, l as center, n as compact, _ as default, g as empty, c as end, a as headerCell, i as hidden, m as row, p as rowHeader, s as sortButton, u as sortIcon, d as sortIconActive, o as sticky, h as striped, t as table, e as wrapper };
+
+//# sourceMappingURL=Table.module.js.map

package/dist/components/Table/Table.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.module.js","names":["wrapper","table","compact","caption","hidden","headerCell","sticky","sortButton","end","center","sortIcon","sortIconActive","cell","rowHeader","row","striped","empty","Table_module_default"],"sources":["../../../src/components/Table/Table.module.css"],"sourcesContent":[".wrapper {\n  max-width: 100%;\n  overflow: auto;\n  background-color: var(--color-surface);\n  border: var(--border-width-thin) solid var(--color-border);\n  border-radius: var(--radius-lg);\n}\n\n.wrapper:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.table {\n  --table-cell-y: var(--space-3);\n  --table-cell-x: var(--space-4);\n\n  width: 100%;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  color: var(--color-text);\n  border-collapse: separate;\n  border-spacing: 0;\n}\n\n.compact {\n  --table-cell-y: var(--space-2);\n  --table-cell-x: var(--space-3);\n}\n\n.caption {\n  padding: var(--space-3) var(--table-cell-x);\n  font-weight: var(--font-weight-semibold);\n  text-align: start;\n  caption-side: top;\n}\n\n.hidden {\n  position: absolute;\n  width: var(--border-width-thin);\n  height: var(--border-width-thin);\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.headerCell {\n  padding: var(--table-cell-y) var(--table-cell-x);\n  font-weight: var(--font-weight-semibold);\n  color: var(--color-text-muted);\n  text-align: start;\n  white-space: nowrap;\n  background-color: var(--color-bg-subtle);\n  border-bottom: var(--border-width-thin) solid var(--color-border);\n}\n\n.sticky .headerCell {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.headerCell:has(.sortButton) {\n  padding: 0;\n}\n\n.sortButton {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  --focus-ring-offset: calc(var(--focus-ring-width) * -1);\n\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  width: 100%;\n  min-height: var(--size-control-md);\n  padding: var(--table-cell-y) var(--table-cell-x);\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  transition: color var(--duration-fast) var(--easing-standard);\n}\n\n.sortButton:hover {\n  color: var(--color-text);\n  background-color: var(--color-state-hover);\n}\n\n.sortButton:active {\n  background-color: var(--color-state-active);\n}\n\n.end .sortButton {\n  flex-direction: row-reverse;\n}\n\n.center .sortButton {\n  justify-content: center;\n}\n\n.sortIcon {\n  flex-shrink: 0;\n  font-size: var(--size-icon-sm);\n  opacity: 0.6;\n}\n\n.sortIconActive {\n  color: var(--color-primary-text);\n  opacity: 1;\n}\n\n.cell {\n  padding: var(--table-cell-y) var(--table-cell-x);\n  text-align: start;\n  vertical-align: middle;\n  border-bottom: var(--border-width-thin) solid var(--color-border);\n}\n\n.rowHeader {\n  font-weight: var(--font-weight-medium);\n}\n\n.row:last-child .cell {\n  border-bottom: 0;\n}\n\n.row:hover {\n  background-color: var(--color-state-hover);\n}\n\n.striped .row:nth-child(even) {\n  background-color: var(--color-bg-subtle);\n}\n\n.striped .row:nth-child(even):hover {\n  background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));\n}\n\n.center {\n  text-align: center;\n}\n\n.end {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.empty {\n  padding: var(--space-8) var(--table-cell-x);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n\n.table[aria-busy='true'] tbody {\n  opacity: 0.6;\n}\n\n@media (pointer: coarse) {\n  .sortButton {\n    min-height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table.js';
+export type { SortDirection, TableColumn, TableProps, TableSort } from './Table.js';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,41 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    /** Value of the selected tab, for controlled tabs. */
+    value?: string;
+    /** Value of the tab selected at first, for uncontrolled tabs. */
+    defaultValue?: string;
+    /** Called with the value of the tab that becomes selected. */
+    onValueChange?: (value: string) => void;
+    /**
+     * `automatic` selects a tab as soon as it receives focus; `manual` waits for Enter or Space,
+     * which suits panels that are slow to render.
+     * @default 'automatic'
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * Also sets which arrow keys move between tabs.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** @default 'line' */
+    variant?: 'line' | 'solid';
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+}
+/** Switches between panels of content, one visible at a time. */
+export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export type TabListProps = HTMLAttributes<HTMLDivElement>;
+/** Row of `Tab` buttons. Name it with `aria-label` or `aria-labelledby`. */
+export declare const TabList: import('react').ForwardRefExoticComponent<TabListProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Identifies the tab and the `TabPanel` it shows. */
+    value: string;
+}
+/** Button that shows the `TabPanel` with the same `value`. */
+export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Value of the `Tab` that shows this panel. */
+    value: string;
+}
+/** Content shown while the `Tab` with the same `value` is selected. */
+export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,86 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import n from "./Tabs.module.js";
+import { createContext as r, forwardRef as i, useContext as a, useId as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+// src/components/Tabs/Tabs.tsx
+var c = r(null);
+function l(e) {
+	let t = a(c);
+	if (!t) throw Error(`${e} must be rendered inside Tabs.`);
+	return t;
+}
+var u = (e) => e.replace(/\s+/g, "-"), d = i(function({ value: r, defaultValue: i, onValueChange: a, activationMode: l = "automatic", orientation: u = "horizontal", variant: d = "line", size: f = "md", className: p, children: m, ...h }, g) {
+	let _ = o(), [v, y] = e({
+		value: r,
+		defaultValue: i,
+		onChange: (e) => {
+			e !== void 0 && a?.(e);
+		}
+	});
+	return /* @__PURE__ */ s("div", {
+		ref: g,
+		"data-orientation": u,
+		className: t(n.tabs, n[u], n[d], n[f], p),
+		...h,
+		children: /* @__PURE__ */ s(c.Provider, {
+			value: {
+				value: v,
+				select: y,
+				baseId: _,
+				activationMode: l,
+				orientation: u
+			},
+			children: m
+		})
+	});
+}), f = i(function({ className: e, ...r }, i) {
+	let { orientation: a } = l("TabList");
+	return /* @__PURE__ */ s("div", {
+		ref: i,
+		role: "tablist",
+		"aria-orientation": a,
+		className: t(n.list, e),
+		...r
+	});
+}), p = i(function({ value: e, className: r, onClick: i, onKeyDown: a, ...o }, c) {
+	let { value: d, select: f, baseId: p, orientation: m, activationMode: h } = l("Tab"), g = d === e;
+	return /* @__PURE__ */ s("button", {
+		ref: c,
+		type: "button",
+		role: "tab",
+		id: `${p}-tab-${u(e)}`,
+		"aria-selected": g,
+		"aria-controls": `${p}-panel-${u(e)}`,
+		tabIndex: g || d === void 0 ? 0 : -1,
+		"data-value": e,
+		className: t(n.tab, r),
+		onClick: (t) => {
+			i?.(t), t.defaultPrevented || f(e);
+		},
+		onKeyDown: (e) => {
+			a?.(e);
+			let t = e.currentTarget.closest("[role=\"tablist\"]");
+			if (e.defaultPrevented || !t) return;
+			let n = [...t.querySelectorAll("[role=\"tab\"]:not(:disabled)")], r = n.indexOf(e.currentTarget), i = getComputedStyle(t).direction === "rtl", [o, s] = m === "vertical" ? ["ArrowUp", "ArrowDown"] : i ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"], c;
+			e.key === s ? c = n[(r + 1) % n.length] : e.key === o ? c = n.at(r - 1) : e.key === "Home" ? c = n[0] : e.key === "End" && (c = n.at(-1)), c && (e.preventDefault(), c.focus(), h === "automatic" && c.dataset.value && f(c.dataset.value));
+		},
+		...o
+	});
+}), m = i(function({ value: e, tabIndex: r = 0, className: i, ...a }, o) {
+	let { value: c, baseId: d } = l("TabPanel");
+	return /* @__PURE__ */ s("div", {
+		ref: o,
+		role: "tabpanel",
+		id: `${d}-panel-${u(e)}`,
+		"aria-labelledby": `${d}-tab-${u(e)}`,
+		tabIndex: r,
+		hidden: c !== e,
+		className: t(n.panel, i),
+		...a
+	});
+});
+export { p as Tab, f as TabList, m as TabPanel, d as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["styles","Tabs_module_default","TabsContext","createContext","useTabsContext","context","useContext","component","toId","value","Tabs","forwardRef","props","baseId","useId","selected","setSelected","useControllableState","next","onValueChange","orientation","cn","variant","size","className","TabList","Tab","selectedValue","onClick","event","select","list","tabs","index","rtl","previous","target","activationMode","TabPanel"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport styles from './Tabs.module.css';\n\ninterface TabsContextValue {\n  value: string | undefined;\n  select: (value: string) => void;\n  baseId: string;\n  activationMode: 'automatic' | 'manual';\n  orientation: 'horizontal' | 'vertical';\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext(component: string) {\n  const context = useContext(TabsContext);\n  if (!context) throw new Error(`${component} must be rendered inside Tabs.`);\n  return context;\n}\n\nconst toId = (value: string) => value.replace(/\\s+/g, '-');\n\nexport interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /** Value of the selected tab, for controlled tabs. */\n  value?: string;\n  /** Value of the tab selected at first, for uncontrolled tabs. */\n  defaultValue?: string;\n  /** Called with the value of the tab that becomes selected. */\n  onValueChange?: (value: string) => void;\n  /**\n   * `automatic` selects a tab as soon as it receives focus; `manual` waits for Enter or Space,\n   * which suits panels that are slow to render.\n   * @default 'automatic'\n   */\n  activationMode?: 'automatic' | 'manual';\n  /**\n   * Also sets which arrow keys move between tabs.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /** @default 'line' */\n  variant?: 'line' | 'solid';\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n}\n\n/** Switches between panels of content, one visible at a time. */\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    value,\n    defaultValue,\n    onValueChange,\n    activationMode = 'automatic',\n    orientation = 'horizontal',\n    variant = 'line',\n    size = 'md',\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const baseId = useId();\n  const [selected, setSelected] = useControllableState<string | undefined>({\n    value,\n    defaultValue,\n    onChange: (next) => {\n      if (next !== undefined) onValueChange?.(next);\n    },\n  });\n\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation}\n      className={cn(styles.tabs, styles[orientation], styles[variant], styles[size], className)}\n      {...props}\n    >\n      <TabsContext.Provider\n        value={{ value: selected, select: setSelected, baseId, activationMode, orientation }}\n      >\n        {children}\n      </TabsContext.Provider>\n    </div>\n  );\n});\n\nexport type TabListProps = HTMLAttributes<HTMLDivElement>;\n\n/** Row of `Tab` buttons. Name it with `aria-label` or `aria-labelledby`. */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  const { orientation } = useTabsContext('TabList');\n\n  return (\n    <div\n      ref={ref}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cn(styles.list, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  /** Identifies the tab and the `TabPanel` it shows. */\n  value: string;\n}\n\n/** Button that shows the `TabPanel` with the same `value`. */\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  { value, className, onClick, onKeyDown, ...props },\n  ref,\n) {\n  const {\n    value: selectedValue,\n    select,\n    baseId,\n    orientation,\n    activationMode,\n  } = useTabsContext('Tab');\n  const selected = selectedValue === value;\n\n  const onTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n    const list = event.currentTarget.closest('[role=\"tablist\"]');\n    if (event.defaultPrevented || !list) return;\n\n    const tabs = [...list.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]:not(:disabled)')];\n    const index = tabs.indexOf(event.currentTarget);\n    const rtl = getComputedStyle(list).direction === 'rtl';\n    const [previous, next] =\n      orientation === 'vertical'\n        ? ['ArrowUp', 'ArrowDown']\n        : rtl\n          ? ['ArrowRight', 'ArrowLeft']\n          : ['ArrowLeft', 'ArrowRight'];\n\n    let target: HTMLButtonElement | undefined;\n    if (event.key === next) target = tabs[(index + 1) % tabs.length];\n    else if (event.key === previous) target = tabs.at(index - 1);\n    else if (event.key === 'Home') target = tabs[0];\n    else if (event.key === 'End') target = tabs.at(-1);\n    if (!target) return;\n\n    event.preventDefault();\n    target.focus();\n    if (activationMode === 'automatic' && target.dataset.value) select(target.dataset.value);\n  };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"tab\"\n      id={`${baseId}-tab-${toId(value)}`}\n      aria-selected={selected}\n      aria-controls={`${baseId}-panel-${toId(value)}`}\n      tabIndex={selected || selectedValue === undefined ? 0 : -1}\n      data-value={value}\n      className={cn(styles.tab, className)}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) select(value);\n      }}\n      onKeyDown={onTabKeyDown}\n      {...props}\n    />\n  );\n});\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Value of the `Tab` that shows this panel. */\n  value: string;\n}\n\n/** Content shown while the `Tab` with the same `value` is selected. */\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { value, tabIndex = 0, className, ...props },\n  ref,\n) {\n  const { value: selectedValue, baseId } = useTabsContext('TabPanel');\n\n  return (\n    <div\n      ref={ref}\n      role=\"tabpanel\"\n      id={`${baseId}-panel-${toId(value)}`}\n      aria-labelledby={`${baseId}-tab-${toId(value)}`}\n      tabIndex={tabIndex}\n      hidden={selectedValue !== value}\n      className={cn(styles.panel, className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":"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"}

package/dist/components/Tabs/Tabs.module.js

@@ -0,0 +1,14 @@
+// src/components/Tabs/Tabs.module.css
+var e = "onyx-tabs-QzIkz", t = "onyx-vertical-W3hzW", n = "onyx-sm-b6EPY", r = "onyx-list-qRVME", i = "onyx-tab-IdDYc onyx-focusRing-qmcYD", a = "onyx-line-TQjAo", o = "onyx-solid-OvGOc", s = "onyx-panel-08i9c", c = {
+	tabs: e,
+	vertical: t,
+	sm: n,
+	list: r,
+	tab: i,
+	line: a,
+	solid: o,
+	panel: s
+};
+export { c as default, a as line, r as list, s as panel, n as sm, o as solid, i as tab, e as tabs, t as vertical };
+
+//# sourceMappingURL=Tabs.module.js.map

package/dist/components/Tabs/Tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.js","names":["tabs","vertical","sm","list","tab","line","solid","panel","Tabs_module_default"],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":[".tabs {\n  --tabs-height: var(--size-control-md);\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.vertical {\n  flex-direction: row;\n}\n\n.sm {\n  --tabs-height: var(--size-control-sm);\n}\n\n.list {\n  display: flex;\n  min-width: 0;\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n\n.vertical .list {\n  flex-direction: column;\n  flex-shrink: 0;\n  overflow: visible;\n}\n\n.tab {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  --focus-ring-offset: calc(var(--focus-ring-width) * -1);\n\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  gap: var(--space-2);\n  align-items: center;\n  justify-content: center;\n  min-height: var(--tabs-height);\n  padding-inline: var(--space-4);\n  font: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text-muted);\n  white-space: nowrap;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-md);\n  transition-timing-function: var(--easing-standard);\n  transition-duration: var(--duration-fast);\n  transition-property: color, background-color, box-shadow;\n}\n\n.tab:hover:not(:disabled) {\n  color: var(--color-text);\n}\n\n.tab[aria-selected='true'] {\n  color: var(--color-text);\n}\n\n.tab:disabled {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.line .list {\n  gap: var(--space-1);\n  box-shadow: inset 0 calc(var(--border-width-thin) * -1) 0 var(--color-border);\n}\n\n.line .tab {\n  border-radius: var(--radius-md) var(--radius-md) 0 0;\n}\n\n.line .tab:hover:not(:disabled) {\n  background-color: var(--color-state-hover);\n}\n\n.line .tab[aria-selected='true'] {\n  box-shadow: inset 0 calc(var(--border-width-thick) * -1) 0 var(--color-primary);\n}\n\n.line.vertical .list {\n  box-shadow: inset calc(var(--border-width-thin) * -1) 0 0 var(--color-border);\n}\n\n.line.vertical .tab {\n  justify-content: flex-start;\n  border-radius: var(--radius-md) 0 0 var(--radius-md);\n}\n\n.line.vertical .tab[aria-selected='true'] {\n  box-shadow: inset calc(var(--border-width-thick) * -1) 0 0 var(--color-primary);\n}\n\n.solid .list {\n  gap: var(--space-1);\n  align-self: flex-start;\n  max-width: 100%;\n  padding: var(--space-1);\n  background-color: var(--color-bg-muted);\n  border-radius: var(--radius-lg);\n}\n\n.solid .tab:hover:not(:disabled, [aria-selected='true']) {\n  background-color: var(--color-state-hover);\n}\n\n.solid .tab[aria-selected='true'] {\n  background-color: var(--color-surface);\n  box-shadow: var(--shadow-sm);\n}\n\n.panel {\n  flex: 1;\n  min-width: 0;\n  border-radius: var(--radius-md);\n}\n\n.panel:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: var(--focus-ring-offset);\n}\n\n@media (pointer: coarse) {\n  .tab {\n    min-height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tab, TabList, TabPanel, Tabs } from './Tabs.js';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './Tabs.js';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,22 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent, PolymorphicPropsWithRef } from '../../utils/polymorphic.js';
+export type TextSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+export type TextTone = 'default' | 'muted' | 'inherit' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface TextOwnProps {
+    /** @default 'md' */
+    size?: TextSize;
+    /** Defaults to the weight of the surrounding text. */
+    weight?: TextWeight;
+    /** @default 'default' */
+    tone?: TextTone;
+    align?: 'start' | 'center' | 'end';
+    /**
+     * `true` cuts the text to one line with an ellipsis; a number clamps it to that many lines.
+     * @default false
+     */
+    truncate?: boolean | number;
+}
+export type TextProps<As extends ElementType = 'p'> = PolymorphicPropsWithRef<As, TextOwnProps>;
+/** Body text. Renders a paragraph by default; use `as` for inline text or other elements. */
+export declare const Text: PolymorphicComponent<"p", TextOwnProps>;

package/dist/components/Text/Text.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Text.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Text/Text.tsx
+var i = {
+	inherit: t.sizeInherit,
+	xs: t.sizeXs,
+	sm: t.sizeSm,
+	md: t.sizeMd,
+	lg: t.sizeLg,
+	xl: t.sizeXl
+}, a = {
+	default: t.toneDefault,
+	muted: t.toneMuted,
+	inherit: t.toneInherit,
+	primary: t.tonePrimary,
+	success: t.toneSuccess,
+	warning: t.toneWarning,
+	danger: t.toneDanger,
+	info: t.toneInfo
+}, o = n(function({ as: n = "p", size: o = "md", weight: s, tone: c = "default", align: l, truncate: u = !1, className: d, style: f, ...p }, m) {
+	let h = typeof u == "number" ? u : void 0;
+	return /* @__PURE__ */ r(n, {
+		ref: m,
+		className: e(t.text, i[o], s && t[s], a[c], l && t[l], u === !0 && t.truncate, h !== void 0 && t.clamp, d),
+		style: h === void 0 ? f : {
+			"--text-lines": h,
+			...f
+		},
+		...p
+	});
+});
+export { o as Text };
+
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["styles","Text_module_default","sizeClasses","toneClasses","Text","forwardRef","Component","props","lines","truncate","cn","size","weight","tone","align","className","style"],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ElementType } from 'react';\nimport { cn } from '@/utils/cn';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  PolymorphicPropsWithRef,\n} from '@/utils/polymorphic';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';\nexport type TextTone =\n  'default' | 'muted' | 'inherit' | 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\nexport interface TextOwnProps {\n  /** @default 'md' */\n  size?: TextSize;\n  /** Defaults to the weight of the surrounding text. */\n  weight?: TextWeight;\n  /** @default 'default' */\n  tone?: TextTone;\n  align?: 'start' | 'center' | 'end';\n  /**\n   * `true` cuts the text to one line with an ellipsis; a number clamps it to that many lines.\n   * @default false\n   */\n  truncate?: boolean | number;\n}\n\nconst sizeClasses: Record<TextSize, string | undefined> = {\n  inherit: styles.sizeInherit,\n  xs: styles.sizeXs,\n  sm: styles.sizeSm,\n  md: styles.sizeMd,\n  lg: styles.sizeLg,\n  xl: styles.sizeXl,\n};\n\nconst toneClasses: Record<TextTone, string | undefined> = {\n  default: styles.toneDefault,\n  muted: styles.toneMuted,\n  inherit: styles.toneInherit,\n  primary: styles.tonePrimary,\n  success: styles.toneSuccess,\n  warning: styles.toneWarning,\n  danger: styles.toneDanger,\n  info: styles.toneInfo,\n};\n\nexport type TextProps<As extends ElementType = 'p'> = PolymorphicPropsWithRef<As, TextOwnProps>;\n\n/** Body text. Renders a paragraph by default; use `as` for inline text or other elements. */\nexport const Text = forwardRef<HTMLParagraphElement, PolymorphicProps<'p', TextOwnProps>>(\n  function Text(\n    {\n      as: Component = 'p',\n      size = 'md',\n      weight,\n      tone = 'default',\n      align,\n      truncate = false,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const lines = typeof truncate === 'number' ? truncate : undefined;\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          styles.text,\n          sizeClasses[size],\n          weight && styles[weight],\n          toneClasses[tone],\n          align && styles[align],\n          truncate === true && styles.truncate,\n          lines !== undefined && styles.clamp,\n          className,\n        )}\n        style={lines === undefined ? style : ({ '--text-lines': lines, ...style } as CSSProperties)}\n        {...props}\n      />\n    );\n  },\n) as PolymorphicComponent<'p', TextOwnProps>;\n"],"mappings":";;;;;;AA6BA,IAAME,IAAoD;CACxD,SAASF,EAAO;CAChB,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;AACb,GAEMG,IAAoD;CACxD,SAASH,EAAO;CAChB,OAAOA,EAAO;CACd,SAASA,EAAO;CAChB,SAASA,EAAO;CAChB,SAASA,EAAO;CAChB,SAASA,EAAO;CAChB,QAAQA,EAAO;CACf,MAAMA,EAAO;AACf,GAKaI,IAAOC,EAClB,SACE,EACE,IAAIC,IAAY,KAChB,UAAO,MACP,WACA,UAAO,WACP,UACA,cAAW,IACX,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAQ,OAAOC,KAAa,WAAWA,IAAW,KAAA;CAExD,OACE,kBAACH,GAAD;EACO;EACL,WAAWI,EACTV,EAAO,MACPE,EAAYS,IACZC,KAAUZ,EAAOY,IACjBT,EAAYU,IACZC,KAASd,EAAOc,IAChBL,MAAa,MAAQT,EAAO,UAC5BQ,MAAU,KAAA,KAAaR,EAAO,OAC9Be,CACF;EACA,OAAOP,MAAU,KAAA,IAAYQ,IAAS;GAAE,gBAAgBR;GAAO,GAAGQ;EAAM;EACxE,GAAIT;CACL,CAAA;AAEL,CACF"}

package/dist/components/Text/Text.module.js

@@ -0,0 +1,30 @@
+// src/components/Text/Text.module.css
+var e = "onyx-text-78lq0", t = "onyx-sizeInherit-G4GMi", n = "onyx-sizeXs-9Ok-b", r = "onyx-sizeSm-2Oiat", i = "onyx-sizeMd-k9dGF", a = "onyx-sizeLg-7aFQL", o = "onyx-sizeXl-LpJtS", s = "onyx-regular-Lo8tB", c = "onyx-medium-xqpTE", l = "onyx-semibold-yUnFf", u = "onyx-bold-lOfLu", d = "onyx-toneDefault-7B4RK", f = "onyx-toneMuted-MN5MD", p = "onyx-toneInherit-rraUC", m = "onyx-tonePrimary-pBMCm", h = "onyx-toneSuccess-DtrGc", g = "onyx-toneWarning-F8qKI", _ = "onyx-toneDanger-rEOI6", v = "onyx-toneInfo-meG5F", y = "onyx-start-du0tX", b = "onyx-center-AiQMQ", x = "onyx-end-BY5dh", S = "onyx-truncate-WVdAt", C = "onyx-clamp-KKAQd", w = {
+	text: e,
+	sizeInherit: t,
+	sizeXs: n,
+	sizeSm: r,
+	sizeMd: i,
+	sizeLg: a,
+	sizeXl: o,
+	regular: s,
+	medium: c,
+	semibold: l,
+	bold: u,
+	toneDefault: d,
+	toneMuted: f,
+	toneInherit: p,
+	tonePrimary: m,
+	toneSuccess: h,
+	toneWarning: g,
+	toneDanger: _,
+	toneInfo: v,
+	start: y,
+	center: b,
+	end: x,
+	truncate: S,
+	clamp: C
+};
+export { u as bold, b as center, C as clamp, w as default, x as end, c as medium, s as regular, l as semibold, t as sizeInherit, a as sizeLg, i as sizeMd, r as sizeSm, o as sizeXl, n as sizeXs, y as start, e as text, _ as toneDanger, d as toneDefault, v as toneInfo, p as toneInherit, f as toneMuted, m as tonePrimary, h as toneSuccess, g as toneWarning, S as truncate };
+
+//# sourceMappingURL=Text.module.js.map

package/dist/components/Text/Text.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.js","names":["text","sizeInherit","sizeXs","sizeSm","sizeMd","sizeLg","sizeXl","regular","medium","semibold","bold","toneDefault","toneMuted","toneInherit","tonePrimary","toneSuccess","toneWarning","toneDanger","toneInfo","start","center","end","truncate","clamp","Text_module_default"],"sources":["../../../src/components/Text/Text.module.css"],"sourcesContent":[".text {\n  --text-lines: 2;\n  margin: 0;\n}\n\n.sizeInherit {\n  font-size: inherit;\n}\n\n.sizeXs {\n  font-size: var(--font-size-xs);\n  line-height: var(--line-height-normal);\n}\n\n.sizeSm {\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n}\n\n.sizeMd {\n  font-size: var(--font-size-md);\n  line-height: var(--line-height-normal);\n}\n\n.sizeLg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-relaxed);\n}\n\n.sizeXl {\n  font-size: var(--font-size-xl);\n  line-height: var(--line-height-relaxed);\n}\n\n.regular {\n  font-weight: var(--font-weight-regular);\n}\n\n.medium {\n  font-weight: var(--font-weight-medium);\n}\n\n.semibold {\n  font-weight: var(--font-weight-semibold);\n}\n\n.bold {\n  font-weight: var(--font-weight-bold);\n}\n\n.toneDefault {\n  color: var(--color-text);\n}\n\n.toneMuted {\n  color: var(--color-text-muted);\n}\n\n.toneInherit {\n  color: inherit;\n}\n\n.tonePrimary {\n  color: var(--color-primary-text);\n}\n\n.toneSuccess {\n  color: var(--color-success-text);\n}\n\n.toneWarning {\n  color: var(--color-warning-text);\n}\n\n.toneDanger {\n  color: var(--color-danger-text);\n}\n\n.toneInfo {\n  color: var(--color-info-text);\n}\n\n.start {\n  text-align: start;\n}\n\n.center {\n  text-align: center;\n}\n\n.end {\n  text-align: end;\n}\n\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clamp {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-line-clamp: var(--text-lines);\n  line-clamp: var(--text-lines);\n  -webkit-box-orient: vertical;\n}\n"],"mappings":""}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text.js';
+export type { TextOwnProps, TextProps, TextSize, TextTone, TextWeight } from './Text.js';

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,17 @@
+import { TextareaHTMLAttributes } from 'react';
+import { FieldSize } from '../Input/index.js';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** @default 'md' */
+    size?: FieldSize;
+    /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */
+    invalid?: boolean;
+    /** @default 'vertical' */
+    resize?: 'none' | 'vertical' | 'both';
+    /**
+     * Grows with its content, starting from `rows`, in browsers that support `field-sizing`.
+     * @default false
+     */
+    autoResize?: boolean;
+}
+/** Multi-line text field. */
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useFieldControl as t } from "../FormField/formFieldContext.js";
+import n from "../../styles/field.module.js";
+import r from "./Textarea.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+// src/components/Textarea/Textarea.tsx
+var o = i(function({ size: i = "md", invalid: o, resize: s = "vertical", autoResize: c = !1, rows: l = 3, className: u, style: d, id: f, disabled: p, required: m, "aria-describedby": h, ...g }, _) {
+	let v = t({
+		id: f,
+		disabled: p,
+		required: m,
+		invalid: o,
+		"aria-describedby": h
+	});
+	return /* @__PURE__ */ a("textarea", {
+		ref: _,
+		rows: l,
+		id: v.id,
+		disabled: v.disabled,
+		required: v.required,
+		"aria-invalid": v["aria-invalid"],
+		"aria-describedby": v["aria-describedby"],
+		"data-invalid": v.invalid || void 0,
+		className: e(n.control, n[i], r.textarea, r[s], c && r.autoResize, u),
+		style: c ? {
+			"--textarea-rows": l,
+			...d
+		} : d,
+		...g
+	});
+});
+export { o as Textarea };
+
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":["field","styles","field_module_default","Textarea_module_default","Textarea","forwardRef","describedBy","props","control","useFieldControl","cn","size","resize","autoResize","className","rows","style"],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type TextareaHTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport field from '@/styles/field.module.css';\nimport { useFieldControl } from '../FormField/formFieldContext';\nimport type { FieldSize } from '../Input';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** @default 'md' */\n  size?: FieldSize;\n  /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */\n  invalid?: boolean;\n  /** @default 'vertical' */\n  resize?: 'none' | 'vertical' | 'both';\n  /**\n   * Grows with its content, starting from `rows`, in browsers that support `field-sizing`.\n   * @default false\n   */\n  autoResize?: boolean;\n}\n\n/** Multi-line text field. */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    size = 'md',\n    invalid,\n    resize = 'vertical',\n    autoResize = false,\n    rows = 3,\n    className,\n    style,\n    id,\n    disabled,\n    required,\n    'aria-describedby': describedBy,\n    ...props\n  },\n  ref,\n) {\n  const control = useFieldControl({\n    id,\n    disabled,\n    required,\n    invalid,\n    'aria-describedby': describedBy,\n  });\n\n  return (\n    <textarea\n      ref={ref}\n      rows={rows}\n      id={control.id}\n      disabled={control.disabled}\n      required={control.required}\n      aria-invalid={control['aria-invalid']}\n      aria-describedby={control['aria-describedby']}\n      data-invalid={control.invalid || undefined}\n      className={cn(\n        field.control,\n        field[size],\n        styles.textarea,\n        styles[resize],\n        autoResize && styles.autoResize,\n        className,\n      )}\n      style={autoResize ? ({ '--textarea-rows': rows, ...style } as CSSProperties) : style}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;AAsBA,IAAaI,IAAWC,EAA+C,SACrE,EACE,UAAO,MACP,YACA,YAAS,YACT,gBAAa,IACb,UAAO,GACP,cACA,UACA,OACA,aACA,aACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAgB;EAC9B;EACA;EACA;EACA;EACA,oBAAoBH;CACtB,CAAC;CAED,OACE,kBAAC,YAAD;EACO;EACC;EACN,IAAIE,EAAQ;EACZ,UAAUA,EAAQ;EAClB,UAAUA,EAAQ;EAClB,gBAAcA,EAAQ;EACtB,oBAAkBA,EAAQ;EAC1B,gBAAcA,EAAQ,WAAW,KAAA;EACjC,WAAWE,EACTV,EAAM,SACNA,EAAMW,IACNV,EAAO,UACPA,EAAOW,IACPC,KAAcZ,EAAO,YACrBa,CACF;EACA,OAAOD,IAAc;GAAE,mBAAmBE;GAAM,GAAGC;EAAM,IAAsBA;EAC/E,GAAIT;CACL,CAAA;AAEL,CAAC"}

package/dist/components/Textarea/Textarea.module.js

@@ -0,0 +1,11 @@
+// src/components/Textarea/Textarea.module.css
+var e = "onyx-textarea-Z-y6g", t = "onyx-none-nYidn", n = "onyx-vertical-J6yKE", r = "onyx-both-gSk8o", i = "onyx-autoResize-VaNSp", a = {
+	textarea: e,
+	none: t,
+	vertical: n,
+	both: r,
+	autoResize: i
+};
+export { i as autoResize, r as both, a as default, t as none, e as textarea, n as vertical };
+
+//# sourceMappingURL=Textarea.module.js.map

package/dist/components/Textarea/Textarea.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.module.js","names":["textarea","none","vertical","both","autoResize","Textarea_module_default"],"sources":["../../../src/components/Textarea/Textarea.module.css"],"sourcesContent":[".textarea {\n  --textarea-rows: 3;\n\n  display: block;\n  padding-block: var(--space-2);\n  line-height: var(--line-height-normal);\n}\n\n.none {\n  resize: none;\n}\n\n.vertical {\n  resize: vertical;\n}\n\n.both {\n  resize: both;\n}\n\n.autoResize {\n  field-sizing: content;\n  min-height: calc(var(--textarea-rows) * 1lh + var(--space-2) * 2);\n}\n"],"mappings":""}

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { ThemeName } from '../../tokens/index.js';
+/** A built-in theme or the name of a custom `[data-theme='<name>']` block. */
+export type ResolvedTheme = ThemeName | (string & Record<never, never>);
+/** A theme, or `system` to follow the operating system's `prefers-color-scheme`. */
+export type Theme = 'system' | ResolvedTheme;
+export interface ThemeProviderProps {
+    /**
+     * Theme used until the user picks one with `setTheme`.
+     * @default 'system'
+     */
+    defaultTheme?: Theme;
+    /**
+     * `localStorage` key that persists the user's choice.
+     * @default 'onyx-theme'
+     */
+    storageKey?: string;
+    children?: ReactNode;
+}
+export interface ThemeContextValue {
+    /** The chosen theme, `system` included. */
+    theme: Theme;
+    /** The theme applied to the page: `system` resolved to `light` or `dark`. */
+    resolvedTheme: ResolvedTheme;
+    /** Switches theme and persists the choice. */
+    setTheme: (theme: Theme) => void;
+}
+/**
+ * Applies a theme to the page by setting `data-theme` on `<html>`, follows the system preference
+ * in `system` mode and remembers the user's choice in `localStorage`.
+ *
+ * @example
+ * <ThemeProvider defaultTheme="system">
+ *   <App />
+ * </ThemeProvider>
+ */
+export declare function ThemeProvider({ defaultTheme, storageKey, children, }: ThemeProviderProps): import('react').JSX.Element;
+/** Reads and changes the current theme. Must be called inside a `ThemeProvider`. */
+export declare function useTheme(): ThemeContextValue;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,36 @@
+"use client";
+import { getServerStoredTheme as e, getServerSystemPrefersDark as t, getSystemPrefersDark as n, readStoredTheme as r, subscribeToStoredTheme as i, subscribeToSystemTheme as a, writeStoredTheme as o } from "./themeStore.js";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useLayoutEffect as d, useMemo as f, useSyncExternalStore as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
+// src/components/ThemeProvider/ThemeProvider.tsx
+var h = s(null), g = typeof window > "u" ? u : d;
+function _({ defaultTheme: s = "system", storageKey: l = "onyx-theme", children: u }) {
+	let d = p(i, () => r(l), e), _ = p(a, n, t), v = d || s, y = v === "system" ? _ ? "dark" : "light" : v;
+	g(() => {
+		let e = document.documentElement, t = e.getAttribute("data-theme");
+		return e.setAttribute("data-theme", y), () => {
+			t === null ? e.removeAttribute("data-theme") : e.setAttribute("data-theme", t);
+		};
+	}, [y]);
+	let b = c((e) => o(l, e), [l]), x = f(() => ({
+		theme: v,
+		resolvedTheme: y,
+		setTheme: b
+	}), [
+		v,
+		y,
+		b
+	]);
+	return /* @__PURE__ */ m(h.Provider, {
+		value: x,
+		children: u
+	});
+}
+function v() {
+	let e = l(h);
+	if (!e) throw Error("useTheme must be used inside a <ThemeProvider>.");
+	return e;
+}
+export { _ as ThemeProvider, v as useTheme };
+
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/components/ThemeProvider/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","names":["ThemeContext","createContext","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","ThemeProvider","storedTheme","useSyncExternalStore","subscribeToStoredTheme","readStoredTheme","storageKey","getServerStoredTheme","prefersDark","subscribeToSystemTheme","getSystemPrefersDark","getServerSystemPrefersDark","theme","defaultTheme","resolvedTheme","root","previous","setTheme","useCallback","writeStoredTheme","next","value","useMemo","useTheme","context","useContext"],"sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useSyncExternalStore,\n  type ReactNode,\n} from 'react';\nimport type { ThemeName } from '@/tokens';\nimport {\n  getServerStoredTheme,\n  getServerSystemPrefersDark,\n  getSystemPrefersDark,\n  readStoredTheme,\n  subscribeToStoredTheme,\n  subscribeToSystemTheme,\n  writeStoredTheme,\n} from './themeStore';\n\n/** A built-in theme or the name of a custom `[data-theme='<name>']` block. */\nexport type ResolvedTheme = ThemeName | (string & Record<never, never>);\n\n/** A theme, or `system` to follow the operating system's `prefers-color-scheme`. */\nexport type Theme = 'system' | ResolvedTheme;\n\nexport interface ThemeProviderProps {\n  /**\n   * Theme used until the user picks one with `setTheme`.\n   * @default 'system'\n   */\n  defaultTheme?: Theme;\n  /**\n   * `localStorage` key that persists the user's choice.\n   * @default 'onyx-theme'\n   */\n  storageKey?: string;\n  children?: ReactNode;\n}\n\nexport interface ThemeContextValue {\n  /** The chosen theme, `system` included. */\n  theme: Theme;\n  /** The theme applied to the page: `system` resolved to `light` or `dark`. */\n  resolvedTheme: ResolvedTheme;\n  /** Switches theme and persists the choice. */\n  setTheme: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * Applies a theme to the page by setting `data-theme` on `<html>`, follows the system preference\n * in `system` mode and remembers the user's choice in `localStorage`.\n *\n * @example\n * <ThemeProvider defaultTheme=\"system\">\n *   <App />\n * </ThemeProvider>\n */\nexport function ThemeProvider({\n  defaultTheme = 'system',\n  storageKey = 'onyx-theme',\n  children,\n}: ThemeProviderProps) {\n  const storedTheme = useSyncExternalStore(\n    subscribeToStoredTheme,\n    () => readStoredTheme(storageKey),\n    getServerStoredTheme,\n  );\n  const prefersDark = useSyncExternalStore(\n    subscribeToSystemTheme,\n    getSystemPrefersDark,\n    getServerSystemPrefersDark,\n  );\n\n  const theme = storedTheme || defaultTheme;\n  const resolvedTheme = theme === 'system' ? (prefersDark ? 'dark' : 'light') : theme;\n\n  // Layout effect, so the theme is in place before the first paint.\n  useIsomorphicLayoutEffect(() => {\n    const root = document.documentElement;\n    const previous = root.getAttribute('data-theme');\n    root.setAttribute('data-theme', resolvedTheme);\n\n    return () => {\n      if (previous === null) root.removeAttribute('data-theme');\n      else root.setAttribute('data-theme', previous);\n    };\n  }, [resolvedTheme]);\n\n  const setTheme = useCallback((next: Theme) => writeStoredTheme(storageKey, next), [storageKey]);\n\n  const value = useMemo(\n    () => ({ theme, resolvedTheme, setTheme }),\n    [theme, resolvedTheme, setTheme],\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/** Reads and changes the current theme. Must be called inside a `ThemeProvider`. */\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n  if (!context) throw new Error('useTheme must be used inside a <ThemeProvider>.');\n  return context;\n}\n"],"mappings":";;;;;AAkDA,IAAMA,IAAeC,EAAwC,IAAI,GAE3DC,IAA4B,OAAO,SAAW,MAAcC,IAAYC;AAW9E,SAAgBC,EAAc,EAC5B,kBAAe,UACf,gBAAa,cACb,eACqB;CACrB,IAAMC,IAAcC,EAClBC,SACMC,EAAgBC,CAAU,GAChCC,CACF,GACMC,IAAcL,EAClBM,GACAC,GACAC,CACF,GAEMC,IAAQV,KAAeW,GACvBC,IAAgBF,MAAU,WAAYJ,IAAc,SAAS,UAAWI;CAG9E,QAAgC;EAC9B,IAAMG,IAAO,SAAS,iBAChBC,IAAWD,EAAK,aAAa,YAAY;EAG/C,OAFAA,EAAK,aAAa,cAAcD,CAAa,SAEhC;GACX,AAAIE,MAAa,OAAMD,EAAK,gBAAgB,YAAY,IACnDA,EAAK,aAAa,cAAcC,CAAQ;EAC/C;CACF,GAAG,CAACF,CAAa,CAAC;CAElB,IAAMG,IAAWC,GAAa,MAAgBC,EAAiBb,GAAYc,CAAI,GAAG,CAACd,CAAU,CAAC,GAExFe,IAAQC,SACL;EAAE;EAAO;EAAe;CAAS,IACxC;EAACV;EAAOE;EAAeG;CAAQ,CACjC;CAEA,OAAO,kBAACrB,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAC/E;AAGA,SAAgB2B,IAA8B;CAC5C,IAAMC,IAAUC,EAAW7B,CAAY;CACvC,IAAI,CAAC4B,GAAS,MAAU,MAAM,iDAAiD;CAC/E,OAAOA;AACT"}

package/dist/components/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './ThemeProvider.js';
+export type { ResolvedTheme, Theme, ThemeContextValue, ThemeProviderProps } from './ThemeProvider.js';

package/dist/components/ThemeProvider/themeStore.d.ts

@@ -0,0 +1,8 @@
+export declare function subscribeToSystemTheme(onChange: () => void): () => void;
+export declare const getSystemPrefersDark: () => boolean;
+export declare const getServerSystemPrefersDark: () => boolean;
+export declare function readStoredTheme(key: string): string | null;
+export declare function writeStoredTheme(key: string, theme: string): void;
+/** Notifies on writes from this page and, through the `storage` event, from other tabs. */
+export declare function subscribeToStoredTheme(onChange: () => void): () => void;
+export declare const getServerStoredTheme: () => null;

package/dist/components/ThemeProvider/themeStore.js

@@ -0,0 +1,36 @@
+// src/components/ThemeProvider/themeStore.ts
+var e = "(prefers-color-scheme: dark)", t = () => typeof window < "u" && typeof window.matchMedia == "function";
+function n(n) {
+	if (!t()) return () => {};
+	let r = window.matchMedia(e);
+	return r.addEventListener("change", n), () => r.removeEventListener("change", n);
+}
+var r = () => t() && window.matchMedia(e).matches, i = () => !1, a = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Set();
+function s(e) {
+	if (a.has(e)) return a.get(e);
+	try {
+		return window.localStorage.getItem(e);
+	} catch {
+		return null;
+	}
+}
+function c(e, t) {
+	try {
+		window.localStorage.setItem(e, t), a.delete(e);
+	} catch {
+		a.set(e, t);
+	}
+	o.forEach((e) => e());
+}
+function l(e) {
+	let t = (t) => {
+		t.key === null ? a.clear() : a.delete(t.key), e();
+	};
+	return o.add(e), window.addEventListener("storage", t), () => {
+		o.delete(e), window.removeEventListener("storage", t);
+	};
+}
+var u = () => null;
+export { u as getServerStoredTheme, i as getServerSystemPrefersDark, r as getSystemPrefersDark, s as readStoredTheme, l as subscribeToStoredTheme, n as subscribeToSystemTheme, c as writeStoredTheme };
+
+//# sourceMappingURL=themeStore.js.map

package/dist/components/ThemeProvider/themeStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeStore.js","names":["darkQuery","canMatchMedia","subscribeToSystemTheme","query","onChange","getSystemPrefersDark","getServerSystemPrefersDark","unsaved","listeners","readStoredTheme","key","writeStoredTheme","theme","listener","subscribeToStoredTheme","onStorage","event","getServerStoredTheme"],"sources":["../../../src/components/ThemeProvider/themeStore.ts"],"sourcesContent":["// External stores read with `useSyncExternalStore`, so the server and the hydration pass render\n// with the server snapshot and the client switches to the real value right after.\n\nconst darkQuery = '(prefers-color-scheme: dark)';\n\nconst canMatchMedia = () =>\n  typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nexport function subscribeToSystemTheme(onChange: () => void): () => void {\n  if (!canMatchMedia()) return () => {};\n\n  const query = window.matchMedia(darkQuery);\n  query.addEventListener('change', onChange);\n  return () => query.removeEventListener('change', onChange);\n}\n\nexport const getSystemPrefersDark = () => canMatchMedia() && window.matchMedia(darkQuery).matches;\n\nexport const getServerSystemPrefersDark = () => false;\n\n/**\n * Values that could not be written to `localStorage` (blocked storage, quota, private mode).\n * They keep the choice for the rest of the session even though it won't survive a reload.\n */\nconst unsaved = new Map<string, string>();\nconst listeners = new Set<() => void>();\n\nexport function readStoredTheme(key: string): string | null {\n  if (unsaved.has(key)) return unsaved.get(key)!;\n  try {\n    return window.localStorage.getItem(key);\n  } catch {\n    return null;\n  }\n}\n\nexport function writeStoredTheme(key: string, theme: string): void {\n  try {\n    window.localStorage.setItem(key, theme);\n    unsaved.delete(key);\n  } catch {\n    unsaved.set(key, theme);\n  }\n  listeners.forEach((listener) => listener());\n}\n\n/** Notifies on writes from this page and, through the `storage` event, from other tabs. */\nexport function subscribeToStoredTheme(onChange: () => void): () => void {\n  const onStorage = (event: StorageEvent) => {\n    if (event.key === null) unsaved.clear();\n    else unsaved.delete(event.key);\n    onChange();\n  };\n\n  listeners.add(onChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    listeners.delete(onChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\nexport const getServerStoredTheme = () => null;\n"],"mappings":";AAGA,IAAMA,IAAY,gCAEZC,UACJ,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe;AAEhE,SAAgBC,EAAuB,GAAkC;CACvE,IAAI,CAACD,EAAc,GAAG,aAAa,CAAC;CAEpC,IAAME,IAAQ,OAAO,WAAWH,CAAS;CAEzC,OADAG,EAAM,iBAAiB,UAAUC,CAAQ,SAC5BD,EAAM,oBAAoB,UAAUC,CAAQ;AAC3D;AAEA,IAAaC,UAA6BJ,EAAc,KAAK,OAAO,WAAWD,CAAS,CAAC,CAAC,SAE7EM,UAAmC,IAM1CC,oBAAU,IAAI,IAAoB,GAClCC,oBAAY,IAAI,IAAgB;AAEtC,SAAgBC,EAAgB,GAA4B;CAC1D,IAAIF,EAAQ,IAAIG,CAAG,GAAG,OAAOH,EAAQ,IAAIG,CAAG;CAC5C,IAAI;EACF,OAAO,OAAO,aAAa,QAAQA,CAAG;CACxC,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAgBC,EAAiB,GAAa,GAAqB;CACjE,IAAI;EAEF,AADA,OAAO,aAAa,QAAQD,GAAKE,CAAK,GACtCL,EAAQ,OAAOG,CAAG;CACpB,QAAQ;EACN,EAAQ,IAAIA,GAAKE,CAAK;CACxB;CACA,EAAU,SAAS,MAAaC,EAAS,CAAC;AAC5C;AAGA,SAAgBC,EAAuB,GAAkC;CACvE,IAAMC,KAAa,MAAwB;EAGzC,AAFIC,EAAM,QAAQ,OAAMT,EAAQ,MAAM,IACjCA,EAAQ,OAAOS,EAAM,GAAG,GAC7BZ,EAAS;CACX;CAIA,OAFAI,EAAU,IAAIJ,CAAQ,GACtB,OAAO,iBAAiB,WAAWW,CAAS,SAC/B;EAEX,AADAP,EAAU,OAAOJ,CAAQ,GACzB,OAAO,oBAAoB,WAAWW,CAAS;CACjD;AACF;AAEA,IAAaE,UAA6B"}