@pantool/components 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/atoms/slider/index.js

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

package/dist/atoms/slider/slider.css

@@ -0,0 +1 @@
+.uTCv8W_root{--slider-track-color:var(--color-surface-tertiary);--slider-indicator-color:var(--color-action-brand-base);--slider-thumb-bg:var(--color-surface-base);--slider-thumb-border:var(--color-action-brand-base);width:100%}.uTCv8W_root[data-invalid]{--slider-indicator-color:var(--color-content-negative-base);--slider-thumb-border:var(--color-content-negative-base)}.uTCv8W_root[data-disabled]{--slider-indicator-color:var(--color-content-neutral-muted);--slider-thumb-border:var(--color-content-neutral-muted);--slider-thumb-bg:var(--color-surface-tertiary);cursor:not-allowed}.uTCv8W_root[data-size=sm]{--slider-track-height:.125rem;--slider-thumb-size:.75rem}.uTCv8W_root[data-size=md]{--slider-track-height:.25rem;--slider-thumb-size:1rem}.uTCv8W_root[data-size=lg]{--slider-track-height:.375rem;--slider-thumb-size:1.25rem}.uTCv8W_control{box-sizing:border-box;width:100%;padding-block:var(--spacing-sm);touch-action:none;user-select:none;align-items:center;display:flex}.uTCv8W_control[data-orientation=vertical]{width:auto;height:8rem;padding-block:0;padding-inline:var(--spacing-sm)}.uTCv8W_track{width:100%;height:var(--slider-track-height);background-color:var(--slider-track-color);border-radius:var(--radius-full);user-select:none}.uTCv8W_track[data-orientation=vertical]{width:var(--slider-track-height);height:100%}.uTCv8W_indicator{background-color:var(--slider-indicator-color);border-radius:var(--radius-full);user-select:none}.uTCv8W_thumb{box-sizing:border-box;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border:2px solid var(--slider-thumb-border);background-color:var(--slider-thumb-bg);border-radius:var(--radius-md);user-select:none;transition:box-shadow .1s,transform .1s}.uTCv8W_thumb:has(:focus-visible){outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.uTCv8W_thumb[data-dragging]{transform:scale(1.15)}

package/dist/atoms/slider/slider.d.ts

@@ -0,0 +1,53 @@
+import { SliderRootProps } from "@base-ui/react/slider";
+
+//#region src/atoms/slider/slider.d.ts
+/**
+ * Props for the Slider component.
+ */
+type SliderProps = Omit<SliderRootProps, "className"> & {
+  /**
+   * The size of the slider.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the slider is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Accessible label for the thumb (single-thumb sliders).
+   */
+  thumbLabel?: string;
+  /**
+   * Accessible labels for range slider thumbs.
+   */
+  thumbLabels?: string[];
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    root?: string;
+    control?: string;
+    track?: string;
+    indicator?: string;
+    thumb?: string;
+  };
+};
+/**
+ * A slider component for selecting a value or range within a given interval.
+ * Built on top of Base UI's Slider primitive.
+ */
+declare function Slider$1({
+  size,
+  invalid,
+  disabled,
+  defaultValue,
+  thumbLabel,
+  thumbLabels,
+  classNames,
+  ...props
+}: SliderProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Slider$1 as Slider, SliderProps };
+//# sourceMappingURL=slider.d.ts.map

package/dist/atoms/slider/slider.js

