@scalewing/react 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @scalewing/react
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial foundation: Box, Stack, Inline, Card, Text, ThemeProvider, and package-owned `styles.css`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Scalewing contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @scalewing/react
+
+DOM components plus the generated Scalewing stylesheet.
+
+```ts
+import '@scalewing/react/styles.css';
+import { Card, Stack, Text, ThemeProvider } from '@scalewing/react';
+```
+
+```html
+<div class="sw-padding-top-4 sw-padding-x-4"></div>
+```
+
+Import the CSS once at the application entry. Do not copy it into your source tree.
+
+React is a peer dependency. Rationale: the host app already owns the React runtime.

package/dist/class-names.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/class-names.js

@@ -0,0 +1,3 @@
+export function cx(...parts) {
+    return parts.filter((part) => Boolean(part)).join(' ');
+}

package/dist/components/Box.d.ts

@@ -0,0 +1,16 @@
+import { type RadiusStep, type SemanticColorKey } from '@scalewing/tokens';
+import { type HTMLAttributes } from 'react';
+import { type SpacingProps } from '../spacing-classes.js';
+export type BoxElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'aside' | 'span';
+export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
+    as?: BoxElement;
+    background?: Extract<SemanticColorKey, 'background' | 'surface'>;
+    radius?: RadiusStep;
+    border?: boolean;
+};
+export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & {
+    as?: BoxElement;
+    background?: Extract<SemanticColorKey, "background" | "surface">;
+    radius?: RadiusStep;
+    border?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Box.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+import { spacingClassNames } from '../spacing-classes.js';
+export const Box = forwardRef(function Box({ as = 'div', background, border, className, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, style, ...rest }, ref) {
+    const Component = as;
+    return (_jsx(Component, { ref: ref, className: cx(...spacingClassNames({
+            padding,
+            paddingBottom,
+            paddingLeft,
+            paddingRight,
+            paddingTop,
+            paddingX,
+            paddingY,
+        }), className), style: {
+            backgroundColor: background
+                ? `var(--sw-color-${background})`
+                : undefined,
+            border: border ? '1px solid var(--sw-color-border)' : undefined,
+            borderRadius: radius ? `var(--sw-radius-${radius})` : undefined,
+            ...style,
+        }, ...rest }));
+});

package/dist/components/Card.d.ts

@@ -0,0 +1,8 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type BoxProps } from './Box.js';
+export type CardVariant = 'outlined' | 'elevated';
+export type CardProps = Omit<BoxProps, 'as'> & {
+    padding?: SpacingStep;
+    variant?: CardVariant;
+};
+export declare function Card({ className, padding, variant, ...rest }: CardProps): import("react").JSX.Element;

package/dist/components/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+export function Card({ className, padding = 4, variant = 'outlined', ...rest }) {
+    return (_jsx(Box, { as: "section", className: cx('sw-card', variant === 'elevated' && 'sw-card-elevated', className), padding: padding, ...rest }));
+}

package/dist/components/Inline.d.ts

@@ -0,0 +1,10 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type BoxProps } from './Box.js';
+import { type Align, type Justify } from './Stack.js';
+export type InlineProps = BoxProps & {
+    align?: Align;
+    gap?: SpacingStep;
+    justify?: Justify;
+    wrap?: boolean;
+};
+export declare function Inline({ align, className, gap, justify, wrap, ...rest }: InlineProps): import("react").JSX.Element;

package/dist/components/Inline.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { spacingClass } from '@scalewing/tokens';
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+export function Inline({ align = 'center', className, gap = 0, justify = 'start', wrap = false, ...rest }) {
+    return (_jsx(Box, { className: cx('sw-inline', spacingClass('gap', 'all', gap), `sw-align-${align}`, `sw-justify-${justify}`, wrap && 'sw-wrap', className), ...rest }));
+}

package/dist/components/Stack.d.ts

@@ -0,0 +1,10 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type BoxProps } from './Box.js';
+export type Align = 'start' | 'center' | 'end' | 'stretch';
+export type Justify = 'start' | 'center' | 'end' | 'between';
+export type StackProps = BoxProps & {
+    align?: Align;
+    gap?: SpacingStep;
+    justify?: Justify;
+};
+export declare function Stack({ align, className, gap, justify, ...rest }: StackProps): import("react").JSX.Element;

package/dist/components/Stack.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { spacingClass } from '@scalewing/tokens';
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+export function Stack({ align = 'stretch', className, gap = 0, justify = 'start', ...rest }) {
+    return (_jsx(Box, { className: cx('sw-stack', spacingClass('gap', 'all', gap), `sw-align-${align}`, `sw-justify-${justify}`, className), ...rest }));
+}

package/dist/components/Text.d.ts

