@pantool/components 1.0.0-alpha.0

package/dist/atoms/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["Tooltip","BaseTooltip","styles"],"sources":["../../../src/atoms/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { usePortalConfig } from \"../../helpers/portal\";\nimport styles from \"./tooltip.module.css\";\n\nexport type TooltipProps = Omit<BaseTooltip.Root.Props, \"children\"> & {\n  /**\n   * The trigger element.\n   * Should be a single React element that can accept props/refs (e.g. button).\n   */\n  children: React.ReactElement;\n  /**\n   * Tooltip content.\n   */\n  content: React.ReactNode;\n  /**\n   * Distance from trigger.\n   */\n  sideOffset?: number;\n  /**\n   * Whether to render the arrow.\n   */\n  arrow?: boolean;\n  /**\n   * Props forwarded to BaseTooltip.Popup.\n   */\n  popupProps?: Omit<BaseTooltip.Popup.Props, \"children\" | \"className\">;\n  /**\n   * Class name applied to the popup.\n   */\n  popupClassName?: string;\n  /**\n   * Class name applied to the arrow.\n   */\n  arrowClassName?: string;\n};\n\nexport function Tooltip({\n  children,\n  content,\n  sideOffset = 8,\n  arrow = true,\n  popupProps,\n  popupClassName,\n  arrowClassName,\n  ...rootProps\n}: TooltipProps) {\n  const { resolveContainer } = usePortalConfig();\n  const portalContainer = resolveContainer();\n\n  return (\n    <BaseTooltip.Root {...rootProps}>\n      <BaseTooltip.Trigger className={styles[\"trigger\"]}>\n        {children}\n      </BaseTooltip.Trigger>\n\n      <BaseTooltip.Portal container={portalContainer}>\n        <BaseTooltip.Positioner sideOffset={sideOffset}>\n          <BaseTooltip.Popup\n            {...popupProps}\n            className={clsx(styles[\"popup\"], popupClassName)}\n          >\n            {arrow ? (\n              <BaseTooltip.Arrow\n                className={clsx([styles[\"arrow\"], arrowClassName])}\n              />\n            ) : null}\n\n            <BaseTooltip.Viewport className={styles[\"viewport\"]}>\n              {content}\n            </BaseTooltip.Viewport>\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n}\n\nexport type TooltipProviderProps = BaseTooltip.Provider.Props;\n\nexport function TooltipProvider(props: TooltipProviderProps) {\n  return <BaseTooltip.Provider {...props} />;\n}\n"],"mappings":"sRAsCA,SAAgBA,EAAQ,CACtB,WACA,UACA,aAAa,EACb,QAAQ,GACR,aACA,iBACA,iBACA,GAAG,GACY,CACf,GAAM,CAAE,oBAAqB,EAAgB,EACvC,EAAkB,EAAiB,EAEzC,OACE,EAACC,EAAY,KAAb,CAAkB,GAAI,WAAtB,CACE,EAACA,EAAY,QAAb,CAAqB,UAAWC,EAAO,QACpC,UACkB,CAAA,EAErB,EAACD,EAAY,OAAb,CAAoB,UAAW,WAC7B,EAACA,EAAY,WAAb,CAAoC,sBAClC,EAACA,EAAY,MAAb,CACE,GAAI,EACJ,UAAW,EAAKC,EAAO,MAAU,CAAc,WAFjD,CAIG,EACC,EAACD,EAAY,MAAb,CACE,UAAW,EAAK,CAACC,EAAO,MAAU,CAAc,CAAC,CAClD,CAAA,EACC,KAEJ,EAACD,EAAY,SAAb,CAAsB,UAAWC,EAAO,kBACrC,CACmB,CAAA,CACL,GACG,CAAA,CACN,CAAA,CACJ,GAEtB,CAIA,SAAgB,EAAgB,EAA6B,CAC3D,OAAO,EAACD,EAAY,SAAb,CAAsB,GAAI,CAAQ,CAAA,CAC3C"}

package/dist/atoms/tooltip/tooltip.module.js