@@ -0,0 +1,2 @@
+import e from"./slider.module.js";import t from"clsx";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";import{Slider as a}from"@base-ui/react/slider";function o({size:o=`md`,invalid:s=!1,disabled:c=!1,defaultValue:l,thumbLabel:u,thumbLabels:d,classNames:f,...p}){let m=Array.isArray(l??p.value);return r(a.Root,{defaultValue:l,disabled:c,className:t(e.root,f?.root),"data-size":o,"data-invalid":s||void 0,"data-slot":`slider-root`,...p,children:r(a.Control,{className:t(e.control,f?.control),"data-slot":`slider-control`,children:i(a.Track,{className:t(e.track,f?.track),"data-slot":`slider-track`,children:[r(a.Indicator,{className:t(e.indicator,f?.indicator),"data-slot":`slider-indicator`}),m?i(n,{children:[r(a.Thumb,{index:0,"aria-label":d?.[0],className:t(e.thumb,f?.thumb),"data-slot":`slider-thumb`}),r(a.Thumb,{index:1,"aria-label":d?.[1],className:t(e.thumb,f?.thumb),"data-slot":`slider-thumb`})]}):r(a.Thumb,{"aria-label":u,className:t(e.thumb,f?.thumb),"data-slot":`slider-thumb`})]})})})}export{o as Slider};
+//# sourceMappingURL=slider.js.map

package/dist/atoms/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["Slider","BaseUISlider","styles"],"sources":["../../../src/atoms/slider/slider.tsx"],"sourcesContent":["import {\n  Slider as BaseUISlider,\n  type SliderRootProps,\n} from \"@base-ui/react/slider\";\nimport clsx from \"clsx\";\nimport styles from \"./slider.module.css\";\n\n/**\n * Props for the Slider component.\n */\nexport type SliderProps = Omit<SliderRootProps, \"className\"> & {\n  /**\n   * The size of the slider.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the slider is in an invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * Accessible label for the thumb (single-thumb sliders).\n   */\n  thumbLabel?: string;\n  /**\n   * Accessible labels for range slider thumbs.\n   */\n  thumbLabels?: string[];\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    root?: string;\n    control?: string;\n    track?: string;\n    indicator?: string;\n    thumb?: string;\n  };\n};\n\n/**\n * A slider component for selecting a value or range within a given interval.\n * Built on top of Base UI's Slider primitive.\n */\nexport function Slider({\n  size = \"md\",\n  invalid = false,\n  disabled = false,\n  defaultValue,\n  thumbLabel,\n  thumbLabels,\n  classNames,\n  ...props\n}: SliderProps) {\n  const isRange = Array.isArray(defaultValue ?? props.value);\n\n  return (\n    <BaseUISlider.Root\n      defaultValue={defaultValue}\n      disabled={disabled}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-size={size}\n      data-invalid={invalid || undefined}\n      data-slot=\"slider-root\"\n      {...props}\n    >\n      <BaseUISlider.Control\n        className={clsx(styles[\"control\"], classNames?.control)}\n        data-slot=\"slider-control\"\n      >\n        <BaseUISlider.Track\n          className={clsx(styles[\"track\"], classNames?.track)}\n          data-slot=\"slider-track\"\n        >\n          <BaseUISlider.Indicator\n            className={clsx(styles[\"indicator\"], classNames?.indicator)}\n            data-slot=\"slider-indicator\"\n          />\n          {isRange ? (\n            <>\n              <BaseUISlider.Thumb\n                index={0}\n                aria-label={thumbLabels?.[0]}\n                className={clsx(styles[\"thumb\"], classNames?.thumb)}\n                data-slot=\"slider-thumb\"\n              />\n              <BaseUISlider.Thumb\n                index={1}\n                aria-label={thumbLabels?.[1]}\n                className={clsx(styles[\"thumb\"], classNames?.thumb)}\n                data-slot=\"slider-thumb\"\n              />\n            </>\n          ) : (\n            <BaseUISlider.Thumb\n              aria-label={thumbLabel}\n              className={clsx(styles[\"thumb\"], classNames?.thumb)}\n              data-slot=\"slider-thumb\"\n            />\n          )}\n        </BaseUISlider.Track>\n      </BaseUISlider.Control>\n    </BaseUISlider.Root>\n  );\n}\n"],"mappings":"qKA6CA,SAAgBA,EAAO,CACrB,OAAO,KACP,UAAU,GACV,WAAW,GACX,eACA,aACA,cACA,aACA,GAAG,GACW,CACd,IAAM,EAAU,MAAM,QAAQ,GAAgB,EAAM,KAAK,EAEzD,OACE,EAACC,EAAa,KAAd,CACgB,eACJ,WACV,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,YAAU,cACV,GAAI,WAEJ,EAACD,EAAa,QAAd,CACE,UAAW,EAAKC,EAAO,QAAY,GAAY,OAAO,EACtD,YAAU,0BAEV,EAACD,EAAa,MAAd,CACE,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,wBAFZ,CAIE,EAACD,EAAa,UAAd,CACE,UAAW,EAAKC,EAAO,UAAc,GAAY,SAAS,EAC1D,YAAU,kBACX,CAAA,EACA,EACC,EAAA,EAAA,CAAA,SAAA,CACE,EAACD,EAAa,MAAd,CACE,MAAO,EACP,aAAY,IAAc,GAC1B,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,cACX,CAAA,EACD,EAACD,EAAa,MAAd,CACE,MAAO,EACP,aAAY,IAAc,GAC1B,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,cACX,CAAA,CACD,CAAA,CAAA,EAEF,EAACD,EAAa,MAAd,CACE,aAAY,EACZ,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,cACX,CAAA,CAEe,GACA,CAAA,CACL,CAAA,CAEvB"}

