@pantool/components 1.0.0-alpha.0

package/dist/atoms/input/input.d.ts

@@ -0,0 +1,39 @@
+import { FieldProps } from "../../internals/base-field/base-field.js";
+import { InputProps } from "@base-ui/react/input";
+
+//#region src/atoms/input/input.d.ts
+type InputProps$1 = Omit<InputProps, "size" | "className"> & Pick<FieldProps, "label" | "hideLabel" | "name" | "required" | "description" | "invalid" | "errorText" | "dirty" | "size" | "disabled" | "autoFocus"> & {
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    root?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    control?: string;
+  };
+};
+/**
+ * An input component with built-in labeling, validation, and theming.
+ * Built on top of Base UI's Input component and the internal Field component.
+ */
+declare function Input$1({
+  label,
+  hideLabel,
+  size,
+  disabled,
+  required,
+  name,
+  description,
+  invalid,
+  errorText,
+  dirty,
+  readOnly,
+  autoFocus,
+  classNames,
+  ...props
+}: InputProps$1): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Input$1 as Input, InputProps$1 as InputProps };
+//# sourceMappingURL=input.d.ts.map

package/dist/atoms/input/input.js

@@ -0,0 +1,2 @@
+import{Field as e}from"../../internals/base-field/base-field.js";import"../../internals/base-field/index.js";import t from"./input.module.js";import n from"clsx";import{jsx as r}from"react/jsx-runtime";import{Input as i}from"@base-ui/react/input";function a({label:a,hideLabel:o=!1,size:s=`md`,disabled:c=!1,required:l=!1,name:u,description:d,invalid:f,errorText:p,dirty:m,readOnly:h,autoFocus:g,classNames:_,...v}){return r(e,{label:a,hideLabel:o,size:s,disabled:c,required:l,errorText:p,invalid:f,description:d,classNames:{root:_?.root,label:_?.label,description:_?.description,error:_?.error},"data-slot":`input-root`,children:r(i,{disabled:c,required:l,readOnly:h,"data-slot":`input-control`,className:n(t.control,_?.control),...v})})}export{a as Input};
+//# sourceMappingURL=input.js.map

package/dist/atoms/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["Input","BaseInput","styles"],"sources":["../../../src/atoms/input/input.tsx"],"sourcesContent":["import {\n  Input as BaseInput,\n  type InputProps as BaseInputProps,\n} from \"@base-ui/react/input\";\nimport { Field, type FieldProps } from \"../../internals/base-field\";\nimport clsx from \"clsx\";\nimport styles from \"./input.module.css\";\n\nexport type InputProps = Omit<BaseInputProps, \"size\" | \"className\"> &\n  Pick<\n    FieldProps,\n    | \"label\"\n    | \"hideLabel\"\n    | \"name\"\n    | \"required\"\n    | \"description\"\n    | \"invalid\"\n    | \"errorText\"\n    | \"dirty\"\n    | \"size\"\n    | \"disabled\"\n    | \"autoFocus\"\n  > & {\n    /**\n     * Additional CSS classes for styling.\n     */\n    classNames?: {\n      root?: string;\n      label?: string;\n      description?: string;\n      error?: string;\n      control?: string;\n    };\n  };\n\n/**\n * An input component with built-in labeling, validation, and theming.\n * Built on top of Base UI's Input component and the internal Field component.\n */\nexport function Input({\n  label,\n  hideLabel = false,\n  size = \"md\",\n  disabled = false,\n  required = false,\n  name,\n  description,\n  invalid,\n  errorText,\n  dirty,\n  readOnly,\n  autoFocus,\n  classNames,\n  ...props\n}: InputProps) {\n  return (\n    <Field\n      label={label}\n      hideLabel={hideLabel}\n      size={size}\n      disabled={disabled}\n      required={required}\n      errorText={errorText}\n      invalid={invalid}\n      description={description}\n      classNames={{\n        root: classNames?.root,\n        label: classNames?.label,\n        description: classNames?.description,\n        error: classNames?.error,\n      }}\n      data-slot=\"input-root\"\n    >\n      <BaseInput\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        data-slot=\"input-control\"\n        className={clsx(styles[\"control\"], classNames?.control)}\n        {...props}\n      />\n    </Field>\n  );\n}\n"],"mappings":"uPAuCA,SAAgBA,EAAM,CACpB,QACA,YAAY,GACZ,OAAO,KACP,WAAW,GACX,WAAW,GACX,OACA,cACA,UACA,YACA,QACA,WACA,YACA,aACA,GAAG,GACU,CACb,OACE,EAAC,EAAD,CACS,QACI,YACL,OACI,WACA,WACC,YACF,UACI,cACb,WAAY,CACV,KAAM,GAAY,KAClB,MAAO,GAAY,MACnB,YAAa,GAAY,YACzB,MAAO,GAAY,KACrB,EACA,YAAU,sBAEV,EAACC,EAAD,CACY,WACA,WACA,WACV,YAAU,gBACV,UAAW,EAAKC,EAAO,QAAY,GAAY,OAAO,EACtD,GAAI,CACL,CAAA,CACI,CAAA,CAEX"}

