@sqlrooms/ui 0.15.0 → 0.16.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.
@@ -48,7 +48,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
48
48
  ref?: React.Ref<HTMLDivElement>;
49
49
  } & {
50
50
  asChild?: boolean;
51
- }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
51
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
52
52
  heading?: React.ReactNode;
53
53
  value?: string;
54
54
  forceMount?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,wBAAwB,CAAC;AAOxD,QAAA,MAAM,OAAO;eANW,MAAO,SAAS;;UAqJu6J,MAAO,GAAG;;;;;;;;;;;;;sFAnIv9J,CAAC;AAGH,QAAA,MAAM,aAAa,GAAI,wBAAsB,WAAW,4CAUvD,CAAC;AAEF,QAAA,MAAM,YAAY;UAoHyxQ,MAAO,GAAG;;;;;;0FArGnzQ,CAAC;AAIH,QAAA,MAAM,WAAW;eApDO,MAAO,SAAS;;UAqJ2mN,MAAO,GAAG;;;;;sFAxF3pN,CAAC;AAIH,QAAA,MAAM,YAAY;eAjEM,MAAO,SAAS;;UAqJm3Y,MAAO,GAAG;;;uJA3En6Y,CAAC;AAIH,QAAA,MAAM,YAAY;eA9EM,MAAO,SAAS;;UAqJk8R,MAAO,GAAG;;;;cAAmO,MAAO,SAAS;;;sFA3DruS,CAAC;AAIH,QAAA,MAAM,gBAAgB;UAuDsrT,MAAO,GAAG;;;;;sFA9CptT,CAAC;AAGH,QAAA,MAAM,WAAW;eA1GO,MAAO,SAAS;;UAqJ0nO,MAAO,GAAG;;;;;;;;;sFA/B1qO,CAAC;AAIH,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAC;AAGF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAC"}
1
+ {"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,wBAAwB,CAAC;AAOxD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;sFAYX,CAAC;AAGH,QAAA,MAAM,aAAa,GAAI,wBAAsB,WAAW,4CAUvD,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;0FAehB,CAAC;AAIH,QAAA,MAAM,WAAW;;;;;;;;sFASf,CAAC;AAIH,QAAA,MAAM,YAAY;;;;;;uJAShB,CAAC;AAIH,QAAA,MAAM,YAAY;;;;;;;;;;sFAYhB,CAAC;AAIH,QAAA,MAAM,gBAAgB;;;;;;sFASpB,CAAC;AAGH,QAAA,MAAM,WAAW;;;;;;;;;;;;sFAYf,CAAC;AAIH,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAC;AAGF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAC"}
@@ -13,7 +13,7 @@ export declare class ErrorBoundary extends Component<Props, State> {
13
13
  static getDerivedStateFromError(error: Error): State;
14
14
  componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
15
15
  private handleRetry;
16
- render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
16
+ render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
17
17
  }
18
18
  export {};
19
19
  //# sourceMappingURL=error-boundary.d.ts.map
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import * as LabelPrimitive from '@radix-ui/react-label';
3
3
  import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
4
- declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
4
+ declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
5
5
  declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
6
6
  declare const useFormField: () => {
7
7
  invalid: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,wNAgFJ,MAAO,GAAG,CAAC,OAAO,AAhFC,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,QAAA,MAAM,QAAQ,6GAWZ,CAAC;AAGH,QAAA,MAAM,SAAS,yJAcb,CAAC;AAGH,QAAA,MAAM,WAAW,8JAmBf,CAAC;AAGH,QAAA,MAAM,eAAe,yHAcnB,CAAC;AAGH,QAAA,MAAM,WAAW,yHAqBf,CAAC;AAGH,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}
