@slimkhemiri/react-design-system 0.1.10 → 0.1.12

package/README.md

@@ -128,12 +128,82 @@ export function SlimDesignSystemProvider({ children }: { children: React.ReactNo
 
 Currently exported:
 
-- `SlimAlert`
-- `SlimBadge`
-- `SlimButton`
-- `SlimCheckbox` (`onSlimChange` → `CustomEvent<boolean>`)
-- `SlimInput` (`onSlimChange` → `CustomEvent<string>`)
-- `SlimSelect` (`onSlimChange` → `CustomEvent<string>`)
-- `SlimSwitch` (`onSlimChange` → `CustomEvent<boolean>`)
-- `SlimTextarea` (`onSlimChange` → `CustomEvent<string>`)
+- `SlimAlert` - Info, success, warning, and danger alerts
+- `SlimBadge` - Status badges with multiple variants
+- `SlimButton` - Primary, secondary, ghost, and danger buttons with loading states
+- `SlimCheckbox` - Checkbox input (`onSlimChange` → `CustomEvent<boolean>`)
+- `SlimInput` - Text input with validation (`onSlimChange` → `CustomEvent<string>`)
+- `SlimSelect` - Dropdown select (`onSlimChange` → `CustomEvent<string>`)
+- `SlimSwitch` - Toggle switch (`onSlimChange` → `CustomEvent<boolean>`)
+- `SlimTextarea` - Multi-line text input (`onSlimChange` → `CustomEvent<string>`)
+- `SlimTooltip` - Contextual tooltip with multiple placements
+- `SlimPlaygroundSidebar` - Collapsible sidebar navigation
+
+## Design Tokens
+
+Access design tokens in JavaScript for dynamic styling:
+
+```tsx
+import { tokens } from "@slimkhemiri/tokens";
+
+// Access base (light theme) tokens
+const primaryColor = tokens.base['--sl-primary']; // "#581d74"
+const spacing = tokens.base['--sl-space-4']; // "16px"
+
+// Access theme-specific tokens
+const darkSurface = tokens.themes.dark['--sl-surface']; // "#0b1220"
+const hcPrimary = tokens.themes.hc['--sl-primary']; // "#fff"
+
+// Use in your components
+function MyComponent() {
+  return (
+    <div style={{ 
+      padding: spacing,
+      backgroundColor: primaryColor 
+    }}>
+      Custom styled content
+    </div>
+  );
+}
+```
+
+### CSS Variables
+
+All tokens are also available as CSS variables:
+
+```css
+.my-component {
+  /* Colors */
+  background: var(--sl-primary);
+  color: var(--sl-primary-contrast);
+  
+  /* Spacing */
+  padding: var(--sl-space-4);
+  
+  /* Typography */
+  font-size: var(--sl-font-size-2);
+  
+  /* Border Radius */
+  border-radius: var(--sl-radius-1);
+  
+  /* Transitions */
+  transition: all var(--sl-duration-fast);
+}
+```
+
+## Theming
+
+The design system supports three themes: Light (default), Dark, and High Contrast.
+
+```tsx
+// Change theme dynamically
+document.documentElement.dataset.theme = 'dark'; // or 'hc' for high contrast
+```
+
+## Resources
+
+- 📚 [Full Documentation](https://your-playground-url.com/documentation)
+- 🎨 [Color Palette](https://your-playground-url.com/colors)
+- 🧩 [Component Examples](https://your-playground-url.com/components)
+- 📦 [NPM Package](https://www.npmjs.com/package/@slimkhemiri/react-design-system)
 

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import "@slimkhemiri/tokens/tokens.css";
+import { tokens as designTokens } from "@slimkhemiri/tokens";
 export * from "./components";
 export { defineCustomElements } from "@slimkhemiri/web-components/loader";
+export { designTokens as tokens };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAC;AAExC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAC;AACxC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE7D,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,CAAC"}

package/dist/index.js

@@ -1,3 +1,5 @@
 import "@slimkhemiri/tokens/tokens.css";
+import { tokens as designTokens } from "@slimkhemiri/tokens";
 export * from "./components";
 export { defineCustomElements } from "@slimkhemiri/web-components/loader";
+export { designTokens as tokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slimkhemiri/react-design-system",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "private": false,
   "type": "module",
   "main": "dist/index.js",