@@ -0,0 +1,2 @@
+var e={arrow:`o4Okuq_arrow`,popup:`o4Okuq_popup`,trigger:`o4Okuq_trigger`,viewport:`o4Okuq_viewport`};export{e as default};
+//# sourceMappingURL=tooltip.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../../src/atoms/tooltip/tooltip.module.css"],"sourcesContent":[".trigger {\n  outline: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\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.popup {\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  max-width: 20rem;\n  padding: var(--spacing-xs) var(--spacing-sm);\n  border-style: solid;\n  border-width: 0.0625rem;\n  border-color: var(--color-border-primary);\n  border-radius: var(--spacing-xs);\n  background-color: var(--color-surface-base);\n  color: var(--color-content-neutral-base);\n  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);\n  transform-origin: var(--transform-origin);\n  transition:\n    opacity 100ms ease-out,\n    scale 100ms ease-out;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n  opacity: 0;\n  scale: 0.98;\n}\n\n.popup[data-instant] {\n  transition: none;\n}\n\n.viewport {\n  font-family: var(--typography-typeface-ltr);\n  font-size: var(--typography-caption-base-size);\n  line-height: 1.4;\n  color: inherit;\n}\n\n.arrow {\n  position: relative;\n  display: block;\n  width: 0.75rem;\n  height: 0.375rem;\n  overflow: clip;\n}\n/* TODO: fix hmr */\n/* TODO: fix arrow positions */\n\n.arrow[data-side=\"top\"] {\n  bottom: -0.375rem;\n  rotate: 180deg;\n}\n\n.arrow[data-side=\"bottom\"] {\n  top: -0.375rem;\n  rotate: 0deg;\n}\n\n.arrow[data-side=\"left\"] {\n  right: -0.5625rem;\n  rotate: 90deg;\n}\n\n.arrow[data-side=\"right\"] {\n  left: -0.5625rem;\n  rotate: -90deg;\n}\n\n.arrow::before {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  box-sizing: border-box;\n  display: block;\n  width: calc(0.375rem * sqrt(2));\n  height: calc(0.375rem * sqrt(2));\n  border-style: solid;\n  border-width: 0.0625rem;\n  border-color: var(--color-border-primary);\n  background-color: var(--color-surface-base);\n  transform: translate(-50%, 50%) rotate(45deg);\n}\n"],"mappings":"AAQA,IAAA,EAAe,CAAC,MAAM,eAAA,MAAA,eAAA,QAAA,iBAAA,SAAA,iBAAA"}

package/dist/helpers/portal/context/hooks.d.ts

@@ -0,0 +1,7 @@
+import { PortalConfigValue } from "./portal-config.js";
+
+//#region src/helpers/portal/context/hooks.d.ts
+declare const usePortalConfig: () => PortalConfigValue;
+//#endregion
+export { usePortalConfig };
+//# sourceMappingURL=hooks.d.ts.map

package/dist/helpers/portal/context/hooks.js

@@ -0,0 +1,2 @@
+import{PortalConfig as e}from"./portal-config.js";import{useContext as t}from"react";const n=()=>{let n=t(e);if(!n)throw Error(`usePortalConfig must be used within an PortalConfigProvider.`);return n};export{n as usePortalConfig};
+//# sourceMappingURL=hooks.js.map

package/dist/helpers/portal/context/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","names":[],"sources":["../../../../src/helpers/portal/context/hooks.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { PortalConfig, type PortalConfigValue } from \"./portal-config.ts\";\n\nexport const usePortalConfig = (): PortalConfigValue => {\n  const portalConfig = useContext(PortalConfig);\n\n  if (!portalConfig) {\n    throw new Error(\n      \"usePortalConfig must be used within an PortalConfigProvider.\",\n    );\n  }\n\n  return portalConfig;\n};\n"],"mappings":"qFAGA,MAAa,MAA2C,CACtD,IAAM,EAAe,EAAW,CAAY,EAE5C,GAAI,CAAC,EACH,MAAU,MACR,8DACF,EAGF,OAAO,CACT"}

package/dist/helpers/portal/context/index.internal.d.ts

@@ -0,0 +1,2 @@
+import { usePortalConfig } from "./hooks.js";
+import { PortalConfigProvider } from "./provider.js";

package/dist/helpers/portal/context/index.internal.js

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

package/dist/helpers/portal/context/portal-config.d.ts

@@ -0,0 +1,12 @@
+//#region src/helpers/portal/context/portal-config.d.ts
+type PortalConfigValue = {
+  /**
+   * A function that will resolve the container element for the portals.
+   *
+   * Please note that this function is only called on the client-side.
+   */
+  resolveContainer: () => HTMLElement | null;
+};
+//#endregion
+export { PortalConfigValue };
+//# sourceMappingURL=portal-config.d.ts.map

package/dist/helpers/portal/context/portal-config.js

@@ -0,0 +1,2 @@
+import*as e from"react";const t=e.createContext(null);export{t as PortalConfig};
+//# sourceMappingURL=portal-config.js.map

