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

package/dist/atoms/menubar/menubar.js

@@ -0,0 +1,2 @@
+import e from"./menubar.module.js";import t from"clsx";import{jsx as n}from"react/jsx-runtime";import{Menubar as r}from"@base-ui/react";function i({className:i,children:a,...o}){return n(r,{...o,"data-slot":`menubar-root`,className:t(e.root,i),children:a})}export{i as Menubar};
+//# sourceMappingURL=menubar.js.map

package/dist/atoms/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Menubar","BaseUiMenubar","styles"],"sources":["../../../src/atoms/menubar/menubar.tsx"],"sourcesContent":["import {\n  Menubar as BaseUiMenubar,\n  type MenubarProps as BaseUiMenubarProps,\n} from \"@base-ui/react\";\nimport clsx from \"clsx\";\nimport styles from \"./menubar.module.css\";\n\nexport type MenubarProps = BaseUiMenubarProps;\n\nexport function Menubar({ className, children, ...props }: MenubarProps) {\n  return (\n    <BaseUiMenubar\n      {...props}\n      data-slot=\"menubar-root\"\n      className={clsx(styles[\"root\"], className)}\n    >\n      {children}\n    </BaseUiMenubar>\n  );\n}\n"],"mappings":"wIASA,SAAgBA,EAAQ,CAAE,YAAW,WAAU,GAAG,GAAuB,CACvE,OACE,EAACC,EAAD,CACE,GAAI,EACJ,YAAU,eACV,UAAW,EAAKC,EAAO,KAAS,CAAS,EAExC,UACY,CAAA,CAEnB"}

package/dist/atoms/menubar/menubar.module.js

@@ -0,0 +1,3 @@
+import './menubar.css';
+var e={root:`gwaYAW_root`};export{e as default};
+//# sourceMappingURL=menubar.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.module.js","names":[],"sources":["../../../src/atoms/menubar/menubar.module.css"],"sourcesContent":[".root {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n.root [data-slot=\"menu-trigger\"] {\n  color: var(--color-content-neutral-base);\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Notice, NoticeProps } from "./notice.js";

package/dist/atoms/notice/index.js

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

package/dist/atoms/notice/notice.d.ts

@@ -0,0 +1,28 @@
+import { MergeElementProps } from "../../types.js";
+import { IconButtonProps } from "../icon-button/icon-button.js";
+//#region src/atoms/notice/notice.d.ts
+type NoticeProps = Omit<MergeElementProps<"div", {
+  classNames?: {
+    root?: string;
+    icon?: string;
+    body?: string;
+    title?: string;
+    content?: string;
+    action?: string;
+  }; /** The title of the notice. */
+  title: string; /** The body content of the notice. */
+  content?: React.ReactNode; /** Custom leading icon. */
+  iconData?: string; /** Whether  to hide the leading icon. */
+  hideIcon?: boolean; /** Optional dismiss/action button. */
+  action?: Omit<IconButtonProps, "aria-label" | "aria-labelledby"> & {
+    label: string;
+  };
+  /**
+   * @default "info"
+   */
+  severity?: "positive" | "negative" | "warn" | "info";
+}>, "children" | "aria-labelledby" | "aria-describedby" | "defaultValue" | "defaultChecked">;
+declare const Notice: (props: NoticeProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Notice, NoticeProps };
+//# sourceMappingURL=notice.d.ts.map

package/dist/atoms/notice/notice.js

@@ -0,0 +1,2 @@
+import{Icon as e}from"../icon/icon.js";import"../icon/index.js";import{IconButton as t}from"../icon-button/icon-button.js";import"../icon-button/index.js";import n from"./styles.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{mdiAlert as o,mdiCheckCircle as s,mdiCloseCircle as c,mdiInformation as l}from"@mdi/js";const u=u=>{let{ref:d,classNames:f,title:p,content:m,iconData:h,action:g,severity:_=`info`,id:v,hideIcon:y=!1,...b}=u,x=v?`${v}-title`:void 0,S=v?`${v}-content`:void 0,C=h??{positive:s,negative:c,warn:o,info:l}[_]??void 0;return a(`div`,{...b,ref:d,id:v,role:`note`,"data-color":_,"data-slot":`notice-root`,"aria-labelledby":x,"aria-describedby":S,className:r(n.root,f?.root),children:[C&&!y&&i(`div`,{"aria-hidden":!0,"data-slot":`notice-icon`,className:r(n.icon,f?.icon),children:i(e,{data:C})}),a(`div`,{"data-slot":`notice-body`,className:r(n.body,f?.body),children:[i(`span`,{id:x,"data-slot":`notice-title`,className:r(n.title,f?.title),children:p}),m?i(`div`,{id:S,"data-slot":`notice-content`,className:r(n.content,f?.content),children:m}):null]}),g&&(()=>{let{label:e,...a}=g;return i(t,{...a,size:`sm`,variant:`ghost`,"data-slot":`notice-action`,className:r(n.action,f?.action),label:e})})()]})};export{u as Notice};
+//# sourceMappingURL=notice.js.map

