@opalui/react 0.0.0-stage → 0.0.1

package/dist/internal/glass/material.d.ts

@@ -0,0 +1,48 @@
+/** OpalUI's material vocabulary. Bend is relative to the lens's shorter side;
+ * dispersion is the proportional RGB spread, frost is CSS pixels, rim is 0–1. */
+export type GlassSettings = {
+    bend: number;
+    dispersion: number;
+    frost: number;
+    rim: number;
+};
+export declare const materials: {
+    surface: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+    field: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+    menu: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+    thumb: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+    switch: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+    selection: {
+        bend: number;
+        dispersion: number;
+        frost: number;
+        rim: number;
+    };
+};
+export declare function resolveMaterial(base: GlassSettings, overrides?: Partial<GlassSettings>): GlassSettings;
+export declare const materialDefaults: string;

package/dist/internal/glass/material.js

@@ -0,0 +1,22 @@
+export const materials = {
+    surface: { bend: .22, dispersion: .12, frost: 2, rim: .3 },
+    field: { bend: 0, dispersion: 0, frost: 12, rim: .22 },
+    menu: { bend: 0, dispersion: 0, frost: 24, rim: .3 },
+    thumb: { bend: .25, dispersion: .2, frost: .15, rim: .4 },
+    switch: { bend: .45, dispersion: .04, frost: .25, rim: .65 },
+    selection: { bend: .3, dispersion: .16, frost: 0, rim: .4 },
+};
+export function resolveMaterial(base, overrides = {}) {
+    const bounded = (key, max) => {
+        const value = overrides[key] ?? base[key];
+        return Number.isFinite(value) ? Math.max(0, Math.min(max, value)) : base[key];
+    };
+    return { bend: bounded('bend', .6), dispersion: bounded('dispersion', 1), frost: bounded('frost', 24), rim: bounded('rim', 1) };
+}
+// Shared CSS defaults are derived from these same presets, including the
+// surface-only controls that don't need a displacement filter.
+export const materialDefaults = `
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:${materials.field.frost}px; --opal-material-rim:${materials.field.rim}; }
+:where(.opal-menu-panel) { --opal-material-frost:${materials.menu.frost}px; --opal-material-rim:${materials.menu.rim}; }
+`;
+//# sourceMappingURL=material.js.map

package/dist/internal/glass/material.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material.js","sourceRoot":"","sources":["../../../src/internal/glass/material.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1D,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;IACtD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;IACpD,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;IAC5D,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;CACpB,CAAA;AACzC,MAAM,UAAU,eAAe,CAAC,IAAmB,EAAE,YAAoC,EAAE;IACzF,MAAM,OAAO,GAAG,CAAC,GAAwB,EAAE,GAAW,EAAE,EAAE;QACxD,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAA;QACzC,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC/E,CAAC,CAAA;IACD,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAA;AACjI,CAAC;AAED,yEAAyE;AACzE,+DAA+D;AAC/D,MAAM,CAAC,MAAM,gBAAgB,GAAG;0EAC0C,SAAS,CAAC,KAAK,CAAC,KAAK,2BAA2B,SAAS,CAAC,KAAK,CAAC,GAAG;mDAC1F,SAAS,CAAC,IAAI,CAAC,KAAK,2BAA2B,SAAS,CAAC,IAAI,CAAC,GAAG;CACnH,CAAA","sourcesContent":["/** OpalUI's material vocabulary. Bend is relative to the lens's shorter side;\n * dispersion is the proportional RGB spread, frost is CSS pixels, rim is 0–1. */\nexport type GlassSettings = { bend: number; dispersion: number; frost: number; rim: number }\nexport const materials = {\n  surface: { bend: .22, dispersion: .12, frost: 2, rim: .3 },\n  field: { bend: 0, dispersion: 0, frost: 12, rim: .22 },\n  menu: { bend: 0, dispersion: 0, frost: 24, rim: .3 },\n  thumb: { bend: .25, dispersion: .2, frost: .15, rim: .4 },\n  switch: { bend: .45, dispersion: .04, frost: .25, rim: .65 },\n  selection: { bend: .3, dispersion: .16, frost: 0, rim: .4 },\n} satisfies Record<string, GlassSettings>\nexport function resolveMaterial(base: GlassSettings, overrides: Partial<GlassSettings> = {}): GlassSettings {\n  const bounded = (key: keyof GlassSettings, max: number) => {\n    const value = overrides[key] ?? base[key]\n    return Number.isFinite(value) ? Math.max(0, Math.min(max, value)) : base[key]\n  }\n  return { bend: bounded('bend', .6), dispersion: bounded('dispersion', 1), frost: bounded('frost', 24), rim: bounded('rim', 1) }\n}\n\n// Shared CSS defaults are derived from these same presets, including the\n// surface-only controls that don't need a displacement filter.\nexport const materialDefaults = `\n:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:${materials.field.frost}px; --opal-material-rim:${materials.field.rim}; }\n:where(.opal-menu-panel) { --opal-material-frost:${materials.menu.frost}px; --opal-material-rim:${materials.menu.rim}; }\n`\n"]}

