@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/FormField/FormField.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { ErrorIcon as t } from "../Icon/icons.js";
+import { VisuallyHidden as n } from "../VisuallyHidden/VisuallyHidden.js";
+import { Label as r } from "../Label/Label.js";
+import { FormFieldContext as i } from "./formFieldContext.js";
+import a from "./FormField.module.js";
+import { forwardRef as o, useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+// src/components/FormField/FormField.tsx
+var u = o(function({ label: o, helperText: u, error: d, required: f, disabled: p, hideLabel: m = !1, controlId: h, className: g, children: _, ...v }, y) {
+	let b = s(), x = h ?? b, S = `${x}-helper`, C = `${x}-error`, w = u != null, T = d != null && d !== !1, E = /* @__PURE__ */ c(r, {
+		htmlFor: x,
+		required: f,
+		disabled: p,
+		children: o
+	});
+	return /* @__PURE__ */ l("div", {
+		ref: y,
+		className: e(a.field, g),
+		...v,
+		children: [
+			m ? /* @__PURE__ */ c(n, { children: E }) : E,
+			/* @__PURE__ */ c(i.Provider, {
+				value: {
+					id: x,
+					describedBy: e(w && S, T && C) || void 0,
+					invalid: T,
+					disabled: p,
+					required: f
+				},
+				children: _
+			}),
+			w && /* @__PURE__ */ c("p", {
+				id: S,
+				className: a.helper,
+				children: u
+			}),
+			T && /* @__PURE__ */ l("p", {
+				id: C,
+				className: a.error,
+				children: [/* @__PURE__ */ c(t, { className: a.errorIcon }), d]
+			})
+		]
+	});
+});
+export { u as FormField };
+
+//# sourceMappingURL=FormField.js.map

package/dist/components/FormField/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","names":["styles","FormField_module_default","FormField","forwardRef","props","generatedId","useId","id","controlId","helperId","errorId","hasHelper","helperText","invalid","error","labelElement","Label","label","cn","className","hideLabel","VisuallyHidden","FormFieldContext","ErrorIcon"],"sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { ErrorIcon } from '../Icon';\nimport { Label } from '../Label';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { FormFieldContext } from './formFieldContext';\nimport styles from './FormField.module.css';\n\nexport interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visible caption, rendered as the `<label>` of the control. */\n  label: ReactNode;\n  /** Hint shown below the control and linked with `aria-describedby`. */\n  helperText?: ReactNode;\n  /** Error message. Marks the control as invalid and is linked with `aria-describedby`. */\n  error?: ReactNode;\n  /** Marks the control as required and shows a marker next to the label. */\n  required?: boolean;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Keeps the label for assistive technology only. */\n  hideLabel?: boolean;\n  /** Id of the control. Generated when omitted. */\n  controlId?: string;\n  /** One `Input`, `Textarea`, `Select` or `Slider`, which picks up the field's id and state. */\n  children: ReactNode;\n}\n\n/**\n * Wraps a form control with its label, helper text and error message, and wires them up with\n * `htmlFor`, `aria-describedby` and `aria-invalid`.\n */\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(function FormField(\n  {\n    label,\n    helperText,\n    error,\n    required,\n    disabled,\n    hideLabel = false,\n    controlId,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = controlId ?? generatedId;\n  const helperId = `${id}-helper`;\n  const errorId = `${id}-error`;\n  const hasHelper = helperText !== undefined && helperText !== null;\n  const invalid = error !== undefined && error !== null && error !== false;\n\n  const labelElement = (\n    <Label htmlFor={id} required={required} disabled={disabled}>\n      {label}\n    </Label>\n  );\n\n  return (\n    <div ref={ref} className={cn(styles.field, className)} {...props}>\n      {hideLabel ? <VisuallyHidden>{labelElement}</VisuallyHidden> : labelElement}\n      <FormFieldContext.Provider\n        value={{\n          id,\n          describedBy: cn(hasHelper && helperId, invalid && errorId) || undefined,\n          invalid,\n          disabled,\n          required,\n        }}\n      >\n        {children}\n      </FormFieldContext.Provider>\n      {hasHelper && (\n        <p id={helperId} className={styles.helper}>\n          {helperText}\n        </p>\n      )}\n      {invalid && (\n        <p id={errorId} className={styles.error}>\n          <ErrorIcon className={styles.errorIcon} />\n          {error}\n        </p>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AA+BA,IAAaE,IAAYC,EAA2C,SAClE,EACE,UACA,eACA,UACA,aACA,aACA,eAAY,IACZ,cACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAcC,EAAM,GACpBC,IAAKC,KAAaH,GAClBI,IAAW,GAAGF,EAAG,UACjBG,IAAU,GAAGH,EAAG,SAChBI,IAAYC,KAA2C,MACvDC,IAAUC,KAAiC,QAAQA,MAAU,IAE7DC,IACJ,kBAACC,GAAD;EAAO,SAAST;EAAc;EAAoB;EAC/C,UAAAU;CACI,CAAA;CAGT,OACE,kBAAC,OAAD;EAAU;EAAK,WAAWC,EAAGlB,EAAO,OAAOmB,CAAS;EAAG,GAAIf;EAA3D,UAAA;GACGgB,IAAY,kBAACC,GAAD,EAAA,UAAiBN,EAA6B,CAAA,IAAIA;GAC/D,kBAACO,EAAiB,UAAlB;IACE,OAAO;KACL;KACA,aAAaJ,EAAGP,KAAaF,GAAUI,KAAWH,CAAO,KAAK,KAAA;KAC9D;KACA;KACA;IACF;IAEC;GACwB,CAAA;GAC1BC,KACC,kBAAC,KAAD;IAAG,IAAIF;IAAU,WAAWT,EAAO;IAChC,UAAAY;GACA,CAAA;GAEJC,KACC,kBAAC,KAAD;IAAG,IAAIH;IAAS,WAAWV,EAAO;IAAlC,UAAA,CACE,kBAACuB,GAAD,EAAW,WAAWvB,EAAO,UAAY,CAAA,GACxCc,CACA;;EAEF;;AAET,CAAC"}

package/dist/components/FormField/FormField.module.js

@@ -0,0 +1,10 @@
+// src/components/FormField/FormField.module.css
+var e = "onyx-field-NXQSy", t = "onyx-helper-JuBZ6", n = "onyx-error-4SHKr", r = "onyx-errorIcon-bd5lg", i = {
+	field: e,
+	helper: t,
+	error: n,
+	errorIcon: r
+};
+export { i as default, n as error, r as errorIcon, e as field, t as helper };
+
+//# sourceMappingURL=FormField.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.module.js","names":["field","helper","error","errorIcon","FormField_module_default"],"sources":["../../../src/components/FormField/FormField.module.css"],"sourcesContent":[".field {\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n}\n\n.helper,\n.error {\n  margin: 0;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n}\n\n.helper {\n  color: var(--color-text-muted);\n}\n\n.error {\n  display: flex;\n  gap: var(--space-1);\n  align-items: center;\n  color: var(--color-danger-text);\n}\n\n.errorIcon {\n  flex-shrink: 0;\n}\n"],"mappings":""}

package/dist/components/FormField/formFieldContext.d.ts

@@ -0,0 +1,24 @@
+export interface FormFieldContextValue {
+    id: string;
+    describedBy: string | undefined;
+    invalid: boolean;
+    disabled: boolean | undefined;
+    required: boolean | undefined;
+}
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue | null>;
+export interface FieldControlProps {
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    'aria-describedby'?: string;
+}
+/** Merges the props of a form control with the ones its enclosing `FormField` provides. */
+export declare function useFieldControl({ id, disabled, required, invalid, 'aria-describedby': describedBy, }: FieldControlProps): {
+    id: string | undefined;
+    disabled: boolean | undefined;
+    required: boolean | undefined;
+    invalid: boolean;
+    'aria-invalid': true | undefined;
+    'aria-describedby': string | undefined;
+};

package/dist/components/FormField/formFieldContext.js

@@ -0,0 +1,18 @@
+import { cn as e } from "../../utils/cn.js";
+import { createContext as t, useContext as n } from "react";
+// src/components/FormField/formFieldContext.ts
+var r = t(null);
+function i({ id: t, disabled: i, required: a, invalid: o, "aria-describedby": s }) {
+	let c = n(r), l = o ?? c?.invalid ?? !1;
+	return {
+		id: t ?? c?.id,
+		disabled: i ?? c?.disabled,
+		required: a ?? c?.required,
+		invalid: l,
+		"aria-invalid": l || void 0,
+		"aria-describedby": e(c?.describedBy, s) || void 0
+	};
+}
+export { r as FormFieldContext, i as useFieldControl };
+
+//# sourceMappingURL=formFieldContext.js.map

package/dist/components/FormField/formFieldContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formFieldContext.js","names":["FormFieldContext","createContext","useFieldControl","describedBy","field","useContext","isInvalid","invalid","id","disabled","required","cn"],"sources":["../../../src/components/FormField/formFieldContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { cn } from '@/utils/cn';\n\nexport interface FormFieldContextValue {\n  id: string;\n  describedBy: string | undefined;\n  invalid: boolean;\n  disabled: boolean | undefined;\n  required: boolean | undefined;\n}\n\nexport const FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nexport interface FieldControlProps {\n  id?: string;\n  disabled?: boolean;\n  required?: boolean;\n  invalid?: boolean;\n  'aria-describedby'?: string;\n}\n\n/** Merges the props of a form control with the ones its enclosing `FormField` provides. */\nexport function useFieldControl({\n  id,\n  disabled,\n  required,\n  invalid,\n  'aria-describedby': describedBy,\n}: FieldControlProps) {\n  const field = useContext(FormFieldContext);\n  const isInvalid = invalid ?? field?.invalid ?? false;\n\n  return {\n    id: id ?? field?.id,\n    disabled: disabled ?? field?.disabled,\n    required: required ?? field?.required,\n    invalid: isInvalid,\n    'aria-invalid': isInvalid || undefined,\n    'aria-describedby': cn(field?.describedBy, describedBy) || undefined,\n  };\n}\n"],"mappings":";;;AAWA,IAAaA,IAAmBC,EAA4C,IAAI;AAWhF,SAAgBC,EAAgB,EAC9B,OACA,aACA,aACA,YACA,oBAAoBC,KACA;CACpB,IAAMC,IAAQC,EAAWL,CAAgB,GACnCM,IAAYC,KAAWH,GAAO,WAAW;CAE/C,OAAO;EACL,IAAII,KAAMJ,GAAO;EACjB,UAAUK,KAAYL,GAAO;EAC7B,UAAUM,KAAYN,GAAO;EAC7B,SAASE;EACT,gBAAgBA,KAAa,KAAA;EAC7B,oBAAoBK,EAAGP,GAAO,aAAaD,CAAW,KAAK,KAAA;CAC7D;AACF"}

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

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

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Rank in the document outline, rendered as `<h1>` to `<h6>`. Pick it from the structure of
+     * the page, then use `size` for the look.
+     * @default 2
+     */
+    level?: HeadingLevel;
+    /** Visual size. Defaults to a size that matches `level`. */
+    size?: HeadingSize;
+}
+export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/components/Heading/Heading.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Heading.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Heading/Heading.tsx
+var i = {
+	1: "3xl",
+	2: "2xl",
+	3: "xl",
+	4: "lg",
+	5: "md",
+	6: "sm"
+}, a = {
+	sm: t.sm,
+	md: t.md,
+	lg: t.lg,
+	xl: t.xl,
+	"2xl": t.size2xl,
+	"3xl": t.size3xl,
+	"4xl": t.size4xl
+}, o = n(function({ level: n = 2, size: o = i[n], className: s, ...c }, l) {
+	let u = `h${n}`;
+	return /* @__PURE__ */ r(u, {
+		ref: l,
+		className: e(t.heading, a[o], s),
+		...c
+	});
+});
+export { o as Heading };
+
+//# sourceMappingURL=Heading.js.map

package/dist/components/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","names":["styles","Heading_module_default","defaultSizes","sizeClasses","Heading","forwardRef","level","props","Component","cn","size","className"],"sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Heading.module.css';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Rank in the document outline, rendered as `<h1>` to `<h6>`. Pick it from the structure of\n   * the page, then use `size` for the look.\n   * @default 2\n   */\n  level?: HeadingLevel;\n  /** Visual size. Defaults to a size that matches `level`. */\n  size?: HeadingSize;\n}\n\nconst defaultSizes: Record<HeadingLevel, HeadingSize> = {\n  1: '3xl',\n  2: '2xl',\n  3: 'xl',\n  4: 'lg',\n  5: 'md',\n  6: 'sm',\n};\n\nconst sizeClasses: Record<HeadingSize, string | undefined> = {\n  sm: styles.sm,\n  md: styles.md,\n  lg: styles.lg,\n  xl: styles.xl,\n  '2xl': styles.size2xl,\n  '3xl': styles.size3xl,\n  '4xl': styles.size4xl,\n};\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { level = 2, size = defaultSizes[level], className, ...props },\n  ref,\n) {\n  const Component = `h${level}` as const;\n\n  return (\n    <Component ref={ref} className={cn(styles.heading, sizeClasses[size], className)} {...props} />\n  );\n});\n"],"mappings":";;;;;;AAkBA,IAAME,IAAkD;CACtD,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL,GAEMC,IAAuD;CAC3D,IAAIH,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,IAAIA,EAAO;CACX,OAAOA,EAAO;CACd,OAAOA,EAAO;CACd,OAAOA,EAAO;AAChB,GAEaI,IAAUC,EAA6C,SAClE,EAAE,WAAQ,GAAG,UAAOH,EAAaI,IAAQ,cAAW,GAAGC,KACvD,GACA;CACA,IAAMC,IAAY,IAAIF;CAEtB,OACE,kBAACE,GAAD;EAAgB;EAAK,WAAWC,EAAGT,EAAO,SAASG,EAAYO,IAAOC,CAAS;EAAG,GAAIJ;CAAQ,CAAA;AAElG,CAAC"}

package/dist/components/Heading/Heading.module.js

@@ -0,0 +1,14 @@
+// src/components/Heading/Heading.module.css
+var e = "onyx-heading-2pnHW", t = "onyx-sm-0p2sS", n = "onyx-md--B-e3", r = "onyx-lg-LZdYs", i = "onyx-xl-1WQmT", a = "onyx-size2xl-LnbpV", o = "onyx-size3xl-mYwix", s = "onyx-size4xl-holtr", c = {
+	heading: e,
+	sm: t,
+	md: n,
+	lg: r,
+	xl: i,
+	size2Xl: a,
+	size3Xl: o,
+	size4Xl: s
+};
+export { c as default, e as heading, r as lg, n as md, a as size2Xl, o as size3Xl, s as size4Xl, t as sm, i as xl };
+
+//# sourceMappingURL=Heading.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.module.js","names":["heading","sm","md","lg","xl","size2Xl","size3Xl","size4Xl","Heading_module_default"],"sources":["../../../src/components/Heading/Heading.module.css"],"sourcesContent":[".heading {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-tight);\n  color: var(--color-text);\n  text-wrap: balance;\n}\n\n.sm {\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n}\n\n.md {\n  font-size: var(--font-size-md);\n  line-height: var(--line-height-normal);\n}\n\n.lg {\n  font-size: var(--font-size-lg);\n  line-height: var(--line-height-snug);\n}\n\n.xl {\n  font-size: var(--font-size-xl);\n  line-height: var(--line-height-snug);\n}\n\n.size2xl {\n  font-size: var(--font-size-2xl);\n}\n\n.size3xl {\n  font-size: var(--font-size-3xl);\n  letter-spacing: var(--letter-spacing-tight);\n}\n\n.size4xl {\n  font-size: var(--font-size-4xl);\n  font-weight: var(--font-weight-bold);\n  letter-spacing: var(--letter-spacing-tight);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Heading } from './Heading.js';
+export type { HeadingLevel, HeadingProps, HeadingSize } from './Heading.js';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+export type IconSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    /**
+     * Accessible name. Without it the icon is decorative and hidden from assistive technology,
+     * so the surrounding text or control must carry the meaning.
+     */
+    label?: string;
+    /**
+     * `inherit` follows the font size of the surrounding text.
+     * @default 'inherit'
+     */
+    size?: IconSize;
+}
+/** Renders a 24×24 stroke icon. Pass the shapes as children, or use one of the built-in icons. */
+export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Icon.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Icon/Icon.tsx
+var i = n(function({ label: n, size: i = "inherit", className: a, children: o, ...s }, c) {
+	return /* @__PURE__ */ r("svg", {
+		ref: c,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		focusable: "false",
+		role: n ? "img" : void 0,
+		"aria-label": n,
+		"aria-hidden": !n || void 0,
+		className: e(t.icon, t[i], a),
+		...s,
+		children: o
+	});
+});
+export { i as Icon };
+
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":["styles","Icon_module_default","Icon","forwardRef","props","label","cn","size","className"],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Icon.module.css';\n\nexport type IconSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {\n  /**\n   * Accessible name. Without it the icon is decorative and hidden from assistive technology,\n   * so the surrounding text or control must carry the meaning.\n   */\n  label?: string;\n  /**\n   * `inherit` follows the font size of the surrounding text.\n   * @default 'inherit'\n   */\n  size?: IconSize;\n}\n\n/** Renders a 24×24 stroke icon. Pass the shapes as children, or use one of the built-in icons. */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  { label, size = 'inherit', className, children, ...props },\n  ref,\n) {\n  return (\n    <svg\n      ref={ref}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      focusable=\"false\"\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn(styles.icon, styles[size], className)}\n      {...props}\n    >\n      {children}\n    </svg>\n  );\n});\n"],"mappings":";;;;;;AAoBA,IAAaE,IAAOC,EAAqC,SACvD,EAAE,UAAO,UAAO,WAAW,cAAW,aAAU,GAAGC,KACnD,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,OAAM;EACN,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,WAAU;EACV,MAAMC,IAAQ,QAAQ,KAAA;EACtB,cAAYA;EACZ,eAAa,MAAQ,KAAA;EACrB,WAAWC,EAAGN,EAAO,MAAMA,EAAOO,IAAOC,CAAS;EAClD,GAAIJ;EAEH;CACE,CAAA;AAET,CAAC"}

package/dist/components/Icon/Icon.module.js

@@ -0,0 +1,13 @@
+// src/components/Icon/Icon.module.css
+var e = "onyx-icon-szG-X", t = "onyx-inherit-k1qag", n = "onyx-xs-mghPd", r = "onyx-sm-sfJ0-", i = "onyx-md-nlSCK", a = "onyx-lg-56VkH", o = "onyx-xl-0lQu8", s = {
+	icon: e,
+	inherit: t,
+	xs: n,
+	sm: r,
+	md: i,
+	lg: a,
+	xl: o
+};
+export { s as default, e as icon, t as inherit, a as lg, i as md, r as sm, o as xl, n as xs };
+
+//# sourceMappingURL=Icon.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.js","names":["icon","inherit","xs","sm","md","lg","xl","Icon_module_default"],"sources":["../../../src/components/Icon/Icon.module.css"],"sourcesContent":[".icon {\n  display: inline-block;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.inherit {\n  width: 1em;\n  height: 1em;\n}\n\n.xs {\n  width: var(--size-icon-xs);\n  height: var(--size-icon-xs);\n}\n\n.sm {\n  width: var(--size-icon-sm);\n  height: var(--size-icon-sm);\n}\n\n.md {\n  width: var(--size-icon-md);\n  height: var(--size-icon-md);\n}\n\n.lg {\n  width: var(--size-icon-lg);\n  height: var(--size-icon-lg);\n}\n\n.xl {\n  width: var(--size-icon-xl);\n  height: var(--size-icon-xl);\n}\n"],"mappings":""}

package/dist/components/Icon/icons.d.ts

@@ -0,0 +1,17 @@
+import { IconProps } from './Icon.js';
+export declare const CheckIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const MinusIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const CloseIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ChevronDownIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ChevronUpIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeftIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ChevronRightIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ArrowUpIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ArrowDownIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ArrowUpDownIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ExternalLinkIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const MoreHorizontalIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const InfoIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const SuccessIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const WarningIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;
+export declare const ErrorIcon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/components/Icon/icons.js

@@ -0,0 +1,47 @@
+"use client";
+import { Icon as e } from "./Icon.js";
+import { forwardRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Icon/icons.tsx
+function a(n, i) {
+	let a = t(function(t, n) {
+		return /* @__PURE__ */ r(e, {
+			ref: n,
+			...t,
+			children: i
+		});
+	});
+	return a.displayName = n, a;
+}
+var o = a("CheckIcon", /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5" })), s = a("MinusIcon", /* @__PURE__ */ r("path", { d: "M5 12h14" })), c = a("CloseIcon", /* @__PURE__ */ r("path", { d: "M18 6 6 18M6 6l12 12" })), l = a("ChevronDownIcon", /* @__PURE__ */ r("path", { d: "m6 9 6 6 6-6" })), u = a("ChevronUpIcon", /* @__PURE__ */ r("path", { d: "m18 15-6-6-6 6" })), d = a("ChevronLeftIcon", /* @__PURE__ */ r("path", { d: "m15 18-6-6 6-6" })), f = a("ChevronRightIcon", /* @__PURE__ */ r("path", { d: "m9 18 6-6-6-6" })), p = a("ArrowUpIcon", /* @__PURE__ */ r("path", { d: "M12 19V5M5 12l7-7 7 7" })), m = a("ArrowDownIcon", /* @__PURE__ */ r("path", { d: "M12 5v14M19 12l-7 7-7-7" })), h = a("ArrowUpDownIcon", /* @__PURE__ */ r("path", { d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16" })), g = a("ExternalLinkIcon", /* @__PURE__ */ r("path", { d: "M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })), _ = a("MoreHorizontalIcon", /* @__PURE__ */ i(n, { children: [
+	/* @__PURE__ */ r("circle", {
+		cx: "5",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ r("circle", {
+		cx: "12",
+		cy: "12",
+		r: "1"
+	}),
+	/* @__PURE__ */ r("circle", {
+		cx: "19",
+		cy: "12",
+		r: "1"
+	})
+] })), v = a("InfoIcon", /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("circle", {
+	cx: "12",
+	cy: "12",
+	r: "10"
+}), /* @__PURE__ */ r("path", { d: "M12 16v-4M12 8h.01" })] })), y = a("SuccessIcon", /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("circle", {
+	cx: "12",
+	cy: "12",
+	r: "10"
+}), /* @__PURE__ */ r("path", { d: "m9 12 2 2 4-4" })] })), b = a("WarningIcon", /* @__PURE__ */ r("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01" })), x = a("ErrorIcon", /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("circle", {
+	cx: "12",
+	cy: "12",
+	r: "10"
+}), /* @__PURE__ */ r("path", { d: "M12 8v4M12 16h.01" })] }));
+export { m as ArrowDownIcon, h as ArrowUpDownIcon, p as ArrowUpIcon, o as CheckIcon, l as ChevronDownIcon, d as ChevronLeftIcon, f as ChevronRightIcon, u as ChevronUpIcon, c as CloseIcon, x as ErrorIcon, g as ExternalLinkIcon, v as InfoIcon, s as MinusIcon, _ as MoreHorizontalIcon, y as SuccessIcon, b as WarningIcon };
+
+//# sourceMappingURL=icons.js.map

