@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["styles","Alert_module_default","icons","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","Alert","forwardRef","props","titleId","useId","hasTitle","title","intent","cn","variant","className","icon","children","action","onDismiss","IconButton","dismissLabel","CloseIcon"],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport styles from './Alert.module.css';\n\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'danger';\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** @default 'info' */\n  intent?: AlertIntent;\n  /** @default 'subtle' */\n  variant?: 'subtle' | 'solid';\n  /** Short summary shown in bold above the content. */\n  title?: ReactNode;\n  /** Replaces the intent icon. `false` hides it. */\n  icon?: ReactNode;\n  /** Controls placed after the content, such as a button or a link. */\n  action?: ReactNode;\n  /** Shows a dismiss button that calls this function. */\n  onDismiss?: () => void;\n  /**\n   * Accessible name of the dismiss button.\n   * @default 'Dismiss'\n   */\n  dismissLabel?: string;\n}\n\nconst icons: Record<AlertIntent, ReactNode> = {\n  info: <InfoIcon />,\n  success: <SuccessIcon />,\n  warning: <WarningIcon />,\n  danger: <ErrorIcon />,\n};\n\n/**\n * Highlighted message about the page or a task. Warnings and errors use `role=\"alert\"`, so they\n * are announced as soon as they appear; the others use `role=\"status\"`. Override with `role`.\n */\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    intent = 'info',\n    variant = 'subtle',\n    title,\n    icon,\n    action,\n    onDismiss,\n    dismissLabel = 'Dismiss',\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null;\n\n  return (\n    <div\n      ref={ref}\n      role={intent === 'warning' || intent === 'danger' ? 'alert' : 'status'}\n      aria-labelledby={hasTitle ? titleId : undefined}\n      className={cn(styles.alert, styles[intent], styles[variant], className)}\n      {...props}\n    >\n      {icon !== false && (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon ?? icons[intent]}\n        </span>\n      )}\n      <div className={styles.content}>\n        {hasTitle && (\n          <p id={titleId} className={styles.title}>\n            {title}\n          </p>\n        )}\n        {children !== undefined && <div className={styles.description}>{children}</div>}\n        {action !== undefined && <div className={styles.action}>{action}</div>}\n      </div>\n      {onDismiss && (\n        <IconButton label={dismissLabel} size=\"sm\" className={styles.dismiss} onClick={onDismiss}>\n          <CloseIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AA4BA,IAAME,IAAwC;CAC5C,MAAM,kBAACC,GAAD,CAAW,CAAA;CACjB,SAAS,kBAACC,GAAD,CAAc,CAAA;CACvB,SAAS,kBAACC,GAAD,CAAc,CAAA;CACvB,QAAQ,kBAACC,GAAD,CAAY,CAAA;AACtB,GAMaC,IAAQC,EAAuC,SAC1D,EACE,YAAS,QACT,aAAU,UACV,UACA,SACA,WACA,cACA,kBAAe,WACf,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAWC,KAAiC;CAElD,OACE,kBAAC,OAAD;EACO;EACL,MAAMC,MAAW,aAAaA,MAAW,WAAW,UAAU;EAC9D,mBAAiBF,IAAWF,IAAU,KAAA;EACtC,WAAWK,EAAGf,EAAO,OAAOA,EAAOc,IAASd,EAAOgB,IAAUC,CAAS;EACtE,GAAIR;EALN,UAAA;GAOGS,MAAS,MACR,kBAAC,QAAD;IAAM,WAAWlB,EAAO;IAAM,eAAY;IACvC,UAAAkB,KAAQhB,EAAMY;GACX,CAAA;GAER,kBAAC,OAAD;IAAK,WAAWd,EAAO;IAAvB,UAAA;KACGY,KACC,kBAAC,KAAD;MAAG,IAAIF;MAAS,WAAWV,EAAO;MAC/B,UAAAa;KACA,CAAA;KAEJM,MAAa,KAAA,KAAa,kBAAC,OAAD;MAAK,WAAWnB,EAAO;MAAc;KAAc,CAAA;KAC7EoB,MAAW,KAAA,KAAa,kBAAC,OAAD;MAAK,WAAWpB,EAAO;MAAS,UAAAoB;KAAY,CAAA;IAClE;;GACJC,KACC,kBAACC,GAAD;IAAY,OAAOC;IAAc,MAAK;IAAK,WAAWvB,EAAO;IAAS,SAASqB;IAC7E,UAAA,kBAACG,GAAD,CAAY,CAAA;GACF,CAAA;EAEX;;AAET,CAAC"}

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,19 @@
+// src/components/Alert/Alert.module.css
+var e = "onyx-alert-7cYyI", t = "onyx-info-9r3r1", n = "onyx-success-1bzoB", r = "onyx-warning-q-j1Q", i = "onyx-danger-CiZkW", a = "onyx-subtle-XhGd-", o = "onyx-icon-Zg6SB", s = "onyx-title-abGgF", c = "onyx-solid-s-oW5", l = "onyx-content-UXnmZ", u = "onyx-description-pXPvw", d = "onyx-action-WeFR6", f = "onyx-dismiss-dQPPE", p = {
+	alert: e,
+	info: t,
+	success: n,
+	warning: r,
+	danger: i,
+	subtle: a,
+	icon: o,
+	title: s,
+	solid: c,
+	content: l,
+	description: u,
+	action: d,
+	dismiss: f
+};
+export { d as action, e as alert, l as content, i as danger, p as default, u as description, f as dismiss, o as icon, t as info, c as solid, a as subtle, n as success, s as title, r as warning };
+
+//# sourceMappingURL=Alert.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.js","names":["alert","info","success","warning","danger","subtle","icon","title","solid","content","description","action","dismiss","Alert_module_default"],"sources":["../../../src/components/Alert/Alert.module.css"],"sourcesContent":[".alert {\n  display: flex;\n  gap: var(--space-3);\n  align-items: flex-start;\n  padding: var(--space-3) var(--space-4);\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-lg);\n}\n\n.info {\n  --alert-solid: var(--color-info);\n  --alert-on-solid: var(--color-on-info);\n  --alert-subtle: var(--color-info-subtle);\n  --alert-text: var(--color-info-text);\n  --alert-border: var(--color-info-border);\n}\n\n.success {\n  --alert-solid: var(--color-success);\n  --alert-on-solid: var(--color-on-success);\n  --alert-subtle: var(--color-success-subtle);\n  --alert-text: var(--color-success-text);\n  --alert-border: var(--color-success-border);\n}\n\n.warning {\n  --alert-solid: var(--color-warning);\n  --alert-on-solid: var(--color-on-warning);\n  --alert-subtle: var(--color-warning-subtle);\n  --alert-text: var(--color-warning-text);\n  --alert-border: var(--color-warning-border);\n}\n\n.danger {\n  --alert-solid: var(--color-danger);\n  --alert-on-solid: var(--color-on-danger);\n  --alert-subtle: var(--color-danger-subtle);\n  --alert-text: var(--color-danger-text);\n  --alert-border: var(--color-danger-border);\n}\n\n.subtle {\n  color: var(--color-text);\n  background-color: var(--alert-subtle);\n  border-color: var(--alert-border);\n}\n\n.subtle .icon,\n.subtle .title {\n  color: var(--alert-text);\n}\n\n.solid {\n  color: var(--alert-on-solid);\n  background-color: var(--alert-solid);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 1lh;\n}\n\n.icon > svg {\n  width: var(--size-icon-md);\n  height: var(--size-icon-md);\n}\n\n.content {\n  display: grid;\n  flex: 1;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.title {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n.description {\n  min-width: 0;\n}\n\n.description > :where(p) {\n  margin: 0;\n}\n\n.action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n\n.dismiss {\n  margin-block: calc(var(--space-1) * -1);\n  margin-inline-end: calc(var(--space-2) * -1);\n  color: inherit;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert.js';
+export type { AlertIntent, AlertProps } from './Alert.js';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Name of the person or entity. Names the avatar and provides the initials fallback. */
+    name: string;
+    /** Image URL. The initials show while it is missing or fails to load. */
+    src?: string;
+    /** Alternative text of the image. @default name */
+    alt?: string;
+    /** @default 'md' */
+    size?: AvatarSize;
+    /** @default 'circle' */
+    shape?: 'circle' | 'square';
+}
+/** Picture of a person or entity, with their initials as a fallback. */
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Avatar.module.js";
+import { forwardRef as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/Avatar/Avatar.tsx
+function a(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return (t.length > 1 ? [t[0], t.at(-1)] : [t[0]]).map((e) => e ? String.fromCodePoint(e.codePointAt(0)) : "").join("").toUpperCase();
+}
+var o = n(function({ name: n, src: o, alt: s = n, size: c = "md", shape: l = "circle", className: u, ...d }, f) {
+	let [p, m] = r(), h = o !== void 0 && o !== p;
+	return /* @__PURE__ */ i("span", {
+		ref: f,
+		role: h ? void 0 : "img",
+		"aria-label": h ? void 0 : n,
+		className: e(t.avatar, t[c], t[l], u),
+		...d,
+		children: h ? /* @__PURE__ */ i("img", {
+			className: t.image,
+			src: o,
+			alt: s,
+			onError: () => m(o)
+		}) : /* @__PURE__ */ i("span", {
+			className: t.initials,
+			"aria-hidden": "true",
+			children: a(n)
+		})
+	});
+});
+export { o as Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["styles","Avatar_module_default","getInitials","words","name","word","Avatar","forwardRef","props","failedSrc","setFailedSrc","useState","showImage","src","cn","size","shape","className"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState, type HTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Avatar.module.css';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Name of the person or entity. Names the avatar and provides the initials fallback. */\n  name: string;\n  /** Image URL. The initials show while it is missing or fails to load. */\n  src?: string;\n  /** Alternative text of the image. @default name */\n  alt?: string;\n  /** @default 'md' */\n  size?: AvatarSize;\n  /** @default 'circle' */\n  shape?: 'circle' | 'square';\n}\n\nfunction getInitials(name: string) {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const letters = words.length > 1 ? [words[0], words.at(-1)] : [words[0]];\n\n  return letters\n    .map((word) => (word ? String.fromCodePoint(word.codePointAt(0)!) : ''))\n    .join('')\n    .toUpperCase();\n}\n\n/** Picture of a person or entity, with their initials as a fallback. */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, alt = name, size = 'md', shape = 'circle', className, ...props },\n  ref,\n) {\n  const [failedSrc, setFailedSrc] = useState<string>();\n  const showImage = src !== undefined && src !== failedSrc;\n\n  return (\n    <span\n      ref={ref}\n      role={showImage ? undefined : 'img'}\n      aria-label={showImage ? undefined : name}\n      className={cn(styles.avatar, styles[size], styles[shape], className)}\n      {...props}\n    >\n      {showImage ? (\n        <img className={styles.image} src={src} alt={alt} onError={() => setFailedSrc(src)} />\n      ) : (\n        <span className={styles.initials} aria-hidden=\"true\">\n          {getInitials(name)}\n        </span>\n      )}\n    </span>\n  );\n});\n"],"mappings":";;;;;;AAmBA,SAASE,EAAY,GAAc;CACjC,IAAMC,IAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CAGrD,QAFgBD,EAAM,SAAS,IAAI,CAACA,EAAM,IAAIA,EAAM,GAAG,EAAE,CAAC,IAAI,CAACA,EAAM,EAAE,EAAA,CAGpE,KAAK,MAAUE,IAAO,OAAO,cAAcA,EAAK,YAAY,CAAC,CAAE,IAAI,EAAG,CAAC,CACvE,KAAK,EAAE,CAAC,CACR,YAAY;AACjB;AAGA,IAAaC,IAASC,EAAyC,SAC7D,EAAE,SAAM,QAAK,SAAMH,GAAM,UAAO,MAAM,WAAQ,UAAU,cAAW,GAAGI,KACtE,GACA;CACA,IAAM,CAACC,GAAWC,KAAgBC,EAAiB,GAC7CC,IAAYC,MAAQ,KAAA,KAAaA,MAAQJ;CAE/C,OACE,kBAAC,QAAD;EACO;EACL,MAAMG,IAAY,KAAA,IAAY;EAC9B,cAAYA,IAAY,KAAA,IAAYR;EACpC,WAAWU,EAAGd,EAAO,QAAQA,EAAOe,IAAOf,EAAOgB,IAAQC,CAAS;EACnE,GAAIT;EAEH,UAAAI,IACC,kBAAC,OAAD;GAAK,WAAWZ,EAAO;GAAY;GAAU;GAAK,eAAeU,EAAaG,CAAG;EAAI,CAAA,IAErF,kBAAC,QAAD;GAAM,WAAWb,EAAO;GAAU,eAAY;GAC3C,UAAAE,EAAYE,CAAI;EACb,CAAA;CAEJ,CAAA;AAEV,CAAC"}

package/dist/components/Avatar/Avatar.module.js

@@ -0,0 +1,15 @@
+// src/components/Avatar/Avatar.module.css
+var e = "onyx-avatar-3xMuZ", t = "onyx-circle-O2tJa", n = "onyx-square-KXudv", r = "onyx-image-ieqGp", i = "onyx-xs-oSaLL", a = "onyx-sm-sZ2bk", o = "onyx-md-Fdkbz", s = "onyx-lg-pTTUA", c = "onyx-xl-mW58F", l = {
+	avatar: e,
+	circle: t,
+	square: n,
+	image: r,
+	xs: i,
+	sm: a,
+	md: o,
+	lg: s,
+	xl: c
+};
+export { e as avatar, t as circle, l as default, r as image, s as lg, o as md, a as sm, n as square, c as xl, i as xs };
+
+//# sourceMappingURL=Avatar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.js","names":["avatar","circle","square","image","xs","sm","md","lg","xl","Avatar_module_default"],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":[".avatar {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  font-weight: var(--font-weight-medium);\n  line-height: var(--line-height-none);\n  color: var(--color-primary-text);\n  vertical-align: middle;\n  user-select: none;\n  background-color: var(--color-primary-subtle);\n}\n\n.circle {\n  border-radius: var(--radius-full);\n}\n\n.square {\n  border-radius: var(--radius-md);\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.xs {\n  width: var(--space-6);\n  height: var(--space-6);\n  font-size: var(--font-size-xs);\n}\n\n.sm {\n  width: var(--size-control-sm);\n  height: var(--size-control-sm);\n  font-size: var(--font-size-xs);\n}\n\n.md {\n  width: var(--size-control-md);\n  height: var(--size-control-md);\n  font-size: var(--font-size-sm);\n}\n\n.lg {\n  width: var(--size-control-lg);\n  height: var(--size-control-lg);\n  font-size: var(--font-size-md);\n}\n\n.xl {\n  width: var(--space-16);\n  height: var(--space-16);\n  font-size: var(--font-size-xl);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar.js';
+export type { AvatarProps, AvatarSize } from './Avatar.js';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type BadgeIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type BadgeVariant = 'subtle' | 'solid' | 'outline';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** @default 'neutral' */
+    intent?: BadgeIntent;
+    /** @default 'subtle' */
+    variant?: BadgeVariant;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /** Element rendered before the label, usually an icon. */
+    icon?: ReactNode;
+}
+/** Short status or category label. Not interactive: put it next to a control, not inside one. */
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,17 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Badge.module.js";
+import { forwardRef as n } from "react";
+import { jsxs as r } from "react/jsx-runtime";
+// src/components/Badge/Badge.tsx
+var i = n(function({ intent: n = "neutral", variant: i = "subtle", size: a = "md", icon: o, className: s, children: c, ...l }, u) {
+	return /* @__PURE__ */ r("span", {
+		ref: u,
+		className: e(t.badge, t[n], t[i], t[a], s),
+		...l,
+		children: [o, c]
+	});
+});
+export { i as Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["styles","Badge_module_default","Badge","forwardRef","props","cn","intent","variant","size","className","icon","children"],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Badge.module.css';\n\nexport type BadgeIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';\nexport type BadgeVariant = 'subtle' | 'solid' | 'outline';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** @default 'neutral' */\n  intent?: BadgeIntent;\n  /** @default 'subtle' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n  /** Element rendered before the label, usually an icon. */\n  icon?: ReactNode;\n}\n\n/** Short status or category label. Not interactive: put it next to a control, not inside one. */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { intent = 'neutral', variant = 'subtle', size = 'md', icon, className, children, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(styles.badge, styles[intent], styles[variant], styles[size], className)}\n      {...props}\n    >\n      {icon}\n      {children}\n    </span>\n  );\n});\n"],"mappings":";;;;;;AAmBA,IAAaE,IAAQC,EAAwC,SAC3D,EAAE,YAAS,WAAW,aAAU,UAAU,UAAO,MAAM,SAAM,cAAW,aAAU,GAAGC,KACrF,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,OAAOA,EAAOM,IAASN,EAAOO,IAAUP,EAAOQ,IAAOC,CAAS;EACpF,GAAIL;EAHN,UAAA,CAKGM,GACAC,CACG;;AAEV,CAAC"}

