npm - @tokyo3rdhq/magi-design-system - Versions diffs - 0.3.1 → 0.4.1 - Mend

@tokyo3rdhq/magi-design-system 0.3.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -25,14 +25,14 @@ import '@tokyo3rdhq/magi-design-system/styles.css';
   <div id="root"></div>
 </body>
-// 3. Wrap your app in <ProductTheme> to optionally override the accent.
-//    0.3.0+: ProductTheme is a context provider + sets accent CSS
+// 3. Wrap your app in <AppTheme> to optionally override the accent.
+//    0.3.0+: AppTheme is a context provider + sets accent CSS
 //    variables on <html>. No DOM wrapper.
-import { ProductTheme } from '@tokyo3rdhq/magi-design-system';
+import { AppTheme } from '@tokyo3rdhq/magi-design-system';
-<ProductTheme accent="green" name="magi-portal">
+<AppTheme accent="green" name="magi-portal">
   <App />
-</ProductTheme>
+</AppTheme>
 ```
 ## API
@@ -244,14 +244,14 @@ import { EmptyState } from '@tokyo3rdhq/magi-design-system';
 ### Theme
-#### `<ProductTheme>` — accent override (0.3.0+: no DOM wrapper)
+#### `<AppTheme>` — accent override (0.3.0+: no DOM wrapper)
 ```tsx
-import { ProductTheme } from '@tokyo3rdhq/magi-design-system';
+import { AppTheme } from '@tokyo3rdhq/magi-design-system';
-<ProductTheme accent="cyan" name="token-factory">
+<AppTheme accent="cyan" name="token-factory">
   <App />
-</ProductTheme>
+</AppTheme>
 // accent: 'green' | 'cyan' | 'violet' | 'amber' | 'white'   (default: 'green')
 // name:   string                                              (optional product identifier)
 ```
@@ -284,15 +284,15 @@ The button / banner / etc. inside reads `--magi-accent` via CSS and picks up
 the override automatically. The mapping is shipped as static CSS in
 `foundation/globals.css`.
-#### `useProductTheme()` hook
+#### `useAppTheme()` hook
 ```tsx