package/dist/components/Icon/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":["_Fragment","createIcon","Component","forwardRef","Icon","props","shapes","displayName","CheckIcon","MinusIcon","CloseIcon","ChevronDownIcon","ChevronUpIcon","ChevronLeftIcon","ChevronRightIcon","ArrowUpIcon","ArrowDownIcon","ArrowUpDownIcon","ExternalLinkIcon","MoreHorizontalIcon","Fragment","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon"],"sources":["../../../src/components/Icon/icons.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { Icon, type IconProps } from './Icon';\n\nfunction createIcon(displayName: string, shapes: ReactNode) {\n  const Component = forwardRef<SVGSVGElement, IconProps>(function BuiltInIcon(props, ref) {\n    return (\n      <Icon ref={ref} {...props}>\n        {shapes}\n      </Icon>\n    );\n  });\n  Component.displayName = displayName;\n  return Component;\n}\n\nexport const CheckIcon = createIcon('CheckIcon', <path d=\"M20 6 9 17l-5-5\" />);\nexport const MinusIcon = createIcon('MinusIcon', <path d=\"M5 12h14\" />);\nexport const CloseIcon = createIcon('CloseIcon', <path d=\"M18 6 6 18M6 6l12 12\" />);\nexport const ChevronDownIcon = createIcon('ChevronDownIcon', <path d=\"m6 9 6 6 6-6\" />);\nexport const ChevronUpIcon = createIcon('ChevronUpIcon', <path d=\"m18 15-6-6-6 6\" />);\nexport const ChevronLeftIcon = createIcon('ChevronLeftIcon', <path d=\"m15 18-6-6 6-6\" />);\nexport const ChevronRightIcon = createIcon('ChevronRightIcon', <path d=\"m9 18 6-6-6-6\" />);\nexport const ArrowUpIcon = createIcon('ArrowUpIcon', <path d=\"M12 19V5M5 12l7-7 7 7\" />);\nexport const ArrowDownIcon = createIcon('ArrowDownIcon', <path d=\"M12 5v14M19 12l-7 7-7-7\" />);\nexport const ArrowUpDownIcon = createIcon(\n  'ArrowUpDownIcon',\n  <path d=\"m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16\" />,\n);\nexport const ExternalLinkIcon = createIcon(\n  'ExternalLinkIcon',\n  <path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />,\n);\nexport const MoreHorizontalIcon = createIcon(\n  'MoreHorizontalIcon',\n  <>\n    <circle cx=\"5\" cy=\"12\" r=\"1\" />\n    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n    <circle cx=\"19\" cy=\"12\" r=\"1\" />\n  </>,\n);\nexport const InfoIcon = createIcon(\n  'InfoIcon',\n  <>\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 16v-4M12 8h.01\" />\n  </>,\n);\nexport const SuccessIcon = createIcon(\n  'SuccessIcon',\n  <>\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"m9 12 2 2 4-4\" />\n  </>,\n);\nexport const WarningIcon = createIcon(\n  'WarningIcon',\n  <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01\" />,\n);\nexport const ErrorIcon = createIcon(\n  'ErrorIcon',\n  <>\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 8v4M12 16h.01\" />\n  </>,\n);\n"],"mappings":";;;;;AAGA,SAASC,EAAW,GAAqB,GAAmB;CAC1D,IAAMC,IAAYC,EAAqC,SAAqB,GAAO,GAAK;EACtF,OACE,kBAACC,GAAD;GAAW;GAAK,GAAIC;GACjB,UAAAC;EACG,CAAA;CAEV,CAAC;CAED,OADA,EAAU,cAAcC,GACjBL;AACT;AAEA,IAAaM,IAAYP,EAAW,aAAa,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA,CAAC,GAChEQ,IAAYR,EAAW,aAAa,kBAAC,QAAD,EAAM,GAAE,WAAY,CAAA,CAAC,GACzDS,IAAYT,EAAW,aAAa,kBAAC,QAAD,EAAM,GAAE,uBAAwB,CAAA,CAAC,GACrEU,IAAkBV,EAAW,mBAAmB,kBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA,CAAC,GACzEW,IAAgBX,EAAW,iBAAiB,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA,CAAC,GACvEY,IAAkBZ,EAAW,mBAAmB,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA,CAAC,GAC3Ea,IAAmBb,EAAW,oBAAoB,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA,CAAC,GAC5Ec,IAAcd,EAAW,eAAe,kBAAC,QAAD,EAAM,GAAE,wBAAyB,CAAA,CAAC,GAC1Ee,IAAgBf,EAAW,iBAAiB,kBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA,CAAC,GAChFgB,IAAkBhB,EAC7B,mBACA,kBAAC,QAAD,EAAM,GAAE,4CAA6C,CAAA,CACvD,GACaiB,IAAmBjB,EAC9B,oBACA,kBAAC,QAAD,EAAM,GAAE,+EAAgF,CAAA,CAC1F,GACakB,IAAqBlB,EAChC,sBACA,kBAAAD,GAAA,EAAA,UAAA;CACE,kBAAC,UAAD;EAAQ,IAAG;EAAI,IAAG;EAAK,GAAE;CAAK,CAAA;CAC9B,kBAAC,UAAD;EAAQ,IAAG;EAAK,IAAG;EAAK,GAAE;CAAK,CAAA;CAC/B,kBAAC,UAAD;EAAQ,IAAG;EAAK,IAAG;EAAK,GAAE;CAAK,CAAA;AAC/B,EAAA,CAAA,CACJ,GACaqB,IAAWpB,EACtB,YACA,kBAAAD,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;CAAQ,IAAG;CAAK,IAAG;CAAK,GAAE;AAAM,CAAA,GAChC,kBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA,CAC9B,EAAA,CAAA,CACJ,GACasB,IAAcrB,EACzB,eACA,kBAAAD,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;CAAQ,IAAG;CAAK,IAAG;CAAK,GAAE;AAAM,CAAA,GAChC,kBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA,CACzB,EAAA,CAAA,CACJ,GACauB,IAActB,EACzB,eACA,kBAAC,QAAD,EAAM,GAAE,4GAA6G,CAAA,CACvH,GACauB,IAAYvB,EACvB,aACA,kBAAAD,GAAA,EAAA,UAAA,CACE,kBAAC,UAAD;CAAQ,IAAG;CAAK,IAAG;CAAK,GAAE;AAAM,CAAA,GAChC,kBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,CAC7B,EAAA,CAAA,CACJ"}

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