package/dist/atoms/slider/slider.module.js

@@ -0,0 +1,3 @@
+import './slider.css';
+var e={control:`uTCv8W_control`,indicator:`uTCv8W_indicator`,root:`uTCv8W_root`,thumb:`uTCv8W_thumb`,track:`uTCv8W_track`};export{e as default};
+//# sourceMappingURL=slider.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.module.js","names":[],"sources":["../../../src/atoms/slider/slider.module.css"],"sourcesContent":[".root {\n  --slider-track-color: var(--color-surface-tertiary);\n  --slider-indicator-color: var(--color-action-brand-base);\n  --slider-thumb-bg: var(--color-surface-base);\n  --slider-thumb-border: var(--color-action-brand-base);\n  width: 100%;\n}\n\n.root[data-invalid] {\n  --slider-indicator-color: var(--color-content-negative-base);\n  --slider-thumb-border: var(--color-content-negative-base);\n}\n\n.root[data-disabled] {\n  --slider-indicator-color: var(--color-content-neutral-muted);\n  --slider-thumb-border: var(--color-content-neutral-muted);\n  --slider-thumb-bg: var(--color-surface-tertiary);\n  cursor: not-allowed;\n}\n\n.root[data-size=\"sm\"] {\n  --slider-track-height: 0.125rem;\n  --slider-thumb-size: 0.75rem;\n}\n\n.root[data-size=\"md\"] {\n  --slider-track-height: 0.25rem;\n  --slider-thumb-size: 1rem;\n}\n\n.root[data-size=\"lg\"] {\n  --slider-track-height: 0.375rem;\n  --slider-thumb-size: 1.25rem;\n}\n\n.control {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding-block: var(--spacing-sm);\n  touch-action: none;\n  user-select: none;\n}\n\n.control[data-orientation=\"vertical\"] {\n  height: 8rem;\n  width: auto;\n  padding-block: 0;\n  padding-inline: var(--spacing-sm);\n}\n\n.track {\n  width: 100%;\n  height: var(--slider-track-height);\n  background-color: var(--slider-track-color);\n  border-radius: var(--radius-full);\n  user-select: none;\n}\n\n.track[data-orientation=\"vertical\"] {\n  width: var(--slider-track-height);\n  height: 100%;\n}\n\n.indicator {\n  background-color: var(--slider-indicator-color);\n  border-radius: var(--radius-full);\n  user-select: none;\n}\n\n.thumb {\n  box-sizing: border-box;\n  width: var(--slider-thumb-size);\n  height: var(--slider-thumb-size);\n  border: 2px solid var(--slider-thumb-border);\n  background-color: var(--slider-thumb-bg);\n  border-radius: var(--radius-md);\n  user-select: none;\n  transition:\n    box-shadow 0.1s,\n    transform 0.1s;\n}\n\n.thumb:has(: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[data-dragging] {\n  transform: scale(1.15);\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Stepper, StepperProps } from "./stepper.js";