-import { useProductTheme } from '@tokyo3rdhq/magi-design-system';
+import { useAppTheme } from '@tokyo3rdhq/magi-design-system';
 function MyComponent() {
-  const { accent } = useProductTheme();
-  // Returns { accent: ProductAccent } or { accent: 'green' } outside
-  // a <ProductTheme>.
+  const { accent } = useAppTheme();
+  // Returns { accent: AppAccent } or { accent: 'green' } outside
+  // a <AppTheme>.
 }
 ```

package/dist/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  *     Container, Section, Stack,
  *     Button, Card, Badge,
  *     Checkbox, FormField, Input, Segmented, Banner, EmptyState,
- *     ProductTheme,
+ *     AppTheme,
  *   } from '@tokyo3rdhq/magi-design-system';
  */
 import './styles/index.css';
@@ -20,6 +20,6 @@ export * from './components/FormField/index';
 export * from './components/Segmented/index';
 export * from './components/Banner/index';
 export * from './components/EmptyState/index';
-export { ProductTheme } from './theme';
-export type { ProductThemeProps, ProductAccent } from './theme';
+export { AppTheme } from './theme';
+export type { AppThemeProps, AppAccent } from './theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,oBAAoB,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,~~YAAY~~,EAAE,MAAM,SAAS,CAAC;~~AACvC~~,YAAY,EAAE,~~iBAAiB~~,EAAE,~~aAAa~~,EAAE,MAAM,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,oBAAoB,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js CHANGED Viewed

@@ -82,7 +82,7 @@ const V = v(
       }
     );
   }
-), F = v(function({ variant: t = "default", padding: a = "md", className: c, children: s, ...e }, i) {
+), A = v(function({ variant: t = "default", padding: a = "md", className: c, children: s, ...e }, i) {
   const r = l(
     "magi-card",
     `magi-card--${t}`,
@@ -90,7 +90,7 @@ const V = v(
     c
   );
   return /* @__PURE__ */ o("div", { ref: i, className: r, ...e, children: s });
-}), R = v(function({ variant: t = "neutral", dot: a = !1, className: c, children: s, ...e }, i) {
+}), F = v(function({ variant: t = "neutral", dot: a = !1, className: c, children: s, ...e }, i) {
   const r = l(
     "magi-badge",
     `magi-badge--${t}`,
@@ -100,7 +100,7 @@ const V = v(
     a ? /* @__PURE__ */ o("span", { className: "magi-badge__dot", "aria-hidden": "true" }) : null,
     s
   ] });
-}), _ = v(
+}), R = v(
   function({
     children: t,
     labelPosition: a = "right",
@@ -135,7 +135,7 @@ const V = v(
       }
     );
   }
-), H = v(function({ inputSize: t = "md", invalid: a = !1, className: c, ...s }, e) {
+), _ = v(function({ inputSize: t = "md", invalid: a = !1, className: c, ...s }, e) {
   const i = l(
     "magi-input",
     `magi-input--${t}`,
@@ -158,7 +158,7 @@ function h(...n) {
   );
   return t.length > 0 ? t.join(" ") : void 0;
 }
-function M({
+function H({
   label: n,
   helper: t,
   error: a,
@@ -215,7 +215,7 @@ function M({
     }
   );
 }
-function W({
+function M({
   value: n,
   options: t,
   onChange: a,
@@ -264,7 +264,7 @@ function W({
     }
   );
 }
-function A({
+function W({
   variant: n = "warning",
   className: t,
   children: a,
@@ -366,18 +366,18 @@ function O({
   }, [n, t]), /* @__PURE__ */ o(S.Provider, { value: c, children: a });
 }
 export {
-  R as Badge,
-  A as Banner,
+  O as AppTheme,
+  F as Badge,
+  W as Banner,
   V as Button,
-  F as Card,
-  _ as Checkbox,
+  A as Card,
+  R as Checkbox,
   E as Container,
   D as EmptyState,
-  M as FormField,
-  H as Input,
-  O as ProductTheme,
+  H as FormField,
+  _ as Input,
   j as Section,
-  W as Segmented,
+  M as Segmented,
   T as Stack
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/utils/classnames.ts","../src/layout/Container.tsx","../src/layout/Section.tsx","../src/layout/Stack.tsx","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Badge/Badge.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Input/Input.tsx","../src/components/FormField/FormField.tsx","../src/components/Segmented/Segmented.tsx","../src/components/Banner/Banner.tsx","../src/components/EmptyState/EmptyState.tsx","../src/theme.tsx"],"sourcesContent":["/** Join truthy class strings with a space. /\nexport function cx(...parts: Array<string \| false \| null \| undefined>): string {\n return parts.filter(Boolean).join(' ');\n}","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type ContainerSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'wide' \| 'full';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement> {\n /* Maximum width at desktop. Default: `xl` (1200px). /\n size?: ContainerSize;\n /* Override the rendered tag. Default: `div`. /\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Container — centers content and constrains max-width.\n \n @example\n * <Container size=\"lg\">...</Container>\n /\nexport function Container({\n size = 'xl',\n as,\n className,\n children,\n ...rest\n}: ContainerProps) {\n const Component = (as ?? 'div') as ElementType;\n const cls = cx('magi-container', `magi-container--${size}`, className);\n return (\n <Component className={cls} {...rest}>\n {children}\n </Component>\n );\n}\n","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type SectionSpacing = 'sm' \| 'md' \| 'lg' \| 'xl';\nexport type SectionSurface = 'default' \| 'raised' \| 'elevated';\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n /* Vertical padding scale. Default: `lg`. /\n spacing?: SectionSpacing;\n /* Background surface. Default: `default` (transparent). /\n surface?: SectionSurface;\n /* Drop the inner Container padding. Useful for full-bleed content. /\n fullWidth?: boolean;\n /* Override the rendered tag. Default: `section`. /\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Section — page-level vertical rhythm primitive.\n \n @example\n * <Section spacing=\"xl\" surface=\"default\">...</Section>\n /\nexport function Section({\n spacing = 'lg',\n surface = 'default',\n fullWidth = false,\n as,\n className,\n children,\n ...rest\n}: SectionProps) {\n const Component = (as ?? 'section') as ElementType;\n const cls = cx(\n 'magi-section',\n `magi-section--${spacing}`,\n `magi-section--${surface}`,\n fullWidth && 'magi-section--fullWidth',\n className,\n );\n return (\n <Component className={cls} {...rest}>\n {children}\n </Component>\n );\n}\n","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type StackGap =\n \| '0' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16';\nexport type StackAlign = 'start' \| 'center' \| 'end' \| 'stretch';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n /* Layout direction. Default: vertical (column). /\n direction?: 'row' \| 'column';\n /* Gap token. Default: `4` (16px). /\n gap?: StackGap;\n /* Cross-axis alignment. Default: `stretch`. /\n align?: StackAlign;\n /* Allow wrapping when `direction=\"row\"`. Default: true. /\n wrap?: boolean;\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Stack — vertical or horizontal flex primitive with semantic gap tokens.\n \n @example\n * <Stack gap=\"6\" align=\"center\">...</Stack>\n * <Stack direction=\"row\" gap=\"3\">...</Stack>\n /\nexport function Stack({\n direction = 'column',\n gap = '4',\n align = 'stretch',\n wrap = true,\n as,\n className,\n style,\n children,\n ...rest\n}: StackProps) {\n const Component = (as ?? 'div') as ElementType;\n const wrapStyle =\n direction === 'row' && !wrap ? { flexWrap: 'nowrap' as const } : undefined;\n const cls = cx(\n 'magi-stack',\n direction === 'row' && 'magi-stack--row',\n `magi-stack--gap-${gap}`,\n `magi-stack--align-${align}`,\n className,\n );\n\n return (\n <Component className={cls} style={{ ...wrapStyle, ...style }} {...rest}>\n {children}\n </Component>\n );\n}\n","import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /* Visual style. Default: `primary`. /\n variant?: ButtonVariant;\n /* Height + padding tier. Default: `md`. /\n size?: ButtonSize;\n /* Show a spinner and disable interaction. /\n loading?: boolean;\n}\n\n/\n Button — the canonical MAGI action element.\n \n Pill-shaped, four variants (primary/secondary/ghost/danger), three sizes.\n * Use `primary` for the dominant action on a page; `secondary` for supporting\n * actions; `ghost` for inline/tertiary; `danger` for destructive intent.\n \n @example\n * <Button variant=\"primary\" onClick={...}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n /\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n disabled,\n className,\n children,\n type,\n ...rest\n },\n ref,\n ) {\n const cls = cx(\n 'magi-button',\n `magi-button--${variant}`,\n `magi-button--${size}`,\n loading && 'magi-button--loading',\n className,\n );\n\n return (\n <button\n ref={ref}\n className={cls}\n type={type ?? 'button'}\n disabled={disabled \|\| loading}\n aria-busy={loading \|\| undefined}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type CardVariant = 'default' \| 'elevated' \| 'interactive';\nexport type CardPadding = 'none' \| 'sm' \| 'md' \| 'lg';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n /* Visual emphasis. Default: `default`. `interactive` adds hover state. /\n variant?: CardVariant;\n /* Inner padding. Default: `md`. /\n padding?: CardPadding;\n children?: ReactNode;\n}\n\n/\n Card — minimal dark surface with subtle border. Three variants:\n * default (flat), elevated (more contrast), interactive (hover state).\n \n @example\n * <Card variant=\"elevated\">...</Card>\n * <Card variant=\"interactive\" onClick={...}>...</Card>\n /\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n { variant = 'default', padding = 'md', className, children, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-card',\n `magi-card--${variant}`,\n `magi-card--padding-${padding}`,\n className,\n );\n return (\n <div ref={ref} className={cls} {...rest}>\n {children}\n </div>\n );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type BadgeVariant = 'neutral' \| 'accent' \| 'success' \| 'warning' \| 'error';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /* Color/meaning. Default: `neutral`. /\n variant?: BadgeVariant;\n /* Show a leading colored dot. /\n dot?: boolean;\n children?: ReactNode;\n}\n\n/\n Badge — compact status / metadata label.\n \n @example\n * <Badge variant=\"accent\">128K context</Badge>\n * <Badge variant=\"success\" dot>Online</Badge>\n /\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { variant = 'neutral', dot = false, className, children, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-badge',\n `magi-badge--${variant}`,\n className,\n );\n return (\n <span ref={ref} className={cls} {...rest}>\n {dot ? <span className=\"magi-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n});\n","import {\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type CheckboxLabelPosition = 'right' \| 'left';\n\n/\n Omit `type` from native input attrs — this component is always\n * `type=\"checkbox\"` under the hood. Letting `type` pass through would\n * let consumers render e.g. `type=\"radio\"` with checkbox styles.\n /\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n /* Optional label rendered next to the checkbox. /\n children?: ReactNode;\n /* Position of the label relative to the checkbox. Default: 'right'. /\n labelPosition?: CheckboxLabelPosition;\n}\n\n/\n Checkbox — restyled native checkbox for the MAGI dark theme.\n \n Uses a native `<input type=\"checkbox\">` under the hood for full form\n * integration and screen-reader compatibility. The CSS only restyles\n * the visible state.\n \n @example\n * // Uncontrolled:\n * <Checkbox aria-label=\"Accept terms\" defaultChecked />\n \n // Controlled with label:\n * <Checkbox\n * checked={providers.includes('nvidia')}\n * onChange={(e) => toggle('nvidia', e.target.checked)}\n * >\n * NVIDIA\n * </Checkbox>\n /\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n function Checkbox(\n {\n children,\n labelPosition = 'right',\n className,\n disabled,\n ...rest\n },\n ref,\n ) {\n const input = (\n <input\n ref={ref}\n type=\"checkbox\"\n className={cx('magi-checkbox', className)}\n disabled={disabled}\n {...rest}\n />\n );\n\n if (children === undefined \|\| children === null) {\n return input;\n }\n\n return (\n <label\n className={cx(\n 'magi-checkbox-label',\n disabled && 'magi-checkbox-label--disabled',\n )}\n >\n {labelPosition === 'left' ? (\n <>\n <span>{children}</span>\n {input}\n </>\n ) : (\n <>\n {input}\n <span>{children}</span>\n </>\n )}\n </label>\n );\n },\n);","import { forwardRef, type InputHTMLAttributes } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type InputSize = 'sm' \| 'md' \| 'lg';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n /* Visual size. Default: `md`. /\n inputSize?: InputSize;\n /* Error state — adds error border + aria-invalid. /\n invalid?: boolean;\n}\n\n/\n Input — `<input>` styled for the MAGI dark theme.\n \n Wraps the native element directly. No custom state management — value /\n * onChange / defaultValue / ref all pass through.\n \n @example\n * <Input placeholder=\"e.g. Coding assistant\" />\n * <Input type=\"password\" />\n * <Input invalid defaultValue=\"bad value\" />\n /\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { inputSize = 'md', invalid = false, className, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-input',\n `magi-input--${inputSize}`,\n invalid && 'magi-input--invalid',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={cls}\n aria-invalid={invalid \|\| undefined}\n {...rest}\n />\n );\n});","import {\n Children,\n cloneElement,\n isValidElement,\n useId,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { cx } from '../../utils/classnames';\n\ntype ChildProps = {\n id?: string;\n 'aria-describedby'?: string;\n 'aria-invalid'?: boolean \| 'grammar' \| 'spelling' \| 'false' \| 'true';\n 'aria-labelledby'?: string;\n};\n\nexport interface FormFieldProps {\n /* Visible label above the control. Required. /\n label: string;\n /* Optional helper text below the control. /\n helper?: string;\n /* Error message — overrides helper styling + sets aria-invalid + aria-describedby. /\n error?: string;\n /* The control itself (Input, Select, Segmented, etc.). /\n children: ReactNode;\n /* Stack alignment override. Default: stretch. /\n align?: 'start' \| 'center' \| 'end' \| 'stretch';\n /* Extra className for the wrapper. /\n className?: string;\n /* Optional id for the helper/error element (overrides the auto-generated one). /\n helperId?: string;\n}\n\n/\n Merge ARIA id-list attributes (space-separated per WAI-ARIA spec).\n * Empty / null / undefined entries are dropped.\n /\nfunction mergeIds(\n ...ids: Array<string \| undefined \| null>\n): string \| undefined {\n const filtered = ids.filter(\n (id): id is string => typeof id === 'string' && id.length > 0,\n );\n return filtered.length > 0 ? filtered.join(' ') : undefined;\n}\n\n/\n FormField — label + control + optional helper/error wrapper.\n \n Wires `aria-describedby` to the helper/error span and `aria-labelledby`\n * to the label, by cloning the single child element with the appropriate\n * ARIA attributes. Sets `aria-invalid=\"true\"` on the child when `error` is\n * present.\n \n Consumer-supplied ARIA attributes are preserved (merged, not overwritten).\n * For example, if the consumer passes `aria-describedby=\"external-help\"`,\n * the resulting attribute is `\"external-help <generated-helper-id>\"`.\n * This matches the WAI-ARIA spec for multi-value id lists.\n \n The child MUST be a single focusable element (Input, Select, native\n * `<input>`, Segmented, etc.). If `children` is not a valid React element,\n * the ARIA wiring is skipped — the label and helper/error still render.\n \n @example\n * <FormField label=\"Email\" helper=\"We'll never share this.\">\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n * </FormField>\n \n <FormField label=\"Max models\" error=\"Pick a value between 1 and 10.\">\n * <Segmented value=\"3\" options={...} onChange={...} />\n * </FormField>\n /\nexport function FormField({\n label,\n helper,\n error,\n children,\n align = 'stretch',\n className,\n helperId,\n}: FormFieldProps) {\n const reactId = useId();\n const fieldId = `magi-field-${reactId}`;\n const labelId = `${fieldId}-label`;\n const describedById = helperId ?? `${fieldId}-helper`;\n const hasMessage = Boolean(error \|\| helper);\n\n let enhanced: ReactNode = children;\n if (isValidElement<ChildProps>(children)) {\n const existing = children.props;\n enhanced = cloneElement(children, {\n id: existing.id ?? fieldId,\n // MERGE with consumer-supplied IDs. The order is: consumer's first,\n // then FormField's. This matches ARIA's \"consumer-supplied IDs win\n // for ordering\" intuition — FormField's helpers are appended.\n 'aria-describedby': mergeIds(\n existing['aria-describedby'],\n hasMessage ? describedById : undefined,\n ),\n 'aria-labelledby': mergeIds(\n existing['aria-labelledby'],\n labelId,\n ),\n // aria-invalid: when FormField has an error, force true (overriding\n // consumer). When no error, preserve consumer's setting.\n 'aria-invalid': error ? true : (existing['aria-invalid'] ?? undefined),\n });\n }\n\n return (\n <div\n className={cx(\n 'magi-field',\n `magi-field--align-${align}`,\n className,\n )}\n >\n <label id={labelId} className=\"magi-field-label\">\n {label}\n </label>\n {enhanced}\n {hasMessage && (\n <span\n id={describedById}\n className={cx(\n 'magi-field-helper',\n error && 'magi-field-helper--error',\n )}\n >\n {error \|\| helper}\n </span>\n )}\n </div>\n );\n}","import type { ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type SegmentedSize = 'sm' \| 'md' \| 'lg';\n\nexport interface SegmentedOption<V extends string = string> {\n value: V;\n label: string;\n /* Optional: disable this individual option. /\n disabled?: boolean;\n}\n\nexport interface SegmentedProps<V extends string = string> {\n /* Currently selected option value. /\n value: V;\n /* Options to display. /\n options: SegmentedOption<V>[];\n /* Called when the user picks a different option. /\n onChange: (value: V) => void;\n /* Use accent color for the active state (cyan for tfi, etc.). Default: false. /\n accent?: boolean;\n /* Visual size. Default: `md`. /\n size?: SegmentedSize;\n /* Disable the whole control. /\n disabled?: boolean;\n /* Group label for screen readers. /\n 'aria-label'?: string;\n /* Optional id for the group. /\n id?: string;\n /* Extra className for the wrapper. /\n className?: string;\n /* Render-prop variant — render function receives each option and its state. /\n children?: (option: SegmentedOption<V>, state: {\n active: boolean;\n disabled: boolean;\n onSelect: () => void;\n }) => ReactNode;\n}\n\n/\n Segmented — pill-shaped single-select chip group.\n \n SINGLE-SELECT ONLY. For multi-select (e.g. provider toggles, multi-tag\n * pickers), use a `Checkbox` group instead — a multi-item segmented control\n * implies exclusive selection and confuses the interaction model.\n \n @example\n * <Segmented\n * value={contextMin}\n * options={[\n * { value: '128k', label: '128K+' },\n * { value: '32k', label: '32K+' },\n * { value: '8k', label: '8K+' },\n * { value: 'any', label: 'Any' },\n * ]}\n * onChange={(v) => setContextMin(v as ContextMin)}\n * />\n \n <Segmented value={cost} options={[...] onChange={...} accent />\n /\nexport function Segmented<V extends string = string>({\n value,\n options,\n onChange,\n accent = false,\n size = 'md',\n disabled = false,\n id,\n className,\n 'aria-label': ariaLabel,\n children,\n}: SegmentedProps<V>) {\n return (\n <div\n role=\"radiogroup\"\n id={id}\n aria-label={ariaLabel}\n className={cx(\n 'magi-segmented',\n `magi-segmented--${size}`,\n disabled && 'magi-segmented--disabled',\n className,\n )}\n >\n {options.map((opt) => {\n const active = opt.value === value;\n const isDisabled = !!(disabled \|\| opt.disabled);\n const onSelect = () => {\n if (isDisabled \|\| active) return;\n onChange(opt.value);\n };\n\n if (children) {\n return (\n <div key={opt.value}>\n {children(opt, { active, disabled: isDisabled, onSelect })}\n </div>\n );\n }\n\n return (\n <button\n key={opt.value}\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n disabled={isDisabled}\n onClick={onSelect}\n className={cx(\n 'magi-segmented-item',\n active && 'magi-segmented-item--active',\n accent && 'magi-segmented-item--accent',\n )}\n >\n {opt.label}\n </button>\n );\n })}\n </div>\n );\n}","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type BannerVariant = 'warning' \| 'error' \| 'success' \| 'info';\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /* Semantic variant. Default: `warning`. /\n variant?: BannerVariant;\n /* Banner content. Inline elements (links, code) are allowed. /\n children: ReactNode;\n}\n\n/\n Banner — inline notice with a left-border accent.\n \n Use for hints, warnings, errors, and confirmations. Persists until the\n * condition resolves; no dismiss by default.\n \n - `warning` (default) — yellow accent, actionable risk\n * - `error` — red accent, blocker\n * - `success` — green accent, confirmation\n * - `info` — cyan accent, neutral hint (uses product accent)\n \n @example\n * <Banner variant=\"info\">No requirements set. <a href=\"/\">Go back</a>.</Banner>\n * <Banner variant=\"error\">Could not load KV catalog: {error.message}.</Banner>\n * <Banner variant=\"success\">Saved.</Banner>\n /\nexport function Banner({\n variant = 'warning',\n className,\n children,\n ...rest\n}: BannerProps) {\n return (\n <div\n role={variant === 'error' \|\| variant === 'warning' ? 'alert' : 'status'}\n className={cx(\n 'magi-banner',\n `magi-banner--${variant}`,\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n}","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {\n /* Optional bold title above the description (structured mode). /\n title?: string;\n /* Optional description text — used in structured mode. Defaults to children. /\n description?: ReactNode;\n /* Optional primary call-to-action (e.g. a Button or Link). /\n action?: ReactNode;\n /* Body content. Required in simple mode (when no `description`).\n * In structured mode it is shown only if `description` is not provided. /\n children?: ReactNode;\n}\n\n/\n EmptyState — centered placeholder for \"no data yet\" cases.\n \n Two patterns:\n \n @example Simple (string + inline elements):\n * <EmptyState>\n * No models match. Try loosening the constraints — <Link to=\"/\">edit requirements</Link>.\n * </EmptyState>\n \n @example Structured (title + description + action):\n * <EmptyState\n * title=\"Nothing selected\"\n * description=\"Pick models on the Browse page first.\"\n * action={<Button variant=\"primary\">Go to Browse</Button>}\n * />\n /\nexport function EmptyState({\n title,\n description,\n action,\n children,\n className,\n ...rest\n}: EmptyStateProps) {\n const structured = Boolean(title \|\| description \|\| action);\n const body = description ?? children;\n\n return (\n <div\n className={cx(\n 'magi-empty',\n structured && 'magi-empty--structured',\n className,\n )}\n {...rest}\n >\n {structured ? (\n <>\n {title ? <p className=\"magi-empty-title\">{title}</p> : null}\n {body !== undefined && body !== null ? (\n <p className=\"magi-empty-description\">{body}</p>\n ) : null}\n {action ? <div className=\"magi-empty-action\">{action}</div> : null}\n </>\n ) : (\n children\n )}\n </div>\n );\n}","import {\n createContext,\n useContext,\n useInsertionEffect,\n useMemo,\n type ReactNode,\n} from 'react';\n\nexport type ProductAccent =\n \| 'green' // default — MAGI core\n \| 'cyan' // Token Factory Initializr\n \| 'violet' // API product\n \| 'amber' // Agent product\n \| 'white'; // monochrome MAGI\n\ninterface AccentTokens {\n '--magi-accent': string;\n '--magi-accent-hover': string;\n '--magi-accent-soft': string;\n '--magi-accent-contrast': string;\n}\n\nconst ACCENT_PRESETS: Record<ProductAccent, AccentTokens> = {\n green: {\n '--magi-accent': '#00c853',\n '--magi-accent-hover': '#00e676',\n '--magi-accent-soft': 'rgba(0, 200, 83, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n cyan: {\n '--magi-accent': '#38bdf8',\n '--magi-accent-hover': '#7dd3fc',\n '--magi-accent-soft': 'rgba(56, 189, 248, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n violet: {\n '--magi-accent': '#8b5cf6',\n '--magi-accent-hover': '#a78bfa',\n '--magi-accent-soft': 'rgba(139, 92, 246, 0.08)',\n '--magi-accent-contrast': '#f5f5f7',\n },\n amber: {\n '--magi-accent': '#f59e0b',\n '--magi-accent-hover': '#fbbf24',\n '--magi-accent-soft': 'rgba(245, 158, 11, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n white: {\n '--magi-accent': '#ffffff',\n '--magi-accent-hover': '#f5f5f7',\n '--magi-accent-soft': 'rgba(255, 255, 255, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n};\n\ninterface ProductThemeContextValue {\n accent: ProductAccent;\n}\n\nconst ProductThemeContext = createContext<ProductThemeContextValue \| null>(null);\n\n/\n Hook for any JS-aware consumer that needs the current accent.\n * Returns `{ accent: 'green' }` (the default) when used outside a `<ProductTheme>`.\n /\nexport function useProductTheme(): ProductThemeContextValue {\n const ctx = useContext(ProductThemeContext);\n return ctx ?? { accent: 'green' };\n}\n\nexport interface ProductThemeProps {\n /* Accent preset. Default: `green`. /\n accent?: ProductAccent;\n /* Optional product identifier. Sets `data-magi-product=\"<name>\"` on `<html>`. /\n name?: string;\n children?: ReactNode;\n}\n\n/\n ProductTheme — overrides the MAGI accent for a subtree.\n \n Renders only a React context provider (no DOM wrapper). On mount, sets\n * the four accent CSS variables on `<html>` so all descendants inherit via\n * CSS cascade. For scoped overrides within a subtree, consumers can use:\n \n <div data-magi-accent=\"danger\">\n * <Button variant=\"primary\">Delete</Button>\n * </div>\n \n SSR: useInsertionEffect does not run on the server, so on SSR pages\n * the default theme applies during the initial render. For SSR theming\n * without FOUC, set `data-magi-accent=\"<name>\"` on `<html>` in your\n * server-side layout — the CSS rule in globals.css picks it up.\n \n Nested <ProductTheme>: each instance snapshots the previous accent\n * values on mount and restores them on unmount, so a child mounting\n * and unmounting leaves the outer theme intact. Note that CSS variables\n * are global (set on `<html>`), so siblings outside a child subtree\n * still see the child's accent — use `<div data-magi-accent=\"...\">`\n * for true CSS subtree scope.\n \n @example\n * function App() {\n * return (\n * <ProductTheme accent=\"cyan\" name=\"token-factory\">\n * <Routes />\n * </ProductTheme>\n * );\n * }\n */\nexport function ProductTheme({\n accent = 'green',\n name,\n children,\n}: ProductThemeProps) {\n const value = useMemo(() => ({ accent }), [accent]);\n\n useInsertionEffect(() => {\n if (typeof document === 'undefined') return;\n const tokens = ACCENT_PRESETS[accent];\n const root = document.documentElement;\n\n // Snapshot previous values so the cleanup can restore them on unmount\n // or accent change. This makes nested themes work correctly: the inner\n // theme restores the outer theme's values when it unmounts.\n const prev = {\n accent: root.style.getPropertyValue('--magi-accent'),\n accentHover: root.style.getPropertyValue('--magi-accent-hover'),\n accentSoft: root.style.getPropertyValue('--magi-accent-soft'),\n accentContrast: root.style.getPropertyValue('--magi-accent-contrast'),\n product: root.dataset.magiProduct,\n };\n\n root.style.setProperty('--magi-accent', tokens['--magi-accent']);\n root.style.setProperty('--magi-accent-hover', tokens['--magi-accent-hover']);\n root.style.setProperty('--magi-accent-soft', tokens['--magi-accent-soft']);\n root.style.setProperty('--magi-accent-contrast', tokens['--magi-accent-contrast']);\n\n if (name) {\n root.dataset.magiProduct = name;\n } else {\n delete root.dataset.magiProduct;\n }\n\n return () => {\n const restoreOrRemove = (prop: string, prevValue: string) => {\n if (prevValue) root.style.setProperty(prop, prevValue);\n else root.style.removeProperty(prop);\n };\n restoreOrRemove('--magi-accent', prev.accent);\n restoreOrRemove('--magi-accent-hover', prev.accentHover);\n restoreOrRemove('--magi-accent-soft', prev.accentSoft);\n restoreOrRemove('--magi-accent-contrast', prev.accentContrast);\n\n if (prev.product !== undefined) {\n root.dataset.magiProduct = prev.product;\n } else if (root.dataset.magiProduct !== undefined) {\n delete root.dataset.magiProduct;\n }\n };\n }, [accent, name]);\n\n return (\n <ProductThemeContext.Provider value={value}>\n {children}\n </ProductThemeContext.Provider>\n );\n}"],"names":["cx","parts","Container","size","as","className","children","rest","Component","cls","Section","spacing","surface","fullWidth","Stack","direction","gap","align","wrap","style","wrapStyle","jsx","Button","forwardRef","variant","loading","disabled","type","ref","Card","padding","Badge","dot","Checkbox","labelPosition","input","jsxs","Fragment","Input","inputSize","invalid","mergeIds","ids","filtered","id","FormField","label","helper","error","helperId","fieldId","useId","labelId","describedById","hasMessage","enhanced","isValidElement","existing","cloneElement","Segmented","value","options","onChange","accent","ariaLabel","opt","active","isDisabled","onSelect","Banner","EmptyState","title","description","action","structured","body","ACCENT_PRESETS","ProductThemeContext","createContext","ProductTheme","name","useMemo","useInsertionEffect","tokens","root","prev","restoreOrRemove","prop","prevValue"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/utils/classnames.ts","../src/layout/Container.tsx","../src/layout/Section.tsx","../src/layout/Stack.tsx","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Badge/Badge.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Input/Input.tsx","../src/components/FormField/FormField.tsx","../src/components/Segmented/Segmented.tsx","../src/components/Banner/Banner.tsx","../src/components/EmptyState/EmptyState.tsx","../src/theme.tsx"],"sourcesContent":["/** Join truthy class strings with a space. /\nexport function cx(...parts: Array<string \| false \| null \| undefined>): string {\n return parts.filter(Boolean).join(' ');\n}","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type ContainerSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'wide' \| 'full';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement> {\n /* Maximum width at desktop. Default: `xl` (1200px). /\n size?: ContainerSize;\n /* Override the rendered tag. Default: `div`. /\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Container — centers content and constrains max-width.\n \n @example\n * <Container size=\"lg\">...</Container>\n /\nexport function Container({\n size = 'xl',\n as,\n className,\n children,\n ...rest\n}: ContainerProps) {\n const Component = (as ?? 'div') as ElementType;\n const cls = cx('magi-container', `magi-container--${size}`, className);\n return (\n <Component className={cls} {...rest}>\n {children}\n </Component>\n );\n}\n","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type SectionSpacing = 'sm' \| 'md' \| 'lg' \| 'xl';\nexport type SectionSurface = 'default' \| 'raised' \| 'elevated';\n\nexport interface SectionProps extends HTMLAttributes<HTMLElement> {\n /* Vertical padding scale. Default: `lg`. /\n spacing?: SectionSpacing;\n /* Background surface. Default: `default` (transparent). /\n surface?: SectionSurface;\n /* Drop the inner Container padding. Useful for full-bleed content. /\n fullWidth?: boolean;\n /* Override the rendered tag. Default: `section`. /\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Section — page-level vertical rhythm primitive.\n \n @example\n * <Section spacing=\"xl\" surface=\"default\">...</Section>\n /\nexport function Section({\n spacing = 'lg',\n surface = 'default',\n fullWidth = false,\n as,\n className,\n children,\n ...rest\n}: SectionProps) {\n const Component = (as ?? 'section') as ElementType;\n const cls = cx(\n 'magi-section',\n `magi-section--${spacing}`,\n `magi-section--${surface}`,\n fullWidth && 'magi-section--fullWidth',\n className,\n );\n return (\n <Component className={cls} {...rest}>\n {children}\n </Component>\n );\n}\n","import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/classnames';\n\nexport type StackGap =\n \| '0' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16';\nexport type StackAlign = 'start' \| 'center' \| 'end' \| 'stretch';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n /* Layout direction. Default: vertical (column). /\n direction?: 'row' \| 'column';\n /* Gap token. Default: `4` (16px). /\n gap?: StackGap;\n /* Cross-axis alignment. Default: `stretch`. /\n align?: StackAlign;\n /* Allow wrapping when `direction=\"row\"`. Default: true. /\n wrap?: boolean;\n as?: ElementType;\n children?: ReactNode;\n}\n\n/\n Stack — vertical or horizontal flex primitive with semantic gap tokens.\n \n @example\n * <Stack gap=\"6\" align=\"center\">...</Stack>\n * <Stack direction=\"row\" gap=\"3\">...</Stack>\n /\nexport function Stack({\n direction = 'column',\n gap = '4',\n align = 'stretch',\n wrap = true,\n as,\n className,\n style,\n children,\n ...rest\n}: StackProps) {\n const Component = (as ?? 'div') as ElementType;\n const wrapStyle =\n direction === 'row' && !wrap ? { flexWrap: 'nowrap' as const } : undefined;\n const cls = cx(\n 'magi-stack',\n direction === 'row' && 'magi-stack--row',\n `magi-stack--gap-${gap}`,\n `magi-stack--align-${align}`,\n className,\n );\n\n return (\n <Component className={cls} style={{ ...wrapStyle, ...style }} {...rest}>\n {children}\n </Component>\n );\n}\n","import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger';\nexport type ButtonSize = 'sm' \| 'md' \| 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /* Visual style. Default: `primary`. /\n variant?: ButtonVariant;\n /* Height + padding tier. Default: `md`. /\n size?: ButtonSize;\n /* Show a spinner and disable interaction. /\n loading?: boolean;\n}\n\n/\n Button — the canonical MAGI action element.\n \n Pill-shaped, four variants (primary/secondary/ghost/danger), three sizes.\n * Use `primary` for the dominant action on a page; `secondary` for supporting\n * actions; `ghost` for inline/tertiary; `danger` for destructive intent.\n \n @example\n * <Button variant=\"primary\" onClick={...}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n /\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n variant = 'primary',\n size = 'md',\n loading = false,\n disabled,\n className,\n children,\n type,\n ...rest\n },\n ref,\n ) {\n const cls = cx(\n 'magi-button',\n `magi-button--${variant}`,\n `magi-button--${size}`,\n loading && 'magi-button--loading',\n className,\n );\n\n return (\n <button\n ref={ref}\n className={cls}\n type={type ?? 'button'}\n disabled={disabled \|\| loading}\n aria-busy={loading \|\| undefined}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type CardVariant = 'default' \| 'elevated' \| 'interactive';\nexport type CardPadding = 'none' \| 'sm' \| 'md' \| 'lg';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n /* Visual emphasis. Default: `default`. `interactive` adds hover state. /\n variant?: CardVariant;\n /* Inner padding. Default: `md`. /\n padding?: CardPadding;\n children?: ReactNode;\n}\n\n/\n Card — minimal dark surface with subtle border. Three variants:\n * default (flat), elevated (more contrast), interactive (hover state).\n \n @example\n * <Card variant=\"elevated\">...</Card>\n * <Card variant=\"interactive\" onClick={...}>...</Card>\n /\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n { variant = 'default', padding = 'md', className, children, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-card',\n `magi-card--${variant}`,\n `magi-card--padding-${padding}`,\n className,\n );\n return (\n <div ref={ref} className={cls} {...rest}>\n {children}\n </div>\n );\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type BadgeVariant = 'neutral' \| 'accent' \| 'success' \| 'warning' \| 'error';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /* Color/meaning. Default: `neutral`. /\n variant?: BadgeVariant;\n /* Show a leading colored dot. /\n dot?: boolean;\n children?: ReactNode;\n}\n\n/\n Badge — compact status / metadata label.\n \n @example\n * <Badge variant=\"accent\">128K context</Badge>\n * <Badge variant=\"success\" dot>Online</Badge>\n /\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { variant = 'neutral', dot = false, className, children, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-badge',\n `magi-badge--${variant}`,\n className,\n );\n return (\n <span ref={ref} className={cls} {...rest}>\n {dot ? <span className=\"magi-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n});\n","import {\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type CheckboxLabelPosition = 'right' \| 'left';\n\n/\n Omit `type` from native input attrs — this component is always\n * `type=\"checkbox\"` under the hood. Letting `type` pass through would\n * let consumers render e.g. `type=\"radio\"` with checkbox styles.\n /\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n /* Optional label rendered next to the checkbox. /\n children?: ReactNode;\n /* Position of the label relative to the checkbox. Default: 'right'. /\n labelPosition?: CheckboxLabelPosition;\n}\n\n/\n Checkbox — restyled native checkbox for the MAGI dark theme.\n \n Uses a native `<input type=\"checkbox\">` under the hood for full form\n * integration and screen-reader compatibility. The CSS only restyles\n * the visible state.\n \n @example\n * // Uncontrolled:\n * <Checkbox aria-label=\"Accept terms\" defaultChecked />\n \n // Controlled with label:\n * <Checkbox\n * checked={providers.includes('nvidia')}\n * onChange={(e) => toggle('nvidia', e.target.checked)}\n * >\n * NVIDIA\n * </Checkbox>\n /\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n function Checkbox(\n {\n children,\n labelPosition = 'right',\n className,\n disabled,\n ...rest\n },\n ref,\n ) {\n const input = (\n <input\n ref={ref}\n type=\"checkbox\"\n className={cx('magi-checkbox', className)}\n disabled={disabled}\n {...rest}\n />\n );\n\n if (children === undefined \|\| children === null) {\n return input;\n }\n\n return (\n <label\n className={cx(\n 'magi-checkbox-label',\n disabled && 'magi-checkbox-label--disabled',\n )}\n >\n {labelPosition === 'left' ? (\n <>\n <span>{children}</span>\n {input}\n </>\n ) : (\n <>\n {input}\n <span>{children}</span>\n </>\n )}\n </label>\n );\n },\n);","import { forwardRef, type InputHTMLAttributes } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type InputSize = 'sm' \| 'md' \| 'lg';\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n /* Visual size. Default: `md`. /\n inputSize?: InputSize;\n /* Error state — adds error border + aria-invalid. /\n invalid?: boolean;\n}\n\n/\n Input — `<input>` styled for the MAGI dark theme.\n \n Wraps the native element directly. No custom state management — value /\n * onChange / defaultValue / ref all pass through.\n \n @example\n * <Input placeholder=\"e.g. Coding assistant\" />\n * <Input type=\"password\" />\n * <Input invalid defaultValue=\"bad value\" />\n /\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { inputSize = 'md', invalid = false, className, ...rest },\n ref,\n) {\n const cls = cx(\n 'magi-input',\n `magi-input--${inputSize}`,\n invalid && 'magi-input--invalid',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={cls}\n aria-invalid={invalid \|\| undefined}\n {...rest}\n />\n );\n});","import {\n Children,\n cloneElement,\n isValidElement,\n useId,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { cx } from '../../utils/classnames';\n\ntype ChildProps = {\n id?: string;\n 'aria-describedby'?: string;\n 'aria-invalid'?: boolean \| 'grammar' \| 'spelling' \| 'false' \| 'true';\n 'aria-labelledby'?: string;\n};\n\nexport interface FormFieldProps {\n /* Visible label above the control. Required. /\n label: string;\n /* Optional helper text below the control. /\n helper?: string;\n /* Error message — overrides helper styling + sets aria-invalid + aria-describedby. /\n error?: string;\n /* The control itself (Input, Select, Segmented, etc.). /\n children: ReactNode;\n /* Stack alignment override. Default: stretch. /\n align?: 'start' \| 'center' \| 'end' \| 'stretch';\n /* Extra className for the wrapper. /\n className?: string;\n /* Optional id for the helper/error element (overrides the auto-generated one). /\n helperId?: string;\n}\n\n/\n Merge ARIA id-list attributes (space-separated per WAI-ARIA spec).\n * Empty / null / undefined entries are dropped.\n /\nfunction mergeIds(\n ...ids: Array<string \| undefined \| null>\n): string \| undefined {\n const filtered = ids.filter(\n (id): id is string => typeof id === 'string' && id.length > 0,\n );\n return filtered.length > 0 ? filtered.join(' ') : undefined;\n}\n\n/\n FormField — label + control + optional helper/error wrapper.\n \n Wires `aria-describedby` to the helper/error span and `aria-labelledby`\n * to the label, by cloning the single child element with the appropriate\n * ARIA attributes. Sets `aria-invalid=\"true\"` on the child when `error` is\n * present.\n \n Consumer-supplied ARIA attributes are preserved (merged, not overwritten).\n * For example, if the consumer passes `aria-describedby=\"external-help\"`,\n * the resulting attribute is `\"external-help <generated-helper-id>\"`.\n * This matches the WAI-ARIA spec for multi-value id lists.\n \n The child MUST be a single focusable element (Input, Select, native\n * `<input>`, Segmented, etc.). If `children` is not a valid React element,\n * the ARIA wiring is skipped — the label and helper/error still render.\n \n @example\n * <FormField label=\"Email\" helper=\"We'll never share this.\">\n * <Input type=\"email\" placeholder=\"you@example.com\" />\n * </FormField>\n \n <FormField label=\"Max models\" error=\"Pick a value between 1 and 10.\">\n * <Segmented value=\"3\" options={...} onChange={...} />\n * </FormField>\n /\nexport function FormField({\n label,\n helper,\n error,\n children,\n align = 'stretch',\n className,\n helperId,\n}: FormFieldProps) {\n const reactId = useId();\n const fieldId = `magi-field-${reactId}`;\n const labelId = `${fieldId}-label`;\n const describedById = helperId ?? `${fieldId}-helper`;\n const hasMessage = Boolean(error \|\| helper);\n\n let enhanced: ReactNode = children;\n if (isValidElement<ChildProps>(children)) {\n const existing = children.props;\n enhanced = cloneElement(children, {\n id: existing.id ?? fieldId,\n // MERGE with consumer-supplied IDs. The order is: consumer's first,\n // then FormField's. This matches ARIA's \"consumer-supplied IDs win\n // for ordering\" intuition — FormField's helpers are appended.\n 'aria-describedby': mergeIds(\n existing['aria-describedby'],\n hasMessage ? describedById : undefined,\n ),\n 'aria-labelledby': mergeIds(\n existing['aria-labelledby'],\n labelId,\n ),\n // aria-invalid: when FormField has an error, force true (overriding\n // consumer). When no error, preserve consumer's setting.\n 'aria-invalid': error ? true : (existing['aria-invalid'] ?? undefined),\n });\n }\n\n return (\n <div\n className={cx(\n 'magi-field',\n `magi-field--align-${align}`,\n className,\n )}\n >\n <label id={labelId} className=\"magi-field-label\">\n {label}\n </label>\n {enhanced}\n {hasMessage && (\n <span\n id={describedById}\n className={cx(\n 'magi-field-helper',\n error && 'magi-field-helper--error',\n )}\n >\n {error \|\| helper}\n </span>\n )}\n </div>\n );\n}","import type { ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type SegmentedSize = 'sm' \| 'md' \| 'lg';\n\nexport interface SegmentedOption<V extends string = string> {\n value: V;\n label: string;\n /* Optional: disable this individual option. /\n disabled?: boolean;\n}\n\nexport interface SegmentedProps<V extends string = string> {\n /* Currently selected option value. /\n value: V;\n /* Options to display. /\n options: SegmentedOption<V>[];\n /* Called when the user picks a different option. /\n onChange: (value: V) => void;\n /* Use accent color for the active state (cyan for tfi, etc.). Default: false. /\n accent?: boolean;\n /* Visual size. Default: `md`. /\n size?: SegmentedSize;\n /* Disable the whole control. /\n disabled?: boolean;\n /* Group label for screen readers. /\n 'aria-label'?: string;\n /* Optional id for the group. /\n id?: string;\n /* Extra className for the wrapper. /\n className?: string;\n /* Render-prop variant — render function receives each option and its state. /\n children?: (option: SegmentedOption<V>, state: {\n active: boolean;\n disabled: boolean;\n onSelect: () => void;\n }) => ReactNode;\n}\n\n/\n Segmented — pill-shaped single-select chip group.\n \n SINGLE-SELECT ONLY. For multi-select (e.g. provider toggles, multi-tag\n * pickers), use a `Checkbox` group instead — a multi-item segmented control\n * implies exclusive selection and confuses the interaction model.\n \n @example\n * <Segmented\n * value={contextMin}\n * options={[\n * { value: '128k', label: '128K+' },\n * { value: '32k', label: '32K+' },\n * { value: '8k', label: '8K+' },\n * { value: 'any', label: 'Any' },\n * ]}\n * onChange={(v) => setContextMin(v as ContextMin)}\n * />\n \n <Segmented value={cost} options={[...] onChange={...} accent />\n /\nexport function Segmented<V extends string = string>({\n value,\n options,\n onChange,\n accent = false,\n size = 'md',\n disabled = false,\n id,\n className,\n 'aria-label': ariaLabel,\n children,\n}: SegmentedProps<V>) {\n return (\n <div\n role=\"radiogroup\"\n id={id}\n aria-label={ariaLabel}\n className={cx(\n 'magi-segmented',\n `magi-segmented--${size}`,\n disabled && 'magi-segmented--disabled',\n className,\n )}\n >\n {options.map((opt) => {\n const active = opt.value === value;\n const isDisabled = !!(disabled \|\| opt.disabled);\n const onSelect = () => {\n if (isDisabled \|\| active) return;\n onChange(opt.value);\n };\n\n if (children) {\n return (\n <div key={opt.value}>\n {children(opt, { active, disabled: isDisabled, onSelect })}\n </div>\n );\n }\n\n return (\n <button\n key={opt.value}\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n disabled={isDisabled}\n onClick={onSelect}\n className={cx(\n 'magi-segmented-item',\n active && 'magi-segmented-item--active',\n accent && 'magi-segmented-item--accent',\n )}\n >\n {opt.label}\n </button>\n );\n })}\n </div>\n );\n}","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport type BannerVariant = 'warning' \| 'error' \| 'success' \| 'info';\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /* Semantic variant. Default: `warning`. /\n variant?: BannerVariant;\n /* Banner content. Inline elements (links, code) are allowed. /\n children: ReactNode;\n}\n\n/\n Banner — inline notice with a left-border accent.\n \n Use for hints, warnings, errors, and confirmations. Persists until the\n * condition resolves; no dismiss by default.\n \n - `warning` (default) — yellow accent, actionable risk\n * - `error` — red accent, blocker\n * - `success` — green accent, confirmation\n * - `info` — cyan accent, neutral hint (uses product accent)\n \n @example\n * <Banner variant=\"info\">No requirements set. <a href=\"/\">Go back</a>.</Banner>\n * <Banner variant=\"error\">Could not load KV catalog: {error.message}.</Banner>\n * <Banner variant=\"success\">Saved.</Banner>\n /\nexport function Banner({\n variant = 'warning',\n className,\n children,\n ...rest\n}: BannerProps) {\n return (\n <div\n role={variant === 'error' \|\| variant === 'warning' ? 'alert' : 'status'}\n className={cx(\n 'magi-banner',\n `magi-banner--${variant}`,\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n}","import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../../utils/classnames';\n\nexport interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {\n /* Optional bold title above the description (structured mode). /\n title?: string;\n /* Optional description text — used in structured mode. Defaults to children. /\n description?: ReactNode;\n /* Optional primary call-to-action (e.g. a Button or Link). /\n action?: ReactNode;\n /* Body content. Required in simple mode (when no `description`).\n * In structured mode it is shown only if `description` is not provided. /\n children?: ReactNode;\n}\n\n/\n EmptyState — centered placeholder for \"no data yet\" cases.\n \n Two patterns:\n \n @example Simple (string + inline elements):\n * <EmptyState>\n * No models match. Try loosening the constraints — <Link to=\"/\">edit requirements</Link>.\n * </EmptyState>\n \n @example Structured (title + description + action):\n * <EmptyState\n * title=\"Nothing selected\"\n * description=\"Pick models on the Browse page first.\"\n * action={<Button variant=\"primary\">Go to Browse</Button>}\n * />\n /\nexport function EmptyState({\n title,\n description,\n action,\n children,\n className,\n ...rest\n}: EmptyStateProps) {\n const structured = Boolean(title \|\| description \|\| action);\n const body = description ?? children;\n\n return (\n <div\n className={cx(\n 'magi-empty',\n structured && 'magi-empty--structured',\n className,\n )}\n {...rest}\n >\n {structured ? (\n <>\n {title ? <p className=\"magi-empty-title\">{title}</p> : null}\n {body !== undefined && body !== null ? (\n <p className=\"magi-empty-description\">{body}</p>\n ) : null}\n {action ? <div className=\"magi-empty-action\">{action}</div> : null}\n </>\n ) : (\n children\n )}\n </div>\n );\n}","import {\n createContext,\n useContext,\n useInsertionEffect,\n useMemo,\n type ReactNode,\n} from 'react';\n\nexport type AppAccent =\n \| 'green' // default — MAGI core\n \| 'cyan' // Token Factory Initializr\n \| 'violet' // API product\n \| 'amber' // Agent product\n \| 'white'; // monochrome MAGI\n\ninterface AccentTokens {\n '--magi-accent': string;\n '--magi-accent-hover': string;\n '--magi-accent-soft': string;\n '--magi-accent-contrast': string;\n}\n\nconst ACCENT_PRESETS: Record<AppAccent, AccentTokens> = {\n green: {\n '--magi-accent': '#00c853',\n '--magi-accent-hover': '#00e676',\n '--magi-accent-soft': 'rgba(0, 200, 83, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n cyan: {\n '--magi-accent': '#38bdf8',\n '--magi-accent-hover': '#7dd3fc',\n '--magi-accent-soft': 'rgba(56, 189, 248, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n violet: {\n '--magi-accent': '#8b5cf6',\n '--magi-accent-hover': '#a78bfa',\n '--magi-accent-soft': 'rgba(139, 92, 246, 0.08)',\n '--magi-accent-contrast': '#f5f5f7',\n },\n amber: {\n '--magi-accent': '#f59e0b',\n '--magi-accent-hover': '#fbbf24',\n '--magi-accent-soft': 'rgba(245, 158, 11, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n white: {\n '--magi-accent': '#ffffff',\n '--magi-accent-hover': '#f5f5f7',\n '--magi-accent-soft': 'rgba(255, 255, 255, 0.08)',\n '--magi-accent-contrast': '#050505',\n },\n};\n\ninterface AppThemeContextValue {\n accent: AppAccent;\n}\n\nconst AppThemeContext = createContext<AppThemeContextValue \| null>(null);\n\n/\n Hook for any JS-aware consumer that needs the current accent.\n * Returns `{ accent: 'green' }` (the default) when used outside an `<AppTheme>`.\n /\nexport function useAppTheme(): AppThemeContextValue {\n const ctx = useContext(AppThemeContext);\n return ctx ?? { accent: 'green' };\n}\n\nexport interface AppThemeProps {\n /* Accent preset. Default: `green`. /\n accent?: AppAccent;\n /* Optional product identifier. Sets `data-magi-product=\"<name>\"` on `<html>`. /\n name?: string;\n children?: ReactNode;\n}\n\n/\n AppTheme — application-level accent configuration.\n \n Renders only a React context provider (no DOM wrapper). On mount, sets\n * the four accent CSS variables on `<html>` so all descendants inherit via\n * CSS cascade. For scoped overrides within a subtree, consumers should use\n * `data-magi-accent`:\n \n <div data-magi-accent=\"danger\">\n * <Button variant=\"primary\">Delete</Button>\n * </div>\n \n SSR: useInsertionEffect does not run on the server, so on SSR pages\n * the default theme applies during the initial render. For SSR theming\n * without FOUC, set `data-magi-accent=\"<name>\"` on `<html>` in your\n * server-side layout — the CSS rule in globals.css picks it up.\n \n Nested <AppTheme>: each instance snapshots the previous accent values\n * on mount and restores them on unmount, so a child mounting and\n * unmounting leaves the outer theme intact. Note that CSS variables\n * are global (set on `<html>`), so siblings outside a child subtree\n * still see the child's accent — use `<div data-magi-accent=\"...\">`\n * for true CSS subtree scope.\n \n @example\n * function App() {\n * return (\n * <AppTheme accent=\"cyan\" name=\"token-factory\">\n * <Routes />\n * </AppTheme>\n * );\n * }\n */\nexport function AppTheme({\n accent = 'green',\n name,\n children,\n}: AppThemeProps) {\n const value = useMemo(() => ({ accent }), [accent]);\n\n useInsertionEffect(() => {\n if (typeof document === 'undefined') return;\n const tokens = ACCENT_PRESETS[accent];\n const root = document.documentElement;\n\n // Snapshot previous values so the cleanup can restore them on unmount\n // or accent change. This makes nested themes work correctly: the inner\n // theme restores the outer theme's values when it unmounts.\n const prev = {\n accent: root.style.getPropertyValue('--magi-accent'),\n accentHover: root.style.getPropertyValue('--magi-accent-hover'),\n accentSoft: root.style.getPropertyValue('--magi-accent-soft'),\n accentContrast: root.style.getPropertyValue('--magi-accent-contrast'),\n product: root.dataset.magiProduct,\n };\n\n root.style.setProperty('--magi-accent', tokens['--magi-accent']);\n root.style.setProperty('--magi-accent-hover', tokens['--magi-accent-hover']);\n root.style.setProperty('--magi-accent-soft', tokens['--magi-accent-soft']);\n root.style.setProperty('--magi-accent-contrast', tokens['--magi-accent-contrast']);\n\n if (name) {\n root.dataset.magiProduct = name;\n } else {\n delete root.dataset.magiProduct;\n }\n\n return () => {\n const restoreOrRemove = (prop: string, prevValue: string) => {\n if (prevValue) root.style.setProperty(prop, prevValue);\n else root.style.removeProperty(prop);\n };\n restoreOrRemove('--magi-accent', prev.accent);\n restoreOrRemove('--magi-accent-hover', prev.accentHover);\n restoreOrRemove('--magi-accent-soft', prev.accentSoft);\n restoreOrRemove('--magi-accent-contrast', prev.accentContrast);\n\n if (prev.product !== undefined) {\n root.dataset.magiProduct = prev.product;\n } else if (root.dataset.magiProduct !== undefined) {\n delete root.dataset.magiProduct;\n }\n };\n }, [accent, name]);\n\n return (\n <AppThemeContext.Provider value={value}>\n {children}\n </AppThemeContext.Provider>\n );\n}"],"names":["cx","parts","Container","size","as","className","children","rest","Component","cls","Section","spacing","surface","fullWidth","Stack","direction","gap","align","wrap","style","wrapStyle","jsx","Button","forwardRef","variant","loading","disabled","type","ref","Card","padding","Badge","dot","Checkbox","labelPosition","input","jsxs","Fragment","Input","inputSize","invalid","mergeIds","ids","filtered","id","FormField","label","helper","error","helperId","fieldId","useId","labelId","describedById","hasMessage","enhanced","isValidElement","existing","cloneElement","Segmented","value","options","onChange","accent","ariaLabel","opt","active","isDisabled","onSelect","Banner","EmptyState","title","description","action","structured","body","ACCENT_PRESETS","AppThemeContext","createContext","AppTheme","name","useMemo","useInsertionEffect","tokens","root","prev","restoreOrRemove","prop","prevValue"],"mappings":"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"}

package/dist/theme.d.ts CHANGED Viewed

@@ -1,26 +1,27 @@
 import { type ReactNode } from 'react';
-export type ProductAccent = 'green' | 'cyan' | 'violet' | 'amber' | 'white';
-interface ProductThemeContextValue {
-    accent: ProductAccent;
+export type AppAccent = 'green' | 'cyan' | 'violet' | 'amber' | 'white';
+interface AppThemeContextValue {
+    accent: AppAccent;
 }
 /**
  * Hook for any JS-aware consumer that needs the current accent.
- * Returns `{ accent: 'green' }` (the default) when used outside a `<ProductTheme>`.
+ * Returns `{ accent: 'green' }` (the default) when used outside an `<AppTheme>`.
  */
-export declare function useProductTheme(): ProductThemeContextValue;
-export interface ProductThemeProps {
+export declare function useAppTheme(): AppThemeContextValue;
+export interface AppThemeProps {
     /** Accent preset. Default: `green`. */
-    accent?: ProductAccent;
+    accent?: AppAccent;
     /** Optional product identifier. Sets `data-magi-product="<name>"` on `<html>`. */
     name?: string;
     children?: ReactNode;
 }
 /**
- * ProductTheme — overrides the MAGI accent for a subtree.
+ * AppTheme — application-level accent configuration.
  *
  * Renders only a React context provider (no DOM wrapper). On mount, sets
  * the four accent CSS variables on `<html>` so all descendants inherit via
- * CSS cascade. For scoped overrides within a subtree, consumers can use:
+ * CSS cascade. For scoped overrides within a subtree, consumers should use
+ * `data-magi-accent`:
  *
  *   <div data-magi-accent="danger">
  *     <Button variant="primary">Delete</Button>
@@ -31,9 +32,9 @@ export interface ProductThemeProps {
  * without FOUC, set `data-magi-accent="<name>"` on `<html>` in your
  * server-side layout — the CSS rule in globals.css picks it up.
  *
- * Nested <ProductTheme>: each instance snapshots the previous accent
- * values on mount and restores them on unmount, so a child mounting
- * and unmounting leaves the outer theme intact. Note that CSS variables
+ * Nested <AppTheme>: each instance snapshots the previous accent values
+ * on mount and restores them on unmount, so a child mounting and
+ * unmounting leaves the outer theme intact. Note that CSS variables
  * are global (set on `<html>`), so siblings outside a child subtree
  * still see the child's accent — use `<div data-magi-accent="...">`
  * for true CSS subtree scope.
@@ -41,12 +42,12 @@ export interface ProductThemeProps {
  * @example
  *   function App() {
  *     return (
- *       <ProductTheme accent="cyan" name="token-factory">
+ *       <AppTheme accent="cyan" name="token-factory">
  *         <Routes />
- *       </ProductTheme>
+ *       </AppTheme>
  *     );
  *   }
  */
-export declare function ProductTheme({ accent, name, children, }: ProductThemeProps): import("react").JSX.Element;
+export declare function AppTheme({ accent, name, children, }: AppThemeProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,~~aAAa~~,~~GACrB~~,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AA0CZ,UAAU,~~wBAAwB~~;~~IAChC~~,MAAM,EAAE,~~aAAa~~,CAAC;~~CACvB~~;AAID;;;GAGG;AACH,wBAAgB,~~eAAe~~,IAAI,~~wBAAwB~~,~~CAG1D~~;AAED,MAAM,WAAW,~~iBAAiB~~;~~IAChC~~,uCAAuC;IACvC,MAAM,CAAC,EAAE,~~aAAa~~,CAAC;~~IACvB~~,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG~~;AACH,wBAAgB,~~YAAY~~,CAAC,~~EAC3B~~,MAAgB,EAChB,IAAI,EACJ,QAAQ,GACT,EAAE,~~iBAAiB~~,+~~BAqDnB~~"}
1	+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AA0CZ,UAAU,oBAAoB;IAC5B,MAAM,EAAE,SAAS,CAAC;CACnB;AAID;;;GAGG;AACH,wBAAgB,WAAW,IAAI,oBAAoB,CAGlD;AAED,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAgB,EAChB,IAAI,EACJ,QAAQ,GACT,EAAE,aAAa,+BAqDf"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tokyo3rdhq/magi-design-system",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Shared visual foundation for the MAGI product family — dark-first, near-monochrome, restrained.",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,7 +8,6 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src/styles",
     "README.md"
   ],
   "exports": {

package/src/styles/index.css DELETED Viewed

@@ -1,32 +0,0 @@
-/* MAGI Design System — Single entry point for consumers
- *
- *   import '@tokyo3rdhq/magi-design-system/styles.css';
- *
- * Layer order (declared by the next line) determines cascade priority:
- * consumer unlayered styles always win over our layered rules.
- *
- *   browser defaults
- *     ↓ @layer magi.reset
- *     ↓ @layer magi.tokens
- *     ↓ @layer magi.foundation
- *     ↓ @layer magi.layout
- *     ↓ @layer magi.components
- *     ↓ consumer unlayered styles (always win)
- */
-@layer magi.reset, magi.tokens, magi.foundation, magi.layout, magi.components;
-@import "../tokens/index.css";
-@import "../foundation/index.css";
-@import "../layout/Container.css";
-@import "../layout/Section.css";
-@import "../layout/Stack.css";
-@import "../components/Button/Button.css";
-@import "../components/Card/Card.css";
-@import "../components/Badge/Badge.css";
-@import "../components/Checkbox/Checkbox.css";
-@import "../components/Input/Input.css";
-@import "../components/FormField/FormField.css";
-@import "../components/Segmented/Segmented.css";
-@import "../components/Banner/Banner.css";
-@import "../components/EmptyState/EmptyState.css";