@@ -0,0 +1,15 @@
+import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
+import { type HTMLAttributes } from 'react';
+export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'label' | 'strong';
+export type TextProps = HTMLAttributes<HTMLElement> & {
+    as?: TextElement;
+    color?: SemanticColorKey;
+    truncate?: boolean;
+    variant?: TypographyVariant;
+};
+export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: TextElement;
+    color?: SemanticColorKey;
+    truncate?: boolean;
+    variant?: TypographyVariant;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Text.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+const defaultElement = {
+    body: 'p',
+    caption: 'span',
+    display: 'h1',
+    heading: 'h2',
+    label: 'span',
+    title: 'h3',
+};
+export const Text = forwardRef(function Text({ as, className, color = 'text', style, truncate = false, variant = 'body', ...rest }, ref) {
+    const Component = as ?? defaultElement[variant];
+    return (_jsx(Component, { ref: ref, className: cx(`sw-text-${variant}`, truncate && 'sw-truncate', className), style: { color: `var(--sw-color-${color})`, ...style }, ...rest }));
+});

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Box, type BoxElement, type BoxProps } from './components/Box.js';
+export { Card, type CardProps, type CardVariant } from './components/Card.js';
+export { Inline, type InlineProps } from './components/Inline.js';
+export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
+export { Text, type TextElement, type TextProps } from './components/Text.js';
+export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Box } from './components/Box.js';
+export { Card } from './components/Card.js';
+export { Inline } from './components/Inline.js';
+export { Stack, } from './components/Stack.js';
+export { Text } from './components/Text.js';
+export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';

package/dist/spacing-classes.d.ts

@@ -0,0 +1,11 @@
+import { type SpacingStep } from '@scalewing/tokens';
+export type SpacingProps = {
+    padding?: SpacingStep;
+    paddingX?: SpacingStep;
+    paddingY?: SpacingStep;
+    paddingTop?: SpacingStep;
+    paddingRight?: SpacingStep;
+    paddingBottom?: SpacingStep;
+    paddingLeft?: SpacingStep;
+};
+export declare function spacingClassNames(props: SpacingProps): string[];

package/dist/spacing-classes.js

@@ -0,0 +1,16 @@
+import { spacingClass, } from '@scalewing/tokens';
+const paddingPropToAxis = {
+    padding: 'all',
+    paddingX: 'x',
+    paddingY: 'y',
+    paddingTop: 'top',
+    paddingRight: 'right',
+    paddingBottom: 'bottom',
+    paddingLeft: 'left',
+};
+export function spacingClassNames(props) {
+    return Object.entries(paddingPropToAxis).flatMap(([prop, axis]) => {
+        const step = props[prop];
+        return step === undefined ? [] : [spacingClass('padding', axis, step)];
+    });
+}

package/dist/styles.css

