@almanaclabs/blaze-ui 0.7.0 → 0.7.2
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.
- package/dist/components/button/button.js +1 -1
- package/dist/components/input/input.js +1 -1
- package/dist/components/input-group/input-group.js +1 -1
- package/dist/components/native-select/native-select.js +1 -1
- package/dist/components/select/select.js +1 -1
- package/dist/components/textarea/textarea.js +1 -1
- package/package.json +1 -1
- package/recipes/workspace-shell/workspace-shell.tsx +2 -2
- package/src/styles/globals.css +3 -3
|
@@ -5,7 +5,7 @@ import { Button as r } from "@base-ui/react/button";
|
|
|
5
5
|
import { cva as i } from "class-variance-authority";
|
|
6
6
|
import { jsx as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/button/button.tsx
|
|
8
|
-
var o = "bg-primary text-primary-foreground hover:bg-[var(--primary-hover)] aria-expanded:bg-[var(--primary-hover)]", s = "border-border bg-
|
|
8
|
+
var o = "bg-primary text-primary-foreground hover:bg-[var(--primary-hover)] aria-expanded:bg-[var(--primary-hover)]", s = "border-border bg-card text-foreground hover:border-foreground/15 hover:bg-card aria-expanded:border-foreground/15 aria-expanded:bg-card", c = "bg-transparent text-foreground hover:bg-muted aria-expanded:bg-muted dark:hover:bg-muted/50", l = `${e.xs} gap-0.5 [--icon-stroke-width:var(--icon-stroke-14)] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-[14px]`, u = `${e.sm} gap-1 [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-[15px]`, d = `${e.md} gap-[5px] [--icon-stroke-width:var(--icon-stroke-15)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-[15px]`, f = `${e.lg} gap-1.5 [--icon-stroke-width:var(--icon-stroke-18)] has-data-[icon=inline-end]:pr-[9px] has-data-[icon=inline-start]:pl-[9px] [&_svg:not([class*='size-'])]:size-[18px]`, p = `${e.xl} rounded-lg gap-2 [--icon-stroke-width:var(--icon-stroke-24)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-6`, m = i("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
primary: o,
|
|
@@ -4,7 +4,7 @@ import { cva as n } from "class-variance-authority";
|
|
|
4
4
|
import { jsx as r } from "react/jsx-runtime";
|
|
5
5
|
import { Input as i } from "@base-ui/react/input";
|
|
6
6
|
//#region src/components/input/input.tsx
|
|
7
|
-
var a = n("w-full min-w-0 rounded-md border border-input bg-
|
|
7
|
+
var a = n("w-full min-w-0 rounded-md border border-input bg-card text-foreground transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-foreground placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", {
|
|
8
8
|
variants: { size: {
|
|
9
9
|
xs: `${e.xs} pb-px file:h-5 file:text-[13px]`,
|
|
10
10
|
sm: `${e.sm} pb-px file:h-6 file:text-sm`,
|
|
@@ -7,7 +7,7 @@ import * as a from "react";
|
|
|
7
7
|
import { cva as o } from "class-variance-authority";
|
|
8
8
|
import { jsx as s } from "react/jsx-runtime";
|
|
9
9
|
//#region src/components/input-group/input-group.tsx
|
|
10
|
-
var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-md border border-input bg-
|
|
10
|
+
var c = o("group/input-group relative flex w-full min-w-0 items-center rounded-md border border-input bg-card transition-colors outline-none hover:border-foreground/15 in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-surface-subtle has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-border-subtle has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/10 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", {
|
|
11
11
|
variants: { size: {
|
|
12
12
|
xs: `${e.xs} px-0 [--input-group-icon-size:14px] [--icon-stroke-width:var(--icon-stroke-14)]`,
|
|
13
13
|
sm: `${e.sm} px-0 [--input-group-icon-size:15px] [--icon-stroke-width:var(--icon-stroke-15)]`,
|
|
@@ -13,7 +13,7 @@ function a({ className: a, size: o = "xl", "aria-label": s = "Select an option",
|
|
|
13
13
|
"aria-label": s,
|
|
14
14
|
"data-slot": "native-select",
|
|
15
15
|
"data-size": o,
|
|
16
|
-
className: t("w-full min-w-0 appearance-none border border-input bg-
|
|
16
|
+
className: t("w-full min-w-0 appearance-none border border-input bg-card pt-[calc(var(--control-optical-offset,var(--sohne-control-optical-offset))+var(--control-optical-offset,var(--sohne-control-optical-offset)))] text-foreground transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", e[o], o === "xs" && "pr-7", (o === "sm" || o === "md") && "pr-8", o === "lg" && "pr-9", o === "xl" && "pr-10"),
|
|
17
17
|
...c
|
|
18
18
|
}), /* @__PURE__ */ n(i, {
|
|
19
19
|
className: t("pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground select-none", o === "xs" && "icon-optical-14 right-1.5", (o === "sm" || o === "md") && "icon-optical-15 right-2", o === "lg" && "icon-optical-18 right-[13px]", o === "xl" && "icon-optical-24 right-[18px]"),
|
|
@@ -25,7 +25,7 @@ function d({ className: i, size: o = "xl", children: c, "aria-label": l = "Selec
|
|
|
25
25
|
"aria-label": l,
|
|
26
26
|
"data-slot": "select-trigger",
|
|
27
27
|
"data-size": o,
|
|
28
|
-
className: t("flex w-fit items-center justify-between gap-2 border border-input bg-
|
|
28
|
+
className: t("flex w-fit items-center justify-between gap-2 border border-input bg-card whitespace-nowrap text-foreground transition-colors outline-none select-none hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 data-placeholder:text-foreground-tertiary *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0", e[o], o === "xs" && "gap-1 [--icon-stroke-width:var(--icon-stroke-14)] [&_svg:not([class*='size-'])]:size-[14px]", (o === "sm" || o === "md") && "gap-1.5 [--icon-stroke-width:var(--icon-stroke-15)] [&_svg:not([class*='size-'])]:size-[15px]", o === "lg" && "[--icon-stroke-width:var(--icon-stroke-18)] [&_svg:not([class*='size-'])]:size-[18px]", o === "xl" && "[--icon-stroke-width:var(--icon-stroke-24)] [&_svg:not([class*='size-'])]:size-6", i),
|
|
29
29
|
...u,
|
|
30
30
|
children: [c, /* @__PURE__ */ n(s.Icon, { render: /* @__PURE__ */ n(a, { className: "pointer-events-none text-muted-foreground" }) })]
|
|
31
31
|
});
|
|
@@ -5,7 +5,7 @@ import { jsx as t } from "react/jsx-runtime";
|
|
|
5
5
|
function n({ className: n, ...r }) {
|
|
6
6
|
return /* @__PURE__ */ t("textarea", {
|
|
7
7
|
"data-slot": "textarea",
|
|
8
|
-
className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-
|
|
8
|
+
className: e("type-content flex field-sizing-content min-h-[92px] w-full rounded-md border border-input bg-card px-[13px] py-3 text-foreground transition-colors outline-none placeholder:text-foreground-tertiary hover:border-foreground/15 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-border-subtle disabled:cursor-not-allowed disabled:bg-surface-subtle disabled:text-foreground-tertiary aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive/60 dark:aria-invalid:ring-destructive/20", n),
|
|
9
9
|
...r
|
|
10
10
|
});
|
|
11
11
|
}
|
package/package.json
CHANGED
|
@@ -509,7 +509,7 @@ export function WorkspaceShellRecipe({
|
|
|
509
509
|
<SidebarProvider
|
|
510
510
|
defaultOpen={defaultSidebarOpen}
|
|
511
511
|
data-sidebar-resizing={isSidebarResizing || undefined}
|
|
512
|
-
className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-
|
|
512
|
+
className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-canvas"
|
|
513
513
|
style={
|
|
514
514
|
{
|
|
515
515
|
'--sidebar-width': `${sidebarWidth}px`,
|
|
@@ -575,7 +575,7 @@ export function WorkspaceShellRecipe({
|
|
|
575
575
|
/>
|
|
576
576
|
</Sidebar>
|
|
577
577
|
|
|
578
|
-
<SidebarInset className="min-h-0 min-w-0 bg-
|
|
578
|
+
<SidebarInset className="min-h-0 min-w-0 bg-canvas p-0 md:p-2.5 md:pl-0">
|
|
579
579
|
<section
|
|
580
580
|
data-slot="workspace-frame"
|
|
581
581
|
data-mode={mode}
|
package/src/styles/globals.css
CHANGED
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
--icon-stroke-20: 1.5px;
|
|
122
122
|
--icon-stroke-24: 1.5px;
|
|
123
123
|
--icon-stroke-32: 1.5px;
|
|
124
|
-
--canvas: #
|
|
124
|
+
--canvas: #fff;
|
|
125
125
|
--background: #fffaf0;
|
|
126
126
|
--foreground: #251613;
|
|
127
127
|
--foreground-secondary: #74635d;
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
--chart-4: oklch(0.371 0 0);
|
|
165
165
|
--chart-5: oklch(0.269 0 0);
|
|
166
166
|
--radius: 0.875rem;
|
|
167
|
-
--sidebar:
|
|
167
|
+
--sidebar: var(--canvas);
|
|
168
168
|
--sidebar-foreground: #251613;
|
|
169
169
|
--sidebar-primary: #c83c31;
|
|
170
170
|
--sidebar-primary-foreground: #fff8e7;
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
--chart-3: oklch(0.439 0 0);
|
|
218
218
|
--chart-4: oklch(0.371 0 0);
|
|
219
219
|
--chart-5: oklch(0.269 0 0);
|
|
220
|
-
--sidebar:
|
|
220
|
+
--sidebar: var(--canvas);
|
|
221
221
|
--sidebar-foreground: #fffaf0;
|
|
222
222
|
--sidebar-primary: #c83c31;
|
|
223
223
|
--sidebar-primary-foreground: #fff8e7;
|