@omniviewdev/ui 0.1.10 → 0.2.0

package/dist/tokens.css

@@ -242,6 +242,122 @@
   --ov-accent-fg:     #79C0FF;
 }
 
+/* ================================================================
+ * SOLARIZED DARK
+ * Ethan Schoonover's Solarized palette — dark variant.
+ * Overrides the gray-scale primitives so that var()-based semantic
+ * tokens (backgrounds, borders) resolve automatically.
+ * ================================================================ */
+[data-ov-theme="solarized-dark"] {
+  /* Neutral scale: base03 → base02 → base01 → base00 → base0 → base1 → base2 */
+  --ov-scale-gray-0:  #002B36;
+  --ov-scale-gray-1:  #04313C;
+  --ov-scale-gray-2:  #073642;
+  --ov-scale-gray-3:  #133E49;
+  --ov-scale-gray-4:  #1E4651;
+  --ov-scale-gray-5:  #2A4E58;
+  --ov-scale-gray-6:  #35565F;
+  --ov-scale-gray-7:  #415E66;
+  --ov-scale-gray-8:  #4C666E;
+  --ov-scale-gray-9:  #586E75;
+  --ov-scale-gray-10: #657B83;
+  --ov-scale-gray-11: #839496;
+  --ov-scale-gray-12: #93A1A1;
+  --ov-scale-gray-13: #EEE8D5;
+
+  --ov-fg-base:     #93A1A1;
+  --ov-fg-default:  rgba(147, 161, 161, 0.92);
+  --ov-fg-muted:    rgba(147, 161, 161, 0.64);
+  --ov-fg-faint:    rgba(147, 161, 161, 0.44);
+  --ov-fg-disabled: rgba(147, 161, 161, 0.28);
+  --ov-fg-accent:   #268BD2;
+
+  --ov-accent:        #268BD2;
+  --ov-accent-muted:  rgba(38, 139, 210, 0.20);
+  --ov-accent-subtle: rgba(38, 139, 210, 0.10);
+  --ov-accent-fg:     #268BD2;
+
+  --ov-success-emphasis: #5B6B00;
+  --ov-success-default:  #859900;
+  --ov-success-muted:    rgba(133, 153, 0, 0.12);
+
+  --ov-warning-emphasis: #7B5D00;
+  --ov-warning-default:  #B58900;
+  --ov-warning-muted:    rgba(181, 137, 0, 0.12);
+
+  --ov-danger-emphasis:  #B5211E;
+  --ov-danger-default:   #DC322F;
+  --ov-danger-muted:     rgba(220, 50, 47, 0.12);
+
+  --ov-info-emphasis:    #1A6091;
+  --ov-info-default:     #268BD2;
+  --ov-info-muted:       rgba(38, 139, 210, 0.12);
+
+  --ov-shadow-sm: 0 1px 3px rgba(0, 20, 26, 0.30), 0 1px 2px rgba(0, 20, 26, 0.20);
+  --ov-shadow-md: 0 4px 12px rgba(0, 20, 26, 0.35), 0 2px 4px rgba(0, 20, 26, 0.25);
+  --ov-shadow-lg: 0 8px 24px rgba(0, 20, 26, 0.40), 0 4px 8px rgba(0, 20, 26, 0.30);
+  --ov-shadow-xl: 0 16px 48px rgba(0, 20, 26, 0.45);
+
+  --ov-state-hover:    rgba(147, 161, 161, 0.04);
+  --ov-state-active:   rgba(147, 161, 161, 0.07);
+  --ov-state-selected: var(--ov-accent-subtle);
+  --ov-state-focus:    0 0 0 2px var(--ov-accent);
+}
+
+/* ================================================================
+ * SOLARIZED LIGHT
+ * Ethan Schoonover's Solarized palette — light variant.
+ * ================================================================ */
+[data-ov-theme="solarized-light"] {
+  --ov-bg-base:             #FDF6E3;
+  --ov-bg-surface:          #EEE8D5;
+  --ov-bg-surface-raised:   #FDF6E3;
+  --ov-bg-surface-overlay:  #FDF6E3;
+  --ov-bg-surface-inset:    #E4DECB;
+
+  --ov-fg-base:     #586E75;
+  --ov-fg-default:  rgba(88, 110, 117, 0.92);
+  --ov-fg-muted:    rgba(88, 110, 117, 0.64);
+  --ov-fg-faint:    rgba(88, 110, 117, 0.44);
+  --ov-fg-disabled: rgba(88, 110, 117, 0.28);
+  --ov-fg-accent:   #268BD2;
+
+  --ov-border-default:  #C9C2AF;
+  --ov-border-muted:    #DDD6C1;
+  --ov-border-emphasis: #93A1A1;
+
+  --ov-accent:        #268BD2;
+  --ov-accent-muted:  rgba(38, 139, 210, 0.20);
+  --ov-accent-subtle: rgba(38, 139, 210, 0.10);
+  --ov-accent-fg:     #1A6091;
+
+  --ov-success-emphasis: #5B6B00;
+  --ov-success-default:  #859900;
+  --ov-success-muted:    rgba(133, 153, 0, 0.10);
+
+  --ov-warning-emphasis: #7B5D00;
+  --ov-warning-default:  #B58900;
+  --ov-warning-muted:    rgba(181, 137, 0, 0.10);
+
+  --ov-danger-emphasis:  #B5211E;
+  --ov-danger-default:   #DC322F;
+  --ov-danger-muted:     rgba(220, 50, 47, 0.10);
+
+  --ov-info-emphasis:    #1A6091;
+  --ov-info-default:     #268BD2;
+  --ov-info-muted:       rgba(38, 139, 210, 0.10);
+
+  --ov-shadow-sm: 0 1px 3px rgba(88, 110, 117, 0.10), 0 1px 2px rgba(88, 110, 117, 0.06);
+  --ov-shadow-md: 0 4px 12px rgba(88, 110, 117, 0.12), 0 2px 4px rgba(88, 110, 117, 0.08);
+  --ov-shadow-lg: 0 8px 24px rgba(88, 110, 117, 0.16), 0 4px 8px rgba(88, 110, 117, 0.10);
+  --ov-shadow-xl: 0 16px 48px rgba(88, 110, 117, 0.20);
+
+  --ov-state-hover:    rgba(88, 110, 117, 0.04);
+  --ov-state-active:   rgba(88, 110, 117, 0.07);
+  --ov-state-selected: var(--ov-accent-subtle);
+  --ov-state-focus:    0 0 0 2px var(--ov-accent);
+}
+
 /* ================================================================
  * REDUCED MOTION
  * ================================================================ */

