docthub-core-components 2.0.0 → 2.2.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/docthub-core-components.css +1 -1
- package/dist/index.cjs.js +101 -101
- package/dist/index.esm.js +13444 -13528
- package/dist/registry/@docthub/alert.json +1 -1
- package/dist/registry/@docthub/auto-complete-component.test.json +5 -2
- package/dist/registry/@docthub/avatar.json +3 -3
- package/dist/registry/@docthub/badge.json +1 -1
- package/dist/registry/@docthub/button.json +3 -3
- package/dist/registry/@docthub/button.test.json +5 -2
- package/dist/registry/@docthub/calendar.json +2 -2
- package/dist/registry/@docthub/checkbox.json +3 -3
- package/dist/registry/@docthub/command.json +3 -3
- package/dist/registry/@docthub/dialog.json +1 -1
- package/dist/registry/@docthub/drawer.json +1 -1
- package/dist/registry/@docthub/dropdown-menu.json +3 -3
- package/dist/registry/@docthub/input.json +1 -1
- package/dist/registry/@docthub/label.json +3 -3
- package/dist/registry/@docthub/popover.json +3 -3
- package/dist/registry/@docthub/progress.json +3 -3
- package/dist/registry/@docthub/radio-group.json +3 -3
- package/dist/registry/@docthub/select.json +3 -3
- package/dist/registry/@docthub/skeleton.json +1 -1
- package/dist/registry/@docthub/tabs.json +3 -3
- package/dist/registry/@docthub/textarea.json +1 -1
- package/dist/registry/@docthub/toast.json +1 -1
- package/dist/registry/@docthub/toast.test.json +4 -2
- package/dist/registry/@docthub/tooltip.json +3 -3
- package/dist/registry/@docthub/typography.json +2 -2
- package/dist/registry/@docthub/typography.test.json +5 -2
- package/dist/src/components/ui/avatar.d.ts +1 -1
- package/dist/src/components/ui/button.d.ts +1 -1
- package/dist/src/components/ui/checkbox.d.ts +1 -1
- package/dist/src/components/ui/dropdown-menu.d.ts +1 -1
- package/dist/src/components/ui/label.d.ts +1 -1
- package/dist/src/components/ui/popover.d.ts +1 -1
- package/dist/src/components/ui/progress.d.ts +1 -1
- package/dist/src/components/ui/radio-group.d.ts +1 -1
- package/dist/src/components/ui/select.d.ts +1 -1
- package/dist/src/components/ui/tabs.d.ts +1 -1
- package/dist/src/components/ui/tooltip.d.ts +1 -1
- package/package.json +6 -18
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "auto-complete-component.test",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "auto-complete-component.test",
|
|
4
4
|
"title": "Auto Complete Component.test",
|
|
5
5
|
"description": "Auto Complete Component.test component",
|
|
6
|
-
"dependencies": [
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"@testing-library/react",
|
|
8
|
+
"vitest"
|
|
9
|
+
],
|
|
7
10
|
"files": [
|
|
8
11
|
{
|
|
9
12
|
"type": "registry:ui",
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "avatar",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "avatar",
|
|
4
4
|
"title": "Avatar",
|
|
5
5
|
"description": "Avatar component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui"
|
|
8
8
|
],
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"type": "registry:ui",
|
|
12
12
|
"path": "components/ui/avatar.tsx",
|
|
13
|
-
"content": "import * as React from \"react\"\r\nimport
|
|
13
|
+
"content": "import * as React from \"react\"\r\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Avatar = React.forwardRef<\r\n React.ElementRef<typeof AvatarPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Root\r\n ref={ref}\r\n className={cn(\r\n \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAvatar.displayName = AvatarPrimitive.Root.displayName\r\n\r\nconst AvatarImage = React.forwardRef<\r\n React.ElementRef<typeof AvatarPrimitive.Image>,\r\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\r\n>(({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Image\r\n ref={ref}\r\n className={cn(\"aspect-square h-full w-full\", className)}\r\n {...props}\r\n />\r\n))\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\r\n\r\nconst AvatarFallback = React.forwardRef<\r\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\r\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n <AvatarPrimitive.Fallback\r\n ref={ref}\r\n className={cn(\r\n \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\r\n\r\nexport { Avatar, AvatarImage, AvatarFallback }\r\n"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "button",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "button",
|
|
4
4
|
"title": "Button",
|
|
5
5
|
"description": "Button component",
|
|
6
6
|
"dependencies": [
|
|
7
7
|
"class-variance-authority",
|
|
8
|
-
"
|
|
8
|
+
"radix-ui"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/button.tsx",
|
|
14
|
-
"content": "import { cn } from \"@/lib/utils\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { Slot as SlotPrimitive } from \"
|
|
14
|
+
"content": "import { cn } from \"@/lib/utils\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { Slot as SlotPrimitive } from \"radix-ui\";\r\nimport React from \"react\";\r\n\r\nconst DoctButtonVariants = cva(\r\n \"inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n {\r\n variants: {\r\n variant: {\r\n default: \"bg-black text-white hover:bg-black/90\",\r\n outline:\r\n \"border border-gray-300 bg-white text-gray-700 hover:bg-gray-100\",\r\n ghost: \"text-gray-700 hover:bg-gray-100\",\r\n error: \"bg-red-500 text-white hover:bg-red-600\",\r\n success: \"bg-green-500 text-white hover:bg-green-600\",\r\n warning: \"bg-yellow-500 text-white hover:bg-yellow-600\",\r\n blue: \"bg-blue-500 text-white hover:bg-blue-600\",\r\n disabled:\r\n \"bg-gray-200 text-gray-400 cursor-not-allowed hover:bg-gray-200\",\r\n brandBlue: \"bg-brandBlue text-white hover:bg-brandBlue/90\",\r\n primary: \"bg-primary text-white hover:bg-primary/90\",\r\n },\r\n size: {\r\n large:\r\n \"rounded-xl text-base py-2.5 px-5 leading-snug font-semibold gap-2\",\r\n medium:\r\n \"rounded-xl text-sm py-2 px-4 leading-tight font-semibold gap-2\",\r\n small: \"rounded-full text-xs py-2 px-3 leading-4 font-semibold gap-1\",\r\n \"icon.large\": \"rounded-[12px] p-2.5\",\r\n \"icon.medium\": \"rounded-[10px] p-2\",\r\n \"icon.small\": \"rounded-[14px] p-1.5\",\r\n },\r\n iconSize: {\r\n large: \"[&_svg]:w-6 [&_svg]:h-6\",\r\n medium: \"[&_svg]:w-5 [&_svg]:h-5\",\r\n small: \"[&_svg]:w-4 [&_svg]:h-4\",\r\n },\r\n iconPosition: {\r\n left: \"flex-row\",\r\n right: \"flex-row-reverse\",\r\n },\r\n fullWidth: {\r\n true: \"w-full\",\r\n false: \"w-auto\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n size: \"medium\",\r\n iconPosition: \"left\",\r\n fullWidth: false,\r\n },\r\n }\r\n);\r\n\r\ninterface DoctButtonProps\r\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n VariantProps<typeof DoctButtonVariants> {\r\n asChild?: boolean;\r\n icon?: React.ReactNode;\r\n iconOnly?: boolean;\r\n iconSize?: \"large\" | \"medium\" | \"small\";\r\n iconPosition?: \"left\" | \"right\";\r\n // Optional: Update if you're using custom change handler\r\n // onChange?: (value: string) => void;\r\n}\r\n\r\nconst DoctButton = React.forwardRef<HTMLButtonElement, DoctButtonProps>(\r\n (\r\n {\r\n className,\r\n variant,\r\n size,\r\n iconSize,\r\n iconPosition,\r\n fullWidth,\r\n asChild = false,\r\n icon,\r\n iconOnly,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const Comp = asChild ? SlotPrimitive.Slot : \"button\";\r\n\r\n let buttonSize = size;\r\n if (iconOnly && size) {\r\n switch (size) {\r\n case \"large\":\r\n buttonSize = \"icon.large\";\r\n break;\r\n case \"medium\":\r\n buttonSize = \"icon.medium\";\r\n break;\r\n case \"small\":\r\n buttonSize = \"icon.small\";\r\n break;\r\n }\r\n }\r\n\r\n const iconSizeClass =\r\n iconSize ||\r\n (size === \"large\" ? \"large\" : size === \"small\" ? \"small\" : \"medium\");\r\n\r\n return (\r\n <Comp\r\n className={cn(\r\n DoctButtonVariants({\r\n variant,\r\n size: buttonSize,\r\n iconSize: iconSizeClass,\r\n iconPosition,\r\n fullWidth,\r\n className,\r\n })\r\n )}\r\n ref={ref}\r\n aria-label={\r\n iconOnly && !props[\"aria-label\"] ? \"Icon button\" : props[\"aria-label\"]\r\n }\r\n {...props}\r\n >\r\n {icon && <span data-testid=\"button-icon\">{icon}</span>}\r\n {!iconOnly && children}\r\n </Comp>\r\n );\r\n }\r\n);\r\n\r\nDoctButton.displayName = \"DoctButton\";\r\n\r\nexport { DoctButton, DoctButtonVariants };\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "button.test",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "button.test",
|
|
4
4
|
"title": "Button.test",
|
|
5
5
|
"description": "Button.test component",
|
|
6
|
-
"dependencies": [
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"@testing-library/react",
|
|
8
|
+
"vitest"
|
|
9
|
+
],
|
|
7
10
|
"files": [
|
|
8
11
|
{
|
|
9
12
|
"type": "registry:ui",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "calendar",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "calendar",
|
|
4
4
|
"title": "Calendar",
|
|
5
5
|
"description": "Calendar component",
|
|
6
6
|
"dependencies": [
|
|
7
7
|
"lucide-react",
|
|
8
|
-
"react-day-picker@^9.
|
|
8
|
+
"react-day-picker@^9.11.0"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "checkbox",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "checkbox",
|
|
4
4
|
"title": "Checkbox",
|
|
5
5
|
"description": "Checkbox component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"lucide-react"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/checkbox.tsx",
|
|
14
|
-
"content": "// components/ui/checkbox.tsx\r\n\r\nimport * as React from \"react\";\r\nimport
|
|
14
|
+
"content": "// components/ui/checkbox.tsx\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\r\nimport { Check, Minus } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nexport interface CheckboxProps\r\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\r\n color?: string;\r\n}\r\n\r\nconst Checkbox = React.forwardRef<\r\n React.ElementRef<typeof CheckboxPrimitive.Root>,\r\n CheckboxProps\r\n>(({ className, color = \"#029cfd\", ...props }, ref) => (\r\n <CheckboxPrimitive.Root\r\n ref={ref}\r\n className={cn(\r\n \"peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\r\n \"data-[state=checked]:text-white\",\r\n className\r\n )}\r\n style={{\r\n borderColor: color,\r\n backgroundColor: props.checked ? color : \"transparent\",\r\n }}\r\n {...props}\r\n >\r\n <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\r\n {props.checked === \"indeterminate\" ? (\r\n <Minus className=\"h-4 w-4 text-white\" />\r\n ) : (\r\n <Check className=\"h-4 w-4\" />\r\n )}\r\n </CheckboxPrimitive.Indicator>\r\n </CheckboxPrimitive.Root>\r\n));\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\r\n\r\nexport { Checkbox };\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "command",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "command",
|
|
4
4
|
"title": "Command",
|
|
5
5
|
"description": "Command component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"cmdk",
|
|
9
9
|
"lucide-react"
|
|
10
10
|
],
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
{
|
|
13
13
|
"type": "registry:ui",
|
|
14
14
|
"path": "components/ui/command.tsx",
|
|
15
|
-
"content": "import * as React from \"react\"\r\nimport { type DialogProps } from \"
|
|
15
|
+
"content": "import * as React from \"react\"\r\nimport { type DialogProps } from \"radix-ui\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\r\n\r\nconst Command = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive\r\n ref={ref}\r\n className={cn(\r\n \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\r\n return (\r\n <Dialog {...props}>\r\n <DialogContent className=\"overflow-hidden p-0 shadow-lg\">\r\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\r\n {children}\r\n </Command>\r\n </DialogContent>\r\n </Dialog>\r\n )\r\n}\r\n\r\nconst CommandInput = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Input>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n <div className=\"flex items-center h-auto px-3\" cmdk-input-wrapper=\"\">\r\n <Search strokeWidth={1.25} className=\"mr-2 h-4 w-4 shrink-0\" />\r\n <CommandPrimitive.Input\r\n ref={ref}\r\n className={cn(\r\n \"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-400 disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n))\r\n\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\nconst CommandList = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.List\r\n ref={ref}\r\n className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\r\n {...props}\r\n />\r\n))\r\n\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Empty>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n <CommandPrimitive.Empty\r\n ref={ref}\r\n className=\"py-6 text-center text-sm\"\r\n {...props}\r\n />\r\n))\r\n\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\nconst CommandGroup = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Group>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Group\r\n ref={ref}\r\n className={cn(\r\n \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\n\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"-mx-1 h-px bg-border\", className)}\r\n {...props}\r\n />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\nconst CommandItem = React.forwardRef<\r\n React.ElementRef<typeof CommandPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <CommandPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\n\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-xs tracking-widest text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n Command,\r\n CommandDialog,\r\n CommandInput,\r\n CommandList,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandItem,\r\n CommandShortcut,\r\n CommandSeparator,\r\n}\r\n"
|
|
16
16
|
}
|
|
17
17
|
]
|
|
18
18
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "dropdown-menu",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "dropdown-menu",
|
|
4
4
|
"title": "Dropdown Menu",
|
|
5
5
|
"description": "Dropdown Menu component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"lucide-react"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/dropdown-menu.tsx",
|
|
14
|
-
"content": "import
|
|
14
|
+
"content": "import { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\";\r\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\r\nimport * as React from \"react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst DropdownMenu = DropdownMenuPrimitive.Root;\r\n\r\nconst DropdownMenuTrigger = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\r\n>(({ onClick, onMouseDown, onPointerDown, ...props }, ref) => {\r\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\r\n e.stopPropagation();\r\n onClick?.(e);\r\n };\r\n const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {\r\n e.stopPropagation();\r\n onMouseDown?.(e);\r\n };\r\n const handlePointerDown: React.PointerEventHandler<HTMLButtonElement> = (\r\n e\r\n ) => {\r\n e.stopPropagation();\r\n onPointerDown?.(e);\r\n };\r\n return (\r\n <DropdownMenuPrimitive.Trigger\r\n ref={ref}\r\n onClick={handleClick}\r\n onMouseDown={handleMouseDown}\r\n onPointerDown={handlePointerDown}\r\n {...props}\r\n />\r\n );\r\n});\r\nDropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;\r\n\r\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\r\n\r\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\r\n\r\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\r\n\r\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\r\n\r\nconst DropdownMenuSubTrigger = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\r\n inset?: boolean;\r\n }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n <DropdownMenuPrimitive.SubTrigger\r\n ref={ref}\r\n className={cn(\r\n \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronRight className=\"ml-auto\" />\r\n </DropdownMenuPrimitive.SubTrigger>\r\n));\r\nDropdownMenuSubTrigger.displayName =\r\n DropdownMenuPrimitive.SubTrigger.displayName;\r\n\r\nconst DropdownMenuSubContent = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n <DropdownMenuPrimitive.SubContent\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-dropdown-menu-content-transform-origin]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuSubContent.displayName =\r\n DropdownMenuPrimitive.SubContent.displayName;\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <DropdownMenuPrimitive.Portal>\r\n <DropdownMenuPrimitive.Content\r\n ref={ref}\r\n sideOffset={sideOffset}\r\n className={cn(\r\n \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-dropdown-menu-content-transform-origin]\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </DropdownMenuPrimitive.Portal>\r\n));\r\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\r\n\r\nconst DropdownMenuItem = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\r\n inset?: boolean;\r\n }\r\n>(({ className, inset, ...props }, ref) => (\r\n <DropdownMenuPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\r\n\r\nconst DropdownMenuCheckboxItem = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n <DropdownMenuPrimitive.CheckboxItem\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n checked={checked}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n <DropdownMenuPrimitive.ItemIndicator>\r\n <Check className=\"h-4 w-4\" />\r\n </DropdownMenuPrimitive.ItemIndicator>\r\n </span>\r\n {children}\r\n </DropdownMenuPrimitive.CheckboxItem>\r\n));\r\nDropdownMenuCheckboxItem.displayName =\r\n DropdownMenuPrimitive.CheckboxItem.displayName;\r\n\r\nconst DropdownMenuRadioItem = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n <DropdownMenuPrimitive.RadioItem\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n <DropdownMenuPrimitive.ItemIndicator>\r\n <Circle className=\"h-2 w-2 fill-current\" />\r\n </DropdownMenuPrimitive.ItemIndicator>\r\n </span>\r\n {children}\r\n </DropdownMenuPrimitive.RadioItem>\r\n));\r\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\r\n\r\nconst DropdownMenuLabel = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.Label>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\r\n inset?: boolean;\r\n }\r\n>(({ className, inset, ...props }, ref) => (\r\n <DropdownMenuPrimitive.Label\r\n ref={ref}\r\n className={cn(\r\n \"px-2 py-1.5 text-sm font-semibold\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\r\n\r\nconst DropdownMenuSeparator = React.forwardRef<\r\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <DropdownMenuPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n {...props}\r\n />\r\n));\r\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\r\n\r\nconst DropdownMenuShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\r\n {...props}\r\n />\r\n );\r\n};\r\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\r\n\r\nexport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuGroup,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuPortal,\r\n DropdownMenuRadioGroup,\r\n DropdownMenuRadioItem,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n};\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "label",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "label",
|
|
4
4
|
"title": "Label",
|
|
5
5
|
"description": "Label component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"class-variance-authority"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/label.tsx",
|
|
14
|
-
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport
|
|
14
|
+
"content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Label as LabelPrimitive } from \"radix-ui\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst labelVariants = cva(\r\n \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\r\n)\r\n\r\nconst Label = React.forwardRef<\r\n React.ElementRef<typeof LabelPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\r\n VariantProps<typeof labelVariants>\r\n>(({ className, ...props }, ref) => (\r\n <LabelPrimitive.Root\r\n ref={ref}\r\n className={cn(labelVariants(), className)}\r\n {...props}\r\n />\r\n))\r\nLabel.displayName = LabelPrimitive.Root.displayName\r\n\r\nexport { Label }\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "popover",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "popover",
|
|
4
4
|
"title": "Popover",
|
|
5
5
|
"description": "Popover component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui"
|
|
8
8
|
],
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"type": "registry:ui",
|
|
12
12
|
"path": "components/ui/popover.tsx",
|
|
13
|
-
"content": "import * as React from \"react\"\r\nimport
|
|
13
|
+
"content": "import * as React from \"react\"\r\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Popover = PopoverPrimitive.Root\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger\r\nconst PopoverAnchor = PopoverPrimitive.Anchor\r\n\r\nconst PopoverContent = React.forwardRef<\r\n React.ElementRef<typeof PopoverPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n ref={ref}\r\n sideOffset={sideOffset}\r\n className={cn(\r\n 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\r\n className\r\n )}\r\n {...props}\r\n />\r\n </PopoverPrimitive.Portal>\r\n))\r\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\r\n\r\nexport {\r\n Popover,\r\n PopoverTrigger,\r\n PopoverContent,\r\n PopoverAnchor,\r\n}\r\n"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "progress",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "progress",
|
|
4
4
|
"title": "Progress",
|
|
5
5
|
"description": "Progress component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui"
|
|
8
8
|
],
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"type": "registry:ui",
|
|
12
12
|
"path": "components/ui/progress.tsx",
|
|
13
|
-
"content": "import * as React from \"react\"\r\nimport
|
|
13
|
+
"content": "import * as React from \"react\"\r\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Progress = React.forwardRef<\r\n React.ElementRef<typeof ProgressPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\r\n>(({ className, value, ...props }, ref) => (\r\n <ProgressPrimitive.Root\r\n ref={ref}\r\n className={cn(\r\n \"relative h-1.5 w-full overflow-hidden rounded-full bg-secondary\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ProgressPrimitive.Indicator\r\n className=\"h-full w-full flex-1 bg-brandBlue transition-all\"\r\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\r\n />\r\n </ProgressPrimitive.Root>\r\n))\r\nProgress.displayName = ProgressPrimitive.Root.displayName\r\n\r\nexport { Progress }\r\n"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "radio-group",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "radio-group",
|
|
4
4
|
"title": "Radio Group",
|
|
5
5
|
"description": "Radio Group component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"lucide-react"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/radio-group.tsx",
|
|
14
|
-
"content": "import * as React from \"react\";\r\nimport
|
|
14
|
+
"content": "import * as React from \"react\";\r\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\r\nimport { Circle } from \"lucide-react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst RadioGroup = React.forwardRef<\r\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n <RadioGroupPrimitive.Root\r\n ref={ref}\r\n className={cn(\"grid gap-2\", className)}\r\n {...props}\r\n />\r\n));\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n <RadioGroupPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n `\r\n aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background\r\n focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\r\n disabled:cursor-not-allowed disabled:opacity-50\r\n `,\r\n className\r\n )}\r\n {...props}\r\n >\r\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\r\n <Circle className=\"h-2.5 w-2.5 fill-current text-current\" />\r\n </RadioGroupPrimitive.Indicator>\r\n </RadioGroupPrimitive.Item>\r\n));\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\r\n\r\nexport { RadioGroup, RadioGroupItem };\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "select",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "select",
|
|
4
4
|
"title": "Select",
|
|
5
5
|
"description": "Select component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui",
|
|
8
8
|
"lucide-react"
|
|
9
9
|
],
|
|
10
10
|
"files": [
|
|
11
11
|
{
|
|
12
12
|
"type": "registry:ui",
|
|
13
13
|
"path": "components/ui/select.tsx",
|
|
14
|
-
"content": "import * as React from \"react\"\r\nimport
|
|
14
|
+
"content": "import * as React from \"react\"\r\nimport { Select as SelectPrimitive } from \"radix-ui\"\r\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Select = SelectPrimitive.Root\r\n\r\nconst SelectGroup = SelectPrimitive.Group\r\n\r\nconst SelectValue = SelectPrimitive.Value\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <SelectPrimitive.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <SelectPrimitive.Icon asChild>\r\n <ChevronDown strokeWidth={1.5} className=\"h-4 w-4 text-foreground\" />\r\n </SelectPrimitive.Icon>\r\n </SelectPrimitive.Trigger>\r\n))\r\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\r\n\r\nconst SelectScrollUpButton = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\r\n>(({ className, ...props }, ref) => (\r\n <SelectPrimitive.ScrollUpButton\r\n ref={ref}\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronUp className=\"h-4 w-4\" />\r\n </SelectPrimitive.ScrollUpButton>\r\n))\r\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\r\n\r\nconst SelectScrollDownButton = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\r\n>(({ className, ...props }, ref) => (\r\n <SelectPrimitive.ScrollDownButton\r\n ref={ref}\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronDown className=\"h-4 w-4\" />\r\n </SelectPrimitive.ScrollDownButton>\r\n))\r\nSelectScrollDownButton.displayName =\r\n SelectPrimitive.ScrollDownButton.displayName\r\n\r\nconst SelectContent = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\r\n>(({ className, children, position = \"popper\", ...props }, ref) => (\r\n <SelectPrimitive.Portal>\r\n <SelectPrimitive.Content\r\n ref={ref}\r\n className={cn(\r\n \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 origin-[--radix-select-content-transform-origin]\",\r\n position === \"popper\" &&\r\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\r\n className\r\n )}\r\n position={position}\r\n {...props}\r\n >\r\n <SelectScrollUpButton />\r\n <SelectPrimitive.Viewport\r\n className={cn(\r\n \"p-1\",\r\n position === \"popper\" &&\r\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\r\n )}\r\n >\r\n {children}\r\n </SelectPrimitive.Viewport>\r\n <SelectScrollDownButton />\r\n </SelectPrimitive.Content>\r\n </SelectPrimitive.Portal>\r\n))\r\nSelectContent.displayName = SelectPrimitive.Content.displayName\r\n\r\nconst SelectLabel = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.Label>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\r\n>(({ className, ...props }, ref) => (\r\n <SelectPrimitive.Label\r\n ref={ref}\r\n className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\r\n {...props}\r\n />\r\n))\r\nSelectLabel.displayName = SelectPrimitive.Label.displayName\r\n\r\nconst SelectItem = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\r\n>(({ className, children, ...props }, ref) => (\r\n <SelectPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n <SelectPrimitive.ItemIndicator>\r\n <Check className=\"h-4 w-4\" />\r\n </SelectPrimitive.ItemIndicator>\r\n </span>\r\n\r\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\r\n </SelectPrimitive.Item>\r\n))\r\nSelectItem.displayName = SelectPrimitive.Item.displayName\r\n\r\nconst SelectSeparator = React.forwardRef<\r\n React.ElementRef<typeof SelectPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <SelectPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\r\n\r\nexport {\r\n Select,\r\n SelectGroup,\r\n SelectValue,\r\n SelectTrigger,\r\n SelectContent,\r\n SelectLabel,\r\n SelectItem,\r\n SelectSeparator,\r\n SelectScrollUpButton,\r\n SelectScrollDownButton,\r\n}\r\n"
|
|
15
15
|
}
|
|
16
16
|
]
|
|
17
17
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "tabs",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "tabs",
|
|
4
4
|
"title": "Tabs",
|
|
5
5
|
"description": "Tabs component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui"
|
|
8
8
|
],
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"type": "registry:ui",
|
|
12
12
|
"path": "components/ui/tabs.tsx",
|
|
13
|
-
"content": "import * as React from \"react\"\r\nimport
|
|
13
|
+
"content": "import * as React from \"react\"\r\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Tabs = TabsPrimitive.Root\r\n\r\nconst TabsList = React.forwardRef<\r\n React.ElementRef<typeof TabsPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <TabsPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsList.displayName = TabsPrimitive.List.displayName\r\n\r\nconst TabsTrigger = React.forwardRef<\r\n React.ElementRef<typeof TabsPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n <TabsPrimitive.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\r\n\r\nconst TabsContent = React.forwardRef<\r\n React.ElementRef<typeof TabsPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n <TabsPrimitive.Content\r\n ref={ref}\r\n className={cn(\r\n \"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nTabsContent.displayName = TabsPrimitive.Content.displayName\r\n\r\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\r\n"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "toast.test",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "toast.test",
|
|
4
4
|
"title": "Toast.test",
|
|
5
5
|
"description": "Toast.test component",
|
|
6
|
-
"dependencies": [
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"@testing-library/react"
|
|
8
|
+
],
|
|
7
9
|
"files": [
|
|
8
10
|
{
|
|
9
11
|
"type": "registry:ui",
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "tooltip",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "tooltip",
|
|
4
4
|
"title": "Tooltip",
|
|
5
5
|
"description": "Tooltip component",
|
|
6
6
|
"dependencies": [
|
|
7
|
-
"
|
|
7
|
+
"radix-ui"
|
|
8
8
|
],
|
|
9
9
|
"files": [
|
|
10
10
|
{
|
|
11
11
|
"type": "registry:ui",
|
|
12
12
|
"path": "components/ui/tooltip.tsx",
|
|
13
|
-
"content": "import * as React from \"react\";\r\nimport
|
|
13
|
+
"content": "import * as React from \"react\";\r\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst TooltipProvider = TooltipPrimitive.Provider;\r\nconst Tooltip = TooltipPrimitive.Root;\r\nconst TooltipTrigger = TooltipPrimitive.Trigger;\r\n\r\nconst TooltipContent = React.forwardRef<\r\n React.ElementRef<typeof TooltipPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\r\n>(({ className, sideOffset = 4, children, ...props }, ref) => (\r\n <TooltipPrimitive.Content\r\n ref={ref}\r\n sideOffset={sideOffset}\r\n className={cn(\r\n \"z-50 rounded-xl border border-border bg-background px-3 py-1.5 text-sm text-foreground shadow-xl transition-all\",\r\n \"animate-in fade-in zoom-in-95\",\r\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95\",\r\n \"data-[side=bottom]:slide-in-from-top-2\",\r\n \"data-[side=left]:slide-in-from-right-2\",\r\n \"data-[side=right]:slide-in-from-left-2\",\r\n \"data-[side=top]:slide-in-from-bottom-2\",\r\n \"origin-[--radix-tooltip-content-transform-origin]\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <TooltipPrimitive.Arrow className=\"fill-background stroke-border h-2 w-4\" />\r\n </TooltipPrimitive.Content>\r\n));\r\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\r\n\r\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\r\n"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "typography",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "typography",
|
|
4
4
|
"title": "Typography",
|
|
5
5
|
"description": "Typography component",
|
|
6
6
|
"dependencies": [],
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
{
|
|
9
9
|
"type": "registry:ui",
|
|
10
10
|
"path": "components/ui/typography.tsx",
|
|
11
|
-
"content": "import React from \"react\";\r\n\r\nexport interface DoctTypographyProps {\r\n variant:\r\n | \"h1\"\r\n | \"h2\"\r\n | \"h3\"\r\n | \"h4\"\r\n | \"h5\"\r\n | \"h6\"\r\n | \"h7\"\r\n | \"h8\"\r\n | \"title1\"\r\n | \"title2\"\r\n | \"title3\"\r\n | \"title4\"\r\n | \"body1\"\r\n | \"body2\"\r\n | \"body3\"\r\n | \"body4\"\r\n | \"textLabel1\"\r\n | \"textLabel2\"\r\n | \"textLabel3\"\r\n | \"textLabel4\";\r\n weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\" | \"extraBold\" | \"light\";\r\n children: React.ReactNode;\r\n color?: string;\r\n align?: \"inherit\" | \"left\" | \"center\" | \"right\" | \"justify\";\r\n className?: string;\r\n}\r\n\r\nconst typographyStyles: Record<\r\n DoctTypographyProps[\"variant\"],\r\n { fontSize: string; tag: keyof
|
|
11
|
+
"content": "import React from \"react\";\r\n\r\nexport interface DoctTypographyProps {\r\n variant:\r\n | \"h1\"\r\n | \"h2\"\r\n | \"h3\"\r\n | \"h4\"\r\n | \"h5\"\r\n | \"h6\"\r\n | \"h7\"\r\n | \"h8\"\r\n | \"title1\"\r\n | \"title2\"\r\n | \"title3\"\r\n | \"title4\"\r\n | \"body1\"\r\n | \"body2\"\r\n | \"body3\"\r\n | \"body4\"\r\n | \"textLabel1\"\r\n | \"textLabel2\"\r\n | \"textLabel3\"\r\n | \"textLabel4\";\r\n weight?: \"regular\" | \"medium\" | \"semiBold\" | \"bold\" | \"extraBold\" | \"light\";\r\n children: React.ReactNode;\r\n color?: string;\r\n align?: \"inherit\" | \"left\" | \"center\" | \"right\" | \"justify\";\r\n className?: string;\r\n}\r\n\r\nconst typographyStyles: Record<\r\n DoctTypographyProps[\"variant\"],\r\n { fontSize: string; tag: keyof JSX.IntrinsicElements }\r\n> = {\r\n h1: { fontSize: \"3.5rem\", tag: \"h1\" },\r\n h2: { fontSize: \"2.875rem\", tag: \"h2\" },\r\n h3: { fontSize: \"2.25rem\", tag: \"h3\" },\r\n h4: { fontSize: \"2rem\", tag: \"h4\" }, // 32px -> 2rem\r\n h5: { fontSize: \"1.75rem\", tag: \"h5\" }, // 28px -> 1.75rem\r\n h6: { fontSize: \"1.5rem\", tag: \"h6\" }, // 24px -> 1.5rem\r\n h7: { fontSize: \"1.25rem\", tag: \"p\" }, // 20px -> 1.25rem\r\n h8: { fontSize: \"1.125rem\", tag: \"p\" }, // 18px -> 1.125rem\r\n title1: { fontSize: \"1.375rem\", tag: \"p\" }, // 22px -> 1.375rem\r\n title2: { fontSize: \"1.125rem\", tag: \"p\" }, // 18px -> 1.125rem\r\n title3: { fontSize: \"0.875rem\", tag: \"p\" }, // 14px -> 0.875rem\r\n title4: { fontSize: \"0.75rem\", tag: \"p\" }, // 12px -> 0.75rem\r\n body1: { fontSize: \"1rem\", tag: \"p\" }, // 16px -> 1rem\r\n body2: { fontSize: \"0.875rem\", tag: \"p\" }, // 14px -> 0.875rem\r\n body3: { fontSize: \"0.75rem\", tag: \"p\" }, // 12px -> 0.75rem\r\n body4: { fontSize: \"0.625rem\", tag: \"p\" }, // 10px -> 0.625rem\r\n textLabel1: { fontSize: \"1rem\", tag: \"span\" }, // 16px -> 1rem\r\n textLabel2: { fontSize: \"0.875rem\", tag: \"span\" }, // 14px -> 0.875rem\r\n textLabel3: { fontSize: \"0.75rem\", tag: \"span\" }, // 12px -> 0.75rem\r\n textLabel4: { fontSize: \"0.6875rem\", tag: \"span\" }, // 11px -> 0.6875rem\r\n};\r\n\r\nconst fontWeights: Record<string, string> = {\r\n regular: \"400\",\r\n medium: \"500\",\r\n semiBold: \"600\",\r\n bold: \"700\",\r\n extraBold: \"800\",\r\n light: \"300\",\r\n};\r\n\r\nconst DoctTypography: React.FC<DoctTypographyProps> = ({\r\n variant,\r\n weight = \"regular\",\r\n children,\r\n color = \"#000\",\r\n align = \"inherit\",\r\n className = \"\",\r\n}) => {\r\n const typographyStyle = typographyStyles[variant] ?? {\r\n fontSize: \"16px\",\r\n tag: \"p\",\r\n };\r\n const { fontSize, tag: Tag } = typographyStyle;\r\n\r\n return (\r\n <Tag\r\n className={className}\r\n style={{\r\n fontSize,\r\n fontWeight: fontWeights[weight] ?? \"400\",\r\n color,\r\n textAlign: align,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n );\r\n};\r\n\r\nexport { DoctTypography };\r\n"
|
|
12
12
|
}
|
|
13
13
|
]
|
|
14
14
|
}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
|
-
"name": "typography.test",
|
|
3
2
|
"type": "registry:ui",
|
|
3
|
+
"name": "typography.test",
|
|
4
4
|
"title": "Typography.test",
|
|
5
5
|
"description": "Typography.test component",
|
|
6
|
-
"dependencies": [
|
|
6
|
+
"dependencies": [
|
|
7
|
+
"@testing-library/react",
|
|
8
|
+
"vitest"
|
|
9
|
+
],
|
|
7
10
|
"files": [
|
|
8
11
|
{
|
|
9
12
|
"type": "registry:ui",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { Avatar as AvatarPrimitive } from 'radix-ui';
|
|
1
2
|
import * as React from "react";
|
|
2
|
-
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
3
3
|
declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
4
4
|
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
5
5
|
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|