@pantool/components 1.0.0-alpha.0 → 1.0.0-alpha.10

package/dist/atoms/menu/menu.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { MenuTriggerProps } from "@base-ui/react";
+
+//#region src/atoms/menu/menu.d.ts
+type MenuMode = "normal" | "radio" | "checkbox";
+type BaseItem = {
+  key: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+type NormalItem = BaseItem & {
+  kind: "item";
+  onClick?: () => void;
+};
+type SubmenuItem<T> = BaseItem & {
+  kind: "submenu";
+  items: Array<T | SeparatorItem | GroupItem<T> | SubmenuItem<T>>;
+};
+type RadioItem = BaseItem & {
+  kind: "item";
+  value: string;
+};
+type CheckboxItem = BaseItem & {
+  kind: "item";
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+type SeparatorItem = {
+  kind: "separator";
+  key: string;
+};
+type GroupItem<T> = {
+  kind: "group";
+  key: string;
+  label: React.ReactNode;
+  items: T[];
+};
+type MenuItemsByMode<M extends MenuMode> = M extends "normal" ? Array<NormalItem | SeparatorItem | GroupItem<NormalItem> | SubmenuItem<NormalItem>> : M extends "radio" ? Array<RadioItem | SeparatorItem | GroupItem<RadioItem> | SubmenuItem<RadioItem>> : Array<CheckboxItem | SeparatorItem | GroupItem<CheckboxItem> | SubmenuItem<CheckboxItem>>;
+type MenuProps<M extends MenuMode> = {
+  mode?: M;
+  items: MenuItemsByMode<M>;
+  children: React.ReactNode;
+  classNames?: {
+    trigger?: string;
+    popup?: string;
+    positioner?: string;
+    check?: string;
+    item?: string;
+    separator?: string;
+    group?: string;
+    groupLabel?: string;
+    radioItem?: string;
+    radioItemIndicator?: string;
+    checkboxItem?: string;
+    checkboxItemIndicator?: string;
+  };
+  openOnHover?: MenuTriggerProps["openOnHover"];
+};
+declare function Menu$1<M extends MenuMode>({
+  mode,
+  items,
+  classNames,
+  children,
+  openOnHover
+}: MenuProps<M>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BaseItem, CheckboxItem, GroupItem, Menu$1 as Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem };
+//# sourceMappingURL=menu.d.ts.map

package/dist/atoms/menu/menu.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"../../helpers/portal/context/hooks.js";import{Icon as t}from"../icon/icon.js";import"../icon/index.js";import"../../helpers/index.js";import n from"./menu.module.js";import r from"clsx";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{Menu as o}from"@base-ui/react";import{mdiCheck as s,mdiChevronRight as c}from"@mdi/js";function l({mode:l,items:u,classNames:d,children:f,openOnHover:p=!1}){let m=e=>{switch(e.kind){case`separator`:return i(o.Separator,{"data-slot":`menu-separator`,className:r(n.separator,d?.separator)},e.key);case`submenu`:return a(o.SubmenuRoot,{children:[a(o.SubmenuTrigger,{disabled:e.disabled,"data-slot":`menu-submenu-trigger`,className:r(n.item,n[`submenu-trigger`],d?.item),children:[e.label,i(`span`,{className:n[`submenu-arrow`],children:i(t,{data:c})})]}),i(o.Portal,{container:g,children:i(o.Positioner,{"data-slot":`menu-submenu-positioner`,className:r(n.positioner,d?.positioner),children:i(o.Popup,{"data-slot":`menu-submenu-popup`,className:r(n.popup,d?.popup),children:l===`radio`?i(o.RadioGroup,{children:e.items.map(m)}):e.items.map(m)})})})]},e.key);case`group`:return a(o.Group,{"data-slot":`menu-group`,className:r(n.group,d?.group),children:[i(o.GroupLabel,{"data-slot":`menu-group-label`,className:r(n[`group-label`],d?.groupLabel),children:e.label}),e.items.map(m)]},e.key);case`item`:return l===`radio`?a(o.RadioItem,{value:e.value,disabled:e.disabled,"data-slot":`menu-radio-item`,className:r(n.item,n[`radio-item`],d?.item,d?.radioItem,e.className),children:[i(o.RadioItemIndicator,{"data-slot":`menu-radio-item-indicator`,className:r(n[`radio-item-indicator`],d?.radioItemIndicator),children:i(t,{data:s})}),e.label]},e.key):l===`checkbox`?a(o.CheckboxItem,{checked:e.checked,onCheckedChange:e.onCheckedChange,disabled:e.disabled,"data-slot":`menu-checkbox-item`,className:r(n.item,n[`checkbox-item`],d?.item,d?.checkboxItem,e.className),children:[i(o.CheckboxItemIndicator,{"data-slot":`menu-checkbox-item-indicator`,className:r(n[`checkbox-item-indicator`],d?.checkboxItemIndicator),children:i(t,{"data-slot":`menu-check`,className:r(n.check,d?.check),data:s})}),e.label]},e.key):i(o.Item,{disabled:e.disabled,"data-slot":`menu-item`,className:r(n.item,d?.item,e.className),onClick:e.onClick,children:e.label},e.key)}},{resolveContainer:h}=e(),g=h();return a(o.Root,{children:[i(o.Trigger,{openOnHover:p,"data-slot":`menu-trigger`,className:r(n.trigger,d?.trigger),children:f}),i(o.Portal,{container:g,children:i(o.Positioner,{"data-slot":`menu-positioner`,className:r(n.positioner,d?.positioner),children:i(o.Popup,{"data-slot":`menu-popup`,className:r(n.popup,d?.popup),children:l===`radio`?i(o.RadioGroup,{children:u.map(m)}):u.map(m)})})})]})}export{l as Menu};
+//# sourceMappingURL=menu.js.map

package/dist/atoms/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":["Menu","BaseUiMenu","styles"],"sources":["../../../src/atoms/menu/menu.tsx"],"sourcesContent":["import {\n  Menu as BaseUiMenu,\n  type MenuTriggerProps as BaseUiMenuTriggerProps,\n} from \"@base-ui/react\";\nimport { mdiCheck, mdiChevronRight } from \"@mdi/js\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { usePortalConfig } from \"../../helpers\";\nimport { Icon } from \"../icon\";\nimport styles from \"./menu.module.css\";\n\n// TODO: BIG TODO!!!!! fix size of the check icons , no layout shifts should happen while checking.\n\nexport type MenuMode = \"normal\" | \"radio\" | \"checkbox\";\n\nexport type BaseItem = {\n  key: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport type NormalItem = BaseItem & {\n  kind: \"item\";\n  onClick?: () => void;\n};\n\nexport type SubmenuItem<T> = BaseItem & {\n  kind: \"submenu\";\n  items: Array<T | SeparatorItem | GroupItem<T> | SubmenuItem<T>>;\n};\n\nexport type RadioItem = BaseItem & {\n  kind: \"item\";\n  value: string;\n};\n\nexport type CheckboxItem = BaseItem & {\n  kind: \"item\";\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport type SeparatorItem = {\n  kind: \"separator\";\n  key: string;\n};\n\nexport type GroupItem<T> = {\n  kind: \"group\";\n  key: string;\n  label: React.ReactNode;\n  items: T[];\n};\n\nexport type MenuItemsByMode<M extends MenuMode> = M extends \"normal\"\n  ? Array<\n      | NormalItem\n      | SeparatorItem\n      | GroupItem<NormalItem>\n      | SubmenuItem<NormalItem>\n    >\n  : M extends \"radio\"\n    ? Array<\n        | RadioItem\n        | SeparatorItem\n        | GroupItem<RadioItem>\n        | SubmenuItem<RadioItem>\n      >\n    : Array<\n        | CheckboxItem\n        | SeparatorItem\n        | GroupItem<CheckboxItem>\n        | SubmenuItem<CheckboxItem>\n      >;\n\nexport type MenuProps<M extends MenuMode> = {\n  mode?: M;\n  items: MenuItemsByMode<M>;\n  children: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n    popup?: string;\n    positioner?: string;\n    check?: string;\n    item?: string;\n    separator?: string;\n    group?: string;\n    groupLabel?: string;\n    radioItem?: string;\n    radioItemIndicator?: string;\n    checkboxItem?: string;\n    checkboxItemIndicator?: string;\n  };\n  openOnHover?: BaseUiMenuTriggerProps[\"openOnHover\"];\n};\n\nexport function Menu<M extends MenuMode>({\n  mode,\n  items,\n  classNames,\n  children,\n  openOnHover = false,\n}: MenuProps<M>) {\n  const renderItem = (item: any) => {\n    switch (item.kind) {\n      case \"separator\":\n        return (\n          <BaseUiMenu.Separator\n            key={item.key}\n            data-slot=\"menu-separator\"\n            className={clsx(styles[\"separator\"], classNames?.separator)}\n          />\n        );\n\n      case \"submenu\":\n        return (\n          <BaseUiMenu.SubmenuRoot key={item.key}>\n            <BaseUiMenu.SubmenuTrigger\n              disabled={item.disabled}\n              data-slot=\"menu-submenu-trigger\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"submenu-trigger\"],\n                classNames?.item,\n              )}\n            >\n              {item.label}\n              <span className={styles[\"submenu-arrow\"]}>\n                <Icon data={mdiChevronRight} />\n              </span>\n            </BaseUiMenu.SubmenuTrigger>\n\n            <BaseUiMenu.Portal container={portalContainer}>\n              <BaseUiMenu.Positioner\n                data-slot=\"menu-submenu-positioner\"\n                className={clsx(styles[\"positioner\"], classNames?.positioner)}\n              >\n                <BaseUiMenu.Popup\n                  data-slot=\"menu-submenu-popup\"\n                  className={clsx(styles[\"popup\"], classNames?.popup)}\n                >\n                  {mode === \"radio\" ? (\n                    <BaseUiMenu.RadioGroup>\n                      {item.items.map(renderItem)}\n                    </BaseUiMenu.RadioGroup>\n                  ) : (\n                    item.items.map(renderItem)\n                  )}\n                </BaseUiMenu.Popup>\n              </BaseUiMenu.Positioner>\n            </BaseUiMenu.Portal>\n          </BaseUiMenu.SubmenuRoot>\n        );\n\n      case \"group\":\n        return (\n          <BaseUiMenu.Group\n            key={item.key}\n            data-slot=\"menu-group\"\n            className={clsx(styles[\"group\"], classNames?.group)}\n          >\n            <BaseUiMenu.GroupLabel\n              data-slot=\"menu-group-label\"\n              className={clsx(styles[\"group-label\"], classNames?.groupLabel)}\n            >\n              {item.label}\n            </BaseUiMenu.GroupLabel>\n            {item.items.map(renderItem)}\n          </BaseUiMenu.Group>\n        );\n\n      case \"item\":\n        if (mode === \"radio\") {\n          return (\n            <BaseUiMenu.RadioItem\n              key={item.key}\n              value={item.value}\n              disabled={item.disabled}\n              data-slot=\"menu-radio-item\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"radio-item\"],\n                classNames?.item,\n                classNames?.radioItem,\n                item.className,\n              )}\n            >\n              <BaseUiMenu.RadioItemIndicator\n                data-slot=\"menu-radio-item-indicator\"\n                className={clsx(\n                  styles[\"radio-item-indicator\"],\n                  classNames?.radioItemIndicator,\n                )}\n              >\n                <Icon data={mdiCheck} />\n              </BaseUiMenu.RadioItemIndicator>\n              {item.label}\n            </BaseUiMenu.RadioItem>\n          );\n        }\n\n        if (mode === \"checkbox\") {\n          return (\n            <BaseUiMenu.CheckboxItem\n              key={item.key}\n              checked={item.checked}\n              onCheckedChange={item.onCheckedChange}\n              disabled={item.disabled}\n              data-slot=\"menu-checkbox-item\"\n              className={clsx(\n                styles[\"item\"],\n                styles[\"checkbox-item\"],\n                classNames?.item,\n                classNames?.checkboxItem,\n                item.className,\n              )}\n            >\n              <BaseUiMenu.CheckboxItemIndicator\n                data-slot=\"menu-checkbox-item-indicator\"\n                className={clsx(\n                  styles[\"checkbox-item-indicator\"],\n                  classNames?.checkboxItemIndicator,\n                )}\n              >\n                <Icon\n                  data-slot=\"menu-check\"\n                  className={clsx(styles[\"check\"], classNames?.check)}\n                  data={mdiCheck}\n                />\n              </BaseUiMenu.CheckboxItemIndicator>\n              {item.label}\n            </BaseUiMenu.CheckboxItem>\n          );\n        }\n\n        return (\n          <BaseUiMenu.Item\n            key={item.key}\n            disabled={item.disabled}\n            data-slot=\"menu-item\"\n            className={clsx(styles[\"item\"], classNames?.item, item.className)}\n            onClick={item.onClick}\n          >\n            {item.label}\n          </BaseUiMenu.Item>\n        );\n    }\n  };\n\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\n  return (\n    <BaseUiMenu.Root>\n      <BaseUiMenu.Trigger\n        openOnHover={openOnHover}\n        data-slot=\"menu-trigger\"\n        className={clsx(styles[\"trigger\"], classNames?.trigger)}\n      >\n        {children}\n      </BaseUiMenu.Trigger>\n      <BaseUiMenu.Portal container={portalContainer}>\n        <BaseUiMenu.Positioner\n          data-slot=\"menu-positioner\"\n          className={clsx(styles[\"positioner\"], classNames?.positioner)}\n        >\n          <BaseUiMenu.Popup\n            data-slot=\"menu-popup\"\n            className={clsx(styles[\"popup\"], classNames?.popup)}\n          >\n            {mode === \"radio\" ? (\n              <BaseUiMenu.RadioGroup>\n                {items.map(renderItem)}\n              </BaseUiMenu.RadioGroup>\n            ) : (\n              items.map(renderItem)\n            )}\n          </BaseUiMenu.Popup>\n        </BaseUiMenu.Positioner>\n      </BaseUiMenu.Portal>\n    </BaseUiMenu.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/atoms/menu/menu.module.js

@@ -0,0 +1,3 @@
+import './menu.css';
+var e={check:`geRtDa_check`,"checkbox-item":`geRtDa_checkbox-item`,"checkbox-item-indicator":`geRtDa_checkbox-item-indicator`,group:`geRtDa_group`,"group-label":`geRtDa_group-label`,item:`geRtDa_item`,popup:`geRtDa_popup`,positioner:`geRtDa_positioner`,"radio-item":`geRtDa_radio-item`,"radio-item-indicator":`geRtDa_radio-item-indicator`,separator:`geRtDa_separator`,"submenu-arrow":`geRtDa_submenu-arrow`,"submenu-trigger":`geRtDa_submenu-trigger`,trigger:`geRtDa_trigger`};export{e as default};
+//# sourceMappingURL=menu.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.module.js","names":[],"sources":["../../../src/atoms/menu/menu.module.css"],"sourcesContent":[".trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  outline: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1;\n  white-space: nowrap;\n  border: none;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n}\n\n.positioner {\n  outline: 0;\n}\n\n.popup {\n  box-sizing: border-box;\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  width: 100%;\n  padding-block: var(--spacing-xs);\n  border: 1px solid var(--color-border-primary);\n  border-radius: var(--radius-md);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform-origin: var(--transform-origin);\n  transition:\n    transform 100ms ease-out,\n    opacity 100ms ease-out;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0.98);\n  }\n}\n\n.item {\n  font-family: var(--typography-typeface-ltr);\n  outline: none;\n  cursor: default;\n  user-select: none;\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-md);\n  display: flex;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  border-radius: var(--radius-sm);\n  color: var(--color-content-neutral-base);\n\n  &[data-highlighted] {\n    position: relative;\n    z-index: 0;\n    color: var(--color-on-brand);\n  }\n\n  &[data-highlighted]::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    inset-inline: var(--spacing-xs);\n    z-index: -1;\n    border-radius: var(--radius-sm);\n    background-color: var(--color-action-brand-base);\n  }\n\n  &[data-disabled] {\n    color: var(--color-content-neutral-muted);\n    pointer-events: none;\n  }\n}\n\n.separator {\n  margin-block: var(--spacing-xs);\n  margin-inline: var(--spacing-sm);\n  height: 1px;\n  background-color: var(--color-border-tertiary);\n}\n\n.group-label {\n  font-family: var(--typography-typeface-ltr);\n  padding-block: var(--spacing-xxs);\n  padding-inline: var(--spacing-md);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--color-content-neutral-tertiary);\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n}\n\n.radio-item {\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.radio-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  margin-inline-end: var(--spacing-sm);\n}\n\n.checkbox-item {\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.checkbox-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  margin-inline-end: var(--spacing-sm);\n}\n\n.check {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n.submenu-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.submenu-arrow {\n  margin-left: auto;\n  font-size: 0.75rem;\n  opacity: 0.6;\n\n  width: 0.875rem;\n  height: 0.875rem;\n}\n"],"mappings":""}

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

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

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

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

@@ -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":["/* ─── 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":""}

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":""}