azamat-ui-kit-cli 0.3.3 → 0.3.12
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/README.md +18 -6
- package/dist/index.cjs +84 -84
- package/package.json +1 -1
- package/vendor/src/components/data-table/data-table-pagination.tsx +2 -2
- package/vendor/src/components/data-table/data-table-toolbar.tsx +6 -6
- package/vendor/src/components/data-table/data-table.tsx +29 -25
- package/vendor/src/components/display/entity-card.tsx +4 -4
- package/vendor/src/components/display/metric-card.tsx +4 -4
- package/vendor/src/components/form/form-date-input.tsx +22 -16
- package/vendor/src/components/form/form-number-input.tsx +19 -13
- package/vendor/src/components/form/form-phone-input.tsx +13 -12
- package/vendor/src/components/form/form-search-input.tsx +22 -16
- package/vendor/src/components/inputs/clearable-input.tsx +9 -9
- package/vendor/src/components/inputs/input-decorator.tsx +20 -20
- package/vendor/src/components/navigation/pagination.tsx +4 -4
- package/vendor/src/components/overlay/sheet-shell.tsx +6 -6
- package/vendor/src/components/patterns/entity-details.tsx +4 -4
- package/vendor/src/components/ui/badge.tsx +21 -22
- package/vendor/src/components/ui/button.tsx +32 -32
- package/vendor/src/components/ui/card.tsx +11 -11
- package/vendor/src/components/ui/checkbox.tsx +1 -1
- package/vendor/src/components/ui/dialog.tsx +7 -7
- package/vendor/src/components/ui/dropdown-menu.tsx +6 -6
- package/vendor/src/components/ui/hover-card.tsx +5 -5
- package/vendor/src/components/ui/input-primitive.tsx +1 -1
- package/vendor/src/components/ui/popover.tsx +1 -1
- package/vendor/src/components/ui/select.tsx +3 -3
- package/vendor/src/components/ui/switch.tsx +2 -2
- package/vendor/src/components/ui/table.tsx +12 -5
- package/vendor/src/components/ui/tabs.tsx +2 -2
- package/vendor/src/components/ui/tooltip.tsx +5 -5
- package/vendor/src/families/member-metadata.ts +6 -6
- package/vendor/src/families/member-snippets.ts +2 -2
- package/vendor/src/index.ts +20 -18
|
@@ -7,14 +7,14 @@ const cardVariants = cva(
|
|
|
7
7
|
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[var(--radius-2xl)] border py-(--card-spacing) text-sm text-card-foreground transition-[background-color,border-color,box-shadow,transform,opacity] [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-[var(--radius-2xl)] *:[img:last-child]:rounded-b-[var(--radius-2xl)]",
|
|
8
8
|
{
|
|
9
9
|
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default:
|
|
12
|
-
"border-border/
|
|
13
|
-
elevated:
|
|
14
|
-
"border-border/
|
|
15
|
-
outline: "border-border bg-card shadow-none",
|
|
16
|
-
soft: "border-
|
|
17
|
-
ghost: "border-transparent bg-transparent shadow-none",
|
|
10
|
+
variant: {
|
|
11
|
+
default:
|
|
12
|
+
"border-border/72 bg-card shadow-[0_10px_30px_rgba(15,23,42,0.05)] ring-1 ring-foreground/3",
|
|
13
|
+
elevated:
|
|
14
|
+
"border-border/68 bg-card shadow-[0_1px_2px_rgba(15,23,42,0.04),0_20px_46px_rgba(15,23,42,0.08)] ring-1 ring-foreground/4",
|
|
15
|
+
outline: "border-border/72 bg-card shadow-none",
|
|
16
|
+
soft: "border-border/40 bg-muted/28 shadow-none",
|
|
17
|
+
ghost: "border-transparent bg-transparent shadow-none",
|
|
18
18
|
},
|
|
19
19
|
size: {
|
|
20
20
|
sm: "[--card-spacing:--spacing(4)] data-[has-footer=true]:pb-0",
|
|
@@ -142,9 +142,9 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
142
142
|
<div
|
|
143
143
|
data-slot="card-footer"
|
|
144
144
|
className={cn(
|
|
145
|
-
"flex items-center rounded-b-[var(--radius-2xl)] border-t border-border/
|
|
146
|
-
className
|
|
147
|
-
)}
|
|
145
|
+
"flex items-center rounded-b-[var(--radius-2xl)] border-t border-border/60 bg-muted/22 p-(--card-spacing)",
|
|
146
|
+
className
|
|
147
|
+
)}
|
|
148
148
|
{...props}
|
|
149
149
|
/>
|
|
150
150
|
)
|
|
@@ -58,7 +58,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
|
|
|
58
58
|
data-slot="checkbox"
|
|
59
59
|
disabled={disabled}
|
|
60
60
|
className={cn(
|
|
61
|
-
"peer flex size-5 shrink-0 items-center justify-center rounded-[
|
|
61
|
+
"peer flex size-5 shrink-0 items-center justify-center rounded-[10px] border border-input/88 bg-background text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/28 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] data-[state=indeterminate]:border-primary/28 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/12 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]",
|
|
62
62
|
className
|
|
63
63
|
)}
|
|
64
64
|
onClick={handleClick}
|
|
@@ -51,7 +51,7 @@ function DialogContent({
|
|
|
51
51
|
<DialogPrimitive.Popup
|
|
52
52
|
data-slot="dialog-content"
|
|
53
53
|
className={cn(
|
|
54
|
-
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border border-border/
|
|
54
|
+
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 rounded-[var(--radius-3xl)] border border-border/72 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-6 text-sm text-popover-foreground shadow-[0_28px_88px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/6 backdrop-blur duration-100 outline-none sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
55
55
|
className
|
|
56
56
|
)}
|
|
57
57
|
{...props}
|
|
@@ -61,11 +61,11 @@ function DialogContent({
|
|
|
61
61
|
<DialogPrimitive.Close
|
|
62
62
|
data-slot="dialog-close"
|
|
63
63
|
render={
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
<Button
|
|
65
|
+
variant="ghost"
|
|
66
|
+
className="absolute top-3 right-3 rounded-full border border-transparent hover:border-border/50 hover:bg-muted/50"
|
|
67
|
+
size="icon-sm"
|
|
68
|
+
/>
|
|
69
69
|
}
|
|
70
70
|
>
|
|
71
71
|
<XIcon />
|
|
@@ -99,7 +99,7 @@ function DialogFooter({
|
|
|
99
99
|
<div
|
|
100
100
|
data-slot="dialog-footer"
|
|
101
101
|
className={cn(
|
|
102
|
-
"-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t border-border/
|
|
102
|
+
"-mx-6 -mb-6 flex flex-col-reverse gap-2 rounded-b-[var(--radius-3xl)] border-t border-border/58 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--muted),transparent_38%),color-mix(in_oklch,var(--muted),transparent_18%))] p-5 sm:flex-row sm:justify-end",
|
|
103
103
|
className
|
|
104
104
|
)}
|
|
105
105
|
{...props}
|
|
@@ -39,7 +39,7 @@ function DropdownMenuContent({
|
|
|
39
39
|
>
|
|
40
40
|
<MenuPrimitive.Popup
|
|
41
41
|
data-slot="dropdown-menu-content"
|
|
42
|
-
className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border border-border/
|
|
42
|
+
className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-2 text-popover-foreground shadow-[0_18px_54px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 backdrop-blur duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className)}
|
|
43
43
|
{...props}
|
|
44
44
|
/>
|
|
45
45
|
</MenuPrimitive.Positioner>
|
|
@@ -86,7 +86,7 @@ function DropdownMenuItem({
|
|
|
86
86
|
data-inset={inset}
|
|
87
87
|
data-variant={variant}
|
|
88
88
|
className={cn(
|
|
89
|
-
"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/
|
|
89
|
+
"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
|
90
90
|
className
|
|
91
91
|
)}
|
|
92
92
|
{...props}
|
|
@@ -111,7 +111,7 @@ function DropdownMenuSubTrigger({
|
|
|
111
111
|
data-slot="dropdown-menu-sub-trigger"
|
|
112
112
|
data-inset={inset}
|
|
113
113
|
className={cn(
|
|
114
|
-
"flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/
|
|
114
|
+
"flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent px-3 py-2.5 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:border-border/65 data-popup-open:bg-accent/65 data-popup-open:text-accent-foreground data-open:border-border/65 data-open:bg-accent/65 data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
115
115
|
className
|
|
116
116
|
)}
|
|
117
117
|
{...props}
|
|
@@ -133,7 +133,7 @@ function DropdownMenuSubContent({
|
|
|
133
133
|
return (
|
|
134
134
|
<DropdownMenuContent
|
|
135
135
|
data-slot="dropdown-menu-sub-content"
|
|
136
|
-
className={cn("w-auto min-w-[128px] rounded-[var(--radius-2xl)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),
|
|
136
|
+
className={cn("w-auto min-w-[128px] rounded-[var(--radius-2xl)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-2 text-popover-foreground shadow-[0_18px_48px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 backdrop-blur duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
|
137
137
|
align={align}
|
|
138
138
|
alignOffset={alignOffset}
|
|
139
139
|
side={side}
|
|
@@ -157,7 +157,7 @@ function DropdownMenuCheckboxItem({
|
|
|
157
157
|
data-slot="dropdown-menu-checkbox-item"
|
|
158
158
|
data-inset={inset}
|
|
159
159
|
className={cn(
|
|
160
|
-
"relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/
|
|
160
|
+
"relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground focus:**:text-accent-foreground data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
161
161
|
className
|
|
162
162
|
)}
|
|
163
163
|
checked={checked}
|
|
@@ -199,7 +199,7 @@ function DropdownMenuRadioItem({
|
|
|
199
199
|
data-slot="dropdown-menu-radio-item"
|
|
200
200
|
data-inset={inset}
|
|
201
201
|
className={cn(
|
|
202
|
-
"relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/
|
|
202
|
+
"relative flex cursor-default items-center gap-2 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow] focus:border-border/65 focus:bg-accent/65 focus:text-accent-foreground focus:**:text-accent-foreground data-[highlighted]:border-border/58 data-[highlighted]:bg-accent/58 data-[highlighted]:text-foreground data-[highlighted]:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
203
203
|
className
|
|
204
204
|
)}
|
|
205
205
|
{...props}
|
|
@@ -2,11 +2,11 @@ import * as React from "react"
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "@/lib/utils"
|
|
4
4
|
|
|
5
|
-
export type HoverCardProps = React.ComponentProps<"div"> & {
|
|
6
|
-
trigger: React.ReactNode
|
|
7
|
-
content: React.ReactNode
|
|
8
|
-
side?: "top" | "right" | "bottom" | "left"
|
|
9
|
-
align?: "start" | "center" | "end"
|
|
5
|
+
export type HoverCardProps = Omit<React.ComponentProps<"div">, "content"> & {
|
|
6
|
+
trigger: React.ReactNode
|
|
7
|
+
content: React.ReactNode
|
|
8
|
+
side?: "top" | "right" | "bottom" | "left"
|
|
9
|
+
align?: "start" | "center" | "end"
|
|
10
10
|
contentClassName?: string
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -13,7 +13,7 @@ function InputPrimitive({ className, type, ...props }: InputPrimitiveProps) {
|
|
|
13
13
|
type={type}
|
|
14
14
|
data-slot="input"
|
|
15
15
|
className={cn(
|
|
16
|
-
"h-
|
|
16
|
+
"h-11 w-full min-w-0 rounded-[min(var(--radius-xl),18px)] border border-border/66 bg-background px-4 py-2.5 text-sm text-foreground shadow-[0_1px_2px_rgba(15,23,42,0.02)] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/68 hover:border-border/82 hover:bg-background focus-visible:border-ring/48 focus-visible:bg-background focus-visible:shadow-[0_0_0_1px_color-mix(in_oklch,var(--ring),transparent_56%),0_0_0_5px_color-mix(in_oklch,var(--ring),transparent_84%)] focus-visible:ring-0 disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border/48 disabled:bg-muted/22 disabled:text-muted-foreground/72 disabled:shadow-none disabled:opacity-100 read-only:border-border/58 read-only:bg-muted/16 read-only:text-foreground/84 read-only:shadow-none aria-invalid:border-destructive/60 aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_64%),0_0_0_5px_color-mix(in_oklch,var(--destructive),transparent_88%)] dark:border-white/10 dark:bg-white/[0.045] dark:hover:border-white/14 dark:hover:bg-white/[0.06] dark:focus-visible:bg-white/[0.07] dark:disabled:bg-white/[0.032] dark:read-only:bg-white/[0.028] dark:aria-invalid:border-destructive/50 dark:aria-invalid:shadow-[0_0_0_1px_color-mix(in_oklch,var(--destructive),transparent_68%),0_0_0_5px_color-mix(in_oklch,var(--destructive),transparent_88%)]",
|
|
17
17
|
className
|
|
18
18
|
)}
|
|
19
19
|
{...props}
|
|
@@ -37,7 +37,7 @@ function PopoverContent({
|
|
|
37
37
|
<PopoverPrimitive.Popup
|
|
38
38
|
data-slot="popover-content"
|
|
39
39
|
className={cn(
|
|
40
|
-
"z-50 flex w-80 origin-(--transform-origin) flex-col gap-3 rounded-[var(--radius-2xl)] border border-border/
|
|
40
|
+
"z-50 flex w-80 origin-(--transform-origin) flex-col gap-3 rounded-[var(--radius-2xl)] border border-border/70 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--popover),white_8%),var(--popover))] p-4 text-sm text-popover-foreground shadow-[0_18px_54px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 backdrop-blur outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
41
41
|
className
|
|
42
42
|
)}
|
|
43
43
|
{...props}
|
|
@@ -41,7 +41,7 @@ function SelectTrigger({
|
|
|
41
41
|
data-slot="select-trigger"
|
|
42
42
|
data-size={size}
|
|
43
43
|
className={cn(
|
|
44
|
-
"flex w-fit items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border border-input/
|
|
44
|
+
"flex w-fit items-center justify-between gap-2 rounded-[min(var(--radius-xl),16px)] border border-input/88 bg-background py-2 pr-3 pl-3 text-sm whitespace-nowrap text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] transition-[background-color,border-color,box-shadow,color] outline-none select-none hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:bg-background focus-visible:shadow-[0_0_0_1px_color-mix(in_oklch,var(--ring),transparent_45%),0_10px_24px_rgba(15,23,42,0.08)] focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 data-[size=sm]:rounded-[min(var(--radius-lg),12px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:border-white/12 dark:bg-white/[0.04] dark:hover:bg-white/[0.08] dark:focus-visible:bg-white/[0.08] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
45
45
|
className
|
|
46
46
|
)}
|
|
47
47
|
{...props}
|
|
@@ -83,7 +83,7 @@ function SelectContent({
|
|
|
83
83
|
<SelectPrimitive.Popup
|
|
84
84
|
data-slot="select-content"
|
|
85
85
|
data-align-trigger={alignItemWithTrigger}
|
|
86
|
-
className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-44 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border border-border/
|
|
86
|
+
className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-44 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius-2xl)] border border-border/76 bg-popover p-1.5 text-popover-foreground shadow-[0_18px_48px_rgba(15,23,42,0.14)] ring-1 ring-foreground/6 backdrop-blur duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className)}
|
|
87
87
|
{...props}
|
|
88
88
|
>
|
|
89
89
|
<SelectScrollUpButton />
|
|
@@ -117,7 +117,7 @@ function SelectItem({
|
|
|
117
117
|
<SelectPrimitive.Item
|
|
118
118
|
data-slot="select-item"
|
|
119
119
|
className={cn(
|
|
120
|
-
"relative flex w-full cursor-default items-center gap-1.5 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] focus:border-border/80 focus:bg-accent/
|
|
120
|
+
"relative flex w-full cursor-default items-center gap-1.5 rounded-[min(var(--radius-xl),16px)] border border-transparent py-2.5 pr-9 pl-3 text-sm outline-hidden select-none transition-[background-color,border-color,color,box-shadow,transform] focus:border-border/80 focus:bg-accent/76 focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[selected]:border-primary/16 data-[selected]:bg-primary/8 data-[selected]:text-foreground data-[selected]:shadow-none data-disabled:pointer-events-none data-disabled:opacity-50 dark:data-[selected]:border-white/8 dark:data-[selected]:bg-white/6 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
|
121
121
|
className
|
|
122
122
|
)}
|
|
123
123
|
{...props}
|
|
@@ -49,7 +49,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
|
|
|
49
49
|
data-slot="switch"
|
|
50
50
|
disabled={disabled}
|
|
51
51
|
className={cn(
|
|
52
|
-
"peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/
|
|
52
|
+
"peer inline-flex h-6.5 w-11.5 shrink-0 cursor-pointer items-center rounded-full border border-border/78 bg-input/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] transition-[background-color,border-color,box-shadow] outline-none hover:border-ring/30 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/22 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_22px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/10 dark:bg-white/[0.08]",
|
|
53
53
|
className
|
|
54
54
|
)}
|
|
55
55
|
onClick={handleClick}
|
|
@@ -59,7 +59,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
|
|
|
59
59
|
data-slot="switch-thumb"
|
|
60
60
|
data-state={currentChecked ? "checked" : "unchecked"}
|
|
61
61
|
className={cn(
|
|
62
|
-
"pointer-events-none block size-5 rounded-full bg-
|
|
62
|
+
"pointer-events-none block size-5 rounded-full bg-white shadow-[0_2px_10px_color-mix(in_oklch,var(--foreground),transparent_88%)] ring-1 ring-foreground/6 transition-transform data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5 dark:bg-[rgba(255,255,255,0.96)]"
|
|
63
63
|
)}
|
|
64
64
|
/>
|
|
65
65
|
</button>
|
|
@@ -2,11 +2,18 @@ import * as React from "react"
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "@/lib/utils"
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
type TableProps = React.ComponentProps<"table"> & {
|
|
6
|
+
containerClassName?: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
function Table({ className, containerClassName, ...props }: TableProps) {
|
|
6
10
|
return (
|
|
7
11
|
<div
|
|
8
12
|
data-slot="table-container"
|
|
9
|
-
className=
|
|
13
|
+
className={cn(
|
|
14
|
+
"relative w-full overflow-x-auto rounded-[var(--radius-2xl)] border border-border/75 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_12%),var(--card))] shadow-sm ring-1 ring-foreground/5",
|
|
15
|
+
containerClassName
|
|
16
|
+
)}
|
|
10
17
|
>
|
|
11
18
|
<table
|
|
12
19
|
data-slot="table"
|
|
@@ -21,7 +28,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
|
|
21
28
|
return (
|
|
22
29
|
<thead
|
|
23
30
|
data-slot="table-header"
|
|
24
|
-
className={cn("bg-muted/
|
|
31
|
+
className={cn("bg-muted/30 [&_tr]:border-b", className)}
|
|
25
32
|
{...props}
|
|
26
33
|
/>
|
|
27
34
|
)
|
|
@@ -55,7 +62,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
|
|
55
62
|
<tr
|
|
56
63
|
data-slot="table-row"
|
|
57
64
|
className={cn(
|
|
58
|
-
"border-b transition-colors hover:bg-muted/
|
|
65
|
+
"border-b border-border/70 transition-colors hover:bg-muted/28 has-aria-expanded:bg-muted/36 data-[state=selected]:bg-primary/8",
|
|
59
66
|
className
|
|
60
67
|
)}
|
|
61
68
|
{...props}
|
|
@@ -68,7 +75,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
|
68
75
|
<th
|
|
69
76
|
data-slot="table-head"
|
|
70
77
|
className={cn(
|
|
71
|
-
"h-11 px-3 text-left align-middle text-[0.
|
|
78
|
+
"h-11 px-3 text-left align-middle text-[0.76rem] font-semibold whitespace-nowrap uppercase tracking-[0.12em] text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
|
72
79
|
className
|
|
73
80
|
)}
|
|
74
81
|
{...props}
|
|
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
|
|
|
13
13
|
ref={ref}
|
|
14
14
|
data-slot="tabs-list"
|
|
15
15
|
className={cn(
|
|
16
|
-
"inline-flex min-h-11 items-center justify-center gap-1 rounded-[var(--radius-2xl)] border border-border/
|
|
16
|
+
"inline-flex min-h-11 items-center justify-center gap-1 rounded-[var(--radius-2xl)] border border-border/72 bg-muted/34 p-1 text-muted-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.04),0_8px_24px_rgba(15,23,42,0.04)] backdrop-blur",
|
|
17
17
|
className
|
|
18
18
|
)}
|
|
19
19
|
{...props}
|
|
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
|
|
|
29
29
|
ref={ref}
|
|
30
30
|
data-slot="tabs-trigger"
|
|
31
31
|
className={cn(
|
|
32
|
-
"inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color
|
|
32
|
+
"inline-flex min-h-9 items-center justify-center whitespace-nowrap rounded-[calc(var(--radius-xl)-2px)] border border-transparent px-3.5 py-1.5 text-sm font-medium text-muted-foreground ring-offset-background transition-[background-color,color,box-shadow,border-color] hover:bg-background/52 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[selected]:border-border/72 data-[selected]:bg-background data-[selected]:text-foreground data-[selected]:shadow-[0_1px_0_rgba(255,255,255,0.18),0_8px_20px_rgba(15,23,42,0.06)] dark:data-[selected]:border-white/10 dark:data-[selected]:bg-white/7 dark:data-[selected]:shadow-[0_1px_0_rgba(255,255,255,0.06),0_10px_24px_rgba(0,0,0,0.18)]",
|
|
33
33
|
className
|
|
34
34
|
)}
|
|
35
35
|
{...props}
|
|
@@ -2,11 +2,11 @@ import * as React from "react"
|
|
|
2
2
|
|
|
3
3
|
import { cn } from "@/lib/utils"
|
|
4
4
|
|
|
5
|
-
export type TooltipProps = React.ComponentProps<"span"> & {
|
|
6
|
-
content: React.ReactNode
|
|
7
|
-
side?: "top" | "bottom" | "left" | "right"
|
|
8
|
-
disabled?: boolean
|
|
9
|
-
}
|
|
5
|
+
export type TooltipProps = Omit<React.ComponentProps<"span">, "content"> & {
|
|
6
|
+
content: React.ReactNode
|
|
7
|
+
side?: "top" | "bottom" | "left" | "right"
|
|
8
|
+
disabled?: boolean
|
|
9
|
+
}
|
|
10
10
|
|
|
11
11
|
const sideClassName = {
|
|
12
12
|
top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
|
|
@@ -127,8 +127,8 @@ export const componentMemberMetadata: ComponentMemberMetadata[] = [
|
|
|
127
127
|
component: "FormInput",
|
|
128
128
|
family: "InputFamily",
|
|
129
129
|
section: "form-wrappers",
|
|
130
|
-
maturity: "
|
|
131
|
-
summary: "
|
|
130
|
+
maturity: "canonical",
|
|
131
|
+
summary: "Canonical React Hook Form wrapper for text-like inputs.",
|
|
132
132
|
useWhen: "Use as the primary RHF entry for text, search, password, number, phone, and date flows by switching the kind prop instead of learning many wrapper names.",
|
|
133
133
|
},
|
|
134
134
|
{
|
|
@@ -144,8 +144,8 @@ export const componentMemberMetadata: ComponentMemberMetadata[] = [
|
|
|
144
144
|
family: "InputFamily",
|
|
145
145
|
section: "transitional",
|
|
146
146
|
maturity: "transitional",
|
|
147
|
-
summary: "Legacy alias for AppInput.",
|
|
148
|
-
useWhen: "Use only for migration; prefer Input with `kind
|
|
147
|
+
summary: "Legacy alias for Input through AppInput compatibility.",
|
|
148
|
+
useWhen: "Use only for migration; prefer Input with `kind` in all maintained code.",
|
|
149
149
|
},
|
|
150
150
|
{
|
|
151
151
|
component: "FormAppInput",
|
|
@@ -264,8 +264,8 @@ export const componentMemberMetadata: ComponentMemberMetadata[] = [
|
|
|
264
264
|
component: "FormSelect",
|
|
265
265
|
family: "SelectFamily",
|
|
266
266
|
section: "form-wrappers",
|
|
267
|
-
maturity: "
|
|
268
|
-
summary: "
|
|
267
|
+
maturity: "canonical",
|
|
268
|
+
summary: "Canonical RHF wrapper for simple and async select flows.",
|
|
269
269
|
useWhen: "Use as the main select entry for submitted form state, keeping simple and async modes behind one consistent wrapper contract.",
|
|
270
270
|
},
|
|
271
271
|
{
|
|
@@ -218,7 +218,7 @@ export const componentSnippetExamples: ComponentSnippetExample[] = [
|
|
|
218
218
|
{
|
|
219
219
|
component: "UniversalInput",
|
|
220
220
|
title: "Universal alias migration",
|
|
221
|
-
description: "UniversalInput exists for backward compatibility
|
|
221
|
+
description: "UniversalInput exists only for backward compatibility with older codebases.",
|
|
222
222
|
language: "tsx",
|
|
223
223
|
variant: "migration",
|
|
224
224
|
code: `import { UniversalInput } from "azamat-ui-kit"
|
|
@@ -296,7 +296,7 @@ export const componentSnippetExamples: ComponentSnippetExample[] = [
|
|
|
296
296
|
{
|
|
297
297
|
component: "FormAppInput",
|
|
298
298
|
title: "Form alias migration",
|
|
299
|
-
description: "Use this only for legacy form code; prefer FormInput with kind.",
|
|
299
|
+
description: "Use this only for legacy form code; prefer FormInput with kind in all new work.",
|
|
300
300
|
language: "tsx",
|
|
301
301
|
variant: "migration",
|
|
302
302
|
code: `import { FormAppInput } from "azamat-ui-kit"
|
package/vendor/src/index.ts
CHANGED
|
@@ -23,21 +23,23 @@ export * from './components/ui/hover-card'
|
|
|
23
23
|
export * from './components/ui/scroll-box'
|
|
24
24
|
export * from './components/ui/right-click-menu'
|
|
25
25
|
|
|
26
|
-
export * from './components/actions/public'
|
|
27
|
-
export * from './components/layout/public'
|
|
28
|
-
export * from './components/filters'
|
|
29
|
-
export * from './components/overlay'
|
|
30
|
-
export * from './components/navigation'
|
|
31
|
-
export * from './components/inputs'
|
|
32
|
-
export * from './components/form/public'
|
|
33
|
-
export * from './components/feedback'
|
|
34
|
-
export * from './components/display'
|
|
35
|
-
export * from './components/data-table/public'
|
|
36
|
-
export * from './components/notifications'
|
|
37
|
-
export * from './components/command'
|
|
38
|
-
export * from './components/calendar'
|
|
39
|
-
export * from './components/upload'
|
|
40
|
-
export * from './components/wizard'
|
|
41
|
-
export * from './components/charts
|
|
42
|
-
export * from './
|
|
43
|
-
export * from './
|
|
26
|
+
export * from './components/actions/public'
|
|
27
|
+
export * from './components/layout/public'
|
|
28
|
+
export * from './components/filters'
|
|
29
|
+
export * from './components/overlay'
|
|
30
|
+
export * from './components/navigation'
|
|
31
|
+
export * from './components/inputs'
|
|
32
|
+
export * from './components/form/public'
|
|
33
|
+
export * from './components/feedback'
|
|
34
|
+
export * from './components/display'
|
|
35
|
+
export * from './components/data-table/public'
|
|
36
|
+
export * from './components/notifications'
|
|
37
|
+
export * from './components/command'
|
|
38
|
+
export * from './components/calendar'
|
|
39
|
+
export * from './components/upload'
|
|
40
|
+
export * from './components/wizard'
|
|
41
|
+
export * from './components/charts'
|
|
42
|
+
export * from './components/patterns'
|
|
43
|
+
export * from './families'
|
|
44
|
+
export * from './hooks'
|
|
45
|
+
export * from './lib/utils'
|