@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.3.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.
Files changed (25) hide show
  1. package/README.md +9 -9
  2. package/package.json +23 -23
  3. package/src/components/agent-icon.tsx +16 -16
  4. package/src/components/autocomplete.tsx +166 -162
  5. package/src/components/badge.tsx +46 -45
  6. package/src/components/button.tsx +56 -63
  7. package/src/components/combobox.tsx +233 -228
  8. package/src/components/command.tsx +135 -139
  9. package/src/components/dialog.tsx +106 -98
  10. package/src/components/dropdown-menu.tsx +118 -115
  11. package/src/components/github-background.tsx +214 -216
  12. package/src/components/halftone-background.tsx +164 -155
  13. package/src/components/halftone-config.ts +8 -8
  14. package/src/components/input-group.tsx +149 -147
  15. package/src/components/input.tsx +17 -17
  16. package/src/components/live-duration.tsx +70 -64
  17. package/src/components/logo.tsx +9 -13
  18. package/src/components/popover.tsx +60 -62
  19. package/src/components/resize-handle.tsx +73 -75
  20. package/src/components/sheet.tsx +120 -112
  21. package/src/components/textarea.tsx +15 -15
  22. package/src/components/time-ago.tsx +64 -62
  23. package/src/components/tooltip.tsx +48 -42
  24. package/src/foundation/styles.css +6 -4
  25. package/src/index.ts +21 -21
package/src/components/dropdown-menu.tsx CHANGED
@@ -1,150 +1,153 @@
1
- import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
2
- import { CheckIcon } from "lucide-react";
3
- import type * as React from "react";
4
- import { cn } from "../foundation/cn";
1
+ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
2
+ import { CheckIcon } from 'lucide-react'
3
+ import type * as React from 'react'
4
+ import { cn } from '../foundation/cn'
5
5
 