package/dist/internal/glass/styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/internal/glass/styles.js

@@ -0,0 +1,4 @@
+import css from '../glass.css.js';
+import { materialDefaults } from './material.js';
+export default `${css}\n${materialDefaults}`;
+//# sourceMappingURL=styles.js.map

package/dist/internal/glass/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/internal/glass/styles.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,qBAAqB,CAAA;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,eAAe,GAAG,GAAG,KAAK,gBAAgB,EAAE,CAAA","sourcesContent":["import css from '../glass.css?inline'\nimport { materialDefaults } from './material.js'\nexport default `${css}\\n${materialDefaults}`\n"]}

package/dist/internal/glass/support.d.ts

@@ -0,0 +1,5 @@
+/** WebKit can drop HTML content painted through our animated SVG lens graph.
+ * CSS.supports only checks syntax, not whether this graph renders correctly.
+ * Include iOS browsers, which also use WebKit despite their browser branding.
+ */
+export declare function supportsOwnedGlassLens(userAgent: string): boolean;

package/dist/internal/glass/support.js

@@ -0,0 +1,8 @@
+/** WebKit can drop HTML content painted through our animated SVG lens graph.
+ * CSS.supports only checks syntax, not whether this graph renders correctly.
+ * Include iOS browsers, which also use WebKit despite their browser branding.
+ */
+export function supportsOwnedGlassLens(userAgent) {
+    return !/AppleWebKit\//.test(userAgent) || /(?:Chrome|Chromium|Edg)\//.test(userAgent);
+}
+//# sourceMappingURL=support.js.map

package/dist/internal/glass/support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"support.js","sourceRoot":"","sources":["../../../src/internal/glass/support.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CAAC,SAAiB;IACtD,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,2BAA2B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACxF,CAAC","sourcesContent":["/** WebKit can drop HTML content painted through our animated SVG lens graph.\n * CSS.supports only checks syntax, not whether this graph renders correctly.\n * Include iOS browsers, which also use WebKit despite their browser branding.\n */\nexport function supportsOwnedGlassLens(userAgent: string) {\n  return !/AppleWebKit\\//.test(userAgent) || /(?:Chrome|Chromium|Edg)\\//.test(userAgent)\n}\n"]}

package/dist/internal/glass.css

@@ -0,0 +1,7 @@
+
+
+/* Shared material. Public variables can be set once on a theme container. */
+:where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, inset 0 0 0 .5px rgb(255 255 255 / 7%), inset .65px 1px .65px rgb(255 255 255 / var(--opal-material-rim, .28)), inset -.4px -.65px .8px rgb(255 255 255 / calc(var(--opal-material-rim, .28) * .43)));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}

package/dist/internal/glass.css.js

@@ -0,0 +1 @@
+export default "/* Shared material. Public variables can be set once on a theme container. */\n:where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {\n  --_opal-glass-rim: var(--opal-glass-rim, inset 0 0 0 .5px rgb(255 255 255 / 7%), inset .65px 1px .65px rgb(255 255 255 / var(--opal-material-rim, .28)), inset -.4px -.65px .8px rgb(255 255 255 / calc(var(--opal-material-rim, .28) * .43)));\n  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));\n}\n";

package/dist/internal/styles.d.ts

@@ -0,0 +1,2 @@
+/** Stable on the server and client; a CSS change creates a new React resource. */
+export declare function stylesheetHref(name: string, css: string): string;

package/dist/internal/styles.js

@@ -0,0 +1,9 @@
+/** Stable on the server and client; a CSS change creates a new React resource. */
+export function stylesheetHref(name, css) {
+    let hash = 2166136261;
+    for (let index = 0; index < css.length; index++) {
+        hash = Math.imul(hash ^ css.charCodeAt(index), 16777619);
+    }
+    return `opalui-${name}-${(hash >>> 0).toString(36)}`;
+}
+//# sourceMappingURL=styles.js.map

