@discourser/design-system 0.22.1 → 0.22.3

package/dist/figma-codex.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "packageName": "@discourser/design-system",
-  "generatedAt": "2026-03-12T17:23:35.829Z",
-  "gitHash": "fd5ff6cc",
+  "generatedAt": "2026-03-13T05:28:53.666Z",
+  "gitHash": "c6e59461",
   "figmaFiles": {
     "GaHmFfmvO4loUzuZS4TgEz": {
       "fileKey": "GaHmFfmvO4loUzuZS4TgEz"

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIGCGVSG4_cjs = require('./chunk-IGCGVSG4.cjs');
+var chunkNN4YW27E_cjs = require('./chunk-NN4YW27E.cjs');
 var chunkWSJLKVXZ_cjs = require('./chunk-WSJLKVXZ.cjs');
 require('./chunk-EARF7VDF.cjs');
 var clsx = require('clsx');
@@ -11,15 +11,15 @@ function cn(...inputs) {
 
 Object.defineProperty(exports, "activeLanguage", {
   enumerable: true,
-  get: function () { return chunkIGCGVSG4_cjs.material3Language; }
+  get: function () { return chunkNN4YW27E_cjs.material3Language; }
 });
 Object.defineProperty(exports, "discourserPandaPreset", {
   enumerable: true,
-  get: function () { return chunkIGCGVSG4_cjs.discourserPandaPreset; }
+  get: function () { return chunkNN4YW27E_cjs.discourserPandaPreset; }
 });
 Object.defineProperty(exports, "transformToPandaTheme", {
   enumerable: true,
-  get: function () { return chunkIGCGVSG4_cjs.transformToPandaTheme; }
+  get: function () { return chunkNN4YW27E_cjs.transformToPandaTheme; }
 });
 Object.defineProperty(exports, "AbsoluteCenter", {
   enumerable: true,

package/dist/index.js

@@ -1,4 +1,4 @@
-export { material3Language as activeLanguage, discourserPandaPreset, transformToPandaTheme } from './chunk-VJN7TIGL.js';
+export { material3Language as activeLanguage, discourserPandaPreset, transformToPandaTheme } from './chunk-GLPWI7OF.js';
 export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, AccountIcon, AddScenarioDialog, AudienceIcon, AudioSpeakerIcon, Avatar_exports as Avatar, Badge, BookmarkPlusIcon, Breadcrumb_exports as Breadcrumb, Button, ButtonGroup, Card_exports as Card, Checkbox_exports as Checkbox, ChevronUpIcon, ClipBoardIcon, ClockIcon, CloseButton_exports as CloseButton, ContentCard_exports as ContentCard, DashboardIcon, Dialog_exports as Dialog, DiscourserLogo, Drawer_exports as Drawer, ExitStudioIcon, GripDotsVerticalIcon, Group_exports as Group, Header, HelpIcon, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup, MicrophoneIcon, NavigationMenu, NotebookIcon, NotebookPenIcon, PausePlayIcon, PlayIcon, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, RecordIcon, RepeatQuestionIcon, RightArrowIcon, ScenarioCard, ScenarioIcon, ScenarioQueue, ScenarioSettings, ScrollTextIcon, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, SparklesIcon, SpeechIcon, Spinner, Stepper, StopPlayIcon, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, TimerIcon, Toaster, Tooltip_exports as Tooltip, UserProfileIcon, difficultyColorMap, difficultyLabel, toaster } from './chunk-NU6GI57K.js';
 import './chunk-WR5Z5QMQ.js';
 import { clsx } from 'clsx';

package/dist/languages/transform.d.ts

@@ -79,7 +79,7 @@ export declare function transformToPandaTheme(language: DesignLanguageContract):
     textStyles: {
         [k: string]: {
             value: {
-                fontFamily: any;
+                fontFamily: string;
                 fontSize: any;
                 lineHeight: any;
                 fontWeight: any;

package/dist/preset/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkIGCGVSG4_cjs = require('../chunk-IGCGVSG4.cjs');
+var chunkNN4YW27E_cjs = require('../chunk-NN4YW27E.cjs');
 require('../chunk-EARF7VDF.cjs');
 
 
 
 Object.defineProperty(exports, "discourserPandaPreset", {
   enumerable: true,
-  get: function () { return chunkIGCGVSG4_cjs.discourserPandaPreset; }
+  get: function () { return chunkNN4YW27E_cjs.discourserPandaPreset; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/preset/index.js

@@ -1,4 +1,4 @@
-export { discourserPandaPreset } from '../chunk-VJN7TIGL.js';
+export { discourserPandaPreset } from '../chunk-GLPWI7OF.js';
 import '../chunk-WR5Z5QMQ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/stories/foundations/components/ColorSwatch.d.ts

@@ -1,21 +1,7 @@
-interface ColorSwatchProps {
-    name: string;
-    value: string;
-    description?: string;
-}
-export declare const ColorSwatch: ({ name, value, description }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
-interface TonalSwatchProps {
-    paletteName: string;
-    tone: number;
-    value: string;
-}
-export declare const TonalSwatch: ({ paletteName, tone, value }: TonalSwatchProps) => import("react/jsx-runtime").JSX.Element;
 interface SemanticSwatchProps {
     name: string;
-    lightValue: string;
-    darkValue: string;
     description?: string;
 }
-export declare const SemanticSwatch: ({ name, lightValue, darkValue, description, }: SemanticSwatchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SemanticSwatch: ({ name, description }: SemanticSwatchProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/stories/foundations/components/ColorSwatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ColorSwatch.tsx"],"names":[],"mappings":"AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,4CA2CzE,CAAC;AAEF,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,4CAyBzE,CAAC;AAEF,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,+CAK5B,mBAAmB,4CAmErB,CAAC"}
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ColorSwatch.tsx"],"names":[],"mappings":"AAoDA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,4CAuExE,CAAC"}

package/dist/stories/foundations/components/ElevationCard.d.ts

@@ -1,11 +1,8 @@
+export declare const elevationClasses: Record<string, string>;
 interface ElevationCardProps {
     level: string;
-    shadow: string;
 }
-export declare const ElevationCard: ({ level, shadow }: ElevationCardProps) => import("react/jsx-runtime").JSX.Element;
-interface ElevationGridProps {
-    elevations: Record<string, string>;
-}
-export declare const ElevationGrid: ({ elevations }: ElevationGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElevationCard: ({ level }: ElevationCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElevationGrid: () => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ElevationCard.d.ts.map

package/dist/stories/foundations/components/ElevationCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ElevationCard.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CAiDlE,CAAC;AAEF,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,aAAa,GAAI,gBAAgB,kBAAkB,4CAkB/D,CAAC"}
+{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/ElevationCard.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAOnD,CAAC;AAEF,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,GAAI,WAAW,kBAAkB,4CAsC1D,CAAC;AAEF,eAAO,MAAM,aAAa,+CAoBzB,CAAC"}

package/dist/stories/foundations/components/SpacingBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpacingBox.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/SpacingBox.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,GAAI,iBAAiB,eAAe,4CAiE1D,CAAC;AAEF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAezD,CAAC"}
+{"version":3,"file":"SpacingBox.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/SpacingBox.tsx"],"names":[],"mappings":"AAgBA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,GAAI,iBAAiB,eAAe,4CAgE1D,CAAC;AAEF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CAezD,CAAC"}

package/dist/stories/foundations/components/TypeSpecimen.d.ts

@@ -1,4 +1,5 @@
 interface TypeSpecimenProps {
+    styleName: string;
     name: string;
     fontSize: string;
     lineHeight: string;
@@ -7,6 +8,6 @@ interface TypeSpecimenProps {
     fontFamily: string;
     sampleText?: string;
 }
-export declare const TypeSpecimen: ({ name, fontSize, lineHeight, fontWeight, letterSpacing, fontFamily, sampleText, }: TypeSpecimenProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TypeSpecimen: ({ styleName: _styleName, name, fontSize, lineHeight, fontWeight, letterSpacing, fontFamily, sampleText, }: TypeSpecimenProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TypeSpecimen.d.ts.map

package/dist/stories/foundations/components/TypeSpecimen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeSpecimen.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/TypeSpecimen.tsx"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,oFAQ1B,iBAAiB,4CAsFnB,CAAC"}
+{"version":3,"file":"TypeSpecimen.d.ts","sourceRoot":"","sources":["../../../../src/stories/foundations/components/TypeSpecimen.tsx"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,2GAS1B,iBAAiB,4CA6FnB,CAAC"}

package/docs/CSS_USAGE.md

@@ -0,0 +1,235 @@
+# Using Pre-compiled CSS
+
+As of version 0.4.1, `@discourser/design-system` ships with pre-compiled CSS for easy integration with any project.
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @discourser/design-system react react-dom
+```
+
+### Basic Usage
+
+Simply import the pre-compiled CSS and start using components:
+
+```tsx
+// Import the pre-compiled CSS (do this once in your app entry point)
+import '@discourser/design-system/styles.css';
+
+// Import components
+import { Button, Card, Input } from '@discourser/design-system';
+
+function App() {
+  return (
+    <div>
+      <Card variant="elevated">
+        <h1>Welcome</h1>
+        <Input label="Email" type="email" />
+        <Button variant="filled">Submit</Button>
+      </Card>
+    </div>
+  );
+}
+```
+
+### Theme Support
+
+The pre-compiled CSS includes both light and dark theme support. Set the `data-theme` attribute on your HTML element:
+
+```tsx
+// Light theme (default)
+<html data-theme="light">
+  <body>
+    <App />
+  </body>
+</html>
+
+// Dark theme
+<html data-theme="dark">
+  <body>
+    <App />
+  </body>
+</html>
+```
+
+You can toggle themes dynamically:
+
+```tsx
+function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  return (
+    <Button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+      Toggle Theme
+    </Button>
+  );
+}
+```
+
+## What's Included
+
+The pre-compiled `styles.css` file (144KB) includes:
+
+- ✅ All semantic color tokens (primary, surface, onPrimary, etc.)
+- ✅ All typography tokens (displayLarge through labelSmall)
+- ✅ All spacing tokens (none through xxxl)
+- ✅ All component recipes (button, card, dialog, input, etc.)
+- ✅ Light and dark theme support via `[data-theme="light"]` and `[data-theme="dark"]`
+- ✅ CSS reset and base styles
+- ✅ Material Design 3 design tokens
+
+## Advanced Usage
+
+### Using Styled System (Advanced)
+
+For advanced styling needs, you can still import the Panda CSS styled system:
+
+```tsx
+import { css } from '@discourser/design-system/styled-system/css';
+import { Button } from '@discourser/design-system';
+
+const customStyle = css({
+  bg: 'primary',
+  color: 'onPrimary',
+  padding: 'lg',
+  borderRadius: 'md'
+});
+
+function CustomButton() {
+  return <Button className={customStyle}>Custom Styled Button</Button>;
+}
+```
+
+### Without Pre-compiled CSS
+
+If you prefer to use Panda CSS's runtime styles (for dynamic styling), you can skip importing `styles.css` and use the styled system directly. However, you'll need to set up Panda CSS in your project with `panda codegen`.
+
+## Integration Examples
+
+### Vite
+
+```tsx
+// main.tsx
+import '@discourser/design-system/styles.css';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(<App />);
+```
+
+### Next.js (App Router)
+
+```tsx
+// app/layout.tsx
+import '@discourser/design-system/styles.css';
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" data-theme="light">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+### Next.js (Pages Router)
+
+```tsx
+// pages/_app.tsx
+import '@discourser/design-system/styles.css';
+import type { AppProps } from 'next/app';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+```
+
+## Figma Make Integration
+
+The pre-compiled CSS enables seamless integration with Figma Make. Simply install the package and it will automatically use the pre-compiled styles for AI-generated designs.
+
+## File Size
+
+The pre-compiled CSS file is optimized and includes only the styles you need:
+
+- **Size**: 144KB (uncompressed)
+- **Gzipped**: ~20-25KB (estimated)
+- **Includes**: All tokens, recipes, and theme styles
+
+## Migration from Runtime CSS
+
+If you were previously using runtime Panda CSS:
+
+**Before:**
+```tsx
+// Had to run panda codegen
+import { css } from '../styled-system/css';
+```
+
+**After:**
+```tsx
+// Just import the pre-compiled CSS
+import '@discourser/design-system/styles.css';
+import { Button } from '@discourser/design-system';
+```
+
+No more build step required!
+
+## Troubleshooting
+
+### Components don't have styles
+
+Make sure you've imported the CSS at the top of your application:
+
+```tsx
+import '@discourser/design-system/styles.css'; // Add this!
+```
+
+### Theme not working
+
+Ensure the `data-theme` attribute is set on your HTML element:
+
+```html
+<html data-theme="light"> <!-- or "dark" -->
+```
+
+### CSS conflicts with other libraries
+
+The design system uses CSS layers to prevent conflicts:
+
+```css
+@layer reset, base, tokens, recipes, utilities;
+```
+
+If you still have conflicts, you may need to adjust your CSS loading order.
+
+## Package Exports
+
+The package exports the following:
+
+```json
+{
+  ".": "./dist/index.js",
+  "./styles.css": "./dist/styles.css",
+  "./styled-system": "./styled-system/index.mjs",
+  "./styled-system/css": "./styled-system/css/index.mjs",
+  "./styled-system/tokens": "./styled-system/tokens/index.mjs",
+  "./styled-system/recipes": "./styled-system/recipes/index.mjs"
+}
+```
+
+## Questions?
+
+- **Documentation**: See the [guidelines folder](./guidelines/) for complete component documentation
+- **GitHub**: https://github.com/Tasty-Maker-Studio/Discourser-Design-System
+- **Issues**: https://github.com/Tasty-Maker-Studio/Discourser-Design-System/issues