package/dist/atoms/stepper/index.js

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

package/dist/atoms/stepper/stepper.css

@@ -0,0 +1 @@
+.nIISiW_root{--field-control-radius:var(--radius-md);--field-control-bg-color:var(--color-surface-base);--field-control-text-color:var(--color-content-neutral-base);--field-control-border-color:var(--color-border-secondary);--field-control-placeholder-color:var(--color-content-neutral-muted);--field-label-color:var(--color-content-neutral-secondary);width:100%}.nIISiW_root[data-size=sm]{--field-control-height:1.5rem;--field-control-icon-size:1.5rem;--field-control-font-size:var(--typography-caption-base-size);--field-control-line-height:var(--typography-caption-base-height);--field-control-font-weight:var(--typography-caption-base-weight)}.nIISiW_root[data-size=md]{--field-control-height:2rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-2-size);--field-control-line-height:var(--typography-body-2-height);--field-control-font-weight:var(--typography-body-2-weight)}.nIISiW_root[data-size=lg]{--field-control-height:2.5rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-1-size);--field-control-line-height:var(--typography-body-1-height);--field-control-font-weight:var(--typography-body-1-weight)}.nIISiW_root[data-invalid]{--field-control-border-color:var(--color-content-negative-base);--field-control-text-color:var(--color-content-negative-base)}.nIISiW_root[data-disabled]{--field-control-bg-color:var(--color-surface-tertiary);--field-control-text-color:var(--color-content-neutral-muted);--field-control-border-color:var(--color-border-secondary);--field-label-color:var(--color-content-neutral-muted);cursor:not-allowed}.nIISiW_group{height:var(--field-control-height);width:100%;display:flex}.nIISiW_input{box-sizing:border-box;min-width:0;padding:0 var(--spacing-sm);border:1px solid var(--field-control-border-color);border-radius:var(--radius-md);height:100%;font-family:var(--typography-typeface-ltr);font-size:var(--field-control-font-size);line-height:var(--field-control-line-height);font-weight:var(--field-control-font-weight);font-variant-numeric:tabular-nums;text-align:left;background-color:var(--field-control-bg-color);color:var(--field-control-text-color);outline:none;flex:1;margin:0}.nIISiW_input::placeholder{color:var(--field-control-placeholder-color)}.nIISiW_input:focus-visible{z-index:1;outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}

package/dist/atoms/stepper/stepper.d.ts