1
+ {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,QAAA,MAAM,QAAQ,6GAWZ,CAAC;AAGH,QAAA,MAAM,SAAS,yJAcb,CAAC;AAGH,QAAA,MAAM,WAAW,8JAmBf,CAAC;AAGH,QAAA,MAAM,eAAe,yHAcnB,CAAC;AAGH,QAAA,MAAM,WAAW,yHAqBf,CAAC;AAGH,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import * as ResizablePrimitive from 'react-resizable-panels';
2
2
  declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
3
- declare const ResizablePanel: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
3
+ declare const ResizablePanel: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLMapElement | HTMLAnchorElement | HTMLButtonElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSelectElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLinkElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPreElement | HTMLProgressElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
4
4
  className?: string | undefined;
5
5
  collapsedSize?: number | undefined;
6
6
  collapsible?: boolean | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D,QAAA,MAAM,mBAAmB,GAAI,yBAG1B,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,4CAQ5D,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;sBAyBmmE,OAAO;4EAzB/kE,CAAC;AAEhD,QAAA,MAAM,eAAe,GAAI,qCAItB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CAcA,CAAC;AAEF,OAAO,EAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC"}
1
+ {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAI7D,QAAA,MAAM,mBAAmB,GAAI,yBAG1B,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,4CAQ5D,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;4EAA2B,CAAC;AAEhD,QAAA,MAAM,eAAe,GAAI,qCAItB,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CAcA,CAAC;AAEF,OAAO,EAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC"}
@@ -5,6 +5,6 @@ import * as ResizablePrimitive from 'react-resizable-panels';
5
5
  import { cn } from '../lib/utils';
6
6
  const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.PanelGroup, { className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
7
7
  const ResizablePanel = ResizablePrimitive.Panel;
8
- const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.PanelResizeHandle, { className: cn('bg-border focus-visible:ring-ring 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:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border", children: _jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) }));
8
+ const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.PanelResizeHandle, { className: cn('bg-border focus-visible:ring-ring 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:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "bg-border z-20 flex h-4 w-3 items-center justify-center rounded-sm border", children: _jsx(GripVertical, { className: "h-2.5 w-2.5" }) })) }));
9
9
  export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
10
10
  //# sourceMappingURL=resizable.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"resizable.js","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACmD,EAAE,EAAE,CAAC,CAChE,KAAC,kBAAkB,CAAC,UAAU,IAC5B,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AAEF,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAEhD,MAAM,eAAe,GAAG,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EAGT,EAAE,EAAE,CAAC,CACJ,KAAC,kBAAkB,CAAC,iBAAiB,IACnC,SAAS,EAAE,EAAE,CACX,yoBAAyoB,EACzoB,SAAS,CACV,KACG,KAAK,YAER,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,2EAA2E,YACxF,KAAC,YAAY,IAAC,SAAS,EAAC,aAAa,GAAG,GACpC,CACP,GACoC,CACxC,CAAC;AAEF,OAAO,EAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC","sourcesContent":["'use client';\n\nimport {GripVertical} from 'lucide-react';\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\nimport {cn} from '../lib/utils';\n\nconst ResizablePanelGroup = ({\n className,\n ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n <ResizablePrimitive.PanelGroup\n className={cn(\n 'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',\n className,\n )}\n {...props}\n />\n);\n\nconst ResizablePanel = ResizablePrimitive.Panel;\n\nconst ResizableHandle = ({\n withHandle,\n className,\n ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n withHandle?: boolean;\n}) => (\n <ResizablePrimitive.PanelResizeHandle\n className={cn(\n 'bg-border focus-visible:ring-ring 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:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n className,\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border\">\n <GripVertical className=\"h-2.5 w-2.5\" />\n </div>\n )}\n </ResizablePrimitive.PanelResizeHandle>\n);\n\nexport {ResizablePanelGroup, ResizablePanel, ResizableHandle};\n"]}
1
+ {"version":3,"file":"resizable.js","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACmD,EAAE,EAAE,CAAC,CAChE,KAAC,kBAAkB,CAAC,UAAU,IAC5B,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AAEF,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAEhD,MAAM,eAAe,GAAG,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EAGT,EAAE,EAAE,CAAC,CACJ,KAAC,kBAAkB,CAAC,iBAAiB,IACnC,SAAS,EAAE,EAAE,CACX,yoBAAyoB,EACzoB,SAAS,CACV,KACG,KAAK,YAER,UAAU,IAAI,CACb,cAAK,SAAS,EAAC,2EAA2E,YACxF,KAAC,YAAY,IAAC,SAAS,EAAC,aAAa,GAAG,GACpC,CACP,GACoC,CACxC,CAAC;AAEF,OAAO,EAAC,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAC,CAAC","sourcesContent":["'use client';\n\nimport {GripVertical} from 'lucide-react';\nimport * as ResizablePrimitive from 'react-resizable-panels';\n\nimport {cn} from '../lib/utils';\n\nconst ResizablePanelGroup = ({\n className,\n ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n <ResizablePrimitive.PanelGroup\n className={cn(\n 'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',\n className,\n )}\n {...props}\n />\n);\n\nconst ResizablePanel = ResizablePrimitive.Panel;\n\nconst ResizableHandle = ({\n withHandle,\n className,\n ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n withHandle?: boolean;\n}) => (\n <ResizablePrimitive.PanelResizeHandle\n className={cn(\n 'bg-border focus-visible:ring-ring 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:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',\n className,\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border z-20 flex h-4 w-3 items-center justify-center rounded-sm border\">\n <GripVertical className=\"h-2.5 w-2.5\" />\n </div>\n )}\n </ResizablePrimitive.PanelResizeHandle>\n);\n\nexport {ResizablePanelGroup, ResizablePanel, ResizableHandle};\n"]}
@@ -3,7 +3,7 @@ export type TreeNodeData<T> = {
3
3
  key: string;
4
4
  object: T;
5
5
  children?: TreeNodeData<T>[];
6
- isOpen?: boolean;
6
+ isInitialOpen?: boolean;
7
7
  };
8
8
  type TreeProps<T> = {
9
9
  className?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/components/tree.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAO/D;AAED,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;CACzE,CAAC"}
1
+ {"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../src/components/tree.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,IAAI;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAO/D;AAED,KAAK,aAAa,CAAC,CAAC,IAAI;IACtB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC1B,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;CACzE,CAAC"}
@@ -20,10 +20,10 @@ export function Tree(props) {
20
20
  function TreeNode(props) {
21
21
  const { treeData, renderNode } = props;
22
22
  const { children } = treeData;
23
- const [isOpen, setIsOpen] = useState(Boolean(treeData.isOpen));
23
+ const [isOpen, setIsOpen] = useState(Boolean(treeData.isInitialOpen));
24
24
  useEffect(() => {
25
- setIsOpen(Boolean(treeData.isOpen));
26
- }, [treeData.isOpen]);
25
+ setIsOpen(Boolean(treeData.isInitialOpen));
26
+ }, [treeData.isInitialOpen]);
27
27
  if (!children) {
28
28
  return _jsx(_Fragment, { children: renderNode(treeData, isOpen) });
29
29
  }
@@ -1 +1 @@
1
- {"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/components/tree.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC5E,OAAc,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAe9C;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAI,KAAmB;IACzC,MAAM,EAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAChD,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YAC5C,KAAC,QAAQ,IAAI,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAI,GACvD,CACP,CAAC;AACJ,CAAC;AAOD;;GAEG;AACH,SAAS,QAAQ,CAAI,KAAuB;IAC1C,MAAM,EAAC,QAAQ,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IACrC,MAAM,EAAC,QAAQ,EAAC,GAAG,QAAQ,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,4BAAG,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAI,CAAC;IAC7C,CAAC;IACD,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,aAChD,KAAC,kBAAkB,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,kBAC5C,eAAK,SAAS,EAAC,mDAAmD,aAChE,KAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE;gCAC3C,qBAAqB,EAAE,MAAM;6BAC9B,CAAC,EACF,IAAI,EAAC,MAAM,GACX,EACD,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,IACzB,GACa,EACrB,KAAC,kBAAkB,IAAC,SAAS,EAAC,MAAM,YACjC,MAAM;oBACL,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,QAAQ,IAEP,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,UAAU,IAFjB,KAAK,CAAC,GAAG,CAGd,CACH,CAAC;oBACJ,CAAC,CAAC,IAAI,GACW,IACT,CACf,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport {Collapsible, CollapsibleContent} from '@radix-ui/react-collapsible';\nimport React, {useEffect, useState} from 'react';\n\nimport {CollapsibleTrigger} from './collapsible';\nimport {cn} from '../lib/utils';\nimport {ChevronRightIcon} from 'lucide-react';\n\nexport type TreeNodeData<T> = {\n key: string;\n object: T;\n children?: TreeNodeData<T>[];\n isOpen?: boolean;\n};\n\ntype TreeProps<T> = {\n className?: string;\n treeData: TreeNodeData<T>;\n renderNode: TreeNodeProps<T>['renderNode'];\n};\n\n/**\n * Component that renders a generic tree.\n * @param treeData - The tree data.\n * @param renderNode - A function that renders a tree node.\n */\nexport function Tree<T>(props: TreeProps<T>): React.ReactElement {\n const {className, treeData, renderNode} = props;\n return (\n <div className={cn('flex flex-col', className)}>\n <TreeNode<T> treeData={treeData} renderNode={renderNode} />\n </div>\n );\n}\n\ntype TreeNodeProps<T> = {\n treeData: TreeNodeData<T>;\n renderNode: (node: TreeNodeData<T>, isOpen: boolean) => React.ReactNode;\n};\n\n/**\n * Component that renders a tree node.\n */\nfunction TreeNode<T>(props: TreeNodeProps<T>): React.ReactElement | null {\n const {treeData, renderNode} = props;\n const {children} = treeData;\n const [isOpen, setIsOpen] = useState(Boolean(treeData.isOpen));\n useEffect(() => {\n setIsOpen(Boolean(treeData.isOpen));\n }, [treeData.isOpen]);\n if (!children) {\n return <>{renderNode(treeData, isOpen)}</>;\n }\n return (\n <Collapsible open={isOpen} onOpenChange={setIsOpen}>\n <CollapsibleTrigger className=\"w-full\" asChild>\n <div className=\"flex w-full cursor-pointer items-center space-x-1\">\n <ChevronRightIcon\n className={cn('flex-shrink-0 text-gray-500', {\n 'rotate-90 transform': isOpen,\n })}\n size=\"18px\"\n />\n {renderNode(treeData, isOpen)}\n </div>\n </CollapsibleTrigger>\n <CollapsibleContent className=\"pl-4\">\n {isOpen\n ? children.map((child) => (\n <TreeNode<T>\n key={child.key}\n treeData={child}\n renderNode={renderNode}\n />\n ))\n : null}\n </CollapsibleContent>\n </Collapsible>\n );\n}\n"]}
1
+ {"version":3,"file":"tree.js","sourceRoot":"","sources":["../../src/components/tree.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC5E,OAAc,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAe9C;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAI,KAAmB;IACzC,MAAM,EAAC,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IAChD,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YAC5C,KAAC,QAAQ,IAAI,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,GAAI,GACvD,CACP,CAAC;AACJ,CAAC;AAOD;;GAEG;AACH,SAAS,QAAQ,CAAI,KAAuB;IAC1C,MAAM,EAAC,QAAQ,EAAE,UAAU,EAAC,GAAG,KAAK,CAAC;IACrC,MAAM,EAAC,QAAQ,EAAC,GAAG,QAAQ,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,4BAAG,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAI,CAAC;IAC7C,CAAC;IACD,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,aAChD,KAAC,kBAAkB,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,kBAC5C,eAAK,SAAS,EAAC,mDAAmD,aAChE,KAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE;gCAC3C,qBAAqB,EAAE,MAAM;6BAC9B,CAAC,EACF,IAAI,EAAC,MAAM,GACX,EACD,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,IACzB,GACa,EACrB,KAAC,kBAAkB,IAAC,SAAS,EAAC,MAAM,YACjC,MAAM;oBACL,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,QAAQ,IAEP,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,UAAU,IAFjB,KAAK,CAAC,GAAG,CAGd,CACH,CAAC;oBACJ,CAAC,CAAC,IAAI,GACW,IACT,CACf,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport {Collapsible, CollapsibleContent} from '@radix-ui/react-collapsible';\nimport React, {useEffect, useState} from 'react';\n\nimport {CollapsibleTrigger} from './collapsible';\nimport {cn} from '../lib/utils';\nimport {ChevronRightIcon} from 'lucide-react';\n\nexport type TreeNodeData<T> = {\n key: string;\n object: T;\n children?: TreeNodeData<T>[];\n isInitialOpen?: boolean;\n};\n\ntype TreeProps<T> = {\n className?: string;\n treeData: TreeNodeData<T>;\n renderNode: TreeNodeProps<T>['renderNode'];\n};\n\n/**\n * Component that renders a generic tree.\n * @param treeData - The tree data.\n * @param renderNode - A function that renders a tree node.\n */\nexport function Tree<T>(props: TreeProps<T>): React.ReactElement {\n const {className, treeData, renderNode} = props;\n return (\n <div className={cn('flex flex-col', className)}>\n <TreeNode<T> treeData={treeData} renderNode={renderNode} />\n </div>\n );\n}\n\ntype TreeNodeProps<T> = {\n treeData: TreeNodeData<T>;\n renderNode: (node: TreeNodeData<T>, isOpen: boolean) => React.ReactNode;\n};\n\n/**\n * Component that renders a tree node.\n */\nfunction TreeNode<T>(props: TreeNodeProps<T>): React.ReactElement | null {\n const {treeData, renderNode} = props;\n const {children} = treeData;\n const [isOpen, setIsOpen] = useState(Boolean(treeData.isInitialOpen));\n useEffect(() => {\n setIsOpen(Boolean(treeData.isInitialOpen));\n }, [treeData.isInitialOpen]);\n if (!children) {\n return <>{renderNode(treeData, isOpen)}</>;\n }\n return (\n <Collapsible open={isOpen} onOpenChange={setIsOpen}>\n <CollapsibleTrigger className=\"w-full\" asChild>\n <div className=\"flex w-full cursor-pointer items-center space-x-1\">\n <ChevronRightIcon\n className={cn('flex-shrink-0 text-gray-500', {\n 'rotate-90 transform': isOpen,\n })}\n size=\"18px\"\n />\n {renderNode(treeData, isOpen)}\n </div>\n </CollapsibleTrigger>\n <CollapsibleContent className=\"pl-4\">\n {isOpen\n ? children.map((child) => (\n <TreeNode<T>\n key={child.key}\n treeData={child}\n renderNode={renderNode}\n />\n ))\n : null}\n </CollapsibleContent>\n </Collapsible>\n );\n}\n"]}
@@ -20,7 +20,7 @@ export interface UseAspectRatioDimensionsProps {
20
20
  width: number | 'auto';
21
21
  height: number | 'auto';
22
22
  aspectRatio: number;
23
- containerRef: React.RefObject<HTMLElement>;
23
+ containerRef: React.RefObject<HTMLElement | null>;
24
24
  }
25
25
  /**
26
26
  * A hook that calculates element dimensions based on provided values and container size
@@ -1 +1 @@
1
- {"version":3,"file":"useAspectRatioDimensions.d.ts","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACb,EAAE,6BAA6B,GAAG,UAAU,CAoB5C"}
1
+ {"version":3,"file":"useAspectRatioDimensions.d.ts","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACnD;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACb,EAAE,6BAA6B,GAAG,UAAU,CAoB5C"}
@@ -1 +1 @@
1
- {"version":3,"file":"useAspectRatioDimensions.js","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACkB;IAC9B,MAAM,EAAC,KAAK,EAAE,cAAc,GAAG,CAAC,EAAC,GAAG,iBAAiB,CAAC;QACpD,GAAG,EAAE,YAAY;QACjB,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;QACzB,CAAC;QACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,WAAW,EAAC,CAAC;QAC9C,CAAC;QACD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,EAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,MAAM,EAAC,CAAC;QAC/C,CAAC;QACD,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAC,CAAC;IAClD,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import {useMemo} from 'react';\nimport {useResizeObserver} from 'usehooks-ts';\n\n/**\n * Represents the dimensions of an element\n * @interface Dimensions\n * @property {number} width - The width in pixels\n * @property {number} height - The height in pixels\n */\nexport interface Dimensions {\n width: number;\n height: number;\n}\n\n/**\n * Props for the useAspectRatioDimensions hook\n * @interface UseAspectRatioDimensionsProps\n * @property {number | 'auto'} width - The explicitly provided width, or 'auto' for container-based width\n * @property {number | 'auto'} height - The explicitly provided height, or 'auto' for aspect ratio-based height\n * @property {number} aspectRatio - The desired width-to-height ratio when dimensions are auto-calculated\n * @property {React.RefObject<HTMLElement>} containerRef - Reference to the container element\n */\nexport interface UseAspectRatioDimensionsProps {\n width: number | 'auto';\n height: number | 'auto';\n aspectRatio: number;\n containerRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * A hook that calculates element dimensions based on provided values and container size\n *\n * This hook handles various combinations of width/height specifications:\n * - If both width and height are provided, uses those exact dimensions\n * - If only width is provided, calculates height using the aspect ratio\n * - If only height is provided, calculates width using the aspect ratio\n * - If both are 'auto', uses container width and calculates height using the aspect ratio\n *\n * @param {UseAspectRatioDimensionsProps} props - The input parameters for dimension calculation\n * @returns {Dimensions} The calculated width and height\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const {width, height} = useAspectRatioDimensions({\n * width: 'auto',\n * height: 'auto',\n * aspectRatio: 16/9,\n * containerRef\n * });\n * // Returns dimensions based on container size\n * ```\n */\nexport function useAspectRatioDimensions({\n width,\n height,\n aspectRatio,\n containerRef,\n}: UseAspectRatioDimensionsProps): Dimensions {\n const {width: containerWidth = 0} = useResizeObserver({\n ref: containerRef,\n box: 'border-box',\n });\n\n return useMemo(() => {\n if (width !== 'auto' && height !== 'auto') {\n return {width, height};\n }\n if (width !== 'auto') {\n return {width, height: width / aspectRatio};\n }\n if (height !== 'auto') {\n return {width: height * aspectRatio, height};\n }\n const finalWidth = containerWidth;\n const finalHeight = finalWidth / aspectRatio;\n return {width: finalWidth, height: finalHeight};\n }, [containerWidth, aspectRatio, width, height]);\n}\n"]}
1
+ {"version":3,"file":"useAspectRatioDimensions.js","sourceRoot":"","sources":["../../src/hooks/useAspectRatioDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,OAAO,EAAC,MAAM,OAAO,CAAC;AACzC,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACkB;IAC9B,MAAM,EAAC,KAAK,EAAE,cAAc,GAAG,CAAC,EAAC,GAAG,iBAAiB,CAAC;QACpD,GAAG,EAAE,YAAsC;QAC3C,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;QACzB,CAAC;QACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,WAAW,EAAC,CAAC;QAC9C,CAAC;QACD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,EAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,MAAM,EAAC,CAAC;QAC/C,CAAC;QACD,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAC,CAAC;IAClD,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import {RefObject, useMemo} from 'react';\nimport {useResizeObserver} from 'usehooks-ts';\n\n/**\n * Represents the dimensions of an element\n * @interface Dimensions\n * @property {number} width - The width in pixels\n * @property {number} height - The height in pixels\n */\nexport interface Dimensions {\n width: number;\n height: number;\n}\n\n/**\n * Props for the useAspectRatioDimensions hook\n * @interface UseAspectRatioDimensionsProps\n * @property {number | 'auto'} width - The explicitly provided width, or 'auto' for container-based width\n * @property {number | 'auto'} height - The explicitly provided height, or 'auto' for aspect ratio-based height\n * @property {number} aspectRatio - The desired width-to-height ratio when dimensions are auto-calculated\n * @property {React.RefObject<HTMLElement>} containerRef - Reference to the container element\n */\nexport interface UseAspectRatioDimensionsProps {\n width: number | 'auto';\n height: number | 'auto';\n aspectRatio: number;\n containerRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * A hook that calculates element dimensions based on provided values and container size\n *\n * This hook handles various combinations of width/height specifications:\n * - If both width and height are provided, uses those exact dimensions\n * - If only width is provided, calculates height using the aspect ratio\n * - If only height is provided, calculates width using the aspect ratio\n * - If both are 'auto', uses container width and calculates height using the aspect ratio\n *\n * @param {UseAspectRatioDimensionsProps} props - The input parameters for dimension calculation\n * @returns {Dimensions} The calculated width and height\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const {width, height} = useAspectRatioDimensions({\n * width: 'auto',\n * height: 'auto',\n * aspectRatio: 16/9,\n * containerRef\n * });\n * // Returns dimensions based on container size\n * ```\n */\nexport function useAspectRatioDimensions({\n width,\n height,\n aspectRatio,\n containerRef,\n}: UseAspectRatioDimensionsProps): Dimensions {\n const {width: containerWidth = 0} = useResizeObserver({\n ref: containerRef as RefObject<HTMLElement>,\n box: 'border-box',\n });\n\n return useMemo(() => {\n if (width !== 'auto' && height !== 'auto') {\n return {width, height};\n }\n if (width !== 'auto') {\n return {width, height: width / aspectRatio};\n }\n if (height !== 'auto') {\n return {width: height * aspectRatio, height};\n }\n const finalWidth = containerWidth;\n const finalHeight = finalWidth / aspectRatio;\n return {width: finalWidth, height: finalHeight};\n }, [containerWidth, aspectRatio, width, height]);\n}\n"]}
@@ -43,5 +43,5 @@
43
43
  * };
44
44
  * ```
45
45
  */
46
- export declare const useRelativeCoordinates: (containerRef: React.RefObject<HTMLElement>) => (x: number, y: number) => [number, number];
46
+ export declare const useRelativeCoordinates: (containerRef: React.RefObject<HTMLElement | null>) => (x: number, y: number) => [number, number];
47
47
  //# sourceMappingURL=useRelativeCoordinates.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useRelativeCoordinates.d.ts","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,sBAAsB,GACjC,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,SAGpC,MAAM,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAO1C,CAAC"}
1
+ {"version":3,"file":"useRelativeCoordinates.d.ts","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,sBAAsB,GACjC,cAAc,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAG3C,MAAM,KAAK,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAO1C,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"useRelativeCoordinates.js","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,YAA0C,EAC1C,EAAE;IACF,OAAO,WAAW,CAChB,CAAC,CAAS,EAAE,CAAS,EAAoB,EAAE;QACzC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC1D,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useCallback} from 'react';\n\n/**\n * A hook that converts absolute screen coordinates to coordinates relative to a container element.\n *\n * This hook is useful when you need to position elements (like tooltips, popovers, or context menus)\n * relative to a container, especially when dealing with mouse or touch events.\n *\n * @param containerRef - A React ref object pointing to the container HTML element\n * @returns A callback function that converts absolute coordinates to relative ones\n *\n * @example\n * ```typescript\n * const MyComponent = () => {\n * const containerRef = useRef<HTMLDivElement>(null);\n * const getRelativeCoords = useRelativeCoordinates(containerRef);\n *\n * const handleMouseMove = (e: React.MouseEvent) => {\n * // Convert screen coordinates to container-relative coordinates\n * const [relativeX, relativeY] = getRelativeCoords(e.clientX, e.clientY);\n *\n * // Use the coordinates to position a tooltip, etc.\n * setTooltipPosition({ x: relativeX, y: relativeY });\n * };\n *\n * return (\n * <div\n * ref={containerRef}\n * onMouseMove={handleMouseMove}\n * className=\"relative\"\n * >\n * Content\n * </div>\n * );\n * };\n * ```\n *\n * @example\n * ```typescript\n * // Using with touch events\n * const handleTouch = (e: React.TouchEvent) => {\n * const touch = e.touches[0];\n * const [x, y] = getRelativeCoords(touch.clientX, touch.clientY);\n * // Position elements based on touch coordinates\n * };\n * ```\n */\nexport const useRelativeCoordinates = (\n containerRef: React.RefObject<HTMLElement>,\n) => {\n return useCallback(\n (x: number, y: number): [number, number] => {\n if (!containerRef.current) return [0, 0];\n const rect = containerRef.current.getBoundingClientRect();\n return [x - rect.left, y - rect.top];\n },\n [containerRef],\n );\n};\n"]}
1
+ {"version":3,"file":"useRelativeCoordinates.js","sourceRoot":"","sources":["../../src/hooks/useRelativeCoordinates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,YAAiD,EACjD,EAAE;IACF,OAAO,WAAW,CAChB,CAAC,CAAS,EAAE,CAAS,EAAoB,EAAE;QACzC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC1D,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {useCallback} from 'react';\n\n/**\n * A hook that converts absolute screen coordinates to coordinates relative to a container element.\n *\n * This hook is useful when you need to position elements (like tooltips, popovers, or context menus)\n * relative to a container, especially when dealing with mouse or touch events.\n *\n * @param containerRef - A React ref object pointing to the container HTML element\n * @returns A callback function that converts absolute coordinates to relative ones\n *\n * @example\n * ```typescript\n * const MyComponent = () => {\n * const containerRef = useRef<HTMLDivElement>(null);\n * const getRelativeCoords = useRelativeCoordinates(containerRef);\n *\n * const handleMouseMove = (e: React.MouseEvent) => {\n * // Convert screen coordinates to container-relative coordinates\n * const [relativeX, relativeY] = getRelativeCoords(e.clientX, e.clientY);\n *\n * // Use the coordinates to position a tooltip, etc.\n * setTooltipPosition({ x: relativeX, y: relativeY });\n * };\n *\n * return (\n * <div\n * ref={containerRef}\n * onMouseMove={handleMouseMove}\n * className=\"relative\"\n * >\n * Content\n * </div>\n * );\n * };\n * ```\n *\n * @example\n * ```typescript\n * // Using with touch events\n * const handleTouch = (e: React.TouchEvent) => {\n * const touch = e.touches[0];\n * const [x, y] = getRelativeCoords(touch.clientX, touch.clientY);\n * // Position elements based on touch coordinates\n * };\n * ```\n */\nexport const useRelativeCoordinates = (\n containerRef: React.RefObject<HTMLElement | null>,\n) => {\n return useCallback(\n (x: number, y: number): [number, number] => {\n if (!containerRef.current) return [0, 0];\n const rect = containerRef.current.getBoundingClientRect();\n return [x - rect.left, y - rect.top];\n },\n [containerRef],\n );\n};\n"]}
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "@sqlrooms/ui",
3
- "version": "0.15.0",
3
+ "version": "0.16.0",
4
4
  "type": "module",
5
- "private": false,
6
5
  "author": "Ilya Boyandin <ilya@boyandin.me>",
7
6
  "license": "MIT",
8
7
  "repository": {
@@ -27,29 +26,29 @@
27
26
  },
28
27
  "dependencies": {
29
28
  "@hookform/resolvers": "^3.10.0",
30
- "@radix-ui/react-accordion": "^1.2.2",
31
- "@radix-ui/react-aspect-ratio": "^1.1.2",
32
- "@radix-ui/react-checkbox": "^1.1.3",
33
- "@radix-ui/react-collapsible": "^1.1.3",
29
+ "@radix-ui/react-accordion": "^1.2.11",
30
+ "@radix-ui/react-aspect-ratio": "^1.1.7",
31
+ "@radix-ui/react-checkbox": "^1.3.2",
32
+ "@radix-ui/react-collapsible": "^1.1.11",
34
33
  "@radix-ui/react-context-menu": "^2.2.15",
35
- "@radix-ui/react-dialog": "^1.1.6",
36
- "@radix-ui/react-dropdown-menu": "^2.1.4",
37
- "@radix-ui/react-label": "^2.1.1",
34
+ "@radix-ui/react-dialog": "^1.1.14",
35
+ "@radix-ui/react-dropdown-menu": "^2.1.15",
36
+ "@radix-ui/react-label": "^2.1.7",
38
37
  "@radix-ui/react-menubar": "^1.1.15",
39
- "@radix-ui/react-popover": "^1.1.4",
40
- "@radix-ui/react-progress": "^1.1.1",
41
- "@radix-ui/react-radio-group": "^1.2.4",
38
+ "@radix-ui/react-popover": "^1.1.14",
39
+ "@radix-ui/react-progress": "^1.1.7",
40
+ "@radix-ui/react-radio-group": "^1.3.7",
42
41
  "@radix-ui/react-scroll-area": "^1.2.9",
43
- "@radix-ui/react-select": "^2.1.4",
42
+ "@radix-ui/react-select": "^2.2.5",
44
43
  "@radix-ui/react-separator": "^1.1.7",
45
- "@radix-ui/react-slider": "^1.2.3",
46
- "@radix-ui/react-slot": "^1.1.1",
47
- "@radix-ui/react-switch": "^1.1.2",
48
- "@radix-ui/react-tabs": "^1.1.2",
49
- "@radix-ui/react-toast": "^1.2.5",
50
- "@radix-ui/react-toggle": "^1.1.2",
51
- "@radix-ui/react-toggle-group": "^1.1.2",
52
- "@radix-ui/react-tooltip": "^1.1.6",
44
+ "@radix-ui/react-slider": "^1.3.5",
45
+ "@radix-ui/react-slot": "^1.2.3",
46
+ "@radix-ui/react-switch": "^1.2.5",
47
+ "@radix-ui/react-tabs": "^1.1.12",
48
+ "@radix-ui/react-toast": "^1.2.14",
49
+ "@radix-ui/react-toggle": "^1.1.9",
50
+ "@radix-ui/react-toggle-group": "^1.1.10",
51
+ "@radix-ui/react-tooltip": "^1.2.7",
53
52
  "@tailwindcss/typography": "^0.5.16",
54
53
  "class-variance-authority": "^0.7.1",
55
54
  "clsx": "^2.1.1",
@@ -57,16 +56,16 @@
57
56
  "date-fns": "^4.1.0",
58
57
  "lucide-react": "^0.474.0",
59
58
  "react-day-picker": "^8.10.1",
60
- "react-hook-form": "^7.54.2",
61
- "react-resizable-panels": "^2.1.7",
59
+ "react-hook-form": "^7.57.0",
60
+ "react-resizable-panels": "^2.1.9",
62
61
  "tailwind-merge": "^2.6.0",
63
62
  "tailwindcss-animate": "^1.0.7",
64
63
  "usehooks-ts": "^3.1.1",
65
- "zod": "^3.24.1"
64
+ "zod": "^3.25.57"
66
65
  },
67
66
  "peerDependencies": {
68
67
  "autoprefixer": "^10.4.20",
69
68
  "tailwindcss": "^3.4.17"
70
69
  },
71
- "gitHead": "6eb76a841a2ccb40d190720d309db51f1e8a9088"
70
+ "gitHead": "94dfdc97417dd715b9d6886122a3944b789b0b13"
72
71
  }