package/dist/atoms/input/input.module.js

@@ -0,0 +1,2 @@
+var e={control:`uLevqq_control`};export{e as default};
+//# sourceMappingURL=input.module.js.map

package/dist/atoms/input/input.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.module.js","names":[],"sources":["../../../src/atoms/input/input.module.css"],"sourcesContent":[".control {\n  box-sizing: border-box;\n  padding: 0 var(--spacing-sm);\n  margin: 0;\n  border-radius: var(--field-control-radius);\n  border: 1px solid var(--field-control-border-color);\n  width: 100%;\n  height: var(--field-control-height);\n  font-family: inherit;\n  font-size: var(--field-control-font-size, var(--typography-body-2-size));\n  line-height: var(\n    --field-control-line-height,\n    var(--typography-body-2-height)\n  );\n  font-weight: var(\n    --field-control-font-weight,\n    var(--typography-body-2-weight)\n  );\n  background-color: var(--field-control-bg-color);\n  color: var(--field-control-text-color);\n  transition: border-color 0.2s ease-in-out;\n  font-family: var(--typography-typeface-ltr);\n\n  &::placeholder {\n    color: var(--field-control-placeholder-color);\n    font-family: var(--typography-typeface-ltr);\n  }\n\n  &:focus-visible {\n    outline-style: solid;\n    outline-width: var(--stroke-focus-ring);\n    outline-color: var(--color-action-info-base);\n    outline-offset: var(--spacing-xxs);\n  }\n}\n"],"mappings":"AAEA,IAAA,EAAa,CAAG,QAAU,gBAAI"}

package/dist/atoms/radio/index.d.ts

@@ -0,0 +1 @@
+import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio.js";

package/dist/atoms/radio/index.js

@@ -0,0 +1 @@
+import"./radio.js";

package/dist/atoms/radio/radio.css