package/dist/components/Badge/Badge.module.js

@@ -0,0 +1,18 @@
+// src/components/Badge/Badge.module.css
+var e = "onyx-badge-RsuMz", t = "onyx-sm-LYsCn", n = "onyx-md-4Or8q", r = "onyx-neutral-lulSm", i = "onyx-primary-S0WCS", a = "onyx-success-u9JiS", o = "onyx-warning-nsGp-", s = "onyx-danger-PD2hz", c = "onyx-info-na6DQ", l = "onyx-subtle-boe3x", u = "onyx-solid-0Leug", d = "onyx-outline-x06HL", f = {
+	badge: e,
+	sm: t,
+	md: n,
+	neutral: r,
+	primary: i,
+	success: a,
+	warning: o,
+	danger: s,
+	info: c,
+	subtle: l,
+	solid: u,
+	outline: d
+};
+export { e as badge, s as danger, f as default, c as info, n as md, r as neutral, d as outline, i as primary, t as sm, u as solid, l as subtle, a as success, o as warning };
+
+//# sourceMappingURL=Badge.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.js","names":["badge","sm","md","neutral","primary","success","warning","danger","info","subtle","solid","outline","Badge_module_default"],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".badge {\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  max-width: 100%;\n  font-weight: var(--font-weight-medium);\n  line-height: var(--line-height-tight);\n  white-space: nowrap;\n  vertical-align: middle;\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-full);\n}\n\n.sm {\n  padding: 0 var(--space-2);\n  font-size: var(--font-size-xs);\n}\n\n.md {\n  padding: var(--space-1) var(--space-3);\n  font-size: var(--font-size-sm);\n}\n\n.neutral {\n  --badge-solid: var(--color-bg-inverse);\n  --badge-on-solid: var(--color-text-inverse);\n  --badge-subtle: var(--color-bg-muted);\n  --badge-text: var(--color-text);\n  --badge-border: var(--color-border-strong);\n}\n\n.primary {\n  --badge-solid: var(--color-primary);\n  --badge-on-solid: var(--color-on-primary);\n  --badge-subtle: var(--color-primary-subtle);\n  --badge-text: var(--color-primary-text);\n  --badge-border: var(--color-primary);\n}\n\n.success {\n  --badge-solid: var(--color-success);\n  --badge-on-solid: var(--color-on-success);\n  --badge-subtle: var(--color-success-subtle);\n  --badge-text: var(--color-success-text);\n  --badge-border: var(--color-success);\n}\n\n.warning {\n  --badge-solid: var(--color-warning);\n  --badge-on-solid: var(--color-on-warning);\n  --badge-subtle: var(--color-warning-subtle);\n  --badge-text: var(--color-warning-text);\n  --badge-border: var(--color-warning);\n}\n\n.danger {\n  --badge-solid: var(--color-danger);\n  --badge-on-solid: var(--color-on-danger);\n  --badge-subtle: var(--color-danger-subtle);\n  --badge-text: var(--color-danger-text);\n  --badge-border: var(--color-danger);\n}\n\n.info {\n  --badge-solid: var(--color-info);\n  --badge-on-solid: var(--color-on-info);\n  --badge-subtle: var(--color-info-subtle);\n  --badge-text: var(--color-info-text);\n  --badge-border: var(--color-info);\n}\n\n.subtle {\n  color: var(--badge-text);\n  background-color: var(--badge-subtle);\n}\n\n.solid {\n  color: var(--badge-on-solid);\n  background-color: var(--badge-solid);\n}\n\n.outline {\n  color: var(--badge-text);\n  border-color: var(--badge-border);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeIntent, BadgeProps, BadgeVariant } from './Badge.js';

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,26 @@
+import { ElementType, HTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+import { PolymorphicComponent, PolymorphicPropsWithRef } from '../../utils/polymorphic.js';
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** Element shown between items. Defaults to a chevron. */
+    separator?: ReactNode;
+    /**
+     * Accessible name of the navigation landmark.
+     * @default 'Breadcrumb'
+     */
+    'aria-label'?: string;
+}
+/** Trail of links from the home page to the current page. */
+export declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
+export type BreadcrumbItemProps = LiHTMLAttributes<HTMLLIElement>;
+/** One step of the trail. Holds a `BreadcrumbLink`. */
+export declare const BreadcrumbItem: import('react').ForwardRefExoticComponent<BreadcrumbItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export interface BreadcrumbLinkOwnProps {
+    /**
+     * Marks the link as the current page with `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean;
+}
+export type BreadcrumbLinkProps<As extends ElementType = 'a'> = PolymorphicPropsWithRef<As, BreadcrumbLinkOwnProps>;
+/** Link of a `BreadcrumbItem`. Use `as` to render a router link. */
+export declare const BreadcrumbLink: PolymorphicComponent<"a", BreadcrumbLinkOwnProps>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { ChevronRightIcon as t } from "../Icon/icons.js";
+import n from "./Breadcrumb.module.js";
+import { createContext as r, forwardRef as i, useContext as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Breadcrumb/Breadcrumb.tsx
+var c = r(null), l = i(function({ separator: r = /* @__PURE__ */ o(t, {}), "aria-label": i = "Breadcrumb", className: a, children: s, ...l }, u) {
+	return /* @__PURE__ */ o("nav", {
+		ref: u,
+		"aria-label": i,
+		className: e(n.breadcrumb, a),
+		...l,
+		children: /* @__PURE__ */ o("ol", {
+			className: n.list,
+			children: /* @__PURE__ */ o(c.Provider, {
+				value: r,
+				children: s
+			})
+		})
+	});
+}), u = i(function({ className: t, children: r, ...i }, l) {
+	let u = a(c);
+	return /* @__PURE__ */ s("li", {
+		ref: l,
+		className: e(n.item, t),
+		...i,
+		children: [/* @__PURE__ */ o("span", {
+			className: n.separator,
+			"aria-hidden": "true",
+			children: u
+		}), r]
+	});
+}), d = i(function({ as: t = "a", current: r = !1, className: i, ...a }, s) {
+	return /* @__PURE__ */ o(t, {
+		ref: s,
+		"aria-current": r ? "page" : void 0,
+		className: e(n.link, i),
+		...a
+	});
+});
+export { l as Breadcrumb, u as BreadcrumbItem, d as BreadcrumbLink };
+
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","names":["styles","Breadcrumb_module_default","SeparatorContext","createContext","Breadcrumb","forwardRef","ChevronRightIcon","ariaLabel","props","cn","className","separator","BreadcrumbItem","useContext","children","BreadcrumbLink","Component","current"],"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type ElementType,\n  type HTMLAttributes,\n  type LiHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cn } from '@/utils/cn';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  PolymorphicPropsWithRef,\n} from '@/utils/polymorphic';\nimport { ChevronRightIcon } from '../Icon';\nimport styles from './Breadcrumb.module.css';\n\nconst SeparatorContext = createContext<ReactNode>(null);\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  /** Element shown between items. Defaults to a chevron. */\n  separator?: ReactNode;\n  /**\n   * Accessible name of the navigation landmark.\n   * @default 'Breadcrumb'\n   */\n  'aria-label'?: string;\n}\n\n/** Trail of links from the home page to the current page. */\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(\n  {\n    separator = <ChevronRightIcon />,\n    'aria-label': ariaLabel = 'Breadcrumb',\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <nav ref={ref} aria-label={ariaLabel} className={cn(styles.breadcrumb, className)} {...props}>\n      <ol className={styles.list}>\n        <SeparatorContext.Provider value={separator}>{children}</SeparatorContext.Provider>\n      </ol>\n    </nav>\n  );\n});\n\nexport type BreadcrumbItemProps = LiHTMLAttributes<HTMLLIElement>;\n\n/** One step of the trail. Holds a `BreadcrumbLink`. */\nexport const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  function BreadcrumbItem({ className, children, ...props }, ref) {\n    const separator = useContext(SeparatorContext);\n\n    return (\n      <li ref={ref} className={cn(styles.item, className)} {...props}>\n        <span className={styles.separator} aria-hidden=\"true\">\n          {separator}\n        </span>\n        {children}\n      </li>\n    );\n  },\n);\n\nexport interface BreadcrumbLinkOwnProps {\n  /**\n   * Marks the link as the current page with `aria-current=\"page\"`.\n   * @default false\n   */\n  current?: boolean;\n}\n\nexport type BreadcrumbLinkProps<As extends ElementType = 'a'> = PolymorphicPropsWithRef<\n  As,\n  BreadcrumbLinkOwnProps\n>;\n\n/** Link of a `BreadcrumbItem`. Use `as` to render a router link. */\nexport const BreadcrumbLink = forwardRef<\n  HTMLAnchorElement,\n  PolymorphicProps<'a', BreadcrumbLinkOwnProps>\n>(function BreadcrumbLink({ as: Component = 'a', current = false, className, ...props }, ref) {\n  return (\n    <Component\n      ref={ref}\n      aria-current={current ? 'page' : undefined}\n      className={cn(styles.link, className)}\n      {...props}\n    />\n  );\n}) as PolymorphicComponent<'a', BreadcrumbLinkOwnProps>;\n"],"mappings":";;;;;;;AAkBA,IAAME,IAAmBC,EAAyB,IAAI,GAazCC,IAAaC,EAAyC,SACjE,EACE,eAAY,kBAACC,GAAD,CAAmB,CAAA,GAC/B,cAAcC,IAAY,cAC1B,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,OAAD;EAAU;EAAK,cAAYD;EAAW,WAAWE,EAAGT,EAAO,YAAYU,CAAS;EAAG,GAAIF;EACrF,UAAA,kBAAC,MAAD;GAAI,WAAWR,EAAO;GACpB,UAAA,kBAACE,EAAiB,UAAlB;IAA2B,OAAOS;IAAY;GAAoC,CAAA;EAChF,CAAA;CACD,CAAA;AAET,CAAC,GAKYC,IAAiBP,EAC5B,SAAwB,EAAE,cAAW,aAAU,GAAGG,KAAS,GAAK;CAC9D,IAAMG,IAAYE,EAAWX,CAAgB;CAE7C,OACE,kBAAC,MAAD;EAAS;EAAK,WAAWO,EAAGT,EAAO,MAAMU,CAAS;EAAG,GAAIF;EAAzD,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWR,EAAO;GAAW,eAAY;GAC5C,UAAAW;EACG,CAAA,GACLG,CACC;;AAER,CACF,GAgBaC,IAAiBV,EAG5B,SAAwB,EAAE,IAAIW,IAAY,KAAK,aAAU,IAAO,cAAW,GAAGR,KAAS,GAAK;CAC5F,OACE,kBAACQ,GAAD;EACO;EACL,gBAAcC,IAAU,SAAS,KAAA;EACjC,WAAWR,EAAGT,EAAO,MAAMU,CAAS;EACpC,GAAIF;CACL,CAAA;AAEL,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.module.js

@@ -0,0 +1,11 @@
+// src/components/Breadcrumb/Breadcrumb.module.css
+var e = "onyx-breadcrumb-TVagK", t = "onyx-list-0leIR", n = "onyx-item-ZczhA", r = "onyx-separator-qrUX-", i = "onyx-link-nDu8Y onyx-focusRing-qmcYD", a = {
+	breadcrumb: e,
+	list: t,
+	item: n,
+	separator: r,
+	link: i
+};
+export { e as breadcrumb, a as default, n as item, i as link, t as list, r as separator };
+
+//# sourceMappingURL=Breadcrumb.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.module.js","names":["breadcrumb","list","item","separator","link","Breadcrumb_module_default"],"sources":["../../../src/components/Breadcrumb/Breadcrumb.module.css"],"sourcesContent":[".breadcrumb {\n  min-width: 0;\n  font-size: var(--font-size-sm);\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  row-gap: var(--space-1);\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.separator {\n  display: inline-flex;\n  margin-inline: var(--space-2);\n  color: var(--color-text-muted);\n}\n\n.item:first-child .separator {\n  display: none;\n}\n\n:dir(rtl) .separator > svg {\n  scale: -1 1;\n}\n\n.link {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  overflow: hidden;\n  color: var(--color-text-muted);\n  text-decoration-line: none;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  border-radius: var(--radius-sm);\n  transition: color var(--duration-fast) var(--easing-standard);\n}\n\n.link:is(a[href]):hover {\n  color: var(--color-text);\n  text-decoration-line: underline;\n  text-underline-offset: 0.2em;\n}\n\n.link[aria-current='page'] {\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text);\n}\n\n@media (pointer: coarse) {\n  .link {\n    display: inline-block;\n    line-height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './Breadcrumb.js';
+export type { BreadcrumbItemProps, BreadcrumbLinkOwnProps, BreadcrumbLinkProps, BreadcrumbProps, } from './Breadcrumb.js';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,29 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** @default 'primary' */
+    variant?: ButtonVariant;
+    /** @default 'md' */
+    size?: ButtonSize;
+    /**
+     * Shows a spinner and ignores clicks while keeping the button focusable and its width stable.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Added to the accessible name while `loading`.
+     * @default 'Loading'
+     */
+    loadingLabel?: string;
+    /** Element rendered before the label, usually an icon. */
+    startIcon?: ReactNode;
+    /** Element rendered after the label, usually an icon. */
+    endIcon?: ReactNode;
+    /**
+     * Stretches the button to the width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
+import { Spinner as n } from "../Spinner/Spinner.js";
+import r from "./Button.module.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Button/Button.tsx
+var c = i(function({ variant: i = "primary", size: c = "md", loading: l = !1, loadingLabel: u = "Loading", startIcon: d, endIcon: f, fullWidth: p = !1, type: m = "button", className: h, children: g, onClick: _, ...v }, y) {
+	return /* @__PURE__ */ s("button", {
+		ref: y,
+		type: m,
+		"aria-disabled": l || void 0,
+		"data-loading": l || void 0,
+		className: e(r.button, r[i], r[c], p && r.fullWidth, h),
+		onClick: (e) => {
+			l ? e.preventDefault() : _?.(e);
+		},
+		...v,
+		children: [/* @__PURE__ */ s("span", {
+			className: r.content,
+			children: [
+				d,
+				g,
+				f
+			]
+		}), l && /* @__PURE__ */ s(a, { children: [
+			/* @__PURE__ */ o(n, {
+				decorative: !0,
+				size: "inherit",
+				className: r.spinner
+			}),
+			" ",
+			/* @__PURE__ */ o(t, { children: u })
+		] })]
+	});
+});
+export { c as Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["styles","_Fragment","Button_module_default","Button","forwardRef","props","loading","cn","variant","size","fullWidth","className","event","onClick","startIcon","children","endIcon","Fragment","Spinner","VisuallyHidden","loadingLabel"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Spinner } from '../Spinner';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** @default 'primary' */\n  variant?: ButtonVariant;\n  /** @default 'md' */\n  size?: ButtonSize;\n  /**\n   * Shows a spinner and ignores clicks while keeping the button focusable and its width stable.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Added to the accessible name while `loading`.\n   * @default 'Loading'\n   */\n  loadingLabel?: string;\n  /** Element rendered before the label, usually an icon. */\n  startIcon?: ReactNode;\n  /** Element rendered after the label, usually an icon. */\n  endIcon?: ReactNode;\n  /**\n   * Stretches the button to the width of its container.\n   * @default false\n   */\n  fullWidth?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'md',\n    loading = false,\n    loadingLabel = 'Loading',\n    startIcon,\n    endIcon,\n    fullWidth = false,\n    type = 'button',\n    className,\n    children,\n    onClick,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-disabled={loading || undefined}\n      data-loading={loading || undefined}\n      className={cn(\n        styles.button,\n        styles[variant],\n        styles[size],\n        fullWidth && styles.fullWidth,\n        className,\n      )}\n      onClick={(event) => {\n        if (loading) {\n          event.preventDefault();\n          return;\n        }\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      <span className={styles.content}>\n        {startIcon}\n        {children}\n        {endIcon}\n      </span>\n      {loading && (\n        <>\n          <Spinner decorative size=\"inherit\" className={styles.spinner} />{' '}\n          <VisuallyHidden>{loadingLabel}</VisuallyHidden>\n        </>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;AAmCA,IAAaG,IAASC,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,aAAU,IACV,kBAAe,WACf,cACA,YACA,eAAY,IACZ,UAAO,UACP,cACA,aACA,YACA,GAAGC,KAEL,GACA;CACA,OACE,kBAAC,UAAD;EACO;EACC;EACN,iBAAeC,KAAW,KAAA;EAC1B,gBAAcA,KAAW,KAAA;EACzB,WAAWC,EACTP,EAAO,QACPA,EAAOQ,IACPR,EAAOS,IACPC,KAAaV,EAAO,WACpBW,CACF;EACA,UAAU,MAAU;GAClB,AAAIL,IACFM,EAAM,eAAe,IAGvBC,IAAUD,CAAK;EACjB;EACA,GAAIP;EAnBN,UAAA,CAqBE,kBAAC,QAAD;GAAM,WAAWL,EAAO;GAAxB,UAAA;IACGc;IACAC;IACAC;GACG;EACL,CAAA,GAAAV,KACC,kBAAAL,GAAA,EAAA,UAAA;GACE,kBAACiB,GAAD;IAAS,YAAA;IAAW,MAAK;IAAU,WAAWlB,EAAO;GAAU,CAAA;GAAE;GACjE,kBAACmB,GAAD,EAAA,UAAiBC,EAA6B,CAAA;EAC9C,EAAA,CAAA,CAEE;;AAEZ,CAAC"}

package/dist/components/Button/Button.module.js

@@ -0,0 +1,18 @@
+// src/components/Button/Button.module.css
+var e = "onyx-button-2ZuB7 onyx-focusRing-qmcYD", t = "onyx-content-EKXmF", n = "onyx-spinner-ZExvW", r = "onyx-sm-NhG0g", i = "onyx-md-hH4h3", a = "onyx-lg-2plQf", o = "onyx-fullWidth-36oJT", s = "onyx-primary-s1sM6", c = "onyx-danger-V4fX8", l = "onyx-secondary-R0waJ", u = "onyx-outline-F5jq-", d = "onyx-ghost-1KINV", f = {
+	button: e,
+	content: t,
+	spinner: n,
+	sm: r,
+	md: i,
+	lg: a,
+	fullWidth: o,
+	primary: s,
+	danger: c,
+	secondary: l,
+	outline: u,
+	ghost: d
+};
+export { e as button, t as content, c as danger, f as default, o as fullWidth, d as ghost, a as lg, i as md, u as outline, s as primary, l as secondary, r as sm, n as spinner };
+
+//# sourceMappingURL=Button.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.js","names":["button","content","spinner","sm","md","lg","fullWidth","primary","danger","secondary","outline","ghost","Button_module_default"],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  font-weight: var(--font-weight-medium);\n  line-height: var(--line-height-tight);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-md);\n  transition-timing-function: var(--easing-standard);\n  transition-duration: var(--duration-fast);\n  transition-property: background-color, border-color, color;\n}\n\n.content {\n  display: inline-flex;\n  gap: var(--space-2);\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n.button[data-loading] {\n  cursor: progress;\n}\n\n.button[data-loading] .content {\n  opacity: 0;\n}\n\n.spinner {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n}\n\n.sm {\n  min-height: var(--size-control-sm);\n  padding-inline: var(--space-3);\n  font-size: var(--font-size-sm);\n}\n\n.md {\n  min-height: var(--size-control-md);\n  padding-inline: var(--space-4);\n  font-size: var(--font-size-sm);\n}\n\n.lg {\n  min-height: var(--size-control-lg);\n  padding-inline: var(--space-5);\n  font-size: var(--font-size-md);\n}\n\n.fullWidth {\n  width: 100%;\n}\n\n.primary {\n  color: var(--color-on-primary);\n  background-color: var(--color-primary);\n}\n\n.primary:hover:not(:disabled, [aria-disabled='true']) {\n  background-color: var(--color-primary-hover);\n}\n\n.primary:active:not(:disabled, [aria-disabled='true']) {\n  background-color: var(--color-primary-active);\n}\n\n.danger {\n  color: var(--color-on-danger);\n  background-color: var(--color-danger);\n}\n\n.danger:hover:not(:disabled, [aria-disabled='true']) {\n  background-color: var(--color-danger-hover);\n}\n\n.danger:active:not(:disabled, [aria-disabled='true']) {\n  background-color: var(--color-danger-active);\n}\n\n.secondary {\n  color: var(--color-text);\n  background-color: var(--color-bg-muted);\n}\n\n.outline {\n  color: var(--color-text);\n  border-color: var(--color-border-strong);\n}\n\n.ghost {\n  color: var(--color-text);\n}\n\n:is(.secondary, .outline, .ghost):hover:not(:disabled, [aria-disabled='true']) {\n  background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));\n}\n\n:is(.secondary, .outline, .ghost):active:not(:disabled, [aria-disabled='true']) {\n  background-image: linear-gradient(var(--color-state-active), var(--color-state-active));\n}\n\n.button:disabled {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n  background-color: var(--color-bg-muted);\n  border-color: transparent;\n}\n\n:is(.outline, .ghost):disabled {\n  background-color: transparent;\n}\n\n.outline:disabled {\n  border-color: var(--color-border);\n}\n\n@media (pointer: coarse) {\n  .button {\n    min-height: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './Button.js';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,24 @@
+import { ElementType, HTMLAttributes } from 'react';
+import { PolymorphicComponent, PolymorphicPropsWithRef } from '../../utils/polymorphic.js';
+export interface CardOwnProps {
+    /** @default 'outline' */
+    variant?: 'outline' | 'elevated' | 'filled';
+    /**
+     * Inner spacing, shared by the header, body and footer.
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export type CardProps<As extends ElementType = 'div'> = PolymorphicPropsWithRef<As, CardOwnProps>;
+/**
+ * Surface that groups related content. Use `as="article"` or `as="section"` when the content
+ * stands on its own, and `CardHeader`, `CardBody` and `CardFooter` to lay it out.
+ */
+export declare const Card: PolymorphicComponent<"div", CardOwnProps>;
+export type CardSectionProps = HTMLAttributes<HTMLDivElement>;
+/** Top of a card, usually a heading with an optional action beside it. */
+export declare const CardHeader: import('react').ForwardRefExoticComponent<CardSectionProps & import('react').RefAttributes<HTMLDivElement>>;
+/** Main content of a card. */
+export declare const CardBody: import('react').ForwardRefExoticComponent<CardSectionProps & import('react').RefAttributes<HTMLDivElement>>;
+/** Bottom of a card, usually actions. */
+export declare const CardFooter: import('react').ForwardRefExoticComponent<CardSectionProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Card.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Card/Card.tsx
+var i = n(function({ as: n = "div", variant: i = "outline", padding: a = "md", className: o, ...s }, c) {
+	return /* @__PURE__ */ r(n, {
+		ref: c,
+		className: e(t.card, t[i], t[a], o),
+		...s
+	});
+}), a = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("div", {
+		ref: a,
+		className: e(t.header, n),
+		...i
+	});
+}), o = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("div", {
+		ref: a,
+		className: e(t.body, n),
+		...i
+	});
+}), s = n(function({ className: n, ...i }, a) {
+	return /* @__PURE__ */ r("div", {
+		ref: a,
+		className: e(t.footer, n),
+		...i
+	});
+});
+export { i as Card, o as CardBody, s as CardFooter, a as CardHeader };
+
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":["styles","Card_module_default","Card","forwardRef","Component","props","cn","variant","padding","className","CardHeader","CardBody","CardFooter"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  PolymorphicPropsWithRef,\n} from '@/utils/polymorphic';\nimport styles from './Card.module.css';\n\nexport interface CardOwnProps {\n  /** @default 'outline' */\n  variant?: 'outline' | 'elevated' | 'filled';\n  /**\n   * Inner spacing, shared by the header, body and footer.\n   * @default 'md'\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nexport type CardProps<As extends ElementType = 'div'> = PolymorphicPropsWithRef<As, CardOwnProps>;\n\n/**\n * Surface that groups related content. Use `as=\"article\"` or `as=\"section\"` when the content\n * stands on its own, and `CardHeader`, `CardBody` and `CardFooter` to lay it out.\n */\nexport const Card = forwardRef<HTMLDivElement, PolymorphicProps<'div', CardOwnProps>>(function Card(\n  { as: Component = 'div', variant = 'outline', padding = 'md', className, ...props },\n  ref,\n) {\n  return (\n    <Component\n      ref={ref}\n      className={cn(styles.card, styles[variant], styles[padding], className)}\n      {...props}\n    />\n  );\n}) as PolymorphicComponent<'div', CardOwnProps>;\n\nexport type CardSectionProps = HTMLAttributes<HTMLDivElement>;\n\n/** Top of a card, usually a heading with an optional action beside it. */\nexport const CardHeader = forwardRef<HTMLDivElement, CardSectionProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return <div ref={ref} className={cn(styles.header, className)} {...props} />;\n});\n\n/** Main content of a card. */\nexport const CardBody = forwardRef<HTMLDivElement, CardSectionProps>(function CardBody(\n  { className, ...props },\n  ref,\n) {\n  return <div ref={ref} className={cn(styles.body, className)} {...props} />;\n});\n\n/** Bottom of a card, usually actions. */\nexport const CardFooter = forwardRef<HTMLDivElement, CardSectionProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return <div ref={ref} className={cn(styles.footer, className)} {...props} />;\n});\n"],"mappings":";;;;;;AAyBA,IAAaE,IAAOC,EAAkE,SACpF,EAAE,IAAIC,IAAY,OAAO,aAAU,WAAW,aAAU,MAAM,cAAW,GAAGC,KAC5E,GACA;CACA,OACE,kBAACD,GAAD;EACO;EACL,WAAWE,EAAGN,EAAO,MAAMA,EAAOO,IAAUP,EAAOQ,IAAUC,CAAS;EACtE,GAAIJ;CACL,CAAA;AAEL,CAAC,GAKYK,IAAaP,EAA6C,SACrE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGN,EAAO,QAAQS,CAAS;EAAG,GAAIJ;CAAQ,CAAA;AAC7E,CAAC,GAGYM,IAAWR,EAA6C,SACnE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGN,EAAO,MAAMS,CAAS;EAAG,GAAIJ;CAAQ,CAAA;AAC3E,CAAC,GAGYO,IAAaT,EAA6C,SACrE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGN,EAAO,QAAQS,CAAS;EAAG,GAAIJ;CAAQ,CAAA;AAC7E,CAAC"}

