@bsuite/ui 1.3.1 → 1.3.2-next.0
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.
|
@@ -51,9 +51,9 @@ export function BrandingCard({ branding, onUpdate, renderColorEditor, className,
|
|
|
51
51
|
const handleTextUpdate = async (field, value) => {
|
|
52
52
|
await onUpdate(field, value);
|
|
53
53
|
};
|
|
54
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn('rounded-lg border border-
|
|
54
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn('rounded-lg border border-border bg-card text-card-foreground shadow-sm', className), children: [_jsxs("div", { className: "border-b border-border px-6 py-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: title }), description && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }))] }), _jsxs("div", { className: "divide-y divide-border", children: [_jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 rounded border border-border-interactive shadow-sm", style: { backgroundColor: branding.primary || 'oklch(0.546 0.215 262.9)' }, "aria-label": "Primary color preview" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Primary Color" }), _jsx("div", { className: "text-sm text-muted-foreground", children: branding.primary || 'Not set' })] })] }), _jsx("button", { type: "button", onClick: () => openColorEditor('primary', 'Primary Color', branding.primary || 'oklch(0.546 0.215 262.9)'), disabled: disabled, className: cn('rounded-md border border-border-interactive bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Edit" })] }), _jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 rounded border border-border-interactive shadow-sm", style: { backgroundColor: branding.accent || 'oklch(0.769 0.132 191.7)' }, "aria-label": "Accent color preview" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Accent Color" }), _jsx("div", { className: "text-sm text-muted-foreground", children: branding.accent || 'Not set' })] })] }), _jsx("button", { type: "button", onClick: () => openColorEditor('accent', 'Accent Color', branding.accent || 'oklch(0.769 0.132 191.7)'), disabled: disabled, className: cn('rounded-md border border-border-interactive bg-background px-4 py-2 text-sm font-medium', 'hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Edit" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "company-name", className: "font-medium", children: "Company Name" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "company-name", type: "text", value: branding.company_name || '', onChange: (e) => handleTextUpdate('company_name', e.target.value), disabled: disabled, placeholder: "Enter company name", className: cn('flex-1 rounded-md border border-border-interactive bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Used in logo alt text and other branding contexts" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-url", className: "font-medium", children: "Logo URL" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-url", type: "url", value: branding.logo_url || '', onChange: (e) => handleTextUpdate('logo_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo.svg", className: cn('flex-1 rounded-md border border-border-interactive bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), branding.logo_url && (_jsx("div", { className: "mt-2 flex items-center gap-2", children: _jsx("img", { src: branding.logo_url, alt: "Logo preview", className: "h-12 object-contain", onError: (e) => {
|
|
55
55
|
e.currentTarget.style.display = 'none';
|
|
56
|
-
} }) }))] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-light-url", className: "font-medium", children: "Logo URL (Light Mode)" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-light-url", type: "url", value: branding.logo_light_url || '', onChange: (e) => handleTextUpdate('logo_light_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo-light.svg", className: cn('flex-1 rounded-md border border-
|
|
56
|
+
} }) }))] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-light-url", className: "font-medium", children: "Logo URL (Light Mode)" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-light-url", type: "url", value: branding.logo_light_url || '', onChange: (e) => handleTextUpdate('logo_light_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo-light.svg", className: cn('flex-1 rounded-md border border-border-interactive bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Optional: Use a different logo for light mode" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "logo-dark-url", className: "font-medium", children: "Logo URL (Dark Mode)" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "logo-dark-url", type: "url", value: branding.logo_dark_url || '', onChange: (e) => handleTextUpdate('logo_dark_url', e.target.value), disabled: disabled, placeholder: "https://example.com/logo-dark.svg", className: cn('flex-1 rounded-md border border-border-interactive bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Optional: Use a different logo for dark mode" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-6 py-4", children: [_jsx("label", { htmlFor: "favicon-url", className: "font-medium", children: "Favicon URL" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { id: "favicon-url", type: "url", value: branding.favicon_url || '', onChange: (e) => handleTextUpdate('favicon_url', e.target.value), disabled: disabled, placeholder: "https://example.com/favicon.ico", className: cn('flex-1 rounded-md border border-border-interactive bg-background px-3 py-2 text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Square icon shown in browser tabs (16x16 or 32x32)" })] })] })] }), colorEditor.open && (_jsx(ColorEditorSheetWrapper, { open: colorEditor.open, title: `Edit ${colorEditor.label}`, description: "Adjust the OKLCH color values using the sliders below", value: colorEditor.value, onSave: handleColorSave, onCancel: closeColorEditor, renderEditor: renderColorEditor }))] }));
|
|
57
57
|
}
|
|
58
58
|
function ColorEditorSheetWrapper({ open, title, description, value, onSave, onCancel, renderEditor, }) {
|
|
59
59
|
const [editValue, setEditValue] = useState(value);
|
|
@@ -70,5 +70,5 @@ function ColorEditorSheetWrapper({ open, title, description, value, onSave, onCa
|
|
|
70
70
|
return (_jsxs("div", { className: "fixed inset-0 z-50 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": "color-editor-title", "aria-describedby": "color-editor-description", children: [_jsx("div", { className: "fixed inset-0 bg-background/80 backdrop-blur-sm", onClick: onCancel, "aria-hidden": "true" }), _jsxs("div", { className: "fixed inset-y-0 right-0 z-50 flex w-full flex-col border-l bg-background shadow-lg sm:max-w-md", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-6 py-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { id: "color-editor-title", className: "text-lg font-semibold text-foreground", children: title }), _jsx("p", { id: "color-editor-description", className: "text-sm text-muted-foreground", children: description })] }), _jsx("button", { type: "button", onClick: onCancel, className: cn('rounded-sm opacity-70 ring-offset-background transition-opacity', 'hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), "aria-label": "Close", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: renderEditor({
|
|
71
71
|
value: editValue,
|
|
72
72
|
onChange: handleChange,
|
|
73
|
-
}) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: onCancel, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-
|
|
73
|
+
}) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: onCancel, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-border-interactive bg-background hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'), children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSave, disabled: !hasChanges, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'bg-primary text-text-on-primary hover:bg-primary/90', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Save Changes" })] })] })] }));
|
|
74
74
|
}
|
|
@@ -70,5 +70,5 @@ export function ColorEditorSheet({ open, onOpenChange, title = 'Edit Color', des
|
|
|
70
70
|
value: editValue,
|
|
71
71
|
onChange: handleChange,
|
|
72
72
|
disabled,
|
|
73
|
-
}) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: disabled, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-
|
|
73
|
+
}) }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: [_jsx("button", { type: "button", onClick: handleCancel, disabled: disabled, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'border border-border-interactive bg-background hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSave, disabled: disabled || !hasChanges, className: cn('inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium', 'bg-primary text-text-on-primary hover:bg-primary/90', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: "Save Changes" })] })] })] }));
|
|
74
74
|
}
|
|
@@ -80,5 +80,5 @@ export function OklchColorPicker({ value = 'oklch(0.546 0.215 262.9)', onChange,
|
|
|
80
80
|
setIsValid(false);
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
|
-
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-
|
|
83
|
+
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-border-interactive 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-border-interactive 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-border-interactive 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-border-interactive 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-border-interactive 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' }))] }));
|
|
84
84
|
}
|
package/dist/button.js
CHANGED
|
@@ -4,7 +4,7 @@ import { cn } from './utils.js';
|
|
|
4
4
|
const variantClasses = {
|
|
5
5
|
primary: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
|
|
6
6
|
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
|
7
|
-
outline: 'border border-
|
|
7
|
+
outline: 'border border-border-interactive bg-background hover:bg-accent hover:text-accent-foreground',
|
|
8
8
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
9
9
|
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
|
10
10
|
link: 'text-primary underline-offset-4 hover:underline',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bsuite/ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2-next.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"publishConfig": {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"description": "Shared UI primitives for the BSuite apps (D2C Neon Electric + Corporate brands).",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "git+https://github.com/
|
|
12
|
+
"url": "git+https://github.com/Arcane-Fly/bsuite.git",
|
|
13
13
|
"directory": "packages/ui"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
@@ -97,9 +97,9 @@
|
|
|
97
97
|
"@radix-ui/react-popover": "^1.1.23",
|
|
98
98
|
"clsx": "^2.1.1",
|
|
99
99
|
"cmdk": "^1.1.1",
|
|
100
|
-
"lucide-react": "^1.
|
|
101
|
-
"react-error-boundary": "^6.1.
|
|
102
|
-
"tailwind-merge": "^3.
|
|
100
|
+
"lucide-react": "^1.47.0",
|
|
101
|
+
"react-error-boundary": "^6.1.6",
|
|
102
|
+
"tailwind-merge": "^3.7.0"
|
|
103
103
|
},
|
|
104
104
|
"peerDependencies": {
|
|
105
105
|
"@bsuite/theme": ">=0.7.0 <2",
|
|
@@ -116,23 +116,26 @@
|
|
|
116
116
|
}
|
|
117
117
|
},
|
|
118
118
|
"devDependencies": {
|
|
119
|
+
"@bsuite/page-builder": "workspace:^",
|
|
119
120
|
"@bsuite/theme": "workspace:^",
|
|
120
|
-
"@storybook/react-vite": "^10.
|
|
121
|
-
"@supabase/postgrest-js": "^2.
|
|
121
|
+
"@storybook/react-vite": "^10.6.0",
|
|
122
|
+
"@supabase/postgrest-js": "^2.116.0",
|
|
122
123
|
"@tailwindcss/vite": "^4.3.3",
|
|
123
124
|
"@testing-library/jest-dom": "^7.0.1",
|
|
124
125
|
"@testing-library/react": "^16.3.3",
|
|
125
|
-
"@testing-library/user-event": "^14.6.
|
|
126
|
-
"@types/react": "^19.
|
|
127
|
-
"@types/react-dom": "^19.
|
|
126
|
+
"@testing-library/user-event": "^14.6.7",
|
|
127
|
+
"@types/react": "^19.3.0",
|
|
128
|
+
"@types/react-dom": "^19.3.0",
|
|
128
129
|
"@vitejs/plugin-react": "^6.1.1",
|
|
129
|
-
"jsdom": "^30.0
|
|
130
|
-
"react": "^19.
|
|
131
|
-
"react-dom": "^19.
|
|
132
|
-
"
|
|
130
|
+
"jsdom": "^30.1.0",
|
|
131
|
+
"react": "^19.3.0",
|
|
132
|
+
"react-dom": "^19.3.0",
|
|
133
|
+
"react-grid-layout": "^2.2.4",
|
|
134
|
+
"react-resizable": "^4.0.2",
|
|
135
|
+
"storybook": "^10.6.0",
|
|
133
136
|
"tailwindcss": "^4.3.3",
|
|
134
137
|
"typescript": "^6.0.3",
|
|
135
|
-
"vite": "^8.
|
|
138
|
+
"vite": "^8.3.0",
|
|
136
139
|
"vitest": "^4.1.11"
|
|
137
140
|
}
|
|
138
141
|
}
|