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