@swell/swell-ui 0.0.0-stage → 0.1.1

package/dist/types/runtime/tokens.generated.d.ts

@@ -0,0 +1,492 @@
+export type Theme = "light" | "dark" | "system";
+export type Color = string | {
+    light: string;
+    dark: string;
+};
+/** The palette of a variant: the kit's `secondary`, or a host's own in `color`. */
+export interface Variant {
+    background?: Color;
+    foreground?: Color;
+    border?: Color;
+    accent?: Color;
+    shadow?: Color;
+}
+export type TokenType = "color" | "dimension" | "fontFamily" | "fontWeight" | "number" | "duration" | "cubicBezier" | "shadow";
+export type Attribute = "variant" | "size" | "type";
+export interface Config {
+    theme?: Theme;
+    color?: {
+        [variant: string]: Color | Variant | undefined;
+        background?: Color;
+        foreground?: Color;
+        border?: Color;
+        accent?: Color;
+        danger?: Color;
+        success?: Color;
+        warning?: Color;
+        secondary?: {
+            background?: Color;
+            foreground?: Color;
+            border?: Color;
+            accent?: Color;
+            shadow?: Color;
+        };
+    };
+    font?: {
+        family?: string | readonly string[];
+        size?: string;
+        weight?: number | string;
+        tracking?: number;
+        leading?: number;
+        caption?: {
+            size?: string;
+        };
+        footnote?: {
+            size?: string;
+        };
+        heading?: {
+            family?: string | readonly string[];
+            weight?: number | string;
+            tracking?: number;
+        };
+        medium?: {
+            weight?: number | string;
+        };
+        strong?: {
+            weight?: number | string;
+        };
+        bold?: {
+            weight?: number | string;
+        };
+    };
+    border?: {
+        radius?: string;
+        width?: string;
+        strong?: {
+            width?: string;
+        };
+    };
+    focus?: {
+        color?: Color;
+        width?: string;
+        offset?: string;
+    };
+    motion?: {
+        duration?: {
+            fast?: string;
+            base?: string;
+            slow?: string;
+            loop?: string;
+        };
+        easing?: string;
+        spring?: string;
+    };
+    control?: {
+        height?: string;
+        font?: {
+            size?: string;
+        };
+        xsmall?: {
+            height?: string;
+            font?: {
+                size?: string;
+            };
+        };
+        small?: {
+            height?: string;
+            font?: {
+                size?: string;
+            };
+        };
+        large?: {
+            height?: string;
+            font?: {
+                size?: string;
+            };
+        };
+        xlarge?: {
+            height?: string;
+            font?: {
+                size?: string;
+            };
+        };
+        disabled?: {
+            opacity?: number;
+        };
+    };
+    field?: {
+        color?: {
+            background?: Color;
+            foreground?: Color;
+            border?: Color;
+        };
+        hover?: {
+            color?: {
+                border?: Color;
+            };
+        };
+        focus?: {
+            color?: {
+                ring?: Color;
+            };
+        };
+        invalid?: {
+            color?: {
+                ring?: Color;
+            };
+        };
+        label?: {
+            font?: {
+                family?: string | readonly string[];
+                weight?: number | string;
+                tracking?: number;
+            };
+            color?: {
+                foreground?: Color;
+            };
+            position?: "above" | "floating";
+        };
+        ring?: {
+            width?: string;
+        };
+        gap?: string;
+        outline?: {
+            color?: {
+                background?: Color;
+            };
+        };
+        appearance?: "outline" | "filled" | "underline";
+    };
+    overlay?: {
+        border?: {
+            radius?: string;
+        };
+        color?: {
+            background?: Color;
+            border?: Color;
+            shadow?: Color;
+        };
+        shadow?: string;
+        padding?: string;
+        offset?: string;
+        height?: string;
+    };
+    components?: {
+        text?: {
+            font?: {
+                family?: string | readonly string[];
+                size?: string;
+                weight?: number | string;
+                tracking?: number;
+                leading?: number;
+            };
+            color?: {
+                accent?: Color;
+            };
+            title?: {
+                font?: {
+                    family?: string | readonly string[];
+                    size?: string;
+                    weight?: number | string;
+                    tracking?: number;
+                    leading?: number;
+                };
+            };
+            heading?: {
+                font?: {
+                    family?: string | readonly string[];
+                    size?: string;
+                    weight?: number | string;
+                    tracking?: number;
+                    leading?: number;
+                };
+            };
+            subheading?: {
+                font?: {
+                    family?: string | readonly string[];
+                    size?: string;
+                    weight?: number | string;
+                    tracking?: number;
+                    leading?: number;
+                };
+            };
+            strong?: {
+                font?: {
+                    weight?: number | string;
+                };
+            };
+            caption?: {
+                font?: {
+                    size?: string;
+                };
+            };
+            footnote?: {
+                font?: {
+                    size?: string;
+                };
+            };
+            eyebrow?: {
+                font?: {
+                    size?: string;
+                    weight?: number | string;
+                    tracking?: number;
+                };
+            };
+        };
+        link?: {
+            font?: {
+                weight?: number | string;
+            };
+            color?: {
+                accent?: Color;
+            };
+        };
+        button?: {
+            height?: string;
+            font?: {
+                size?: string;
+                tracking?: number;
+                weight?: number | string;
+            };
+            xsmall?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            small?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            large?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                    tracking?: number;
+                };
+            };
+            xlarge?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                    tracking?: number;
+                };
+            };
+            border?: {
+                radius?: string;
+            };
+            color?: {
+                accent?: Color;
+                background?: Color;
+                foreground?: Color;
+                border?: Color;
+                shadow?: Color;
+            };
+            shadow?: string;
+            hover?: {
+                shadow?: string;
+                offset?: string;
+            };
+            appearance?: "filled" | "outline" | "plain";
+            secondary?: {
+                appearance?: "filled" | "outline" | "plain";
+            };
+        };
+        checkbox?: {
+            border?: {
+                radius?: string;
+            };
+        };
+        radio?: {
+            border?: {
+                radius?: string;
+            };
+            color?: {
+                background?: Color;
+                border?: Color;
+                shadow?: Color;
+            };
+            checked?: {
+                color?: {
+                    background?: Color;
+                };
+            };
+            shadow?: string;
+            gap?: string;
+            button?: {
+                gap?: string;
+            };
+            appearance?: "plain" | "outline";
+            indicator?: {
+                position?: "start" | "end";
+            };
+        };
+        status?: {
+            border?: {
+                radius?: string;
+            };
+            color?: {
+                background?: Color;
+                foreground?: Color;
+                accent?: Color;
+                border?: Color;
+            };
+            danger?: {
+                color?: {
+                    accent?: Color;
+                    background?: Color;
+                    border?: Color;
+                };
+            };
+            success?: {
+                color?: {
+                    accent?: Color;
+                    background?: Color;
+                    border?: Color;
+                };
+            };
+            warning?: {
+                color?: {
+                    accent?: Color;
+                    background?: Color;
+                    border?: Color;
+                };
+            };
+            appearance?: "filled" | "outline" | "plain";
+        };
+        badge?: {
+            height?: string;
+            font?: {
+                size?: string;
+                weight?: number | string;
+            };
+            xsmall?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                    weight?: number | string;
+                };
+            };
+            small?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                    weight?: number | string;
+                };
+            };
+            large?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            xlarge?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            color?: {
+                background?: Color;
+                foreground?: Color;
+                border?: Color;
+                accent?: Color;
+            };
+            appearance?: "filled" | "outline";
+        };
+        chip?: {
+            height?: string;
+            font?: {
+                size?: string;
+                weight?: number | string;
+                tracking?: number;
+            };
+            xsmall?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            small?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            large?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            xlarge?: {
+                height?: string;
+                font?: {
+                    size?: string;
+                };
+            };
+            color?: {
+                background?: Color;
+                foreground?: Color;
+                border?: Color;
+                accent?: Color;
+            };
+        };
+        thumbnail?: {
+            border?: {
+                radius?: string;
+            };
+            color?: {
+                background?: Color;
+                foreground?: Color;
+                border?: Color;
+            };
+            font?: {
+                weight?: number | string;
+            };
+        };
+        card?: {
+            border?: {
+                radius?: string;
+            };
+            color?: {
+                background?: Color;
+                border?: Color;
+            };
+            appearance?: "outline" | "filled";
+        };
+        tabs?: {
+            border?: {
+                radius?: string;
+            };
+            indicator?: {
+                width?: string;
+            };
+            color?: {
+                background?: Color;
+                shadow?: Color;
+            };
+            font?: {
+                weight?: number | string;
+            };
+            shadow?: string;
+            appearance?: "underline" | "segmented";
+        };
+    };
+}
+export declare const DEFAULTS_CSS: string;
+export declare const GROUPS: Readonly<Record<string, "global" | "components">>;
+export declare const TOKENS: Readonly<Record<string, {
+    readonly type: TokenType;
+    readonly unit?: string;
+}>>;
+export declare const SETTINGS: Readonly<Record<string, {
+    readonly values: readonly string[];
+    readonly default: string;
+}>>;
+export declare const ATTRIBUTES: Readonly<Record<string, Partial<Record<Attribute, readonly string[]>>>>;
+export declare const STATES: Readonly<Record<string, readonly string[]>>;
+/** The components that take the variants of `color`: each role they draw, with the chain of their own token, which an element takes where its variant's palette is missing. */
+export declare const VARIANT_COLORS: Readonly<Record<string, Readonly<Record<string, string>>>>;

