@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/Popover/Popover.js

@@ -0,0 +1,89 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { CloseIcon as n } from "../Icon/icons.js";
+import { IconButton as r } from "../IconButton/IconButton.js";
+import { mergeRefs as i } from "../../utils/mergeRefs.js";
+import { useLatestRef as a } from "../../hooks/useLatestRef.js";
+import { useClickOutside as o } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as s } from "../../hooks/useEscapeKey.js";
+import { refocusIfLost as c } from "../../utils/refocusIfLost.js";
+import { getTabbable as l } from "../../hooks/useFocusTrap.js";
+import { useFloatingLayer as u } from "../../utils/floating.js";
+import { getElementRef as d } from "../../utils/getElementRef.js";
+import f from "./Popover.module.js";
+import { cloneElement as ee, forwardRef as p, isValidElement as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
+import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
+// src/components/Popover/Popover.tsx
+var C = p(function({ trigger: p, children: C, title: w, "aria-label": T, placement: E = "bottom-start", open: D, defaultOpen: O = !1, onOpenChange: k, initialFocus: A, showClose: j = !1, closeLabel: M = "Close", offset: N = 8, className: P }, F) {
+	let I = g(), L = `${I}-content`, R = `${I}-title`, [z, B] = y(null), V = v(null), [H, U] = e({
+		value: D,
+		defaultValue: O,
+		onChange: k
+	}), { setReference: W, setFloating: G, floatingStyles: K, side: q } = u({
+		open: H,
+		placement: E,
+		gap: N
+	}), J = m(p) ? d(p) : void 0, Y = _(() => i(W, J, B), [W, J]), X = _(() => i(G, V, F), [G, F]), Z = w != null, Q = a(U);
+	h(() => {
+		let e = V.current;
+		if (!H || !e) return;
+		(A?.current ?? l(e)[0] ?? e).focus();
+		let t = (t) => {
+			let n = t.relatedTarget;
+			n && !e.contains(n) && n !== z && Q.current(!1);
+		};
+		return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
+	}, [
+		H,
+		A,
+		Q,
+		z
+	]);
+	let $ = (e) => {
+		U(!1), e && z?.focus();
+	};
+	s(() => $(!0), { enabled: H }), o([V, { current: z }], () => {
+		$(!1), c(z);
+	}, { enabled: H });
+	let te = m(p) ? ee(p, {
+		ref: Y,
+		"aria-haspopup": "dialog",
+		"aria-expanded": H,
+		"aria-controls": H ? L : void 0,
+		onClick: (e) => {
+			p.props.onClick?.(e), e.defaultPrevented || U(!H);
+		}
+	}) : p;
+	return /* @__PURE__ */ S(b, { children: [te, H && /* @__PURE__ */ S("div", {
+		ref: X,
+		id: L,
+		role: "dialog",
+		"aria-labelledby": Z ? R : void 0,
+		"aria-label": Z ? void 0 : T,
+		tabIndex: -1,
+		"data-side": q,
+		className: t(f.popover, P),
+		style: K,
+		children: [(Z || j) && /* @__PURE__ */ S("div", {
+			className: f.header,
+			children: [Z && /* @__PURE__ */ x("h2", {
+				id: R,
+				className: f.title,
+				children: w
+			}), j && /* @__PURE__ */ x(r, {
+				label: M,
+				size: "sm",
+				className: f.close,
+				onClick: () => $(!0),
+				children: /* @__PURE__ */ x(n, {})
+			})]
+		}), /* @__PURE__ */ x("div", {
+			className: f.body,
+			children: C
+		})]
+	})] });
+});
+export { C as Popover };
+
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":["_Fragment","styles","Popover_module_default","Popover","forwardRef","ariaLabel","openProp","id","useId","contentId","titleId","triggerNode","setTriggerNode","useState","panel","useRef","open","setOpen","useControllableState","defaultOpen","onOpenChange","useFloatingLayer","offset","triggerElementRef","isValidElement","trigger","getElementRef","attachTrigger","useMemo","mergeRefs","setReference","attachPanel","setFloating","ref","hasTitle","title","setOpenLatest","useLatestRef","node","initialFocus","getTabbable","onFocusOut","next","event","close","returnFocus","useEscapeKey","useClickOutside","refocusIfLost","triggerElement","cloneElement","Fragment","side","cn","className","floatingStyles","showClose","IconButton","closeLabel","CloseIcon"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport { useClickOutside } from '@/hooks/useClickOutside';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { useEscapeKey } from '@/hooks/useEscapeKey';\nimport { getTabbable } from '@/hooks/useFocusTrap';\nimport { useLatestRef } from '@/hooks/useLatestRef';\nimport { cn } from '@/utils/cn';\nimport { useFloatingLayer, type Placement } from '@/utils/floating';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { refocusIfLost } from '@/utils/refocusIfLost';\nimport { CloseIcon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport styles from './Popover.module.css';\n\nexport type PopoverPlacement = Placement;\n\nexport interface PopoverProps {\n  /** Element that toggles the popover, usually a `Button`. It must accept a ref. */\n  trigger: ReactElement<{ onClick?: (event: MouseEvent<HTMLElement>) => void }>;\n  /** Content of the popover. It can be interactive. */\n  children: ReactNode;\n  /** Heading that names the popover. Without it, pass `aria-label`. */\n  title?: ReactNode;\n  /** Accessible name when there is no `title`. */\n  'aria-label'?: string;\n  /** @default 'bottom-start' */\n  placement?: PopoverPlacement;\n  /** Open state, for a controlled popover. */\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Element focused on open. Defaults to the first focusable element, then the popover. */\n  initialFocus?: RefObject<HTMLElement | null>;\n  /**\n   * Shows a close button in the corner.\n   * @default false\n   */\n  showClose?: boolean;\n  /**\n   * Accessible name of the close button.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /**\n   * Gap between the trigger and the popover, in pixels.\n   * @default 8\n   */\n  offset?: number;\n  /** Class of the popover panel. */\n  className?: string;\n}\n\n/**\n * Non-modal dialog anchored to a trigger. Focus moves into it on open; Escape, a click outside\n * or tabbing out closes it, and Escape returns focus to the trigger.\n */\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(\n  {\n    trigger,\n    children,\n    title,\n    'aria-label': ariaLabel,\n    placement = 'bottom-start',\n    open: openProp,\n    defaultOpen = false,\n    onOpenChange,\n    initialFocus,\n    showClose = false,\n    closeLabel = 'Close',\n    offset = 8,\n    className,\n  },\n  ref,\n) {\n  const id = useId();\n  const contentId = `${id}-content`;\n  const titleId = `${id}-title`;\n  const [triggerNode, setTriggerNode] = useState<HTMLElement | null>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const { setReference, setFloating, floatingStyles, side } = useFloatingLayer({\n    open,\n    placement,\n    gap: offset,\n  });\n  const triggerElementRef = isValidElement(trigger)\n    ? getElementRef<HTMLElement>(trigger)\n    : undefined;\n  const attachTrigger = useMemo(\n    () => mergeRefs<HTMLElement>(setReference, triggerElementRef, setTriggerNode),\n    [setReference, triggerElementRef],\n  );\n  const attachPanel = useMemo(() => mergeRefs(setFloating, panel, ref), [setFloating, ref]);\n  const hasTitle = title !== undefined && title !== null;\n\n  const setOpenLatest = useLatestRef(setOpen);\n\n  useEffect(() => {\n    const node = panel.current;\n    if (!open || !node) return;\n\n    (initialFocus?.current ?? getTabbable(node)[0] ?? node).focus();\n\n    const onFocusOut = (event: FocusEvent) => {\n      const next = event.relatedTarget as Node | null;\n      if (next && !node.contains(next) && next !== triggerNode) {\n        setOpenLatest.current(false);\n      }\n    };\n    node.addEventListener('focusout', onFocusOut);\n    return () => node.removeEventListener('focusout', onFocusOut);\n  }, [open, initialFocus, setOpenLatest, triggerNode]);\n\n  const close = (returnFocus: boolean) => {\n    setOpen(false);\n    if (returnFocus) triggerNode?.focus();\n  };\n\n  useEscapeKey(() => close(true), { enabled: open });\n  useClickOutside(\n    [panel, { current: triggerNode }],\n    () => {\n      close(false);\n      refocusIfLost(triggerNode);\n    },\n    { enabled: open },\n  );\n\n  const triggerElement = isValidElement(trigger)\n    ? cloneElement(trigger, {\n        ref: attachTrigger,\n        'aria-haspopup': 'dialog',\n        'aria-expanded': open,\n        'aria-controls': open ? contentId : undefined,\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          trigger.props.onClick?.(event);\n          if (!event.defaultPrevented) setOpen(!open);\n        },\n      } as object)\n    : trigger;\n\n  return (\n    <>\n      {triggerElement}\n      {open && (\n        <div\n          ref={attachPanel}\n          id={contentId}\n          role=\"dialog\"\n          aria-labelledby={hasTitle ? titleId : undefined}\n          aria-label={hasTitle ? undefined : ariaLabel}\n          tabIndex={-1}\n          data-side={side}\n          className={cn(styles.popover, className)}\n          style={floatingStyles}\n        >\n          {(hasTitle || showClose) && (\n            <div className={styles.header}>\n              {hasTitle && (\n                <h2 id={titleId} className={styles.title}>\n                  {title}\n                </h2>\n              )}\n              {showClose && (\n                <IconButton\n                  label={closeLabel}\n                  size=\"sm\"\n                  className={styles.close}\n                  onClick={() => close(true)}\n                >\n                  <CloseIcon />\n                </IconButton>\n              )}\n            </div>\n          )}\n          <div className={styles.body}>{children}</div>\n        </div>\n      )}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Popover/Popover.module.js

@@ -0,0 +1,12 @@
+// src/components/Popover/Popover.module.css
+var e = "onyx-popover-E9K9X", t = "onyx-popover-in-NFEj3", n = "onyx-header-u8-jn", r = "onyx-title-hAl5w", i = "onyx-close-8JGfL", a = "onyx-body-d6SIw", o = {
+	popover: e,
+	popoverIn: t,
+	header: n,
+	title: r,
+	close: i,
+	body: a
+};
+export { a as body, i as close, o as default, n as header, e as popover, t as popoverIn, r as title };
+
+//# sourceMappingURL=Popover.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.js","names":["popover","popoverIn","header","title","close","body","Popover_module_default"],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".popover {\n  z-index: var(--z-index-dropdown);\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n  max-width: min(var(--size-overlay-sm), calc(100vw - var(--space-4)));\n  overflow: auto;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  color: var(--color-text);\n  background-color: var(--color-surface-raised);\n  border: var(--border-width-thin) solid var(--color-border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-lg);\n  animation: popover-in var(--duration-fast) var(--easing-enter);\n}\n\n.popover:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: var(--focus-ring-offset);\n}\n\n.header {\n  display: flex;\n  gap: var(--space-2);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: var(--space-3) var(--space-3) 0 var(--space-4);\n}\n\n.title {\n  margin: 0;\n  padding-top: var(--space-1);\n  font-size: var(--font-size-md);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-snug);\n}\n\n.close {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n}\n\n.body {\n  display: grid;\n  gap: var(--space-3);\n  padding: var(--space-3) var(--space-4) var(--space-4);\n}\n\n@keyframes popover-in {\n  from {\n    opacity: 0;\n    scale: 0.96;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Popover } from './Popover.js';
+export type { PopoverPlacement, PopoverProps } from './Popover.js';

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface PortalProps {
+    children?: ReactNode;
+    /**
+     * Node the children are rendered into. `null` renders nothing, e.g. while a ref is not attached.
+     * @default document.body
+     */
+    container?: Element | DocumentFragment | null;
+}
+export declare function Portal({ children, container }: PortalProps): import('react').ReactPortal | null;

package/dist/components/Portal/Portal.js

@@ -0,0 +1,13 @@
+"use client";
+import { useSyncExternalStore as e } from "react";
+import { createPortal as t } from "react-dom";
+// src/components/Portal/Portal.tsx
+var n = () => () => {};
+function r({ children: r, container: i }) {
+	if (!e(n, () => !0, () => !1)) return null;
+	let a = i === void 0 ? document.body : i;
+	return a ? t(r, a) : null;
+}
+export { r as Portal };
+
+//# sourceMappingURL=Portal.js.map

package/dist/components/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","names":["subscribe","Portal","useSyncExternalStore","target","container","createPortal","children"],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useSyncExternalStore, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n  children?: ReactNode;\n  /**\n   * Node the children are rendered into. `null` renders nothing, e.g. while a ref is not attached.\n   * @default document.body\n   */\n  container?: Element | DocumentFragment | null;\n}\n\nconst subscribe = () => () => {};\n\nexport function Portal({ children, container }: PortalProps) {\n  const isClient = useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n\n  if (!isClient) return null;\n\n  const target = container === undefined ? document.body : container;\n  return target ? createPortal(children, target) : null;\n}\n"],"mappings":";;;;AAYA,IAAMA,gBAAwB,CAAC;AAE/B,SAAgBC,EAAO,EAAE,aAAU,gBAA0B;CAO3D,IAAI,CANaC,EACfF,SACM,UACA,EAGH,GAAU,OAAO;CAEtB,IAAMG,IAASC,MAAc,KAAA,IAAY,SAAS,OAAOA;CACzD,OAAOD,IAASE,EAAaC,GAAUH,CAAM,IAAI;AACnD"}

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

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

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ProgressIntent = 'primary' | 'success' | 'warning' | 'danger';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Amount done, from 0 to `max`. Leave it out (or `null`) when the amount is unknown. */
+    value?: number | null;
+    /** @default 100 */
+    max?: number;
+    /** Visible caption that names the progress bar. Without it, use `aria-label`. */
+    label?: ReactNode;
+    /**
+     * Shows the formatted value next to the label.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Turns the value into text for `aria-valuetext` and the visible value. Defaults to a
+     * rounded percentage.
+     */
+    formatValue?: (value: number, max: number) => string;
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** @default 'primary' */
+    intent?: ProgressIntent;
+    /** Class of the outer box. Other props go to the element with `role="progressbar"`. */
+    className?: string;
+}
+/** Shows how much of a task is done, or that it is in progress when the amount is unknown. */
+export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Progress.module.js";
+import { forwardRef as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/components/Progress/Progress.tsx
+var o = (e, t) => `${Math.round(e / t * 100)}%`, s = n(function({ value: n = null, max: s = 100, label: c, showValue: l = !1, formatValue: u = o, size: d = "md", intent: f = "primary", className: p, ...m }, h) {
+	let g = r(), _ = n === null, v = _ ? 0 : Math.min(Math.max(n, 0), s), y = _ ? void 0 : u(v, s), b = c != null;
+	return /* @__PURE__ */ a("div", {
+		className: e(t.progress, t[d], t[f], p),
+		children: [(b || l && y) && /* @__PURE__ */ a("div", {
+			className: t.header,
+			children: [b && /* @__PURE__ */ i("span", {
+				id: g,
+				className: t.label,
+				children: c
+			}), l && y && /* @__PURE__ */ i("span", {
+				className: t.value,
+				"aria-hidden": "true",
+				children: y
+			})]
+		}), /* @__PURE__ */ i("div", {
+			ref: h,
+			role: "progressbar",
+			"aria-labelledby": b ? g : void 0,
+			"aria-valuemin": 0,
+			"aria-valuemax": s,
+			"aria-valuenow": _ ? void 0 : v,
+			"aria-valuetext": y,
+			"data-indeterminate": _ || void 0,
+			className: t.track,
+			...m,
+			children: /* @__PURE__ */ i("div", {
+				className: t.bar,
+				style: _ ? void 0 : { "--progress-value": v / s }
+			})
+		})]
+	});
+});
+export { s as Progress };
+
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":["styles","Progress_module_default","percent","value","max","Progress","forwardRef","props","labelId","useId","indeterminate","clamped","valueText","formatValue","hasLabel","label","cn","size","intent","className","showValue"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Progress.module.css';\n\nexport type ProgressIntent = 'primary' | 'success' | 'warning' | 'danger';\n\nexport interface ProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /** Amount done, from 0 to `max`. Leave it out (or `null`) when the amount is unknown. */\n  value?: number | null;\n  /** @default 100 */\n  max?: number;\n  /** Visible caption that names the progress bar. Without it, use `aria-label`. */\n  label?: ReactNode;\n  /**\n   * Shows the formatted value next to the label.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * Turns the value into text for `aria-valuetext` and the visible value. Defaults to a\n   * rounded percentage.\n   */\n  formatValue?: (value: number, max: number) => string;\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** @default 'primary' */\n  intent?: ProgressIntent;\n  /** Class of the outer box. Other props go to the element with `role=\"progressbar\"`. */\n  className?: string;\n}\n\nconst percent = (value: number, max: number) => `${Math.round((value / max) * 100)}%`;\n\n/** Shows how much of a task is done, or that it is in progress when the amount is unknown. */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    value = null,\n    max = 100,\n    label,\n    showValue = false,\n    formatValue = percent,\n    size = 'md',\n    intent = 'primary',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const indeterminate = value === null;\n  const clamped = indeterminate ? 0 : Math.min(Math.max(value, 0), max);\n  const valueText = indeterminate ? undefined : formatValue(clamped, max);\n  const hasLabel = label !== undefined && label !== null;\n\n  return (\n    <div className={cn(styles.progress, styles[size], styles[intent], className)}>\n      {(hasLabel || (showValue && valueText)) && (\n        <div className={styles.header}>\n          {hasLabel && (\n            <span id={labelId} className={styles.label}>\n              {label}\n            </span>\n          )}\n          {showValue && valueText && (\n            <span className={styles.value} aria-hidden=\"true\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-labelledby={hasLabel ? labelId : undefined}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={indeterminate ? undefined : clamped}\n        aria-valuetext={valueText}\n        data-indeterminate={indeterminate || undefined}\n        className={styles.track}\n        {...props}\n      >\n        <div\n          className={styles.bar}\n          style={\n            indeterminate ? undefined : ({ '--progress-value': clamped / max } as CSSProperties)\n          }\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;;AA+BA,IAAME,KAAW,GAAe,MAAgB,GAAG,KAAK,MAAOC,IAAQC,IAAO,GAAG,EAAE,IAGtEC,IAAWC,EAA0C,SAChE,EACE,WAAQ,MACR,SAAM,KACN,UACA,eAAY,IACZ,iBAAcJ,GACd,UAAO,MACP,YAAS,WACT,cACA,GAAGK,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAgBP,MAAU,MAC1BQ,IAAUD,IAAgB,IAAI,KAAK,IAAI,KAAK,IAAIP,GAAO,CAAC,GAAGC,CAAG,GAC9DQ,IAAYF,IAAgB,KAAA,IAAYG,EAAYF,GAASP,CAAG,GAChEU,IAAWC,KAAiC;CAElD,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAGhB,EAAO,UAAUA,EAAOiB,IAAOjB,EAAOkB,IAASC,CAAS;EAA3E,UAAA,EACIL,KAAaM,KAAaR,MAC1B,kBAAC,OAAD;GAAK,WAAWZ,EAAO;GAAvB,UAAA,CACGc,KACC,kBAAC,QAAD;IAAM,IAAIN;IAAS,WAAWR,EAAO;IAClC,UAAAe;GACG,CAAA,GAEPK,KAAaR,KACZ,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAO,eAAY;IACxC,UAAAY;GACG,CAAA,CAEL;EAEP,CAAA,GAAA,kBAAC,OAAD;GACO;GACL,MAAK;GACL,mBAAiBE,IAAWN,IAAU,KAAA;GACtC,iBAAe;GACf,iBAAeJ;GACf,iBAAeM,IAAgB,KAAA,IAAYC;GAC3C,kBAAgBC;GAChB,sBAAoBF,KAAiB,KAAA;GACrC,WAAWV,EAAO;GAClB,GAAIO;GAEJ,UAAA,kBAAC,OAAD;IACE,WAAWP,EAAO;IAClB,OACEU,IAAgB,KAAA,IAAa,EAAE,oBAAoBC,IAAUP,EAAI;GAEpE,CAAA;EACE,CAAA,CACF;;AAET,CAAC"}

