@tosui/react 0.1.3 → 0.1.5

package/README.md

@@ -1,73 +1,119 @@
-# React + TypeScript + Vite
+# @tosui/react
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A themable, orderly, simple UI component library for React. 40 components with CSS Modules styling, responsive props, TypeScript-first types, and constraint-driven design.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @tosui/react
+# or
+pnpm add @tosui/react
+```
+
+## Setup
+
+```tsx
+// Import base styles in your entry point (required)
+import "@tosui/react/styles.css";
+
+// Optionally import IBM Plex fonts
+import "@tosui/react/fonts.css";
+```
+
+## Usage
+
+```tsx
+import { Box, Text, Heading, Button } from "@tosui/react";
+
+function App() {
+  return (
+    <Box p={6}>
+      <Heading size="3xl" weight="semibold">
+        Welcome
+      </Heading>
+      <Text color="foreground-muted">
+        A constraint-driven design system for React
+      </Text>
+      <Button>Get Started</Button>
+    </Box>
+  );
+}
+```
+
+## Components
+
+| Category | Components |
+|----------|------------|
+| **Primitives** | Box, Text, Heading |
+| **Layout** | Stack, HStack, VStack, Flex, Grid, Container, Divider, Spacer |
+| **Forms** | Button, IconButton, Input, Select, Textarea, Checkbox, Radio, Switch, FormField, Label |
+| **Navigation** | Link, Tabs, Breadcrumb, Menu, Pagination |
+| **Feedback** | Alert, Badge, Progress, Skeleton, Spinner |
+| **Data Display** | Avatar, Card, Image, List, Code |
+| **Overlays** | Modal, Tooltip, Popover, Accordion |
+
+## Key Concepts
+
+### Spacing
 
-## React Compiler
+4px base unit with multipliers 0–32:
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+```tsx
+<Box p={4} />        // 16px padding
+<Box m={8} />        // 32px margin
+<Box gap={2} />      // 8px gap
+```
+
+### Responsive Props
 
-## Expanding the ESLint configuration
+Mobile-first breakpoints — `base` (0), `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px):
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+```tsx
+<Box p={{ base: 2, md: 4, lg: 6 }} />
+<Box display={{ base: "none", md: "block" }} />
+```
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### Color Tokens
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+Semantic names that adapt to light/dark mode:
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```tsx
+<Box bg="surface" color="foreground" />
+<Box bg="primary-default" color="foreground-inverted" />
+<Text color="foreground-muted">Secondary text</Text>
+<Box bg="error-subtle" color="error-default">Error message</Box>
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+**Surface & Text**: `foreground`, `foreground-muted`, `foreground-subtle`, `foreground-inverted`, `background`, `surface`
+**Border**: `border`, `border-muted`
+**Brand**: `primary-default`, `primary-emphasis`, `primary-subtle`, `accent-default`, `accent-emphasis`, `accent-subtle`
+**Feedback**: `success-*`, `warning-*`, `error-*`, `info-*` (each with `-default`, `-emphasis`, `-subtle`)
+
+### Polymorphic Components
+
+```tsx
+<Box as="section" />
+<Text as="label" />
+<Heading as="h1" />
+<Button as="a" href="/signup">Sign Up</Button>
 ```
+
+### Theming
+
+Override CSS variables to customize:
+
+```css
+:root {
+  --t-light-primary-default: #your-brand-color;
+  --t-dark-primary-default: #your-dark-brand-color;
+  --t-spacing-unit: 8px;
+}
+```
+
+## Documentation
+
+Full documentation with interactive examples: [https://dgca.github.io/tosui/](https://dgca.github.io/tosui/)
+
+## License
+
+MIT

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA+DF;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAe,EACf,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE,UAAU,2CA4DZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,gDAAgD;IAChD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA+DF;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAe,EACf,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE,UAAU,2CA4DZ"}

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { HStack } from \"@/components/HStack/HStack\";\nimport { VStack } from \"@/components/VStack/VStack\";\nimport styles from \"./alert.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AlertStatus = \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport type AlertProps = {\n  /** Status determines colors and default icon */\n  status?: AlertStatus;\n  /** Optional title displayed above description */\n  title?: ReactNode;\n  /** Description content */\n  children?: ReactNode;\n  /** Custom icon (overrides default per-status icon) */\n  icon?: ReactNode;\n  /** Callback when close button is clicked (omit to hide close button) */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Default icons per status (simple SVG)\n// ============================================================================\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n  success: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  error: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  info: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n};\n\n// ============================================================================\n// Close button icon\n// ============================================================================\n\nconst CloseIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Alert - Status notification banner\n *\n * A contextual feedback component that provides:\n * - Four status variants: success, warning, error, info\n * - Optional title and description\n * - Default icons per status (customizable)\n * - Optional close button\n * - Accessible with role=\"alert\"\n */\nexport function Alert({\n  status = \"info\",\n  title,\n  children,\n  icon,\n  onClose,\n  className,\n}: AlertProps) {\n  const displayIcon = icon ?? defaultIcons[status];\n\n  return (\n    <Box\n      role=\"alert\"\n      p={4}\n      rounded=\"md\"\n      bg={`${status}-subtle` as any}\n      className={clsx(styles.alert, styles[status], className)}\n    >\n      <HStack gap={3} align=\"start\">\n        {/* Icon */}\n        <Box\n          as=\"span\"\n          display=\"inline-flex\"\n          alignItems=\"center\"\n          flexShrink={0}\n          color={status as any}\n          aria-hidden=\"true\"\n        >\n          {displayIcon}\n        </Box>\n\n        {/* Content */}\n        <VStack gap={1} flexGrow={1}>\n          {title && (\n            <Box as=\"span\" fontWeight=\"semibold\" color=\"foreground\">\n              {title}\n            </Box>\n          )}\n          {children && (\n            <Box as=\"span\" color=\"foreground-muted\" fontSize=\"sm\">\n              {children}\n            </Box>\n          )}\n        </VStack>\n\n        {/* Close button */}\n        {onClose && (\n          <Box\n            as=\"button\"\n            display=\"inline-flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            p={1}\n            rounded=\"sm\"\n            bg=\"transparent\"\n            color=\"foreground-muted\"\n            cursor=\"pointer\"\n            className={styles.closeButton}\n            onClick={onClose}\n            aria-label=\"Dismiss\"\n          >\n            {CloseIcon}\n          </Box>\n        )}\n      </HStack>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgCA,MAAM,eAA+C;AAAA,EACnD,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,OACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,MACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,EACX,CACF;AAEJ;AAMA,MAAM,YACJ,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAS;AAAA,IACT,GAAE;AAAA,IACF,UAAS;AAAA,EAAA;AACX,GACF;AAiBK,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,QAAQ,aAAa,MAAM;AAE/C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAG;AAAA,MACH,SAAQ;AAAA,MACR,IAAI,GAAG,MAAM;AAAA,MACb,WAAW,KAAK,OAAO,OAAO,OAAO,MAAM,GAAG,SAAS;AAAA,MAEvD,UAAA,qBAAC,QAAA,EAAO,KAAK,GAAG,OAAM,SAEpB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,eAAY;AAAA,YAEX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,qBAAC,QAAA,EAAO,KAAK,GAAG,UAAU,GACvB,UAAA;AAAA,UAAA,SACC,oBAAC,OAAI,IAAG,QAAO,YAAW,YAAW,OAAM,cACxC,UAAA,MAAA,CACH;AAAA,UAED,gCACE,KAAA,EAAI,IAAG,QAAO,OAAM,oBAAmB,UAAS,MAC9C,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAGC,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,GAAG;AAAA,YACH,SAAQ;AAAA,YACR,IAAG;AAAA,YACH,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,cAAW;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport type { BackgroundColorValue, ColorValue } from \"@/components/Box/colors/colors\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { HStack } from \"@/components/HStack/HStack\";\nimport { VStack } from \"@/components/VStack/VStack\";\nimport styles from \"./alert.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AlertStatus = \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport type AlertProps = {\n  /** Status determines colors and default icon */\n  status?: AlertStatus;\n  /** Optional title displayed above description */\n  title?: ReactNode;\n  /** Description content */\n  children?: ReactNode;\n  /** Custom icon (overrides default per-status icon) */\n  icon?: ReactNode;\n  /** Callback when close button is clicked (omit to hide close button) */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Default icons per status (simple SVG)\n// ============================================================================\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n  success: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  error: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  info: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n};\n\n// ============================================================================\n// Close button icon\n// ============================================================================\n\nconst CloseIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Alert - Status notification banner\n *\n * A contextual feedback component that provides:\n * - Four status variants: success, warning, error, info\n * - Optional title and description\n * - Default icons per status (customizable)\n * - Optional close button\n * - Accessible with role=\"alert\"\n */\nexport function Alert({\n  status = \"info\",\n  title,\n  children,\n  icon,\n  onClose,\n  className,\n}: AlertProps) {\n  const displayIcon = icon ?? defaultIcons[status];\n\n  return (\n    <Box\n      role=\"alert\"\n      p={4}\n      rounded=\"md\"\n      bg={`${status}-subtle` as BackgroundColorValue}\n      className={clsx(styles.alert, styles[status], className)}\n    >\n      <HStack gap={3} align=\"start\">\n        {/* Icon */}\n        <Box\n          as=\"span\"\n          display=\"inline-flex\"\n          alignItems=\"center\"\n          flexShrink={0}\n          color={status as ColorValue}\n          aria-hidden=\"true\"\n        >\n          {displayIcon}\n        </Box>\n\n        {/* Content */}\n        <VStack gap={1} flexGrow={1}>\n          {title && (\n            <Box as=\"span\" fontWeight=\"semibold\" color=\"foreground\">\n              {title}\n            </Box>\n          )}\n          {children && (\n            <Box as=\"span\" color=\"foreground-muted\" fontSize=\"sm\">\n              {children}\n            </Box>\n          )}\n        </VStack>\n\n        {/* Close button */}\n        {onClose && (\n          <Box\n            as=\"button\"\n            display=\"inline-flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            p={1}\n            rounded=\"sm\"\n            bg=\"transparent\"\n            color=\"foreground-muted\"\n            cursor=\"pointer\"\n            className={styles.closeButton}\n            onClick={onClose}\n            aria-label=\"Dismiss\"\n          >\n            {CloseIcon}\n          </Box>\n        )}\n      </HStack>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAiCA,MAAM,eAA+C;AAAA,EACnD,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,OACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,MACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,EACX,CACF;AAEJ;AAMA,MAAM,YACJ,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAS;AAAA,IACT,GAAE;AAAA,IACF,UAAS;AAAA,EAAA;AACX,GACF;AAiBK,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,QAAQ,aAAa,MAAM;AAE/C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAG;AAAA,MACH,SAAQ;AAAA,MACR,IAAI,GAAG,MAAM;AAAA,MACb,WAAW,KAAK,OAAO,OAAO,OAAO,MAAM,GAAG,SAAS;AAAA,MAEvD,UAAA,qBAAC,QAAA,EAAO,KAAK,GAAG,OAAM,SAEpB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,eAAY;AAAA,YAEX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,qBAAC,QAAA,EAAO,KAAK,GAAG,UAAU,GACvB,UAAA;AAAA,UAAA,SACC,oBAAC,OAAI,IAAG,QAAO,YAAW,YAAW,OAAM,cACxC,UAAA,MAAA,CACH;AAAA,UAED,gCACE,KAAA,EAAI,IAAG,QAAO,OAAM,oBAAmB,UAAS,MAC9C,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAGC,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,GAAG;AAAA,YACH,SAAQ;AAAA,YACR,IAAG;AAAA,YACH,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,cAAW;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACvB,mBAAmB;IACnB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuDF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,WAAoB,EACpB,OAAkB,EAClB,IAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,2CAuBZ"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACvB,mBAAmB;IACnB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuDF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,WAAoB,EACpB,OAAkB,EAClB,IAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,UAAU,2CAuBZ"}

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./badge.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BadgeColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"gray\";\n\nexport type BadgeVariant = \"solid\" | \"subtle\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport type BadgeProps = {\n  /** Color scheme */\n  colorScheme?: BadgeColorScheme;\n  /** Visual variant */\n  variant?: BadgeVariant;\n  /** Size */\n  size?: BadgeSize;\n  /** Badge content */\n  children?: ReactNode;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { fontSize: \"xs\", px: 1.5, py: 0.5 },\n  md: { fontSize: \"sm\", px: 2, py: 0.5 },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n};\n\nfunction getColorConfig(\n  variant: BadgeVariant,\n  colorScheme: BadgeColorScheme\n): ColorConfig {\n  // Handle \"gray\" colorScheme specially since it uses different token names\n  if (colorScheme === \"gray\") {\n    if (variant === \"solid\") {\n      return {\n        bg: \"foreground\",\n        color: \"foreground-inverted\",\n      };\n    }\n    return {\n      bg: \"surface\",\n      color: \"foreground-muted\",\n    };\n  }\n\n  if (variant === \"solid\") {\n    return {\n      bg: `${colorScheme}-default`,\n      color: \"foreground-inverted\",\n    };\n  }\n\n  return {\n    bg: `${colorScheme}-subtle`,\n    color: colorScheme,\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Badge - Small status indicator\n *\n * A compact label component for displaying:\n * - Counts and numbers\n * - Status indicators\n * - Categories and tags\n *\n * Features:\n * - 7 color schemes: primary, accent, success, warning, error, info, gray\n * - 2 variants: solid (bold) and subtle (muted)\n * - 2 sizes: sm and md\n * - Pill shape (fully rounded)\n */\nexport function Badge({\n  colorScheme = \"gray\",\n  variant = \"subtle\",\n  size = \"md\",\n  children,\n  className,\n}: BadgeProps) {\n  const colorConfig = getColorConfig(variant, colorScheme);\n  const sizeProps = sizeConfig[size];\n\n  return (\n    <Box\n      as=\"span\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      px={sizeProps.px}\n      py={sizeProps.py}\n      fontSize={sizeProps.fontSize}\n      fontWeight=\"medium\"\n      lineHeight=\"tight\"\n      rounded=\"full\"\n      bg={colorConfig.bg as any}\n      color={colorConfig.color as any}\n      className={clsx(styles.badge, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAsCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,UAAU,MAAM,IAAI,KAAK,IAAI,IAAA;AAAA,EACnC,IAAI,EAAE,UAAU,MAAM,IAAI,GAAG,IAAI,IAAA;AACnC;AAWA,SAAS,eACP,SACA,aACa;AAEb,MAAI,gBAAgB,QAAQ;AAC1B,QAAI,YAAY,SAAS;AACvB,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AACA,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,MACL,IAAI,GAAG,WAAW;AAAA,MAClB,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,SAAO;AAAA,IACL,IAAI,GAAG,WAAW;AAAA,IAClB,OAAO;AAAA,EAAA;AAEX;AAoBO,SAAS,MAAM;AAAA,EACpB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,eAAe,SAAS,WAAW;AACvD,QAAM,YAAY,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,IAAI,UAAU;AAAA,MACd,IAAI,UAAU;AAAA,MACd,UAAU,UAAU;AAAA,MACpB,YAAW;AAAA,MACX,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,IAAI,YAAY;AAAA,MAChB,OAAO,YAAY;AAAA,MACnB,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MAEtC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport type { BackgroundColorValue, ColorValue } from \"@/components/Box/colors/colors\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./badge.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BadgeColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"gray\";\n\nexport type BadgeVariant = \"solid\" | \"subtle\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport type BadgeProps = {\n  /** Color scheme */\n  colorScheme?: BadgeColorScheme;\n  /** Visual variant */\n  variant?: BadgeVariant;\n  /** Size */\n  size?: BadgeSize;\n  /** Badge content */\n  children?: ReactNode;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { fontSize: \"xs\", px: 1.5, py: 0.5 },\n  md: { fontSize: \"sm\", px: 2, py: 0.5 },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n};\n\nfunction getColorConfig(\n  variant: BadgeVariant,\n  colorScheme: BadgeColorScheme\n): ColorConfig {\n  // Handle \"gray\" colorScheme specially since it uses different token names\n  if (colorScheme === \"gray\") {\n    if (variant === \"solid\") {\n      return {\n        bg: \"foreground\",\n        color: \"foreground-inverted\",\n      };\n    }\n    return {\n      bg: \"surface\",\n      color: \"foreground-muted\",\n    };\n  }\n\n  if (variant === \"solid\") {\n    return {\n      bg: `${colorScheme}-default`,\n      color: \"foreground-inverted\",\n    };\n  }\n\n  return {\n    bg: `${colorScheme}-subtle`,\n    color: colorScheme,\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Badge - Small status indicator\n *\n * A compact label component for displaying:\n * - Counts and numbers\n * - Status indicators\n * - Categories and tags\n *\n * Features:\n * - 7 color schemes: primary, accent, success, warning, error, info, gray\n * - 2 variants: solid (bold) and subtle (muted)\n * - 2 sizes: sm and md\n * - Pill shape (fully rounded)\n */\nexport function Badge({\n  colorScheme = \"gray\",\n  variant = \"subtle\",\n  size = \"md\",\n  children,\n  className,\n}: BadgeProps) {\n  const colorConfig = getColorConfig(variant, colorScheme);\n  const sizeProps = sizeConfig[size];\n\n  return (\n    <Box\n      as=\"span\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      px={sizeProps.px}\n      py={sizeProps.py}\n      fontSize={sizeProps.fontSize}\n      fontWeight=\"medium\"\n      lineHeight=\"tight\"\n      rounded=\"full\"\n      bg={colorConfig.bg as BackgroundColorValue}\n      color={colorConfig.color as ColorValue}\n      className={clsx(styles.badge, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,UAAU,MAAM,IAAI,KAAK,IAAI,IAAA;AAAA,EACnC,IAAI,EAAE,UAAU,MAAM,IAAI,GAAG,IAAI,IAAA;AACnC;AAWA,SAAS,eACP,SACA,aACa;AAEb,MAAI,gBAAgB,QAAQ;AAC1B,QAAI,YAAY,SAAS;AACvB,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AACA,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,MACL,IAAI,GAAG,WAAW;AAAA,MAClB,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,SAAO;AAAA,IACL,IAAI,GAAG,WAAW;AAAA,IAClB,OAAO;AAAA,EAAA;AAEX;AAoBO,SAAS,MAAM;AAAA,EACpB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,eAAe,SAAS,WAAW;AACvD,QAAM,YAAY,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,IAAI,UAAU;AAAA,MACd,IAAI,UAAU;AAAA,MACd,UAAU,UAAU;AAAA,MACpB,YAAW;AAAA,MACX,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,IAAI,YAAY;AAAA,MAChB,OAAO,YAAY;AAAA,MACnB,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MAEtC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Box/Box.d.ts

@@ -1,5 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 import { Polymorphic } from '../../types/Polymorphic';
+import { StateProps } from './shared';
 import { MarginProps } from './margin/margin';
 import { PaddingProps } from './padding/padding';
 import { SizingProps } from './sizing/sizing';
@@ -19,13 +20,7 @@ import { RoundnessProps } from './roundness/roundness';
 import { FlexboxProps } from './flexbox/flexbox';
 import { GridProps } from './grid/grid';
 type StateStyleProps = MarginProps & PaddingProps & SizingProps & InsetProps & DisplayProps & PositionProps & OverflowProps & ZIndexProps & ShadowProps & OpacityProps & InteractionProps & TextStyleProps & TypographyProps & ColorProps & BorderProps & RoundnessProps & FlexboxProps & GridProps;
-type StateProps = {
-    _hover?: StateStyleProps;
-    _focus?: StateStyleProps;
-    _active?: StateStyleProps;
-    _disabled?: StateStyleProps;
-};
-export type BoxOwnProps = MarginProps & PaddingProps & SizingProps & InsetProps & DisplayProps & PositionProps & OverflowProps & ZIndexProps & ShadowProps & OpacityProps & InteractionProps & TextStyleProps & TypographyProps & ColorProps & BorderProps & RoundnessProps & FlexboxProps & GridProps & StateProps & {
+export type BoxOwnProps = MarginProps & PaddingProps & SizingProps & InsetProps & DisplayProps & PositionProps & OverflowProps & ZIndexProps & ShadowProps & OpacityProps & InteractionProps & TextStyleProps & TypographyProps & ColorProps & BorderProps & RoundnessProps & FlexboxProps & GridProps & StateProps<StateStyleProps> & {
     className?: string;
     children?: ReactNode;
 };

package/dist/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"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"}

package/dist/components/Box/Box.js

@@ -151,7 +151,7 @@ function Box({
     getOpacityStyles({ opacity, ...stateProps }),
     getInteractionStyles({ cursor, pointerEvents, userSelect, ...stateProps }),
     getTextStyles({ textAlign, whiteSpace, textDecoration, ...stateProps }),
-    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight }),
+    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight, ...stateProps }),
     getColorStyles({ color, bg, borderColor, ...stateProps }),
     getBorderStyles({
       border,

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import { type ElementType, type ReactNode, type CSSProperties } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { clsx } from \"clsx\";\nimport { resetClass } from \"./reset/reset\";\nimport { getMarginStyles, type MarginProps } from \"./margin/margin\";\nimport { getPaddingStyles, type PaddingProps } from \"./padding/padding\";\nimport { getSizingStyles, type SizingProps } from \"./sizing/sizing\";\nimport { getInsetStyles, type InsetProps } from \"./inset/inset\";\nimport { getDisplayStyles, type DisplayProps } from \"./display/display\";\nimport { getPositionStyles, type PositionProps } from \"./position/position\";\nimport { getOverflowStyles, type OverflowProps } from \"./overflow/overflow\";\nimport { getZIndexStyles, type ZIndexProps } from \"./zIndex/zIndex\";\nimport { getShadowStyles, type ShadowProps } from \"./shadows/shadows\";\nimport { getOpacityStyles, type OpacityProps } from \"./opacity/opacity\";\nimport {\n  getInteractionStyles,\n  type InteractionProps,\n} from \"./interactions/interactions\";\nimport { getTextStyles, type TextStyleProps } from \"./text/text\";\nimport {\n  getTypographyStyles,\n  type TypographyProps,\n} from \"./typography/typography\";\nimport { getColorStyles, type ColorProps } from \"./colors/colors\";\nimport { getBorderStyles, type BorderProps } from \"./borders/borders\";\nimport { getRoundnessStyles, type RoundnessProps } from \"./roundness/roundness\";\nimport { getFlexboxStyles, type FlexboxProps } from \"./flexbox/flexbox\";\nimport { getGridStyles, type GridProps } from \"./grid/grid\";\n\n// Combined state props for all style parts\ntype StateStyleProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps;\n\ntype StateProps = {\n  _hover?: StateStyleProps;\n  _focus?: StateStyleProps;\n  _active?: StateStyleProps;\n  _disabled?: StateStyleProps;\n};\n\nexport type BoxOwnProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps &\n  StateProps & {\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport type BoxProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  BoxOwnProps\n>;\n\n// Helper to combine multiple style results\ntype StyleResult = {\n  className?: string;\n  style?: CSSProperties;\n};\n\nfunction combineStyles(...results: StyleResult[]): StyleResult {\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function Box<T extends ElementType = \"div\">({\n  as,\n  children,\n  className,\n  style,\n  // Margin props\n  m,\n  mt,\n  mr,\n  mb,\n  ml,\n  mx,\n  my,\n  // Padding props\n  p,\n  pt,\n  pr,\n  pb,\n  pl,\n  px,\n  py,\n  // Sizing props\n  w,\n  h,\n  minW,\n  maxW,\n  minH,\n  maxH,\n  // Inset props\n  inset,\n  insetX,\n  insetY,\n  top,\n  right,\n  bottom,\n  left,\n  // Display props\n  display,\n  // Position props\n  position,\n  // Overflow props\n  overflow,\n  overflowX,\n  overflowY,\n  // ZIndex props\n  zIndex,\n  // Shadow props\n  shadow,\n  // Opacity props\n  opacity,\n  // Interaction props\n  cursor,\n  pointerEvents,\n  userSelect,\n  // Text style props\n  textAlign,\n  whiteSpace,\n  textDecoration,\n  // Typography props\n  fontSize,\n  fontFamily,\n  fontWeight,\n  lineHeight,\n  // Color props\n  color,\n  bg,\n  borderColor,\n  // Border props\n  border,\n  borderX,\n  borderY,\n  borderTop,\n  borderRight,\n  borderBottom,\n  borderLeft,\n  borderStyle,\n  // Roundness props\n  rounded,\n  roundedTop,\n  roundedBottom,\n  roundedLeft,\n  roundedRight,\n  roundedTopLeft,\n  roundedTopRight,\n  roundedBottomLeft,\n  roundedBottomRight,\n  // Flexbox props\n  flexDirection,\n  justifyContent,\n  alignItems,\n  alignSelf,\n  flexWrap,\n  gap,\n  gapRow,\n  gapColumn,\n  flex,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  // Grid props\n  justifySelf,\n  gridTemplateColumns,\n  gridTemplateRows,\n  // State props\n  _hover,\n  _focus,\n  _active,\n  _disabled,\n  ...rest\n}: BoxProps<T>) {\n  const Component = as || \"div\";\n\n  const stateProps = { _hover, _focus, _active, _disabled };\n\n  const styles = combineStyles(\n    getMarginStyles({ m, mt, mr, mb, ml, mx, my, ...stateProps }),\n    getPaddingStyles({ p, pt, pr, pb, pl, px, py, ...stateProps }),\n    getSizingStyles({ w, h, minW, maxW, minH, maxH, ...stateProps }),\n    getInsetStyles({ inset, insetX, insetY, top, right, bottom, left, ...stateProps }),\n    getDisplayStyles({ display, ...stateProps }),\n    getPositionStyles({ position, ...stateProps }),\n    getOverflowStyles({ overflow, overflowX, overflowY, ...stateProps }),\n    getZIndexStyles({ zIndex, ...stateProps }),\n    getShadowStyles({ shadow, ...stateProps }),\n    getOpacityStyles({ opacity, ...stateProps }),\n    getInteractionStyles({ cursor, pointerEvents, userSelect, ...stateProps }),\n    getTextStyles({ textAlign, whiteSpace, textDecoration, ...stateProps }),\n    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight }),\n    getColorStyles({ color, bg, borderColor, ...stateProps }),\n    getBorderStyles({\n      border,\n      borderX,\n      borderY,\n      borderTop,\n      borderRight,\n      borderBottom,\n      borderLeft,\n      borderStyle,\n      ...stateProps,\n    }),\n    getRoundnessStyles({\n      rounded,\n      roundedTop,\n      roundedBottom,\n      roundedLeft,\n      roundedRight,\n      roundedTopLeft,\n      roundedTopRight,\n      roundedBottomLeft,\n      roundedBottomRight,\n      ...stateProps,\n    }),\n    getFlexboxStyles({\n      flexDirection,\n      justifyContent,\n      alignItems,\n      alignSelf,\n      flexWrap,\n      gap,\n      gapRow,\n      gapColumn,\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n      ...stateProps,\n    }),\n    getGridStyles({\n      justifySelf,\n      gridTemplateColumns,\n      gridTemplateRows,\n      ...stateProps,\n    })\n  );\n\n  return (\n    <Component\n      className={clsx(resetClass, styles.className, className)}\n      style={{\n        ...styles.style,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import { type ElementType, type ReactNode, type CSSProperties } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { clsx } from \"clsx\";\nimport { type StateProps } from \"./shared\";\nimport { resetClass } from \"./reset/reset\";\nimport { getMarginStyles, type MarginProps } from \"./margin/margin\";\nimport { getPaddingStyles, type PaddingProps } from \"./padding/padding\";\nimport { getSizingStyles, type SizingProps } from \"./sizing/sizing\";\nimport { getInsetStyles, type InsetProps } from \"./inset/inset\";\nimport { getDisplayStyles, type DisplayProps } from \"./display/display\";\nimport { getPositionStyles, type PositionProps } from \"./position/position\";\nimport { getOverflowStyles, type OverflowProps } from \"./overflow/overflow\";\nimport { getZIndexStyles, type ZIndexProps } from \"./zIndex/zIndex\";\nimport { getShadowStyles, type ShadowProps } from \"./shadows/shadows\";\nimport { getOpacityStyles, type OpacityProps } from \"./opacity/opacity\";\nimport {\n  getInteractionStyles,\n  type InteractionProps,\n} from \"./interactions/interactions\";\nimport { getTextStyles, type TextStyleProps } from \"./text/text\";\nimport {\n  getTypographyStyles,\n  type TypographyProps,\n} from \"./typography/typography\";\nimport { getColorStyles, type ColorProps } from \"./colors/colors\";\nimport { getBorderStyles, type BorderProps } from \"./borders/borders\";\nimport { getRoundnessStyles, type RoundnessProps } from \"./roundness/roundness\";\nimport { getFlexboxStyles, type FlexboxProps } from \"./flexbox/flexbox\";\nimport { getGridStyles, type GridProps } from \"./grid/grid\";\n\n// Combined state props for all style parts\ntype StateStyleProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps;\n\nexport type BoxOwnProps = MarginProps &\n  PaddingProps &\n  SizingProps &\n  InsetProps &\n  DisplayProps &\n  PositionProps &\n  OverflowProps &\n  ZIndexProps &\n  ShadowProps &\n  OpacityProps &\n  InteractionProps &\n  TextStyleProps &\n  TypographyProps &\n  ColorProps &\n  BorderProps &\n  RoundnessProps &\n  FlexboxProps &\n  GridProps &\n  StateProps<StateStyleProps> & {\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport type BoxProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  BoxOwnProps\n>;\n\n// Helper to combine multiple style results\ntype StyleResult = {\n  className?: string;\n  style?: CSSProperties;\n};\n\nfunction combineStyles(...results: StyleResult[]): StyleResult {\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function Box<T extends ElementType = \"div\">({\n  as,\n  children,\n  className,\n  style,\n  // Margin props\n  m,\n  mt,\n  mr,\n  mb,\n  ml,\n  mx,\n  my,\n  // Padding props\n  p,\n  pt,\n  pr,\n  pb,\n  pl,\n  px,\n  py,\n  // Sizing props\n  w,\n  h,\n  minW,\n  maxW,\n  minH,\n  maxH,\n  // Inset props\n  inset,\n  insetX,\n  insetY,\n  top,\n  right,\n  bottom,\n  left,\n  // Display props\n  display,\n  // Position props\n  position,\n  // Overflow props\n  overflow,\n  overflowX,\n  overflowY,\n  // ZIndex props\n  zIndex,\n  // Shadow props\n  shadow,\n  // Opacity props\n  opacity,\n  // Interaction props\n  cursor,\n  pointerEvents,\n  userSelect,\n  // Text style props\n  textAlign,\n  whiteSpace,\n  textDecoration,\n  // Typography props\n  fontSize,\n  fontFamily,\n  fontWeight,\n  lineHeight,\n  // Color props\n  color,\n  bg,\n  borderColor,\n  // Border props\n  border,\n  borderX,\n  borderY,\n  borderTop,\n  borderRight,\n  borderBottom,\n  borderLeft,\n  borderStyle,\n  // Roundness props\n  rounded,\n  roundedTop,\n  roundedBottom,\n  roundedLeft,\n  roundedRight,\n  roundedTopLeft,\n  roundedTopRight,\n  roundedBottomLeft,\n  roundedBottomRight,\n  // Flexbox props\n  flexDirection,\n  justifyContent,\n  alignItems,\n  alignSelf,\n  flexWrap,\n  gap,\n  gapRow,\n  gapColumn,\n  flex,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  // Grid props\n  justifySelf,\n  gridTemplateColumns,\n  gridTemplateRows,\n  // State props\n  _hover,\n  _focus,\n  _active,\n  _disabled,\n  ...rest\n}: BoxProps<T>) {\n  const Component = as || \"div\";\n\n  const stateProps = { _hover, _focus, _active, _disabled };\n\n  const styles = combineStyles(\n    getMarginStyles({ m, mt, mr, mb, ml, mx, my, ...stateProps }),\n    getPaddingStyles({ p, pt, pr, pb, pl, px, py, ...stateProps }),\n    getSizingStyles({ w, h, minW, maxW, minH, maxH, ...stateProps }),\n    getInsetStyles({ inset, insetX, insetY, top, right, bottom, left, ...stateProps }),\n    getDisplayStyles({ display, ...stateProps }),\n    getPositionStyles({ position, ...stateProps }),\n    getOverflowStyles({ overflow, overflowX, overflowY, ...stateProps }),\n    getZIndexStyles({ zIndex, ...stateProps }),\n    getShadowStyles({ shadow, ...stateProps }),\n    getOpacityStyles({ opacity, ...stateProps }),\n    getInteractionStyles({ cursor, pointerEvents, userSelect, ...stateProps }),\n    getTextStyles({ textAlign, whiteSpace, textDecoration, ...stateProps }),\n    getTypographyStyles({ fontSize, fontFamily, fontWeight, lineHeight, ...stateProps }),\n    getColorStyles({ color, bg, borderColor, ...stateProps }),\n    getBorderStyles({\n      border,\n      borderX,\n      borderY,\n      borderTop,\n      borderRight,\n      borderBottom,\n      borderLeft,\n      borderStyle,\n      ...stateProps,\n    }),\n    getRoundnessStyles({\n      rounded,\n      roundedTop,\n      roundedBottom,\n      roundedLeft,\n      roundedRight,\n      roundedTopLeft,\n      roundedTopRight,\n      roundedBottomLeft,\n      roundedBottomRight,\n      ...stateProps,\n    }),\n    getFlexboxStyles({\n      flexDirection,\n      justifyContent,\n      alignItems,\n      alignSelf,\n      flexWrap,\n      gap,\n      gapRow,\n      gapColumn,\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n      ...stateProps,\n    }),\n    getGridStyles({\n      justifySelf,\n      gridTemplateColumns,\n      gridTemplateRows,\n      ...stateProps,\n    })\n  );\n\n  return (\n    <Component\n      className={clsx(resetClass, styles.className, className)}\n      style={{\n        ...styles.style,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Box/borders/borders.d.ts

@@ -1,18 +1,16 @@
-import { StyleResult } from '../shared';
+import { ResponsiveValue } from '../../../utils/breakpoints';
+import { StateProps, StyleResult } from '../shared';
 export type BorderWidthValue = "none" | "thin" | "medium" | "thick";
 export type BorderStyleValue = "none" | "solid" | "dashed" | "dotted";
 export type BorderProps = {
-    border?: BorderWidthValue;
-    borderX?: BorderWidthValue;
-    borderY?: BorderWidthValue;
-    borderTop?: BorderWidthValue;
-    borderRight?: BorderWidthValue;
-    borderBottom?: BorderWidthValue;
-    borderLeft?: BorderWidthValue;
-    borderStyle?: BorderStyleValue;
+    border?: ResponsiveValue<BorderWidthValue>;
+    borderX?: ResponsiveValue<BorderWidthValue>;
+    borderY?: ResponsiveValue<BorderWidthValue>;
+    borderTop?: ResponsiveValue<BorderWidthValue>;
+    borderRight?: ResponsiveValue<BorderWidthValue>;
+    borderBottom?: ResponsiveValue<BorderWidthValue>;
+    borderLeft?: ResponsiveValue<BorderWidthValue>;
+    borderStyle?: ResponsiveValue<BorderStyleValue>;
 };
-export type BorderStateProps = {
-    _hover?: BorderProps;
-};
-export declare function getBorderStyles(props: BorderProps & BorderStateProps): StyleResult;
+export declare function getBorderStyles(props: BorderProps & StateProps<BorderProps>): StyleResult;
 //# sourceMappingURL=borders.d.ts.map

package/dist/components/Box/borders/borders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/borders/borders.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AA8FF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,gBAAgB,GACpC,WAAW,CAuBb"}
+{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/borders/borders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC/C,WAAW,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;CACjD,CAAC;AA8CF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,GAC3C,WAAW,CAmBb"}

package/dist/components/Box/borders/borders.js

@@ -1,26 +1,6 @@
-import { STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./borders.module.css.js";
 import clsx from "clsx";
-function getBorderTopClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-top-${value}${stateClassSuffix}`] : styles[`border-top-${value}`];
-}
-function getBorderRightClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-right-${value}${stateClassSuffix}`] : styles[`border-right-${value}`];
-}
-function getBorderBottomClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-bottom-${value}${stateClassSuffix}`] : styles[`border-bottom-${value}`];
-}
-function getBorderLeftClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-left-${value}${stateClassSuffix}`] : styles[`border-left-${value}`];
-}
-function getBorderStyleClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`border-style-${value}${stateClassSuffix}`] : styles[`border-style-${value}`];
-}
 function getBorderStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
   const {
@@ -33,55 +13,42 @@ function getBorderStylesForState(props, state) {
     borderLeft,
     borderStyle
   } = props;
-  const classes = [];
   const topWidth = borderTop ?? borderY ?? border;
   const rightWidth = borderRight ?? borderX ?? border;
   const bottomWidth = borderBottom ?? borderY ?? border;
   const leftWidth = borderLeft ?? borderX ?? border;
-  if (topWidth) {
-    const cls = getBorderTopClass(topWidth, state);
-    if (cls) classes.push(cls);
-  }
-  if (rightWidth) {
-    const cls = getBorderRightClass(rightWidth, state);
-    if (cls) classes.push(cls);
-  }
-  if (bottomWidth) {
-    const cls = getBorderBottomClass(bottomWidth, state);
-    if (cls) classes.push(cls);
-  }
-  if (leftWidth) {
-    const cls = getBorderLeftClass(leftWidth, state);
-    if (cls) classes.push(cls);
-  }
-  if (borderStyle) {
-    const cls = getBorderStyleClass(borderStyle, state);
-    if (cls) classes.push(cls);
-  } else if (topWidth || rightWidth || bottomWidth || leftWidth) {
-    const cls = getBorderStyleClass("solid", state);
-    if (cls) classes.push(cls);
-  }
-  return { className: clsx(...classes), style: {} };
+  const topResult = getEnumResponsiveStyles(styles, "border-top", topWidth, state);
+  const rightResult = getEnumResponsiveStyles(styles, "border-right", rightWidth, state);
+  const bottomResult = getEnumResponsiveStyles(styles, "border-bottom", bottomWidth, state);
+  const leftResult = getEnumResponsiveStyles(styles, "border-left", leftWidth, state);
+  const resolvedStyle = borderStyle ?? (topWidth || rightWidth || bottomWidth || leftWidth ? "solid" : void 0);
+  const styleResult = getEnumResponsiveStyles(styles, "border-style", resolvedStyle, state);
+  return {
+    className: clsx(
+      topResult.className,
+      rightResult.className,
+      bottomResult.className,
+      leftResult.className,
+      styleResult.className
+    ),
+    style: {}
+  };
 }
 function getBorderStyles(props) {
-  const {
-    border,
-    borderX,
-    borderY,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    borderStyle,
-    _hover
-  } = props;
-  const baseStyles = getBorderStylesForState(
-    { border, borderX, borderY, borderTop, borderRight, borderBottom, borderLeft, borderStyle },
-    "base"
-  );
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getBorderStylesForState(baseProps, "base");
   const hoverStyles = getBorderStylesForState(_hover, "hover");
+  const focusStyles = getBorderStylesForState(_focus, "focus");
+  const activeStyles = getBorderStylesForState(_active, "active");
+  const disabledStyles = getBorderStylesForState(_disabled, "disabled");
   return {
-    className: clsx(baseStyles.className, hoverStyles.className),
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
     style: {}
   };
 }

package/dist/components/Box/borders/borders.js.map

@@ -1 +1 @@
-{"version":3,"file":"borders.js","sources":["../../../../src/components/Box/borders/borders.ts"],"sourcesContent":["import {\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./borders.module.css\";\nimport clsx from \"clsx\";\n\nexport type BorderWidthValue = \"none\" | \"thin\" | \"medium\" | \"thick\";\nexport type BorderStyleValue = \"none\" | \"solid\" | \"dashed\" | \"dotted\";\n\nexport type BorderProps = {\n  border?: BorderWidthValue;\n  borderX?: BorderWidthValue;\n  borderY?: BorderWidthValue;\n  borderTop?: BorderWidthValue;\n  borderRight?: BorderWidthValue;\n  borderBottom?: BorderWidthValue;\n  borderLeft?: BorderWidthValue;\n  borderStyle?: BorderStyleValue;\n};\n\nexport type BorderStateProps = {\n  _hover?: BorderProps;\n};\n\nfunction getBorderTopClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-top-${value}${stateClassSuffix}`]\n    : styles[`border-top-${value}`];\n}\n\nfunction getBorderRightClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-right-${value}${stateClassSuffix}`]\n    : styles[`border-right-${value}`];\n}\n\nfunction getBorderBottomClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-bottom-${value}${stateClassSuffix}`]\n    : styles[`border-bottom-${value}`];\n}\n\nfunction getBorderLeftClass(value: BorderWidthValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-left-${value}${stateClassSuffix}`]\n    : styles[`border-left-${value}`];\n}\n\nfunction getBorderStyleClass(value: BorderStyleValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`border-style-${value}${stateClassSuffix}`]\n    : styles[`border-style-${value}`];\n}\n\nfunction getBorderStylesForState(\n  props: BorderProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const {\n    border,\n    borderX,\n    borderY,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderStyle,\n  } = props;\n\n  const classes: string[] = [];\n\n  // Cascading specificity: individual > axis > all\n  const topWidth = borderTop ?? borderY ?? border;\n  const rightWidth = borderRight ?? borderX ?? border;\n  const bottomWidth = borderBottom ?? borderY ?? border;\n  const leftWidth = borderLeft ?? borderX ?? border;\n\n  if (topWidth) {\n    const cls = getBorderTopClass(topWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (rightWidth) {\n    const cls = getBorderRightClass(rightWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (bottomWidth) {\n    const cls = getBorderBottomClass(bottomWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (leftWidth) {\n    const cls = getBorderLeftClass(leftWidth, state);\n    if (cls) classes.push(cls);\n  }\n\n  // Apply borderStyle, default to solid if any width is set\n  if (borderStyle) {\n    const cls = getBorderStyleClass(borderStyle, state);\n    if (cls) classes.push(cls);\n  } else if (topWidth || rightWidth || bottomWidth || leftWidth) {\n    const cls = getBorderStyleClass(\"solid\", state);\n    if (cls) classes.push(cls);\n  }\n\n  return { className: clsx(...classes), style: {} };\n}\n\nexport function getBorderStyles(\n  props: BorderProps & BorderStateProps\n): StyleResult {\n  const {\n    border,\n    borderX,\n    borderY,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderStyle,\n    _hover,\n  } = props;\n\n  const baseStyles = getBorderStylesForState(\n    { border, borderX, borderY, borderTop, borderRight, borderBottom, borderLeft, borderStyle },\n    \"base\"\n  );\n  const hoverStyles = getBorderStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AA0BA,SAAS,kBAAkB,OAAyB,OAAqC;AACvF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,cAAc,KAAK,GAAG,gBAAgB,EAAE,IAC/C,OAAO,cAAc,KAAK,EAAE;AAClC;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,qBAAqB,OAAyB,OAAqC;AAC1F,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,iBAAiB,KAAK,GAAG,gBAAgB,EAAE,IAClD,OAAO,iBAAiB,KAAK,EAAE;AACrC;AAEA,SAAS,mBAAmB,OAAyB,OAAqC;AACxF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,eAAe,KAAK,GAAG,gBAAgB,EAAE,IAChD,OAAO,eAAe,KAAK,EAAE;AACnC;AAEA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,UAAoB,CAAA;AAG1B,QAAM,WAAW,aAAa,WAAW;AACzC,QAAM,aAAa,eAAe,WAAW;AAC7C,QAAM,cAAc,gBAAgB,WAAW;AAC/C,QAAM,YAAY,cAAc,WAAW;AAE3C,MAAI,UAAU;AACZ,UAAM,MAAM,kBAAkB,UAAU,KAAK;AAC7C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,YAAY;AACd,UAAM,MAAM,oBAAoB,YAAY,KAAK;AACjD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,aAAa;AACf,UAAM,MAAM,qBAAqB,aAAa,KAAK;AACnD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,MAAI,WAAW;AACb,UAAM,MAAM,mBAAmB,WAAW,KAAK;AAC/C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAGA,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B,WAAW,YAAY,cAAc,eAAe,WAAW;AAC7D,UAAM,MAAM,oBAAoB,SAAS,KAAK;AAC9C,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,SAAO,EAAE,WAAW,KAAK,GAAG,OAAO,GAAG,OAAO,GAAC;AAChD;AAEO,SAAS,gBACd,OACa;AACb,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,aAAa;AAAA,IACjB,EAAE,QAAQ,SAAS,SAAS,WAAW,aAAa,cAAc,YAAY,YAAA;AAAA,IAC9E;AAAA,EAAA;AAEF,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAE3D,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,CAAA;AAAA,EAAC;AAEZ;"}
+{"version":3,"file":"borders.js","sources":["../../../../src/components/Box/borders/borders.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n  getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./borders.module.css\";\nimport clsx from \"clsx\";\n\nexport type BorderWidthValue = \"none\" | \"thin\" | \"medium\" | \"thick\";\nexport type BorderStyleValue = \"none\" | \"solid\" | \"dashed\" | \"dotted\";\n\nexport type BorderProps = {\n  border?: ResponsiveValue<BorderWidthValue>;\n  borderX?: ResponsiveValue<BorderWidthValue>;\n  borderY?: ResponsiveValue<BorderWidthValue>;\n  borderTop?: ResponsiveValue<BorderWidthValue>;\n  borderRight?: ResponsiveValue<BorderWidthValue>;\n  borderBottom?: ResponsiveValue<BorderWidthValue>;\n  borderLeft?: ResponsiveValue<BorderWidthValue>;\n  borderStyle?: ResponsiveValue<BorderStyleValue>;\n};\n\nfunction getBorderStylesForState(\n  props: BorderProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const {\n    border,\n    borderX,\n    borderY,\n    borderTop,\n    borderRight,\n    borderBottom,\n    borderLeft,\n    borderStyle,\n  } = props;\n\n  // Cascading specificity: individual > axis > all\n  const topWidth = borderTop ?? borderY ?? border;\n  const rightWidth = borderRight ?? borderX ?? border;\n  const bottomWidth = borderBottom ?? borderY ?? border;\n  const leftWidth = borderLeft ?? borderX ?? border;\n\n  const topResult = getEnumResponsiveStyles(styles, \"border-top\", topWidth, state);\n  const rightResult = getEnumResponsiveStyles(styles, \"border-right\", rightWidth, state);\n  const bottomResult = getEnumResponsiveStyles(styles, \"border-bottom\", bottomWidth, state);\n  const leftResult = getEnumResponsiveStyles(styles, \"border-left\", leftWidth, state);\n\n  // Apply borderStyle, default to solid if any width is set\n  const resolvedStyle = borderStyle ?? (topWidth || rightWidth || bottomWidth || leftWidth ? \"solid\" as const : undefined);\n  const styleResult = getEnumResponsiveStyles(styles, \"border-style\", resolvedStyle, state);\n\n  return {\n    className: clsx(\n      topResult.className,\n      rightResult.className,\n      bottomResult.className,\n      leftResult.className,\n      styleResult.className\n    ),\n    style: {},\n  };\n}\n\nexport function getBorderStyles(\n  props: BorderProps & StateProps<BorderProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getBorderStylesForState(baseProps, \"base\");\n  const hoverStyles = getBorderStylesForState(_hover, \"hover\");\n  const focusStyles = getBorderStylesForState(_focus, \"focus\");\n  const activeStyles = getBorderStylesForState(_active, \"active\");\n  const disabledStyles = getBorderStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AAwBA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAGJ,QAAM,WAAW,aAAa,WAAW;AACzC,QAAM,aAAa,eAAe,WAAW;AAC7C,QAAM,cAAc,gBAAgB,WAAW;AAC/C,QAAM,YAAY,cAAc,WAAW;AAE3C,QAAM,YAAY,wBAAwB,QAAQ,cAAc,UAAU,KAAK;AAC/E,QAAM,cAAc,wBAAwB,QAAQ,gBAAgB,YAAY,KAAK;AACrF,QAAM,eAAe,wBAAwB,QAAQ,iBAAiB,aAAa,KAAK;AACxF,QAAM,aAAa,wBAAwB,QAAQ,eAAe,WAAW,KAAK;AAGlF,QAAM,gBAAgB,gBAAgB,YAAY,cAAc,eAAe,YAAY,UAAmB;AAC9G,QAAM,cAAc,wBAAwB,QAAQ,gBAAgB,eAAe,KAAK;AAExF,SAAO;AAAA,IACL,WAAW;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,IAEd,OAAO,CAAA;AAAA,EAAC;AAEZ;AAEO,SAAS,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,wBAAwB,WAAW,MAAM;AAC5D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAC9D,QAAM,iBAAiB,wBAAwB,WAAW,UAAU;AAEpE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}