@discourser/design-system 0.22.0 → 0.22.2

package/dist/figma-codex.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
   "packageName": "@discourser/design-system",
-  "generatedAt": "2026-03-12T16:49:52.279Z",
-  "gitHash": "beb5e993",
+  "generatedAt": "2026-03-13T03:32:14.503Z",
+  "gitHash": "7c8d515d",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discourser/design-system",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "description": "Aesthetic-agnostic design system with Panda CSS and Ark UI",
   "type": "module",
   "publishConfig": {
@@ -180,13 +180,13 @@
     "src"
   ],
   "scripts": {
-    "dev": "pnpm docs:generate && storybook dev -p 6006",
+    "dev": "pnpm build:css && pnpm docs:generate && storybook dev -p 6006",
     "build": "pnpm build:panda && pnpm typecheck && pnpm build:lib && pnpm build:types && pnpm codex:generate",
     "build:panda": "panda codegen",
     "build:css": "panda cssgen --outfile dist/styles.css",
     "build:lib": "tsup",
     "build:types": "tsc --project tsconfig.build.json",
-    "build:storybook": "pnpm docs:generate && storybook build",
+    "build:storybook": "pnpm build:css && pnpm docs:generate && storybook build",
     "prepare": "panda codegen && husky",
     "lint": "eslint src --ext .ts,.tsx",
     "test": "vitest",
@@ -210,6 +210,7 @@
     "codex:watch": "tsx --watch src/figma-codex/generate.ts",
     "figma:connect": "figma connect publish",
     "figma:connect:dry": "figma connect publish --dry-run",
+    "figma:export": "tsx scripts/export-figma-tokens.ts",
     "changeset": "changeset",
     "version": "changeset version",
     "ci:version": "pnpm exec changeset version",

package/src/languages/transform.ts

@@ -84,7 +84,7 @@ function transformTextStyles(language: DesignLanguageContract) {
       name,
       {
         value: {
-          fontFamily: style.fontFamily || 'body',
+          fontFamily: `{fonts.${style.fontFamily || 'body'}}`,
           fontSize: style.fontSize,
           lineHeight: style.lineHeight,
           fontWeight: style.fontWeight,

package/src/stories/foundations/Borders.stories.tsx

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { css } from 'styled-system/css';
+
+const meta = {
+  title: 'Foundations/Borders',
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ── Pre-declared css() calls — Panda CSS statically extracts these ─────────────
+// (dynamic template literals cannot be extracted; explicit literals are required)
+
+const borderBox: Record<string, string> = {
+  thin: css({
+    borderWidth: 'thin',
+    borderStyle: 'solid',
+    borderColor: 'neutral.outline.border',
+    bg: 'neutral.1',
+  }),
+  medium: css({
+    borderWidth: 'medium',
+    borderStyle: 'solid',
+    borderColor: 'neutral.outline.border',
+    bg: 'neutral.1',
+  }),
+  thick: css({
+    borderWidth: 'thick',
+    borderStyle: 'solid',
+    borderColor: 'neutral.outline.border',
+    bg: 'neutral.1',
+  }),
+};
+
+// ── Data ────────────────────────────────────────────────────────────────────────
+
+const BORDER_WIDTHS: { token: string; value: string }[] = [
+  { token: 'thin', value: '1px' },
+  { token: 'medium', value: '2px' },
+  { token: 'thick', value: '4px' },
+];
+
+// ── Shared helpers ──────────────────────────────────────────────────────────────
+
+function SectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div style={{ marginBottom: '24px' }}>
+      <h2
+        style={{
+          fontSize: '18px',
+          fontWeight: '600',
+          margin: '0 0 8px',
+          fontFamily: 'Inter, system-ui, sans-serif',
+        }}
+      >
+        {title}
+      </h2>
+      <p
+        style={{ fontSize: '14px', color: '#666', margin: 0, lineHeight: 1.5 }}
+      >
+        {description}
+      </p>
+    </div>
+  );
+}
+
+// ── Story 1: Border Width Tokens ───────────────────────────────────────────────
+
+export const BorderWidthTokens: Story = {
+  name: '1 · Border Width Tokens',
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <SectionHeading
+        title="Border Width Tokens"
+        description="Three border width tokens for consistent stroke weight across components. Use borderWidth token names in recipes — never raw pixel values."
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: '24px',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+        }}
+      >
+        {BORDER_WIDTHS.map(({ token, value }) => (
+          <div
+            key={token}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+            }}
+          >
+            <div
+              className={borderBox[token]}
+              style={{
+                width: '120px',
+                height: '72px',
+                borderRadius: '6px',
+                flexShrink: 0,
+              }}
+              title={`borderWidth: ${token}`}
+            />
+            <span
+              style={{
+                fontSize: '11px',
+                fontFamily: 'monospace',
+                color: '#444',
+                textAlign: 'center',
+                lineHeight: 1.3,
+              }}
+            >
+              {token}
+            </span>
+            <span
+              style={{
+                fontSize: '10px',
+                fontFamily: 'monospace',
+                color: '#888',
+                textAlign: 'center',
+              }}
+            >
+              {value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};