package/dist/helpers/portal/context/portal-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-config.js","names":[],"sources":["../../../../src/helpers/portal/context/portal-config.ts"],"sourcesContent":["import * as React from \"react\";\n\nexport type PortalConfigValue = {\n  /**\n   * A function that will resolve the container element for the portals.\n   *\n   * Please note that this function is only called on the client-side.\n   */\n  resolveContainer: () => HTMLElement | null;\n};\n\nexport const PortalConfig = React.createContext<PortalConfigValue | null>(null);\n"],"mappings":"wBAWA,MAAa,EAAe,EAAM,cAAwC,IAAI"}

package/dist/helpers/portal/context/provider.d.ts

@@ -0,0 +1,11 @@
+import { PortalConfigValue } from "./portal-config.js";
+
+//#region src/helpers/portal/context/provider.d.ts
+type Props = {
+  children: React.ReactNode;
+  config: PortalConfigValue;
+};
+declare const PortalConfigProvider: React.FC<Props>;
+//#endregion
+export { PortalConfigProvider };
+//# sourceMappingURL=provider.d.ts.map

package/dist/helpers/portal/context/provider.js

@@ -0,0 +1,2 @@
+import{PortalConfig as e}from"./portal-config.js";import{useMemo as t}from"react";import{jsx as n}from"react/jsx-runtime";const r=r=>{let{config:i,children:a}=r,{resolveContainer:o}=i??{},s=t(()=>({resolveContainer:o}),[o]);return n(e.Provider,{value:s,children:a})};export{r as PortalConfigProvider};
+//# sourceMappingURL=provider.js.map

package/dist/helpers/portal/context/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":[],"sources":["../../../../src/helpers/portal/context/provider.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { PortalConfig, type PortalConfigValue } from \"./portal-config.ts\";\n\ntype Props = {\n  children: React.ReactNode;\n  config: PortalConfigValue;\n};\n\nexport const PortalConfigProvider: React.FC<Props> = (props) => {\n  const { config, children } = props;\n  const { resolveContainer } = config ?? {};\n\n  const context = useMemo(\n    () => ({ resolveContainer }) satisfies PortalConfigValue,\n    [resolveContainer],\n  );\n\n  return (\n    <PortalConfig.Provider value={context}>{children}</PortalConfig.Provider>\n  );\n};\n"],"mappings":"0HAQA,MAAa,EAAyC,GAAU,CAC9D,GAAM,CAAE,SAAQ,YAAa,EACvB,CAAE,oBAAqB,GAAU,CAAC,EAElC,EAAU,OACP,CAAE,kBAAiB,GAC1B,CAAC,CAAgB,CACnB,EAEA,OACE,EAAC,EAAa,SAAd,CAAuB,MAAO,EAAU,UAAgC,CAAA,CAE5E"}

package/dist/helpers/portal/index.d.ts

@@ -0,0 +1,3 @@
+import { usePortalConfig } from "./context/hooks.js";
+import { PortalConfigProvider } from "./context/provider.js";
+import { Portal, PortalProps } from "./portal.js";

package/dist/helpers/portal/index.js

@@ -0,0 +1 @@
+import"./context/hooks.js";import"./context/provider.js";import"./context/index.internal.js";import"./portal.js";

package/dist/helpers/portal/portal.d.ts

