@mdigital_ui/ui 0.2.0 → 0.2.2

package/README.md

@@ -19,45 +19,42 @@ Modern React component library built with Tailwind CSS v4, designed for multi-br
 npm install @mdigital_ui/ui
 ```
 
-**That's it!** All dependencies are included. Tree-shaking ensures only the components you import end up in your production bundle.
+**That's it!** All dependencies and styles are included. Tree-shaking ensures only the components you import end up in your production bundle.
 
 ### Peer Dependencies
 
 You need to have these in your project:
 
 ```bash
-npm install react react-dom tailwindcss
+npm install react react-dom
 ```
 
 ## Quick Start
 
-### 1. Configure Tailwind
+### 1. Import Styles
 
-Add the package path to your `tailwind.config.js`:
+In your main application entry point (e.g., `app/layout.tsx` or `src/main.tsx`):
 
-```javascript
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@mdigital/ui/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-}
+```tsx
+// Import the base styles
+import '@mdigital_ui/ui/styles/base.css'
+// Import light theme (default)
+import '@mdigital_ui/ui/styles/themes/light.css'
+// Optional: Import dark theme for dark mode support
+import '@mdigital_ui/ui/styles/themes/dark.css'
 ```
 
-### 2. Import Styles
-
-In your main CSS file or layout:
+**Or** import in your CSS file:
 
 ```css
 /* app/globals.css or src/index.css */
-@import '@mdigital/ui/styles/base.css';
-@import '@mdigital/ui/styles/themes/light.css';
-
+@import '@mdigital_ui/ui/styles/base.css';
+@import '@mdigital_ui/ui/styles/themes/light.css';
 /* Optional: Dark mode */
-@import '@mdigital/ui/styles/themes/dark.css';
+@import '@mdigital_ui/ui/styles/themes/dark.css';
 ```
 
-### 3. Use Components
+### 2. Use Components
 
 ```tsx
 import { Button, Input, Card } from '@mdigital/ui'
@@ -103,24 +100,225 @@ Both import styles work identically. Use whichever you prefer.
 import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
 ```
 
-## Theming
+## Theming & Customization
+
+The UI Kit uses **CSS custom properties (variables)** for all design tokens, making it easy to customize without touching Tailwind's configuration.
 
-### CSS Variable Overrides
+### Quick Customization
 