package/dist/types/runtime/values.d.ts

@@ -0,0 +1,6 @@
+/** Whether `value` fits a token of `name` and stays inside its own declaration. */
+export declare function isTokenValue(name: string, value: unknown): boolean;
+/** A copy of an accepted value with its data only: a color pair keeps `light` and `dark`. */
+export declare function plain(value: unknown): unknown;
+/** The CSS text of a configured value of token `name`. */
+export declare function toCss(name: string, value: unknown): string;

package/dist/types/runtime/variants.d.ts

@@ -0,0 +1,4 @@
+/** The stylesheet of the variants of a component's elements, or `undefined` for a component that takes none. */
+export declare function variantSheet(group: string | null): CSSStyleSheet | undefined;
+/** Whether an element of `group` takes `variant`. */
+export declare function takesVariant(group: string | null, variant: string): boolean;

package/package.json

@@ -1,6 +1,138 @@
 {
   "name": "@swell/swell-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Web components for Swell checkout, dashboard, apps and storefronts, styled by the host through design tokens.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/components/core/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./preact": {
+      "types": "./dist/frameworks/preact.d.ts"
+    },
+    "./solid": {
+      "types": "./dist/frameworks/solid.d.ts"
+    },
+    "./vue": {
+      "types": "./dist/frameworks/vue.d.ts"
+    },
+    "./svelte": {
+      "types": "./dist/frameworks/svelte.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./resolver.json": "./resolver.json",
+    "./tokens/*": "./tokens/*",
+    "./components/*": "./src/components/*",
+    "./web-types.json": "./dist/editors/web-types.json",
+    "./vscode.html-custom-data.json": "./dist/editors/vscode.html-custom-data.json",
+    "./vscode.css-custom-data.json": "./dist/editors/vscode.css-custom-data.json",
+    "./elements/*": {
+      "types": "./dist/elements/*.d.ts",
+      "default": "./dist/elements/*.js"
+    },
+    "./*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/*.js",
+    "./dist/elements/*.js",
+    "./dist/chunks/*.js"
+  ],
+  "types": "./dist/types/components/core/index.d.ts",
+  "web-types": "./dist/editors/web-types.json",
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "custom-elements.json",
+    "resolver.json",
+    "tokens",
+    "src/components/**/tokens*.json"
+  ],
+  "engines": {
+    "node": ">=22.18"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . && stylelint \"src/**/*.css\" --allow-empty-input && prettier --check .",
+    "format": "prettier --write . && eslint --fix . && stylelint \"src/**/*.css\" --fix --allow-empty-input",
+    "test": "vitest run",
+    "tokens": "node scripts/tokens/cli.ts",
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/package/types.ts && npm run analyze && node scripts/package/editors.ts && node scripts/package/react.ts",
+    "analyze": "cem analyze --config custom-elements-manifest.config.js",
+    "storybook": "npm run analyze && storybook dev -p 6006",
+    "build-storybook": "npm run analyze && storybook build",
+    "check": "npm run tokens -- --check && npm run typecheck && npm run lint && npm test && npm run build && node scripts/package/check.ts",
+    "release": "npm run check && npm pack",
+    "prepublishOnly": "npm run check",
+    "pretypecheck": "npm run analyze",
+    "pretest": "npm run analyze"
+  },
+  "peerDependencies": {
+    "preact": ">=10",
+    "react": ">=16.8",
+    "solid-js": ">=1",
+    "vue": ">=3.5"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@eslint/js": "10.0.1",
+    "@storybook/addon-a11y": "10.6.6",
+    "@storybook/addon-docs": "10.6.6",
+    "@storybook/addon-vitest": "10.6.6",
+    "@storybook/web-components-vite": "10.6.6",
+    "@types/node": "22.20.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/browser": "5.1.0",
+    "@vitest/browser-playwright": "5.1.0",
+    "@wc-toolkit/jsx-types": "1.8.2",
+    "@wc-toolkit/svelte-types": "1.0.3",
+    "@wc-toolkit/vuejs-types": "1.0.3",
+    "custom-element-jet-brains-integration": "1.8.0",
+    "custom-element-vs-code-integration": "1.5.0",
+    "eslint": "10.14.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-storybook": "10.6.6",
+    "eslint-plugin-wc": "3.1.0",
+    "globals": "17.14.0",
+    "lit": "3.3.3",
+    "playwright": "1.65.0",
+    "prettier": "3.9.10",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.6",
+    "stylelint": "18.0.0",
+    "stylelint-config-standard": "41.0.0",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.72.1",
+    "vite": "8.3.6",
+    "vitest": "5.1.0"
+  },
+  "customElements": "custom-elements.json"
+}