@@ -0,0 +1,24 @@
+//#region src/helpers/portal/portal.d.ts
+type PortalProps = {
+  /**
+   * A function that will resolve the container element for the portal.
+   * If not provided will opt-in `PortalConfigProvider` configuration as default behavior.
+   *
+   * Please note that this function is only called on the client-side.
+   */
+  resolveContainer?: () => HTMLElement | null;
+  /**
+   * The children to render into the container.
+   */
+  children: React.ReactNode;
+  /**
+   * If `true`, the `children` will be under the DOM hierarchy of the parent component.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+};
+declare const Portal: React.FC<PortalProps>;
+//#endregion
+export { Portal, PortalProps };
+//# sourceMappingURL=portal.d.ts.map

package/dist/helpers/portal/portal.js

@@ -0,0 +1,2 @@
+import{usePortalConfig as e}from"./context/hooks.js";import"./context/index.internal.js";import{Fragment as t,jsx as n}from"react/jsx-runtime";import{useIsomorphicValue as r}from"@pantool/lib";import{createPortal as i}from"react-dom";const a=a=>{let{resolveContainer:o,children:s,disabled:c=!1}=a,l=e(),u=r(o??l.resolveContainer,null);return c?n(t,{children:s}):u?i(s,u):null};export{a as Portal};
+//# sourceMappingURL=portal.js.map

package/dist/helpers/portal/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","names":[],"sources":["../../../src/helpers/portal/portal.tsx"],"sourcesContent":["import { useIsomorphicValue } from \"@pantool/lib\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalConfig } from \"./context/index.internal.ts\";\n\nexport type PortalProps = {\n  /**\n   * A function that will resolve the container element for the portal.\n   * If not provided will opt-in `PortalConfigProvider` configuration as default behavior.\n   *\n   * Please note that this function is only called on the client-side.\n   */\n  resolveContainer?: () => HTMLElement | null;\n\n  /**\n   * The children to render into the container.\n   */\n  children: React.ReactNode;\n\n  /**\n   * If `true`, the `children` will be under the DOM hierarchy of the parent component.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n};\n\nexport const Portal: React.FC<PortalProps> = props => {\n  const { resolveContainer, children, disabled = false } = props;\n\n  const portalConfig = usePortalConfig();\n\n  const containerResolver = resolveContainer ?? portalConfig.resolveContainer;\n\n  const container = useIsomorphicValue(containerResolver, null);\n\n  if (disabled) return <>{children}</>;\n  if (!container) return null;\n\n  return createPortal(children, container);\n};\n"],"mappings":"0OA0BA,MAAa,EAAgC,GAAS,CACpD,GAAM,CAAE,mBAAkB,WAAU,WAAW,IAAU,EAEnD,EAAe,EAAgB,EAI/B,EAAY,EAFQ,GAAoB,EAAa,iBAEH,IAAI,EAK5D,OAHI,EAAiB,EAAA,EAAA,CAAG,UAAW,CAAA,EAC9B,EAEE,EAAa,EAAU,CAAS,EAFhB,IAGzB"}

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import { AlertDialog, AlertDialogProps } from "./atoms/alert-dialog/alert-dialog.js";
+import { Button, ButtonProps } from "./atoms/button/button.js";
+import { Checkbox, CheckboxProps } from "./atoms/checkbox/checkbox.js";
+import { Combobox, ComboboxGroup, ComboboxProps } from "./atoms/combobox/combobox.js";
+import { ContextMenu } from "./atoms/context-menu/context-menu.js";
+import { Dialog, DialogProps } from "./atoms/dialog/dialog.js";
+import { Icon, IconProps } from "./atoms/icon/icon.js";
+import { IconButton, IconButtonProps } from "./atoms/icon-button/icon-button.js";
+import { Input, InputProps } from "./atoms/input/input.js";
+import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./atoms/radio/radio.js";
+import { Switch, SwitchProps } from "./atoms/switch/switch.js";
+import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./atoms/tabs/tabs.js";
+import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./atoms/tabs/index.js";
+import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, WithBaseProps, WithColorProps, WithRef } from "./types.js";
+import { Text, TextColor, TextProps, TextVariant } from "./atoms/text/text.js";
+import { Toast, ToastData, ToastProps } from "./atoms/toast/toast.js";
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./atoms/tooltip/tooltip.js";
+import { ConditionGuard, ConditionGuardProps } from "./atoms/condition-guard/condition-guard.js";
+import { usePortalConfig } from "./helpers/portal/context/hooks.js";
+import { PortalConfigProvider } from "./helpers/portal/context/provider.js";
+import { Portal, PortalProps } from "./helpers/portal/portal.js";
+import { AlertDialogContext, AlertDialogProvider, AlertDialogProviderProps, showAlertDialog } from "./providers/alert-dialog-provider/alert-dialog-provider.js";
+import { useAlertDialog } from "./providers/alert-dialog-provider/hooks.js";
+import { DialogContext, DialogProvider, DialogProviderProps, showDialog } from "./providers/dialog-provider/dialog-provider.js";
+import { useDialog } from "./providers/dialog-provider/hooks.js";
+import { ToastProvider, ToastProviderProps, toaster } from "./providers/toast-provider/toast-provider.js";
+export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Button, ButtonProps, Checkbox, CheckboxProps, Combobox, ComboboxGroup, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };

package/dist/index.js

@@ -0,0 +1 @@
+import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Combobox as c}from"./atoms/combobox/combobox.js";import{ContextMenu as l}from"./atoms/context-menu/context-menu.js";import{Dialog as u}from"./atoms/dialog/dialog.js";import{IconButton as d}from"./atoms/icon-button/icon-button.js";import{Input as f}from"./atoms/input/input.js";import{Radio as p,RadioGroup as m}from"./atoms/radio/radio.js";import{Switch as h}from"./atoms/switch/switch.js";import{Tabs as g,TabsList as _,TabsPanel as v,TabsTab as y}from"./atoms/tabs/tabs.js";import{Toast as b}from"./atoms/toast/toast.js";import{Tooltip as x,TooltipProvider as S}from"./atoms/tooltip/tooltip.js";import{ConditionGuard as C}from"./atoms/condition-guard/condition-guard.js";import"./atoms/index.js";import{AlertDialogContext as w,AlertDialogProvider as T,showAlertDialog as E}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as D}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as O,DialogProvider as k,showDialog as A}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as j}from"./providers/dialog-provider/hooks.js";import{ToastProvider as M,toaster as N}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,w as AlertDialogContext,T as AlertDialogProvider,e as Button,s as Checkbox,c as Combobox,C as ConditionGuard,l as ContextMenu,u as Dialog,O as DialogContext,k as DialogProvider,o as Icon,d as IconButton,f as Input,i as Portal,r as PortalConfigProvider,p as Radio,m as RadioGroup,h as Switch,g as Tabs,_ as TabsList,v as TabsPanel,y as TabsTab,t as Text,b as Toast,M as ToastProvider,x as Tooltip,S as TooltipProvider,E as showAlertDialog,A as showDialog,N as toaster,D as useAlertDialog,j as useDialog,n as usePortalConfig};

package/dist/internals/base-button/base-button.css

@@ -0,0 +1,262 @@
+._4R_YnW_root {
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--typography-typeface-ltr);
+  font-weight: var(--typography-body-2-weight);
+  border-radius: var(--radius-full);
+  height: var(--btn-height);
+  padding: 0 var(--btn-padding-x);
+  font-size: var(--btn-font-size);
+  background-color: var(--btn-bg);
+  color: var(--btn-text);
+  border: none;
+  border: 1px solid var(--btn-border);
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
+  display: inline-flex;
+}
+
+._4R_YnW_root[data-size="sm"] {
+  --btn-height: 1.5rem;
+  --btn-icon-size: 1rem;
+  --btn-padding-x: var(--spacing-sm);
+  --btn-font-size: var(--typography-body-2-size);
+}
+
+._4R_YnW_root[data-size="md"] {
+  --btn-height: 2rem;
+  --btn-icon-size: 1.5rem;
+  --btn-padding-x: var(--spacing-md);
+  --btn-font-size: var(--typography-body-2-size);
+}
+
+._4R_YnW_root[data-size="lg"] {
+  --btn-height: 2.5rem;
+  --btn-icon-size: 2rem;
+  --btn-padding-x: var(--spacing-lg);
+  --btn-font-size: var(--typography-body-1-size);
+}
+
+._4R_YnW_root[data-fluid] {
+  width: 100%;
+}
+
+._4R_YnW_root:focus-visible {
+  outline-style: solid;
+  outline-width: var(--stroke-focus-ring);
+  outline-color: var(--color-action-info-base);
+  outline-offset: var(--spacing-xxs);
+}
+
+._4R_YnW_root[disabled], ._4R_YnW_root[data-disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="filled"] {
+  --btn-bg: var(--color-action-neutral-base);
+  --btn-text: var(--color-on-neutral);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-neutral-hover);
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-neutral-active);
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-neutral-base);
+  --btn-border: var(--color-content-neutral-base);
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-neutral-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="neutral"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="filled"] {
+  --btn-bg: var(--color-action-brand-base);
+  --btn-text: var(--color-on-brand);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-brand-hover);
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-brand-active);
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-brand-base);
+  --btn-border: var(--color-content-brand-base);
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-brand-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="brand"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="filled"] {
+  --btn-bg: var(--color-action-positive-base);
+  --btn-text: var(--color-on-positive);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-positive-hover);
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-positive-active);
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-positive-base);
+  --btn-border: var(--color-content-positive-base);
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-positive-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="positive"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="filled"] {
+  --btn-bg: var(--color-action-negative-base);
+  --btn-text: var(--color-on-negative);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-negative-hover);
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-negative-active);
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-negative-base);
+  --btn-border: var(--color-content-negative-base);
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-negative-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="negative"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="filled"] {
+  --btn-bg: var(--color-action-warn-base);
+  --btn-text: var(--color-on-warn);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-warn-hover);
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-warn-active);
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-warn-base);
+  --btn-border: var(--color-content-warn-base);
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-warn-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="warn"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="info"][data-variant="filled"] {
+  --btn-bg: var(--color-action-info-base);
+  --btn-text: var(--color-on-info);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="info"][data-variant="filled"]:hover:not([disabled]) {
+  --btn-bg: var(--color-action-info-hover);
+}
+
+._4R_YnW_root[data-color="info"][data-variant="filled"]:active:not([disabled]) {
+  --btn-bg: var(--color-action-info-active);
+}
+
+._4R_YnW_root[data-color="info"][data-variant="outlined"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-info-base);
+  --btn-border: var(--color-content-info-base);
+}
+
+._4R_YnW_root[data-color="info"][data-variant="outlined"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}
+
+._4R_YnW_root[data-color="info"][data-variant="ghost"] {
+  --btn-bg: transparent;
+  --btn-text: var(--color-content-info-base);
+  --btn-border: transparent;
+}
+
+._4R_YnW_root[data-color="info"][data-variant="ghost"]:hover:not([disabled]) {
+  --btn-bg: var(--color-surface-secondary);
+}

package/dist/internals/base-button/base-button.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+
+//#region src/internals/base-button/base-button.d.ts
+interface BaseButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
+  /** The visual style of the button. */
+  variant?: "filled" | "outlined" | "ghost";
+  /** The semantic color palette applied to the button. */
+  color?: "neutral" | "brand" | "positive" | "negative" | "warn" | "info";
+  /** The size of the button, affecting height, padding, and font size. */
+  size?: "sm" | "md" | "lg";
+  /** If true, the button is in a loading state and becomes disabled. */
+  pending?: boolean;
+  /** If true, the button will take up 100% of its container's width. */
+  fluid?: boolean;
+}
+//#endregion
+export { BaseButtonProps };
+//# sourceMappingURL=base-button.d.ts.map