@@ -0,0 +1,3 @@
+export { Icon } from './Icon.js';
+export type { IconProps, IconSize } from './Icon.js';
+export { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, ErrorIcon, ExternalLinkIcon, InfoIcon, MinusIcon, MoreHorizontalIcon, SuccessIcon, WarningIcon, } from './icons.js';

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../Button/index.js';
+export interface IconButtonProps extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'children' | 'aria-label'> {
+    /** Accessible name. Required because the button has no visible text. */
+    label: string;
+    /** The icon. It is hidden from assistive technology; `label` names the button. */
+    children: ReactNode;
+    /** @default 'ghost' */
+    variant?: ButtonProps['variant'];
+}
+/** Square button that shows only an icon. */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,25 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { Button as t } from "../Button/Button.js";
+import n from "./IconButton.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+// src/components/IconButton/IconButton.tsx
+var a = r(function({ label: r, variant: a = "ghost", size: o = "md", className: s, children: c, ...l }, u) {
+	return /* @__PURE__ */ i(t, {
+		ref: u,
+		variant: a,
+		size: o,
+		"aria-label": r,
+		className: e(n.iconButton, n[o], s),
+		...l,
+		children: /* @__PURE__ */ i("span", {
+			className: n.icon,
+			"aria-hidden": "true",
+			children: c
+		})
+	});
+});
+export { a as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["styles","IconButton_module_default","IconButton","forwardRef","props","Button","label","cn","size","className"],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Button, type ButtonProps } from '../Button';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n  ButtonProps,\n  'startIcon' | 'endIcon' | 'fullWidth' | 'children' | 'aria-label'\n> {\n  /** Accessible name. Required because the button has no visible text. */\n  label: string;\n  /** The icon. It is hidden from assistive technology; `label` names the button. */\n  children: ReactNode;\n  /** @default 'ghost' */\n  variant?: ButtonProps['variant'];\n}\n\n/** Square button that shows only an icon. */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { label, variant = 'ghost', size = 'md', className, children, ...props },\n  ref,\n) {\n  return (\n    <Button\n      ref={ref}\n      variant={variant}\n      size={size}\n      aria-label={label}\n      className={cn(styles.iconButton, styles[size], className)}\n      {...props}\n    >\n      <span className={styles.icon} aria-hidden=\"true\">\n        {children}\n      </span>\n    </Button>\n  );\n});\n"],"mappings":";;;;;;;AAkBA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,aAAU,SAAS,UAAO,MAAM,cAAW,aAAU,GAAGC,KACjE,GACA;CACA,OACE,kBAACC,GAAD;EACO;EACI;EACH;EACN,cAAYC;EACZ,WAAWC,EAAGP,EAAO,YAAYA,EAAOQ,IAAOC,CAAS;EACxD,GAAIL;EAEJ,UAAA,kBAAC,QAAD;GAAM,WAAWJ,EAAO;GAAM,eAAY;GACvC;EACG,CAAA;CACA,CAAA;AAEZ,CAAC"}

