@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Skeleton.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Skeleton/Skeleton.tsx
+var i = n(function({ variant: n = "text", width: i, height: a, lines: o = 1, className: s, style: c, ...l }, u) {
+	let d = {
+		width: i,
+		height: n === "text" ? void 0 : a,
+		...c
+	};
+	return n === "text" && o > 1 ? /* @__PURE__ */ r("span", {
+		ref: u,
+		"aria-hidden": "true",
+		className: e(t.lines, s),
+		style: {
+			width: i,
+			...c
+		},
+		...l,
+		children: Array.from({ length: o }, (n, i) => /* @__PURE__ */ r("span", { className: e(t.skeleton, t.text) }, i))
+	}) : /* @__PURE__ */ r("span", {
+		ref: u,
+		"aria-hidden": "true",
+		className: e(t.skeleton, t[n], s),
+		style: d,
+		...l
+	});
+});
+export { i as Skeleton };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["styles","Skeleton_module_default","Skeleton","forwardRef","props","shapeStyle","variant","height","style","lines","cn","className","index"],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Skeleton.module.css';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * `text` matches a line of the surrounding text, `rect` a block and `circle` an avatar.\n   * @default 'text'\n   */\n  variant?: 'text' | 'rect' | 'circle';\n  /** CSS width. Numbers are pixels. Lines of text fill the container by default. */\n  width?: CSSProperties['width'];\n  /** CSS height. Numbers are pixels. Ignored by text, which takes the line height. */\n  height?: CSSProperties['height'];\n  /**\n   * Lines of text to draw; the last one is shorter.\n   * @default 1\n   */\n  lines?: number;\n}\n\n/**\n * Placeholder shaped like content that is still loading. It is hidden from assistive technology:\n * mark the region that is loading with `aria-busy` and announce the outcome elsewhere.\n */\nexport const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(function Skeleton(\n  { variant = 'text', width, height, lines = 1, className, style, ...props },\n  ref,\n) {\n  const shapeStyle: CSSProperties = {\n    width,\n    height: variant === 'text' ? undefined : height,\n    ...style,\n  };\n\n  if (variant === 'text' && lines > 1) {\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(styles.lines, className)}\n        style={{ width, ...style }}\n        {...props}\n      >\n        {Array.from({ length: lines }, (_, index) => (\n          <span key={index} className={cn(styles.skeleton, styles.text)} />\n        ))}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(styles.skeleton, styles[variant], className)}\n      style={shapeStyle}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAyBA,IAAaE,IAAWC,EAA2C,SACjE,EAAE,aAAU,QAAQ,UAAO,WAAQ,WAAQ,GAAG,cAAW,UAAO,GAAGC,KACnE,GACA;CACA,IAAMC,IAA4B;EAChC;EACA,QAAQC,MAAY,SAAS,KAAA,IAAYC;EACzC,GAAGC;CACL;CAkBA,OAhBIF,MAAY,UAAUG,IAAQ,IAE9B,kBAAC,QAAD;EACO;EACL,eAAY;EACZ,WAAWC,EAAGV,EAAO,OAAOW,CAAS;EACrC,OAAO;GAAE;GAAO,GAAGH;EAAM;EACzB,GAAIJ;EAEH,UAAA,MAAM,KAAK,EAAE,QAAQK,EAAM,IAAI,GAAG,MACjC,kBAAC,QAAD,EAAkB,WAAWC,EAAGV,EAAO,UAAUA,EAAO,IAAI,EAAI,GAArDY,CAAqD,CACjE;CACG,CAAA,IAKR,kBAAC,QAAD;EACO;EACL,eAAY;EACZ,WAAWF,EAAGV,EAAO,UAAUA,EAAOM,IAAUK,CAAS;EACzD,OAAON;EACP,GAAID;CACL,CAAA;AAEL,CAAC"}

package/dist/components/Skeleton/Skeleton.module.js