@@ -0,0 +1,142 @@
+.FLTLnW_group {
+  gap: var(--spacing-xs);
+  flex-direction: column;
+  display: flex;
+}
+
+.FLTLnW_group[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+
+  & * {
+    cursor: not-allowed;
+  }
+}
+
+.FLTLnW_root {
+  --radio-size: 1rem;
+  --radio-bg: transparent;
+  --radio-border: var(--color-border-primary);
+  --radio-dot-color: transparent;
+  --radio-gap: var(--spacing-xs);
+  --radio-label-color: var(--color-content-neutral-base);
+  font-family: var(--typography-typeface-ltr);
+  align-items: center;
+  gap: var(--radio-gap);
+  display: flex;
+  position: relative;
+}
+
+.FLTLnW_control {
+  box-sizing: border-box;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  background-color: var(--radio-bg);
+  box-shadow: 0 0 0 1px var(--radio-border) inset;
+  cursor: pointer;
+  border: none;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  transition: background-color .2s, box-shadow .2s;
+  display: flex;
+}
+
+.FLTLnW_root[data-size="sm"] {
+  --radio-size: .875rem;
+  --radio-gap: var(--spacing-xs);
+  --radio-label-font-size: var(--typography-body-2-size);
+  --radio-label-line-height: var(--typography-body-2-height);
+  --radio-label-font-weight: var(--typography-body-2-weight);
+}
+
+.FLTLnW_root[data-size="md"], .FLTLnW_root:not([data-size]) {
+  --radio-size: 1rem;
+  --radio-gap: var(--spacing-xs);
+  --radio-label-font-size: var(--typography-body-1-size);
+  --radio-label-line-height: var(--typography-body-1-height);
+  --radio-label-font-weight: var(--typography-body-1-weight);
+}
+
+.FLTLnW_root[data-size="lg"] {
+  --radio-size: 1.25rem;
+  --radio-gap: var(--spacing-sm);
+  --radio-label-font-size: var(--typography-body-1-size);
+  --radio-label-line-height: var(--typography-body-1-height);
+  --radio-label-font-weight: var(--typography-body-1-weight);
+}
+
+.FLTLnW_control[data-checked]:not([data-invalid]) {
+  --radio-bg: var(--color-action-neutral-base);
+  --radio-border: transparent;
+  --radio-dot-color: var(--color-on-neutral);
+}
+
+.FLTLnW_control:focus-visible {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+.FLTLnW_root[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+
+  & * {
+    cursor: not-allowed;
+  }
+}
+
+.FLTLnW_root[data-invalid] {
+  --radio-border: var(--color-negative);
+  --radio-label-color: var(--color-content-negative-base);
+}
+
+.FLTLnW_control[data-invalid][data-checked] {
+  --radio-bg: var(--color-negative);
+  --radio-dot-color: var(--color-on-negative);
+}
+
+.FLTLnW_indicator {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.FLTLnW_indicator[data-unchecked] {
+  display: none;
+}
+
+.FLTLnW_indicator:before {
+  content: "";
+  background-color: var(--radio-dot-color);
+  border-radius: 9999px;
+  width: 45%;
+  height: 45%;
+  transition: background-color .2s;
+  display: block;
+}
+
+.FLTLnW_label {
+  font-size: var(--radio-label-font-size, var(--typography-body-2-size));
+  line-height: var(--radio-label-line-height, var(--typography-body-2-height));
+  font-weight: var(--radio-label-font-weight, var(--typography-body-2-weight));
+  color: var(--radio-label-color);
+}
+
+.FLTLnW_label--hidden {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}

package/dist/atoms/radio/radio.d.ts

@@ -0,0 +1,40 @@
+import { RadioRootProps } from "@base-ui/react/radio";
+import { RadioGroupProps } from "@base-ui/react/radio-group";
+
+//#region src/atoms/radio/radio.d.ts
+type RadioGroupProps$1 = Omit<RadioGroupProps, "className"> & {
+  /** The size applied to all child Radio items. @default "md" */size?: "sm" | "md" | "lg";
+  /**
+   * Gets or sets whether or not the group is in a visually invalid state.
+   * @default false
+   */
+  invalid?: boolean; /** Additional CSS classes for styling. */
+  classNames?: {
+    root?: string;
+  };
+};
+declare const RadioGroup$1: (props: RadioGroupProps$1) => import("react/jsx-runtime").JSX.Element;
+type RadioProps = Omit<RadioRootProps, "className"> & {
+  /** The size of the radio button. Inherited from RadioGroup if not set. @default "md" */size?: "sm" | "md" | "lg"; /** The text label accompanying the radio button. */
+  label: string;
+  /**
+   * Visually hides the label but keeps it accessible to screen readers.
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Gets or sets whether or not the radio is in a visually invalid state.
+   * @default false
+   */
+  invalid?: boolean; /** Additional CSS classes for styling. */
+  classNames?: {
+    root?: string;
+    control?: string;
+    indicator?: string;
+    label?: string;
+  };
+};
+declare const Radio$1: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupProps$1 as RadioGroupProps, RadioProps };
+//# sourceMappingURL=radio.d.ts.map

package/dist/atoms/radio/radio.js

@@ -0,0 +1,2 @@
+import e from"./radio.module.js";import t from"clsx";import{useId as n}from"react";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{Radio as a}from"@base-ui/react/radio";import{RadioGroup as o}from"@base-ui/react/radio-group";const s=n=>{let{size:i=`md`,invalid:a,disabled:s=!1,required:c=!1,classNames:l,children:u,...d}=n;return r(o,{...d,disabled:s,required:c,"data-size":i,"data-invalid":a||void 0,"data-disabled":s||void 0,"data-required":c||void 0,className:t(e.group,l?.root),"data-slot":`radio-group`,children:u})},c=o=>{let{size:s,label:c,hideLabel:l=!1,disabled:u=!1,required:d=!1,invalid:f,readOnly:p,classNames:m,...h}=o,g=n();return i(`div`,{"data-size":s,"data-disabled":u||void 0,"data-required":d||void 0,"data-invalid":f||void 0,className:t(e.root,m?.root),"data-slot":`radio-root`,children:[r(a.Root,{...h,disabled:u,required:d,readOnly:p,"data-invalid":f||void 0,className:t(e.control,m?.control),"data-slot":`radio-control`,id:g,children:r(a.Indicator,{"data-slot":`radio-indicator`,className:t(e.indicator,m?.indicator)})}),r(`label`,{htmlFor:g,className:t(e.label,l&&e[`label--hidden`],m?.label),"data-slot":`radio-label`,children:c})]})};export{c as Radio,s as RadioGroup};
+//# sourceMappingURL=radio.js.map

package/dist/atoms/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":["RadioGroup","BaseUIRadioGroup","styles","Radio","BaseUIRadio"],"sources":["../../../src/atoms/radio/radio.tsx"],"sourcesContent":["import {\n  Radio as BaseUIRadio,\n  type RadioRootProps,\n} from \"@base-ui/react/radio\";\nimport {\n  RadioGroup as BaseUIRadioGroup,\n  type RadioGroupProps as BaseUIRadioGroupProps,\n} from \"@base-ui/react/radio-group\";\nimport styles from \"./radio.module.css\";\nimport clsx from \"clsx\";\nimport { useId } from \"react\";\n\n// ─── RadioGroup ───────────────────────────────────────────────────────────────\n\nexport type RadioGroupProps = Omit<BaseUIRadioGroupProps, \"className\"> & {\n  /** The size applied to all child Radio items. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Gets or sets whether or not the group is in a visually invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /** Additional CSS classes for styling. */\n  classNames?: {\n    root?: string;\n  };\n};\n\nexport const RadioGroup = (props: RadioGroupProps) => {\n  const {\n    size = \"md\",\n    invalid,\n    disabled = false,\n    required = false,\n    classNames,\n    children,\n    ...otherProps\n  } = props;\n\n  return (\n    <BaseUIRadioGroup\n      {...otherProps}\n      disabled={disabled}\n      required={required}\n      data-size={size}\n      data-invalid={invalid || undefined}\n      data-disabled={disabled || undefined}\n      data-required={required || undefined}\n      className={clsx(styles[\"group\"], classNames?.root)}\n      data-slot=\"radio-group\"\n    >\n      {children}\n    </BaseUIRadioGroup>\n  );\n};\n\n// ─── Radio ────────────────────────────────────────────────────────────────────\n\nexport type RadioProps = Omit<RadioRootProps, \"className\"> & {\n  /** The size of the radio button. Inherited from RadioGroup if not set. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** The text label accompanying the radio button. */\n  label: string;\n  /**\n   * Visually hides the label but keeps it accessible to screen readers.\n   * @default false\n   */\n  hideLabel?: boolean;\n  /**\n   * Gets or sets whether or not the radio is in a visually invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /** Additional CSS classes for styling. */\n  classNames?: {\n    root?: string;\n    control?: string;\n    indicator?: string;\n    label?: string;\n  };\n};\n\nexport const Radio = (props: RadioProps) => {\n  const {\n    size,\n    label,\n    hideLabel = false,\n    disabled = false,\n    required = false,\n    invalid,\n    readOnly,\n    classNames,\n    ...otherProps\n  } = props;\n\n  const id = useId();\n\n  return (\n    <div\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-required={required || undefined}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-slot=\"radio-root\"\n    >\n      <BaseUIRadio.Root\n        {...otherProps}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        data-invalid={invalid || undefined}\n        className={clsx(styles[\"control\"], classNames?.control)}\n        data-slot=\"radio-control\"\n        id={id}\n      >\n        <BaseUIRadio.Indicator\n          data-slot=\"radio-indicator\"\n          className={clsx(styles[\"indicator\"], classNames?.indicator)}\n        />\n      </BaseUIRadio.Root>\n\n      <label\n        htmlFor={id}\n        className={clsx(\n          styles[\"label\"],\n          hideLabel && styles[\"label--hidden\"],\n          classNames?.label,\n        )}\n        data-slot=\"radio-label\"\n      >\n        {label}\n      </label>\n    </div>\n  );\n};\n"],"mappings":"0OA4BA,MAAaA,EAAc,GAA2B,CACpD,GAAM,CACJ,OAAO,KACP,UACA,WAAW,GACX,WAAW,GACX,aACA,WACA,GAAG,GACD,EAEJ,OACE,EAACC,EAAD,CACE,GAAI,EACM,WACA,WACV,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,gBAAe,GAAY,IAAA,GAC3B,gBAAe,GAAY,IAAA,GAC3B,UAAW,EAAKC,EAAO,MAAU,GAAY,IAAI,EACjD,YAAU,cAET,UACe,CAAA,CAEtB,EA4BaC,EAAS,GAAsB,CAC1C,GAAM,CACJ,OACA,QACA,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UACA,WACA,aACA,GAAG,GACD,EAEE,EAAK,EAAM,EAEjB,OACE,EAAC,MAAD,CACE,YAAW,EACX,gBAAe,GAAY,IAAA,GAC3B,gBAAe,GAAY,IAAA,GAC3B,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,sBANZ,CAQE,EAACE,EAAY,KAAb,CACE,GAAI,EACM,WACA,WACA,WACV,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKF,EAAO,QAAY,GAAY,OAAO,EACtD,YAAU,gBACN,cAEJ,EAACE,EAAY,UAAb,CACE,YAAU,kBACV,UAAW,EAAKF,EAAO,UAAc,GAAY,SAAS,CAC3D,CAAA,CACe,CAAA,EAElB,EAAC,QAAD,CACE,QAAS,EACT,UAAW,EACTA,EAAO,MACP,GAAaA,EAAO,iBACpB,GAAY,KACd,EACA,YAAU,uBAET,CACI,CAAA,CACJ,GAET"}