package/dist/atoms/notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","names":["classes"],"sources":["../../../src/atoms/notice/notice.tsx"],"sourcesContent":["import {\n  mdiAlert,\n  mdiCheckCircle,\n  mdiCloseCircle,\n  mdiInformation,\n} from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport type { MergeElementProps } from \"../../types\";\nimport { Icon } from \"../icon\";\nimport { type IconButtonProps, IconButton } from \"../icon-button\";\nimport classes from \"./styles.module.css\";\n\nexport type NoticeProps = Omit<\n  MergeElementProps<\n    \"div\",\n    {\n      classNames?: {\n        root?: string;\n        icon?: string;\n        body?: string;\n        title?: string;\n        content?: string;\n        action?: string;\n      };\n\n      /** The title of the notice. */\n      title: string;\n\n      /** The body content of the notice. */\n      content?: React.ReactNode;\n\n      /** Custom leading icon. */\n      iconData?: string;\n\n      /** Whether  to hide the leading icon. */\n      hideIcon?: boolean;\n\n      /** Optional dismiss/action button. */\n      action?: Omit<IconButtonProps, \"aria-label\" | \"aria-labelledby\"> & {\n        label: string;\n      };\n\n      /**\n       * @default \"info\"\n       */\n      severity?: \"positive\" | \"negative\" | \"warn\" | \"info\";\n    }\n  >,\n  | \"children\"\n  | \"aria-labelledby\"\n  | \"aria-describedby\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n>;\n\nexport const Notice = (props: NoticeProps) => {\n  const {\n    ref,\n    classNames,\n    title,\n    content,\n    iconData: iconDataProp,\n    action,\n    severity = \"info\",\n    id,\n    hideIcon = false,\n    ...otherProps\n  } = props;\n\n  const titleId = id ? `${id}-title` : undefined;\n  const contentId = id ? `${id}-content` : undefined;\n\n  const defaultIconMap = {\n    positive: mdiCheckCircle,\n    negative: mdiCloseCircle,\n    warn: mdiAlert,\n    info: mdiInformation,\n  } as const;\n\n  const iconData = iconDataProp ?? defaultIconMap[severity] ?? undefined;\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      id={id}\n      role=\"note\"\n      data-color={severity}\n      data-slot=\"notice-root\"\n      aria-labelledby={titleId}\n      aria-describedby={contentId}\n      className={clsx(classes[\"root\"], classNames?.root)}\n    >\n      {iconData && !hideIcon && (\n        <div\n          aria-hidden\n          data-slot=\"notice-icon\"\n          className={clsx(classes[\"icon\"], classNames?.icon)}\n        >\n          <Icon data={iconData} />\n        </div>\n      )}\n\n      <div\n        data-slot=\"notice-body\"\n        className={clsx(classes[\"body\"], classNames?.body)}\n      >\n        <span\n          id={titleId}\n          data-slot=\"notice-title\"\n          className={clsx(classes[\"title\"], classNames?.title)}\n        >\n          {title}\n        </span>\n        {content ? (\n          <div\n            id={contentId}\n            data-slot=\"notice-content\"\n            className={clsx(classes[\"content\"], classNames?.content)}\n          >\n            {content}\n          </div>\n        ) : null}\n      </div>\n\n      {action &&\n        (() => {\n          const { label, ...etc } = action;\n\n          return (\n            <IconButton\n              {...etc}\n              size=\"sm\"\n              variant=\"ghost\"\n              data-slot=\"notice-action\"\n              className={clsx(classes[\"action\"], classNames?.action)}\n              label={label}\n            />\n          );\n        })()}\n    </div>\n  );\n};\n"],"mappings":"kWAuDA,MAAa,EAAU,GAAuB,CAC5C,GAAM,CACJ,MACA,aACA,QACA,UACA,SAAU,EACV,SACA,WAAW,OACX,KACA,WAAW,GACX,GAAG,GACD,EAEE,EAAU,EAAK,GAAG,EAAG,QAAU,IAAA,GAC/B,EAAY,EAAK,GAAG,EAAG,UAAY,IAAA,GASnC,EAAW,GAAgB,CAN/B,SAAU,EACV,SAAU,EACV,KAAM,EACN,KAAM,CAGsC,EAAE,IAAa,IAAA,GAE7D,OACE,EAAC,MAAD,CACE,GAAI,EACC,MACD,KACJ,KAAK,OACL,aAAY,EACZ,YAAU,cACV,kBAAiB,EACjB,mBAAkB,EAClB,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WATnD,CAWG,GAAY,CAAC,GACZ,EAAC,MAAD,CACE,cAAA,GACA,YAAU,cACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAEjD,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACpB,CAAA,EAGP,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAKA,EAAQ,KAAS,GAAY,IAAI,WAFnD,CAIE,EAAC,OAAD,CACE,GAAI,EACJ,YAAU,eACV,UAAW,EAAKA,EAAQ,MAAU,GAAY,KAAK,WAElD,CACG,CAAA,EACL,EACC,EAAC,MAAD,CACE,GAAI,EACJ,YAAU,iBACV,UAAW,EAAKA,EAAQ,QAAY,GAAY,OAAO,WAEtD,CACE,CAAA,EACH,IACD,IAEJ,QACQ,CACL,GAAM,CAAE,QAAO,GAAG,GAAQ,EAE1B,OACE,EAAC,EAAD,CACE,GAAI,EACJ,KAAK,KACL,QAAQ,QACR,YAAU,gBACV,UAAW,EAAKA,EAAQ,OAAW,GAAY,MAAM,EAC9C,OACR,CAAA,CAEL,GAAG,CACF,GAET"}

package/dist/atoms/notice/styles.css

@@ -0,0 +1 @@
+._69HH5G_root{--notice-background:transparent;--notice-border-color:transparent;--notice-icon-color:transparent;background-color:var(--notice-background);border:1px solid var(--notice-border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-family:var(--typography-typeface-ltr);align-items:flex-start;gap:var(--spacing-sm);display:flex}._69HH5G_root[data-color=neutral]{--notice-background:color-mix(in oklab, var(--color-neutral) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-neutral) 25%, transparent);--notice-icon-color:var(--color-neutral)}._69HH5G_root[data-color=brand]{--notice-background:color-mix(in oklab, var(--color-brand) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-brand) 50%, transparent);--notice-icon-color:var(--color-brand)}._69HH5G_root[data-color=positive]{--notice-background:color-mix(in oklab, var(--color-positive) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-positive) 50%, transparent);--notice-icon-color:var(--color-positive)}._69HH5G_root[data-color=negative]{--notice-background:color-mix(in oklab, var(--color-negative) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-negative) 50%, transparent);--notice-icon-color:var(--color-negative)}._69HH5G_root[data-color=info]{--notice-background:color-mix(in oklab, var(--color-info) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-info) 50%, transparent);--notice-icon-color:var(--color-info)}._69HH5G_root[data-color=warn]{--notice-background:color-mix(in oklab, var(--color-warn) 10%, transparent);--notice-border-color:color-mix(in oklab, var(--color-warn) 50%, transparent);--notice-icon-color:var(--color-warn)}._69HH5G_icon{width:1rem;max-width:1rem;height:1rem;max-height:1rem;color:var(--notice-icon-color);flex-shrink:0;justify-content:center;align-items:center;margin-top:.125rem;display:flex}._69HH5G_body{gap:var(--spacing-xs);flex-direction:column;flex:1;min-width:0;display:flex}._69HH5G_title{font-size:var(--typography-subheading-1-size);color:var(--color-content-neutral-base);font-weight:600}._69HH5G_content{font-size:var(--typography-body-1-size);color:var(--color-content-neutral-base);font-weight:400}._69HH5G_action{flex-shrink:0;margin-inline-start:auto;margin-inline-end:calc(-1 * var(--spacing-sm))}