@@ -0,0 +1,178 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #F4F6F8;
+  --sw-color-surface: #FFFFFF;
+  --sw-color-text: #121417;
+  --sw-color-muted: #3F4A55;
+  --sw-color-accent: #0B615E;
+  --sw-color-danger: #B42318;
+  --sw-color-success: #087443;
+  --sw-color-border: #D6DCE3;
+  --sw-space-0: 0px;
+  --sw-space-1: 4px;
+  --sw-space-2: 8px;
+  --sw-space-3: 12px;
+  --sw-space-4: 16px;
+  --sw-space-5: 24px;
+  --sw-space-6: 32px;
+  --sw-space-8: 48px;
+  --sw-radius-none: 0px;
+  --sw-radius-sm: 8px;
+  --sw-radius-md: 16px;
+  --sw-radius-lg: 24px;
+  --sw-radius-pill: 999px;
+  --sw-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --sw-elevation-sm: 0 1px 2px rgba(16, 18, 20, 0.06), 0 8px 24px rgba(16, 18, 20, 0.08);
+  --sw-elevation-md: 0 12px 40px rgba(16, 18, 20, 0.12);
+  --sw-container-max: 72rem;
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #101214;
+  --sw-color-surface: #1A1E22;
+  --sw-color-text: #F5F7F8;
+  --sw-color-muted: #C5CDD4;
+  --sw-color-accent: #7EDAD6;
+  --sw-color-danger: #F97066;
+  --sw-color-success: #5BE0A0;
+  --sw-color-border: #2C333A;
+  --sw-space-0: 0px;
+  --sw-space-1: 4px;
+  --sw-space-2: 8px;
+  --sw-space-3: 12px;
+  --sw-space-4: 16px;
+  --sw-space-5: 24px;
+  --sw-space-6: 32px;
+  --sw-space-8: 48px;
+  --sw-radius-none: 0px;
+  --sw-radius-sm: 8px;
+  --sw-radius-md: 16px;
+  --sw-radius-lg: 24px;
+  --sw-radius-pill: 999px;
+  --sw-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --sw-elevation-sm: 0 1px 2px rgba(16, 18, 20, 0.06), 0 8px 24px rgba(16, 18, 20, 0.08);
+  --sw-elevation-md: 0 12px 40px rgba(16, 18, 20, 0.12);
+  --sw-container-max: 72rem;
+}
+
+.sw-padding-0 { padding: var(--sw-space-0); }
+.sw-padding-1 { padding: var(--sw-space-1); }
+.sw-padding-2 { padding: var(--sw-space-2); }
+.sw-padding-3 { padding: var(--sw-space-3); }
+.sw-padding-4 { padding: var(--sw-space-4); }
+.sw-padding-5 { padding: var(--sw-space-5); }
+.sw-padding-6 { padding: var(--sw-space-6); }
+.sw-padding-8 { padding: var(--sw-space-8); }
+.sw-padding-x-0 { padding-inline: var(--sw-space-0); }
+.sw-padding-x-1 { padding-inline: var(--sw-space-1); }
+.sw-padding-x-2 { padding-inline: var(--sw-space-2); }
+.sw-padding-x-3 { padding-inline: var(--sw-space-3); }
+.sw-padding-x-4 { padding-inline: var(--sw-space-4); }
+.sw-padding-x-5 { padding-inline: var(--sw-space-5); }
+.sw-padding-x-6 { padding-inline: var(--sw-space-6); }
+.sw-padding-x-8 { padding-inline: var(--sw-space-8); }
+.sw-padding-y-0 { padding-block: var(--sw-space-0); }
+.sw-padding-y-1 { padding-block: var(--sw-space-1); }
+.sw-padding-y-2 { padding-block: var(--sw-space-2); }
+.sw-padding-y-3 { padding-block: var(--sw-space-3); }
+.sw-padding-y-4 { padding-block: var(--sw-space-4); }
+.sw-padding-y-5 { padding-block: var(--sw-space-5); }
+.sw-padding-y-6 { padding-block: var(--sw-space-6); }
+.sw-padding-y-8 { padding-block: var(--sw-space-8); }
+.sw-padding-top-0 { padding-top: var(--sw-space-0); }
+.sw-padding-top-1 { padding-top: var(--sw-space-1); }
+.sw-padding-top-2 { padding-top: var(--sw-space-2); }
+.sw-padding-top-3 { padding-top: var(--sw-space-3); }
+.sw-padding-top-4 { padding-top: var(--sw-space-4); }
+.sw-padding-top-5 { padding-top: var(--sw-space-5); }
+.sw-padding-top-6 { padding-top: var(--sw-space-6); }
+.sw-padding-top-8 { padding-top: var(--sw-space-8); }
+.sw-padding-right-0 { padding-right: var(--sw-space-0); }
+.sw-padding-right-1 { padding-right: var(--sw-space-1); }
+.sw-padding-right-2 { padding-right: var(--sw-space-2); }
+.sw-padding-right-3 { padding-right: var(--sw-space-3); }
+.sw-padding-right-4 { padding-right: var(--sw-space-4); }
+.sw-padding-right-5 { padding-right: var(--sw-space-5); }
+.sw-padding-right-6 { padding-right: var(--sw-space-6); }
+.sw-padding-right-8 { padding-right: var(--sw-space-8); }
+.sw-padding-bottom-0 { padding-bottom: var(--sw-space-0); }
+.sw-padding-bottom-1 { padding-bottom: var(--sw-space-1); }
+.sw-padding-bottom-2 { padding-bottom: var(--sw-space-2); }
+.sw-padding-bottom-3 { padding-bottom: var(--sw-space-3); }
+.sw-padding-bottom-4 { padding-bottom: var(--sw-space-4); }
+.sw-padding-bottom-5 { padding-bottom: var(--sw-space-5); }
+.sw-padding-bottom-6 { padding-bottom: var(--sw-space-6); }
+.sw-padding-bottom-8 { padding-bottom: var(--sw-space-8); }
+.sw-padding-left-0 { padding-left: var(--sw-space-0); }
+.sw-padding-left-1 { padding-left: var(--sw-space-1); }
+.sw-padding-left-2 { padding-left: var(--sw-space-2); }
+.sw-padding-left-3 { padding-left: var(--sw-space-3); }
+.sw-padding-left-4 { padding-left: var(--sw-space-4); }
+.sw-padding-left-5 { padding-left: var(--sw-space-5); }
+.sw-padding-left-6 { padding-left: var(--sw-space-6); }
+.sw-padding-left-8 { padding-left: var(--sw-space-8); }
+.sw-gap-0 { gap: var(--sw-space-0); }
+.sw-gap-1 { gap: var(--sw-space-1); }
+.sw-gap-2 { gap: var(--sw-space-2); }
+.sw-gap-3 { gap: var(--sw-space-3); }
+.sw-gap-4 { gap: var(--sw-space-4); }
+.sw-gap-5 { gap: var(--sw-space-5); }
+.sw-gap-6 { gap: var(--sw-space-6); }
+.sw-gap-8 { gap: var(--sw-space-8); }
+.sw-gap-x-0 { column-gap: var(--sw-space-0); }
+.sw-gap-x-1 { column-gap: var(--sw-space-1); }
+.sw-gap-x-2 { column-gap: var(--sw-space-2); }
+.sw-gap-x-3 { column-gap: var(--sw-space-3); }
+.sw-gap-x-4 { column-gap: var(--sw-space-4); }
+.sw-gap-x-5 { column-gap: var(--sw-space-5); }
+.sw-gap-x-6 { column-gap: var(--sw-space-6); }
+.sw-gap-x-8 { column-gap: var(--sw-space-8); }
+.sw-gap-y-0 { row-gap: var(--sw-space-0); }
+.sw-gap-y-1 { row-gap: var(--sw-space-1); }
+.sw-gap-y-2 { row-gap: var(--sw-space-2); }
+.sw-gap-y-3 { row-gap: var(--sw-space-3); }
+.sw-gap-y-4 { row-gap: var(--sw-space-4); }
+.sw-gap-y-5 { row-gap: var(--sw-space-5); }
+.sw-gap-y-6 { row-gap: var(--sw-space-6); }
+.sw-gap-y-8 { row-gap: var(--sw-space-8); }
+.sw-stack { display: flex; flex-direction: column; min-width: 0; }
+.sw-inline { display: flex; flex-direction: row; align-items: center; min-width: 0; }
+.sw-wrap { flex-wrap: wrap; }
+.sw-grow { flex-grow: 1; }
+.sw-full-width { width: 100%; }
+.sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }
+.sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.sw-align-start { align-items: flex-start; }
+.sw-align-center { align-items: center; }
+.sw-align-end { align-items: flex-end; }
+.sw-align-stretch { align-items: stretch; }
+.sw-justify-start { justify-content: flex-start; }
+.sw-justify-center { justify-content: center; }
+.sw-justify-end { justify-content: flex-end; }
+.sw-justify-between { justify-content: space-between; }
+
+.sw-card {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  color: var(--sw-color-text);
+}
+
+.sw-card-elevated {
+  border-color: transparent;
+  box-shadow: var(--sw-elevation-sm);
+}
+
+.sw-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-text-display { font-family: var(--sw-font-sans); font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.8px; }
+.sw-text-heading { font-family: var(--sw-font-sans); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.4px; }
+.sw-text-title { font-family: var(--sw-font-sans); font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -0.2px; }
+.sw-text-body { font-family: var(--sw-font-sans); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0px; }
+.sw-text-label { font-family: var(--sw-font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.2px; }
+.sw-text-caption { font-family: var(--sw-font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.2px; }

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type ColorScheme, type ColorTokens, type Theme } from '@scalewing/tokens';
+export type ThemeProviderProps = {
+    colorScheme?: ColorScheme | 'system';
+    colors?: Partial<ColorTokens>;
+    children: ReactNode;
+};
+export declare function ThemeProvider({ colorScheme, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import { createTheme, semanticColorKeys, } from '@scalewing/tokens';
+const ThemeContext = createContext(null);
+function schemeFromMedia() {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return 'light';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+}
+function themeCssVars(theme) {
+    const vars = {};
+    for (const key of semanticColorKeys) {
+        vars[`--sw-color-${key}`] = theme.colors[key];
+    }
+    return vars;
+}
+export function ThemeProvider({ colorScheme = 'system', colors, children, }) {
+    const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
+    useEffect(() => {
+        if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const onChange = () => {
+            setSystemScheme(media.matches ? 'dark' : 'light');
+        };
+        onChange();
+        media.addEventListener('change', onChange);
+        return () => media.removeEventListener('change', onChange);
+    }, [colorScheme]);
+    const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
+    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, colors }), [colors, resolvedScheme]);
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+}
+export function useTheme() {
+    const theme = useContext(ThemeContext);
+    if (!theme) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return theme;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@scalewing/react",
+  "version": "0.1.0",
+  "description": "Scalewing DOM components and package-owned CSS utilities.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/dna-consulting/scalewing.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://gitlab.com/dna-consulting/scalewing#readme",
+  "bugs": {
+    "url": "https://gitlab.com/dna-consulting/scalewing/-/issues"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./styles.css.d.ts",
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "styles.css.d.ts",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "@scalewing/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "jsdom": "^27.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json && cp ../tokens/dist/styles.css dist/styles.css",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/styles.css.d.ts

@@ -0,0 +1 @@
+export {};