package/dist/components/Progress/Progress.module.js

@@ -0,0 +1,18 @@
+// src/components/Progress/Progress.module.css
+var e = "onyx-progress-kXacs", t = "onyx-sm-dJVor", n = "onyx-lg-O8QuY", r = "onyx-success-gWJ8U", i = "onyx-warning-DGkPO", a = "onyx-danger-gfwHh", o = "onyx-header-8GZza", s = "onyx-label-qqHJM", c = "onyx-value-ZM8Yk", l = "onyx-track-RVIao", u = "onyx-bar-uC-0x", d = "onyx-indeterminate-HojUj", f = {
+	progress: e,
+	sm: t,
+	lg: n,
+	success: r,
+	warning: i,
+	danger: a,
+	header: o,
+	label: s,
+	value: c,
+	track: l,
+	bar: u,
+	indeterminate: d
+};
+export { u as bar, a as danger, f as default, o as header, d as indeterminate, s as label, n as lg, e as progress, t as sm, r as success, l as track, c as value, i as warning };
+
+//# sourceMappingURL=Progress.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.module.js","names":["progress","sm","lg","success","warning","danger","header","label","value","track","bar","indeterminate","Progress_module_default"],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":[".progress {\n  --progress-height: var(--space-2);\n  --progress-fill: var(--color-primary);\n\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.sm {\n  --progress-height: var(--space-1);\n}\n\n.lg {\n  --progress-height: var(--space-3);\n}\n\n.success {\n  --progress-fill: var(--color-success);\n}\n\n.warning {\n  --progress-fill: var(--color-warning);\n}\n\n.danger {\n  --progress-fill: var(--color-danger);\n}\n\n.header {\n  display: flex;\n  gap: var(--space-2);\n  align-items: baseline;\n  justify-content: space-between;\n  font-size: var(--font-size-sm);\n}\n\n.label {\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text);\n}\n\n.value {\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-muted);\n}\n\n.track {\n  position: relative;\n  height: var(--progress-height);\n  overflow: hidden;\n  background-color: var(--color-bg-muted);\n  border-radius: var(--radius-full);\n}\n\n.bar {\n  --progress-value: 0;\n\n  width: calc(var(--progress-value) * 100%);\n  height: 100%;\n  background-color: var(--progress-fill);\n  border-radius: inherit;\n  transition: width var(--duration-slow) var(--easing-standard);\n}\n\n.track[data-indeterminate] .bar {\n  width: 40%;\n  animation: indeterminate calc(var(--duration-slower) * 3) var(--easing-standard) infinite;\n}\n\n@keyframes indeterminate {\n  from {\n    translate: -100%;\n  }\n\n  to {\n    translate: 250%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track[data-indeterminate] .bar {\n    width: 100%;\n    opacity: 0.5;\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Progress } from './Progress.js';
+export type { ProgressIntent, ProgressProps } from './Progress.js';

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,41 @@
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { ChoiceSize } from '../Checkbox/index.js';
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /** Visible caption of the group. */
+    label: ReactNode;
+    /** Extra text below the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** Error message. Marks the group as invalid and is linked with `aria-describedby`. */
+    error?: ReactNode;
+    /** Name shared by the radios, used when the form is submitted. Generated when omitted. */
+    name?: string;
+    /** Selected value, for a controlled group. `null` selects nothing. */
+    value?: string | null;
+    /** Initially selected value, for an uncontrolled group. */
+    defaultValue?: string | null;
+    /** Called with the value of the radio that was selected. */
+    onValueChange?: (value: string) => void;
+    /** @default 'vertical' */
+    orientation?: 'vertical' | 'horizontal';
+    /** @default 'md' */
+    size?: ChoiceSize;
+    /** @default false */
+    disabled?: boolean;
+    /** @default false */
+    required?: boolean;
+}
+/**
+ * Set of radios where only one can be selected. Arrow keys move the selection and Tab moves
+ * past the group, as native radios do.
+ */
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'name' | 'value' | 'checked' | 'defaultChecked'> {
+    /** Value selected in the group when this radio is chosen. */
+    value: string;
+    /** Label shown next to the radio. */
+    children?: ReactNode;
+    /** Extra text below the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+}
+/** One option of a `RadioGroup`. */
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,112 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { ErrorIcon as n } from "../Icon/icons.js";
+import r from "../../styles/choice.module.js";
+import i from "./RadioGroup.module.js";
+import { createContext as a, forwardRef as o, useContext as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+// src/components/RadioGroup/RadioGroup.tsx
+var d = a(null), f = o(function({ label: r, description: a, error: o, name: s, value: f, defaultValue: p = null, onValueChange: m, orientation: h = "vertical", size: g = "md", disabled: _ = !1, required: v = !1, className: y, children: b, ...x }, S) {
+	let C = c(), w = `${C}-label`, T = `${C}-description`, E = `${C}-error`, D = o != null && o !== !1, [O, k] = e({
+		value: f,
+		defaultValue: p,
+		onChange: (e) => {
+			e !== null && m?.(e);
+		}
+	});
+	return /* @__PURE__ */ u("div", {
+		ref: S,
+		role: "radiogroup",
+		"aria-labelledby": w,
+		"aria-describedby": t(!!a && T, D && E) || void 0,
+		"aria-required": v || void 0,
+		"aria-invalid": D || void 0,
+		"aria-disabled": _ || void 0,
+		className: t(i.group, y),
+		...x,
+		children: [
+			/* @__PURE__ */ u("span", {
+				id: w,
+				className: i.label,
+				"data-disabled": _ || void 0,
+				children: [r, v && /* @__PURE__ */ l("span", {
+					className: i.required,
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			a && /* @__PURE__ */ l("span", {
+				id: T,
+				className: i.description,
+				children: a
+			}),
+			/* @__PURE__ */ l("div", {
+				className: t(i.options, i[h]),
+				children: /* @__PURE__ */ l(d.Provider, {
+					value: {
+						name: s ?? C,
+						value: O,
+						setValue: k,
+						size: g,
+						disabled: _,
+						required: v,
+						invalid: D
+					},
+					children: b
+				})
+			}),
+			D && /* @__PURE__ */ u("span", {
+				id: E,
+				className: i.error,
+				children: [/* @__PURE__ */ l(n, { className: i.errorIcon }), o]
+			})
+		]
+	});
+}), p = o(function({ value: e, children: n, description: a, disabled: o, className: f, style: p, id: m, onChange: h, "aria-describedby": g, ..._ }, v) {
+	let y = s(d);
+	if (!y) throw Error("Radio must be rendered inside a RadioGroup.");
+	let b = c(), x = m ?? b, S = `${x}-description`;
+	return /* @__PURE__ */ u("div", {
+		className: t(r.choice, r[y.size], f),
+		style: p,
+		children: [
+			/* @__PURE__ */ u("span", {
+				className: r.control,
+				children: [/* @__PURE__ */ l("input", {
+					ref: v,
+					type: "radio",
+					id: x,
+					name: y.name,
+					value: e,
+					checked: y.value === e,
+					disabled: y.disabled || o,
+					required: y.required,
+					"aria-describedby": t(a !== void 0 && S, g) || void 0,
+					className: r.input,
+					onChange: (t) => {
+						h?.(t), t.target.checked && y.setValue(e);
+					},
+					..._
+				}), /* @__PURE__ */ l("span", {
+					className: t(r.box, i.box),
+					"data-invalid": y.invalid || void 0,
+					"aria-hidden": "true"
+				})]
+			}),
+			n !== void 0 && /* @__PURE__ */ l("label", {
+				htmlFor: x,
+				className: r.label,
+				children: n
+			}),
+			a !== void 0 && /* @__PURE__ */ l("span", {
+				id: S,
+				className: r.description,
+				children: a
+			})
+		]
+	});
+});
+export { p as Radio, f as RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":["styles","choice","choice_module_default","RadioGroup_module_default","RadioGroupContext","createContext","RadioGroup","forwardRef","props","id","useId","labelId","descriptionId","errorId","invalid","error","selected","setSelected","useControllableState","next","onValueChange","cn","description","required","disabled","className","label","orientation","name","ErrorIcon","Radio","describedBy","group","useContext","generatedId","inputId","value","onChange","event","children"],"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport choice from '@/styles/choice.module.css';\nimport type { ChoiceSize } from '../Checkbox';\nimport { ErrorIcon } from '../Icon';\nimport styles from './RadioGroup.module.css';\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | null;\n  setValue: (value: string) => void;\n  size: ChoiceSize;\n  disabled: boolean;\n  required: boolean;\n  invalid: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport interface RadioGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /** Visible caption of the group. */\n  label: ReactNode;\n  /** Extra text below the label, linked with `aria-describedby`. */\n  description?: ReactNode;\n  /** Error message. Marks the group as invalid and is linked with `aria-describedby`. */\n  error?: ReactNode;\n  /** Name shared by the radios, used when the form is submitted. Generated when omitted. */\n  name?: string;\n  /** Selected value, for a controlled group. `null` selects nothing. */\n  value?: string | null;\n  /** Initially selected value, for an uncontrolled group. */\n  defaultValue?: string | null;\n  /** Called with the value of the radio that was selected. */\n  onValueChange?: (value: string) => void;\n  /** @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n  /** @default 'md' */\n  size?: ChoiceSize;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  required?: boolean;\n}\n\n/**\n * Set of radios where only one can be selected. Arrow keys move the selection and Tab moves\n * past the group, as native radios do.\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  {\n    label,\n    description,\n    error,\n    name,\n    value,\n    defaultValue = null,\n    onValueChange,\n    orientation = 'vertical',\n    size = 'md',\n    disabled = false,\n    required = false,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const id = useId();\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const errorId = `${id}-error`;\n  const invalid = error !== undefined && error !== null && error !== false;\n  const [selected, setSelected] = useControllableState<string | null>({\n    value,\n    defaultValue,\n    onChange: (next) => {\n      if (next !== null) onValueChange?.(next);\n    },\n  });\n\n  return (\n    <div\n      ref={ref}\n      role=\"radiogroup\"\n      aria-labelledby={labelId}\n      aria-describedby={cn(Boolean(description) && descriptionId, invalid && errorId) || undefined}\n      aria-required={required || undefined}\n      aria-invalid={invalid || undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(styles.group, className)}\n      {...props}\n    >\n      <span id={labelId} className={styles.label} data-disabled={disabled || undefined}>\n        {label}\n        {required && (\n          <span className={styles.required} aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </span>\n      {description && (\n        <span id={descriptionId} className={styles.description}>\n          {description}\n        </span>\n      )}\n      <div className={cn(styles.options, styles[orientation])}>\n        <RadioGroupContext.Provider\n          value={{\n            name: name ?? id,\n            value: selected,\n            setValue: setSelected,\n            size,\n            disabled,\n            required,\n            invalid,\n          }}\n        >\n          {children}\n        </RadioGroupContext.Provider>\n      </div>\n      {invalid && (\n        <span id={errorId} className={styles.error}>\n          <ErrorIcon className={styles.errorIcon} />\n          {error}\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size' | 'name' | 'value' | 'checked' | 'defaultChecked'\n> {\n  /** Value selected in the group when this radio is chosen. */\n  value: string;\n  /** Label shown next to the radio. */\n  children?: ReactNode;\n  /** Extra text below the label, linked with `aria-describedby`. */\n  description?: ReactNode;\n}\n\n/** One option of a `RadioGroup`. */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    value,\n    children,\n    description,\n    disabled,\n    className,\n    style,\n    id,\n    onChange,\n    'aria-describedby': describedBy,\n    ...props\n  },\n  ref,\n) {\n  const group = useContext(RadioGroupContext);\n  if (!group) throw new Error('Radio must be rendered inside a RadioGroup.');\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[group.size], className)} style={style}>\n      <span className={choice.control}>\n        <input\n          ref={ref}\n          type=\"radio\"\n          id={inputId}\n          name={group.name}\n          value={value}\n          checked={group.value === value}\n          disabled={group.disabled || disabled}\n          required={group.required}\n          aria-describedby={\n            cn(description !== undefined && descriptionId, describedBy) || undefined\n          }\n          className={choice.input}\n          onChange={(event) => {\n            onChange?.(event);\n            if (event.target.checked) group.setValue(value);\n          }}\n          {...props}\n        />\n        <span\n          className={cn(choice.box, styles.box)}\n          data-invalid={group.invalid || undefined}\n          aria-hidden=\"true\"\n        />\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":"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"}

package/dist/components/RadioGroup/RadioGroup.module.js

@@ -0,0 +1,16 @@
+// src/components/RadioGroup/RadioGroup.module.css
+var e = "onyx-group-YXEnI", t = "onyx-label-MxI-w", n = "onyx-required-9kFI3", r = "onyx-description-8L4Im", i = "onyx-options-Ijq3w", a = "onyx-vertical-VIcHp", o = "onyx-horizontal-vsHUV", s = "onyx-error-lrqsC", c = "onyx-errorIcon-irE1w", l = "onyx-box-jJzYW", u = {
+	group: e,
+	label: t,
+	required: n,
+	description: r,
+	options: i,
+	vertical: a,
+	horizontal: o,
+	error: s,
+	errorIcon: c,
+	box: l
+};
+export { l as box, u as default, r as description, s as error, c as errorIcon, e as group, o as horizontal, t as label, i as options, n as required, a as vertical };
+
+//# sourceMappingURL=RadioGroup.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.module.js","names":["group","label","required","description","options","vertical","horizontal","error","errorIcon","box","RadioGroup_module_default"],"sources":["../../../src/components/RadioGroup/RadioGroup.module.css"],"sourcesContent":[".group {\n  display: grid;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n.label {\n  display: inline-flex;\n  gap: var(--space-1);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text);\n}\n\n.label[data-disabled] {\n  color: var(--color-text-disabled);\n}\n\n.required {\n  color: var(--color-danger-text);\n}\n\n.description {\n  font-size: var(--font-size-sm);\n  color: var(--color-text-muted);\n}\n\n.options {\n  display: flex;\n  gap: var(--space-2);\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n.horizontal {\n  flex-wrap: wrap;\n  column-gap: var(--space-6);\n}\n\n.error {\n  display: flex;\n  gap: var(--space-1);\n  align-items: center;\n  font-size: var(--font-size-sm);\n  color: var(--color-danger-text);\n}\n\n.errorIcon {\n  flex-shrink: 0;\n}\n\n.box {\n  border-radius: var(--radius-full);\n}\n\n.box[data-invalid] {\n  border-color: var(--color-danger);\n}\n\n.box::after {\n  width: 40%;\n  height: 40%;\n  content: '';\n  background-color: currentColor;\n  border-radius: var(--radius-full);\n  transform: scale(0);\n  transition: transform var(--duration-fast) var(--easing-standard);\n}\n\n:checked + .box::after {\n  transform: scale(1);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './RadioGroup.js';
+export type { RadioGroupProps, RadioProps } from './RadioGroup.js';

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties, SelectHTMLAttributes } from 'react';
+import { FieldSize } from '../Input/index.js';
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** @default 'md' */
+    size?: FieldSize;
+    /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */
+    invalid?: boolean;
+    /**
+     * Text of an empty first option, selected while nothing else is. It cannot be picked again, so
+     * pair it with `required` or a reset action.
+     */
+    placeholder?: string;
+    /** Class of the outer box. Other props go to the `<select>`. */
+    className?: string;
+    /** Style of the outer box. */
+    style?: CSSProperties;
+}
+/** Native select, styled to match the other fields. Pass `<option>` and `<optgroup>` children. */
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;