@@ -0,0 +1,12 @@
+// src/components/Skeleton/Skeleton.module.css
+var e = "onyx-skeleton-CB4uF", t = "onyx-shimmer-lXHal", n = "onyx-text--A8IF", r = "onyx-rect-do1uR", i = "onyx-circle-DYcl8", a = "onyx-lines-AvXPO", o = {
+	skeleton: e,
+	shimmer: t,
+	text: n,
+	rect: r,
+	circle: i,
+	lines: a
+};
+export { i as circle, o as default, a as lines, r as rect, t as shimmer, e as skeleton, n as text };
+
+//# sourceMappingURL=Skeleton.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.js","names":["skeleton","shimmer","text","rect","circle","lines","Skeleton_module_default"],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":[".skeleton {\n  display: block;\n  background-color: var(--color-bg-muted);\n  background-image: linear-gradient(\n    90deg,\n    transparent,\n    color-mix(in srgb, var(--color-surface) 60%, transparent),\n    transparent\n  );\n  background-repeat: no-repeat;\n  background-size: 50% 100%;\n  animation: shimmer calc(var(--duration-slower) * 3) var(--easing-standard) infinite;\n}\n\n.text {\n  width: 100%;\n  height: 1lh;\n  border-radius: var(--radius-sm);\n  background-clip: content-box;\n  padding-block: 0.2lh;\n}\n\n.rect {\n  width: 100%;\n  height: var(--space-24);\n  border-radius: var(--radius-md);\n}\n\n.circle {\n  width: var(--size-control-md);\n  height: var(--size-control-md);\n  border-radius: var(--radius-full);\n}\n\n.lines {\n  display: block;\n}\n\n.lines > .text:last-child:not(:first-child) {\n  width: 60%;\n}\n\n@keyframes shimmer {\n  from {\n    background-position: -100% 0;\n  }\n\n  to {\n    background-position: 200% 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .skeleton {\n    background-image: none;\n    animation: none;\n  }\n}\n"],"mappings":""}

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

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

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, InputHTMLAttributes } from 'react';
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> {
+    /** Current value, for a controlled slider. */
+    value?: number;
+    /** Initial value, for an uncontrolled slider. Defaults to `min`. */
+    defaultValue?: number;
+    /** Called with the new value while the user drags or presses keys. */
+    onValueChange?: (value: number) => void;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** @default 1 */
+    step?: number;
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */
+    invalid?: boolean;
+    /**
+     * Turns the value into readable text, used for `aria-valuetext` and the visible value,
+     * e.g. `(value) => `${value}%``.
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Shows the formatted value next to the track.
+     * @default false
+     */
+    showValue?: boolean;
+    /** Class of the outer box. Other props go to the `<input>`. */
+    className?: string;
+    /** Style of the outer box. */
+    style?: CSSProperties;
+}
+/**
+ * Picks a number from a range. Built on the native range input, so arrow keys, Page Up/Down and
+ * Home/End work as the ARIA slider pattern describes.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,55 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { useFieldControl as n } from "../FormField/formFieldContext.js";
+import r from "./Slider.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Slider/Slider.tsx
+var s = i(function({ value: i, defaultValue: s, onValueChange: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, size: p = "md", invalid: m, formatValue: h, showValue: g = !1, className: _, style: v, id: y, disabled: b, required: x, "aria-describedby": S, ...C }, w) {
+	let T = n({
+		id: y,
+		disabled: b,
+		required: x,
+		invalid: m,
+		"aria-describedby": S
+	}), [E, D] = e({
+		value: i,
+		defaultValue: s ?? u,
+		onChange: c
+	}), O = d > u ? (E - u) / (d - u) * 100 : 0, k = h?.(E);
+	return /* @__PURE__ */ o("div", {
+		className: t(r.slider, r[p], _),
+		style: {
+			"--slider-progress": `${O}%`,
+			...v
+		},
+		children: [/* @__PURE__ */ a("input", {
+			ref: w,
+			type: "range",
+			id: T.id,
+			min: u,
+			max: d,
+			step: f,
+			value: E,
+			disabled: T.disabled,
+			required: T.required,
+			"aria-invalid": T["aria-invalid"],
+			"aria-describedby": T["aria-describedby"],
+			"aria-valuetext": k,
+			"data-invalid": T.invalid || void 0,
+			className: r.input,
+			onChange: (e) => {
+				l?.(e), D(e.target.valueAsNumber);
+			},
+			...C
+		}), g && /* @__PURE__ */ a("span", {
+			className: r.value,
+			"aria-hidden": "true",
+			children: k ?? E
+		})]
+	});
+});
+export { s as Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["styles","Slider_module_default","Slider","forwardRef","describedBy","props","control","useFieldControl","current","setCurrent","useControllableState","defaultValue","min","onValueChange","progress","max","valueText","formatValue","cn","size","className","style","onChange","event","showValue"],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type InputHTMLAttributes } from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport { useFieldControl } from '../FormField/formFieldContext';\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'\n> {\n  /** Current value, for a controlled slider. */\n  value?: number;\n  /** Initial value, for an uncontrolled slider. Defaults to `min`. */\n  defaultValue?: number;\n  /** Called with the new value while the user drags or presses keys. */\n  onValueChange?: (value: number) => void;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** @default 1 */\n  step?: number;\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */\n  invalid?: boolean;\n  /**\n   * Turns the value into readable text, used for `aria-valuetext` and the visible value,\n   * e.g. `(value) => `${value}%``.\n   */\n  formatValue?: (value: number) => string;\n  /**\n   * Shows the formatted value next to the track.\n   * @default false\n   */\n  showValue?: boolean;\n  /** Class of the outer box. Other props go to the `<input>`. */\n  className?: string;\n  /** Style of the outer box. */\n  style?: CSSProperties;\n}\n\n/**\n * Picks a number from a range. Built on the native range input, so arrow keys, Page Up/Down and\n * Home/End work as the ARIA slider pattern describes.\n */\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    value,\n    defaultValue,\n    onValueChange,\n    onChange,\n    min = 0,\n    max = 100,\n    step = 1,\n    size = 'md',\n    invalid,\n    formatValue,\n    showValue = false,\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  const [current, setCurrent] = useControllableState({\n    value,\n    defaultValue: defaultValue ?? min,\n    onChange: onValueChange,\n  });\n  const progress = max > min ? ((current - min) / (max - min)) * 100 : 0;\n  const valueText = formatValue?.(current);\n\n  return (\n    <div\n      className={cn(styles.slider, styles[size], className)}\n      style={{ '--slider-progress': `${progress}%`, ...style } as CSSProperties}\n    >\n      <input\n        ref={ref}\n        type=\"range\"\n        id={control.id}\n        min={min}\n        max={max}\n        step={step}\n        value={current}\n        disabled={control.disabled}\n        required={control.required}\n        aria-invalid={control['aria-invalid']}\n        aria-describedby={control['aria-describedby']}\n        aria-valuetext={valueText}\n        data-invalid={control.invalid || undefined}\n        className={styles.input}\n        onChange={(event) => {\n          onChange?.(event);\n          setCurrent(event.target.valueAsNumber);\n        }}\n        {...props}\n      />\n      {showValue && (\n        <span className={styles.value} aria-hidden=\"true\">\n          {valueText ?? current}\n        </span>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AA8CA,IAAaE,IAASC,EAA0C,SAC9D,EACE,UACA,iBACA,kBACA,aACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,UAAO,MACP,YACA,gBACA,eAAY,IACZ,cACA,UACA,OACA,aACA,aACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAgB;EAC9B;EACA;EACA;EACA;EACA,oBAAoBH;CACtB,CAAC,GACK,CAACI,GAASC,KAAcC,EAAqB;EACjD;EACA,cAAcC,KAAgBC;EAC9B,UAAUC;CACZ,CAAC,GACKC,IAAWC,IAAMH,KAAQJ,IAAUI,MAAQG,IAAMH,KAAQ,MAAM,GAC/DI,IAAYC,IAAcT,CAAO;CAEvC,OACE,kBAAC,OAAD;EACE,WAAWU,EAAGlB,EAAO,QAAQA,EAAOmB,IAAOC,CAAS;EACpD,OAAO;GAAE,qBAAqB,GAAGN,EAAS;GAAI,GAAGO;EAAM;EAFzD,UAAA,CAIE,kBAAC,SAAD;GACO;GACL,MAAK;GACL,IAAIf,EAAQ;GACP;GACA;GACC;GACN,OAAOE;GACP,UAAUF,EAAQ;GAClB,UAAUA,EAAQ;GAClB,gBAAcA,EAAQ;GACtB,oBAAkBA,EAAQ;GAC1B,kBAAgBU;GAChB,gBAAcV,EAAQ,WAAW,KAAA;GACjC,WAAWN,EAAO;GAClB,WAAW,MAAU;IAEnB,AADAsB,IAAWC,CAAK,GAChBd,EAAWc,EAAM,OAAO,aAAa;GACvC;GACA,GAAIlB;EACL,CAAA,GACAmB,KACC,kBAAC,QAAD;GAAM,WAAWxB,EAAO;GAAO,eAAY;GACxC,UAAAgB,KAAaR;EACV,CAAA,CAEL;;AAET,CAAC"}

