@ttt-productions/ui-core 0.11.16 → 0.11.17
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/react/components/badge.d.ts +2 -3
- package/dist/react/components/badge.d.ts.map +1 -1
- package/dist/react/components/badge.js +2 -12
- package/dist/react/components/badge.js.map +1 -1
- package/dist/react/components/button.js +1 -1
- package/dist/react/components/button.js.map +1 -1
- package/package.json +1 -1
- package/src/react/components/badge.tsx +2 -20
- package/src/react/components/button.tsx +1 -1
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
5
|
-
status?: "pending" | "completed" | "scheduled" | "in_progress" | "cancelled" | null | undefined;
|
|
4
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
|
|
6
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
6
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
8
7
|
}
|
|
9
|
-
declare function Badge({ className, variant,
|
|
8
|
+
declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
|
|
10
9
|
export { Badge, badgeVariants };
|
|
11
10
|
//# sourceMappingURL=badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/react/components/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/react/components/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAalB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAE1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -9,22 +9,12 @@ const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 p
|
|
|
9
9
|
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
10
10
|
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
11
11
|
outline: "text-foreground",
|
|
12
|
-
// NEW: semantic status pills (colors come from CSS vars)
|
|
13
|
-
status: "border-[hsl(var(--pill-border, var(--border)))] bg-[hsl(var(--pill-bg, var(--muted)))] text-[hsl(var(--pill-fg, var(--foreground)))]",
|
|
14
|
-
},
|
|
15
|
-
// NEW: specific status mappings -> theme-core vars (with fallbacks)
|
|
16
|
-
status: {
|
|
17
|
-
completed: "border-[hsl(var(--pill-completed-border, var(--brand-primary)))] bg-[hsl(var(--pill-completed-bg, var(--brand-primary)))] text-[hsl(var(--pill-completed-fg, var(--brand-primary-foreground, var(--primary-foreground))))]",
|
|
18
|
-
scheduled: "border-[hsl(var(--pill-scheduled-border, var(--brand-secondary, var(--border))))] bg-[hsl(var(--pill-scheduled-bg, var(--card)))] text-[hsl(var(--pill-scheduled-fg, var(--brand-primary-deep, var(--foreground))))]",
|
|
19
|
-
in_progress: "border-[hsl(var(--pill-inprogress-border, var(--brand-accent, var(--border))))] bg-[hsl(var(--pill-inprogress-bg, var(--brand-accent, var(--accent))))] text-[hsl(var(--pill-inprogress-fg, var(--brand-accent-foreground, var(--accent-foreground))))]",
|
|
20
|
-
pending: "border-[hsl(var(--pill-pending-border, var(--border)))] bg-[hsl(var(--pill-pending-bg, var(--muted)))] text-[hsl(var(--pill-pending-fg, var(--foreground)))]",
|
|
21
|
-
cancelled: "border-[hsl(var(--pill-cancelled-border, var(--destructive)))] bg-[hsl(var(--pill-cancelled-bg, var(--destructive)))] text-[hsl(var(--pill-cancelled-fg, var(--destructive-foreground)))]",
|
|
22
12
|
},
|
|
23
13
|
},
|
|
24
14
|
defaultVariants: { variant: "default" },
|
|
25
15
|
});
|
|
26
|
-
function Badge({ className, variant,
|
|
27
|
-
return _jsx("div", { className: cn(badgeVariants({ variant
|
|
16
|
+
function Badge({ className, variant, ...props }) {
|
|
17
|
+
return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
28
18
|
}
|
|
29
19
|
export { Badge, badgeVariants };
|
|
30
20
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/react/components/badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,aAAa,GAAG,GAAG,CACvB,0KAA0K,EAC1K;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,2EAA2E;YACpF,SAAS,EAAE,iFAAiF;YAC5F,WAAW,EAAE,uFAAuF;YACpG,OAAO,EAAE,iBAAiB;
|
|
1
|
+
{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/react/components/badge.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,aAAa,GAAG,GAAG,CACvB,0KAA0K,EAC1K;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,2EAA2E;YACpF,SAAS,EAAE,iFAAiF;YAC5F,WAAW,EAAE,uFAAuF;YACpG,OAAO,EAAE,iBAAiB;SAC3B;KACF;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;CACxC,CACF,CAAC;AAMF,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc;IACzD,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AAClF,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils.js\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive: \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: { variant: \"default\" },\n }\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ variant }), className)} {...props} />;\n}\n\nexport { Badge, badgeVariants };\n"]}
|
|
@@ -10,7 +10,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
|
|
|
10
10
|
variant: {
|
|
11
11
|
default: "button-default bg-primary text-primary-foreground hover:bg-primary/90 border-2 border-[hsl(var(--brand-primary-deep))]",
|
|
12
12
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]",
|
|
13
|
-
success: "bg-[color:var(--button-success)] text-
|
|
13
|
+
success: "bg-[color:var(--button-success)] text-[hsl(var(--success-foreground))] hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]",
|
|
14
14
|
outline: "border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
|
|
15
15
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border",
|
|
16
16
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/react/components/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,MAAM,cAAc,GAAG,GAAG,CACxB,8RAA8R,EAC9R;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,wHAAwH;YAC1H,WAAW,EACT,qHAAqH;YACvH,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/react/components/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,MAAM,cAAc,GAAG,GAAG,CACxB,8RAA8R,EAC9R;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,wHAAwH;YAC1H,WAAW,EACT,qHAAqH;YACvH,OAAO,EACL,sKAAsK;YACxK,OAAO,EACL,mGAAmG;YACrG,SAAS,EACP,qFAAqF;YACvF,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,iDAAiD;YACvD,QAAQ,EACN,yKAAyK;SAC5K;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,gBAAgB;YACzB,EAAE,EAAE,qBAAqB;YACzB,EAAE,EAAE,sBAAsB;YAC1B,IAAI,EAAE,SAAS;SAChB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAA;AAiBD,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1G,MAAM,MAAM,GAAG;QACb,GAAG,KAAK;QACR,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7D,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI,SAAS;QAC1C,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;KAC5D,CAAA;IACD,MAAM,OAAO,GAAG,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,GAAI,CAAA;IAC9D,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;IAExC,IAAI,OAAO,EAAE,CAAC;QACZ,kFAAkF;QAClF,iEAAiE;QACjE,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,KAAM,MAAM,aACvB,OAAO,EACR,KAAC,SAAS,cAAE,QAAQ,GAAa,IAC5B,CACR,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,KAAM,MAAM,YACvB,QAAQ,GACJ,CACR,CAAA;IACH,CAAC;IAED,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,KAAM,MAAM,YACzB,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAC7B,CAAC,CAAC,CAAC,CACF,8BACG,OAAO,EACP,QAAQ,IACR,CACJ,GACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Slot, Slottable } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils.js\"\nimport { Spinner } from \"./spinner.js\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-bold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"button-default bg-primary text-primary-foreground hover:bg-primary/90 border-2 border-[hsl(var(--brand-primary-deep))]\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]\",\n success:\n \"bg-[color:var(--button-success)] text-[hsl(var(--success-foreground))] hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]\",\n outline:\n \"border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-2 border-border\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n inverted:\n \"bg-[hsl(var(--inverted-background))] text-[hsl(var(--inverted-foreground))] hover:bg-[hsl(var(--inverted-background))]/90 border-2 border-[hsl(var(--inverted-border))]\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n /**\n * Async work this button started is in flight. The button disables itself — so\n * neither a repeat click nor an implicit form resubmit can fire — sets\n * `aria-busy`, and shows the canonical spinner: an icon button (`size=\"icon\"`)\n * swaps its icon for it; any other button shows it in place of its `icon`.\n */\n pending?: boolean\n /** Leading icon, rendered before the label. While `pending`, the spinner takes its place. */\n icon?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, pending = false, icon, disabled, children, ...props }, ref) => {\n const shared = {\n ...props,\n ...(pending ? { \"aria-busy\": true, \"data-pending\": \"\" } : {}),\n disabled: disabled || pending || undefined,\n className: cn(buttonVariants({ variant, size, className })),\n }\n const spinner = <Spinner size={size === \"lg\" ? \"sm\" : \"xs\"} />\n const leading = pending ? spinner : icon\n\n if (asChild) {\n // Slot finds the Slottable among its DIRECT children, so the leading slot and the\n // Slottable must be siblings here — never wrapped in a fragment.\n return leading ? (\n <Slot ref={ref} {...shared}>\n {leading}\n <Slottable>{children}</Slottable>\n </Slot>\n ) : (\n <Slot ref={ref} {...shared}>\n {children}\n </Slot>\n )\n }\n\n return (\n <button ref={ref} {...shared}>\n {size === \"icon\" ? (\n pending ? spinner : children\n ) : (\n <>\n {leading}\n {children}\n </>\n )}\n </button>\n )\n }\n)\n\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"]}
|
package/package.json
CHANGED
|
@@ -14,24 +14,6 @@ const badgeVariants = cva(
|
|
|
14
14
|
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
15
15
|
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
16
16
|
outline: "text-foreground",
|
|
17
|
-
|
|
18
|
-
// NEW: semantic status pills (colors come from CSS vars)
|
|
19
|
-
status:
|
|
20
|
-
"border-[hsl(var(--pill-border, var(--border)))] bg-[hsl(var(--pill-bg, var(--muted)))] text-[hsl(var(--pill-fg, var(--foreground)))]",
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
// NEW: specific status mappings -> theme-core vars (with fallbacks)
|
|
24
|
-
status: {
|
|
25
|
-
completed:
|
|
26
|
-
"border-[hsl(var(--pill-completed-border, var(--brand-primary)))] bg-[hsl(var(--pill-completed-bg, var(--brand-primary)))] text-[hsl(var(--pill-completed-fg, var(--brand-primary-foreground, var(--primary-foreground))))]",
|
|
27
|
-
scheduled:
|
|
28
|
-
"border-[hsl(var(--pill-scheduled-border, var(--brand-secondary, var(--border))))] bg-[hsl(var(--pill-scheduled-bg, var(--card)))] text-[hsl(var(--pill-scheduled-fg, var(--brand-primary-deep, var(--foreground))))]",
|
|
29
|
-
in_progress:
|
|
30
|
-
"border-[hsl(var(--pill-inprogress-border, var(--brand-accent, var(--border))))] bg-[hsl(var(--pill-inprogress-bg, var(--brand-accent, var(--accent))))] text-[hsl(var(--pill-inprogress-fg, var(--brand-accent-foreground, var(--accent-foreground))))]",
|
|
31
|
-
pending:
|
|
32
|
-
"border-[hsl(var(--pill-pending-border, var(--border)))] bg-[hsl(var(--pill-pending-bg, var(--muted)))] text-[hsl(var(--pill-pending-fg, var(--foreground)))]",
|
|
33
|
-
cancelled:
|
|
34
|
-
"border-[hsl(var(--pill-cancelled-border, var(--destructive)))] bg-[hsl(var(--pill-cancelled-bg, var(--destructive)))] text-[hsl(var(--pill-cancelled-fg, var(--destructive-foreground)))]",
|
|
35
17
|
},
|
|
36
18
|
},
|
|
37
19
|
defaultVariants: { variant: "default" },
|
|
@@ -42,8 +24,8 @@ export interface BadgeProps
|
|
|
42
24
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
43
25
|
VariantProps<typeof badgeVariants> {}
|
|
44
26
|
|
|
45
|
-
function Badge({ className, variant,
|
|
46
|
-
return <div className={cn(badgeVariants({ variant
|
|
27
|
+
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
28
|
+
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
|
47
29
|
}
|
|
48
30
|
|
|
49
31
|
export { Badge, badgeVariants };
|
|
@@ -17,7 +17,7 @@ const buttonVariants = cva(
|
|
|
17
17
|
destructive:
|
|
18
18
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90 border-2 border-[hsl(var(--destructive-border))]",
|
|
19
19
|
success:
|
|
20
|
-
"bg-[color:var(--button-success)] text-
|
|
20
|
+
"bg-[color:var(--button-success)] text-[hsl(var(--success-foreground))] hover:bg-[color:var(--button-success)]/90 border-2 border-[hsl(var(--status-success-border))]",
|
|
21
21
|
outline:
|
|
22
22
|
"border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground text-foreground",
|
|
23
23
|
secondary:
|