@nous-research/ui 0.5.0 → 0.6.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,9 +1,12 @@
|
|
|
1
1
|
import { type VariantProps } from 'class-variance-authority';
|
|
2
2
|
declare const buttonVariants: (props?: ({
|
|
3
|
+
destructive?: boolean | null | undefined;
|
|
4
|
+
ghost?: boolean | null | undefined;
|
|
3
5
|
invert?: boolean | null | undefined;
|
|
4
6
|
outlined?: boolean | null | undefined;
|
|
7
|
+
size?: "default" | "icon" | "sm" | null | undefined;
|
|
5
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
-
export declare const Button: ({ children, className, invert, outlined, prefix, suffix, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const Button: ({ children, className, destructive, ghost, invert, outlined, prefix, size, suffix, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
10
|
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix' | 'suffix'>, VariantProps<typeof buttonVariants> {
|
|
8
11
|
prefix?: React.ReactNode;
|
|
9
12
|
suffix?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAgBjE,QAAA,MAAM,cAAc;;;;;;8EAoFnB,CAAA;AA2BD,eAAO,MAAM,MAAM,GAAI,+FAWpB,WAAW,4CAoBb,CAAA;AAED,UAAU,WACR,SAAQ,IAAI,CACR,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,QAAQ,GAAG,QAAQ,CACpB,EACD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB"}
|
|
@@ -3,42 +3,87 @@ import { cva } from 'class-variance-authority';
|
|
|
3
3
|
import { cloneElement } from 'react';
|
|
4
4
|
import { cn } from '../../utils';
|
|
5
5
|
import { Typography } from './typography';
|
|
6
|
+
const SHADOW_DEFAULT = 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]';
|
|
7
|
+
const SHADOW_INVERT = 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]';
|
|
8
|
+
const SHADOW_INVERT_OUTLINED = 'shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]';
|
|
9
|
+
const ACTIVE_FILTER = 'active:[filter:invert(1)_brightness(calc(100-99*var(--foreground-alpha,0)))]';
|
|
6
10
|
const buttonVariants = cva([
|
|
7
11
|
'group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center',
|
|
8
|
-
'px-[.9em_.75em] py-[1.25em]',
|
|
9
12
|
'leading-0 font-bold tracking-[0.2em] uppercase',
|
|
10
|
-
'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]',
|
|
11
13
|
'disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none'
|
|
12
14
|
], {
|
|
13
15
|
compoundVariants: [
|
|
16
|
+
// ── invert × outlined matrix (default surface, no ghost/destructive) ──
|
|
14
17
|
{
|
|
15
|
-
class:
|
|
18
|
+
class: `bg-midground text-background-base active:invert ${SHADOW_DEFAULT}`,
|
|
19
|
+
destructive: false,
|
|
20
|
+
ghost: false,
|
|
16
21
|
invert: false,
|
|
17
22
|
outlined: false
|
|
18
23
|
},
|
|
19
24
|
{
|
|
20
|
-
class:
|
|
25
|
+
class: `bg-midground/15 text-midground ${SHADOW_INVERT} ${ACTIVE_FILTER}`,
|
|
26
|
+
destructive: false,
|
|
27
|
+
ghost: false,
|
|
21
28
|
invert: true,
|
|
22
29
|
outlined: false
|
|
23
30
|
},
|
|
24
31
|
{
|
|
25
|
-
class:
|
|
32
|
+
class: `shadow-midground ${SHADOW_DEFAULT} ${ACTIVE_FILTER}`,
|
|
33
|
+
destructive: false,
|
|
34
|
+
ghost: false,
|
|
26
35
|
invert: false,
|
|
27
36
|
outlined: true
|
|
28
37
|
},
|
|
29
38
|
{
|
|
30
|
-
class:
|
|
39
|
+
class: `${SHADOW_INVERT_OUTLINED} ${ACTIVE_FILTER}`,
|
|
40
|
+
destructive: false,
|
|
41
|
+
ghost: false,
|
|
31
42
|
invert: true,
|
|
32
43
|
outlined: true
|
|
44
|
+
},
|
|
45
|
+
// ── ghost: no chrome, hover bg only ──
|
|
46
|
+
{
|
|
47
|
+
class: 'bg-transparent text-current hover:bg-midground/10 shadow-none',
|
|
48
|
+
destructive: false,
|
|
49
|
+
ghost: true
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
class: 'bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
|
|
53
|
+
destructive: true,
|
|
54
|
+
ghost: true
|
|
55
|
+
},
|
|
56
|
+
// ── solid destructive ──
|
|
57
|
+
{
|
|
58
|
+
class: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${SHADOW_INVERT}`,
|
|
59
|
+
destructive: true,
|
|
60
|
+
ghost: false,
|
|
61
|
+
outlined: false
|
|
62
|
+
},
|
|
63
|
+
// ── outlined destructive ──
|
|
64
|
+
{
|
|
65
|
+
class: 'border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
|
|
66
|
+
destructive: true,
|
|
67
|
+
ghost: false,
|
|
68
|
+
outlined: true
|
|
33
69
|
}
|
|
34
70
|
],
|
|
35
|
-
defaultVariants: {
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
destructive: false,
|
|
73
|
+
ghost: false,
|
|
74
|
+
invert: false,
|
|
75
|
+
outlined: false,
|
|
76
|
+
size: 'default'
|
|
77
|
+
},
|
|
36
78
|
variants: {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
},
|
|
40
|
-
outlined: {
|
|
41
|
-
|
|
79
|
+
destructive: { true: '' },
|
|
80
|
+
ghost: { true: '' },
|
|
81
|
+
invert: { true: '' },
|
|
82
|
+
outlined: { true: 'text-midground bg-transparent' },
|
|
83
|
+
size: {
|
|
84
|
+
default: 'px-[.9em_.75em] py-[1.25em]',
|
|
85
|
+
icon: 'p-2 aspect-square grid-cols-1 place-items-center [&>svg]:size-3.5',
|
|
86
|
+
sm: 'px-3 py-1.5 text-[0.7rem] tracking-[0.15em] [&>svg]:size-3'
|
|
42
87
|
}
|
|
43
88
|
}
|
|
44
89
|
});
|
|
@@ -47,5 +92,5 @@ const IconSlot = ({ icon, side }) => (_jsxs(_Fragment, { children: [_jsx("span",
|
|
|
47
92
|
className: 'size-3.5'
|
|
48
93
|
})
|
|
49
94
|
: icon })] }));
|
|
50
|
-
export const Button = ({ children, className, invert, outlined, prefix, suffix, ...props }) => (_jsxs(Typography, { as: "button", className: cn(buttonVariants({ invert, outlined }), className), mono: true, ...props, children: [_jsx("span", { "aria-hidden": true, className: "arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100" }), prefix && _jsx(IconSlot, { icon: prefix, side: "left" }), children, suffix && _jsx(IconSlot, { icon: suffix, side: "right" })] }));
|
|
95
|
+
export const Button = ({ children, className, destructive, ghost, invert, outlined, prefix, size, suffix, ...props }) => (_jsxs(Typography, { as: "button", className: cn(buttonVariants({ destructive, ghost, invert, outlined, size }), className), mono: true, ...props, children: [!ghost && (_jsx("span", { "aria-hidden": true, className: "arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100" })), prefix && _jsx(IconSlot, { icon: prefix, side: "left" }), children, suffix && _jsx(IconSlot, { icon: suffix, side: "right" })] }));
|
|
51
96
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,cAAc,GAAG,GAAG,CACxB;IACE,2EAA2E;IAC3E,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/components/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport { cloneElement } from 'react'\n\nimport { cn } from '../../utils'\n\nimport { Typography } from './typography'\n\nconst SHADOW_DEFAULT =\n 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]'\nconst SHADOW_INVERT =\n 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]'\nconst SHADOW_INVERT_OUTLINED =\n 'shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]'\nconst ACTIVE_FILTER =\n 'active:[filter:invert(1)_brightness(calc(100-99*var(--foreground-alpha,0)))]'\n\nconst buttonVariants = cva(\n [\n 'group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center',\n 'leading-0 font-bold tracking-[0.2em] uppercase',\n 'disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none'\n ],\n {\n compoundVariants: [\n // ── invert × outlined matrix (default surface, no ghost/destructive) ──\n {\n class: `bg-midground text-background-base active:invert ${SHADOW_DEFAULT}`,\n destructive: false,\n ghost: false,\n invert: false,\n outlined: false\n },\n {\n class: `bg-midground/15 text-midground ${SHADOW_INVERT} ${ACTIVE_FILTER}`,\n destructive: false,\n ghost: false,\n invert: true,\n outlined: false\n },\n {\n class: `shadow-midground ${SHADOW_DEFAULT} ${ACTIVE_FILTER}`,\n destructive: false,\n ghost: false,\n invert: false,\n outlined: true\n },\n {\n class: `${SHADOW_INVERT_OUTLINED} ${ACTIVE_FILTER}`,\n destructive: false,\n ghost: false,\n invert: true,\n outlined: true\n },\n // ── ghost: no chrome, hover bg only ──\n {\n class: 'bg-transparent text-current hover:bg-midground/10 shadow-none',\n destructive: false,\n ghost: true\n },\n {\n class:\n 'bg-transparent text-destructive hover:bg-destructive/10 shadow-none',\n destructive: true,\n ghost: true\n },\n // ── solid destructive ──\n {\n class: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${SHADOW_INVERT}`,\n destructive: true,\n ghost: false,\n outlined: false\n },\n // ── outlined destructive ──\n {\n class:\n 'border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 shadow-none',\n destructive: true,\n ghost: false,\n outlined: true\n }\n ],\n defaultVariants: {\n destructive: false,\n ghost: false,\n invert: false,\n outlined: false,\n size: 'default'\n },\n variants: {\n destructive: { true: '' },\n ghost: { true: '' },\n invert: { true: '' },\n outlined: { true: 'text-midground bg-transparent' },\n size: {\n default: 'px-[.9em_.75em] py-[1.25em]',\n icon: 'p-2 aspect-square grid-cols-1 place-items-center [&>svg]:size-3.5',\n sm: 'px-3 py-1.5 text-[0.7rem] tracking-[0.15em] [&>svg]:size-3'\n }\n }\n }\n)\n\nconst IconSlot = ({\n icon,\n side\n}: {\n icon: React.ReactNode\n side: 'left' | 'right'\n}) => (\n <>\n <span className=\"w-5\" />\n\n <span\n className={cn(\n 'absolute top-1/2 -translate-y-1/2',\n side === 'left' ? 'left-3' : 'right-3'\n )}\n >\n {typeof icon === 'object'\n ? cloneElement(icon as React.ReactElement<any>, {\n className: 'size-3.5'\n })\n : icon}\n </span>\n </>\n)\n\nexport const Button = ({\n children,\n className,\n destructive,\n ghost,\n invert,\n outlined,\n prefix,\n size,\n suffix,\n ...props\n}: ButtonProps) => (\n <Typography\n as=\"button\"\n className={cn(\n buttonVariants({ destructive, ghost, invert, outlined, size }),\n className\n )}\n mono\n {...props}\n >\n {!ghost && (\n <span\n aria-hidden\n className=\"arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100\"\n />\n )}\n {prefix && <IconSlot icon={prefix} side=\"left\" />}\n {children}\n {suffix && <IconSlot icon={suffix} side=\"right\" />}\n </Typography>\n)\n\ninterface ButtonProps\n extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n 'prefix' | 'suffix'\n >,\n VariantProps<typeof buttonVariants> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n}\n"]}
|
package/dist/ui/globals.css
CHANGED
|
@@ -115,6 +115,13 @@
|
|
|
115
115
|
--color-foreground-base: var(--foreground-base);
|
|
116
116
|
--color-gesso: #eaeaea;
|
|
117
117
|
|
|
118
|
+
/* Semantic tokens — defaults for DS preview; consumers (e.g. shadcn-style
|
|
119
|
+
dashboards) can remap these via their own @theme inline. */
|
|
120
|
+
--color-destructive: var(--destructive, #fb2c36);
|
|
121
|
+
--color-destructive-foreground: var(--destructive-foreground, #ffffff);
|
|
122
|
+
--color-success: var(--success, #4ade80);
|
|
123
|
+
--color-warning: var(--warning, #ffbd38);
|
|
124
|
+
|
|
118
125
|
--color-current: currentColor;
|
|
119
126
|
--color-transparent: transparent;
|
|
120
127
|
|