@vio-live/web-sdk 0.1.0 → 0.2.0

package/dist/ui/index.js

@@ -1,4 +1,138 @@
-export { VIO_UI_VERSION, VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens } from '../chunk-4CCGE7DE.js';
-import '../chunk-5SPY7TH6.js';
+import { registerVioElements } from '../chunk-7JSSYPRN.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, registerVioElements } from '../chunk-7JSSYPRN.js';
+import '../chunk-SOO2G6CF.js';
+
+// src/ui/tokens.ts
+var VioTokens = {
+  color: {
+    text: {
+      primary: "#0a0a0a",
+      secondary: "#666666",
+      tertiary: "#999999",
+      onPrimary: "#ffffff"
+    },
+    accent: {
+      editorial: "#c14a3b"
+      // "REDAKSJONENS FAVORITTER" red
+    },
+    surface: {
+      base: "#ffffff",
+      muted: "#f2f2f2",
+      // product image background
+      hover: "#fafafa"
+    },
+    border: {
+      subtle: "#e5e5e5",
+      default: "#cccccc"
+    }
+  },
+  font: {
+    serif: '"Tinos", "Playfair Display", Georgia, serif',
+    sans: '"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif'
+  },
+  size: {
+    xs: "12px",
+    sm: "14px",
+    md: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "32px",
+    "3xl": "40px"
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  tracking: {
+    label: "0.1em",
+    // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)
+    title: "0"
+  },
+  lineHeight: {
+    tight: 1.1,
+    snug: 1.3,
+    normal: 1.5
+  },
+  space: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px",
+    "3xl": "64px"
+  },
+  radius: {
+    none: "0",
+    sm: "2px",
+    md: "4px",
+    lg: "8px",
+    full: "9999px"
+  }
+};
+var VIO_TOKENS_CSS = `
+  :root {
+    /* color \u2014 text */
+    --vio-color-text:           ${VioTokens.color.text.primary};
+    --vio-color-text-secondary: ${VioTokens.color.text.secondary};
+    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};
+    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};
+
+    /* color \u2014 accent */
+    --vio-color-accent: ${VioTokens.color.accent.editorial};
+
+    /* color \u2014 surface */
+    --vio-color-surface:       ${VioTokens.color.surface.base};
+    --vio-color-surface-muted: ${VioTokens.color.surface.muted};
+    --vio-color-surface-hover: ${VioTokens.color.surface.hover};
+
+    /* color \u2014 border */
+    --vio-color-border:         ${VioTokens.color.border.subtle};
+    --vio-color-border-default: ${VioTokens.color.border.default};
+
+    /* font */
+    --vio-font-serif: ${VioTokens.font.serif};
+    --vio-font-sans:  ${VioTokens.font.sans};
+
+    /* size */
+    --vio-size-xs: ${VioTokens.size.xs};
+    --vio-size-sm: ${VioTokens.size.sm};
+    --vio-size-md: ${VioTokens.size.md};
+    --vio-size-lg: ${VioTokens.size.lg};
+    --vio-size-xl: ${VioTokens.size.xl};
+
+    /* tracking (uppercase letterspacing) */
+    --vio-tracking-label: ${VioTokens.tracking.label};
+
+    /* space */
+    --vio-space-xs: ${VioTokens.space.xs};
+    --vio-space-sm: ${VioTokens.space.sm};
+    --vio-space-md: ${VioTokens.space.md};
+    --vio-space-lg: ${VioTokens.space.lg};
+    --vio-space-xl: ${VioTokens.space.xl};
+
+    /* radius */
+    --vio-radius-sm: ${VioTokens.radius.sm};
+    --vio-radius-md: ${VioTokens.radius.md};
+    --vio-radius-lg: ${VioTokens.radius.lg};
+  }
+`;
+function injectTokens() {
+  if (typeof document === "undefined") return;
+  if (document.querySelector('style[data-vio="tokens"]') !== null) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-vio", "tokens");
+  style.textContent = VIO_TOKENS_CSS;
+  document.head.appendChild(style);
+}
+injectTokens();
+
+// src/ui/index.ts
+registerVioElements();
+var VIO_UI_VERSION = "0.2.0";
+
+export { VIO_UI_VERSION, VioTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../src/ui/tokens.ts","../../src/ui/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Vio Design Tokens — editorial commerce aesthetic.\n *\n * Extracted from the Allermedia \"Mote & Livsstil\" reference (the target\n * pilot site). Mood: Vogue-like fashion magazine — serif headlines,\n * sans-serif body, near-monochrome palette, terracotta accent for\n * editorial labels (\"REDAKSJONENS FAVORITTER\").\n *\n * Tokens are exposed both as a typed TS object (`VioTokens`) and as\n * CSS custom properties on `:root` (auto-injected when this module is\n * imported in a browser). Consumers can override individual variables\n * to re-skin without touching SDK source.\n */\n\nexport const VioTokens = {\n  color: {\n    text: {\n      primary: '#0a0a0a',\n      secondary: '#666666',\n      tertiary: '#999999',\n      onPrimary: '#ffffff',\n    },\n    accent: {\n      editorial: '#c14a3b', // \"REDAKSJONENS FAVORITTER\" red\n    },\n    surface: {\n      base: '#ffffff',\n      muted: '#f2f2f2', // product image background\n      hover: '#fafafa',\n    },\n    border: {\n      subtle: '#e5e5e5',\n      default: '#cccccc',\n    },\n  },\n  font: {\n    serif: '\"Tinos\", \"Playfair Display\", Georgia, serif',\n    sans: '\"Inter\", -apple-system, \"Helvetica Neue\", Arial, sans-serif',\n  },\n  size: {\n    xs: '12px',\n    sm: '14px',\n    md: '16px',\n    lg: '20px',\n    xl: '24px',\n    '2xl': '32px',\n    '3xl': '40px',\n  },\n  weight: {\n    regular: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700,\n  },\n  tracking: {\n    label: '0.1em', // uppercase labels (BRAND, RETAILER, REDAKSJONENS FAVORITTER)\n    title: '0',\n  },\n  lineHeight: {\n    tight: 1.1,\n    snug: 1.3,\n    normal: 1.5,\n  },\n  space: {\n    xs: '4px',\n    sm: '8px',\n    md: '16px',\n    lg: '24px',\n    xl: '32px',\n    '2xl': '48px',\n    '3xl': '64px',\n  },\n  radius: {\n    none: '0',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    full: '9999px',\n  },\n} as const\n\n/**\n * CSS Custom Properties — generated from VioTokens. Injected once into\n * the document head on first import. Consumers can override any\n * `--vio-*` var on their root or component selector to customise.\n */\nconst VIO_TOKENS_CSS = `\n  :root {\n    /* color — text */\n    --vio-color-text:           ${VioTokens.color.text.primary};\n    --vio-color-text-secondary: ${VioTokens.color.text.secondary};\n    --vio-color-text-tertiary:  ${VioTokens.color.text.tertiary};\n    --vio-color-text-on-primary:${VioTokens.color.text.onPrimary};\n\n    /* color — accent */\n    --vio-color-accent: ${VioTokens.color.accent.editorial};\n\n    /* color — surface */\n    --vio-color-surface:       ${VioTokens.color.surface.base};\n    --vio-color-surface-muted: ${VioTokens.color.surface.muted};\n    --vio-color-surface-hover: ${VioTokens.color.surface.hover};\n\n    /* color — border */\n    --vio-color-border:         ${VioTokens.color.border.subtle};\n    --vio-color-border-default: ${VioTokens.color.border.default};\n\n    /* font */\n    --vio-font-serif: ${VioTokens.font.serif};\n    --vio-font-sans:  ${VioTokens.font.sans};\n\n    /* size */\n    --vio-size-xs: ${VioTokens.size.xs};\n    --vio-size-sm: ${VioTokens.size.sm};\n    --vio-size-md: ${VioTokens.size.md};\n    --vio-size-lg: ${VioTokens.size.lg};\n    --vio-size-xl: ${VioTokens.size.xl};\n\n    /* tracking (uppercase letterspacing) */\n    --vio-tracking-label: ${VioTokens.tracking.label};\n\n    /* space */\n    --vio-space-xs: ${VioTokens.space.xs};\n    --vio-space-sm: ${VioTokens.space.sm};\n    --vio-space-md: ${VioTokens.space.md};\n    --vio-space-lg: ${VioTokens.space.lg};\n    --vio-space-xl: ${VioTokens.space.xl};\n\n    /* radius */\n    --vio-radius-sm: ${VioTokens.radius.sm};\n    --vio-radius-md: ${VioTokens.radius.md};\n    --vio-radius-lg: ${VioTokens.radius.lg};\n  }\n`\n\nfunction injectTokens(): void {\n  if (typeof document === 'undefined') return\n  if (document.querySelector('style[data-vio=\"tokens\"]') !== null) return\n  const style = document.createElement('style')\n  style.setAttribute('data-vio', 'tokens')\n  style.textContent = VIO_TOKENS_CSS\n  document.head.appendChild(style)\n}\n\ninjectTokens()\n","/**\n * Vio UI — Web Components + design tokens.\n *\n * Importing this file (directly or via the main `vio` entry) has two\n * side-effects:\n *   1. Injects design tokens as CSS custom properties on `:root`\n *   2. Registers all `<vio-*>` custom elements (via `registerVioElements()`)\n *\n * Registration goes through an explicit function call (see ./elements) so it\n * survives tree-shaking while keeping `./core` tree-shakeable.\n *\n * SSR-safe: every side-effect guards on `typeof document !== 'undefined'`.\n */\n\nimport './tokens.js'\nimport { registerVioElements } from './elements.js'\n\n// Auto-register on import, so the conventional `import '@vio-live/web-sdk/ui'`\n// keeps working. This call is what pins the registration into this entry.\nregisterVioElements()\n\nexport { VioTokens } from './tokens.js'\nexport {\n  registerVioElements,\n  VioProduct,\n  VioProductCarousel,\n  VioProductDetail,\n  VioCart,\n  VioCheckout,\n} from './elements.js'\n\nexport const VIO_UI_VERSION = '0.2.0'\n"]}

package/dist/{vio-checkout-D8B4Upk8.d.ts → vio-checkout-CrC5tvmh.d.ts}

@@ -162,7 +162,6 @@ declare class VioCart extends LitElement {
     /** Drawer visibility. Reflects to attribute for `:host([open])`. */
     open: boolean;
     heading: string;
-    checkoutLabel: string;
     emptyLabel: string;
     subtotalLabel: string;
     private carts;

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
-    "./dist/**"
+    "./dist/ui/index.js",
+    "./dist/react/index.js"
   ],
   "exports": {
     ".": {
@@ -21,6 +22,10 @@
     "./ui": {
       "types": "./dist/ui/index.d.ts",
       "import": "./dist/ui/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
     }
   },
   "files": [
@@ -40,8 +45,18 @@
     "graphql-request": "^7.1.0",
     "lit": "^3.2.0"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@lit/react": "^1.0.8",
     "@types/node": "^22.10.0",
+    "@types/react": "^19.2.17",
     "tsup": "^8.5.1",
     "typescript": "^5.6.3",
     "vite": "^6.0.0",
@@ -65,6 +80,7 @@
     "checkout",
     "web-components",
     "lit",
+    "react",
     "klarna",
     "editorial-commerce"
   ],