@ttt-productions/ui-core 0.11.16 → 0.11.18
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/dist/react/components/consequence-dialog.d.ts.map +1 -1
- package/dist/react/components/consequence-dialog.js +7 -2
- package/dist/react/components/consequence-dialog.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
- package/src/react/components/consequence-dialog.tsx +17 -9
|
@@ -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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uFAAuF;IACvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,oFAAoF;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,wFAAwF;IACxF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;
|
|
1
|
+
{"version":3,"file":"consequence-dialog.d.ts","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,kCAAkC;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,uFAAuF;IACvF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,6EAA6E;IAC7E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB,oFAAoF;IACpF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,wFAAwF;IACxF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,6DAA6D;IAC7D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,kCAAkC,CAAC;IAEvD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AA+BD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,YAAY,EACZ,WAAsB,EACtB,WAAmB,EACnB,SAAS,GACV,EAAE,sBAAsB,+BAkJxB"}
|
|
@@ -8,8 +8,13 @@ import { Input } from './input.js';
|
|
|
8
8
|
import { Label } from './label.js';
|
|
9
9
|
import { Zap, Clock, RotateCcw } from 'lucide-react';
|
|
10
10
|
const SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';
|
|
11
|
+
/**
|
|
12
|
+
* One consequence slot: the icon beside a block column whose label sits on its own line above
|
|
13
|
+
* the slot text. Every element is a block: the `stack-*` spacing is a vertical margin, which an
|
|
14
|
+
* inline element ignores.
|
|
15
|
+
*/
|
|
11
16
|
function ConsequenceRow({ icon: Icon, label, children, }) {
|
|
12
|
-
return (_jsxs("
|
|
17
|
+
return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { className: SLOT_ICON_CLASS, "aria-hidden": "true" }), _jsxs("div", { className: "stack-1 min-w-0", children: [_jsx("div", { className: "text-caption font-medium uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-small text-foreground", children: children })] })] }));
|
|
13
18
|
}
|
|
14
19
|
/**
|
|
15
20
|
* A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled
|
|
@@ -74,6 +79,6 @@ export function ConsequenceDialog({ trigger, open, onOpenChange, title, immediat
|
|
|
74
79
|
return (_jsxs(AlertDialog, { open: actualOpen, onOpenChange: handleOpenChange, children: [trigger ? _jsx(AlertDialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(AlertDialogContent, { onEscapeKeyDown: (e) => {
|
|
75
80
|
if (pending)
|
|
76
81
|
e.preventDefault();
|
|
77
|
-
}, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("
|
|
82
|
+
}, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { asChild: true, children: _jsxs("div", { className: "stack-3 text-left", children: [immediateEffect ? (_jsx(ConsequenceRow, { icon: Zap, label: "Immediately", children: immediateEffect })) : null, delayedEffect ? (_jsx(ConsequenceRow, { icon: Clock, label: "Afterward", children: delayedEffect })) : null, reversibility ? (_jsx(ConsequenceRow, { icon: RotateCcw, label: "Reversibility", children: reversibility })) : null] }) })] }), reason ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: reasonId, children: reason.label ?? 'Reason' }), _jsx(Textarea, { id: reasonId, value: reason.value, onChange: (e) => reason.onChange(e.target.value), placeholder: reason.placeholder, maxLength: reason.maxLength, rows: reason.rows ?? 3, disabled: pending })] })) : null, typedConfirmation ? (_jsxs("div", { className: "stack-2", children: [_jsx(Label, { htmlFor: typedId, children: typedConfirmation.label ?? (_jsxs(_Fragment, { children: ["Type ", _jsx("span", { className: "font-mono", children: typedConfirmation.phrase }), " to confirm"] })) }), _jsx(Input, { id: typedId, value: typedValue, onChange: (e) => setTypedValue(e.target.value), placeholder: typedConfirmation.phrase, disabled: pending, autoComplete: "off" })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => handleOpenChange(false), disabled: pending, children: cancelLabel }), _jsx(Button, { variant: destructive ? 'destructive' : 'default', onClick: handleConfirm, disabled: !reasonOk || !typedOk, pending: pending, children: confirmLabel })] })] })] }));
|
|
78
83
|
}
|
|
79
84
|
//# sourceMappingURL=consequence-dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\n/**\n * The inline required-reason config. The caller OWNS the reason value/onChange (draft state lives at\n * the call site). Any `minLength`/`maxLength` the caller supplies MUST come from a caller-owned\n * constant — this component declares no business numbers and no copy; it only derives the gate + the\n * Textarea `maxLength` from the values it is handed.\n */\nexport interface ConsequenceDialogReason {\n required?: boolean;\n minLength?: number;\n maxLength?: number;\n placeholder?: string;\n label?: React.ReactNode;\n value: string;\n onChange: (value: string) => void;\n rows?: number;\n}\n\n/**\n * The exact-match typed-confirmation gate. `phrase` is business copy owned by the CALLER; the\n * component only compares the typed value against it.\n */\nexport interface ConsequenceDialogTypedConfirmation {\n phrase: string;\n label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n /** Uncontrolled open model: the element that opens the dialog (rendered `asChild`). */\n trigger?: React.ReactNode;\n /** Controlled open model. Provide with `onOpenChange`. */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n /** Heading — a string or node so callers can interpolate amounts / names. */\n title: React.ReactNode;\n\n /** SLOT 1 — what happens right now (e.g. \"initiates a Stripe refund of $X now\"). */\n immediateEffect?: React.ReactNode;\n /** SLOT 2 — what settles later, out of band (webhook / worker / async confirmation). */\n delayedEffect?: React.ReactNode;\n /** SLOT 3 — whether/how this can be undone or superseded. */\n reversibility?: React.ReactNode;\n\n /** Inline required-reason field. Optional. */\n reason?: ConsequenceDialogReason;\n /** Exact-phrase typed-confirmation gate. Optional. */\n typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n confirmLabel: React.ReactNode;\n cancelLabel?: React.ReactNode;\n /** `true` styles the confirm button with `bg-destructive`. */\n destructive?: boolean;\n\n /**\n * Runs on confirm. May be async — while it is pending the dialog STAYS OPEN, both buttons disable,\n * and the confirm button shows its pending spinner. Closes on resolve. If it rejects the dialog\n * stays open so the caller's own surface (error toast, TOTP step-up) can show and the operator can\n * retry or cancel. This component takes no Sentry/monitoring dependency — every error path\n * belongs to the caller's `onConfirm`.\n */\n onConfirm: () => void | Promise<void>;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\nfunction ConsequenceRow({\n icon: Icon,\n label,\n children,\n}: {\n icon: typeof Zap;\n label: string;\n children: React.ReactNode;\n}) {\n return (\n <span className=\"flex items-start gap-2\">\n <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n <span className=\"stack-1 min-w-0\">\n <span className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n {label}\n </span>\n <span className=\"text-small text-foreground\">{children}</span>\n </span>\n </span>\n );\n}\n\n/**\n * A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled\n * consequence slots (immediate / afterward / reversibility), an optional inline required-reason field,\n * and an optional exact-phrase typed-confirmation gate. Composes the ui-core AlertDialog primitives\n * (Radix) — it never re-implements them. Supports BOTH a `trigger` (uncontrolled) and `open` /\n * `onOpenChange` (controlled).\n *\n * Pending model: the confirm button is a plain `Button` (NOT `AlertDialogAction`), so Radix does not\n * auto-close on click; open state is managed here so the dialog stays open with a visible spinner\n * until `onConfirm` resolves.\n */\nexport function ConsequenceDialog({\n trigger,\n open,\n onOpenChange,\n title,\n immediateEffect,\n delayedEffect,\n reversibility,\n reason,\n typedConfirmation,\n confirmLabel,\n cancelLabel = 'Cancel',\n destructive = false,\n onConfirm,\n}: ConsequenceDialogProps) {\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const [typedValue, setTypedValue] = useState('');\n const [pending, setPending] = useState(false);\n\n const actualOpen = isControlled ? open : internalOpen;\n\n const reasonId = useId();\n const typedId = useId();\n\n const setOpenState = useCallback(\n (next: boolean) => {\n if (isControlled) onOpenChange?.(next);\n else setInternalOpen(next);\n },\n [isControlled, onOpenChange],\n );\n\n // Never allow an open-state change (Escape, cancel, controlled parent) to fight the pending action.\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (pending) return;\n setTypedValue(''); // reset the typed gate on every open/close\n setOpenState(next);\n },\n [pending, setOpenState],\n );\n\n const handleConfirm = useCallback(async () => {\n if (pending) return;\n setPending(true);\n try {\n await onConfirm();\n setTypedValue('');\n setOpenState(false);\n } catch {\n // Keep the dialog open — the caller's onConfirm surfaced the error (toast / step-up). The\n // operator can retry or cancel. Never rethrow, never monitor here.\n } finally {\n setPending(false);\n }\n }, [pending, onConfirm, setOpenState]);\n\n const reasonTrimmedLength = reason ? reason.value.trim().length : 0;\n const reasonProvided = reasonTrimmedLength > 0;\n const reasonOk = !reason\n ? true\n : reason.required && !reasonProvided\n ? false\n : !reasonProvided\n ? true // optional + empty is fine\n : (reason.minLength === undefined || reasonTrimmedLength >= reason.minLength) &&\n (reason.maxLength === undefined || reason.value.length <= reason.maxLength);\n\n const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n\n return (\n <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n <AlertDialogContent\n onEscapeKeyDown={(e) => {\n if (pending) e.preventDefault();\n }}\n >\n <AlertDialogHeader>\n <AlertDialogTitle>{title}</AlertDialogTitle>\n <AlertDialogDescription asChild>\n <span className=\"stack-3\">\n {immediateEffect ? (\n <ConsequenceRow icon={Zap} label=\"Immediately\">\n {immediateEffect}\n </ConsequenceRow>\n ) : null}\n {delayedEffect ? (\n <ConsequenceRow icon={Clock} label=\"Afterward\">\n {delayedEffect}\n </ConsequenceRow>\n ) : null}\n {reversibility ? (\n <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n {reversibility}\n </ConsequenceRow>\n ) : null}\n </span>\n </AlertDialogDescription>\n </AlertDialogHeader>\n\n {reason ? (\n <div className=\"stack-2\">\n <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n <Textarea\n id={reasonId}\n value={reason.value}\n onChange={(e) => reason.onChange(e.target.value)}\n placeholder={reason.placeholder}\n maxLength={reason.maxLength}\n rows={reason.rows ?? 3}\n disabled={pending}\n />\n </div>\n ) : null}\n\n {typedConfirmation ? (\n <div className=\"stack-2\">\n <Label htmlFor={typedId}>\n {typedConfirmation.label ?? (\n <>\n Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n </>\n )}\n </Label>\n <Input\n id={typedId}\n value={typedValue}\n onChange={(e) => setTypedValue(e.target.value)}\n placeholder={typedConfirmation.phrase}\n disabled={pending}\n autoComplete=\"off\"\n />\n </div>\n ) : null}\n\n <AlertDialogFooter>\n <Button\n variant=\"outline\"\n onClick={() => handleOpenChange(false)}\n disabled={pending}\n >\n {cancelLabel}\n </Button>\n <Button\n variant={destructive ? 'destructive' : 'default'}\n onClick={handleConfirm}\n disabled={!reasonOk || !typedOk}\n pending={pending}\n >\n {confirmLabel}\n </Button>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"consequence-dialog.js","sourceRoot":"","sources":["../../../src/react/components/consequence-dialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiErD,MAAM,eAAe,GAAG,+CAA+C,CAAC;AAExE;;;;GAIG;AACH,SAAS,cAAc,CAAC,EACtB,IAAI,EAAE,IAAI,EACV,KAAK,EACL,QAAQ,GAKT;IACC,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,IAAI,IAAC,SAAS,EAAE,eAAe,iBAAc,MAAM,GAAG,EACvD,eAAK,SAAS,EAAC,iBAAiB,aAC9B,cAAK,SAAS,EAAC,wEAAwE,YACpF,KAAK,GACF,EACN,cAAK,SAAS,EAAC,4BAA4B,YAAE,QAAQ,GAAO,IACxD,IACF,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,MAAM,EACN,iBAAiB,EACjB,YAAY,EACZ,WAAW,GAAG,QAAQ,EACtB,WAAW,GAAG,KAAK,EACnB,SAAS,GACc;IACvB,MAAM,YAAY,GAAG,IAAI,KAAK,SAAS,CAAC;IACxC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAEtD,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,YAAY;YAAE,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;;YAClC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B,CAAC;IAEF,oGAAoG;IACpG,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,OAAO;YAAE,OAAO;QACpB,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,2CAA2C;QAC9D,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,OAAO,EAAE,YAAY,CAAC,CACxB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAC3C,IAAI,OAAO;YAAE,OAAO;QACpB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACH,MAAM,SAAS,EAAE,CAAC;YAClB,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QAAC,MAAM,CAAC;YACP,0FAA0F;YAC1F,mEAAmE;QACrE,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,MAAM,cAAc,GAAG,mBAAmB,GAAG,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,CAAC,MAAM;QACtB,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,cAAc;YAClC,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,CAAC,cAAc;gBACf,CAAC,CAAC,IAAI,CAAC,2BAA2B;gBAClC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,IAAI,mBAAmB,IAAI,MAAM,CAAC,SAAS,CAAC;oBAC3E,CAAC,MAAM,CAAC,SAAS,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC;IAEpF,MAAM,OAAO,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,KAAK,iBAAiB,CAAC,MAAM,CAAC;IAEpF,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,gBAAgB,aAC1D,OAAO,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,OAAO,kBAAE,OAAO,GAAsB,CAAC,CAAC,CAAC,IAAI,EAC5E,MAAC,kBAAkB,IACjB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACrB,IAAI,OAAO;wBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBAClC,CAAC,aAED,MAAC,iBAAiB,eAChB,KAAC,gBAAgB,cAAE,KAAK,GAAoB,EAI5C,KAAC,sBAAsB,IAAC,OAAO,kBAC7B,eAAK,SAAS,EAAC,mBAAmB,aAC/B,eAAe,CAAC,CAAC,CAAC,CACjB,KAAC,cAAc,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,aAAa,YAC3C,eAAe,GACD,CAClB,CAAC,CAAC,CAAC,IAAI,EACP,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAC,WAAW,YAC3C,aAAa,GACC,CAClB,CAAC,CAAC,CAAC,IAAI,EACP,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAC,eAAe,YACnD,aAAa,GACC,CAClB,CAAC,CAAC,CAAC,IAAI,IACJ,GACiB,IACP,EAEnB,MAAM,CAAC,CAAC,CAAC,CACR,eAAK,SAAS,EAAC,SAAS,aACtB,KAAC,KAAK,IAAC,OAAO,EAAE,QAAQ,YAAG,MAAM,CAAC,KAAK,IAAI,QAAQ,GAAS,EAC5D,KAAC,QAAQ,IACP,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAChD,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,CAAC,EACtB,QAAQ,EAAE,OAAO,GACjB,IACE,CACP,CAAC,CAAC,CAAC,IAAI,EAEP,iBAAiB,CAAC,CAAC,CAAC,CACnB,eAAK,SAAS,EAAC,SAAS,aACtB,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,YACpB,iBAAiB,CAAC,KAAK,IAAI,CAC1B,uCACO,eAAM,SAAS,EAAC,WAAW,YAAE,iBAAiB,CAAC,MAAM,GAAQ,mBACjE,CACJ,GACK,EACR,KAAC,KAAK,IACJ,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,WAAW,EAAE,iBAAiB,CAAC,MAAM,EACrC,QAAQ,EAAE,OAAO,EACjB,YAAY,EAAC,KAAK,GAClB,IACE,CACP,CAAC,CAAC,CAAC,IAAI,EAER,MAAC,iBAAiB,eAChB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EACtC,QAAQ,EAAE,OAAO,YAEhB,WAAW,GACL,EACT,KAAC,MAAM,IACL,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,CAAC,QAAQ,IAAI,CAAC,OAAO,EAC/B,OAAO,EAAE,OAAO,YAEf,YAAY,GACN,IACS,IACD,IACT,CACf,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\nimport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n} from './alert-dialog.js';\nimport { Button } from './button.js';\nimport { Textarea } from './textarea.js';\nimport { Input } from './input.js';\nimport { Label } from './label.js';\nimport { Zap, Clock, RotateCcw } from 'lucide-react';\n\n/**\n * The inline required-reason config. The caller OWNS the reason value/onChange (draft state lives at\n * the call site). Any `minLength`/`maxLength` the caller supplies MUST come from a caller-owned\n * constant — this component declares no business numbers and no copy; it only derives the gate + the\n * Textarea `maxLength` from the values it is handed.\n */\nexport interface ConsequenceDialogReason {\n required?: boolean;\n minLength?: number;\n maxLength?: number;\n placeholder?: string;\n label?: React.ReactNode;\n value: string;\n onChange: (value: string) => void;\n rows?: number;\n}\n\n/**\n * The exact-match typed-confirmation gate. `phrase` is business copy owned by the CALLER; the\n * component only compares the typed value against it.\n */\nexport interface ConsequenceDialogTypedConfirmation {\n phrase: string;\n label?: React.ReactNode;\n}\n\nexport interface ConsequenceDialogProps {\n /** Uncontrolled open model: the element that opens the dialog (rendered `asChild`). */\n trigger?: React.ReactNode;\n /** Controlled open model. Provide with `onOpenChange`. */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n\n /** Heading — a string or node so callers can interpolate amounts / names. */\n title: React.ReactNode;\n\n /** SLOT 1 — what happens right now (e.g. \"initiates a Stripe refund of $X now\"). */\n immediateEffect?: React.ReactNode;\n /** SLOT 2 — what settles later, out of band (webhook / worker / async confirmation). */\n delayedEffect?: React.ReactNode;\n /** SLOT 3 — whether/how this can be undone or superseded. */\n reversibility?: React.ReactNode;\n\n /** Inline required-reason field. Optional. */\n reason?: ConsequenceDialogReason;\n /** Exact-phrase typed-confirmation gate. Optional. */\n typedConfirmation?: ConsequenceDialogTypedConfirmation;\n\n confirmLabel: React.ReactNode;\n cancelLabel?: React.ReactNode;\n /** `true` styles the confirm button with `bg-destructive`. */\n destructive?: boolean;\n\n /**\n * Runs on confirm. May be async — while it is pending the dialog STAYS OPEN, both buttons disable,\n * and the confirm button shows its pending spinner. Closes on resolve. If it rejects the dialog\n * stays open so the caller's own surface (error toast, TOTP step-up) can show and the operator can\n * retry or cancel. This component takes no Sentry/monitoring dependency — every error path\n * belongs to the caller's `onConfirm`.\n */\n onConfirm: () => void | Promise<void>;\n}\n\nconst SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';\n\n/**\n * One consequence slot: the icon beside a block column whose label sits on its own line above\n * the slot text. Every element is a block: the `stack-*` spacing is a vertical margin, which an\n * inline element ignores.\n */\nfunction ConsequenceRow({\n icon: Icon,\n label,\n children,\n}: {\n icon: typeof Zap;\n label: string;\n children: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-start gap-2\">\n <Icon className={SLOT_ICON_CLASS} aria-hidden=\"true\" />\n <div className=\"stack-1 min-w-0\">\n <div className=\"text-caption font-medium uppercase tracking-wide text-muted-foreground\">\n {label}\n </div>\n <div className=\"text-small text-foreground\">{children}</div>\n </div>\n </div>\n );\n}\n\n/**\n * A reusable confirm-before-a-consequential-action dialog. Three optional, consistently-styled\n * consequence slots (immediate / afterward / reversibility), an optional inline required-reason field,\n * and an optional exact-phrase typed-confirmation gate. Composes the ui-core AlertDialog primitives\n * (Radix) — it never re-implements them. Supports BOTH a `trigger` (uncontrolled) and `open` /\n * `onOpenChange` (controlled).\n *\n * Pending model: the confirm button is a plain `Button` (NOT `AlertDialogAction`), so Radix does not\n * auto-close on click; open state is managed here so the dialog stays open with a visible spinner\n * until `onConfirm` resolves.\n */\nexport function ConsequenceDialog({\n trigger,\n open,\n onOpenChange,\n title,\n immediateEffect,\n delayedEffect,\n reversibility,\n reason,\n typedConfirmation,\n confirmLabel,\n cancelLabel = 'Cancel',\n destructive = false,\n onConfirm,\n}: ConsequenceDialogProps) {\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const [typedValue, setTypedValue] = useState('');\n const [pending, setPending] = useState(false);\n\n const actualOpen = isControlled ? open : internalOpen;\n\n const reasonId = useId();\n const typedId = useId();\n\n const setOpenState = useCallback(\n (next: boolean) => {\n if (isControlled) onOpenChange?.(next);\n else setInternalOpen(next);\n },\n [isControlled, onOpenChange],\n );\n\n // Never allow an open-state change (Escape, cancel, controlled parent) to fight the pending action.\n const handleOpenChange = useCallback(\n (next: boolean) => {\n if (pending) return;\n setTypedValue(''); // reset the typed gate on every open/close\n setOpenState(next);\n },\n [pending, setOpenState],\n );\n\n const handleConfirm = useCallback(async () => {\n if (pending) return;\n setPending(true);\n try {\n await onConfirm();\n setTypedValue('');\n setOpenState(false);\n } catch {\n // Keep the dialog open — the caller's onConfirm surfaced the error (toast / step-up). The\n // operator can retry or cancel. Never rethrow, never monitor here.\n } finally {\n setPending(false);\n }\n }, [pending, onConfirm, setOpenState]);\n\n const reasonTrimmedLength = reason ? reason.value.trim().length : 0;\n const reasonProvided = reasonTrimmedLength > 0;\n const reasonOk = !reason\n ? true\n : reason.required && !reasonProvided\n ? false\n : !reasonProvided\n ? true // optional + empty is fine\n : (reason.minLength === undefined || reasonTrimmedLength >= reason.minLength) &&\n (reason.maxLength === undefined || reason.value.length <= reason.maxLength);\n\n const typedOk = !typedConfirmation ? true : typedValue === typedConfirmation.phrase;\n\n return (\n <AlertDialog open={actualOpen} onOpenChange={handleOpenChange}>\n {trigger ? <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger> : null}\n <AlertDialogContent\n onEscapeKeyDown={(e) => {\n if (pending) e.preventDefault();\n }}\n >\n <AlertDialogHeader>\n <AlertDialogTitle>{title}</AlertDialogTitle>\n {/* A div, not the primitive's default <p>: the rows are blocks, which a <p> cannot hold.\n Left-aligned at every width — the header centres its text on narrow screens, and a\n wrapped consequence line reads as a list, not a caption. */}\n <AlertDialogDescription asChild>\n <div className=\"stack-3 text-left\">\n {immediateEffect ? (\n <ConsequenceRow icon={Zap} label=\"Immediately\">\n {immediateEffect}\n </ConsequenceRow>\n ) : null}\n {delayedEffect ? (\n <ConsequenceRow icon={Clock} label=\"Afterward\">\n {delayedEffect}\n </ConsequenceRow>\n ) : null}\n {reversibility ? (\n <ConsequenceRow icon={RotateCcw} label=\"Reversibility\">\n {reversibility}\n </ConsequenceRow>\n ) : null}\n </div>\n </AlertDialogDescription>\n </AlertDialogHeader>\n\n {reason ? (\n <div className=\"stack-2\">\n <Label htmlFor={reasonId}>{reason.label ?? 'Reason'}</Label>\n <Textarea\n id={reasonId}\n value={reason.value}\n onChange={(e) => reason.onChange(e.target.value)}\n placeholder={reason.placeholder}\n maxLength={reason.maxLength}\n rows={reason.rows ?? 3}\n disabled={pending}\n />\n </div>\n ) : null}\n\n {typedConfirmation ? (\n <div className=\"stack-2\">\n <Label htmlFor={typedId}>\n {typedConfirmation.label ?? (\n <>\n Type <span className=\"font-mono\">{typedConfirmation.phrase}</span> to confirm\n </>\n )}\n </Label>\n <Input\n id={typedId}\n value={typedValue}\n onChange={(e) => setTypedValue(e.target.value)}\n placeholder={typedConfirmation.phrase}\n disabled={pending}\n autoComplete=\"off\"\n />\n </div>\n ) : null}\n\n <AlertDialogFooter>\n <Button\n variant=\"outline\"\n onClick={() => handleOpenChange(false)}\n disabled={pending}\n >\n {cancelLabel}\n </Button>\n <Button\n variant={destructive ? 'destructive' : 'default'}\n onClick={handleConfirm}\n disabled={!reasonOk || !typedOk}\n pending={pending}\n >\n {confirmLabel}\n </Button>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialog>\n );\n}\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:
|
|
@@ -81,6 +81,11 @@ export interface ConsequenceDialogProps {
|
|
|
81
81
|
|
|
82
82
|
const SLOT_ICON_CLASS = 'icon-xs mt-0.5 shrink-0 text-muted-foreground';
|
|
83
83
|
|
|
84
|
+
/**
|
|
85
|
+
* One consequence slot: the icon beside a block column whose label sits on its own line above
|
|
86
|
+
* the slot text. Every element is a block: the `stack-*` spacing is a vertical margin, which an
|
|
87
|
+
* inline element ignores.
|
|
88
|
+
*/
|
|
84
89
|
function ConsequenceRow({
|
|
85
90
|
icon: Icon,
|
|
86
91
|
label,
|
|
@@ -91,15 +96,15 @@ function ConsequenceRow({
|
|
|
91
96
|
children: React.ReactNode;
|
|
92
97
|
}) {
|
|
93
98
|
return (
|
|
94
|
-
<
|
|
99
|
+
<div className="flex items-start gap-2">
|
|
95
100
|
<Icon className={SLOT_ICON_CLASS} aria-hidden="true" />
|
|
96
|
-
<
|
|
97
|
-
<
|
|
101
|
+
<div className="stack-1 min-w-0">
|
|
102
|
+
<div className="text-caption font-medium uppercase tracking-wide text-muted-foreground">
|
|
98
103
|
{label}
|
|
99
|
-
</
|
|
100
|
-
<
|
|
101
|
-
</
|
|
102
|
-
</
|
|
104
|
+
</div>
|
|
105
|
+
<div className="text-small text-foreground">{children}</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
103
108
|
);
|
|
104
109
|
}
|
|
105
110
|
|
|
@@ -195,8 +200,11 @@ export function ConsequenceDialog({
|
|
|
195
200
|
>
|
|
196
201
|
<AlertDialogHeader>
|
|
197
202
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
203
|
+
{/* A div, not the primitive's default <p>: the rows are blocks, which a <p> cannot hold.
|
|
204
|
+
Left-aligned at every width — the header centres its text on narrow screens, and a
|
|
205
|
+
wrapped consequence line reads as a list, not a caption. */}
|
|
198
206
|
<AlertDialogDescription asChild>
|
|
199
|
-
<
|
|
207
|
+
<div className="stack-3 text-left">
|
|
200
208
|
{immediateEffect ? (
|
|
201
209
|
<ConsequenceRow icon={Zap} label="Immediately">
|
|
202
210
|
{immediateEffect}
|
|
@@ -212,7 +220,7 @@ export function ConsequenceDialog({
|
|
|
212
220
|
{reversibility}
|
|
213
221
|
</ConsequenceRow>
|
|
214
222
|
) : null}
|
|
215
|
-
</
|
|
223
|
+
</div>
|
|
216
224
|
</AlertDialogDescription>
|
|
217
225
|
</AlertDialogHeader>
|
|
218
226
|
|