@neynar/ui 1.0.4 → 1.0.6
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/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/button.js +1 -0
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/resizable.js +2 -2
- package/dist/components/ui/resizable.js.map +1 -1
- package/llm/components/resizable.llm.md +47 -22
- package/package.json +1 -1
- package/src/components/ui/button.tsx +2 -0
- package/src/components/ui/resizable.tsx +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAwCnB,CAAC;AAEF;;;GAGG;AACH,KAAK,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,WAAW,2CAQb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive:\n \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n success:\n \"bg-success/10 hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/20 text-success focus-visible:border-success/40 dark:hover:bg-success/30\",\n warning:\n \"bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/20 text-warning focus-visible:border-warning/40 dark:hover:bg-warning/30\",\n info: \"bg-info/10 hover:bg-info/20 focus-visible:ring-info/20 dark:focus-visible:ring-info/40 dark:bg-info/20 text-info focus-visible:border-info/40 dark:hover:bg-info/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\n/**\n * Props for the Button component.\n * Combines Base UI Button props with variant styling options.\n */\ntype ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>;\n\n/**\n * Versatile button component with multiple visual variants and sizes.\n *\n * Supports icon placement via `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` attributes\n * on child elements. Use the `render` prop to compose with other components or change the\n * underlying element while maintaining button semantics.\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button variant=\"default\">Click me</Button>\n *\n * // With icon\n * <Button>\n * <PlusIcon data-icon=\"inline-start\" />\n * Create\n * </Button>\n *\n * // Icon only\n * <Button size=\"icon\" aria-label=\"Settings\">\n * <SettingsIcon />\n * </Button>\n *\n * // Custom element\n * <Button render={<a href=\"/login\" />}>Sign in</Button>\n * ```\n */\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonProps) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n );\n}\n\nexport { Button, buttonVariants, type ButtonProps };\n"],"names":["ButtonPrimitive"],"mappings":";;;;;AAOA;AAAuB;AACrB;AACA;AACY;AACC;AACE;AAEP;AAEA;AAEA;AAEA;AAEA;AAEA;AACI;AACA;AAAA;AAEF;AAEF;AACE;AACA;AACA;AACE;AAEJ;AAEA;AACS;AAAA;AACb;AAEe;AACN;AACH;AAAA;AAGZ;AAmCA;AAAgB;AACd;AACU;AACH;AAET;AACE;AACE;AAACA;AAAA;AACW;AACgD;AACtD;AAAA;AAGV;;;;;"}
|
|
@@ -32,11 +32,11 @@ function ResizableHandle({
|
|
|
32
32
|
{
|
|
33
33
|
"data-slot": "resizable-handle",
|
|
34
34
|
className: cn(
|
|
35
|
-
"bg-border focus-visible:ring-
|
|
35
|
+
"group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
|
|
36
36
|
className
|
|
37
37
|
),
|
|
38
38
|
...props,
|
|
39
|
-
children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" })
|
|
39
|
+
children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0" })
|
|
40
40
|
}
|
|
41
41
|
);
|
|
42
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Group as PanelGroup,\n Panel,\n Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n\n/**\n * Container for resizable panels. Manages layout orientation and panel resizing behavior.\n * Supports both horizontal and vertical layouts with optional persistence via `id` prop.\n */\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePanelGroupProps) {\n return (\n <PanelGroup\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n */\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n return <Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n /** Display a visible grip indicator on the resize handle. @default false */\n withHandle?: boolean;\n};\n\n/**\n * Resize handle between panels. Appears as a thin line with optional visible grip indicator.\n * Supports keyboard navigation and focus states.\n */\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizableHandleProps) {\n return (\n <PanelResizeHandle\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-
|
|
1
|
+
{"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Group as PanelGroup,\n Panel,\n Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n\n/**\n * Container for resizable panels. Manages layout orientation and panel resizing behavior.\n * Supports both horizontal and vertical layouts with optional persistence via `id` prop.\n */\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePanelGroupProps) {\n return (\n <PanelGroup\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n */\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n return <Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n /** Display a visible grip indicator on the resize handle. @default false */\n withHandle?: boolean;\n};\n\n/**\n * Resize handle between panels. Appears as a thin line with optional visible grip indicator.\n * Supports keyboard navigation and focus states.\n */\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizableHandleProps) {\n return (\n <PanelResizeHandle\n data-slot=\"resizable-handle\"\n className={cn(\n \"group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className,\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </PanelResizeHandle>\n );\n}\n\nexport {\n ResizablePanelGroup,\n ResizablePanel,\n ResizableHandle,\n type ResizablePanelGroupProps,\n type ResizablePanelProps,\n type ResizableHandleProps,\n};\n"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;AAiBA;AAA6B;AAC3B;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACF;AAWA;AAAyB;AACvB;AACA;AAEF;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAGkK;AAAA;AAI5K;;;;;;"}
|
|
@@ -16,16 +16,20 @@ import {
|
|
|
16
16
|
|
|
17
17
|
```tsx
|
|
18
18
|
<ResizablePanelGroup orientation="horizontal">
|
|
19
|
-
<ResizablePanel defaultSize=
|
|
19
|
+
<ResizablePanel defaultSize="50%">
|
|
20
20
|
Content 1
|
|
21
21
|
</ResizablePanel>
|
|
22
22
|
<ResizableHandle />
|
|
23
|
-
<ResizablePanel defaultSize=
|
|
23
|
+
<ResizablePanel defaultSize="50%">
|
|
24
24
|
Content 2
|
|
25
25
|
</ResizablePanel>
|
|
26
26
|
</ResizablePanelGroup>
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
+
**Important:** Size values have different meanings based on type:
|
|
30
|
+
- **Numbers are pixels:** `defaultSize={300}` = 300px
|
|
31
|
+
- **Strings are percentages:** `defaultSize="25%"` or `defaultSize="25"` = 25%
|
|
32
|
+
|
|
29
33
|
## Components
|
|
30
34
|
|
|
31
35
|
| Component | Description |
|
|
@@ -51,14 +55,21 @@ import {
|
|
|
51
55
|
|
|
52
56
|
All panels inherit props from react-resizable-panels Panel component.
|
|
53
57
|
|
|
58
|
+
**Size Value Formats:**
|
|
59
|
+
- **number** (e.g., `500`) → Pixels
|
|
60
|
+
- **string without unit** (e.g., `"25"`) → Percentage (0-100)
|
|
61
|
+
- **string with %** (e.g., `"25%"`) → Percentage
|
|
62
|
+
- **string with px** (e.g., `"300px"`) → Pixels
|
|
63
|
+
- **string with other units** (e.g., `"1rem"`, `"50vh"`) → CSS units
|
|
64
|
+
|
|
54
65
|
| Prop | Type | Default | Description |
|
|
55
66
|
|------|------|---------|-------------|
|
|
56
67
|
| id | string | - | Panel identifier (required for persistence) |
|
|
57
|
-
| defaultSize | number | - | Initial size
|
|
58
|
-
| minSize | number | 0 | Minimum size
|
|
59
|
-
| maxSize | number | 100 | Maximum size
|
|
68
|
+
| defaultSize | number \| string | - | Initial size (number=pixels, string=percentage or CSS unit) |
|
|
69
|
+
| minSize | number \| string | 0 | Minimum size (number=pixels, string=percentage or CSS unit) |
|
|
70
|
+
| maxSize | number \| string | 100 | Maximum size (number=pixels, string=percentage or CSS unit) |
|
|
60
71
|
| collapsible | boolean | false | Allow panel to collapse below minSize |
|
|
61
|
-
| collapsedSize | number | 0 | Size when collapsed |
|
|
72
|
+
| collapsedSize | number \| string | 0 | Size when collapsed |
|
|
62
73
|
| onResize | (size: { asPercentage: number; inPixels: number }) => void | - | Called when panel is resized |
|
|
63
74
|
| className | string | - | Additional CSS classes |
|
|
64
75
|
|
|
@@ -80,29 +91,43 @@ All panels inherit props from react-resizable-panels Panel component.
|
|
|
80
91
|
|
|
81
92
|
## Examples
|
|
82
93
|
|
|
83
|
-
### Basic Horizontal Layout
|
|
94
|
+
### Basic Horizontal Layout (Percentages)
|
|
84
95
|
|
|
85
96
|
```tsx
|
|
86
97
|
<ResizablePanelGroup orientation="horizontal">
|
|
87
|
-
<ResizablePanel defaultSize=
|
|
98
|
+
<ResizablePanel defaultSize="40%">
|
|
88
99
|
<div className="p-4">Sidebar</div>
|
|
89
100
|
</ResizablePanel>
|
|
90
101
|
<ResizableHandle />
|
|
91
|
-
<ResizablePanel defaultSize=
|
|
102
|
+
<ResizablePanel defaultSize="60%">
|
|
92
103
|
<div className="p-4">Main Content</div>
|
|
93
104
|
</ResizablePanel>
|
|
94
105
|
</ResizablePanelGroup>
|
|
95
106
|
```
|
|
96
107
|
|
|
108
|
+
### Fixed Pixel Sidebar
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
<ResizablePanelGroup orientation="horizontal">
|
|
112
|
+
<ResizablePanel defaultSize={300} minSize={200} maxSize={500}>
|
|
113
|
+
<div className="p-4">Fixed width sidebar (300px default)</div>
|
|
114
|
+
</ResizablePanel>
|
|
115
|
+
<ResizableHandle withHandle />
|
|
116
|
+
<ResizablePanel>
|
|
117
|
+
<div className="p-4">Main content fills remaining space</div>
|
|
118
|
+
</ResizablePanel>
|
|
119
|
+
</ResizablePanelGroup>
|
|
120
|
+
```
|
|
121
|
+
|
|
97
122
|
### Vertical Split with Handle
|
|
98
123
|
|
|
99
124
|
```tsx
|
|
100
125
|
<ResizablePanelGroup orientation="vertical">
|
|
101
|
-
<ResizablePanel defaultSize=
|
|
126
|
+
<ResizablePanel defaultSize="70%">
|
|
102
127
|
<div className="p-4">Editor</div>
|
|
103
128
|
</ResizablePanel>
|
|
104
129
|
<ResizableHandle withHandle />
|
|
105
|
-
<ResizablePanel defaultSize=
|
|
130
|
+
<ResizablePanel defaultSize="30%">
|
|
106
131
|
<div className="p-4">Terminal Output</div>
|
|
107
132
|
</ResizablePanel>
|
|
108
133
|
</ResizablePanelGroup>
|
|
@@ -112,15 +137,15 @@ All panels inherit props from react-resizable-panels Panel component.
|
|
|
112
137
|
|
|
113
138
|
```tsx
|
|
114
139
|
<ResizablePanelGroup orientation="horizontal">
|
|
115
|
-
<ResizablePanel defaultSize=
|
|
140
|
+
<ResizablePanel defaultSize="25%" minSize="15%" maxSize="40%">
|
|
116
141
|
<div className="p-4">Navigation</div>
|
|
117
142
|
</ResizablePanel>
|
|
118
143
|
<ResizableHandle withHandle />
|
|
119
|
-
<ResizablePanel defaultSize=
|
|
144
|
+
<ResizablePanel defaultSize="50%" minSize="30%">
|
|
120
145
|
<div className="p-4">Content</div>
|
|
121
146
|
</ResizablePanel>
|
|
122
147
|
<ResizableHandle withHandle />
|
|
123
|
-
<ResizablePanel defaultSize=
|
|
148
|
+
<ResizablePanel defaultSize="25%" minSize="15%" maxSize="40%">
|
|
124
149
|
<div className="p-4">Inspector</div>
|
|
125
150
|
</ResizablePanel>
|
|
126
151
|
</ResizablePanelGroup>
|
|
@@ -130,17 +155,17 @@ All panels inherit props from react-resizable-panels Panel component.
|
|
|
130
155
|
|
|
131
156
|
```tsx
|
|
132
157
|
<ResizablePanelGroup orientation="horizontal">
|
|
133
|
-
<ResizablePanel defaultSize={
|
|
134
|
-
<div className="p-4">File Explorer</div>
|
|
158
|
+
<ResizablePanel defaultSize={250} minSize={150}>
|
|
159
|
+
<div className="p-4">File Explorer (250px)</div>
|
|
135
160
|
</ResizablePanel>
|
|
136
161
|
<ResizableHandle withHandle />
|
|
137
|
-
<ResizablePanel
|
|
162
|
+
<ResizablePanel>
|
|
138
163
|
<ResizablePanelGroup orientation="vertical">
|
|
139
|
-
<ResizablePanel defaultSize=
|
|
164
|
+
<ResizablePanel defaultSize="70%">
|
|
140
165
|
<div className="p-4">Code Editor</div>
|
|
141
166
|
</ResizablePanel>
|
|
142
167
|
<ResizableHandle withHandle />
|
|
143
|
-
<ResizablePanel defaultSize=
|
|
168
|
+
<ResizablePanel defaultSize="30%" minSize="20%">
|
|
144
169
|
<div className="p-4">Terminal</div>
|
|
145
170
|
</ResizablePanel>
|
|
146
171
|
</ResizablePanelGroup>
|
|
@@ -157,11 +182,11 @@ function Dashboard() {
|
|
|
157
182
|
id="dashboard-layout"
|
|
158
183
|
orientation="horizontal"
|
|
159
184
|
>
|
|
160
|
-
<ResizablePanel id="sidebar" defaultSize=
|
|
185
|
+
<ResizablePanel id="sidebar" defaultSize="25%">
|
|
161
186
|
<div className="p-4">Sidebar</div>
|
|
162
187
|
</ResizablePanel>
|
|
163
188
|
<ResizableHandle />
|
|
164
|
-
<ResizablePanel id="main" defaultSize=
|
|
189
|
+
<ResizablePanel id="main" defaultSize="75%">
|
|
165
190
|
<div className="p-4">Main Content</div>
|
|
166
191
|
</ResizablePanel>
|
|
167
192
|
</ResizablePanelGroup>
|
|
@@ -185,7 +210,7 @@ function MonitoredPanels() {
|
|
|
185
210
|
})
|
|
186
211
|
}}
|
|
187
212
|
>
|
|
188
|
-
<ResizablePanel id="left" defaultSize=
|
|
213
|
+
<ResizablePanel id="left" defaultSize="30%">
|
|
189
214
|
<div className="p-4">Left: {sizes.left.toFixed(1)}%</div>
|
|
190
215
|
</ResizablePanel>
|
|
191
216
|
<ResizableHandle withHandle />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neynar/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Neynar Inc.",
|
|
6
6
|
"description": "AI-first React component library for coding agents. LLM-optimized docs, sensible defaults, zero config. Built on shadcn patterns, Base UI, and Tailwind CSS v4.",
|
|
@@ -59,13 +59,13 @@ function ResizableHandle({
|
|
|
59
59
|
<PanelResizeHandle
|
|
60
60
|
data-slot="resizable-handle"
|
|
61
61
|
className={cn(
|
|
62
|
-
"bg-border focus-visible:ring-
|
|
62
|
+
"group bg-border focus-visible:ring-primary relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary data-[resize-handle-state=drag]:bg-primary aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
|
|
63
63
|
className,
|
|
64
64
|
)}
|
|
65
65
|
{...props}
|
|
66
66
|
>
|
|
67
67
|
{withHandle && (
|
|
68
|
-
<div className="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" />
|
|
68
|
+
<div className="bg-border group-data-[resize-handle-state=hover]:bg-primary group-data-[resize-handle-state=drag]:bg-primary h-6 w-1 rounded-lg z-10 flex shrink-0" />
|
|
69
69
|
)}
|
|
70
70
|
</PanelResizeHandle>
|
|
71
71
|
);
|