package/dist/atoms/radio/radio.module.js

@@ -0,0 +1,2 @@
+var e={control:`FLTLnW_control`,group:`FLTLnW_group`,indicator:`FLTLnW_indicator`,label:`FLTLnW_label`,"label--hidden":`FLTLnW_label--hidden`,root:`FLTLnW_root`};export{e as default};
+//# sourceMappingURL=radio.module.js.map

package/dist/atoms/radio/radio.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.module.js","names":[],"sources":["../../../src/atoms/radio/radio.module.css"],"sourcesContent":["/* ─── RadioGroup ─────────────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.group[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* ─── Radio Item ─────────────────────────────────────────────────────────────── */\n\n.root {\n  --radio-size: 1rem;\n  --radio-bg: transparent;\n  --radio-border: var(--color-border-primary);\n  --radio-dot-color: transparent;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-color: var(--color-content-neutral-base);\n  font-family: var(--typography-typeface-ltr);\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--radio-gap);\n}\n\n.control {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  background-color: var(--radio-bg);\n  box-shadow: 0 0 0 1px var(--radio-border) inset;\n  border-radius: 9999px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background-color 0.2s,\n    box-shadow 0.2s;\n}\n\n/* Sizes — mirrors Checkbox sizing tokens */\n\n.root[data-size=\"sm\"] {\n  --radio-size: 0.875rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-2-size);\n  --radio-label-line-height: var(--typography-body-2-height);\n  --radio-label-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"md\"],\n.root:not([data-size]) {\n  --radio-size: 1rem;\n  --radio-gap: var(--spacing-xs);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --radio-size: 1.25rem;\n  --radio-gap: var(--spacing-sm);\n  --radio-label-font-size: var(--typography-body-1-size);\n  --radio-label-line-height: var(--typography-body-1-height);\n  --radio-label-font-weight: var(--typography-body-1-weight);\n}\n\n/* Checked state */\n\n.control[data-checked]:not([data-invalid]) {\n  --radio-bg: var(--color-action-neutral-base);\n  --radio-border: transparent;\n  --radio-dot-color: var(--color-on-neutral);\n}\n\n/* Focus */\n\n.control:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Disabled — scoped to item root, mirrors group-level disabled */\n\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n\n/* Invalid */\n\n.root[data-invalid] {\n  --radio-border: var(--color-negative);\n  --radio-label-color: var(--color-content-negative-base);\n}\n\n.control[data-invalid][data-checked] {\n  --radio-bg: var(--color-negative);\n  --radio-dot-color: var(--color-on-negative);\n}\n\n/* ─── Indicator (CSS dot) ─────────────────────────────────────────────────────── */\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.indicator[data-unchecked] {\n  display: none;\n}\n\n.indicator::before {\n  content: \"\";\n  display: block;\n  width: 45%; /* proportional dot — scales with --radio-size */\n  height: 45%;\n  border-radius: 9999px;\n  background-color: var(--radio-dot-color);\n  transition: background-color 0.2s;\n}\n\n/* ─── Label ───────────────────────────────────────────────────────────────────── */\n\n.label {\n  font-size: var(--radio-label-font-size, var(--typography-body-2-size));\n  line-height: var(--radio-label-line-height, var(--typography-body-2-height));\n  font-weight: var(--radio-label-font-weight, var(--typography-body-2-weight));\n  color: var(--radio-label-color);\n}\n\n.label--hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":"AAYA,IAAA,EAAE,CAAA,QAAA,iBAAA,MAAA,eAAA,UAAA,mBAAA,MAAA,eAAA,gBAAA,uBAAA,KAAA,aAAA"}