-Customize the design system by overriding CSS variables:
+Create a CSS file to override any design tokens:
 
 ```css
+/* app/theme.css or src/theme.css */
 :root {
-  /* Brand colors */
-  --color-primary: oklch(0.55 0.22 270);
-  --color-accent: oklch(0.75 0.18 45);
+  /* Brand Colors */
+  --color-primary: oklch(0.55 0.22 270);        /* Purple primary */
+  --color-primary-hover: oklch(0.50 0.24 270);
+  --color-accent: oklch(0.75 0.18 45);          /* Orange accent */
+
+  /* Semantic Colors */
+  --color-success: oklch(0.65 0.20 140);
+  --color-error: oklch(0.60 0.25 20);
 
-  /* Component sizes */
+  /* Component Sizing */
   --button-height-md: 2.5rem;
   --input-height-md: 2.5rem;
-
-  /* Border radius */
   --radius-md: 0.5rem;
+
+  /* Typography */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --text-base: 1rem;
+}
+```
+
+Then import it **after** the UI Kit styles:
+
+```tsx
+import '@mdigital_ui/ui/styles/base.css'
+import '@mdigital_ui/ui/styles/themes/light.css'
+import './theme.css'  // Your customizations
+```
+
+### Available Variables
+
+<details>
+<summary><strong>🎨 Colors (Click to expand)</strong></summary>
+
+```css
+/* Brand Colors */
+--color-primary
+--color-primary-hover
+--color-primary-active
+--color-primary-foreground
+--color-secondary
+--color-secondary-hover
+--color-secondary-active
+--color-secondary-foreground
+--color-accent
+--color-accent-hover
+--color-accent-active
+--color-accent-foreground
+
+/* Semantic Colors */
+--color-success
+--color-success-hover
+--color-success-active
+--color-error
+--color-error-hover
+--color-error-active
+--color-warning
+--color-warning-hover
+--color-warning-active
+--color-info
+--color-info-hover
+--color-info-active
+
+/* Backgrounds & Surfaces */
+--color-background
+--color-background-secondary
+--color-surface
+--color-border
+--color-border-primary
+
+/* Text Colors */
+--color-text-primary
+--color-text-secondary
+--color-text-muted
+
+/* Grayscale */
+--color-gray-50 through --color-gray-950
+--color-white
+--color-black
+```
+</details>
+
+<details>
+<summary><strong>📐 Sizing & Spacing (Click to expand)</strong></summary>
+
+```css
+/* Button Sizes */
+--button-height-xs: 1.75rem
+--button-height-sm: 2rem
+--button-height-md: 2.25rem
+--button-height-lg: 2.75rem
+--button-padding-x-xs: 0.5rem
+--button-padding-x-sm: 0.75rem
+--button-padding-x-md: 0.875rem
+--button-padding-x-lg: 1.25rem
+
+/* Input Sizes */
+--input-height-xs: 1.75rem
+--input-height-sm: 2rem
+--input-height-md: 2.25rem
+--input-height-lg: 2.75rem
+--input-padding-x-xs through --input-padding-x-lg
+
+/* Select Sizes */
+--select-height-xs through --select-height-lg
+--select-padding-x-xs through --select-padding-x-lg
+
+/* Checkbox/Radio Sizes */
+--checkbox-size-xs: 0.875rem
+--checkbox-size-sm: 1rem
+--checkbox-size-md: 1.125rem
+--checkbox-size-lg: 1.375rem
+
+/* Switch Sizes */
+--switch-width-xs through --switch-width-lg
+--switch-height-xs through --switch-height-lg
+
+/* Spacing Scale */
+--spacing-0 through --spacing-12
+```
+</details>
+
+<details>
+<summary><strong>✏️ Typography (Click to expand)</strong></summary>
+
+```css
+/* Font Families */
+--font-sans: ui-sans-serif, system-ui, sans-serif
+--font-mono: ui-monospace, 'SF Mono', monospace
+
+/* Font Sizes */
+--text-xs: 0.75rem
+--text-sm: 0.875rem
+--text-base: 0.9rem
+--text-lg: 1.125rem
+
+/* Font Weights */
+--font-weight-normal: 400
+--font-weight-medium: 500
+--font-weight-semibold: 600
+--font-weight-bold: 700
+
+/* Label Sizes */
+--label-font-size-xs through --label-font-size-lg
+```
+</details>
+
+<details>
+<summary><strong>🎭 Effects & Decoration (Click to expand)</strong></summary>
+
+```css
+/* Border Radius */
+--radius-none: 0px
+--radius-sm: 0.25rem
+--radius-md: 0.375rem
+--radius-lg: 0.5rem
+--radius-xl: 0.625rem
+--radius-2xl: 0.75rem
+--radius-3xl: 1rem
+--radius-full: 9999px
+
+/* Shadows */
+--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
+--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1)
+--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1)
+--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1)
+--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25)
+
+/* Transitions */
+--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1)
+--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1)
+--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1)
+
+/* Z-Index Layers */
+--z-dropdown: 1000
+--z-sticky: 1020
+--z-modal: 1040
+--z-popover: 1050
+--z-tooltip: 1060
+```
+</details>
+
+### Example: Custom Brand Theme
+
+See [`examples/custom-theme.css`](./examples/custom-theme.css) for a complete template with all available variables and comments.
+
+Quick example:
+
+```css
+/* brand-theme.css */
+:root {
+  /* Acme Corp Brand Colors */
+  --color-primary: oklch(0.60 0.20 200);        /* Acme Blue */
+  --color-primary-hover: oklch(0.55 0.22 200);
+  --color-secondary: oklch(0.55 0.15 320);      /* Acme Purple */
+  --color-accent: oklch(0.75 0.18 160);         /* Acme Green */
+
+  /* Rounded Everything */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+
+  /* Larger Buttons */
+  --button-height-sm: 2.25rem;
+  --button-height-md: 2.75rem;
+  --button-height-lg: 3.25rem;
+
+  /* Custom Font */
+  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
 }
 ```
 

