@streamsai/ui 0.1.9 → 0.2.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
|
|
4
|
+
variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | "inverted" | null | undefined;
|
|
5
5
|
size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
shape?: "default" | "pill" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -2,14 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { cn } from '../../lib/utils.js';
|
|
5
|
-
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:
|
|
5
|
+
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-transparent aria-invalid:bg-destructive/10 aria-invalid:text-destructive aria-invalid:hover:bg-destructive/20 aria-invalid:focus-visible:border-destructive/40 aria-invalid:focus-visible:ring-destructive/20 dark:aria-invalid:bg-destructive/20 dark:aria-invalid:hover:bg-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 in-data-[platform=mobile]:not-[.absolute]:not-[.fixed]:not-[.sticky]:relative in-data-[platform=mobile]:after:absolute in-data-[platform=mobile]:after:top-1/2 in-data-[platform=mobile]:after:left-1/2 in-data-[platform=mobile]:after:size-full in-data-[platform=mobile]:after:min-h-11 in-data-[platform=mobile]:after:min-w-11 in-data-[platform=mobile]:after:-translate-1/2 in-data-[platform=mobile]:after:content-[''] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
|
|
9
|
-
outline: 'border-input bg-background hover:bg-accent',
|
|
8
|
+
default: 'bg-button-primary text-button-primary-foreground hover:bg-button-primary-hover',
|
|
9
|
+
outline: 'border-input bg-background text-foreground hover:border-transparent hover:bg-accent aria-expanded:border-transparent aria-expanded:bg-button-selected aria-expanded:hover:bg-button-selected-hover aria-pressed:border-transparent aria-pressed:bg-button-selected aria-pressed:hover:bg-button-selected-hover disabled:border-disabled-foreground disabled:bg-transparent',
|
|
10
10
|
secondary: 'bg-secondary text-secondary-foreground hover:bg-accent aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
11
|
-
ghost: 'hover:bg-accent hover:text-foreground aria-expanded:bg-
|
|
11
|
+
ghost: 'text-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-button-selected aria-expanded:text-foreground aria-expanded:hover:bg-button-selected-hover aria-pressed:bg-button-selected aria-pressed:hover:bg-button-selected-hover disabled:bg-transparent',
|
|
12
12
|
destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
|
|
13
|
+
inverted: 'bg-button-inverted text-button-inverted-foreground hover:bg-button-inverted-hover',
|
|
13
14
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
14
15
|
},
|
|
15
16
|
size: {
|
package/dist/styles/base.css
CHANGED
|
@@ -63,6 +63,14 @@
|
|
|
63
63
|
--color-inverted-foreground: var(--inverted-foreground);
|
|
64
64
|
--color-surface-primary: var(--surface-primary);
|
|
65
65
|
--color-primary-hover: var(--primary-hover);
|
|
66
|
+
--color-button-primary: var(--button-primary);
|
|
67
|
+
--color-button-primary-foreground: var(--button-primary-foreground);
|
|
68
|
+
--color-button-primary-hover: var(--button-primary-hover);
|
|
69
|
+
--color-button-inverted: var(--button-inverted);
|
|
70
|
+
--color-button-inverted-foreground: var(--button-inverted-foreground);
|
|
71
|
+
--color-button-inverted-hover: var(--button-inverted-hover);
|
|
72
|
+
--color-button-selected: var(--button-selected);
|
|
73
|
+
--color-button-selected-hover: var(--button-selected-hover);
|
|
66
74
|
--color-status-idle: var(--status-idle);
|
|
67
75
|
--color-status-working: var(--status-working);
|
|
68
76
|
--color-status-done: var(--status-done);
|
package/dist/styles/tokens.css
CHANGED
|
@@ -173,6 +173,16 @@
|
|
|
173
173
|
--accent-purple: var(--vibe-color-purple);
|
|
174
174
|
/* Vibe's negative color (stuck red), following its dark value: the "Fill in required fields" chip text, on a 10% tint of itself. */
|
|
175
175
|
--negative: var(--vibe-color-stuck-red);
|
|
176
|
+
/* Button colors (Figma "Variants & states"). Scoped to `Button` on purpose: the global `--primary`
|
|
177
|
+
blue stays for links, focus rings and selected states. */
|
|
178
|
+
--button-primary: var(--vibe-inverted-color-background);
|
|
179
|
+
--button-primary-foreground: var(--vibe-text-color-on-inverted);
|
|
180
|
+
--button-primary-hover: #202126;
|
|
181
|
+
--button-inverted: var(--vibe-inverted-color-background);
|
|
182
|
+
--button-inverted-foreground: var(--vibe-text-color-on-inverted);
|
|
183
|
+
--button-inverted-hover: #202126;
|
|
184
|
+
--button-selected: #dceafe;
|
|
185
|
+
--button-selected-hover: #c7ddf7;
|
|
176
186
|
/* Avatar fallbacks: chili blue for people, purple for agents. */
|
|
177
187
|
--avatar-person: var(--vibe-color-chili-blue);
|
|
178
188
|
--avatar-agent: var(--vibe-color-purple);
|
|
@@ -367,6 +377,16 @@
|
|
|
367
377
|
/* Primary blue is 4.17:1 on --vibe-grey-background-color and 2.87:1 on --vibe-ui-background-color. */
|
|
368
378
|
--code-token-function: var(--vibe-color-chili-blue);
|
|
369
379
|
--code-token-link: var(--vibe-color-chili-blue);
|
|
380
|
+
/* Primary and inverted buttons flip to a white fill on dark surfaces; negative and positive keep
|
|
381
|
+
their pastel tints. Hover and selected values are not in the Figma frame, derived from it. */
|
|
382
|
+
--button-primary: #ffffff;
|
|
383
|
+
--button-primary-foreground: #323338;
|
|
384
|
+
--button-primary-hover: #e3e4e8;
|
|
385
|
+
--button-inverted: #ffffff;
|
|
386
|
+
--button-inverted-foreground: #323338;
|
|
387
|
+
--button-inverted-hover: #e3e4e8;
|
|
388
|
+
--button-selected: var(--vibe-primary-selected-color);
|
|
389
|
+
--button-selected-hover: #1a4690;
|
|
370
390
|
}
|
|
371
391
|
|
|
372
392
|
/*
|
package/package.json
CHANGED