package/dist/internals/base-button/base-button.js

@@ -0,0 +1,2 @@
+import e from"./base-button.module.js";import*as t from"react";import{Button as n}from"@base-ui/react/button";import{jsx as r}from"react/jsx-runtime";const i=t.forwardRef((t,i)=>{let{className:a,variant:o=`filled`,color:s=`neutral`,size:c=`md`,pending:l=!1,fluid:u=!1,disabled:d,children:f,...p}=t;return r(n,{ref:i,className:`${e.root} ${a||``}`.trim(),"data-variant":o,"data-color":s,"data-size":c,"data-pending":l?``:void 0,"data-fluid":u?``:void 0,disabled:d||l,...p,children:f})});export{i as BaseButton};
+//# sourceMappingURL=base-button.js.map

package/dist/internals/base-button/base-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.js","names":["BaseUIButton","styles"],"sources":["../../../src/internals/base-button/base-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseUIButton } from \"@base-ui/react/button\";\nimport styles from \"./base-button.module.css\";\n\nexport interface BaseButtonProps extends React.ComponentPropsWithoutRef<\n  typeof BaseUIButton\n> {\n  /** The visual style of the button. */\n  variant?: \"filled\" | \"outlined\" | \"ghost\";\n  /** The semantic color palette applied to the button. */\n  color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n  /** The size of the button, affecting height, padding, and font size. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** If true, the button is in a loading state and becomes disabled. */\n  pending?: boolean;\n  /** If true, the button will take up 100% of its container's width. */\n  fluid?: boolean;\n}\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  (props, ref) => {\n    const {\n      className,\n      variant = \"filled\",\n      color = \"neutral\",\n      size = \"md\",\n      pending = false,\n      fluid = false,\n      disabled,\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <BaseUIButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-variant={variant}\n        data-color={color}\n        data-size={size}\n        data-pending={pending ? \"\" : undefined}\n        data-fluid={fluid ? \"\" : undefined}\n        disabled={disabled || pending}\n        {...rest}\n      >\n        {children}\n      </BaseUIButton>\n    );\n  },\n);\n"],"mappings":"sJAmBA,MAAa,EAAa,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CACJ,YACA,UAAU,SACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,QAAQ,GACR,WACA,WACA,GAAG,GACD,EAEJ,OACE,EAACA,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EAAU,GAAK,IAAA,GAC7B,aAAY,EAAQ,GAAK,IAAA,GACzB,SAAU,GAAY,EACtB,GAAI,EAEH,UACW,CAAA,CAElB,CACF"}

