@neynar/ui 1.2.1 → 1.2.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,IAAI,UAAU,EACnB,KAAK,EACL,SAAS,IAAI,iBAAiB,EAE/B,MAAM,wBAAwB,CAAC;AAgBhC,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAExE;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAW1B;AAED,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAClC,UAAU,CACX,GAAG;IACF,oGAAoG;IACpG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,IAAI,UAAU,EACnB,KAAK,EACL,SAAS,IAAI,iBAAiB,EAE/B,MAAM,wBAAwB,CAAC;AAgBhC,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAExE;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAW1B;AAED,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAClC,UAAU,CACX,GAAG;IACF,oGAAoG;IACpG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAoFrB;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAAG;IAC3E,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAetB;AAED,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,CAAC"}
|
|
@@ -36,7 +36,7 @@ function ResizablePanel({
|
|
|
36
36
|
const elementRef = React.useRef(null);
|
|
37
37
|
const animatedRef = React.useRef(animated);
|
|
38
38
|
const durationRef = React.useRef(duration);
|
|
39
|
-
const
|
|
39
|
+
const prevCollapsedRef = React.useRef(void 0);
|
|
40
40
|
React.useEffect(() => {
|
|
41
41
|
animatedRef.current = animated;
|
|
42
42
|
durationRef.current = duration;
|
|
@@ -62,22 +62,28 @@ function ResizablePanel({
|
|
|
62
62
|
);
|
|
63
63
|
React.useEffect(() => {
|
|
64
64
|
if (collapsed === void 0) return;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
const isFirstSync = prevCollapsedRef.current === void 0;
|
|
66
|
+
const hasChanged = collapsed !== prevCollapsedRef.current;
|
|
67
|
+
prevCollapsedRef.current = collapsed;
|
|
68
|
+
if (!hasChanged && !isFirstSync) return;
|
|
69
|
+
const syncState = () => {
|
|
70
|
+
try {
|
|
71
|
+
const isCurrentlyCollapsed = panelRef.current?.isCollapsed() ?? false;
|
|
72
|
+
if (collapsed === isCurrentlyCollapsed) return;
|
|
68
73
|
if (collapsed) {
|
|
69
|
-
|
|
74
|
+
if (isFirstSync) {
|
|
75
|
+
panelRef.current?.collapse();
|
|
76
|
+
} else {
|
|
77
|
+
withTransition(() => panelRef.current?.collapse());
|
|
78
|
+
}
|
|
79
|
+
} else {
|
|
80
|
+
withTransition(() => panelRef.current?.expand());
|
|
70
81
|
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (collapsed) {
|
|
77
|
-
withTransition(() => panelRef.current?.collapse());
|
|
78
|
-
} else {
|
|
79
|
-
withTransition(() => panelRef.current?.expand());
|
|
80
|
-
}
|
|
82
|
+
} catch {
|
|
83
|
+
setTimeout(syncState, 0);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
setTimeout(syncState, 0);
|
|
81
87
|
}, [collapsed, withTransition]);
|
|
82
88
|
return /* @__PURE__ */ jsx(
|
|
83
89
|
$t,
|
|
@@ -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 type PanelImperativeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Default duration of the collapse/expand animation in milliseconds. */\nconst DEFAULT_DURATION = 400;\n\n/** Default easing function for collapse/expand animations. */\nconst DEFAULT_EASING = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Generate CSS transition value for animated collapse/expand. */\nfunction getTransitionStyle(durationMs: number, easing: string): string {\n const seconds = durationMs / 1000;\n return `flex-grow ${seconds}s ${easing}, flex-basis ${seconds}s ${easing}`;\n}\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 = Omit<\n React.ComponentProps<typeof Panel>,\n \"panelRef\"\n> & {\n /** Enable smooth CSS transition for collapse/expand. Drag resizing stays instant. @default false */\n animated?: boolean;\n /** Controlled collapsed state. When provided, the panel syncs to this value. */\n collapsed?: boolean;\n /** Animation duration in milliseconds. Only applies when `animated` is true. @default 400 */\n duration?: number;\n};\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n *\n * Control collapse state declaratively via the `collapsed` prop.\n * When `animated` is true, collapse/expand transitions are smooth.\n *\n * @example\n * <ResizablePanel collapsed={isCollapsed} animated collapsible>\n */\nfunction ResizablePanel({\n className,\n animated,\n collapsed,\n duration = DEFAULT_DURATION,\n ...props\n}: ResizablePanelProps) {\n const panelRef = React.useRef<PanelImperativeHandle>(null);\n const elementRef = React.useRef<HTMLDivElement>(null);\n const animatedRef = React.useRef(animated);\n const durationRef = React.useRef(duration);\n const
|
|
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 type PanelImperativeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** Default duration of the collapse/expand animation in milliseconds. */\nconst DEFAULT_DURATION = 400;\n\n/** Default easing function for collapse/expand animations. */\nconst DEFAULT_EASING = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Generate CSS transition value for animated collapse/expand. */\nfunction getTransitionStyle(durationMs: number, easing: string): string {\n const seconds = durationMs / 1000;\n return `flex-grow ${seconds}s ${easing}, flex-basis ${seconds}s ${easing}`;\n}\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 = Omit<\n React.ComponentProps<typeof Panel>,\n \"panelRef\"\n> & {\n /** Enable smooth CSS transition for collapse/expand. Drag resizing stays instant. @default false */\n animated?: boolean;\n /** Controlled collapsed state. When provided, the panel syncs to this value. */\n collapsed?: boolean;\n /** Animation duration in milliseconds. Only applies when `animated` is true. @default 400 */\n duration?: number;\n};\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n *\n * Control collapse state declaratively via the `collapsed` prop.\n * When `animated` is true, collapse/expand transitions are smooth.\n *\n * @example\n * <ResizablePanel collapsed={isCollapsed} animated collapsible>\n */\nfunction ResizablePanel({\n className,\n animated,\n collapsed,\n duration = DEFAULT_DURATION,\n ...props\n}: ResizablePanelProps) {\n const panelRef = React.useRef<PanelImperativeHandle>(null);\n const elementRef = React.useRef<HTMLDivElement>(null);\n const animatedRef = React.useRef(animated);\n const durationRef = React.useRef(duration);\n const prevCollapsedRef = React.useRef<boolean | undefined>(undefined);\n\n // Keep the refs in sync with prop changes\n React.useEffect(() => {\n animatedRef.current = animated;\n durationRef.current = duration;\n }, [animated, duration]);\n\n /** Apply transition, call action, then remove transition after duration */\n const withTransition = React.useCallback(\n (action: () => void, skipAnimation = false) => {\n const panelEl = elementRef.current?.closest(\n '[data-panel][data-slot=\"resizable-panel\"]',\n ) as HTMLElement | null;\n\n if (animatedRef.current && panelEl && !skipAnimation) {\n const ms = durationRef.current;\n // Read easing from CSS variable, fallback to default\n const easing =\n getComputedStyle(panelEl)\n .getPropertyValue(\"--resizable-easing\")\n .trim() || DEFAULT_EASING;\n panelEl.style.transition = getTransitionStyle(ms, easing);\n action();\n setTimeout(() => {\n panelEl.style.transition = \"\";\n }, ms);\n } else {\n action();\n }\n },\n [],\n );\n\n // Sync collapsed prop to panel state\n React.useEffect(() => {\n if (collapsed === undefined) return;\n\n const isFirstSync = prevCollapsedRef.current === undefined;\n const hasChanged = collapsed !== prevCollapsedRef.current;\n prevCollapsedRef.current = collapsed;\n\n if (!hasChanged && !isFirstSync) return;\n\n // Helper to safely call collapse/expand with retry logic\n const syncState = () => {\n try {\n const isCurrentlyCollapsed = panelRef.current?.isCollapsed() ?? false;\n if (collapsed === isCurrentlyCollapsed) return;\n\n if (collapsed) {\n if (isFirstSync) {\n // First sync: no animation\n panelRef.current?.collapse();\n } else {\n withTransition(() => panelRef.current?.collapse());\n }\n } else {\n withTransition(() => panelRef.current?.expand());\n }\n } catch {\n // Panel not ready yet, retry after a tick\n setTimeout(syncState, 0);\n }\n };\n\n // Use setTimeout(0) to ensure we're after the panel group's layout effects\n setTimeout(syncState, 0);\n }, [collapsed, withTransition]);\n\n return (\n <Panel\n data-slot=\"resizable-panel\"\n panelRef={panelRef}\n elementRef={elementRef}\n className={cn(className)}\n {...props}\n />\n );\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/50 focus-visible:bg-primary/50 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:ring-offset-background focus-visible:outline-hidden data-[resize-handle-state=hover]:bg-primary/50 data-[resize-handle-state=drag]:bg-primary/50 data-[resize-handle-state=active]:bg-primary/50 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-focus-visible:bg-primary/50 group-data-[resize-handle-state=hover]:bg-primary/50 group-data-[resize-handle-state=drag]:bg-primary/50 group-data-[resize-handle-state=active]:bg-primary/50 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","Panel","PanelResizeHandle"],"mappings":";;;;;AAaA;AAGA;AAGA;AACE;AACA;AACF;AAQA;AAA6B;AAC3B;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAwBA;AAAwB;AACtB;AACA;AACA;AACW;AAEb;AACE;AACA;AACA;AACA;AACA;AAGA;AACE;AACA;AAAsB;AAIxB;AAA6B;AAEzB;AAAoC;AAClC;AAGF;AACE;AAEA;AAIA;AACA;AACA;AACE;AAA2B;AACxB;AAEL;AAAA;AACF;AACF;AACA;AAIF;AACE;AAEA;AACA;AACA;AAEA;AAGA;AACE;AACE;AACA;AAEA;AACE;AAEE;AAAkB;AAElB;AAAiD;AACnD;AAEA;AAA+C;AACjD;AAGA;AAAuB;AACzB;AAIF;AAAuB;AAGzB;AACE;AAACC;AAAA;AACW;AACV;AACA;AACuB;AACnB;AAAA;AAGV;AAWA;AAAyB;AACvB;AACA;AAEF;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAGgQ;AAAA;AAI1Q;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neynar/ui",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2",
|
|
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.",
|
|
@@ -77,7 +77,7 @@ function ResizablePanel({
|
|
|
77
77
|
const elementRef = React.useRef<HTMLDivElement>(null);
|
|
78
78
|
const animatedRef = React.useRef(animated);
|
|
79
79
|
const durationRef = React.useRef(duration);
|
|
80
|
-
const
|
|
80
|
+
const prevCollapsedRef = React.useRef<boolean | undefined>(undefined);
|
|
81
81
|
|
|
82
82
|
// Keep the refs in sync with prop changes
|
|
83
83
|
React.useEffect(() => {
|
|
@@ -115,27 +115,36 @@ function ResizablePanel({
|
|
|
115
115
|
React.useEffect(() => {
|
|
116
116
|
if (collapsed === undefined) return;
|
|
117
117
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
118
|
+
const isFirstSync = prevCollapsedRef.current === undefined;
|
|
119
|
+
const hasChanged = collapsed !== prevCollapsedRef.current;
|
|
120
|
+
prevCollapsedRef.current = collapsed;
|
|
121
|
+
|
|
122
|
+
if (!hasChanged && !isFirstSync) return;
|
|
123
|
+
|
|
124
|
+
// Helper to safely call collapse/expand with retry logic
|
|
125
|
+
const syncState = () => {
|
|
126
|
+
try {
|
|
127
|
+
const isCurrentlyCollapsed = panelRef.current?.isCollapsed() ?? false;
|
|
128
|
+
if (collapsed === isCurrentlyCollapsed) return;
|
|
129
|
+
|
|
123
130
|
if (collapsed) {
|
|
124
|
-
|
|
131
|
+
if (isFirstSync) {
|
|
132
|
+
// First sync: no animation
|
|
133
|
+
panelRef.current?.collapse();
|
|
134
|
+
} else {
|
|
135
|
+
withTransition(() => panelRef.current?.collapse());
|
|
136
|
+
}
|
|
137
|
+
} else {
|
|
138
|
+
withTransition(() => panelRef.current?.expand());
|
|
125
139
|
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
if (collapsed) {
|
|
135
|
-
withTransition(() => panelRef.current?.collapse());
|
|
136
|
-
} else {
|
|
137
|
-
withTransition(() => panelRef.current?.expand());
|
|
138
|
-
}
|
|
140
|
+
} catch {
|
|
141
|
+
// Panel not ready yet, retry after a tick
|
|
142
|
+
setTimeout(syncState, 0);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
// Use setTimeout(0) to ensure we're after the panel group's layout effects
|
|
147
|
+
setTimeout(syncState, 0);
|
|
139
148
|
}, [collapsed, withTransition]);
|
|
140
149
|
|
|
141
150
|
return (
|