package/dist/atoms/notice/styles.module.js

@@ -0,0 +1,3 @@
+import './styles.css';
+var e={action:`_69HH5G_action`,body:`_69HH5G_body`,content:`_69HH5G_content`,icon:`_69HH5G_icon`,root:`_69HH5G_root`,title:`_69HH5G_title`};export{e as default};
+//# sourceMappingURL=styles.module.js.map

package/dist/atoms/notice/styles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/atoms/notice/styles.module.css"],"sourcesContent":[".root {\n  --notice-background: transparent;\n  --notice-border-color: transparent;\n  --notice-icon-color: transparent;\n\n  display: flex;\n  align-items: flex-start;\n\n  background-color: var(--notice-background);\n  border: 1px solid var(--notice-border-color);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-sm) var(--spacing-md);\n\n  font-family: var(--typography-typeface-ltr);\n\n  gap: var(--spacing-sm);\n}\n\n.root[data-color=\"neutral\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-neutral) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-neutral) 25%,\n    transparent\n  );\n  --notice-icon-color: var(--color-neutral);\n}\n\n.root[data-color=\"brand\"] {\n  --notice-background: color-mix(in oklab, var(--color-brand) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-brand) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-brand);\n}\n\n.root[data-color=\"positive\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-positive) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-positive) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-positive);\n}\n\n.root[data-color=\"negative\"] {\n  --notice-background: color-mix(\n    in oklab,\n    var(--color-negative) 10%,\n    transparent\n  );\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-negative) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-negative);\n}\n\n.root[data-color=\"info\"] {\n  --notice-background: color-mix(in oklab, var(--color-info) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-info) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-info);\n}\n\n.root[data-color=\"warn\"] {\n  --notice-background: color-mix(in oklab, var(--color-warn) 10%, transparent);\n  --notice-border-color: color-mix(\n    in oklab,\n    var(--color-warn) 50%,\n    transparent\n  );\n  --notice-icon-color: var(--color-warn);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 1rem;\n  height: 1rem;\n  max-width: 1rem;\n  max-height: 1rem;\n\n  flex-shrink: 0;\n  margin-top: 0.125rem;\n\n  color: var(--notice-icon-color);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  font-size: var(--typography-subheading-1-size);\n  font-weight: 600;\n  color: var(--color-content-neutral-base);\n}\n\n.content {\n  font-size: var(--typography-body-1-size);\n  font-weight: 400;\n  color: var(--color-content-neutral-base);\n}\n\n.action {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  margin-inline-end: calc(-1 * var(--spacing-sm));\n}\n"],"mappings":""}

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

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

package/dist/atoms/radio/radio.css

@@ -1,142 +1 @@
-.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;
-}
+.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

@@ -1,21 +1,8 @@
 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. */
+  /** The size of the radio button. @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.
@@ -23,7 +10,7 @@ type RadioProps = Omit<RadioRootProps, "className"> & {
    */
   hideLabel?: boolean;
   /**
-   * Gets or sets whether or not the radio is in a visually invalid state.
+   * Whether the radio is in a visually invalid state.
    * @default false
    */
   invalid?: boolean; /** Additional CSS classes for styling. */
@@ -34,7 +21,17 @@ type RadioProps = Omit<RadioRootProps, "className"> & {
     label?: string;
   };
 };
-declare const Radio$1: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
+declare const Radio$1: ({
+  size,
+  label,
+  hideLabel,
+  disabled,
+  required,
+  invalid,
+  readOnly,
+  classNames,
+  ...props
+}: RadioProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupProps$1 as RadioGroupProps, RadioProps };
+export { Radio$1 as Radio, RadioProps };
 //# sourceMappingURL=radio.d.ts.map

package/dist/atoms/radio/radio.js

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

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

@@ -1 +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"}
+{"version":3,"file":"radio.js","names":["Radio","styles","BaseUIRadio"],"sources":["../../../src/atoms/radio/radio.tsx"],"sourcesContent":["import {\n  Radio as BaseUIRadio,\n  type RadioRootProps,\n} from \"@base-ui/react/radio\";\nimport clsx from \"clsx\";\nimport styles from \"./radio.module.css\";\n\nexport type RadioProps = Omit<RadioRootProps, \"className\"> & {\n  /** The size of the radio button. @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   * Whether 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 = ({\n  size,\n  label,\n  hideLabel = false,\n  disabled = false,\n  required = false,\n  invalid,\n  readOnly,\n  classNames,\n  ...props\n}: RadioProps) => {\n  return (\n    <label\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"root\"], classNames?.root)}\n      data-slot=\"radio-root\"\n    >\n      <BaseUIRadio.Root\n        {...props}\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      >\n        <BaseUIRadio.Indicator\n          data-slot=\"radio-indicator\"\n          className={clsx(styles[\"indicator\"], classNames?.indicator)}\n        />\n      </BaseUIRadio.Root>\n\n      <span\n        className={clsx(\n          styles[\"label\"],\n          hideLabel && styles[\"label--hidden\"],\n          classNames?.label,\n        )}\n        data-slot=\"radio-label\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n};\n"],"mappings":"oJA+BA,MAAaA,GAAS,CACpB,OACA,QACA,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UACA,WACA,aACA,GAAG,KAGD,EAAC,QAAD,CACE,YAAW,EACX,gBAAe,GAAY,IAAA,GAC3B,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,sBALZ,CAOE,EAACC,EAAY,KAAb,CACE,GAAI,EACM,WACA,WACA,WACV,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKD,EAAO,QAAY,GAAY,OAAO,EACtD,YAAU,yBAEV,EAACC,EAAY,UAAb,CACE,YAAU,kBACV,UAAW,EAAKD,EAAO,UAAc,GAAY,SAAS,CAC3D,CAAA,CACe,CAAA,EAElB,EAAC,OAAD,CACE,UAAW,EACTA,EAAO,MACP,GAAaA,EAAO,iBACpB,GAAY,KACd,EACA,YAAU,uBAET,CACG,CAAA,CACD"}

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