package/dist/atoms/switch/index.d.ts

@@ -0,0 +1 @@
+import { Switch, SwitchProps } from "./switch.js";

package/dist/atoms/switch/index.js

@@ -0,0 +1 @@
+import"./switch.js";

package/dist/atoms/switch/switch.css

@@ -0,0 +1,68 @@
+.Ld_P-G_root {
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: .0625rem;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-tertiary);
+  padding: var(--spacing-xxs);
+  height: var(--root-height);
+  width: var(--root-width);
+  cursor: pointer;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  align-items: center;
+  transition: background-color .15s, border-color .15s, opacity .15s;
+  display: inline-flex;
+}
+
+.Ld_P-G_root[data-size="sm"] {
+  --root-width: 2rem;
+  --root-height: 1.125rem;
+}
+
+.Ld_P-G_root[data-size="md"] {
+  --root-width: 2.25rem;
+  --root-height: 1.25rem;
+}
+
+.Ld_P-G_root[data-size="lg"] {
+  --root-width: 2.625rem;
+  --root-height: 1.5rem;
+}
+
+.Ld_P-G_root[data-checked] {
+  background-color: var(--color-action-brand-base);
+  border-color: var(--color-action-brand-base);
+}
+
+.Ld_P-G_root[data-disabled] {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.Ld_P-G_root[data-readonly] {
+  cursor: default;
+}
+
+.Ld_P-G_root:focus-visible {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+.Ld_P-G_thumb {
+  --thumb-size: calc(var(--root-height) - var(--spacing-xs));
+  background-color: var(--color-on-brand);
+  border-radius: var(--radius-full);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  translate: calc(-1 * var(--spacing-xxs) / 2) 0;
+  transition: translate .15s, background-color .15s;
+  display: block;
+}
+
+.Ld_P-G_root[data-checked] .Ld_P-G_thumb {
+  translate: calc(var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs)))
+    0;
+}

package/dist/atoms/switch/switch.d.ts