package/dist/components/Slider/Slider.module.js

@@ -0,0 +1,11 @@
+// src/components/Slider/Slider.module.css
+var e = "onyx-slider-fNm-S", t = "onyx-sm-ZHpcb", n = "onyx-lg-qZ1wE", r = "onyx-input-J48Um", i = "onyx-value--33zj", a = {
+	slider: e,
+	sm: t,
+	lg: n,
+	input: r,
+	value: i
+};
+export { a as default, r as input, n as lg, e as slider, t as sm, i as value };
+
+//# sourceMappingURL=Slider.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.js","names":["slider","sm","lg","input","value","Slider_module_default"],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".slider {\n  --slider-progress: 0%;\n  --slider-track: var(--space-1);\n  --slider-thumb: var(--size-icon-md);\n  --slider-fill: var(--color-primary);\n  --slider-ring:\n    0 0 0 var(--focus-ring-offset) var(--color-surface),\n    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--color-focus);\n\n  display: flex;\n  gap: var(--space-3);\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n}\n\n.sm {\n  --slider-track: var(--space-1);\n  --slider-thumb: var(--size-icon-sm);\n}\n\n.lg {\n  --slider-track: var(--space-2);\n  --slider-thumb: var(--size-icon-lg);\n}\n\n.input {\n  flex: 1;\n  min-width: 0;\n  height: var(--slider-thumb);\n  margin: 0;\n  cursor: pointer;\n  background: transparent;\n  appearance: none;\n}\n\n.input:focus-visible {\n  outline: none;\n}\n\n.input::-webkit-slider-runnable-track {\n  height: var(--slider-track);\n  background: linear-gradient(\n    to right,\n    var(--slider-fill) var(--slider-progress),\n    var(--color-bg-muted) var(--slider-progress)\n  );\n  border-radius: var(--radius-full);\n}\n\n.input::-moz-range-track {\n  height: var(--slider-track);\n  background-color: var(--color-bg-muted);\n  border-radius: var(--radius-full);\n}\n\n.input::-moz-range-progress {\n  height: var(--slider-track);\n  background-color: var(--slider-fill);\n  border-radius: var(--radius-full);\n}\n\n.input::-webkit-slider-thumb {\n  width: var(--slider-thumb);\n  height: var(--slider-thumb);\n  margin-top: calc((var(--slider-track) - var(--slider-thumb)) / 2);\n  background-color: var(--color-surface);\n  border: var(--border-width-thick) solid var(--slider-fill);\n  border-radius: var(--radius-full);\n  box-shadow: var(--shadow-sm);\n  transition: transform var(--duration-fast) var(--easing-standard);\n  appearance: none;\n}\n\n.input::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--slider-thumb);\n  height: var(--slider-thumb);\n  background-color: var(--color-surface);\n  border: var(--border-width-thick) solid var(--slider-fill);\n  border-radius: var(--radius-full);\n  box-shadow: var(--shadow-sm);\n  transition: transform var(--duration-fast) var(--easing-standard);\n}\n\n.input:hover:not(:disabled)::-webkit-slider-thumb {\n  transform: scale(1.1);\n}\n\n.input:hover:not(:disabled)::-moz-range-thumb {\n  transform: scale(1.1);\n}\n\n.input:focus-visible::-webkit-slider-thumb {\n  box-shadow: var(--slider-ring);\n}\n\n.input:focus-visible::-moz-range-thumb {\n  box-shadow: var(--slider-ring);\n}\n\n.input:active:not(:disabled)::-webkit-slider-thumb {\n  background-color: var(--color-primary-subtle);\n}\n\n.input:active:not(:disabled)::-moz-range-thumb {\n  background-color: var(--color-primary-subtle);\n}\n\n.slider:has(.input[data-invalid]) {\n  --slider-fill: var(--color-danger);\n}\n\n.slider:has(.input:disabled) {\n  --slider-fill: var(--color-text-disabled);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n:dir(rtl) .input::-webkit-slider-runnable-track {\n  background: linear-gradient(\n    to left,\n    var(--slider-fill) var(--slider-progress),\n    var(--color-bg-muted) var(--slider-progress)\n  );\n}\n\n.value {\n  min-width: 3ch;\n  font-size: var(--font-size-sm);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text);\n  text-align: end;\n}\n\n@media (pointer: coarse) {\n  .input {\n    height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

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

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

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * `inherit` follows the font size of the surrounding text.
+     * @default 'md'
+     */
+    size?: SpinnerSize;
+    /**
+     * Text announced to assistive technology.
+     * @default 'Loading'
+     */
+    label?: string;
+    /**
+     * Hides the spinner from assistive technology, for when something else (such as a busy button)
+     * already conveys the loading state.
+     * @default false
+     */
+    decorative?: boolean;
+}
+/** Indeterminate loading indicator, announced as a status message unless decorative. */
+export declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
+import n from "./Spinner.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/components/Spinner/Spinner.tsx
+var o = r(function({ size: r = "md", label: o = "Loading", decorative: s = !1, className: c, ...l }, u) {
+	return /* @__PURE__ */ a("span", {
+		ref: u,
+		role: s ? void 0 : "status",
+		"aria-hidden": s || void 0,
+		className: e(n.spinner, n[r], c),
+		...l,
+		children: [/* @__PURE__ */ a("svg", {
+			className: n.svg,
+			viewBox: "0 0 24 24",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [/* @__PURE__ */ i("circle", {
+				className: n.track,
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}), /* @__PURE__ */ i("path", {
+				className: n.arc,
+				d: "M12 2a10 10 0 0 1 10 10"
+			})]
+		}), !s && /* @__PURE__ */ i(t, { children: o })]
+	});
+});
+export { o as Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["styles","Spinner_module_default","Spinner","forwardRef","props","decorative","cn","size","className","VisuallyHidden","label"],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport type SpinnerSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * `inherit` follows the font size of the surrounding text.\n   * @default 'md'\n   */\n  size?: SpinnerSize;\n  /**\n   * Text announced to assistive technology.\n   * @default 'Loading'\n   */\n  label?: string;\n  /**\n   * Hides the spinner from assistive technology, for when something else (such as a busy button)\n   * already conveys the loading state.\n   * @default false\n   */\n  decorative?: boolean;\n}\n\n/** Indeterminate loading indicator, announced as a status message unless decorative. */\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  { size = 'md', label = 'Loading', decorative = false, className, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role={decorative ? undefined : 'status'}\n      aria-hidden={decorative || undefined}\n      className={cn(styles.spinner, styles[size], className)}\n      {...props}\n    >\n      <svg className={styles.svg} viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n        <circle className={styles.track} cx=\"12\" cy=\"12\" r=\"10\" />\n        <path className={styles.arc} d=\"M12 2a10 10 0 0 1 10 10\" />\n      </svg>\n      {!decorative && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;AA2BA,IAAaE,IAAUC,EAA0C,SAC/D,EAAE,UAAO,MAAM,WAAQ,WAAW,gBAAa,IAAO,cAAW,GAAGC,KACpE,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,MAAMC,IAAa,KAAA,IAAY;EAC/B,eAAaA,KAAc,KAAA;EAC3B,WAAWC,EAAGN,EAAO,SAASA,EAAOO,IAAOC,CAAS;EACrD,GAAIJ;EALN,UAAA,CAOE,kBAAC,OAAD;GAAK,WAAWJ,EAAO;GAAK,SAAQ;GAAY,eAAY;GAAO,WAAU;GAA7E,UAAA,CACE,kBAAC,UAAD;IAAQ,WAAWA,EAAO;IAAO,IAAG;IAAK,IAAG;IAAK,GAAE;GAAM,CAAA,GACzD,kBAAC,QAAD;IAAM,WAAWA,EAAO;IAAK,GAAE;GAA2B,CAAA,CACvD;EACJ,CAAA,GAAA,CAACK,KAAc,kBAACI,GAAD,EAAA,UAAiBC,EAAsB,CAAA,CACnD;;AAEV,CAAC"}