@@ -1,2 +1,3 @@
-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};
+import './radio.css';
+var e={control:`FLTLnW_control`,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

@@ -1 +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"}
+{"version":3,"file":"radio.module.js","names":[],"sources":["../../../src/atoms/radio/radio.module.css"],"sourcesContent":[".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.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.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.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.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\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 {\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%;\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  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":""}

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

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

package/dist/atoms/radio-group/index.js

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

package/dist/atoms/radio-group/radio-group.css

@@ -0,0 +1 @@
+.JZt8ca_group{gap:var(--radio-group-gap);flex-direction:column;display:flex}.JZt8ca_group[data-size=sm]{--radio-group-gap:var(--spacing-sm)}.JZt8ca_group[data-size=md]{--radio-group-gap:var(--spacing-md)}.JZt8ca_group[data-size=lg]{--radio-group-gap:var(--spacing-lg)}.JZt8ca_group[data-orientation=horizontal]{flex-flow:wrap}.JZt8ca_group[data-disabled]{cursor:not-allowed;opacity:.5;& *{cursor:not-allowed}}

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

@@ -0,0 +1,48 @@
+import { RadioGroupProps } from "@base-ui/react/radio-group";
+
+//#region src/atoms/radio-group/radio-group.d.ts
+/**
+ * Represents an item in the radio group.
+ */
+interface RadioGroupItem {
+  /** The value of the radio option. */
+  value: string;
+  /** The display label for the radio option. */
+  label: string;
+  /** Whether this option is disabled. */
+  disabled?: boolean;
+}
+type RadioGroupProps$1 = Omit<RadioGroupProps, "className"> & {
+  /** The items to render as radio options. */items: RadioGroupItem[]; /** The size applied to all radio items. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /**
+   * The layout orientation of the radio group.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Whether the group is in a visually invalid state.
+   * @default false
+   */
+  invalid?: boolean; /** Additional CSS classes for styling. */
+  classNames?: {
+    root?: string;
+    item?: string;
+    itemControl?: string;
+    itemIndicator?: string;
+    itemLabel?: string;
+  };
+};
+declare const RadioGroup$1: ({
+  items,
+  size,
+  orientation,
+  invalid,
+  disabled,
+  required,
+  classNames,
+  ...props
+}: RadioGroupProps$1) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { RadioGroup$1 as RadioGroup, RadioGroupItem, RadioGroupProps$1 as RadioGroupProps };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/atoms/radio-group/radio-group.js

@@ -0,0 +1,2 @@
+import{Radio as e}from"../radio/radio.js";import"../radio/index.js";import t from"./radio-group.module.js";import n from"clsx";import{jsx as r}from"react/jsx-runtime";import{RadioGroup as i}from"@base-ui/react/radio-group";const a=({items:a,size:o=`md`,orientation:s=`vertical`,invalid:c,disabled:l=!1,required:u=!1,classNames:d,...f})=>r(i,{...f,disabled:l,required:u,"data-size":o,"data-orientation":s,"data-invalid":c||void 0,className:n(t.group,d?.root),"data-slot":`radio-group`,children:a.map(t=>r(e,{value:t.value,label:t.label,disabled:t.disabled,size:o,invalid:c,classNames:{root:d?.item,control:d?.itemControl,indicator:d?.itemIndicator,label:d?.itemLabel}},t.value))});export{a as RadioGroup};
+//# sourceMappingURL=radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["RadioGroup","BaseUIRadioGroup","styles"],"sources":["../../../src/atoms/radio-group/radio-group.tsx"],"sourcesContent":["import {\n  RadioGroup as BaseUIRadioGroup,\n  type RadioGroupProps as BaseUIRadioGroupProps,\n} from \"@base-ui/react/radio-group\";\nimport clsx from \"clsx\";\nimport styles from \"./radio-group.module.css\";\nimport { Radio } from \"../radio\";\n\n/**\n * Represents an item in the radio group.\n */\nexport interface RadioGroupItem {\n  /** The value of the radio option. */\n  value: string;\n  /** The display label for the radio option. */\n  label: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n}\n\nexport type RadioGroupProps = Omit<BaseUIRadioGroupProps, \"className\"> & {\n  /** The items to render as radio options. */\n  items: RadioGroupItem[];\n  /** The size applied to all radio items. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The layout orientation of the radio group.\n   * @default \"vertical\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Whether 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    item?: string;\n    itemControl?: string;\n    itemIndicator?: string;\n    itemLabel?: string;\n  };\n};\n\nexport const RadioGroup = ({\n  items,\n  size = \"md\",\n  orientation = \"vertical\",\n  invalid,\n  disabled = false,\n  required = false,\n  classNames,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <BaseUIRadioGroup\n      {...props}\n      disabled={disabled}\n      required={required}\n      data-size={size}\n      data-orientation={orientation}\n      data-invalid={invalid || undefined}\n      className={clsx(styles[\"group\"], classNames?.root)}\n      data-slot=\"radio-group\"\n    >\n      {items.map(item => (\n        <Radio\n          key={item.value}\n          value={item.value}\n          label={item.label}\n          disabled={item.disabled}\n          size={size}\n          invalid={invalid}\n          classNames={{\n            root: classNames?.item,\n            control: classNames?.itemControl,\n            indicator: classNames?.itemIndicator,\n            label: classNames?.itemLabel,\n          }}\n        />\n      ))}\n    </BaseUIRadioGroup>\n  );\n};\n"],"mappings":"+NA6CA,MAAaA,GAAc,CACzB,QACA,OAAO,KACP,cAAc,WACd,UACA,WAAW,GACX,WAAW,GACX,aACA,GAAG,KAGD,EAACC,EAAD,CACE,GAAI,EACM,WACA,WACV,YAAW,EACX,mBAAkB,EAClB,eAAc,GAAW,IAAA,GACzB,UAAW,EAAKC,EAAO,MAAU,GAAY,IAAI,EACjD,YAAU,uBAET,EAAM,IAAI,GACT,EAAC,EAAD,CAEE,MAAO,EAAK,MACZ,MAAO,EAAK,MACZ,SAAU,EAAK,SACT,OACG,UACT,WAAY,CACV,KAAM,GAAY,KAClB,QAAS,GAAY,YACrB,UAAW,GAAY,cACvB,MAAO,GAAY,SACrB,CACD,EAZM,EAAK,KAYX,CACF,CACe,CAAA"}

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

@@ -0,0 +1,3 @@
+import './radio-group.css';
+var e={group:`JZt8ca_group`};export{e as default};
+//# sourceMappingURL=radio-group.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.module.js","names":[],"sources":["../../../src/atoms/radio-group/radio-group.module.css"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--radio-group-gap);\n}\n\n.group[data-size=\"sm\"] {\n  --radio-group-gap: var(--spacing-sm);\n}\n.group[data-size=\"md\"] {\n  --radio-group-gap: var(--spacing-md);\n}\n.group[data-size=\"lg\"] {\n  --radio-group-gap: var(--spacing-lg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.group[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n  & * {\n    cursor: not-allowed;\n  }\n}\n"],"mappings":""}

package/dist/atoms/select/components/item.d.ts

@@ -0,0 +1,17 @@
+//#region src/atoms/select/components/item.d.ts
+/**
+ * Represents an item in the select.
+ */
+interface SelectItem<T = string> {
+  /** Unique identifier for the item */
+  id: string;
+  /** Display label for the item */
+  label: string;
+  /** Underlying value of the item */
+  value: T;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+}
+//#endregion
+export { SelectItem };
+//# sourceMappingURL=item.d.ts.map

package/dist/atoms/select/components/item.js

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../icon/icon.js";import"../../icon/index.js";import t from"../select.module.js";import n from"clsx";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{mdiCheck as a}from"@mdi/js";import{Select as o}from"@base-ui/react/select";function s({item:s,size:c,classNames:l}){return i(o.Item,{value:s.value,disabled:s.disabled,className:n(t.item,l?.root),"data-slot":`select-item`,"data-size":c,children:[r(o.ItemIndicator,{className:n(t[`item-indicator`],l?.indicator),"data-slot":`select-item-indicator`,keepMounted:!0,children:r(e,{data:a})}),r(o.ItemText,{className:n(t[`item-text`],l?.text),"data-slot":`select-item-text`,children:s.label})]})}export{s as ItemRow};
+//# sourceMappingURL=item.js.map

package/dist/atoms/select/components/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":["BaseUISelect","styles"],"sources":["../../../../src/atoms/select/components/item.tsx"],"sourcesContent":["import { Select as BaseUISelect } from \"@base-ui/react/select\";\nimport { mdiCheck } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport { Icon } from \"../../icon\";\nimport styles from \"../select.module.css\";\n\n/**\n * Represents an item in the select.\n */\nexport interface SelectItem<T = string> {\n  /** Unique identifier for the item */\n  id: string;\n  /** Display label for the item */\n  label: string;\n  /** Underlying value of the item */\n  value: T;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n}\n\nexport function ItemRow<T>({\n  item,\n  size,\n  classNames,\n}: {\n  item: SelectItem<T>;\n  size?: \"sm\" | \"md\" | \"lg\";\n  classNames?: { root?: string; indicator?: string; text?: string };\n}) {\n  return (\n    <BaseUISelect.Item\n      value={item.value}\n      disabled={item.disabled}\n      className={clsx(styles[\"item\"], classNames?.root)}\n      data-slot=\"select-item\"\n      data-size={size}\n    >\n      <BaseUISelect.ItemIndicator\n        className={clsx(styles[\"item-indicator\"], classNames?.indicator)}\n        data-slot=\"select-item-indicator\"\n        keepMounted\n      >\n        <Icon data={mdiCheck} />\n      </BaseUISelect.ItemIndicator>\n      <BaseUISelect.ItemText\n        className={clsx(styles[\"item-text\"], classNames?.text)}\n        data-slot=\"select-item-text\"\n      >\n        {item.label}\n      </BaseUISelect.ItemText>\n    </BaseUISelect.Item>\n  );\n}\n"],"mappings":"iQAoBA,SAAgB,EAAW,CACzB,OACA,OACA,cAKC,CACD,OACE,EAACA,EAAa,KAAd,CACE,MAAO,EAAK,MACZ,SAAU,EAAK,SACf,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,cACV,YAAW,WALb,CAOE,EAACD,EAAa,cAAd,CACE,UAAW,EAAKC,EAAO,kBAAmB,GAAY,SAAS,EAC/D,YAAU,wBACV,YAAA,YAEA,EAAC,EAAD,CAAM,KAAM,CAAW,CAAA,CACG,CAAA,EAC5B,EAACD,EAAa,SAAd,CACE,UAAW,EAAKC,EAAO,aAAc,GAAY,IAAI,EACrD,YAAU,4BAET,EAAK,KACe,CAAA,CACN,GAEvB"}

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

