@codefast/ui 0.3.11-canary.1 → 0.3.11
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/CHANGELOG.md +36 -0
- package/README.md +34 -14
- package/dist/components/accordion.d.ts +29 -10
- package/dist/components/accordion.js +38 -37
- package/dist/components/alert-dialog.d.ts +60 -24
- package/dist/components/alert-dialog.js +69 -72
- package/dist/components/alert.d.ts +27 -15
- package/dist/components/alert.js +29 -31
- package/dist/components/aspect-ratio.d.ts +8 -4
- package/dist/components/aspect-ratio.js +7 -5
- package/dist/components/avatar.d.ts +17 -6
- package/dist/components/avatar.js +19 -17
- package/dist/components/badge.d.ts +21 -14
- package/dist/components/badge.js +19 -22
- package/dist/components/breadcrumb.d.ts +35 -12
- package/dist/components/breadcrumb.js +48 -54
- package/dist/components/button-group.d.ts +29 -14
- package/dist/components/button-group.js +27 -32
- package/dist/components/button.d.ts +35 -25
- package/dist/components/button.js +50 -48
- package/dist/components/calendar.d.ts +24 -9
- package/dist/components/calendar.js +92 -98
- package/dist/components/card.d.ts +34 -10
- package/dist/components/card.js +39 -37
- package/dist/components/carousel.d.ts +55 -24
- package/dist/components/carousel.js +113 -130
- package/dist/components/chart.d.ts +72 -36
- package/dist/components/chart.js +154 -166
- package/dist/components/checkbox-cards.d.ts +15 -8
- package/dist/components/checkbox-cards.js +22 -25
- package/dist/components/checkbox-group.d.ts +16 -8
- package/dist/components/checkbox-group.js +19 -19
- package/dist/components/checkbox.d.ts +9 -4
- package/dist/components/checkbox.js +14 -14
- package/dist/components/collapsible.d.ts +14 -6
- package/dist/components/collapsible.js +18 -16
- package/dist/components/command.d.ts +55 -23
- package/dist/components/command.js +70 -85
- package/dist/components/context-menu.d.ts +72 -22
- package/dist/components/context-menu.js +88 -109
- package/dist/components/dialog.d.ts +53 -22
- package/dist/components/dialog.js +71 -85
- package/dist/components/drawer.d.ts +60 -28
- package/dist/components/drawer.js +59 -67
- package/dist/components/dropdown-menu.d.ts +73 -22
- package/dist/components/dropdown-menu.js +95 -112
- package/dist/components/empty.d.ts +37 -15
- package/dist/components/empty.js +43 -45
- package/dist/components/field.d.ts +63 -25
- package/dist/components/field.js +88 -104
- package/dist/components/form.d.ts +37 -15
- package/dist/components/form.js +65 -70
- package/dist/components/hover-card.d.ts +21 -7
- package/dist/components/hover-card.js +24 -24
- package/dist/components/input-group.d.ts +53 -28
- package/dist/components/input-group.js +63 -77
- package/dist/components/input-number.d.ts +28 -7
- package/dist/components/input-number.js +55 -59
- package/dist/components/input-otp.d.ts +24 -10
- package/dist/components/input-otp.js +33 -37
- package/dist/components/input-password.d.ts +12 -5
- package/dist/components/input-password.js +31 -32
- package/dist/components/input-search.d.ts +18 -8
- package/dist/components/input-search.js +43 -41
- package/dist/components/input.d.ts +10 -4
- package/dist/components/input.js +9 -7
- package/dist/components/item.d.ts +69 -32
- package/dist/components/item.js +89 -92
- package/dist/components/kbd.d.ts +13 -5
- package/dist/components/kbd.js +13 -11
- package/dist/components/label.d.ts +9 -4
- package/dist/components/label.js +9 -7
- package/dist/components/menubar.d.ts +80 -23
- package/dist/components/menubar.js +97 -118
- package/dist/components/native-select.d.ts +16 -6
- package/dist/components/native-select.js +25 -26
- package/dist/components/navigation-menu.d.ts +36 -12
- package/dist/components/navigation-menu.js +60 -75
- package/dist/components/pagination.d.ts +35 -14
- package/dist/components/pagination.js +54 -69
- package/dist/components/popover.d.ts +24 -8
- package/dist/components/popover.js +28 -28
- package/dist/components/progress-circle.d.ts +106 -88
- package/dist/components/progress-circle.js +106 -138
- package/dist/components/progress.d.ts +10 -4
- package/dist/components/progress.js +14 -14
- package/dist/components/radio-cards.d.ts +10 -4
- package/dist/components/radio-cards.js +22 -23
- package/dist/components/radio-group.d.ts +13 -5
- package/dist/components/radio-group.js +18 -16
- package/dist/components/radio.d.ts +12 -5
- package/dist/components/radio.js +10 -8
- package/dist/components/resizable.d.ts +18 -7
- package/dist/components/resizable.js +22 -22
- package/dist/components/scroll-area.d.ts +33 -20
- package/dist/components/scroll-area.js +84 -88
- package/dist/components/select.d.ts +50 -16
- package/dist/components/select.js +77 -96
- package/dist/components/separator.d.ts +29 -19
- package/dist/components/separator.js +36 -34
- package/dist/components/sheet.d.ts +62 -29
- package/dist/components/sheet.js +79 -100
- package/dist/components/sidebar.d.ts +160 -66
- package/dist/components/sidebar.js +294 -336
- package/dist/components/skeleton.d.ts +9 -4
- package/dist/components/skeleton.js +8 -6
- package/dist/components/slider.d.ts +13 -4
- package/dist/components/slider.js +34 -40
- package/dist/components/sonner.d.ts +10 -7
- package/dist/components/sonner.js +16 -14
- package/dist/components/spinner.d.ts +12 -5
- package/dist/components/spinner.js +33 -35
- package/dist/components/switch.d.ts +9 -4
- package/dist/components/switch.js +13 -11
- package/dist/components/table.d.ts +37 -11
- package/dist/components/table.js +47 -45
- package/dist/components/tabs.d.ts +21 -7
- package/dist/components/tabs.js +24 -22
- package/dist/components/textarea.d.ts +9 -4
- package/dist/components/textarea.js +8 -6
- package/dist/components/toggle-group.d.ts +24 -9
- package/dist/components/toggle-group.js +41 -42
- package/dist/components/toggle.d.ts +25 -17
- package/dist/components/toggle.js +30 -28
- package/dist/components/tooltip.d.ts +24 -8
- package/dist/components/tooltip.js +29 -32
- package/dist/hooks/use-animated-value.d.ts +4 -1
- package/dist/hooks/use-animated-value.js +57 -36
- package/dist/hooks/use-copy-to-clipboard.d.ts +11 -5
- package/dist/hooks/use-copy-to-clipboard.js +39 -20
- package/dist/hooks/use-is-mobile.d.ts +4 -1
- package/dist/hooks/use-is-mobile.js +21 -1
- package/dist/hooks/use-media-query.d.ts +4 -1
- package/dist/hooks/use-media-query.js +45 -18
- package/dist/hooks/use-mutation-observer.d.ts +6 -2
- package/dist/hooks/use-mutation-observer.js +34 -16
- package/dist/hooks/use-pagination.d.ts +22 -14
- package/dist/hooks/use-pagination.js +100 -49
- package/dist/index.d.ts +69 -130
- package/dist/index.js +11 -11
- package/dist/primitives/checkbox-group.d.ts +105 -83
- package/dist/primitives/checkbox-group.js +111 -84
- package/dist/primitives/input-number.d.ts +51 -40
- package/dist/primitives/input-number.js +483 -350
- package/dist/primitives/input.d.ts +48 -42
- package/dist/primitives/input.js +65 -43
- package/dist/primitives/progress-circle.d.ts +79 -48
- package/dist/primitives/progress-circle.js +154 -105
- package/package.json +6 -7
package/dist/components/alert.js
CHANGED
|
@@ -1,41 +1,39 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
1
|
import { cn, tv } from "@codefast/tailwind-variants";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/alert.tsx
|
|
3
4
|
const alertVariants = tv({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
default: "text-card-foreground",
|
|
11
|
-
destructive: "text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
|
|
12
|
-
}
|
|
13
|
-
}
|
|
5
|
+
base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-xl border bg-card px-4 py-3 text-sm has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
6
|
+
defaultVariants: { variant: "default" },
|
|
7
|
+
variants: { variant: {
|
|
8
|
+
default: "text-card-foreground",
|
|
9
|
+
destructive: "text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
|
|
10
|
+
} }
|
|
14
11
|
});
|
|
15
12
|
function Alert({ className, variant, ...props }) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
13
|
+
return /* @__PURE__ */ jsx("div", {
|
|
14
|
+
className: alertVariants({
|
|
15
|
+
className,
|
|
16
|
+
variant
|
|
17
|
+
}),
|
|
18
|
+
"data-slot": "alert",
|
|
19
|
+
role: "alert",
|
|
20
|
+
...props
|
|
21
|
+
});
|
|
25
22
|
}
|
|
26
23
|
function AlertTitle({ children, className, ...props }) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
return /* @__PURE__ */ jsx("div", {
|
|
25
|
+
className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
|
|
26
|
+
"data-slot": "alert-title",
|
|
27
|
+
...props,
|
|
28
|
+
children
|
|
29
|
+
});
|
|
33
30
|
}
|
|
34
31
|
function AlertDescription({ className, ...props }) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
return /* @__PURE__ */ jsx("div", {
|
|
33
|
+
className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className),
|
|
34
|
+
"data-slot": "alert-description",
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
40
37
|
}
|
|
38
|
+
//#endregion
|
|
41
39
|
export { Alert, AlertDescription, AlertTitle, alertVariants };
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import type { ComponentProps, JSX } from "react";
|
|
2
1
|
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
|
2
|
+
import { ComponentProps, JSX } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/aspect-ratio.d.ts
|
|
3
5
|
type AspectRatioProps = ComponentProps<typeof AspectRatioPrimitive.Root>;
|
|
4
|
-
declare function AspectRatio({
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
declare function AspectRatio({
|
|
7
|
+
...props
|
|
8
|
+
}: AspectRatioProps): JSX.Element;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { AspectRatio, type AspectRatioProps };
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
|
4
|
+
//#region src/components/aspect-ratio.tsx
|
|
4
5
|
function AspectRatio({ ...props }) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
return /* @__PURE__ */ jsx(AspectRatioPrimitive.Root, {
|
|
7
|
+
"data-slot": "aspect-ratio",
|
|
8
|
+
...props
|
|
9
|
+
});
|
|
9
10
|
}
|
|
11
|
+
//#endregion
|
|
10
12
|
export { AspectRatio };
|
|
@@ -1,10 +1,21 @@
|
|
|
1
|
-
import type { ComponentProps, JSX } from "react";
|
|
2
1
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
2
|
+
import { ComponentProps, JSX } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/avatar.d.ts
|
|
3
5
|
type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;
|
|
4
|
-
declare function Avatar({
|
|
6
|
+
declare function Avatar({
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}: AvatarProps): JSX.Element;
|
|
5
10
|
type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
|
|
6
|
-
declare function AvatarImage({
|
|
11
|
+
declare function AvatarImage({
|
|
12
|
+
className,
|
|
13
|
+
...props
|
|
14
|
+
}: AvatarImageProps): JSX.Element;
|
|
7
15
|
type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback>;
|
|
8
|
-
declare function AvatarFallback({
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
declare function AvatarFallback({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: AvatarFallbackProps): JSX.Element;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };
|
|
@@ -1,26 +1,28 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
2
|
import { cn } from "@codefast/tailwind-variants";
|
|
4
|
-
import {
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
5
|
+
//#region src/components/avatar.tsx
|
|
5
6
|
function Avatar({ className, ...props }) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
|
|
8
|
+
className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
|
|
9
|
+
"data-slot": "avatar",
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
11
12
|
}
|
|
12
13
|
function AvatarImage({ className, ...props }) {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
15
|
+
className: cn("aspect-square size-full", className),
|
|
16
|
+
"data-slot": "avatar-image",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
18
19
|
}
|
|
19
20
|
function AvatarFallback({ className, ...props }) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
22
|
+
className: cn("flex size-full items-center justify-center rounded-full bg-muted", className),
|
|
23
|
+
"data-slot": "avatar-fallback",
|
|
24
|
+
...props
|
|
25
|
+
});
|
|
25
26
|
}
|
|
27
|
+
//#endregion
|
|
26
28
|
export { Avatar, AvatarFallback, AvatarImage };
|
|
@@ -1,17 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
2
|
+
import { VariantProps } from "@codefast/tailwind-variants";
|
|
3
|
+
import { ComponentProps, JSX } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/badge.d.ts
|
|
6
|
+
declare const badgeVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
7
|
+
variant: {
|
|
8
|
+
default: string;
|
|
9
|
+
destructive: string;
|
|
10
|
+
outline: string;
|
|
11
|
+
secondary: string;
|
|
12
|
+
};
|
|
10
13
|
}, Record<string, never>>;
|
|
11
14
|
interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
|
|
12
|
-
|
|
15
|
+
asChild?: boolean;
|
|
13
16
|
}
|
|
14
|
-
declare function Badge({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
declare function Badge({
|
|
18
|
+
asChild,
|
|
19
|
+
className,
|
|
20
|
+
variant,
|
|
21
|
+
...props
|
|
22
|
+
}: BadgeProps): JSX.Element;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { Badge, type BadgeProps, badgeVariants };
|
package/dist/components/badge.js
CHANGED
|
@@ -1,30 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
2
|
import { tv } from "@codefast/tailwind-variants";
|
|
4
3
|
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/badge.tsx
|
|
5
6
|
const badgeVariants = tv({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
outline: "border-input bg-background focus-visible:border-ring [a&]:hover:border-ring/60 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
15
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
7
|
+
base: "inline-flex w-fit shrink-0 items-center justify-center gap-2 rounded-md border px-1.5 py-0.5 text-xs font-medium whitespace-nowrap outline-hidden transition focus-visible:ring-3 focus-visible:ring-ring/50 [&>svg]:size-3 [&>svg]:shrink-0",
|
|
8
|
+
defaultVariants: { variant: "default" },
|
|
9
|
+
variants: { variant: {
|
|
10
|
+
default: "border-transparent bg-primary text-primary-foreground focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40 [a&]:hover:bg-primary/80",
|
|
11
|
+
destructive: "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
|
|
12
|
+
outline: "border-input bg-background focus-visible:border-ring [a&]:hover:border-ring/60 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
13
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80"
|
|
14
|
+
} }
|
|
18
15
|
});
|
|
19
16
|
function Badge({ asChild, className, variant, ...props }) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
});
|
|
17
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
|
|
18
|
+
className: badgeVariants({
|
|
19
|
+
className,
|
|
20
|
+
variant
|
|
21
|
+
}),
|
|
22
|
+
"data-slot": "badge",
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
29
25
|
}
|
|
26
|
+
//#endregion
|
|
30
27
|
export { Badge, badgeVariants };
|
|
@@ -1,21 +1,44 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentProps, JSX, ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
//#region src/components/breadcrumb.d.ts
|
|
2
4
|
interface BreadcrumbProps extends ComponentProps<"nav"> {
|
|
3
|
-
|
|
5
|
+
separator?: ReactNode;
|
|
4
6
|
}
|
|
5
|
-
declare function Breadcrumb({
|
|
7
|
+
declare function Breadcrumb({
|
|
8
|
+
...props
|
|
9
|
+
}: BreadcrumbProps): JSX.Element;
|
|
6
10
|
type BreadcrumbListProps = ComponentProps<"ol">;
|
|
7
|
-
declare function BreadcrumbList({
|
|
11
|
+
declare function BreadcrumbList({
|
|
12
|
+
className,
|
|
13
|
+
...props
|
|
14
|
+
}: BreadcrumbListProps): JSX.Element;
|
|
8
15
|
type BreadcrumbItemProps = ComponentProps<"li">;
|
|
9
|
-
declare function BreadcrumbItem({
|
|
16
|
+
declare function BreadcrumbItem({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: BreadcrumbItemProps): JSX.Element;
|
|
10
20
|
interface BreadcrumbLinkProps extends ComponentProps<"a"> {
|
|
11
|
-
|
|
21
|
+
asChild?: boolean;
|
|
12
22
|
}
|
|
13
|
-
declare function BreadcrumbLink({
|
|
23
|
+
declare function BreadcrumbLink({
|
|
24
|
+
asChild,
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: BreadcrumbLinkProps): JSX.Element;
|
|
14
28
|
type BreadcrumbPageProps = ComponentProps<"span">;
|
|
15
|
-
declare function BreadcrumbPage({
|
|
29
|
+
declare function BreadcrumbPage({
|
|
30
|
+
className,
|
|
31
|
+
...props
|
|
32
|
+
}: BreadcrumbPageProps): JSX.Element;
|
|
16
33
|
type BreadcrumbSeparatorProps = ComponentProps<"li">;
|
|
17
|
-
declare function BreadcrumbSeparator({
|
|
34
|
+
declare function BreadcrumbSeparator({
|
|
35
|
+
children,
|
|
36
|
+
...props
|
|
37
|
+
}: BreadcrumbSeparatorProps): JSX.Element;
|
|
18
38
|
type BreadcrumbEllipsisProps = ComponentProps<"span">;
|
|
19
|
-
declare function BreadcrumbEllipsis({
|
|
20
|
-
|
|
21
|
-
|
|
39
|
+
declare function BreadcrumbEllipsis({
|
|
40
|
+
className,
|
|
41
|
+
...props
|
|
42
|
+
}: BreadcrumbEllipsisProps): JSX.Element;
|
|
43
|
+
//#endregion
|
|
44
|
+
export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };
|
|
@@ -1,73 +1,67 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
2
|
import { cn } from "@codefast/tailwind-variants";
|
|
4
3
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
4
|
import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/breadcrumb.tsx
|
|
6
7
|
function Breadcrumb({ ...props }) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
return /* @__PURE__ */ jsx("nav", {
|
|
9
|
+
"aria-label": "breadcrumb",
|
|
10
|
+
"data-slot": "breadcrumb",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
12
13
|
}
|
|
13
14
|
function BreadcrumbList({ className, ...props }) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
return /* @__PURE__ */ jsx("ol", {
|
|
16
|
+
className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2", className),
|
|
17
|
+
"data-slot": "breadcrumb-list",
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
19
20
|
}
|
|
20
21
|
function BreadcrumbItem({ className, ...props }) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
return /* @__PURE__ */ jsx("li", {
|
|
23
|
+
className: cn("inline-flex items-center gap-1.5", className),
|
|
24
|
+
"data-slot": "breadcrumb-item",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
26
27
|
}
|
|
27
28
|
function BreadcrumbLink({ asChild, className, ...props }) {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
});
|
|
29
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
|
|
30
|
+
className: cn("transition-colors hover:text-foreground", className),
|
|
31
|
+
"data-slot": "breadcrumb-link",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
34
|
}
|
|
35
35
|
function BreadcrumbPage({ className, ...props }) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
return /* @__PURE__ */ jsx("span", {
|
|
37
|
+
"aria-current": "page",
|
|
38
|
+
"aria-disabled": "true",
|
|
39
|
+
className: cn("font-normal text-foreground", className),
|
|
40
|
+
"data-slot": "breadcrumb-page",
|
|
41
|
+
...props
|
|
42
|
+
});
|
|
43
43
|
}
|
|
44
44
|
function BreadcrumbSeparator({ children, ...props }) {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
})
|
|
53
|
-
});
|
|
45
|
+
return /* @__PURE__ */ jsx("li", {
|
|
46
|
+
"aria-hidden": "true",
|
|
47
|
+
"data-slot": "breadcrumb-separator",
|
|
48
|
+
role: "presentation",
|
|
49
|
+
...props,
|
|
50
|
+
children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
|
|
51
|
+
});
|
|
54
52
|
}
|
|
55
53
|
function BreadcrumbEllipsis({ className, ...props }) {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
className: "sr-only",
|
|
68
|
-
children: "More"
|
|
69
|
-
})
|
|
70
|
-
]
|
|
71
|
-
});
|
|
54
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
55
|
+
"aria-hidden": "true",
|
|
56
|
+
className: cn("flex size-4 items-center justify-center", className),
|
|
57
|
+
"data-slot": "breadcrumb-ellipsis",
|
|
58
|
+
role: "presentation",
|
|
59
|
+
...props,
|
|
60
|
+
children: [/* @__PURE__ */ jsx(EllipsisIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
61
|
+
className: "sr-only",
|
|
62
|
+
children: "More"
|
|
63
|
+
})]
|
|
64
|
+
});
|
|
72
65
|
}
|
|
66
|
+
//#endregion
|
|
73
67
|
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|
|
@@ -1,19 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { Separator } from "./separator.js";
|
|
2
|
+
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
3
|
+
import { VariantProps } from "@codefast/tailwind-variants";
|
|
4
|
+
import { ComponentProps, JSX } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/button-group.d.ts
|
|
7
|
+
declare const buttonGroupVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
8
|
+
orientation: {
|
|
9
|
+
horizontal: string;
|
|
10
|
+
vertical: string;
|
|
11
|
+
};
|
|
9
12
|
}, Record<string, never>>;
|
|
10
13
|
type ButtonGroupProps = ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>;
|
|
11
|
-
declare function ButtonGroup({
|
|
14
|
+
declare function ButtonGroup({
|
|
15
|
+
className,
|
|
16
|
+
orientation,
|
|
17
|
+
...props
|
|
18
|
+
}: ButtonGroupProps): JSX.Element;
|
|
12
19
|
interface ButtonGroupTextProps extends ComponentProps<"div"> {
|
|
13
|
-
|
|
20
|
+
asChild?: boolean;
|
|
14
21
|
}
|
|
15
|
-
declare function ButtonGroupText({
|
|
22
|
+
declare function ButtonGroupText({
|
|
23
|
+
asChild,
|
|
24
|
+
className,
|
|
25
|
+
...props
|
|
26
|
+
}: ButtonGroupTextProps): JSX.Element;
|
|
16
27
|
type ButtonGroupSeparatorProps = ComponentProps<typeof Separator>;
|
|
17
|
-
declare function ButtonGroupSeparator({
|
|
18
|
-
|
|
19
|
-
|
|
28
|
+
declare function ButtonGroupSeparator({
|
|
29
|
+
className,
|
|
30
|
+
orientation,
|
|
31
|
+
...props
|
|
32
|
+
}: ButtonGroupSeparatorProps): JSX.Element;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };
|
|
@@ -1,44 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { Separator } from "./separator.js";
|
|
3
3
|
import { cn, tv } from "@codefast/tailwind-variants";
|
|
4
4
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
|
-
import {
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/button-group.tsx
|
|
6
7
|
const buttonGroupVariants = tv({
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
14
|
-
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
15
|
-
}
|
|
16
|
-
}
|
|
8
|
+
base: cn("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2", "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit", "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>input]:flex-1", "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg"),
|
|
9
|
+
defaultVariants: { orientation: "horizontal" },
|
|
10
|
+
variants: { orientation: {
|
|
11
|
+
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
12
|
+
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
13
|
+
} }
|
|
17
14
|
});
|
|
18
15
|
function ButtonGroup({ className, orientation, ...props }) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
...props
|
|
27
|
-
});
|
|
16
|
+
return /* @__PURE__ */ jsx("div", {
|
|
17
|
+
className: cn(buttonGroupVariants({ orientation }), className),
|
|
18
|
+
"data-orientation": orientation,
|
|
19
|
+
"data-slot": "button-group",
|
|
20
|
+
role: "group",
|
|
21
|
+
...props
|
|
22
|
+
});
|
|
28
23
|
}
|
|
29
24
|
function ButtonGroupText({ asChild = false, className, ...props }) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
});
|
|
25
|
+
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
26
|
+
className: cn("flex items-center gap-2 rounded-lg border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
27
|
+
...props
|
|
28
|
+
});
|
|
35
29
|
}
|
|
36
30
|
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
32
|
+
className: cn("relative !m-0 self-stretch bg-input data-[orientation=vertical]:h-auto", className),
|
|
33
|
+
"data-slot": "button-group-separator",
|
|
34
|
+
orientation,
|
|
35
|
+
...props
|
|
36
|
+
});
|
|
43
37
|
}
|
|
38
|
+
//#endregion
|
|
44
39
|
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|
|
@@ -1,28 +1,38 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
2
|
+
import { VariantProps } from "@codefast/tailwind-variants";
|
|
3
|
+
import { ComponentProps, JSX } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/button.d.ts
|
|
6
|
+
declare const buttonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
7
|
+
size: {
|
|
8
|
+
"icon-sm": string;
|
|
9
|
+
icon: string;
|
|
10
|
+
"icon-lg": string;
|
|
11
|
+
sm: string;
|
|
12
|
+
md: string;
|
|
13
|
+
lg: string;
|
|
14
|
+
};
|
|
15
|
+
variant: {
|
|
16
|
+
default: string;
|
|
17
|
+
destructive: string;
|
|
18
|
+
ghost: string;
|
|
19
|
+
link: string;
|
|
20
|
+
outline: string;
|
|
21
|
+
secondary: string;
|
|
22
|
+
};
|
|
20
23
|
}, Record<string, never>>;
|
|
21
24
|
type ButtonProps = ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
asChild?: boolean;
|
|
26
|
+
type?: ComponentProps<"button">["type"];
|
|
24
27
|
};
|
|
25
|
-
declare function Button({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
declare function Button({
|
|
29
|
+
asChild,
|
|
30
|
+
children,
|
|
31
|
+
className,
|
|
32
|
+
size,
|
|
33
|
+
type,
|
|
34
|
+
variant,
|
|
35
|
+
...props
|
|
36
|
+
}: ButtonProps): JSX.Element;
|
|
37
|
+
//#endregion
|
|
38
|
+
export { Button, type ButtonProps, buttonVariants };
|