package/package.json

@@ -2,7 +2,7 @@
   "author": "Omniview",
   "license": "AGPL-3.0-only",
   "name": "@omniviewdev/ui",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "Shared UI components, tokens, and theming for Omniview",
   "sideEffects": [
     "*.css"

package/dist/Select-CnRBSc5w.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),M=require("react"),E=require("@mui/material/Select"),h=require("@mui/material/MenuItem"),F=require("@mui/material/FormControl"),N=require("@mui/material/InputLabel"),R=require("@mui/material/FormHelperText"),B=require("@mui/material/ListItemIcon"),O=require("@mui/material/ListItemText"),G=require("@mui/material/CircularProgress"),K=require("@mui/material/OutlinedInput"),U=require("@mui/material/InputBase"),V=require("@mui/material/Chip"),l=require("@mui/material/Box"),_=require("@mui/icons-material/Search"),A=require("@mui/icons-material/Clear"),m=require("./types.cjs");function b({options:u,value:v,onChange:f,size:c="md",color:P="neutral",label:i,helperText:j,placeholder:t,searchable:d=!1,multiple:p=!1,loading:I=!1,error:s,fullWidth:w,disabled:L,clearable:q=!1,sx:z}){const[x,S]=M.useState(""),D=m.toMuiInputSize(c),g=m.toMuiColor(P),H=typeof s=="string"?!!s:s,y=typeof s=="string"?s:void 0,C=M.useMemo(()=>{if(!d||!x)return u;const r=x.toLowerCase();return u.filter(n=>n.label.toLowerCase().includes(r))},[u,x,d]),T=r=>{f(r.target.value)};return e.jsxs(F,{size:D,fullWidth:w,error:H,disabled:L,style:{"--ov-input-height":m.INPUT_HEIGHTS[c]},sx:z,children:[i&&e.jsx(N,{color:g==="default"||g==="inherit"?void 0:g,shrink:!!t||void 0,children:i}),e.jsxs(E,{value:v,onChange:T,multiple:p,displayEmpty:!!t,label:i,notched:i&&!!t||void 0,input:p?e.jsx(K,{label:i}):void 0,onClose:()=>{d&&S("")},renderValue:p?r=>{const n=r;return n.length===0&&t?e.jsx(l,{sx:{color:"var(--ov-fg-faint)"},children:t}):e.jsxs(l,{sx:{display:"flex",flexWrap:"nowrap",gap:.5,overflow:"hidden",alignItems:"center"},children:[n.map(o=>{const W=u.find(a=>a.value===o);return e.jsx(V,{label:W?.label??o,size:"small",...q?{onDelete:a=>{a.stopPropagation(),f(n.filter(k=>k!==o))},onMouseDown:a=>{a.stopPropagation()}}:{}},o)}),q&&n.length>1&&e.jsx("span",{role:"button","aria-label":"Clear all",onMouseDown:o=>{o.stopPropagation(),o.preventDefault(),f([])},style:{display:"inline-flex",alignItems:"center",flexShrink:0,marginLeft:2,cursor:"pointer",color:"var(--ov-fg-faint)",lineHeight:0},children:e.jsx(A,{sx:{fontSize:16}})})]})}:t&&!v?()=>e.jsx(l,{sx:{color:"var(--ov-fg-faint)"},children:t}):void 0,MenuProps:{PaperProps:{sx:{maxHeight:300,...c==="xs"||c==="sm"?{"& .MuiMenuItem-root":{fontSize:"0.8rem",minHeight:28,padding:"3px 8px"},"& .MuiListItemText-root":{margin:0},"& .MuiListItemText-primary":{fontSize:"0.8rem"},"& .MuiListItemIcon-root":{minWidth:22}}:{}}}},children:[d&&e.jsx(l,{sx:{px:1,pb:.5,pt:.5},onKeyDown:r=>r.stopPropagation(),onClickCapture:r=>r.stopPropagation(),onMouseDown:r=>r.stopPropagation(),children:e.jsxs(l,{sx:{display:"flex",alignItems:"center",height:28,border:"1px solid var(--ov-border-default)",borderRadius:"4px",bgcolor:"var(--ov-bg-base)",px:.75,"&:focus-within":{borderColor:"var(--ov-accent)"}},children:[e.jsx(_,{sx:{fontSize:14,color:"var(--ov-fg-faint)",mr:.5}}),e.jsx(U,{autoFocus:!0,fullWidth:!0,placeholder:"Search...",value:x,onChange:r=>S(r.target.value),sx:{flex:1,fontSize:"0.75rem",color:"var(--ov-fg-default)","& input":{py:0,px:0},"& input::placeholder":{color:"var(--ov-fg-faint)",opacity:1}}})]})}),I&&e.jsxs(h,{disabled:!0,children:[e.jsx(G,{size:16,sx:{mr:1}})," Loading..."]}),C.map(r=>e.jsxs(h,{value:r.value,disabled:r.disabled,children:[r.icon&&e.jsx(B,{sx:{minWidth:28},children:r.icon}),e.jsx(O,{children:r.label})]},r.value)),C.length===0&&!I&&e.jsx(h,{disabled:!0,children:"No options"})]}),(y||j)&&e.jsx(R,{children:y??j})]})}b.displayName="Select";exports.Select=b;