@@ -0,0 +1,2 @@
+import { SelectItem } from "./components/item.js";
+import { Select, SelectGroup, SelectProps } from "./select.js";

package/dist/atoms/select/index.js

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

package/dist/atoms/select/select.css

@@ -0,0 +1 @@
+.XmN6oG_root{width:100%}.XmN6oG_trigger{--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);box-sizing:border-box;justify-content:space-between;align-items:center;gap:var(--spacing-sm);width:100%;height:var(--field-control-height);padding:0 var(--spacing-sm);border:1px solid var(--field-control-border-color);border-radius:var(--field-control-radius);background-color:var(--field-control-bg-color);font-family:var(--typography-typeface-ltr);font-size:var(--field-control-font-size);font-weight:var(--field-control-font-weight);color:var(--field-control-text-color);white-space:nowrap;user-select:none;cursor:default;outline:0;margin:0;transition:border-color .2s ease-in-out;display:flex}.XmN6oG_trigger[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-font-weight:var(--typography-caption-base-weight)}.XmN6oG_trigger[data-size=md]{--field-control-height:2rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-2-size);--field-control-font-weight:var(--typography-body-2-weight)}.XmN6oG_trigger[data-size=lg]{--field-control-height:2.5rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-1-size);--field-control-font-weight:var(--typography-body-1-weight)}.XmN6oG_trigger[data-invalid]{--field-control-border-color:var(--color-content-negative-base);--field-control-text-color:var(--color-content-negative-base)}.XmN6oG_trigger[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}.XmN6oG_trigger:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.XmN6oG_value{text-overflow:ellipsis;overflow:hidden}.XmN6oG_value[data-placeholder]{color:var(--field-control-placeholder-color)}.XmN6oG_icon{width:var(--field-control-icon-size);height:var(--field-control-icon-size);color:var(--field-label-color);padding:var(--spacing-xxs);border-radius:var(--radius-full);justify-content:center;align-items:center;transition:color .1s,background-color .1s;display:flex}.XmN6oG_icon:hover{color:var(--color-content-neutral-base);background-color:var(--color-surface-secondary)}.XmN6oG_positioner{z-index:var(--zindex-1);outline:0}.XmN6oG_popup{box-sizing:border-box;font-family:var(--typography-typeface-ltr);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);min-width:var(--anchor-width);transform-origin:var(--transform-origin);border:1px solid var(--color-border-primary);transition:opacity .1s,transform .1s;overflow:hidden;box-shadow:0 4px 12px #0000001a}.XmN6oG_popup[data-starting-style],.XmN6oG_popup[data-ending-style]{opacity:0;transform:scale(.95)}.XmN6oG_popup[data-side=none]{opacity:1;min-width:calc(var(--anchor-width) + 1.75rem);transition:none;transform:none}.XmN6oG_list{box-sizing:border-box;overscroll-behavior:contain;padding-block:var(--spacing-xs);max-height:var(--available-height);outline:0;overflow-y:auto}.XmN6oG_group{padding-block:var(--spacing-xs)}.XmN6oG_group-label{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--typography-caption-base-size);font-weight:var(--typography-subheading-2-weight);color:var(--color-content-neutral-muted);text-transform:uppercase;letter-spacing:.05em}.XmN6oG_item{box-sizing:border-box;cursor:default;user-select:none;padding-block:var(--spacing-sm);padding-left:var(--spacing-md);padding-right:var(--spacing-md);gap:var(--spacing-sm);outline:0;grid-template-columns:1rem 1fr;align-items:center;transition:background-color .1s;display:grid;position:relative}.XmN6oG_item[data-size=sm]{font-size:var(--typography-caption-base-size);font-weight:var(--typography-caption-base-weight)}.XmN6oG_item[data-size=md]{font-size:var(--typography-body-2-size);font-weight:var(--typography-body-2-weight)}.XmN6oG_item[data-size=lg]{font-size:var(--typography-body-1-size);font-weight:var(--typography-body-1-weight)}.XmN6oG_item[data-highlighted]{background-color:var(--color-surface-secondary)}.XmN6oG_item[data-selected]{color:var(--color-content-brand-base);font-weight:var(--typography-subheading-2-weight)}.XmN6oG_item[data-disabled]{opacity:.5;cursor:not-allowed}.XmN6oG_item-indicator{visibility:hidden;grid-column-start:1;justify-content:center;align-items:center;display:flex}.XmN6oG_item[data-selected] .XmN6oG_item-indicator{visibility:visible}.XmN6oG_item-text{grid-column-start:2}