package/dist/internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/internal/styles.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,UAAU,cAAc,CAAC,IAAY,EAAE,GAAW;IACtD,IAAI,IAAI,GAAG,UAAU,CAAA;IACrB,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAChD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAA;IAC1D,CAAC;IACD,OAAO,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAA;AACtD,CAAC","sourcesContent":["/** Stable on the server and client; a CSS change creates a new React resource. */\nexport function stylesheetHref(name: string, css: string): string {\n  let hash = 2166136261\n  for (let index = 0; index < css.length; index++) {\n    hash = Math.imul(hash ^ css.charCodeAt(index), 16777619)\n  }\n  return `opalui-${name}-${(hash >>> 0).toString(36)}`\n}\n"]}

package/dist/styles.css

@@ -0,0 +1,11 @@
+
+
+@import './components/button/button.css';
+@import './components/switch/switch.css';
+@import './components/segmented-control/segmented-control.css';
+@import './components/menu/menu.css';
+@import './components/input/input.css';
+@import './components/slider/slider.css';
+@import './components/textarea/textarea.css';
+@import './components/select/select.css';
+@import './components/glass/glass.css';

package/dist/styles.css.js

@@ -0,0 +1 @@
+export default "@import './components/button/button.css';\n@import './components/switch/switch.css';\n@import './components/segmented-control/segmented-control.css';\n@import './components/menu/menu.css';\n@import './components/input/input.css';\n@import './components/slider/slider.css';\n@import './components/textarea/textarea.css';\n@import './components/select/select.css';\n@import './components/glass/glass.css';\n";

package/package.json

@@ -1,6 +1,92 @@
 {
   "name": "@opalui/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Simple React components, styled with plain CSS.",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./button": {
+      "types": "./dist/components/button/button.d.ts",
+      "import": "./dist/components/button/button.js",
+      "default": "./dist/components/button/button.js"
+    },
+    "./button.css": "./dist/components/button/button.css",
+    "./switch": {
+      "types": "./dist/components/switch/switch.d.ts",
+      "import": "./dist/components/switch/switch.js",
+      "default": "./dist/components/switch/switch.js"
+    },
+    "./switch.css": "./dist/components/switch/switch.css",
+    "./segmented-control": {
+      "types": "./dist/components/segmented-control/segmented-control.d.ts",
+      "import": "./dist/components/segmented-control/segmented-control.js",
+      "default": "./dist/components/segmented-control/segmented-control.js"
+    },
+    "./segmented-control.css": "./dist/components/segmented-control/segmented-control.css",
+    "./menu": {
+      "types": "./dist/components/menu/menu.d.ts",
+      "import": "./dist/components/menu/menu.js",
+      "default": "./dist/components/menu/menu.js"
+    },
+    "./menu.css": "./dist/components/menu/menu.css",
+    "./input": {
+      "types": "./dist/components/input/input.d.ts",
+      "import": "./dist/components/input/input.js",
+      "default": "./dist/components/input/input.js"
+    },
+    "./input.css": "./dist/components/input/input.css",
+    "./slider": {
+      "types": "./dist/components/slider/slider.d.ts",
+      "import": "./dist/components/slider/slider.js",
+      "default": "./dist/components/slider/slider.js"
+    },
+    "./slider.css": "./dist/components/slider/slider.css",
+    "./textarea": {
+      "types": "./dist/components/textarea/textarea.d.ts",
+      "import": "./dist/components/textarea/textarea.js",
+      "default": "./dist/components/textarea/textarea.js"
+    },
+    "./textarea.css": "./dist/components/textarea/textarea.css",
+    "./select": {
+      "types": "./dist/components/select/select.d.ts",
+      "import": "./dist/components/select/select.js",
+      "default": "./dist/components/select/select.js"
+    },
+    "./select.css": "./dist/components/select/select.css",
+    "./glass": {
+      "types": "./dist/components/glass/glass.d.ts",
+      "import": "./dist/components/glass/glass.js",
+      "default": "./dist/components/glass/glass.js"
+    },
+    "./glass.css": "./dist/components/glass/glass.css"
+  },
+  "scripts": {
+    "build": "bun run build.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "prepack": "bun run build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.