package/dist/components/Card/Card.module.js

@@ -0,0 +1,17 @@
+// src/components/Card/Card.module.css
+var e = "onyx-card-Cb1o4", t = "onyx-outline-5JlQf", n = "onyx-elevated-5VEDw", r = "onyx-filled-wikYw", i = "onyx-none-GcNRH", a = "onyx-sm-J1U3g", o = "onyx-md-hGw-i", s = "onyx-lg-Qu3G6", c = "onyx-header-PTXf2", l = "onyx-body-W441Z", u = "onyx-footer-Mu-JC", d = {
+	card: e,
+	outline: t,
+	elevated: n,
+	filled: r,
+	none: i,
+	sm: a,
+	md: o,
+	lg: s,
+	header: c,
+	body: l,
+	footer: u
+};
+export { l as body, e as card, d as default, n as elevated, r as filled, u as footer, c as header, s as lg, o as md, i as none, t as outline, a as sm };
+
+//# sourceMappingURL=Card.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.js","names":["card","outline","elevated","filled","none","sm","md","lg","header","body","footer","Card_module_default"],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  --card-padding: var(--space-5);\n\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-text);\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-xl);\n}\n\n.outline {\n  background-color: var(--color-surface);\n  border-color: var(--color-border);\n}\n\n.elevated {\n  background-color: var(--color-surface-raised);\n  border-color: var(--color-border);\n  box-shadow: var(--shadow-md);\n}\n\n.filled {\n  background-color: var(--color-bg-subtle);\n}\n\n.none {\n  --card-padding: 0;\n}\n\n.sm {\n  --card-padding: var(--space-3);\n}\n\n.md {\n  --card-padding: var(--space-5);\n}\n\n.lg {\n  --card-padding: var(--space-8);\n}\n\n.header,\n.body,\n.footer {\n  padding: var(--card-padding);\n}\n\n.header {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n.header + .body {\n  padding-top: 0;\n}\n\n.body {\n  display: grid;\n  flex: 1;\n  gap: var(--space-3);\n  align-content: start;\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  align-items: center;\n  justify-content: flex-end;\n  border-top: var(--border-width-thin) solid var(--color-border);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Card, CardBody, CardFooter, CardHeader } from './Card.js';
+export type { CardOwnProps, CardProps, CardSectionProps } from './Card.js';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export type ChoiceSize = 'sm' | 'md' | 'lg';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Label shown next to the box. Without it, name the checkbox with `aria-label`. */
+    children?: ReactNode;
+    /** Extra text below the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * Shows a dash for a "some selected" state. It is visual and announced as mixed, but clicking
+     * still toggles `checked`.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /** Marks the checkbox as invalid. */
+    invalid?: boolean;
+    /** @default 'md' */
+    size?: ChoiceSize;
+    /** Called with the new checked state. */
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { CheckIcon as t, MinusIcon as n } from "../Icon/icons.js";
+import { mergeRefs as r } from "../../utils/mergeRefs.js";
+import i from "../../styles/choice.module.js";
+import a from "./Checkbox.module.js";
+import { forwardRef as o, useEffect as s, useId as c, useMemo as l, useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+// src/components/Checkbox/Checkbox.tsx
+var p = o(function({ children: o, description: p, indeterminate: m = !1, invalid: h = !1, size: g = "md", onCheckedChange: _, onChange: v, className: y, style: b, id: x, "aria-describedby": S, ...C }, w) {
+	let T = c(), E = x ?? T, D = `${E}-description`, O = u(null), k = l(() => r(w, O), [w]);
+	return s(() => {
+		O.current && (O.current.indeterminate = m);
+	}), /* @__PURE__ */ f("div", {
+		className: e(i.choice, i[g], y),
+		style: b,
+		children: [
+			/* @__PURE__ */ f("span", {
+				className: i.control,
+				children: [/* @__PURE__ */ d("input", {
+					ref: k,
+					type: "checkbox",
+					id: E,
+					"aria-invalid": h || void 0,
+					"aria-describedby": e(p !== void 0 && D, S) || void 0,
+					className: i.input,
+					onChange: (e) => {
+						v?.(e), _?.(e.target.checked);
+					},
+					...C
+				}), /* @__PURE__ */ f("span", {
+					className: e(i.box, a.box),
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ d(t, { className: a.check }), /* @__PURE__ */ d(n, { className: a.dash })]
+				})]
+			}),
+			o !== void 0 && /* @__PURE__ */ d("label", {
+				htmlFor: E,
+				className: i.label,
+				children: o
+			}),
+			p !== void 0 && /* @__PURE__ */ d("span", {
+				id: D,
+				className: i.description,
+				children: p
+			})
+		]
+	});
+});
+export { p as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":["choice","styles","choice_module_default","Checkbox_module_default","Checkbox","forwardRef","describedBy","props","generatedId","useId","inputId","id","descriptionId","inputRef","useRef","mergedRef","useMemo","mergeRefs","ref","useEffect","indeterminate","cn","size","className","invalid","description","onChange","event","onCheckedChange","CheckIcon","MinusIcon","children"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cn } from '@/utils/cn';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport choice from '@/styles/choice.module.css';\nimport { CheckIcon, MinusIcon } from '../Icon';\nimport styles from './Checkbox.module.css';\n\nexport type ChoiceSize = 'sm' | 'md' | 'lg';\n\nexport interface CheckboxProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size'\n> {\n  /** Label shown next to the box. Without it, name the checkbox with `aria-label`. */\n  children?: ReactNode;\n  /** Extra text below the label, linked with `aria-describedby`. */\n  description?: ReactNode;\n  /**\n   * Shows a dash for a \"some selected\" state. It is visual and announced as mixed, but clicking\n   * still toggles `checked`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Marks the checkbox as invalid. */\n  invalid?: boolean;\n  /** @default 'md' */\n  size?: ChoiceSize;\n  /** Called with the new checked state. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    children,\n    description,\n    indeterminate = false,\n    invalid = false,\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  const inputRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMemo(() => mergeRefs(ref, inputRef), [ref]);\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n  });\n\n  return (\n    <div className={cn(choice.choice, choice[size], className)} style={style}>\n      <span className={choice.control}>\n        <input\n          ref={mergedRef}\n          type=\"checkbox\"\n          id={inputId}\n          aria-invalid={invalid || undefined}\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.box)} aria-hidden=\"true\">\n          <CheckIcon className={styles.check} />\n          <MinusIcon className={styles.dash} />\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":";;;;;;;;;AAuCA,IAAaI,IAAWC,EAA4C,SAClE,EACE,aACA,gBACA,mBAAgB,IAChB,aAAU,IACV,UAAO,MACP,oBACA,aACA,cACA,UACA,OACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAChBI,IAAgB,GAAGF,EAAQ,eAC3BG,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,QAAcC,EAAUC,GAAKL,CAAQ,GAAG,CAACK,CAAG,CAAC;CAM/D,OAJAC,QAAgB;EACd,AAAIN,EAAS,YAAS,EAAS,QAAQ,gBAAgBO;CACzD,CAAC,GAGC,kBAAC,OAAD;EAAK,WAAWC,EAAGrB,EAAO,QAAQA,EAAOsB,IAAOC,CAAS;EAAU;EAAnE,UAAA;GACE,kBAAC,QAAD;IAAM,WAAWvB,EAAO;IAAxB,UAAA,CACE,kBAAC,SAAD;KACE,KAAKe;KACL,MAAK;KACL,IAAIL;KACJ,gBAAcc,KAAW,KAAA;KACzB,oBACEH,EAAGI,MAAgB,KAAA,KAAab,GAAeN,CAAW,KAAK,KAAA;KAEjE,WAAWN,EAAO;KAClB,WAAW,MAAU;MAEnB,AADA0B,IAAWC,CAAK,GAChBC,IAAkBD,EAAM,OAAO,OAAO;KACxC;KACA,GAAIpB;IACL,CAAA,GACD,kBAAC,QAAD;KAAM,WAAWc,EAAGrB,EAAO,KAAKC,EAAO,GAAG;KAAG,eAAY;KAAzD,UAAA,CACE,kBAAC4B,GAAD,EAAW,WAAW5B,EAAO,MAAQ,CAAA,GACrC,kBAAC6B,GAAD,EAAW,WAAW7B,EAAO,KAAO,CAAA,CAChC;IACF,CAAA,CAAA;;GACL8B,MAAa,KAAA,KACZ,kBAAC,SAAD;IAAO,SAASrB;IAAS,WAAWV,EAAO;IACxC;GACI,CAAA;GAERyB,MAAgB,KAAA,KACf,kBAAC,QAAD;IAAM,IAAIb;IAAe,WAAWZ,EAAO;IACxC,UAAAyB;GACG,CAAA;EAEL;;AAET,CAAC"}