package/dist/atoms/select/select.d.ts

@@ -0,0 +1,67 @@
+import { SelectItem } from "./components/item.js";
+import { SelectRootProps } from "@base-ui/react/select";
+
+//#region src/atoms/select/select.d.ts
+/**
+ * Represents a group of items in the select.
+ */
+interface SelectGroup<T = string> {
+  /** The text label of the group */
+  label: string;
+  /** The items in the group */
+  items: SelectItem<T>[];
+}
+/**
+ * Props for the Select component.
+ */
+type SelectProps<T = string, Multiple extends boolean | undefined = false> = SelectRootProps<T, Multiple> & {
+  /**
+   * The size of the select.
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Whether the select is in an invalid state.
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Placeholder text when no value is selected.
+   */
+  placeholder?: string;
+  /**
+   * Additional CSS classes for styling.
+   */
+  classNames?: {
+    root?: string;
+    trigger?: string;
+    value?: string;
+    icon?: string;
+    positioner?: string;
+    popup?: string;
+    list?: string;
+    item?: string;
+    itemIndicator?: string;
+    itemText?: string;
+    group?: string;
+    groupLabel?: string;
+  };
+};
+/**
+ * A select component for choosing a predefined value from a dropdown.
+ * Built on top of Base UI's Select primitive.
+ */
+declare const Select$1: <T = string, Multiple extends boolean | undefined = false>({
+  size,
+  invalid,
+  disabled,
+  readOnly,
+  placeholder,
+  classNames,
+  items,
+  multiple,
+  ...props
+}: SelectProps<T, Multiple>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Select$1 as Select, SelectGroup, SelectProps };
+//# sourceMappingURL=select.d.ts.map

package/dist/atoms/select/select.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import n from"./select.module.js";import{ItemRow as r}from"./components/item.js";import i from"clsx";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{mdiChevronDown as s}from"@mdi/js";import{Select as c}from"@base-ui/react/select";const l=({size:l=`md`,invalid:u=!1,disabled:d=!1,readOnly:f=!1,placeholder:p=`Select an option`,classNames:m,items:h,multiple:g,..._})=>{let{resolveContainer:v}=e(),y=v();return a(`div`,{"data-slot":`select-root`,className:i(n.root,m?.root),children:o(c.Root,{items:h,multiple:g,disabled:d,readOnly:f,..._,children:[o(c.Trigger,{className:i(n.trigger,m?.trigger),"data-size":l,"data-invalid":u||void 0,"data-slot":`select-trigger`,children:[a(c.Value,{className:i(n.value,m?.value),"data-slot":`select-value`,placeholder:p??void 0}),a(c.Icon,{className:i(n.icon,m?.icon),"data-slot":`select-icon`,children:a(t,{data:s})})]}),a(c.Portal,{container:y,children:a(c.Positioner,{className:i(n.positioner,m?.positioner),"data-slot":`select-positioner`,sideOffset:4,children:a(c.Popup,{className:i(n.popup,m?.popup),"data-slot":`select-popup`,children:a(c.List,{className:i(n.list,m?.list),"data-slot":`select-list`,children:h?.map(e=>`items`in e?o(c.Group,{className:i(n.group,m?.group),"data-slot":`select-group`,children:[a(c.GroupLabel,{className:i(n[`group-label`],m?.groupLabel),"data-slot":`select-group-label`,children:e.label}),e.items.map(e=>a(r,{item:e,size:l,classNames:{root:m?.item,text:m?.itemText,indicator:m?.itemIndicator}},e.id))]},e.label):a(r,{item:e,size:l,classNames:{root:m?.item,text:m?.itemText,indicator:m?.itemIndicator}},e.id))})})})})]})})};export{l as Select};
+//# sourceMappingURL=select.js.map