package/dist/components/Select/Select.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { ChevronDownIcon as t } from "../Icon/icons.js";
+import { useFieldControl as n } from "../FormField/formFieldContext.js";
+import r from "../../styles/field.module.js";
+import i from "./Select.module.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Select/Select.tsx
+var c = a(function({ size: a = "md", invalid: c, placeholder: l, className: u, style: d, id: f, disabled: p, required: m, multiple: h, value: g, defaultValue: _, "aria-describedby": v, children: y, ...b }, x) {
+	let S = n({
+		id: f,
+		disabled: p,
+		required: m,
+		invalid: c,
+		"aria-describedby": v
+	}), C = l !== void 0 && !h;
+	return /* @__PURE__ */ s("div", {
+		className: e(i.wrapper, u),
+		style: d,
+		children: [/* @__PURE__ */ s("select", {
+			ref: x,
+			id: S.id,
+			disabled: S.disabled,
+			required: S.required,
+			multiple: h,
+			value: g,
+			defaultValue: C && g === void 0 ? _ ?? "" : _,
+			"aria-invalid": S["aria-invalid"],
+			"aria-describedby": S["aria-describedby"],
+			"data-invalid": S.invalid || void 0,
+			className: e(r.control, r[a], i.select, h && i.multiple),
+			...b,
+			children: [C && /* @__PURE__ */ o("option", {
+				value: "",
+				disabled: !0,
+				children: l
+			}), y]
+		}), !h && /* @__PURE__ */ o(t, { className: i.chevron })]
+	});
+});
+export { c as Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["styles","field","field_module_default","Select_module_default","Select","forwardRef","describedBy","props","control","useFieldControl","usePlaceholder","placeholder","multiple","cn","className","value","defaultValue","size","children","ChevronDownIcon"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type SelectHTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport field from '@/styles/field.module.css';\nimport { useFieldControl } from '../FormField/formFieldContext';\nimport { ChevronDownIcon } from '../Icon';\nimport type { FieldSize } from '../Input';\nimport styles from './Select.module.css';\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\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  /**\n   * Text of an empty first option, selected while nothing else is. It cannot be picked again, so\n   * pair it with `required` or a reset action.\n   */\n  placeholder?: string;\n  /** Class of the outer box. Other props go to the `<select>`. */\n  className?: string;\n  /** Style of the outer box. */\n  style?: CSSProperties;\n}\n\n/** Native select, styled to match the other fields. Pass `<option>` and `<optgroup>` children. */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n  {\n    size = 'md',\n    invalid,\n    placeholder,\n    className,\n    style,\n    id,\n    disabled,\n    required,\n    multiple,\n    value,\n    defaultValue,\n    'aria-describedby': describedBy,\n    children,\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 usePlaceholder = placeholder !== undefined && !multiple;\n\n  return (\n    <div className={cn(styles.wrapper, className)} style={style}>\n      <select\n        ref={ref}\n        id={control.id}\n        disabled={control.disabled}\n        required={control.required}\n        multiple={multiple}\n        value={value}\n        defaultValue={usePlaceholder && value === undefined ? (defaultValue ?? '') : defaultValue}\n        aria-invalid={control['aria-invalid']}\n        aria-describedby={control['aria-describedby']}\n        data-invalid={control.invalid || undefined}\n        className={cn(field.control, field[size], styles.select, multiple && styles.multiple)}\n        {...props}\n      >\n        {usePlaceholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </select>\n      {!multiple && <ChevronDownIcon className={styles.chevron} />}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAyBA,IAAaI,IAASC,EAA2C,SAC/D,EACE,UAAO,MACP,YACA,gBACA,cACA,UACA,OACA,aACA,aACA,aACA,UACA,iBACA,oBAAoBC,GACpB,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAgB;EAC9B;EACA;EACA;EACA;EACA,oBAAoBH;CACtB,CAAC,GACKI,IAAiBC,MAAgB,KAAA,KAAa,CAACC;CAErD,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAGb,EAAO,SAASc,CAAS;EAAU;EAAtD,UAAA,CACE,kBAAC,UAAD;GACO;GACL,IAAIN,EAAQ;GACZ,UAAUA,EAAQ;GAClB,UAAUA,EAAQ;GACR;GACH;GACP,cAAcE,KAAkBK,MAAU,KAAA,IAAaC,KAAgB,KAAMA;GAC7E,gBAAcR,EAAQ;GACtB,oBAAkBA,EAAQ;GAC1B,gBAAcA,EAAQ,WAAW,KAAA;GACjC,WAAWK,EAAGZ,EAAM,SAASA,EAAMgB,IAAOjB,EAAO,QAAQY,KAAYZ,EAAO,QAAQ;GACpF,GAAIO;GAZN,UAAA,CAcGG,KACC,kBAAC,UAAD;IAAQ,OAAM;IAAG,UAAA;IACd,UAAAC;GACK,CAAA,GAETO,CACK;EACP,CAAA,GAAA,CAACN,KAAY,kBAACO,GAAD,EAAiB,WAAWnB,EAAO,QAAU,CAAA,CACxD;;AAET,CAAC"}

package/dist/components/Select/Select.module.js

@@ -0,0 +1,10 @@
+// src/components/Select/Select.module.css
+var e = "onyx-wrapper-KS2K3", t = "onyx-select-cjdcr", n = "onyx-multiple-cwGEC", r = "onyx-chevron-PLUsh", i = {
+	wrapper: e,
+	select: t,
+	multiple: n,
+	chevron: r
+};
+export { r as chevron, i as default, n as multiple, t as select, e as wrapper };
+
+//# sourceMappingURL=Select.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.js","names":["wrapper","select","multiple","chevron","Select_module_default"],"sources":["../../../src/components/Select/Select.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 0;\n}\n\n.select {\n  padding-inline-end: calc(var(--space-3) * 2 + var(--size-icon-sm));\n  text-overflow: ellipsis;\n  cursor: pointer;\n  appearance: none;\n}\n\n.select:has(option[value='']:checked) {\n  color: var(--color-text-muted);\n}\n\n.select option {\n  color: var(--color-text);\n}\n\n.multiple {\n  padding-block: var(--space-2);\n  padding-inline-end: var(--space-3);\n}\n\n.chevron {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-end: var(--space-3);\n  width: var(--size-icon-sm);\n  height: 100%;\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n\n.select:disabled + .chevron {\n  color: var(--color-text-disabled);\n}\n"],"mappings":""}

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

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

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

@@ -0,0 +1,22 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * `text` matches a line of the surrounding text, `rect` a block and `circle` an avatar.
+     * @default 'text'
+     */
+    variant?: 'text' | 'rect' | 'circle';
+    /** CSS width. Numbers are pixels. Lines of text fill the container by default. */
+    width?: CSSProperties['width'];
+    /** CSS height. Numbers are pixels. Ignored by text, which takes the line height. */
+    height?: CSSProperties['height'];
+    /**
+     * Lines of text to draw; the last one is shorter.
+     * @default 1
+     */
+    lines?: number;
+}
+/**
+ * Placeholder shaped like content that is still loading. It is hidden from assistive technology:
+ * mark the region that is loading with `aria-busy` and announce the outcome elsewhere.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLSpanElement>>;