package/dist/components/Spinner/Spinner.module.js

@@ -0,0 +1,17 @@
+// src/components/Spinner/Spinner.module.css
+var e = "onyx-spinner-GpFZS", t = "onyx-svg-XPHwn", n = "onyx-spin-LFfLH", r = "onyx-track-AnRwm", i = "onyx-arc-e1vFG", a = "onyx-inherit-lyj9z", o = "onyx-xs-p8BFI", s = "onyx-sm-3sIoD", c = "onyx-md-M2sPj", l = "onyx-lg-IxTw2", u = "onyx-xl-cgwqq", d = {
+	spinner: e,
+	svg: t,
+	spin: n,
+	track: r,
+	arc: i,
+	inherit: a,
+	xs: o,
+	sm: s,
+	md: c,
+	lg: l,
+	xl: u
+};
+export { i as arc, d as default, a as inherit, l as lg, c as md, s as sm, n as spin, e as spinner, t as svg, r as track, u as xl, o as xs };
+
+//# sourceMappingURL=Spinner.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.js","names":["spinner","svg","spin","track","arc","inherit","xs","sm","md","lg","xl","Spinner_module_default"],"sources":["../../../src/components/Spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n  display: inline-flex;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.svg {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 3;\n  animation: spin calc(var(--duration-slower) * 1.5) var(--easing-linear) infinite;\n}\n\n.track {\n  opacity: 0.25;\n}\n\n.arc {\n  stroke-linecap: round;\n}\n\n.inherit {\n  width: 1em;\n  height: 1em;\n}\n\n.xs {\n  width: var(--size-icon-xs);\n  height: var(--size-icon-xs);\n}\n\n.sm {\n  width: var(--size-icon-sm);\n  height: var(--size-icon-sm);\n}\n\n.md {\n  width: var(--size-icon-md);\n  height: var(--size-icon-md);\n}\n\n.lg {\n  width: var(--size-icon-lg);\n  height: var(--size-icon-lg);\n}\n\n.xl {\n  width: var(--size-icon-xl);\n  height: var(--size-icon-xl);\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .svg {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner.js';
+export type { SpinnerProps, SpinnerSize } from './Spinner.js';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { ChoiceSize } from '../Checkbox/index.js';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Label shown next to the switch. Without it, name the switch with `aria-label`. */
+    children?: ReactNode;
+    /** Extra text below the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** @default 'md' */
+    size?: ChoiceSize;
+    /** Called with the new on/off state. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * On/off toggle for a setting that applies right away. Uses `checked`/`defaultChecked` like a
+ * checkbox and is announced as a switch.
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "../../styles/choice.module.js";
+import n from "./Switch.module.js";
+import { forwardRef as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Switch/Switch.tsx
+var s = r(function({ children: r, description: s, size: c = "md", onCheckedChange: l, onChange: u, className: d, style: f, id: p, "aria-describedby": m, ...h }, g) {
+	let _ = i(), v = p ?? _, y = `${v}-description`;
+	return /* @__PURE__ */ o("div", {
+		className: e(t.choice, t[c], n.switch, d),
+		style: f,
+		children: [
+			/* @__PURE__ */ o("span", {
+				className: t.control,
+				children: [/* @__PURE__ */ a("input", {
+					ref: g,
+					type: "checkbox",
+					role: "switch",
+					id: v,
+					"aria-describedby": e(s !== void 0 && y, m) || void 0,
+					className: t.input,
+					onChange: (e) => {
+						u?.(e), l?.(e.target.checked);
+					},
+					...h
+				}), /* @__PURE__ */ a("span", {
+					className: e(t.box, n.track),
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ a("span", { className: n.thumb })
+				})]
+			}),
+			r !== void 0 && /* @__PURE__ */ a("label", {
+				htmlFor: v,
+				className: t.label,
+				children: r
+			}),
+			s !== void 0 && /* @__PURE__ */ a("span", {
+				id: y,
+				className: t.description,
+				children: s
+			})
+		]
+	});
+});
+export { s as Switch };
+
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["choice","styles","choice_module_default","Switch_module_default","Switch","forwardRef","describedBy","props","generatedId","useId","inputId","id","descriptionId","cn","size","className","description","onChange","event","onCheckedChange","children"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport choice from '@/styles/choice.module.css';\nimport type { ChoiceSize } from '../Checkbox';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  /** Label shown next to the switch. Without it, name the switch with `aria-label`. */\n  children?: ReactNode;\n  /** Extra text below the label, linked with `aria-describedby`. */\n  description?: ReactNode;\n  /** @default 'md' */\n  size?: ChoiceSize;\n  /** Called with the new on/off state. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\n/**\n * On/off toggle for a setting that applies right away. Uses `checked`/`defaultChecked` like a\n * checkbox and is announced as a switch.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    children,\n    description,\n    size = 'md',\n    onCheckedChange,\n    onChange,\n    className,\n    style,\n    id,\n    'aria-describedby': describedBy,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const descriptionId = `${inputId}-description`;\n\n  return (\n    <div className={cn(choice.choice, choice[size], styles.switch, className)} style={style}>\n      <span className={choice.control}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          role=\"switch\"\n          id={inputId}\n          aria-describedby={\n            cn(description !== undefined && descriptionId, describedBy) || undefined\n          }\n          className={choice.input}\n          onChange={(event) => {\n            onChange?.(event);\n            onCheckedChange?.(event.target.checked);\n          }}\n          {...props}\n        />\n        <span className={cn(choice.box, styles.track)} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n      </span>\n      {children !== undefined && (\n        <label htmlFor={inputId} className={choice.label}>\n          {children}\n        </label>\n      )}\n      {description !== undefined && (\n        <span id={descriptionId} className={choice.description}>\n          {description}\n        </span>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAqBA,IAAaI,IAASC,EAA0C,SAC9D,EACE,aACA,gBACA,UAAO,MACP,oBACA,aACA,cACA,UACA,OACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAChBI,IAAgB,GAAGF,EAAQ;CAEjC,OACE,kBAAC,OAAD;EAAK,WAAWG,EAAGb,EAAO,QAAQA,EAAOc,IAAOb,EAAO,QAAQc,CAAS;EAAU;EAAlF,UAAA;GACE,kBAAC,QAAD;IAAM,WAAWf,EAAO;IAAxB,UAAA,CACE,kBAAC,SAAD;KACO;KACL,MAAK;KACL,MAAK;KACL,IAAIU;KACJ,oBACEG,EAAGG,MAAgB,KAAA,KAAaJ,GAAeN,CAAW,KAAK,KAAA;KAEjE,WAAWN,EAAO;KAClB,WAAW,MAAU;MAEnB,AADAiB,IAAWC,CAAK,GAChBC,IAAkBD,EAAM,OAAO,OAAO;KACxC;KACA,GAAIX;IACL,CAAA,GACD,kBAAC,QAAD;KAAM,WAAWM,EAAGb,EAAO,KAAKC,EAAO,KAAK;KAAG,eAAY;KACzD,UAAA,kBAAC,QAAD,EAAM,WAAWA,EAAO,MAAQ,CAAA;IAC5B,CAAA,CACF;;GACLmB,MAAa,KAAA,KACZ,kBAAC,SAAD;IAAO,SAASV;IAAS,WAAWV,EAAO;IACxC;GACI,CAAA;GAERgB,MAAgB,KAAA,KACf,kBAAC,QAAD;IAAM,IAAIJ;IAAe,WAAWZ,EAAO;IACxC,UAAAgB;GACG,CAAA;EAEL;;AAET,CAAC"}

package/dist/components/Switch/Switch.module.js

@@ -0,0 +1,9 @@
+// src/components/Switch/Switch.module.css
+var e = "onyx-track-7ObdZ", t = "onyx-thumb--FTeK", n = {
+	switch: "onyx-switch-hgdMu",
+	track: e,
+	thumb: t
+};
+export { n as default, t as thumb, e as track };
+
+//# sourceMappingURL=Switch.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.js","names":["track","thumb","Switch_module_default","\"switch\""],"sources":["../../../src/components/Switch/Switch.module.css"],"sourcesContent":[".switch {\n  --switch-gap: var(--border-width-thick);\n  --switch-width: calc(var(--choice-size) * 1.8);\n  --switch-thumb: calc(var(--choice-size) - var(--switch-gap) * 2);\n  --switch-travel: calc(var(--switch-width) - var(--switch-thumb) - var(--switch-gap) * 2);\n}\n\n.track {\n  justify-items: start;\n  width: var(--switch-width);\n  padding-inline: var(--switch-gap);\n  background-color: var(--color-border-strong);\n  border: 0;\n  border-radius: var(--radius-full);\n}\n\n.thumb {\n  width: var(--switch-thumb);\n  height: var(--switch-thumb);\n  background-color: var(--color-surface);\n  border-radius: var(--radius-full);\n  box-shadow: var(--shadow-sm);\n  transition: translate var(--duration-normal) var(--easing-standard);\n}\n\n:checked + .track .thumb {\n  translate: var(--switch-travel);\n}\n\n:dir(rtl) :checked + .track .thumb {\n  translate: calc(var(--switch-travel) * -1);\n}\n\n:hover:not(:disabled, :checked) + .track {\n  background-color: var(--color-text-muted);\n}\n\n:disabled + .track {\n  background-color: var(--color-bg-muted);\n}\n\n:disabled + .track .thumb {\n  background-color: var(--color-text-disabled);\n  box-shadow: none;\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,84 @@
+import { HTMLAttributes, Key, ReactElement, ReactNode, Ref } from 'react';
+export type SortDirection = 'ascending' | 'descending';
+export interface TableSort {
+    /** `key` of the sorted column. */
+    key: string;
+    direction: SortDirection;
+}
+type SortValue = string | number | boolean | Date | null | undefined;
+export interface TableColumn<Row> {
+    /** Identifies the column. Also the property read from each row when there is no `cell`. */
+    key: string;
+    /** Content of the column header. */
+    header: ReactNode;
+    /** Renders the cell of a row. Defaults to `row[key]`. */
+    cell?: (row: Row) => ReactNode;
+    /**
+     * Lets the user sort by this column.
+     * @default false
+     */
+    sortable?: boolean;
+    /** Value compared when sorting. Defaults to `row[key]`. */
+    sortValue?: (row: Row) => SortValue;
+    /** @default 'start' */
+    align?: 'start' | 'center' | 'end';
+    /** CSS width of the column. */
+    width?: string;
+    /**
+     * Renders the cells as row headers (`<th scope="row">`), so screen readers announce them
+     * with every cell of the row. Use it for the column that names each row.
+     * @default false
+     */
+    rowHeader?: boolean;
+}
+export interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: TableColumn<Row>[];
+    data: Row[];
+    /** Returns a stable key for each row. */
+    getRowKey: (row: Row, index: number) => Key;
+    /** Title of the table. It names the table and its scroll region, so prefer setting it. */
+    caption?: ReactNode;
+    /**
+     * Keeps the caption for assistive technology only.
+     * @default false
+     */
+    hideCaption?: boolean;
+    /** Sorted column, for controlled sorting. `null` means unsorted. */
+    sort?: TableSort | null;
+    /** @default null */
+    defaultSort?: TableSort | null;
+    /** Called when the user sorts by a column. */
+    onSortChange?: (sort: TableSort | null) => void;
+    /**
+     * Leaves `data` in the order given, for sorting on the server.
+     * @default false
+     */
+    manualSorting?: boolean;
+    /**
+     * Shown in place of the rows when `data` is empty.
+     * @default 'No data to show.'
+     */
+    emptyState?: ReactNode;
+    /**
+     * Marks the table as busy and shows a spinner while there are no rows yet.
+     * @default false
+     */
+    loading?: boolean;
+    /** @default 'normal' */
+    density?: 'compact' | 'normal';
+    /** @default false */
+    striped?: boolean;
+    /**
+     * Keeps the header visible while the rows scroll. Give the table a `max-height` to scroll it.
+     * @default false
+     */
+    stickyHeader?: boolean;
+}
+/**
+ * Data table with sortable columns, an empty state and a scroll region for narrow screens. The
+ * region becomes focusable when it overflows, so keyboard users can scroll it.
+ */
+export declare const Table: <Row>(props: TableProps<Row> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+export {};

package/dist/components/Table/Table.js

@@ -0,0 +1,105 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { ArrowDownIcon as n, ArrowUpDownIcon as r, ArrowUpIcon as i } from "../Icon/icons.js";
+import { Spinner as a } from "../Spinner/Spinner.js";
+import { mergeRefs as o } from "../../utils/mergeRefs.js";
+import s from "./Table.module.js";
+import { forwardRef as c, useEffect as l, useId as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Table/Table.tsx
+var g = (e, t) => e[t];
+function _(e, t) {
+	return e === t ? 0 : e == null ? 1 : t == null ? -1 : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+}
+function v({ columns: c, data: v, getRowKey: y, caption: b, hideCaption: x = !1, sort: S, defaultSort: C = null, onSortChange: w, manualSorting: T = !1, emptyState: E = "No data to show.", loading: D = !1, density: O = "normal", striped: k = !1, stickyHeader: A = !1, className: j, ...M }, N) {
+	let P = u(), F = f(null), I = d(() => o(F, N), [N]), [L, R] = p(!1), [z, B] = e({
+		value: S,
+		defaultValue: C,
+		onChange: w
+	});
+	l(() => {
+		let e = F.current;
+		if (!e) return;
+		let t = new ResizeObserver(() => {
+			R(e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, []);
+	let V = d(() => {
+		let e = c.find((e) => e.key === z?.key);
+		if (T || !z || !e) return v;
+		let t = e.sortValue ?? ((t) => g(t, e.key)), n = z.direction === "ascending" ? 1 : -1;
+		return [...v].sort((e, r) => _(t(e), t(r)) * n);
+	}, [
+		c,
+		z,
+		v,
+		T
+	]), H = (e) => {
+		let t = z?.key === e && z.direction === "ascending" ? "descending" : "ascending";
+		B({
+			key: e,
+			direction: t
+		});
+	}, U = b != null, W = L ? 0 : void 0, G = U || M["aria-label"] !== void 0 || M["aria-labelledby"] !== void 0;
+	return /* @__PURE__ */ m("div", {
+		ref: I,
+		role: G ? "region" : void 0,
+		"aria-labelledby": U ? P : void 0,
+		tabIndex: W,
+		className: t(s.wrapper, j),
+		...M,
+		children: /* @__PURE__ */ h("table", {
+			"aria-busy": D || void 0,
+			className: t(s.table, s[O], k && s.striped, A && s.sticky),
+			children: [
+				U && /* @__PURE__ */ m("caption", {
+					id: P,
+					className: t(s.caption, x && s.hidden),
+					children: b
+				}),
+				/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ m("tr", { children: c.map((e) => {
+					let a = z?.key === e.key ? z.direction : void 0, o = a === "ascending" ? i : a === "descending" ? n : r;
+					return /* @__PURE__ */ m("th", {
+						scope: "col",
+						"aria-sort": a,
+						className: t(s.headerCell, e.align && s[e.align]),
+						style: e.width ? { width: e.width } : void 0,
+						children: e.sortable ? /* @__PURE__ */ h("button", {
+							type: "button",
+							className: s.sortButton,
+							onClick: () => H(e.key),
+							children: [e.header, /* @__PURE__ */ m(o, { className: t(s.sortIcon, a && s.sortIconActive) })]
+						}) : e.header
+					}, e.key);
+				}) }) }),
+				/* @__PURE__ */ m("tbody", { children: V.length === 0 ? /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", {
+					colSpan: c.length,
+					className: s.empty,
+					children: D ? /* @__PURE__ */ m(a, { label: "Loading rows" }) : E
+				}) }) : V.map((e, n) => /* @__PURE__ */ m("tr", {
+					className: s.row,
+					children: c.map((n) => {
+						let r = n.cell ? n.cell(e) : g(e, n.key), i = t(s.cell, n.align && s[n.align]);
+						return n.rowHeader ? /* @__PURE__ */ m("th", {
+							scope: "row",
+							className: t(i, s.rowHeader),
+							children: r
+						}, n.key) : /* @__PURE__ */ m("td", {
+							className: i,
+							children: r
+						}, n.key);
+					})
+				}, y(e, n))) })
+			]
+		})
+	});
+}
+var y = c(v);
+export { y as Table };
+
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":["styles","Table_module_default","read","row","key","compare","a","b","TableInner","props","captionId","useId","region","useRef","attachRegion","useMemo","mergeRefs","ref","overflowing","setOverflowing","useState","currentSort","setSort","useControllableState","sort","defaultSort","onSortChange","node","observer","rows","column","columns","item","manualSorting","data","valueOf","sign","toggleSort","direction","hasCaption","caption","scrollTabIndex","named","cn","className","loading","density","striped","stickyHeader","hideCaption","sorted","SortIcon","ArrowUpIcon","ArrowDownIcon","ArrowUpDownIcon","Spinner","emptyState","content","getRowKey","index","Table","forwardRef"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type Key,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from '../Icon';\nimport { Spinner } from '../Spinner';\nimport styles from './Table.module.css';\n\nexport type SortDirection = 'ascending' | 'descending';\n\nexport interface TableSort {\n  /** `key` of the sorted column. */\n  key: string;\n  direction: SortDirection;\n}\n\ntype SortValue = string | number | boolean | Date | null | undefined;\n\nexport interface TableColumn<Row> {\n  /** Identifies the column. Also the property read from each row when there is no `cell`. */\n  key: string;\n  /** Content of the column header. */\n  header: ReactNode;\n  /** Renders the cell of a row. Defaults to `row[key]`. */\n  cell?: (row: Row) => ReactNode;\n  /**\n   * Lets the user sort by this column.\n   * @default false\n   */\n  sortable?: boolean;\n  /** Value compared when sorting. Defaults to `row[key]`. */\n  sortValue?: (row: Row) => SortValue;\n  /** @default 'start' */\n  align?: 'start' | 'center' | 'end';\n  /** CSS width of the column. */\n  width?: string;\n  /**\n   * Renders the cells as row headers (`<th scope=\"row\">`), so screen readers announce them\n   * with every cell of the row. Use it for the column that names each row.\n   * @default false\n   */\n  rowHeader?: boolean;\n}\n\nexport interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  columns: TableColumn<Row>[];\n  data: Row[];\n  /** Returns a stable key for each row. */\n  getRowKey: (row: Row, index: number) => Key;\n  /** Title of the table. It names the table and its scroll region, so prefer setting it. */\n  caption?: ReactNode;\n  /**\n   * Keeps the caption for assistive technology only.\n   * @default false\n   */\n  hideCaption?: boolean;\n  /** Sorted column, for controlled sorting. `null` means unsorted. */\n  sort?: TableSort | null;\n  /** @default null */\n  defaultSort?: TableSort | null;\n  /** Called when the user sorts by a column. */\n  onSortChange?: (sort: TableSort | null) => void;\n  /**\n   * Leaves `data` in the order given, for sorting on the server.\n   * @default false\n   */\n  manualSorting?: boolean;\n  /**\n   * Shown in place of the rows when `data` is empty.\n   * @default 'No data to show.'\n   */\n  emptyState?: ReactNode;\n  /**\n   * Marks the table as busy and shows a spinner while there are no rows yet.\n   * @default false\n   */\n  loading?: boolean;\n  /** @default 'normal' */\n  density?: 'compact' | 'normal';\n  /** @default false */\n  striped?: boolean;\n  /**\n   * Keeps the header visible while the rows scroll. Give the table a `max-height` to scroll it.\n   * @default false\n   */\n  stickyHeader?: boolean;\n}\n\nconst read = (row: unknown, key: string) => (row as Record<string, unknown>)[key];\n\nfunction compare(a: SortValue, b: SortValue) {\n  if (a === b) return 0;\n  if (a === null || a === undefined) return 1;\n  if (b === null || b === undefined) return -1;\n  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });\n}\n\nfunction TableInner<Row>(\n  {\n    columns,\n    data,\n    getRowKey,\n    caption,\n    hideCaption = false,\n    sort,\n    defaultSort = null,\n    onSortChange,\n    manualSorting = false,\n    emptyState = 'No data to show.',\n    loading = false,\n    density = 'normal',\n    striped = false,\n    stickyHeader = false,\n    className,\n    ...props\n  }: TableProps<Row>,\n  ref: Ref<HTMLDivElement>,\n) {\n  const captionId = useId();\n  const region = useRef<HTMLDivElement>(null);\n  const attachRegion = useMemo(() => mergeRefs(region, ref), [ref]);\n  const [overflowing, setOverflowing] = useState(false);\n  const [currentSort, setSort] = useControllableState<TableSort | null>({\n    value: sort,\n    defaultValue: defaultSort,\n    onChange: onSortChange,\n  });\n\n  useEffect(() => {\n    const node = region.current;\n    if (!node) return;\n\n    const observer = new ResizeObserver(() => {\n      setOverflowing(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight);\n    });\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const rows = useMemo(() => {\n    const column = columns.find((item) => item.key === currentSort?.key);\n    if (manualSorting || !currentSort || !column) return data;\n\n    const valueOf = column.sortValue ?? ((row: Row) => read(row, column.key) as SortValue);\n    const sign = currentSort.direction === 'ascending' ? 1 : -1;\n    return [...data].sort((a, b) => compare(valueOf(a), valueOf(b)) * sign);\n  }, [columns, currentSort, data, manualSorting]);\n\n  const toggleSort = (key: string) => {\n    const direction =\n      currentSort?.key === key && currentSort.direction === 'ascending'\n        ? 'descending'\n        : 'ascending';\n    setSort({ key, direction });\n  };\n\n  const hasCaption = caption !== undefined && caption !== null;\n  const scrollTabIndex = overflowing ? 0 : undefined;\n  const named =\n    hasCaption || props['aria-label'] !== undefined || props['aria-labelledby'] !== undefined;\n\n  return (\n    <div\n      ref={attachRegion}\n      role={named ? 'region' : undefined}\n      aria-labelledby={hasCaption ? captionId : undefined}\n      tabIndex={scrollTabIndex}\n      className={cn(styles.wrapper, className)}\n      {...props}\n    >\n      <table\n        aria-busy={loading || undefined}\n        className={cn(\n          styles.table,\n          styles[density],\n          striped && styles.striped,\n          stickyHeader && styles.sticky,\n        )}\n      >\n        {hasCaption && (\n          <caption id={captionId} className={cn(styles.caption, hideCaption && styles.hidden)}>\n            {caption}\n          </caption>\n        )}\n        <thead>\n          <tr>\n            {columns.map((column) => {\n              const sorted = currentSort?.key === column.key ? currentSort.direction : undefined;\n              const SortIcon =\n                sorted === 'ascending'\n                  ? ArrowUpIcon\n                  : sorted === 'descending'\n                    ? ArrowDownIcon\n                    : ArrowUpDownIcon;\n\n              return (\n                <th\n                  key={column.key}\n                  scope=\"col\"\n                  aria-sort={sorted}\n                  className={cn(styles.headerCell, column.align && styles[column.align])}\n                  style={column.width ? { width: column.width } : undefined}\n                >\n                  {column.sortable ? (\n                    <button\n                      type=\"button\"\n                      className={styles.sortButton}\n                      onClick={() => toggleSort(column.key)}\n                    >\n                      {column.header}\n                      <SortIcon className={cn(styles.sortIcon, sorted && styles.sortIconActive)} />\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.length === 0 ? (\n            <tr>\n              <td colSpan={columns.length} className={styles.empty}>\n                {loading ? <Spinner label=\"Loading rows\" /> : emptyState}\n              </td>\n            </tr>\n          ) : (\n            rows.map((row, index) => (\n              <tr key={getRowKey(row, index)} className={styles.row}>\n                {columns.map((column) => {\n                  const content = column.cell\n                    ? column.cell(row)\n                    : (read(row, column.key) as ReactNode);\n                  const className = cn(styles.cell, column.align && styles[column.align]);\n\n                  return column.rowHeader ? (\n                    <th key={column.key} scope=\"row\" className={cn(className, styles.rowHeader)}>\n                      {content}\n                    </th>\n                  ) : (\n                    <td key={column.key} className={className}>\n                      {content}\n                    </td>\n                  );\n                })}\n              </tr>\n            ))\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\n/**\n * Data table with sortable columns, an empty state and a scroll region for narrow screens. The\n * region becomes focusable when it overflows, so keyboard users can scroll it.\n */\nexport const Table = forwardRef(TableInner) as <Row>(\n  props: TableProps<Row> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"mappings":"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"}