package/dist/components/IconButton/IconButton.module.js

@@ -0,0 +1,11 @@
+// src/components/IconButton/IconButton.module.css
+var e = "onyx-iconButton-JAF-a", t = "onyx-icon-2DDWy", n = "onyx-sm--tgrW", r = "onyx-md-Rq8Ph", i = "onyx-lg-n8cv7", a = {
+	iconButton: e,
+	icon: t,
+	sm: n,
+	md: r,
+	lg: i
+};
+export { a as default, t as icon, e as iconButton, i as lg, r as md, n as sm };
+
+//# sourceMappingURL=IconButton.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.module.js","names":["iconButton","icon","sm","md","lg","IconButton_module_default"],"sources":["../../../src/components/IconButton/IconButton.module.css"],"sourcesContent":[".iconButton {\n  padding-inline: 0;\n}\n\n.icon {\n  display: inline-flex;\n}\n\n.sm {\n  min-width: var(--size-control-sm);\n  font-size: var(--size-icon-sm);\n}\n\n.md {\n  min-width: var(--size-control-md);\n  font-size: var(--size-icon-md);\n}\n\n.lg {\n  min-width: var(--size-control-lg);\n  font-size: var(--size-icon-lg);\n}\n\n@media (pointer: coarse) {\n  .iconButton {\n    min-width: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';
+export type FieldSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** @default 'md' */
+    size?: FieldSize;
+    /** Marks the value as invalid. Inside a `FormField`, defaults to whether it has an error. */
+    invalid?: boolean;
+    /** Element shown before the text, such as an icon or a prefix. */
+    startAdornment?: ReactNode;
+    /** Element shown after the text, such as an icon, a unit or a button. */
+    endAdornment?: ReactNode;
+    /** Class of the outer box, which draws the border. Other props go to the `<input>`. */
+    className?: string;
+    /** Style of the outer box. */
+    style?: CSSProperties;
+}
+/** Single-line text field. */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useFieldControl as t } from "../FormField/formFieldContext.js";
+import n from "../../styles/field.module.js";
+import r from "./Input.module.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Input/Input.tsx
+var s = i(function({ size: i = "md", invalid: s, startAdornment: c, endAdornment: l, className: u, style: d, type: f = "text", id: p, disabled: m, required: h, "aria-describedby": g, ..._ }, v) {
+	let y = t({
+		id: p,
+		disabled: m,
+		required: h,
+		invalid: s,
+		"aria-describedby": g
+	});
+	return /* @__PURE__ */ o("div", {
+		className: e(n.control, n[i], u),
+		style: d,
+		"data-invalid": y.invalid || void 0,
+		"data-disabled": y.disabled || void 0,
+		children: [
+			c && /* @__PURE__ */ a("span", {
+				className: n.adornment,
+				children: c
+			}),
+			/* @__PURE__ */ a("input", {
+				ref: v,
+				type: f,
+				id: y.id,
+				disabled: y.disabled,
+				required: y.required,
+				"aria-invalid": y["aria-invalid"],
+				"aria-describedby": y["aria-describedby"],
+				className: r.input,
+				..._
+			}),
+			l && /* @__PURE__ */ a("span", {
+				className: n.adornment,
+				children: l
+			})
+		]
+	});
+});
+export { s as Input };
+
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["field","styles","field_module_default","Input_module_default","Input","forwardRef","describedBy","props","control","useFieldControl","cn","size","className","startAdornment","endAdornment"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '@/utils/cn';\nimport field from '@/styles/field.module.css';\nimport { useFieldControl } from '../FormField/formFieldContext';\nimport styles from './Input.module.css';\n\nexport type FieldSize = 'sm' | 'md' | 'lg';\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '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  /** Element shown before the text, such as an icon or a prefix. */\n  startAdornment?: ReactNode;\n  /** Element shown after the text, such as an icon, a unit or a button. */\n  endAdornment?: ReactNode;\n  /** Class of the outer box, which draws the border. Other props go to the `<input>`. */\n  className?: string;\n  /** Style of the outer box. */\n  style?: CSSProperties;\n}\n\n/** Single-line text field. */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    size = 'md',\n    invalid,\n    startAdornment,\n    endAdornment,\n    className,\n    style,\n    type = 'text',\n    id,\n    disabled,\n    required,\n    'aria-describedby': describedBy,\n    ...props\n  },\n  ref,\n) {\n  const control = useFieldControl({\n    id,\n    disabled,\n    required,\n    invalid,\n    'aria-describedby': describedBy,\n  });\n\n  return (\n    <div\n      className={cn(field.control, field[size], className)}\n      style={style}\n      data-invalid={control.invalid || undefined}\n      data-disabled={control.disabled || undefined}\n    >\n      {startAdornment && <span className={field.adornment}>{startAdornment}</span>}\n      <input\n        ref={ref}\n        type={type}\n        id={control.id}\n        disabled={control.disabled}\n        required={control.required}\n        aria-invalid={control['aria-invalid']}\n        aria-describedby={control['aria-describedby']}\n        className={styles.input}\n        {...props}\n      />\n      {endAdornment && <span className={field.adornment}>{endAdornment}</span>}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAwBA,IAAaI,IAAQC,EAAyC,SAC5D,EACE,UAAO,MACP,YACA,mBACA,iBACA,cACA,UACA,UAAO,QACP,OACA,aACA,aACA,oBAAoBC,GACpB,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAgB;EAC9B;EACA;EACA;EACA;EACA,oBAAoBH;CACtB,CAAC;CAED,OACE,kBAAC,OAAD;EACE,WAAWI,EAAGV,EAAM,SAASA,EAAMW,IAAOC,CAAS;EAC5C;EACP,gBAAcJ,EAAQ,WAAW,KAAA;EACjC,iBAAeA,EAAQ,YAAY,KAAA;EAJrC,UAAA;GAMGK,KAAkB,kBAAC,QAAD;IAAM,WAAWb,EAAM;IAAY,UAAAa;GAAqB,CAAA;GAC3E,kBAAC,SAAD;IACO;IACC;IACN,IAAIL,EAAQ;IACZ,UAAUA,EAAQ;IAClB,UAAUA,EAAQ;IAClB,gBAAcA,EAAQ;IACtB,oBAAkBA,EAAQ;IAC1B,WAAWP,EAAO;IAClB,GAAIM;GACL,CAAA;GACAO,KAAgB,kBAAC,QAAD;IAAM,WAAWd,EAAM;IAAY,UAAAc;GAAmB,CAAA;EACpE;;AAET,CAAC"}

package/dist/components/Input/Input.module.js

@@ -0,0 +1,5 @@
+// src/components/Input/Input.module.css
+var e = "onyx-input-WjT81", t = { input: e };
+export { t as default, e as input };
+
+//# sourceMappingURL=Input.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.module.js","names":["input","Input_module_default"],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".input {\n  flex: 1;\n  align-self: stretch;\n  min-width: 0;\n  padding: 0;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  outline: none;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Input } from './Input.js';
+export type { FieldSize, InputProps } from './Input.js';

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,15 @@
+import { LabelHTMLAttributes } from 'react';
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Shows a required marker. The marker is visual only: set `required` on the control too, so
+     * assistive technology announces it.
+     * @default false
+     */
+    required?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+}
+/** Caption of a form control. Associate it with `htmlFor` or by wrapping the control. */
+export declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;