package/dist/index.js

@@ -3,24 +3,24 @@ export { Transfer } from './chunk-EYTOKUBM.js';
 export { tree_select_default as TreeSelect } from './chunk-JZCHZ4B3.js';
 export { tree_default as Tree } from './chunk-SAVE5ACL.js';
 export { upload_default as Upload } from './chunk-I5ANSIDK.js';
-export { slider_default as Slider } from './chunk-NNSS366W.js';
+export { select_default as Select } from './chunk-CLLQDCDR.js';
 export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
 export { switch_default as Switch } from './chunk-AOITJRSV.js';
+export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
 export { table_default as Table } from './chunk-L3SP7GHC.js';
 export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
-export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
 export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
 export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
-export { progress_default as Progress } from './chunk-RQBXZKTH.js';
 export { radio_default as Radio } from './chunk-KTBPIEP2.js';
+export { progress_default as Progress } from './chunk-RQBXZKTH.js';
 export { radio_group_default as RadioGroup } from './chunk-DOKTHDG3.js';
 export { rating_default as Rating } from './chunk-FYHQDFKE.js';
 export { ribbon_default as Ribbon } from './chunk-C7SXY3ZV.js';
-export { select_default as Select } from './chunk-CLLQDCDR.js';
 export { skeleton_default as Skeleton } from './chunk-75XESYGN.js';
+export { slider_default as Slider } from './chunk-NNSS366W.js';
 export { input_group_default as InputGroup } from './chunk-KBCBVH7B.js';
-export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
 export { input_password_default as InputPassword } from './chunk-E2CYDDYC.js';
+export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
 export { kbd_default as Kbd } from './chunk-OQANRZPV.js';
 export { multi_select_default as MultiSelect } from './chunk-W7BQYIXF.js';
 export { notification_default as Notification } from './chunk-YZVSDRJD.js';
@@ -30,8 +30,8 @@ export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
 export { empty_default as Empty } from './chunk-ROR4E6IE.js';
 export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
 export { grid_default as Grid } from './chunk-7PKVBUGL.js';
-export { image_default as Image } from './chunk-XMAH5PDW.js';
 export { input_default as Input } from './chunk-2JGAYDZR.js';
+export { image_default as Image } from './chunk-XMAH5PDW.js';
 export { cascader_default as Cascader } from './chunk-SERJ3TZE.js';
 export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
 export { checkbox_default as Checkbox } from './chunk-H2HIBD5Y.js';
@@ -41,16 +41,16 @@ export { collapse_default as Collapse } from './chunk-SOV4PE3P.js';
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-4P5EMRFI.js';
 export { modal_default as Modal } from './chunk-5VCGW53O.js';
 export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-52M2PO3O.js';
-export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
 export { badge_default as Badge } from './chunk-FTJOSVTY.js';
+export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
 export { breadcrumbs_default as Breadcrumbs } from './chunk-HUVXKOJC.js';
 export { dropdown_default as Dropdown } from './chunk-KNQ7UQ2W.js';
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-3PFA3YG6.js';
+export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
+export { card_default as Card } from './chunk-XOBGEMQY.js';
 export { button_default as Button } from './chunk-LBJG2UWT.js';
 export { spinner_default as Spinner } from './chunk-J3G5WWGR.js';
 export { buttonColors, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, textColorVariants } from './chunk-5UEWVFF6.js';
-export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
-export { card_default as Card } from './chunk-XOBGEMQY.js';
 export { cn, getValidationStatus, iconSizes } from './chunk-YNNAOXU5.js';
 export { carousel_default as Carousel } from './chunk-C3MX5EXL.js';
 //# sourceMappingURL=index.js.map