@scalewing/react 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @scalewing/react
 
+## 0.2.0
+
+### Minor Changes
+
+- f35314a: Add Box `as="a"` for layout links and Field (label wrapping a native control, token gap) after fantasy-football. Press actions stay on Button; do not use Box as a button.
+- f35314a: Add Button (primary, secondary, ghost, danger; sm and md) for DOM and React Native after FutMas and coach-platform requested the same control. Includes onAccent/onDanger, 44px md hit target, focus ring, and disabled opacity tokens.
+- f35314a: Shift the default visual language to a quiet glass canvas: Apple-like neutrals and type, frosted Card, pill buttons, and generated document styles so links and native text controls are not user-agent chrome.
+
+### Patch Changes
+
+- Updated dependencies [f35314a]
+- Updated dependencies [f35314a]
+  - @scalewing/tokens@0.2.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -4,7 +4,15 @@ DOM components plus the generated Scalewing stylesheet.
 
 ```ts
 import '@scalewing/react/styles.css';
-import { Card, Stack, Text, ThemeProvider } from '@scalewing/react';
+import {
+  Box,
+  Button,
+  Card,
+  Field,
+  Stack,
+  Text,
+  ThemeProvider,
+} from '@scalewing/react';
 ```
 
 ```html
@@ -13,4 +21,6 @@ import { Card, Stack, Text, ThemeProvider } from '@scalewing/react';
 
 Import the CSS once at the application entry. Do not copy it into your source tree.
 
+`Box as="a"` is a layout link. Use `Button` for press actions. `Field` wraps a native `<input>` or `<select>` with a label and token gap; native text controls inherit the generated document canvas.
+
 React is a peer dependency. Rationale: the host app already owns the React runtime.

package/dist/components/Box.d.ts

@@ -1,14 +1,14 @@
 import { type RadiusStep, type SemanticColorKey } from '@scalewing/tokens';
-import { type HTMLAttributes } from 'react';
+import { type AnchorHTMLAttributes, 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> & {
+export type BoxElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'aside' | 'span' | 'a' | 'label';
+export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'download' | 'href' | 'rel' | 'target'> & {
     as?: BoxElement;
     background?: Extract<SemanticColorKey, 'background' | 'surface'>;
     radius?: RadiusStep;
     border?: boolean;
 };
-export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & {
+export declare const Box: import("react").ForwardRefExoticComponent<SpacingProps & HTMLAttributes<HTMLElement> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "download" | "href" | "target"> & {
     as?: BoxElement;
     background?: Extract<SemanticColorKey, "background" | "surface">;
     radius?: RadiusStep;

package/dist/components/Box.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+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) {

package/dist/components/Button.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonSize, type ButtonVariant } from '@scalewing/tokens';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type { ButtonSize, ButtonVariant };
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type'> & {
+    children: ReactNode;
+    onPress: () => void;
+    size?: ButtonSize;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: ButtonVariant;
+};
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type"> & {
+    children: ReactNode;
+    onPress: () => void;
+    size?: ButtonSize;
+    type?: "button" | "submit" | "reset";
+    variant?: ButtonVariant;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buttonClassNames, } from '@scalewing/tokens';
+import { forwardRef } from 'react';
+import { cx } from '../class-names.js';
+export const Button = forwardRef(function Button({ children, className, disabled = false, onPress, size = 'md', type = 'button', variant = 'primary', ...rest }, ref) {
+    return (_jsx("button", { ref: ref, className: cx(...buttonClassNames({ size, variant }), className), disabled: disabled, type: type, ...rest, onClick: onPress, children: children }));
+});

package/dist/components/Card.d.ts

@@ -1,6 +1,6 @@
-import { type SpacingStep } from '@scalewing/tokens';
+import { type SpacingStep, type CardVariant } from '@scalewing/tokens';
 import { type BoxProps } from './Box.js';
-export type CardVariant = 'outlined' | 'elevated';
+export type { CardVariant };
 export type CardProps = Omit<BoxProps, 'as'> & {
     padding?: SpacingStep;
     variant?: CardVariant;

package/dist/components/Card.js

@@ -1,6 +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 }));
+export function Card({ className, padding = 4, variant = 'glass', ...rest }) {
+    return (_jsx(Box, { as: "section", className: cx('sw-card', `sw-card-${variant}`, className), padding: padding, ...rest }));
 }

package/dist/components/Field.d.ts

@@ -0,0 +1,8 @@
+import { type SpacingStep } from '@scalewing/tokens';
+import { type ReactNode } from 'react';
+export type FieldProps = {
+    children: ReactNode;
+    gap?: SpacingStep;
+    label: string;
+};
+export declare function Field({ children, gap, label }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from './Stack.js';
+import { Text } from './Text.js';
+export function Field({ children, gap = 1, label }) {
+    return (_jsxs(Stack, { as: "label", gap: gap, children: [_jsx(Text, { as: "span", variant: "label", children: label }), children] }));
+}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
+export { Field, type FieldProps } from './components/Field.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';

package/dist/index.js

@@ -1,5 +1,7 @@
+export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
 export { Card } from './components/Card.js';
+export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
 export { Stack, } from './components/Stack.js';
 export { Text } from './components/Text.js';

package/dist/styles.css

@@ -1,14 +1,16 @@
 /* Generated by @scalewing/tokens. Do not edit by hand. */
 :root,
 [data-theme='light'] {
-  --sw-color-background: #F4F6F8;
+  --sw-color-background: #F5F5F7;
   --sw-color-surface: #FFFFFF;
-  --sw-color-text: #121417;
-  --sw-color-muted: #3F4A55;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #6E6E73;
   --sw-color-accent: #0B615E;
+  --sw-color-onAccent: #FFFFFF;
   --sw-color-danger: #B42318;
+  --sw-color-onDanger: #FFFFFF;
   --sw-color-success: #087443;
-  --sw-color-border: #D6DCE3;
+  --sw-color-border: #D2D2D7;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -22,21 +24,34 @@
   --sw-radius-md: 16px;
   --sw-radius-lg: 24px;
   --sw-radius-pill: 999px;
+  --sw-control-sm-min-height: 32px;
+  --sw-control-sm-padding-inline: 12px;
+  --sw-control-md-min-height: 44px;
+  --sw-control-md-padding-inline: 16px;
   --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-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
+  --sw-elevation-md: 0 16px 48px rgba(0, 0, 0, 0.1);
+  --sw-disabled-opacity: 0.4;
+  --sw-focus-ring-width: 2px;
+  --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(255, 255, 255, 0.78);
+  --sw-glass-border: rgba(255, 255, 255, 0.62);
 }
 
 [data-theme='dark'] {
-  --sw-color-background: #101214;
-  --sw-color-surface: #1A1E22;
-  --sw-color-text: #F5F7F8;
-  --sw-color-muted: #C5CDD4;
+  --sw-color-background: #000000;
+  --sw-color-surface: #1C1C1E;
+  --sw-color-text: #F5F5F7;
+  --sw-color-muted: #A1A1A6;
   --sw-color-accent: #7EDAD6;
+  --sw-color-onAccent: #101214;
   --sw-color-danger: #F97066;
+  --sw-color-onDanger: #101214;
   --sw-color-success: #5BE0A0;
-  --sw-color-border: #2C333A;
+  --sw-color-border: #3A3A3C;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -50,10 +65,73 @@
   --sw-radius-md: 16px;
   --sw-radius-lg: 24px;
   --sw-radius-pill: 999px;
+  --sw-control-sm-min-height: 32px;
+  --sw-control-sm-padding-inline: 12px;
+  --sw-control-md-min-height: 44px;
+  --sw-control-md-padding-inline: 16px;
   --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-elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
+  --sw-elevation-md: 0 16px 48px rgba(0, 0, 0, 0.1);
+  --sw-disabled-opacity: 0.4;
+  --sw-focus-ring-width: 2px;
+  --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(28, 28, 30, 0.72);
+  --sw-glass-border: rgba(255, 255, 255, 0.16);
+}
+
+html,
+body {
+  margin: 0;
+}
+
+[data-theme] {
+  background-color: var(--sw-color-background);
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 17px;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  min-height: 100vh;
+  min-height: 100dvh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+[data-theme] a {
+  color: var(--sw-color-accent);
+  text-decoration: none;
+}
+
+[data-theme] a:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+[data-theme] :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), select, textarea) {
+  background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  min-height: var(--sw-control-md-min-height);
+  padding-inline: var(--sw-control-md-padding-inline);
 }
 
 .sw-padding-0 { padding: var(--sw-space-0); }
@@ -153,26 +231,81 @@
 .sw-justify-between { justify-content: space-between; }
 
 .sw-card {
+  border-radius: var(--sw-radius-lg);
+  color: var(--sw-color-text);
+}
+
+.sw-card-glass {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+}
+
+.sw-card-outlined {
   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 {
+  background: var(--sw-color-surface);
   border-color: transparent;
   box-shadow: var(--sw-elevation-sm);
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .sw-card-glass,
+  .sw-button-secondary {
+    background: var(--sw-color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 .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; }
+.sw-text-display { font-family: var(--sw-font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.8px; }
+.sw-text-heading { font-family: var(--sw-font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.45px; }
+.sw-text-title { font-family: var(--sw-font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
+.sw-text-body { font-family: var(--sw-font-sans); font-size: 17px; line-height: 25px; font-weight: 400; letter-spacing: -0.2px; }
+.sw-text-label { font-family: var(--sw-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.2px; }
+.sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
+
+.sw-button {
+  appearance: none;
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  justify-content: center;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.sw-button:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
+.sw-button-secondary { background: var(--sw-glass-fill); border-color: var(--sw-glass-border); color: var(--sw-color-text); backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate)); -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate)); }
+.sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
+.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
+.sw-button-sm { min-height: 32px; padding-inline: 12px; }
+.sw-button-md { min-height: 44px; padding-inline: 16px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.1.0"
+    "@scalewing/tokens": "0.2.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",