@bsuite/ui 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OklchColorPicker.d.ts","sourceRoot":"","sources":["../../src/branding/OklchColorPicker.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA+BD,wBAAgB,gBAAgB,CAAC,EAC/B,
|
|
1
|
+
{"version":3,"file":"OklchColorPicker.d.ts","sourceRoot":"","sources":["../../src/branding/OklchColorPicker.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,qBAAqB;IACpC,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA+BD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAkC,EAClC,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,qBAAqB,+BA8LvB"}
|
|
@@ -42,7 +42,7 @@ function formatOklch(components) {
|
|
|
42
42
|
}
|
|
43
43
|
return `oklch(${l} ${c} ${h})`;
|
|
44
44
|
}
|
|
45
|
-
export function OklchColorPicker({ value = 'oklch(0.
|
|
45
|
+
export function OklchColorPicker({ value = 'oklch(0.546 0.215 262.9)', onChange, label, disabled = false, className, description, error, }) {
|
|
46
46
|
const parsed = parseOklch(value);
|
|
47
47
|
const [components, setComponents] = useState(parsed || { l: 0.5, c: 0.1, h: 0 });
|
|
48
48
|
const [inputValue, setInputValue] = useState(value);
|
|
@@ -79,5 +79,5 @@ export function OklchColorPicker({ value = 'oklch(0.5 0.1 0)', onChange, label,
|
|
|
79
79
|
setIsValid(false);
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
return (_jsxs("div", { className: cn('space-y-3', className), children: [label && (_jsx("label", { className: "text-sm font-medium text-foreground", children: label })), description && (_jsx("p", { className: "text-sm text-muted-foreground", children: description })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-md border-2 border-input shadow-sm", style: { backgroundColor: inputValue }, "aria-label": "Color preview" }), _jsx("div", { className: "flex-1", children: _jsx("input", { type: "text", value: inputValue, onChange: handleRawInputChange, disabled: disabled, className: cn('w-full rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', !isValid && 'border-destructive'), placeholder: "oklch(0.
|
|
82
|
+
return (_jsxs("div", { className: cn('space-y-3', className), children: [label && (_jsx("label", { className: "text-sm font-medium text-foreground", children: label })), description && (_jsx("p", { className: "text-sm text-muted-foreground", children: description })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-12 w-12 rounded-md border-2 border-input shadow-sm", style: { backgroundColor: inputValue }, "aria-label": "Color preview" }), _jsx("div", { className: "flex-1", children: _jsx("input", { type: "text", value: inputValue, onChange: handleRawInputChange, disabled: disabled, className: cn('w-full rounded-md border border-input bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', !isValid && 'border-destructive'), placeholder: "oklch(0.546 0.215 262.9)", "aria-label": "OKLCH color value", "aria-invalid": !isValid }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-l", className: "text-sm text-muted-foreground", children: "L (Light)" }), _jsx("input", { id: "oklch-l", type: "range", min: "0", max: "1", step: "0.01", value: components.l, onChange: (e) => handleComponentChange('l', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Lightness" }), _jsx("input", { type: "number", min: "0", max: "1", step: "0.01", value: components.l.toFixed(2), onChange: (e) => handleComponentChange('l', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Lightness value" })] }), _jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-c", className: "text-sm text-muted-foreground", children: "C (Chroma)" }), _jsx("input", { id: "oklch-c", type: "range", min: "0", max: "0.4", step: "0.001", value: components.c, onChange: (e) => handleComponentChange('c', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Chroma" }), _jsx("input", { type: "number", min: "0", max: "0.4", step: "0.001", value: components.c.toFixed(3), onChange: (e) => handleComponentChange('c', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Chroma value" })] }), _jsxs("div", { className: "grid grid-cols-[80px_1fr_60px] items-center gap-2", children: [_jsx("label", { htmlFor: "oklch-h", className: "text-sm text-muted-foreground", children: "H (Hue)" }), _jsx("input", { id: "oklch-h", type: "range", min: "0", max: "360", step: "0.1", value: components.h, onChange: (e) => handleComponentChange('h', e.target.value), disabled: disabled, className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "aria-label": "Hue" }), _jsx("input", { type: "number", min: "0", max: "360", step: "0.1", value: components.h.toFixed(1), onChange: (e) => handleComponentChange('h', e.target.value), disabled: disabled, className: cn('w-full rounded border border-input bg-background px-2 py-1 text-sm', 'focus:outline-none focus:ring-1 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": "Hue value" })] })] }), (error || !isValid) && (_jsx("p", { className: "text-sm text-destructive", children: error || 'Invalid OKLCH format. Expected: oklch(L C H) where L is 0-1, C is 0-0.4, H is 0-360' }))] }));
|
|
83
83
|
}
|
package/dist/hero-grid.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export interface HeroGridProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
23
23
|
* CSS lifted verbatim from braden's `.platform-hero-grid`
|
|
24
24
|
* (braden/src/index.css) via the shared `.bsuite-hero-grid` utility class
|
|
25
25
|
* (packages/theme/src/css/utilities.css) — 1px grid lines at 32px x 32px,
|
|
26
|
+
* theme-audit-ok: prose describing the grid wash.
|
|
26
27
|
* `oklch(0 0 0 / 0.03)` light / `oklch(1 0 0 / 0.03)` dark. Requires the
|
|
27
28
|
* consumer app to import `@bsuite/theme/css` (or `utilities.css`
|
|
28
29
|
* directly) so `.bsuite-hero-grid` and the `.dark` override resolve.
|
package/dist/hero-grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hero-grid.d.ts","sourceRoot":"","sources":["../src/hero-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED
|
|
1
|
+
{"version":3,"file":"hero-grid.d.ts","sourceRoot":"","sources":["../src/hero-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAQ9D"}
|
package/dist/hero-grid.js
CHANGED
|
@@ -21,6 +21,7 @@ import { cn } from './utils.js';
|
|
|
21
21
|
* CSS lifted verbatim from braden's `.platform-hero-grid`
|
|
22
22
|
* (braden/src/index.css) via the shared `.bsuite-hero-grid` utility class
|
|
23
23
|
* (packages/theme/src/css/utilities.css) — 1px grid lines at 32px x 32px,
|
|
24
|
+
* theme-audit-ok: prose describing the grid wash.
|
|
24
25
|
* `oklch(0 0 0 / 0.03)` light / `oklch(1 0 0 / 0.03)` dark. Requires the
|
|
25
26
|
* consumer app to import `@bsuite/theme/css` (or `utilities.css`
|
|
26
27
|
* directly) so `.bsuite-hero-grid` and the `.dark` override resolve.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bsuite/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"publishConfig": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"tailwind-merge": "^3.6.0"
|
|
80
80
|
},
|
|
81
81
|
"peerDependencies": {
|
|
82
|
-
"@bsuite/theme": ">=0.
|
|
82
|
+
"@bsuite/theme": ">=0.7.0",
|
|
83
83
|
"react": "^18.3.0 || ^19.0.0",
|
|
84
84
|
"react-dom": "^18.3.0 || ^19.0.0"
|
|
85
85
|
},
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
}
|
|
90
90
|
},
|
|
91
91
|
"devDependencies": {
|
|
92
|
-
"@bsuite/theme": "^0.
|
|
92
|
+
"@bsuite/theme": "^0.7.0",
|
|
93
93
|
"@storybook/react-vite": "^10.4.3",
|
|
94
94
|
"@tailwindcss/vite": "^4.3.0",
|
|
95
95
|
"@testing-library/jest-dom": "^6.9.1",
|