package/dist/atoms/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Select","styles","BaseUISelect"],"sources":["../../../src/atoms/select/select.tsx"],"sourcesContent":["import {\n  Select as BaseUISelect,\n  type SelectRootProps,\n} from \"@base-ui/react/select\";\nimport { mdiChevronDown } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport { usePortalConfig } from \"../../helpers/portal\";\nimport { Icon } from \"../icon\";\nimport { ItemRow, type SelectItem } from \"./components/item\";\nimport styles from \"./select.module.css\";\n\n/**\n * Represents a group of items in the select.\n */\nexport interface SelectGroup<T = string> {\n  /** The text label of the group */\n  label: string;\n  /** The items in the group */\n  items: SelectItem<T>[];\n}\n\n/**\n * Props for the Select component.\n */\nexport type SelectProps<\n  T = string,\n  Multiple extends boolean | undefined = false,\n> = SelectRootProps<T, Multiple> & {\n  /**\n   * The size of the select.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Whether the select is in an invalid state.\n   * @default false\n   */\n  invalid?: boolean;\n  /**\n   * Placeholder text when no value is selected.\n   */\n  placeholder?: string;\n  /**\n   * Additional CSS classes for styling.\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    value?: string;\n    icon?: string;\n    positioner?: string;\n    popup?: string;\n    list?: string;\n    item?: string;\n    itemIndicator?: string;\n    itemText?: string;\n    group?: string;\n    groupLabel?: string;\n  };\n};\n\n/**\n * A select component for choosing a predefined value from a dropdown.\n * Built on top of Base UI's Select primitive.\n */\nexport const Select = <\n  T = string,\n  Multiple extends boolean | undefined = false,\n>({\n  size = \"md\",\n  invalid = false,\n  disabled = false,\n  readOnly = false,\n  placeholder = \"Select an option\",\n  classNames,\n  items,\n  multiple,\n  ...props\n}: SelectProps<T, Multiple>) => {\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\n  return (\n    <div\n      data-slot=\"select-root\"\n      className={clsx(styles[\"root\"], classNames?.root)}\n    >\n      <BaseUISelect.Root<T, Multiple>\n        items={items}\n        multiple={multiple}\n        disabled={disabled}\n        readOnly={readOnly}\n        {...props}\n      >\n        <BaseUISelect.Trigger\n          className={clsx(styles[\"trigger\"], classNames?.trigger)}\n          data-size={size}\n          data-invalid={invalid || undefined}\n          data-slot=\"select-trigger\"\n        >\n          <BaseUISelect.Value\n            className={clsx(styles[\"value\"], classNames?.value)}\n            data-slot=\"select-value\"\n            placeholder={placeholder ?? undefined}\n          />\n          <BaseUISelect.Icon\n            className={clsx(styles[\"icon\"], classNames?.icon)}\n            data-slot=\"select-icon\"\n          >\n            <Icon data={mdiChevronDown} />\n          </BaseUISelect.Icon>\n        </BaseUISelect.Trigger>\n\n        <BaseUISelect.Portal container={portalContainer}>\n          <BaseUISelect.Positioner\n            className={clsx(styles[\"positioner\"], classNames?.positioner)}\n            data-slot=\"select-positioner\"\n            sideOffset={4}\n          >\n            <BaseUISelect.Popup\n              className={clsx(styles[\"popup\"], classNames?.popup)}\n              data-slot=\"select-popup\"\n            >\n              <BaseUISelect.List\n                className={clsx(styles[\"list\"], classNames?.list)}\n                data-slot=\"select-list\"\n              >\n                {(items as (SelectItem<T> | SelectGroup<T>)[])?.map(\n                  itemOrGroup => {\n                    if (\"items\" in itemOrGroup) {\n                      return (\n                        <BaseUISelect.Group\n                          className={clsx(styles[\"group\"], classNames?.group)}\n                          key={itemOrGroup.label}\n                          data-slot=\"select-group\"\n                        >\n                          <BaseUISelect.GroupLabel\n                            className={clsx(\n                              styles[\"group-label\"],\n                              classNames?.groupLabel,\n                            )}\n                            data-slot=\"select-group-label\"\n                          >\n                            {itemOrGroup.label}\n                          </BaseUISelect.GroupLabel>\n                          {itemOrGroup.items.map(item => (\n                            <ItemRow<T>\n                              key={item.id}\n                              item={item}\n                              size={size}\n                              classNames={{\n                                root: classNames?.item,\n                                text: classNames?.itemText,\n                                indicator: classNames?.itemIndicator,\n                              }}\n                            />\n                          ))}\n                        </BaseUISelect.Group>\n                      );\n                    }\n\n                    return (\n                      <ItemRow<T>\n                        key={itemOrGroup.id}\n                        item={itemOrGroup}\n                        size={size}\n                        classNames={{\n                          root: classNames?.item,\n                          text: classNames?.itemText,\n                          indicator: classNames?.itemIndicator,\n                        }}\n                      />\n                    );\n                  },\n                )}\n              </BaseUISelect.List>\n            </BaseUISelect.Popup>\n          </BaseUISelect.Positioner>\n        </BaseUISelect.Portal>\n      </BaseUISelect.Root>\n    </div>\n  );\n};\n\nexport type { SelectItem } from \"./components/item\";\n"],"mappings":"6ZAiEA,MAAaA,GAGX,CACA,OAAO,KACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,cAAc,mBACd,aACA,QACA,WACA,GAAG,KAC2B,CAC9B,GAAM,CAAE,oBAAqB,EAAgB,EACvC,EAAkB,EAAiB,EAEzC,OACE,EAAC,MAAD,CACE,YAAU,cACV,UAAW,EAAKC,EAAO,KAAS,GAAY,IAAI,WAEhD,EAACC,EAAa,KAAd,CACS,QACG,WACA,WACA,WACV,GAAI,WALN,CAOE,EAACA,EAAa,QAAd,CACE,UAAW,EAAKD,EAAO,QAAY,GAAY,OAAO,EACtD,YAAW,EACX,eAAc,GAAW,IAAA,GACzB,YAAU,0BAJZ,CAME,EAACC,EAAa,MAAd,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,eACV,YAAa,GAAe,IAAA,EAC7B,CAAA,EACD,EAACC,EAAa,KAAd,CACE,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,uBAEV,EAAC,EAAD,CAAM,KAAM,CAAiB,CAAA,CACZ,CAAA,CACC,IAEtB,EAACC,EAAa,OAAd,CAAqB,UAAW,WAC9B,EAACA,EAAa,WAAd,CACE,UAAW,EAAKD,EAAO,WAAe,GAAY,UAAU,EAC5D,YAAU,oBACV,WAAY,WAEZ,EAACC,EAAa,MAAd,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAClD,YAAU,wBAEV,EAACC,EAAa,KAAd,CACE,UAAW,EAAKD,EAAO,KAAS,GAAY,IAAI,EAChD,YAAU,uBAER,GAA8C,IAC9C,GACM,UAAW,EAEX,EAACC,EAAa,MAAd,CACE,UAAW,EAAKD,EAAO,MAAU,GAAY,KAAK,EAElD,YAAU,wBAHZ,CAKE,EAACC,EAAa,WAAd,CACE,UAAW,EACTD,EAAO,eACP,GAAY,UACd,EACA,YAAU,8BAET,EAAY,KACU,CAAA,EACxB,EAAY,MAAM,IAAI,GACrB,EAAC,EAAD,CAEQ,OACA,OACN,WAAY,CACV,KAAM,GAAY,KAClB,KAAM,GAAY,SAClB,UAAW,GAAY,aACzB,CACD,EARM,EAAK,EAQX,CACF,CACiB,GAxBb,EAAY,KAwBC,EAKtB,EAAC,EAAD,CAEE,KAAM,EACA,OACN,WAAY,CACV,KAAM,GAAY,KAClB,KAAM,GAAY,SAClB,UAAW,GAAY,aACzB,CACD,EARM,EAAY,EAQlB,CAGP,CACiB,CAAA,CACD,CAAA,CACG,CAAA,CACN,CAAA,CACJ,GAChB,CAAA,CAET"}