@@ -0,0 +1,42 @@
+import { NumberFieldRootProps } from "@base-ui/react/number-field";
+
+//#region src/atoms/stepper/stepper.d.ts
+/**
+ * Props for the Stepper component.
+ */
+type StepperProps = Omit<NumberFieldRootProps, "className"> & {
+  /**
+   * The size of the stepper.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the stepper is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    root?: string;
+    group?: string;
+    input?: string;
+    decrement?: string;
+    increment?: string;
+  };
+};
+/**
+ * A numeric stepper component with increment and decrement buttons.
+ * Built on Base UI's NumberField primitive.
+ */
+declare function Stepper({
+  size,
+  invalid,
+  disabled,
+  classNames,
+  ...props
+}: StepperProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Stepper, StepperProps };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/atoms/stepper/stepper.js

@@ -0,0 +1,2 @@
+import{IconButton as e}from"../icon-button/icon-button.js";import"../icon-button/index.js";import t from"./stepper.module.js";import n from"clsx";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{mdiMinus as a,mdiPlus as o}from"@mdi/js";import{NumberField as s}from"@base-ui/react/number-field";function c({size:c=`md`,invalid:l=!1,disabled:u=!1,classNames:d,...f}){return r(s.Root,{disabled:u,className:n(t.root,d?.root),"data-size":c,"data-invalid":l||void 0,"data-slot":`stepper-root`,...f,children:i(s.Group,{className:n(t.group,d?.group),"data-slot":`stepper-group`,children:[r(s.Decrement,{className:n(d?.decrement),"data-slot":`stepper-decrement`,render:r(e,{label:`decrement`,size:c,variant:`ghost`,iconData:a})}),r(s.Input,{className:n(t.input,d?.input),"data-slot":`stepper-input`}),r(s.Increment,{className:n(d?.increment),"data-slot":`stepper-increment`,render:r(e,{label:`increment`,size:c,variant:`ghost`,iconData:o})})]})})}export{c as Stepper};
+//# sourceMappingURL=stepper.js.map

package/dist/atoms/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":["BaseUINumberField","styles"],"sources":["../../../src/atoms/stepper/stepper.tsx"],"sourcesContent":["import {\n  NumberField as BaseUINumberField,\n  type NumberFieldRootProps,\n} from \"@base-ui/react/number-field\";\nimport { mdiMinus, mdiPlus } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport { IconButton } from \"../icon-button\";\nimport styles from \"./stepper.module.css\";\n\n/**\n * Props for the Stepper component.\n */\nexport type StepperProps = Omit<NumberFieldRootProps, \"className\"> & {\n  /**\n   * The size of the stepper.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the stepper is in an invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    root?: string;\n    group?: string;\n    input?: string;\n    decrement?: string;\n    increment?: string;\n  };\n};\n\n/**\n * A numeric stepper component with increment and decrement buttons.\n * Built on Base UI's NumberField primitive.\n */\nexport function Stepper({\n  size = \"md\",\n  invalid = false,\n  disabled = false,\n  classNames,\n  ...props\n}: StepperProps) {\n  return (\n    <BaseUINumberField.Root\n      disabled={disabled}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-size={size}\n      data-invalid={invalid || undefined}\n      data-slot=\"stepper-root\"\n      {...props}\n    >\n      <BaseUINumberField.Group\n        className={clsx(styles[\"group\"], classNames?.group)}\n        data-slot=\"stepper-group\"\n      >\n        <BaseUINumberField.Decrement\n          className={clsx(classNames?.decrement)}\n          data-slot=\"stepper-decrement\"\n          render={\n            <IconButton\n              label=\"decrement\"\n              size={size}\n              variant=\"ghost\"\n              iconData={mdiMinus}\n            />\n          }\n        />\n        <BaseUINumberField.Input\n          className={clsx(styles[\"input\"], classNames?.input)}\n          data-slot=\"stepper-input\"\n        />\n        <BaseUINumberField.Increment\n          className={clsx(classNames?.increment)}\n          data-slot=\"stepper-increment\"\n          render={\n            <IconButton\n              label=\"increment\"\n              size={size}\n              variant=\"ghost\"\n              iconData={mdiPlus}\n            />\n          }\n        />\n      </BaseUINumberField.Group>\n    </BaseUINumberField.Root>\n  );\n}\n"],"mappings":"8SAuCA,SAAgB,EAAQ,CACtB,OAAO,KACP,UAAU,GACV,WAAW,GACX,aACA,GAAG,GACY,CACf,OACE,EAACA,EAAkB,KAAnB,CACY,WACV,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,YAAU,eACV,GAAI,WAEJ,EAACD,EAAkB,MAAnB,CACE,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,yBAFZ,CAIE,EAACD,EAAkB,UAAnB,CACE,UAAW,EAAK,GAAY,SAAS,EACrC,YAAU,oBACV,OACE,EAAC,EAAD,CACE,MAAM,YACA,OACN,QAAQ,QACR,SAAU,CACX,CAAA,CAEJ,CAAA,EACD,EAACA,EAAkB,MAAnB,CACE,UAAW,EAAKC,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,eACX,CAAA,EACD,EAACD,EAAkB,UAAnB,CACE,UAAW,EAAK,GAAY,SAAS,EACrC,YAAU,oBACV,OACE,EAAC,EAAD,CACE,MAAM,YACA,OACN,QAAQ,QACR,SAAU,CACX,CAAA,CAEJ,CAAA,CACsB,GACH,CAAA,CAE5B"}