package/dist/internals/base-button/base-button.module.js

@@ -0,0 +1,2 @@
+var e={root:`_4R_YnW_root`};export{e as default};
+//# sourceMappingURL=base-button.module.js.map

package/dist/internals/base-button/base-button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-button.module.js","names":[],"sources":["../../../src/internals/base-button/base-button.module.css"],"sourcesContent":[".root {\n  /* 1. Map internal variables to CSS properties */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  font-family: var(--typography-typeface-ltr);\n  font-weight: var(--typography-body-2-weight);\n  border-radius: var(--radius-full);\n  transition:\n    background-color 0.2s,\n    color 0.2s,\n    border-color 0.2s,\n    opacity 0.2s;\n\n  /* Apply local variables */\n  height: var(--btn-height);\n  padding: 0 var(--btn-padding-x);\n  font-size: var(--btn-font-size);\n  background-color: var(--btn-bg);\n  color: var(--btn-text);\n  border: 1px solid var(--btn-border);\n}\n\n/* --- Sizes --- */\n.root[data-size=\"sm\"] {\n  --btn-height: 1.5rem;\n  --btn-icon-size: 1rem;\n  --btn-padding-x: var(--spacing-sm);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"md\"] {\n  --btn-height: 2rem;\n  --btn-icon-size: 1.5rem;\n  --btn-padding-x: var(--spacing-md);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"lg\"] {\n  --btn-height: 2.5rem;\n  --btn-icon-size: 2rem;\n  --btn-padding-x: var(--spacing-lg);\n  --btn-font-size: var(--typography-body-1-size);\n}\n\n/* --- Layout Modifiers --- */\n.root[data-fluid] {\n  width: 100%;\n}\n\n/* --- Focus Ring (Base UI provides data-focus-visible) --- */\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/* --- Disabled State --- */\n.root[disabled],\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* --- Variants & Colors: BRAND Example --- */\n/* (You would duplicate this block for neutral, positive, negative, etc.) */\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* --- Variants & Colors --- */\n\n/* Neutral Filled */\n.root[data-color=\"neutral\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-neutral-base);\n  --btn-text: var(--color-on-neutral);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-hover);\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-active);\n}\n\n/* Neutral Outlined */\n.root[data-color=\"neutral\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: var(--color-content-neutral-base);\n}\n.root[data-color=\"neutral\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Neutral Ghost */\n.root[data-color=\"neutral\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Filled */\n.root[data-color=\"positive\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-positive-base);\n  --btn-text: var(--color-on-positive);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-positive-hover);\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-positive-active);\n}\n\n/* Positive Outlined */\n.root[data-color=\"positive\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: var(--color-content-positive-base);\n}\n.root[data-color=\"positive\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Ghost */\n.root[data-color=\"positive\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Filled */\n.root[data-color=\"negative\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-negative-base);\n  --btn-text: var(--color-on-negative);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-negative-hover);\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-negative-active);\n}\n\n/* Negative Outlined */\n.root[data-color=\"negative\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: var(--color-content-negative-base);\n}\n.root[data-color=\"negative\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Ghost */\n.root[data-color=\"negative\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Filled */\n.root[data-color=\"warn\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-warn-base);\n  --btn-text: var(--color-on-warn);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-warn-hover);\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-warn-active);\n}\n\n/* Warn Outlined */\n.root[data-color=\"warn\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: var(--color-content-warn-base);\n}\n.root[data-color=\"warn\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Ghost */\n.root[data-color=\"warn\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Filled */\n.root[data-color=\"info\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-info-base);\n  --btn-text: var(--color-on-info);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-info-hover);\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-info-active);\n}\n\n/* Info Outlined */\n.root[data-color=\"info\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: var(--color-content-info-base);\n}\n.root[data-color=\"info\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Ghost */\n.root[data-color=\"info\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n"],"mappings":"AAEA,IAAA,EAAU,CAAA,KAAO,cAAA"}