package/dist/components/Label/Label.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "./Label.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Label/Label.tsx
+var a = n(function({ required: n = !1, disabled: a = !1, size: o = "md", className: s, children: c, ...l }, u) {
+	return /* @__PURE__ */ i("label", {
+		ref: u,
+		"data-disabled": a || void 0,
+		className: e(t.label, t[o], s),
+		...l,
+		children: [c, n && /* @__PURE__ */ r("span", {
+			className: t.required,
+			"aria-hidden": "true",
+			children: "*"
+		})]
+	});
+});
+export { a as Label };
+
+//# sourceMappingURL=Label.js.map

package/dist/components/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["styles","Label_module_default","Label","forwardRef","props","disabled","cn","size","className","children","required"],"sources":["../../../src/components/Label/Label.tsx"],"sourcesContent":["import { forwardRef, type LabelHTMLAttributes } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Label.module.css';\n\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * Shows a required marker. The marker is visual only: set `required` on the control too, so\n   * assistive technology announces it.\n   * @default false\n   */\n  required?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n}\n\n/** Caption of a form control. Associate it with `htmlFor` or by wrapping the control. */\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(\n  { required = false, disabled = false, size = 'md', className, children, ...props },\n  ref,\n) {\n  return (\n    <label\n      ref={ref}\n      data-disabled={disabled || undefined}\n      className={cn(styles.label, styles[size], className)}\n      {...props}\n    >\n      {children}\n      {required && (\n        <span className={styles.required} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n});\n"],"mappings":";;;;;;AAkBA,IAAaE,IAAQC,EAAyC,SAC5D,EAAE,cAAW,IAAO,cAAW,IAAO,UAAO,MAAM,cAAW,aAAU,GAAGC,KAC3E,GACA;CACA,OACE,kBAAC,SAAD;EACO;EACL,iBAAeC,KAAY,KAAA;EAC3B,WAAWC,EAAGN,EAAO,OAAOA,EAAOO,IAAOC,CAAS;EACnD,GAAIJ;EAJN,UAAA,CAMGK,GACAC,KACC,kBAAC,QAAD;GAAM,WAAWV,EAAO;GAAU,eAAY;GAAO,UAAA;EAE/C,CAAA,CAEH;;AAEX,CAAC"}

package/dist/components/Label/Label.module.js

@@ -0,0 +1,10 @@
+// src/components/Label/Label.module.css
+var e = "onyx-label-RaRvM", t = "onyx-sm-65Zjw", n = "onyx-md-Ukw-y", r = "onyx-required-Ggrzc", i = {
+	label: e,
+	sm: t,
+	md: n,
+	required: r
+};
+export { i as default, e as label, n as md, r as required, t as sm };
+
+//# sourceMappingURL=Label.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.module.js","names":["label","sm","md","required","Label_module_default"],"sources":["../../../src/components/Label/Label.module.css"],"sourcesContent":[".label {\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: baseline;\n  font-weight: var(--font-weight-medium);\n  line-height: var(--line-height-normal);\n  color: var(--color-text);\n}\n\n.sm {\n  font-size: var(--font-size-xs);\n}\n\n.md {\n  font-size: var(--font-size-sm);\n}\n\n.label[data-disabled] {\n  color: var(--color-text-disabled);\n}\n\n.required {\n  color: var(--color-danger-text);\n}\n"],"mappings":""}

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

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