package/dist/atoms/stepper/stepper.module.js

@@ -0,0 +1,3 @@
+import './stepper.css';
+var e={group:`nIISiW_group`,input:`nIISiW_input`,root:`nIISiW_root`};export{e as default};
+//# sourceMappingURL=stepper.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.module.js","names":[],"sources":["../../../src/atoms/stepper/stepper.module.css"],"sourcesContent":[".root {\n  --field-control-radius: var(--radius-md);\n  --field-control-bg-color: var(--color-surface-base);\n  --field-control-text-color: var(--color-content-neutral-base);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-control-placeholder-color: var(--color-content-neutral-muted);\n  --field-label-color: var(--color-content-neutral-secondary);\n  width: 100%;\n}\n\n.root[data-size=\"sm\"] {\n  --field-control-height: 1.5rem;\n  --field-control-icon-size: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-line-height: var(--typography-caption-base-height);\n  --field-control-font-weight: var(--typography-caption-base-weight);\n}\n\n.root[data-size=\"md\"] {\n  --field-control-height: 2rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-2-size);\n  --field-control-line-height: var(--typography-body-2-height);\n  --field-control-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --field-control-height: 2.5rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-1-size);\n  --field-control-line-height: var(--typography-body-1-height);\n  --field-control-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-invalid] {\n  --field-control-border-color: var(--color-content-negative-base);\n  --field-control-text-color: var(--color-content-negative-base);\n}\n\n.root[data-disabled] {\n  --field-control-bg-color: var(--color-surface-tertiary);\n  --field-control-text-color: var(--color-content-neutral-muted);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-label-color: var(--color-content-neutral-muted);\n  cursor: not-allowed;\n}\n\n.group {\n  display: flex;\n  height: var(--field-control-height);\n  width: 100%;\n}\n\n.input {\n  box-sizing: border-box;\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  padding: 0 var(--spacing-sm);\n  border: 1px solid var(--field-control-border-color);\n  border-radius: var(--radius-md);\n  height: 100%;\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--field-control-font-size);\n  line-height: var(--field-control-line-height);\n  font-weight: var(--field-control-font-weight);\n  font-variant-numeric: tabular-nums;\n  text-align: left;\n  background-color: var(--field-control-bg-color);\n  color: var(--field-control-text-color);\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--field-control-placeholder-color);\n}\n\n.input:focus-visible {\n  z-index: 1;\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"],"mappings":""}

package/dist/atoms/switch/switch.css

@@ -1,68 +1 @@
-.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;
-}
+.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.module.js

@@ -1,2 +1,3 @@
+import './switch.css';
 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

@@ -1 +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"}
+{"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":""}

package/dist/atoms/tabs/tabs.css

@@ -1,92 +1 @@
-._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;
-  }
-}
+._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:0 0;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

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/atoms/tabs/tabs.d.ts
 type TabsProps = Tabs.Root.Props & {
-  children: React.ReactNode;
+  children: React$1.ReactNode;
 };
 declare function Tabs$1({
   children,
@@ -11,7 +11,7 @@ declare function Tabs$1({
   ...props
 }: TabsProps): import("react/jsx-runtime").JSX.Element;
 type TabsListProps = Tabs.List.Props & {
-  children: React.ReactNode;
+  children: React$1.ReactNode;
   /**
    * Whether to render the active tab indicator.
    */

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

@@ -1,2 +1,3 @@
+import './tabs.css';
 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

@@ -1 +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"}
+{"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":""}