6
- function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element {
7
- return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
6
+ function DropdownMenu({
7
+ ...props
8
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element {
9
+ return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
8
10
  }
9
11
 
10
12
  function DropdownMenuTrigger({
11
- ...props
13
+ ...props
12
14
  }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element {
13
- return (
14
- <DropdownMenuPrimitive.Trigger
15
- data-slot="dropdown-menu-trigger"
16
- {...props}
17
- className={cn("rounded-sm", props.className)}
18
- />
19
- );
15
+ return (
16
+ <DropdownMenuPrimitive.Trigger
17
+ data-slot="dropdown-menu-trigger"
18
+ {...props}
19
+ className={cn('rounded-sm', props.className)}
20
+ />
21
+ )
20
22
  }
21
23
 
22
24
  function DropdownMenuContent({
23
- className,
24
- sideOffset = 4,
25
- ...props
25
+ className,
26
+ sideOffset = 4,
27
+ ...props
26
28
  }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element {
27
- return (
28
- <DropdownMenuPrimitive.Portal>
29
- <DropdownMenuPrimitive.Content
30
- data-slot="dropdown-menu-content"
31
- sideOffset={sideOffset}
32
- className={cn(
33
- "bg-background text-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
34
- className,
35
- )}
36
- {...props}
37
- />
38
- </DropdownMenuPrimitive.Portal>
39
- );
29
+ return (
30
+ <DropdownMenuPrimitive.Portal>
31
+ <DropdownMenuPrimitive.Content
32
+ data-slot="dropdown-menu-content"
33
+ sideOffset={sideOffset}
34
+ className={cn(
35
+ 'bg-background text-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
36
+ className,
37
+ )}
38
+ {...props}
39
+ />
40
+ </DropdownMenuPrimitive.Portal>
41
+ )
40
42
  }
41
43
 
42
- function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element {
43
- return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
44
+ function DropdownMenuGroup({
45
+ ...props
46
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element {
47
+ return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
44
48
  }
45
49
 
46
50
  type DropdownMenuItemPropsExternalApi = React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
47
- inset?: boolean;
48
- };
51
+ inset?: boolean
52
+ }
49
53
 
50
54
  function DropdownMenuItem({
51
- className,
52
- inset,
53
- ...props
55
+ className,
56
+ inset,
57
+ ...props
54
58
  }: DropdownMenuItemPropsExternalApi): React.JSX.Element {
55
- return (
56
- <DropdownMenuPrimitive.Item
57
- data-slot="dropdown-menu-item"
58
- data-inset={inset}
59
- className={cn(
60
- "focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
61
- className,
62
- )}
63
- {...props}
64
- />
65
- );
59
+ return (
60
+ <DropdownMenuPrimitive.Item
61
+ data-slot="dropdown-menu-item"
62
+ data-inset={inset}
63
+ className={cn(
64
+ "focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
65
+ className,
66
+ )}
67
+ {...props}
68
+ />
69
+ )
66
70
  }
67
71
 
68
72
  function DropdownMenuCheckboxItem({
69
- className,
70
- children,
71
- ...props
73
+ className,
74
+ children,
75
+ ...props
72
76
  }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element {
73
- return (
74
- <DropdownMenuPrimitive.CheckboxItem
75
- data-slot="dropdown-menu-checkbox-item"
76
- className={cn(
77
- "focus:bg-accent relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
78
- className,
79
- )}
80
- {...props}
81
- >
82
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
83
- <DropdownMenuPrimitive.ItemIndicator>
84
- <CheckIcon className="size-4" />
85
- </DropdownMenuPrimitive.ItemIndicator>
86
- </span>
87
- {children}
88
- </DropdownMenuPrimitive.CheckboxItem>
89
- );
77
+ return (
78
+ <DropdownMenuPrimitive.CheckboxItem
79
+ data-slot="dropdown-menu-checkbox-item"
80
+ className={cn(
81
+ "focus:bg-accent relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
82
+ className,
83
+ )}
84
+ {...props}
85
+ >
86
+ <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
87
+ <DropdownMenuPrimitive.ItemIndicator>
88
+ <CheckIcon className="size-4" />
89
+ </DropdownMenuPrimitive.ItemIndicator>
90
+ </span>
91
+ {children}
92
+ </DropdownMenuPrimitive.CheckboxItem>
93
+ )
90
94
  }
91
95
 
92
- type DropdownMenuLabelPropsExternalApi = React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
93
- inset?: boolean;
94
- };
96
+ type DropdownMenuLabelPropsExternalApi = React.ComponentProps<
97
+ typeof DropdownMenuPrimitive.Label
98
+ > & {
99
+ inset?: boolean
100
+ }
95
101
 
96
102
  function DropdownMenuLabel({
97
- className,
98
- inset,
99
- ...props
103
+ className,
104
+ inset,
105
+ ...props
100
106
  }: DropdownMenuLabelPropsExternalApi): React.JSX.Element {
101
- return (
102
- <DropdownMenuPrimitive.Label
103
- data-slot="dropdown-menu-label"
104
- data-inset={inset}
105
- className={cn(
106
- "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
107
- className,
108
- )}
109
- {...props}
110
- />
111
- );
107
+ return (
108
+ <DropdownMenuPrimitive.Label
109
+ data-slot="dropdown-menu-label"
110
+ data-inset={inset}
111
+ className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
112
+ {...props}
113
+ />
114
+ )
112
115
  }
113
116
 
114
117
  function DropdownMenuSeparator({
115
- className,
116
- ...props
118
+ className,
119
+ ...props
117
120
  }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element {
118
- return (
119
- <DropdownMenuPrimitive.Separator
120
- data-slot="dropdown-menu-separator"
121
- className={cn("bg-border -mx-1 my-1 h-px", className)}
122
- {...props}
123
- />
124
- );
121
+ return (
122
+ <DropdownMenuPrimitive.Separator
123
+ data-slot="dropdown-menu-separator"
124
+ className={cn('bg-border -mx-1 my-1 h-px', className)}
125
+ {...props}
126
+ />
127
+ )
125
128
  }
126
129
 
127
- function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element {
128
- return (
129
- <span
130
- data-slot="dropdown-menu-shortcut"
131
- className={cn(
132
- "text-muted-foreground ml-auto text-xs tracking-widest",
133
- className,
134
- )}
135
- {...props}
136
- />
137
- );
130
+ function DropdownMenuShortcut({
131
+ className,
132
+ ...props
133
+ }: React.ComponentProps<'span'>): React.JSX.Element {
134
+ return (
135
+ <span
136
+ data-slot="dropdown-menu-shortcut"
137
+ className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
138
+ {...props}
139
+ />
140
+ )
138
141
  }
139
142
 
140
143
  export {
141
- DropdownMenu,
142
- DropdownMenuTrigger,
143
- DropdownMenuContent,
144
- DropdownMenuGroup,
145
- DropdownMenuLabel,
146
- DropdownMenuItem,
147
- DropdownMenuCheckboxItem,
148
- DropdownMenuSeparator,
149
- DropdownMenuShortcut,
150
- };
144
+ DropdownMenu,
145
+ DropdownMenuTrigger,
146
+ DropdownMenuContent,
147
+ DropdownMenuGroup,
148
+ DropdownMenuLabel,
149
+ DropdownMenuItem,
150
+ DropdownMenuCheckboxItem,
151
+ DropdownMenuSeparator,
152
+ DropdownMenuShortcut,
153
+ }