package/dist/internals/base-button/index.d.ts

@@ -0,0 +1 @@
+import { BaseButtonProps } from "./base-button.js";

package/dist/internals/base-button/index.js

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

package/dist/internals/base-dialog/base-dialog.css

@@ -0,0 +1,74 @@
+._9nsqjG_backdrop {
+  background-color: var(--color-surface-backdrop-overlay);
+  backdrop-filter: blur(.5rem);
+  z-index: 1000;
+  transition: opacity .2s;
+  position: fixed;
+  inset: 0;
+
+  &[data-starting-style], &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+._9nsqjG_popup {
+  --background: var(--color-surface-base);
+  --foreground: var(--color-content-neutral-base);
+  --border: var(--color-border-primary);
+  z-index: 1010;
+  box-sizing: border-box;
+  background-color: var(--background);
+  width: calc(100vw - 2rem);
+  max-width: 28rem;
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--spacing-sm);
+  padding: var(--spacing-xl);
+  gap: var(--spacing-md);
+  flex-direction: column;
+  transition: opacity .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
+  display: flex;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &[data-starting-style], &[data-ending-style] {
+    opacity: 0;
+    transform: translate(-50%, -46%);
+  }
+
+  &:focus-visible {
+    outline-style: solid;
+    outline-width: var(--stroke-focus-ring);
+    outline-color: var(--color-action-info-base);
+    outline-offset: var(--spacing-xxs);
+  }
+
+  &[data-variant="neutral"] {
+    --border: var(--color-action-neutral-muted);
+  }
+
+  &[data-variant="positive"] {
+    --border: var(--color-action-positive-muted);
+  }
+
+  &[data-variant="negative"] {
+    --border: var(--color-action-negative-muted);
+  }
+
+  &[data-variant="warn"] {
+    --border: var(--color-action-warn-muted);
+  }
+
+  &[data-variant="info"] {
+    --border: var(--color-action-info-muted);
+  }
+}
+
+._9nsqjG_actions {
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-xs);
+  display: flex;
+}