@@ -0,0 +1,19 @@
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/atoms/switch/switch.d.ts
+type SwitchProps = Switch.Root.Props & {
+  /**
+   * Visual size of the switch.
+   * (Design-system prop; maps to CSS.)
+   */
+  size?: "sm" | "md" | "lg";
+};
+declare function Switch$1({
+  className,
+  size,
+  children,
+  ...props
+}: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Switch$1 as Switch, SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/atoms/switch/switch.js

@@ -0,0 +1,2 @@
+import e from"./switch.module.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Switch as r}from"@base-ui/react/switch";function i({className:i,size:a=`md`,children:o,...s}){return n(r.Root,{...s,"data-size":a,className:[e.root,i].filter(Boolean).join(` `),children:[t(r.Thumb,{className:e.thumb}),o]})}export{i as Switch};
+//# sourceMappingURL=switch.js.map

package/dist/atoms/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["Switch","BaseSwitch","styles"],"sources":["../../../src/atoms/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\n\nimport styles from \"./switch.module.css\";\n\nexport type SwitchProps = BaseSwitch.Root.Props & {\n  /**\n   * Visual size of the switch.\n   * (Design-system prop; maps to CSS.)\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n};\n\nexport function Switch({\n  className,\n  size = \"md\",\n  children,\n  ...props\n}: SwitchProps) {\n  return (\n    <BaseSwitch.Root\n      {...props}\n      data-size={size}\n      className={[styles[\"root\"], className].filter(Boolean).join(\" \")}\n    >\n      {/* Base UI expects you to assemble parts; Thumb is always present in our DS */}\n      <BaseSwitch.Thumb className={styles[\"thumb\"]} />\n      {children}\n    </BaseSwitch.Root>\n  );\n}\n"],"mappings":"mIAYA,SAAgBA,EAAO,CACrB,YACA,OAAO,KACP,WACA,GAAG,GACW,CACd,OACE,EAACC,EAAW,KAAZ,CACE,GAAI,EACJ,YAAW,EACX,UAAW,CAACC,EAAO,KAAS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,WAHjE,CAME,EAACD,EAAW,MAAZ,CAAkB,UAAWC,EAAO,KAAW,CAAA,EAC9C,CACc,GAErB"}

package/dist/atoms/switch/switch.module.js

@@ -0,0 +1,2 @@
+var e={root:`Ld_P-G_root`,thumb:`Ld_P-G_thumb`};export{e as default};
+//# sourceMappingURL=switch.module.js.map

package/dist/atoms/switch/switch.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.module.js","names":[],"sources":["../../../src/atoms/switch/switch.module.css"],"sourcesContent":[".root {\n  /* Layout */\n  box-sizing: border-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n\n  /* Track shape */\n  border-style: solid;\n  border-width: 0.0625rem; /* 1px */\n  border-color: var(--color-border-primary);\n  background-color: var(--color-surface-tertiary);\n  padding: var(--spacing-xxs); /* 0.125rem */\n\n  height: var(--root-height);\n  width: var(--root-width);\n\n  /* Interaction */\n  cursor: pointer;\n  border-radius: var(--radius-full);\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease,\n    opacity 150ms ease;\n}\n\n/* Sizes (track) */\n.root[data-size=\"sm\"] {\n  --root-width: 2rem; /* 32px */\n  --root-height: 1.125rem; /* 18px */\n}\n\n.root[data-size=\"md\"] {\n  --root-width: 2.25rem; /* 36px */\n  --root-height: 1.25rem; /* 20px */\n}\n\n.root[data-size=\"lg\"] {\n  --root-width: 2.625rem; /* 42px */\n  --root-height: 1.5rem; /* 24px */\n}\n\n/* Checked track */\n.root[data-checked] {\n  background-color: var(--color-action-brand-base);\n  border-color: var(--color-action-brand-base);\n}\n\n/* Disabled */\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Readonly */\n.root[data-readonly] {\n  cursor: default;\n}\n\n/* Focus ring\n   If you standardize on [data-focus-visible] later, swap selector accordingly. */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* Thumb */\n.thumb {\n  --thumb-size: calc(var(--root-height) - var(--spacing-xs));\n  display: block;\n  background-color: var(--color-on-brand);\n  border-radius: var(--radius-full);\n  transition:\n    translate 150ms ease,\n    background-color 150ms ease;\n\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n\n  translate: calc(-1 * var(--spacing-xxs) / 2) 0;\n}\n\n/* Thumb position when checked */\n.root[data-checked] .thumb {\n  translate: calc(\n      var(--root-width) - var(--thumb-size) - (2 * var(--spacing-xxs))\n    )\n    0;\n}\n"],"mappings":"AAIA,IAAA,EAAe,CAAC,KAAA,cAAA,MAAA,cAAA"}