package/dist/atoms/select/select.module.js

@@ -0,0 +1,3 @@
+import './select.css';
+var e={group:`XmN6oG_group`,"group-label":`XmN6oG_group-label`,icon:`XmN6oG_icon`,item:`XmN6oG_item`,"item-indicator":`XmN6oG_item-indicator`,"item-text":`XmN6oG_item-text`,list:`XmN6oG_list`,popup:`XmN6oG_popup`,positioner:`XmN6oG_positioner`,root:`XmN6oG_root`,trigger:`XmN6oG_trigger`,value:`XmN6oG_value`};export{e as default};
+//# sourceMappingURL=select.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.module.js","names":[],"sources":["../../../src/atoms/select/select.module.css"],"sourcesContent":[".root {\n  width: 100%;\n}\n\n.trigger {\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  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-sm);\n  width: 100%;\n  height: var(--field-control-height);\n  padding: 0 var(--spacing-sm);\n  margin: 0;\n  outline: 0;\n  border: 1px solid var(--field-control-border-color);\n  border-radius: var(--field-control-radius);\n  background-color: var(--field-control-bg-color);\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--field-control-font-size);\n  font-weight: var(--field-control-font-weight);\n  color: var(--field-control-text-color);\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.trigger[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-font-weight: var(--typography-caption-base-weight);\n}\n\n.trigger[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-font-weight: var(--typography-body-2-weight);\n}\n\n.trigger[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-font-weight: var(--typography-body-1-weight);\n}\n\n.trigger[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.trigger[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.trigger: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.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.value[data-placeholder] {\n  color: var(--field-control-placeholder-color);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--field-control-icon-size);\n  height: var(--field-control-icon-size);\n  color: var(--field-label-color);\n  padding: var(--spacing-xxs);\n  border-radius: var(--radius-full);\n  transition:\n    color 0.1s,\n    background-color 0.1s;\n}\n\n.icon:hover {\n  color: var(--color-content-neutral-base);\n  background-color: var(--color-surface-secondary);\n}\n\n.positioner {\n  outline: 0;\n  z-index: var(--zindex-1);\n}\n\n.popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  min-width: var(--anchor-width);\n  transform-origin: var(--transform-origin);\n  border: 1px solid var(--color-border-primary);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  transition:\n    opacity 0.1s,\n    transform 0.1s;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n}\n\n.popup[data-side=\"none\"] {\n  transition: none;\n  transform: none;\n  opacity: 1;\n  min-width: calc(var(--anchor-width) + 1.75rem);\n}\n\n.list {\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding-block: var(--spacing-xs);\n  outline: 0;\n  max-height: var(--available-height);\n}\n\n.group {\n  padding-block: var(--spacing-xs);\n}\n\n.group-label {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--typography-caption-base-size);\n  font-weight: var(--typography-subheading-2-weight);\n  color: var(--color-content-neutral-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.item {\n  box-sizing: border-box;\n  outline: 0;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-left: var(--spacing-md);\n  padding-right: var(--spacing-md);\n  display: grid;\n  gap: var(--spacing-sm);\n  align-items: center;\n  grid-template-columns: 1rem 1fr;\n  position: relative;\n  transition: background-color 0.1s;\n}\n\n.item[data-size=\"sm\"] {\n  font-size: var(--typography-caption-base-size);\n  font-weight: var(--typography-caption-base-weight);\n}\n\n.item[data-size=\"md\"] {\n  font-size: var(--typography-body-2-size);\n  font-weight: var(--typography-body-2-weight);\n}\n\n.item[data-size=\"lg\"] {\n  font-size: var(--typography-body-1-size);\n  font-weight: var(--typography-body-1-weight);\n}\n\n.item[data-highlighted] {\n  background-color: var(--color-surface-secondary);\n}\n\n.item[data-selected] {\n  color: var(--color-content-brand-base);\n  font-weight: var(--typography-subheading-2-weight);\n}\n\n.item[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  grid-column-start: 1;\n  visibility: hidden;\n}\n\n.item[data-selected] .item-indicator {\n  visibility: visible;\n}\n\n.item-text {\n  grid-column-start: 2;\n}\n"],"mappings":""}

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

@@ -0,0 +1 @@
+import { Slider, SliderProps } from "./slider.js";