package/dist/Select-DTUF31OP.js

@@ -1,206 +0,0 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useState as E, useMemo as F } from "react";
-import N from "@mui/material/Select";
-import x from "@mui/material/MenuItem";
-import j from "@mui/material/FormControl";
-import B from "@mui/material/InputLabel";
-import O from "@mui/material/FormHelperText";
-import G from "@mui/material/ListItemIcon";
-import K from "@mui/material/ListItemText";
-import R from "@mui/material/CircularProgress";
-import U from "@mui/material/OutlinedInput";
-import V from "@mui/material/InputBase";
-import _ from "@mui/material/Chip";
-import m from "@mui/material/Box";
-import q from "@mui/icons-material/Search";
-import A from "@mui/icons-material/Clear";
-import { INPUT_HEIGHTS as J, toMuiInputSize as Q, toMuiColor as X } from "./types.js";
-function Y({
-  options: f,
-  value: v,
-  onChange: c,
-  size: p = "md",
-  color: P = "neutral",
-  label: a,
-  helperText: I,
-  placeholder: t,
-  searchable: u = !1,
-  multiple: g = !1,
-  loading: S = !1,
-  error: s,
-  fullWidth: w,
-  disabled: L,
-  clearable: y = !1,
-  sx: z
-}) {
-  const [d, C] = E(""), D = Q(p), h = X(P), H = typeof s == "string" ? !!s : s, M = typeof s == "string" ? s : void 0, b = F(() => {
-    if (!u || !d) return f;
-    const o = d.toLowerCase();
-    return f.filter((i) => i.label.toLowerCase().includes(o));
-  }, [f, d, u]), T = (o) => {
-    c(o.target.value);
-  };
-  return /* @__PURE__ */ n(
-    j,
-    {
-      size: D,
-      fullWidth: w,
-      error: H,
-      disabled: L,
-      style: { "--ov-input-height": J[p] },
-      sx: z,
-      children: [
-        a && /* @__PURE__ */ r(
-          B,
-          {
-            color: h === "default" || h === "inherit" ? void 0 : h,
-            shrink: !!t || void 0,
-            children: a
-          }
-        ),
-        /* @__PURE__ */ n(
-          N,
-          {
-            value: v,
-            onChange: T,
-            multiple: g,
-            displayEmpty: !!t,
-            label: a,
-            notched: a && !!t || void 0,
-            input: g ? /* @__PURE__ */ r(U, { label: a }) : void 0,
-            onClose: () => {
-              u && C("");
-            },
-            renderValue: g ? (o) => {
-              const i = o;
-              return i.length === 0 && t ? /* @__PURE__ */ r(m, { sx: { color: "var(--ov-fg-faint)" }, children: t }) : /* @__PURE__ */ n(m, { sx: { display: "flex", flexWrap: "nowrap", gap: 0.5, overflow: "hidden", alignItems: "center" }, children: [
-                i.map((e) => {
-                  const W = f.find((l) => l.value === e);
-                  return /* @__PURE__ */ r(
-                    _,
-                    {
-                      label: W?.label ?? e,
-                      size: "small",
-                      ...y ? {
-                        onDelete: (l) => {
-                          l.stopPropagation(), c(i.filter((k) => k !== e));
-                        },
-                        onMouseDown: (l) => {
-                          l.stopPropagation();
-                        }
-                      } : {}
-                    },
-                    e
-                  );
-                }),
-                y && i.length > 1 && /* @__PURE__ */ r(
-                  "span",
-                  {
-                    role: "button",
-                    "aria-label": "Clear all",
-                    onMouseDown: (e) => {
-                      e.stopPropagation(), e.preventDefault(), c([]);
-                    },
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      flexShrink: 0,
-                      marginLeft: 2,
-                      cursor: "pointer",
-                      color: "var(--ov-fg-faint)",
-                      lineHeight: 0
-                    },
-                    children: /* @__PURE__ */ r(A, { sx: { fontSize: 16 } })
-                  }
-                )
-              ] });
-            } : t && !v ? () => /* @__PURE__ */ r(m, { sx: { color: "var(--ov-fg-faint)" }, children: t }) : void 0,
-            MenuProps: {
-              PaperProps: {
-                sx: {
-                  maxHeight: 300,
-                  ...p === "xs" || p === "sm" ? {
-                    "& .MuiMenuItem-root": {
-                      fontSize: "0.8rem",
-                      minHeight: 28,
-                      padding: "3px 8px"
-                    },
-                    "& .MuiListItemText-root": {
-                      margin: 0
-                    },
-                    "& .MuiListItemText-primary": {
-                      fontSize: "0.8rem"
-                    },
-                    "& .MuiListItemIcon-root": {
-                      minWidth: 22
-                    }
-                  } : {}
-                }
-              }
-            },
-            children: [
-              u && /* @__PURE__ */ r(
-                m,
-                {
-                  sx: { px: 1, pb: 0.5, pt: 0.5 },
-                  onKeyDown: (o) => o.stopPropagation(),
-                  onClickCapture: (o) => o.stopPropagation(),
-                  onMouseDown: (o) => o.stopPropagation(),
-                  children: /* @__PURE__ */ n(
-                    m,
-                    {
-                      sx: {
-                        display: "flex",
-                        alignItems: "center",
-                        height: 28,
-                        border: "1px solid var(--ov-border-default)",
-                        borderRadius: "4px",
-                        bgcolor: "var(--ov-bg-base)",
-                        px: 0.75,
-                        "&:focus-within": { borderColor: "var(--ov-accent)" }
-                      },
-                      children: [
-                        /* @__PURE__ */ r(q, { sx: { fontSize: 14, color: "var(--ov-fg-faint)", mr: 0.5 } }),
-                        /* @__PURE__ */ r(
-                          V,
-                          {
-                            autoFocus: !0,
-                            fullWidth: !0,
-                            placeholder: "Search...",
-                            value: d,
-                            onChange: (o) => C(o.target.value),
-                            sx: {
-                              flex: 1,
-                              fontSize: "0.75rem",
-                              color: "var(--ov-fg-default)",
-                              "& input": { py: 0, px: 0 },
-                              "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
-                            }
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ),
-              S && /* @__PURE__ */ n(x, { disabled: !0, children: [
-                /* @__PURE__ */ r(R, { size: 16, sx: { mr: 1 } }),
-                " Loading..."
-              ] }),
-              b.map((o) => /* @__PURE__ */ n(x, { value: o.value, disabled: o.disabled, children: [
-                o.icon && /* @__PURE__ */ r(G, { sx: { minWidth: 28 }, children: o.icon }),
-                /* @__PURE__ */ r(K, { children: o.label })
-              ] }, o.value)),
-              b.length === 0 && !S && /* @__PURE__ */ r(x, { disabled: !0, children: "No options" })
-            ]
-          }
-        ),
-        (M || I) && /* @__PURE__ */ r(O, { children: M ?? I })
-      ]
-    }
-  );
-}
-Y.displayName = "Select";
-export {
-  Y as S
-};