package/dist/atoms/tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { Tabs as Tabs$1, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./tabs.js";
+import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "@base-ui/react/tabs";
+export type { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue };

package/dist/atoms/tabs/index.js

@@ -0,0 +1 @@
+import"./tabs.js";

package/dist/atoms/tabs/tabs.css

@@ -0,0 +1,92 @@
+._5jD7lW_root {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+._5jD7lW_list {
+  z-index: 1;
+  gap: var(--spacing-sm);
+  border-bottom: .0625rem solid var(--color-border-primary);
+  display: flex;
+  position: relative;
+}
+
+._5jD7lW_tab {
+  box-sizing: border-box;
+  color: var(--color-content-neutral-tertiary);
+  font-family: var(--typography-typeface-ltr);
+  font-size: var(--typography-caption-base-size);
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
+  padding-inline: var(--spacing-md);
+  padding-block: var(--spacing-sm);
+  background: none;
+  border: none;
+  border-bottom: .125rem solid #0000;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  height: 2.5rem;
+  margin: 0;
+  font-weight: 400;
+  line-height: 1.4;
+  transition: color .15s ease-in-out, border .15s ease-in-out, background-color .15s ease-in-out;
+  display: flex;
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--color-content-neutral-strong);
+    }
+  }
+
+  &[data-active] {
+    color: var(--color-content-brand-base);
+    border-bottom-color: var(--color-brand-primary);
+  }
+
+  &:focus-visible {
+    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);
+    outline-offset: -1px;
+  }
+}
+
+._5jD7lW_indicator {
+  box-sizing: border-box;
+  z-index: -1;
+  background-color: var(--color-border-primary);
+  border-radius: var(--spacing-xxs) var(--spacing-xxs) 0 0;
+  height: .125rem;
+  transition: translate, width, background-color .15s ease-in-out;
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+}
+
+._5jD7lW_panel {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8rem;
+  padding: var(--spacing-lg);
+  color: var(--color-content-primary);
+  background-color: var(--color-surface-secondary);
+  border: .0625rem solid var(--color-border-secondary);
+  border-top: none;
+  border-end-end-radius: var(--spacing-sm);
+  border-end-start-radius: var(--spacing-sm);
+  grid-area: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  &:focus-visible {
+    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);
+    outline-offset: -1px;
+    z-index: 1;
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}

package/dist/atoms/tabs/tabs.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/atoms/tabs/tabs.d.ts
+type TabsProps = Tabs.Root.Props & {
+  children: React.ReactNode;
+};
+declare function Tabs$1({
+  children,
+  className,
+  ...props
+}: TabsProps): import("react/jsx-runtime").JSX.Element;
+type TabsListProps = Tabs.List.Props & {
+  children: React.ReactNode;
+  /**
+   * Whether to render the active tab indicator.
+   */
+  indicator?: boolean;
+  /**
+   * Class name applied to the indicator.
+   */
+  indicatorClassName?: string;
+};
+declare function TabsList({
+  children,
+  className,
+  indicator,
+  indicatorClassName,
+  ...props
+}: TabsListProps): import("react/jsx-runtime").JSX.Element;
+type TabsTabProps = Tabs.Tab.Props;
+declare function TabsTab({
+  className,
+  ...props
+}: TabsTabProps): import("react/jsx-runtime").JSX.Element;
+type TabsPanelProps = Tabs.Panel.Props;
+declare function TabsPanel({
+  className,
+  ...props
+}: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/atoms/tabs/tabs.js

@@ -0,0 +1,2 @@
+import e from"./tabs.module.js";import t from"clsx";import"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{Tabs as i}from"@base-ui/react/tabs";function a({children:t,className:r,...a}){return n(i.Root,{...a,className:[e.root,r].filter(Boolean).join(` `),children:t})}function o({children:a,className:o,indicator:s=!0,indicatorClassName:c,...l}){return r(i.List,{...l,className:t(e.list,o),children:[a,s?n(i.Indicator,{className:t(e.indicator,c)}):null]})}function s({className:r,...a}){return n(i.Tab,{...a,className:t(e.tab,r)})}function c({className:r,...a}){return n(i.Panel,{...a,className:t(e.panel,r)})}export{a as Tabs,o as TabsList,c as TabsPanel,s as TabsTab};
+//# sourceMappingURL=tabs.js.map

package/dist/atoms/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["Tabs","BaseTabs","styles"],"sources":["../../../src/atoms/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\n\nimport styles from \"./tabs.module.css\";\nimport clsx from \"clsx\";\n\nexport type TabsProps = BaseTabs.Root.Props & {\n  children: React.ReactNode;\n};\n\nexport function Tabs({ children, className, ...props }: TabsProps) {\n  return (\n    <BaseTabs.Root\n      {...props}\n      className={[styles[\"root\"], className].filter(Boolean).join(\" \")}\n    >\n      {children}\n    </BaseTabs.Root>\n  );\n}\n\nexport type TabsListProps = BaseTabs.List.Props & {\n  children: React.ReactNode;\n  /**\n   * Whether to render the active tab indicator.\n   */\n  indicator?: boolean;\n  /**\n   * Class name applied to the indicator.\n   */\n  indicatorClassName?: string;\n};\n\nexport function TabsList({\n  children,\n  className,\n  indicator = true,\n  indicatorClassName,\n  ...props\n}: TabsListProps) {\n  return (\n    <BaseTabs.List {...props} className={clsx(styles[\"list\"], className)}>\n      {children}\n      {indicator ? (\n        <BaseTabs.Indicator\n          className={clsx(styles[\"indicator\"], indicatorClassName)}\n        />\n      ) : null}\n    </BaseTabs.List>\n  );\n}\n\nexport type TabsTabProps = BaseTabs.Tab.Props;\n\nexport function TabsTab({ className, ...props }: TabsTabProps) {\n  return <BaseTabs.Tab {...props} className={clsx(styles[\"tab\"], className)} />;\n}\n\nexport type TabsPanelsProps = React.ComponentPropsWithoutRef<\"div\">;\n\nexport function TabsPanels({ className, ...props }: TabsPanelsProps) {\n  return <div {...props} className={clsx(styles[\"panels\"], className)} />;\n}\n\nexport type TabsPanelProps = BaseTabs.Panel.Props;\n\nexport function TabsPanel({ className, ...props }: TabsPanelProps) {\n  return (\n    <BaseTabs.Panel {...props} className={clsx(styles[\"panel\"], className)} />\n  );\n}\n"],"mappings":"+JAUA,SAAgBA,EAAK,CAAE,WAAU,YAAW,GAAG,GAAoB,CACjE,OACE,EAACC,EAAS,KAAV,CACE,GAAI,EACJ,UAAW,CAACC,EAAO,KAAS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAE9D,UACY,CAAA,CAEnB,CAcA,SAAgB,EAAS,CACvB,WACA,YACA,YAAY,GACZ,qBACA,GAAG,GACa,CAChB,OACE,EAACD,EAAS,KAAV,CAAe,GAAI,EAAO,UAAW,EAAKC,EAAO,KAAS,CAAS,WAAnE,CACG,EACA,EACC,EAACD,EAAS,UAAV,CACE,UAAW,EAAKC,EAAO,UAAc,CAAkB,CACxD,CAAA,EACC,IACS,GAEnB,CAIA,SAAgB,EAAQ,CAAE,YAAW,GAAG,GAAuB,CAC7D,OAAO,EAACD,EAAS,IAAV,CAAc,GAAI,EAAO,UAAW,EAAKC,EAAO,IAAQ,CAAS,CAAI,CAAA,CAC9E,CAUA,SAAgB,EAAU,CAAE,YAAW,GAAG,GAAyB,CACjE,OACE,EAACD,EAAS,MAAV,CAAgB,GAAI,EAAO,UAAW,EAAKC,EAAO,MAAU,CAAS,CAAI,CAAA,CAE7E"}

