@alpic-ai/ui 0.0.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.
- package/dist/components/accordion-card.d.mts +41 -0
- package/dist/components/accordion-card.mjs +61 -0
- package/dist/components/accordion.d.mts +29 -0
- package/dist/components/accordion.mjs +48 -0
- package/dist/components/alert.d.mts +40 -0
- package/dist/components/alert.mjs +63 -0
- package/dist/components/attachment-tile.d.mts +26 -0
- package/dist/components/attachment-tile.mjs +35 -0
- package/dist/components/avatar.d.mts +52 -0
- package/dist/components/avatar.mjs +81 -0
- package/dist/components/badge.d.mts +20 -0
- package/dist/components/badge.mjs +36 -0
- package/dist/components/breadcrumb.d.mts +42 -0
- package/dist/components/breadcrumb.mjs +79 -0
- package/dist/components/button.d.mts +29 -0
- package/dist/components/button.mjs +67 -0
- package/dist/components/card.d.mts +37 -0
- package/dist/components/card.mjs +54 -0
- package/dist/components/checkbox.d.mts +11 -0
- package/dist/components/checkbox.mjs +26 -0
- package/dist/components/collapsible.d.mts +16 -0
- package/dist/components/collapsible.mjs +24 -0
- package/dist/components/combobox.d.mts +86 -0
- package/dist/components/combobox.mjs +207 -0
- package/dist/components/command.d.mts +38 -0
- package/dist/components/command.mjs +68 -0
- package/dist/components/copyable.d.mts +22 -0
- package/dist/components/copyable.mjs +33 -0
- package/dist/components/description-list.d.mts +22 -0
- package/dist/components/description-list.mjs +34 -0
- package/dist/components/dialog.d.mts +61 -0
- package/dist/components/dialog.mjs +110 -0
- package/dist/components/dropdown-menu.d.mts +72 -0
- package/dist/components/dropdown-menu.mjs +122 -0
- package/dist/components/input-group.d.mts +25 -0
- package/dist/components/input-group.mjs +43 -0
- package/dist/components/input.d.mts +27 -0
- package/dist/components/input.mjs +90 -0
- package/dist/components/label.d.mts +11 -0
- package/dist/components/label.mjs +14 -0
- package/dist/components/pagination.d.mts +18 -0
- package/dist/components/pagination.mjs +42 -0
- package/dist/components/popover.d.mts +22 -0
- package/dist/components/popover.mjs +34 -0
- package/dist/components/radio-group.d.mts +15 -0
- package/dist/components/radio-group.mjs +26 -0
- package/dist/components/scroll-area.d.mts +17 -0
- package/dist/components/scroll-area.mjs +35 -0
- package/dist/components/select-trigger-variants.d.mts +13 -0
- package/dist/components/select-trigger-variants.mjs +23 -0
- package/dist/components/select.d.mts +51 -0
- package/dist/components/select.mjs +95 -0
- package/dist/components/separator.d.mts +13 -0
- package/dist/components/separator.mjs +16 -0
- package/dist/components/sheet.d.mts +43 -0
- package/dist/components/sheet.mjs +74 -0
- package/dist/components/sidebar.d.mts +163 -0
- package/dist/components/sidebar.mjs +378 -0
- package/dist/components/skeleton.d.mts +16 -0
- package/dist/components/skeleton.mjs +21 -0
- package/dist/components/sonner.d.mts +29 -0
- package/dist/components/sonner.mjs +76 -0
- package/dist/components/spinner.d.mts +30 -0
- package/dist/components/spinner.mjs +46 -0
- package/dist/components/status-dot.d.mts +19 -0
- package/dist/components/status-dot.mjs +34 -0
- package/dist/components/switch.d.mts +11 -0
- package/dist/components/switch.mjs +18 -0
- package/dist/components/table.d.mts +38 -0
- package/dist/components/table.mjs +65 -0
- package/dist/components/tabs.d.mts +58 -0
- package/dist/components/tabs.mjs +119 -0
- package/dist/components/tag.d.mts +35 -0
- package/dist/components/tag.mjs +65 -0
- package/dist/components/textarea.d.mts +21 -0
- package/dist/components/textarea.mjs +44 -0
- package/dist/components/toggle-group.d.mts +28 -0
- package/dist/components/toggle-group.mjs +72 -0
- package/dist/components/tooltip-icon-button.d.mts +12 -0
- package/dist/components/tooltip-icon-button.mjs +27 -0
- package/dist/components/tooltip.d.mts +23 -0
- package/dist/components/tooltip.mjs +35 -0
- package/dist/hooks/use-copy-to-clipboard.d.mts +11 -0
- package/dist/hooks/use-copy-to-clipboard.mjs +24 -0
- package/dist/hooks/use-mobile.d.mts +4 -0
- package/dist/hooks/use-mobile.mjs +16 -0
- package/dist/lib/cn.d.mts +6 -0
- package/dist/lib/cn.mjs +8 -0
- package/package.json +88 -0
- package/src/components/accordion-card.tsx +103 -0
- package/src/components/accordion.tsx +63 -0
- package/src/components/alert.tsx +74 -0
- package/src/components/attachment-tile.tsx +68 -0
- package/src/components/avatar.tsx +127 -0
- package/src/components/badge.tsx +41 -0
- package/src/components/breadcrumb.tsx +98 -0
- package/src/components/button.tsx +106 -0
- package/src/components/card.tsx +62 -0
- package/src/components/checkbox.tsx +35 -0
- package/src/components/collapsible.tsx +18 -0
- package/src/components/combobox.tsx +393 -0
- package/src/components/command.tsx +112 -0
- package/src/components/copyable.tsx +47 -0
- package/src/components/description-list.tsx +36 -0
- package/src/components/dialog.tsx +161 -0
- package/src/components/dropdown-menu.tsx +234 -0
- package/src/components/input-group.tsx +97 -0
- package/src/components/input.tsx +145 -0
- package/src/components/label.tsx +20 -0
- package/src/components/pagination.tsx +53 -0
- package/src/components/popover.tsx +49 -0
- package/src/components/radio-group.tsx +33 -0
- package/src/components/scroll-area.tsx +48 -0
- package/src/components/select-trigger-variants.ts +28 -0
- package/src/components/select.tsx +186 -0
- package/src/components/separator.tsx +30 -0
- package/src/components/sheet.tsx +112 -0
- package/src/components/sidebar.tsx +682 -0
- package/src/components/skeleton.tsx +24 -0
- package/src/components/sonner.tsx +91 -0
- package/src/components/spinner.tsx +62 -0
- package/src/components/status-dot.tsx +33 -0
- package/src/components/switch.tsx +33 -0
- package/src/components/table.tsx +89 -0
- package/src/components/tabs.tsx +226 -0
- package/src/components/tag.tsx +82 -0
- package/src/components/textarea.tsx +70 -0
- package/src/components/toggle-group.tsx +96 -0
- package/src/components/tooltip-icon-button.tsx +33 -0
- package/src/components/tooltip.tsx +54 -0
- package/src/hooks/use-copy-to-clipboard.ts +27 -0
- package/src/hooks/use-mobile.ts +17 -0
- package/src/lib/cn.ts +6 -0
- package/src/styles/tokens.css +352 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/accordion-card.d.ts
|
|
6
|
+
declare function AccordionCard({
|
|
7
|
+
defaultOpen,
|
|
8
|
+
open,
|
|
9
|
+
onOpenChange,
|
|
10
|
+
disabled,
|
|
11
|
+
className,
|
|
12
|
+
children,
|
|
13
|
+
...props
|
|
14
|
+
}: {
|
|
15
|
+
defaultOpen?: boolean;
|
|
16
|
+
open?: boolean;
|
|
17
|
+
onOpenChange?: (nextOpen: boolean) => void;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
} & Omit<React.ComponentProps<typeof AccordionPrimitive.Root>, "type" | "collapsible" | "defaultValue" | "value" | "onValueChange" | "disabled">): _$react_jsx_runtime0.JSX.Element;
|
|
20
|
+
declare function AccordionCardHeader({
|
|
21
|
+
className,
|
|
22
|
+
children,
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
|
|
25
|
+
declare function AccordionCardTitle({
|
|
26
|
+
className,
|
|
27
|
+
children,
|
|
28
|
+
...props
|
|
29
|
+
}: React.HTMLAttributes<HTMLHeadingElement>): _$react_jsx_runtime0.JSX.Element;
|
|
30
|
+
/**
|
|
31
|
+
* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
|
|
32
|
+
* The root always applies overflow-hidden and the accordion animations.
|
|
33
|
+
* To override overflow or animation behavior, wrap this component in an additional element.
|
|
34
|
+
*/
|
|
35
|
+
declare function AccordionCardContent({
|
|
36
|
+
className,
|
|
37
|
+
children,
|
|
38
|
+
...props
|
|
39
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Content>): _$react_jsx_runtime0.JSX.Element;
|
|
40
|
+
//#endregion
|
|
41
|
+
export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
4
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/accordion-card.tsx
|
|
7
|
+
const ACCORDION_CARD_VALUE = "accordion-card";
|
|
8
|
+
function AccordionCard({ defaultOpen = false, open, onOpenChange, disabled, className, children, ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
|
|
10
|
+
"data-slot": "accordion-card",
|
|
11
|
+
className: cn("rounded-xl border bg-card text-card-foreground data-[disabled]:opacity-50", className),
|
|
12
|
+
...props,
|
|
13
|
+
type: "single",
|
|
14
|
+
collapsible: true,
|
|
15
|
+
disabled,
|
|
16
|
+
defaultValue: defaultOpen ? ACCORDION_CARD_VALUE : void 0,
|
|
17
|
+
...open !== void 0 ? { value: open ? ACCORDION_CARD_VALUE : "" } : {},
|
|
18
|
+
...onOpenChange !== void 0 ? { onValueChange: (value) => onOpenChange(value !== "") } : {},
|
|
19
|
+
children: /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
20
|
+
value: ACCORDION_CARD_VALUE,
|
|
21
|
+
disabled,
|
|
22
|
+
children
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
function AccordionCardHeader({ className, children, ...props }) {
|
|
27
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
28
|
+
className: "flex",
|
|
29
|
+
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
30
|
+
"data-slot": "accordion-card-header",
|
|
31
|
+
className: cn("flex flex-1 items-center justify-between gap-4 p-4", "type-text-md font-semibold text-foreground", "rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card", "[@media(hover:hover)]:hover:underline", "disabled:pointer-events-none", "[&[data-state=open]>svg]:rotate-180", className),
|
|
32
|
+
...props,
|
|
33
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-5 shrink-0 text-muted-foreground transition-transform duration-200" })]
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
function AccordionCardTitle({ className, children, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsx("h3", {
|
|
39
|
+
className: cn("type-text-md font-semibold", className),
|
|
40
|
+
...props,
|
|
41
|
+
children
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
|
|
46
|
+
* The root always applies overflow-hidden and the accordion animations.
|
|
47
|
+
* To override overflow or animation behavior, wrap this component in an additional element.
|
|
48
|
+
*/
|
|
49
|
+
function AccordionCardContent({ className, children, ...props }) {
|
|
50
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
51
|
+
"data-slot": "accordion-card-content",
|
|
52
|
+
className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
53
|
+
...props,
|
|
54
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
55
|
+
className: cn("px-4 pb-4 type-text-sm text-muted-foreground", className),
|
|
56
|
+
children
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
//#endregion
|
|
61
|
+
export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/accordion.d.ts
|
|
6
|
+
declare function Accordion({
|
|
7
|
+
...props
|
|
8
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
|
|
9
|
+
declare function AccordionItem({
|
|
10
|
+
className,
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Item>): _$react_jsx_runtime0.JSX.Element;
|
|
13
|
+
declare function AccordionTrigger({
|
|
14
|
+
className,
|
|
15
|
+
children,
|
|
16
|
+
...props
|
|
17
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
|
|
20
|
+
* The root always applies overflow-hidden and the accordion animations.
|
|
21
|
+
* To override overflow or animation behavior, wrap this component in an additional element.
|
|
22
|
+
*/
|
|
23
|
+
declare function AccordionContent({
|
|
24
|
+
className,
|
|
25
|
+
children,
|
|
26
|
+
...props
|
|
27
|
+
}: React.ComponentProps<typeof AccordionPrimitive.Content>): _$react_jsx_runtime0.JSX.Element;
|
|
28
|
+
//#endregion
|
|
29
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
4
|
+
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/accordion.tsx
|
|
7
|
+
function Accordion({ ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
|
|
9
|
+
"data-slot": "accordion",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function AccordionItem({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
|
|
15
|
+
"data-slot": "accordion-item",
|
|
16
|
+
className: cn("border-b border-border-secondary", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
|
|
22
|
+
className: "flex",
|
|
23
|
+
children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
|
|
24
|
+
"data-slot": "accordion-trigger",
|
|
25
|
+
className: cn("flex flex-1 items-center justify-between gap-4 py-4", "type-text-md font-semibold text-foreground", "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm", "[@media(hover:hover)]:hover:underline", "disabled:pointer-events-none disabled:opacity-50", "[&[data-state=open]>svg]:rotate-180", className),
|
|
26
|
+
...props,
|
|
27
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-6 shrink-0 text-muted-foreground transition-transform duration-200" })]
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
|
|
33
|
+
* The root always applies overflow-hidden and the accordion animations.
|
|
34
|
+
* To override overflow or animation behavior, wrap this component in an additional element.
|
|
35
|
+
*/
|
|
36
|
+
function AccordionContent({ className, children, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
|
|
38
|
+
"data-slot": "accordion-content",
|
|
39
|
+
className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
40
|
+
...props,
|
|
41
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
42
|
+
className: cn("pb-4 type-text-sm text-muted-foreground", className),
|
|
43
|
+
children
|
|
44
|
+
})
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
//#endregion
|
|
48
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
5
|
+
|
|
6
|
+
//#region src/components/alert.d.ts
|
|
7
|
+
declare const alertVariants: (props?: ({
|
|
8
|
+
variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
|
|
9
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
|
|
11
|
+
declare function Alert({
|
|
12
|
+
className,
|
|
13
|
+
variant,
|
|
14
|
+
...props
|
|
15
|
+
}: AlertProps): _$react_jsx_runtime0.JSX.Element;
|
|
16
|
+
declare function AlertTitle({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: React.HTMLAttributes<HTMLParagraphElement>): _$react_jsx_runtime0.JSX.Element;
|
|
20
|
+
declare function AlertDescription({
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: React.HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
interface ConvenienceAlertProps {
|
|
25
|
+
title?: string;
|
|
26
|
+
description?: React.ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
declare function ErrorAlert({
|
|
30
|
+
title,
|
|
31
|
+
description,
|
|
32
|
+
className
|
|
33
|
+
}: ConvenienceAlertProps): _$react_jsx_runtime0.JSX.Element;
|
|
34
|
+
declare function WarningAlert({
|
|
35
|
+
title,
|
|
36
|
+
description,
|
|
37
|
+
className
|
|
38
|
+
}: ConvenienceAlertProps): _$react_jsx_runtime0.JSX.Element;
|
|
39
|
+
//#endregion
|
|
40
|
+
export { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { AlertTriangleIcon } from "lucide-react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
//#region src/components/alert.tsx
|
|
7
|
+
const alertVariants = cva([
|
|
8
|
+
"w-full rounded-md border px-4 py-3",
|
|
9
|
+
"grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 items-start",
|
|
10
|
+
"[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:mt-0.5",
|
|
11
|
+
"[&>:not(svg)]:col-start-2"
|
|
12
|
+
].join(" "), {
|
|
13
|
+
variants: { variant: {
|
|
14
|
+
default: "bg-muted border-border [&>svg]:text-muted-foreground",
|
|
15
|
+
destructive: "bg-destructive/10 border-destructive/30 [&>svg]:text-destructive",
|
|
16
|
+
warning: "bg-badge-warning/10 border-badge-warning/30 [&>svg]:text-badge-warning",
|
|
17
|
+
success: "bg-badge-success/10 border-badge-success/30 [&>svg]:text-badge-success"
|
|
18
|
+
} },
|
|
19
|
+
defaultVariants: { variant: "default" }
|
|
20
|
+
});
|
|
21
|
+
function Alert({ className, variant, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx("div", {
|
|
23
|
+
role: "alert",
|
|
24
|
+
className: cn(alertVariants({ variant }), className),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function AlertTitle({ className, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx("p", {
|
|
30
|
+
className: cn("type-text-sm font-semibold leading-snug", className),
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function AlertDescription({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx("div", {
|
|
36
|
+
className: cn("type-text-sm text-muted-foreground [&_p]:leading-relaxed", className),
|
|
37
|
+
...props
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
function ErrorAlert({ title = "An unexpected error occurred", description = "Please try again later or contact support if the problem persists.", className }) {
|
|
41
|
+
return /* @__PURE__ */ jsxs(Alert, {
|
|
42
|
+
variant: "destructive",
|
|
43
|
+
className,
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(AlertTriangleIcon, {}),
|
|
46
|
+
/* @__PURE__ */ jsx(AlertTitle, { children: title }),
|
|
47
|
+
/* @__PURE__ */ jsx(AlertDescription, { children: description })
|
|
48
|
+
]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
function WarningAlert({ title, description, className }) {
|
|
52
|
+
return /* @__PURE__ */ jsxs(Alert, {
|
|
53
|
+
variant: "warning",
|
|
54
|
+
className,
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsx(AlertTriangleIcon, {}),
|
|
57
|
+
/* @__PURE__ */ jsx(AlertTitle, { children: title }),
|
|
58
|
+
/* @__PURE__ */ jsx(AlertDescription, { children: description })
|
|
59
|
+
]
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
//#endregion
|
|
63
|
+
export { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/attachment-tile.d.ts
|
|
4
|
+
interface AttachmentTileProps {
|
|
5
|
+
/** Source URL for the attachment thumbnail */
|
|
6
|
+
src?: string;
|
|
7
|
+
/** Whether the attachment is an image */
|
|
8
|
+
isImage?: boolean;
|
|
9
|
+
/** Accessible label describing the attachment */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Called when the remove button is clicked */
|
|
12
|
+
onRemove?: () => void;
|
|
13
|
+
/** Called when the tile is clicked (e.g. to open a preview) */
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
declare function AttachmentTile({
|
|
18
|
+
src,
|
|
19
|
+
isImage,
|
|
20
|
+
label,
|
|
21
|
+
onRemove,
|
|
22
|
+
onClick,
|
|
23
|
+
className
|
|
24
|
+
}: AttachmentTileProps): _$react_jsx_runtime0.JSX.Element;
|
|
25
|
+
//#endregion
|
|
26
|
+
export { AttachmentTile, type AttachmentTileProps };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { TooltipIconButton } from "./tooltip-icon-button.mjs";
|
|
4
|
+
import { FileText, XIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { useState } from "react";
|
|
7
|
+
//#region src/components/attachment-tile.tsx
|
|
8
|
+
function AttachmentTile({ src, isImage, label, onRemove, onClick, className }) {
|
|
9
|
+
const [hasError, setHasError] = useState(false);
|
|
10
|
+
const showImage = isImage && src && !hasError;
|
|
11
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
12
|
+
className: cn("group relative w-fit", className),
|
|
13
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
14
|
+
type: "button",
|
|
15
|
+
className: cn("bg-muted flex size-18 cursor-pointer items-center justify-center overflow-hidden rounded-[14px] border transition-opacity", "[@media(hover:hover)]:hover:opacity-75"),
|
|
16
|
+
onClick,
|
|
17
|
+
"aria-label": label ?? `${isImage ? "Image" : "File"} attachment`,
|
|
18
|
+
children: showImage ? /* @__PURE__ */ jsx("img", {
|
|
19
|
+
src,
|
|
20
|
+
alt: "Attachment preview",
|
|
21
|
+
className: "size-full object-cover",
|
|
22
|
+
onError: () => setHasError(true)
|
|
23
|
+
}) : /* @__PURE__ */ jsx(FileText, { className: "text-muted-foreground size-8" })
|
|
24
|
+
}), onRemove && /* @__PURE__ */ jsx(TooltipIconButton, {
|
|
25
|
+
tooltip: "Remove file",
|
|
26
|
+
size: "icon-rounded",
|
|
27
|
+
variant: "primary",
|
|
28
|
+
onClick: onRemove,
|
|
29
|
+
className: cn("absolute -top-1.5 -right-1.5 z-10 size-5", "opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"),
|
|
30
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "size-3 dark:stroke-[2.5px]" })
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
//#endregion
|
|
35
|
+
export { AttachmentTile };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
5
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
6
|
+
|
|
7
|
+
//#region src/components/avatar.d.ts
|
|
8
|
+
declare const avatarVariants: (props?: ({
|
|
9
|
+
size?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
|
|
10
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
11
|
+
type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
|
|
12
|
+
type AvatarStatus = "online";
|
|
13
|
+
interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
|
|
14
|
+
status?: AvatarStatus;
|
|
15
|
+
}
|
|
16
|
+
declare function Avatar({
|
|
17
|
+
size,
|
|
18
|
+
status,
|
|
19
|
+
className,
|
|
20
|
+
children,
|
|
21
|
+
...props
|
|
22
|
+
}: AvatarProps): _$react_jsx_runtime0.JSX.Element;
|
|
23
|
+
declare function AvatarImage({
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Image>): _$react_jsx_runtime0.JSX.Element;
|
|
27
|
+
declare function AvatarFallback({
|
|
28
|
+
className,
|
|
29
|
+
...props
|
|
30
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>): _$react_jsx_runtime0.JSX.Element;
|
|
31
|
+
interface AvatarLabelGroupProps extends React.ComponentProps<"div"> {
|
|
32
|
+
size?: "sm" | "md";
|
|
33
|
+
src?: string;
|
|
34
|
+
alt?: string;
|
|
35
|
+
fallback?: string;
|
|
36
|
+
name: string;
|
|
37
|
+
label?: string;
|
|
38
|
+
status?: AvatarStatus;
|
|
39
|
+
}
|
|
40
|
+
declare function AvatarLabelGroup({
|
|
41
|
+
size,
|
|
42
|
+
src,
|
|
43
|
+
alt,
|
|
44
|
+
fallback,
|
|
45
|
+
name,
|
|
46
|
+
label,
|
|
47
|
+
status,
|
|
48
|
+
className,
|
|
49
|
+
...props
|
|
50
|
+
}: AvatarLabelGroupProps): _$react_jsx_runtime0.JSX.Element;
|
|
51
|
+
//#endregion
|
|
52
|
+
export { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup, type AvatarSize, type AvatarStatus };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
6
|
+
//#region src/components/avatar.tsx
|
|
7
|
+
const avatarVariants = cva("relative inline-flex shrink-0", {
|
|
8
|
+
variants: { size: {
|
|
9
|
+
xs: "size-6",
|
|
10
|
+
sm: "size-8",
|
|
11
|
+
md: "size-10",
|
|
12
|
+
lg: "size-12",
|
|
13
|
+
xl: "size-14"
|
|
14
|
+
} },
|
|
15
|
+
defaultVariants: { size: "md" }
|
|
16
|
+
});
|
|
17
|
+
const avatarIndicatorVariants = cva("absolute -bottom-px -right-px rounded-full bg-avatar-online border-2 border-background", {
|
|
18
|
+
variants: { size: {
|
|
19
|
+
xs: "size-2",
|
|
20
|
+
sm: "size-2.5",
|
|
21
|
+
md: "size-3",
|
|
22
|
+
lg: "size-3",
|
|
23
|
+
xl: "size-3.5"
|
|
24
|
+
} },
|
|
25
|
+
defaultVariants: { size: "md" }
|
|
26
|
+
});
|
|
27
|
+
function Avatar({ size, status, className, children, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
29
|
+
className: cn(avatarVariants({ size }), className),
|
|
30
|
+
children: [/* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
31
|
+
"data-slot": "avatar",
|
|
32
|
+
className: "size-full overflow-hidden rounded-full border border-avatar-border",
|
|
33
|
+
...props,
|
|
34
|
+
children
|
|
35
|
+
}), status === "online" && /* @__PURE__ */ jsx("span", {
|
|
36
|
+
"aria-label": "Online",
|
|
37
|
+
role: "img",
|
|
38
|
+
className: avatarIndicatorVariants({ size })
|
|
39
|
+
})]
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function AvatarImage({ className, ...props }) {
|
|
43
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
44
|
+
"data-slot": "avatar-image",
|
|
45
|
+
className: cn("aspect-square size-full object-cover", className),
|
|
46
|
+
...props
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
function AvatarFallback({ className, ...props }) {
|
|
50
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
51
|
+
"data-slot": "avatar-fallback",
|
|
52
|
+
className: cn("flex size-full items-center justify-center rounded-full bg-muted type-text-sm font-medium text-muted-foreground", className),
|
|
53
|
+
...props
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
function AvatarLabelGroup({ size = "md", src, alt, fallback, name, label, status, className, ...props }) {
|
|
57
|
+
const avatarSize = size === "sm" ? "sm" : "md";
|
|
58
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
59
|
+
className: cn("flex items-center gap-2", className),
|
|
60
|
+
...props,
|
|
61
|
+
children: [/* @__PURE__ */ jsxs(Avatar, {
|
|
62
|
+
size: avatarSize,
|
|
63
|
+
status,
|
|
64
|
+
children: [src && /* @__PURE__ */ jsx(AvatarImage, {
|
|
65
|
+
src,
|
|
66
|
+
alt: alt ?? name
|
|
67
|
+
}), /* @__PURE__ */ jsx(AvatarFallback, { children: fallback ?? name.slice(0, 2).toUpperCase() })]
|
|
68
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
69
|
+
className: "flex min-w-0 flex-col",
|
|
70
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
71
|
+
className: "type-text-sm font-semibold text-foreground truncate",
|
|
72
|
+
children: name
|
|
73
|
+
}), label && /* @__PURE__ */ jsx("span", {
|
|
74
|
+
className: "type-text-sm text-subtle-foreground truncate",
|
|
75
|
+
children: label
|
|
76
|
+
})]
|
|
77
|
+
})]
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
//#endregion
|
|
81
|
+
export { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { VariantProps } from "class-variance-authority";
|
|
3
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
4
|
+
|
|
5
|
+
//#region src/components/badge.d.ts
|
|
6
|
+
declare const badgeVariants: (props?: ({
|
|
7
|
+
variant?: "secondary" | "primary" | "success" | "warning" | "error" | null | undefined;
|
|
8
|
+
size?: "sm" | "md" | null | undefined;
|
|
9
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
10
|
+
interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
|
|
11
|
+
declare function Badge({
|
|
12
|
+
className,
|
|
13
|
+
variant,
|
|
14
|
+
size,
|
|
15
|
+
children,
|
|
16
|
+
...props
|
|
17
|
+
}: BadgeProps): _$react_jsx_runtime0.JSX.Element;
|
|
18
|
+
type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
|
|
19
|
+
//#endregion
|
|
20
|
+
export { Badge, type BadgeVariant, badgeVariants };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
//#region src/components/badge.tsx
|
|
6
|
+
const badgeVariants = cva("inline-flex items-center justify-center rounded-full border font-medium whitespace-nowrap shrink-0 [&>svg]:shrink-0 [&>svg]:pointer-events-none", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
secondary: "border-border bg-background text-muted-foreground",
|
|
10
|
+
primary: "border-transparent bg-primary text-primary-foreground",
|
|
11
|
+
success: "border-badge-success/30 bg-badge-success/10 text-badge-success",
|
|
12
|
+
warning: "border-badge-warning/30 bg-badge-warning/10 text-badge-warning",
|
|
13
|
+
error: "border-badge-error/30 bg-badge-error/10 text-badge-error"
|
|
14
|
+
},
|
|
15
|
+
size: {
|
|
16
|
+
sm: "px-1.5 py-px gap-0.5 type-text-xs [&>svg]:size-2.5",
|
|
17
|
+
md: "px-[9px] py-0.5 gap-1 type-text-sm [&>svg]:size-3"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
defaultVariants: {
|
|
21
|
+
variant: "secondary",
|
|
22
|
+
size: "md"
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
function Badge({ className, variant, size, children, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx("span", {
|
|
27
|
+
className: cn(badgeVariants({
|
|
28
|
+
variant,
|
|
29
|
+
size
|
|
30
|
+
}), className),
|
|
31
|
+
...props,
|
|
32
|
+
children
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/breadcrumb.d.ts
|
|
5
|
+
declare function Breadcrumb({
|
|
6
|
+
className,
|
|
7
|
+
...props
|
|
8
|
+
}: React.ComponentProps<"nav">): _$react_jsx_runtime0.JSX.Element;
|
|
9
|
+
declare function BreadcrumbList({
|
|
10
|
+
className,
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<"ol">): _$react_jsx_runtime0.JSX.Element;
|
|
13
|
+
declare function BreadcrumbItem({
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
|
|
17
|
+
declare function BreadcrumbLink({
|
|
18
|
+
asChild,
|
|
19
|
+
className,
|
|
20
|
+
...props
|
|
21
|
+
}: React.ComponentProps<"a"> & {
|
|
22
|
+
asChild?: boolean;
|
|
23
|
+
}): _$react_jsx_runtime0.JSX.Element;
|
|
24
|
+
declare function BreadcrumbPage({
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
|
|
28
|
+
declare function BreadcrumbSeparator({
|
|
29
|
+
children,
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
|
|
33
|
+
declare function BreadcrumbChevron({
|
|
34
|
+
className,
|
|
35
|
+
...props
|
|
36
|
+
}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
|
|
37
|
+
declare function BreadcrumbEllipsis({
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
|
|
41
|
+
//#endregion
|
|
42
|
+
export { Breadcrumb, BreadcrumbChevron, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { ChevronDown, Ellipsis } from "lucide-react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
6
|
+
//#region src/components/breadcrumb.tsx
|
|
7
|
+
function Breadcrumb({ className, ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
9
|
+
"data-slot": "breadcrumb",
|
|
10
|
+
"aria-label": "Breadcrumb",
|
|
11
|
+
className,
|
|
12
|
+
...props
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function BreadcrumbList({ className, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
17
|
+
"data-slot": "breadcrumb-list",
|
|
18
|
+
className: cn("flex items-center gap-2", className),
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx("li", {
|
|
24
|
+
"data-slot": "breadcrumb-item",
|
|
25
|
+
className: cn("inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5", className),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function BreadcrumbLink({ asChild, className, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
|
|
31
|
+
"data-slot": "breadcrumb-link",
|
|
32
|
+
className: cn("type-text-sm font-medium text-subtle-foreground transition-colors [@media(hover:hover)]:hover:text-muted-foreground", className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx("span", {
|
|
38
|
+
"data-slot": "breadcrumb-page",
|
|
39
|
+
"aria-current": "page",
|
|
40
|
+
className: cn("type-text-sm font-medium text-foreground", className),
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsx("li", {
|
|
46
|
+
"data-slot": "breadcrumb-separator",
|
|
47
|
+
role: "presentation",
|
|
48
|
+
"aria-hidden": "true",
|
|
49
|
+
className: cn("flex items-center text-subtle-foreground", className),
|
|
50
|
+
...props,
|
|
51
|
+
children: children ?? /* @__PURE__ */ jsx("span", {
|
|
52
|
+
className: "inline-block size-4 text-center leading-4 select-none",
|
|
53
|
+
children: "/"
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
function BreadcrumbChevron({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx("span", {
|
|
59
|
+
"data-slot": "breadcrumb-chevron",
|
|
60
|
+
className: cn("text-subtle-foreground [&>svg]:size-4", className),
|
|
61
|
+
...props,
|
|
62
|
+
children: /* @__PURE__ */ jsx(ChevronDown, {})
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
function BreadcrumbEllipsis({ className, ...props }) {
|
|
66
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
67
|
+
"data-slot": "breadcrumb-ellipsis",
|
|
68
|
+
role: "presentation",
|
|
69
|
+
"aria-hidden": "true",
|
|
70
|
+
className: cn("flex size-9 items-center justify-center", className),
|
|
71
|
+
...props,
|
|
72
|
+
children: [/* @__PURE__ */ jsx(Ellipsis, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
73
|
+
className: "sr-only",
|
|
74
|
+
children: "More"
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
//#endregion
|
|
79
|
+
export { Breadcrumb, BreadcrumbChevron, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|