package/dist/internals/base-dialog/base-dialog.d.ts

@@ -0,0 +1,40 @@
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog } from "@base-ui/react/dialog";
+
+//#region src/internals/base-dialog/base-dialog.d.ts
+type BaseDialogVariant = "neutral" | "positive" | "negative" | "warn" | "info";
+type BaseDialogOptions = {
+  /** The dialog heading text. */title: string; /** Optional body text shown below the title. */
+  description?: string; /** Label for the confirm button. Defaults to `"Confirm"`. */
+  confirmLabel?: string; /** Label for the cancel button. Defaults to `"Cancel"`. */
+  cancelLabel?: string; /** Visual variant controlling color and tone. Defaults to `"neutral"`. */
+  variant?: BaseDialogVariant; /** Called when the user clicks the confirm button. */
+  onConfirm?: () => void; /** Called when the user clicks the cancel button or dismisses the dialog. */
+  onCancel?: () => void;
+};
+type BaseDialogClassNames = {
+  backdrop?: string;
+  popup?: string;
+  actions?: string;
+};
+type BaseDialogProps = BaseDialogOptions & {
+  /** Whether the dialog is open. */open: boolean; /** Called when the dialog requests to close (backdrop click, Escape key). */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * The DOM element to portal the dialog into.
+   * Defaults to `document.body` when not provided.
+   */
+  container?: HTMLElement | null;
+  /**
+   * Render Mode
+   */
+  as: typeof AlertDialog | typeof Dialog;
+  /**
+   * Optional className overrides for internal slots.
+   * Keys correspond to existing CSS module classes in `styles["..."]`.
+   */
+  classNames?: BaseDialogClassNames;
+};
+//#endregion
+export { BaseDialogClassNames, BaseDialogOptions, BaseDialogProps, BaseDialogVariant };
+//# sourceMappingURL=base-dialog.d.ts.map

package/dist/internals/base-dialog/base-dialog.js

@@ -0,0 +1,2 @@
+import{Button as e}from"../../atoms/button/button.js";import"../../atoms/button/index.js";import{Text as t}from"../../atoms/text/text.js";import"../../atoms/text/index.js";import{usePortalConfig as n}from"../../helpers/portal/context/hooks.js";import"../../helpers/portal/index.js";import r from"./base-dialog.module.js";import"@base-ui/react/alert-dialog";import"@base-ui/react/dialog";import i from"clsx";import{useCallback as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=c=>{let{open:l,onOpenChange:u,title:d,description:f,confirmLabel:p=`Confirm`,cancelLabel:m=`Cancel`,variant:h=`neutral`,onConfirm:g,as:_,onCancel:v,classNames:y}=c,b=a(()=>{g?.(),u(!1)},[g,u]),x=a(()=>{v?.(),u(!1)},[v,u]),{resolveContainer:S}=n(),C=S(),w=_;return o(w.Root,{open:l,onOpenChange:u,children:s(w.Portal,{container:C,children:[o(w.Backdrop,{"data-slot":`base-dialog-backdrop`,className:i(r.backdrop,y?.backdrop)}),s(w.Popup,{"data-variant":h,"data-slot":`base-dialog-popup`,className:i(r.popup,y?.popup),children:[o(w.Title,{render:o(t,{variant:`h5`,children:d})}),f&&o(w.Description,{render:o(t,{variant:`body1`,children:f})}),s(`div`,{"data-slot":`base-dialog-actions`,className:i(r.actions,y?.actions),children:[o(w.Close,{render:o(e,{variant:`ghost`,color:`neutral`,text:m}),onClick:x}),o(w.Close,{render:o(e,{variant:`filled`,color:h,text:p}),onClick:b})]})]})]})})};export{c as BaseDialog};
+//# sourceMappingURL=base-dialog.js.map