package/dist/atoms/tabs/tabs.module.js

@@ -0,0 +1,2 @@
+var e={indicator:`_5jD7lW_indicator`,list:`_5jD7lW_list`,panel:`_5jD7lW_panel`,root:`_5jD7lW_root`,tab:`_5jD7lW_tab`};export{e as default};
+//# sourceMappingURL=tabs.module.js.map

package/dist/atoms/tabs/tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.module.js","names":[],"sources":["../../../src/atoms/tabs/tabs.module.css"],"sourcesContent":[".root {\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.list {\n  display: flex;\n  position: relative;\n  z-index: 1;\n  gap: var(--spacing-sm);\n  border-bottom: 0.0625rem solid var(--color-border-primary);\n}\n\n.tab {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border: none;\n  border-bottom-color: transparent;\n  border-bottom-width: 0.125rem;\n  border-bottom-style: solid;\n\n  margin: 0;\n  outline: none;\n  background: none;\n  color: var(--color-content-neutral-tertiary);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--typography-caption-base-size);\n  line-height: 1.4;\n  font-weight: 400;\n  -webkit-user-select: none;\n  user-select: none;\n  white-space: nowrap;\n  word-break: keep-all;\n  padding-inline: var(--spacing-md);\n  padding-block: var(--spacing-sm);\n  height: 2.5rem;\n\n  transition:\n    color 150ms ease-in-out,\n    border 150ms ease-in-out,\n    background-color 150ms ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      color: var(--color-content-neutral-strong);\n    }\n  }\n\n  &[data-active] {\n    color: var(--color-content-brand-base);\n    border-bottom-color: var(--color-brand-primary);\n  }\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n  }\n}\n\n.indicator {\n  box-sizing: border-box;\n  position: absolute;\n  z-index: -1;\n  bottom: -1px;\n  left: 0;\n  height: 0.125rem;\n  background-color: var(--color-border-primary);\n  transition:\n    translate,\n    width,\n    background-color 150ms ease-in-out;\n  border-radius: var(--spacing-xxs) var(--spacing-xxs) 0 0;\n}\n\n.panel {\n  box-sizing: border-box;\n  grid-area: 1 / 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 8rem;\n  padding: var(--spacing-lg);\n  color: var(--color-content-primary);\n  background-color: var(--color-surface-secondary);\n  border: 0.0625rem solid var(--color-border-secondary);\n  border-top: none;\n  border-end-end-radius: var(--spacing-sm);\n  border-end-start-radius: var(--spacing-sm);\n\n  &:focus-visible {\n    outline: var(--stroke-focus-ring) solid var(--color-action-info-base);\n    outline-offset: -1px;\n    z-index: 1;\n  }\n\n  &[hidden] {\n    display: none;\n  }\n}\n"],"mappings":"AAUA,IAAA,EAAS,CAAA,UAAU,oBAAA,KAAA,eAAA,MAAA,gBAAA,KAAA,eAAA,IAAA,aAAA"}

package/dist/atoms/text/index.d.ts

@@ -0,0 +1 @@
+import { Text, TextColor, TextProps, TextVariant } from "./text.js";

package/dist/atoms/text/index.js

@@ -0,0 +1 @@
+import"./text.js";