@health-samurai/react-components 0.0.0-alpha.7 → 0.0.0-alpha.8

package/dist/src/shadcn/components/ui/tree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-border-separator)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"span\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...Object.fromEntries(\n\t\t\t\t\tObject.entries(otherProps).filter(\n\t\t\t\t\t\t([key]) => key !== \"onClick\" && key !== \"onDragStart\",\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t\tonDragStart={(e) => {\n\t\t\t\t\tif ((e.target as HTMLElement).dataset.slot === \"drag-handle\") {\n\t\t\t\t\t\titem.getProps().onDragStart(e);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[selected=true]:bg-bg-secondary in-data-[selected=true]:text-text-primary\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\titem.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"self-start mt-0.5 cursor-pointer\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\titem.isExpanded() ? item.collapse() : item.expand();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25  self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","Object","fromEntries","entries","filter","key","onDragStart","e","target","dataset","slot","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","button","type","onClick","collapse","expand","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-border-separator)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"span\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...Object.fromEntries(\n\t\t\t\t\tObject.entries(otherProps).filter(([key]) => key !== \"onDragStart\"),\n\t\t\t\t)}\n\t\t\t\tonDragStart={(e) => {\n\t\t\t\t\tif ((e.target as HTMLElement).dataset.slot === \"drag-handle\") {\n\t\t\t\t\t\titem.getProps().onDragStart(e);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[focus=true]:bg-bg-secondary in-data-[focus=true]:text-text-primary\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\titem.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"self-start mt-0.5 cursor-pointer\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\titem.isExpanded() ? item.collapse() : item.expand();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25  self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","Object","fromEntries","entries","filter","key","onDragStart","e","target","dataset","slot","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","button","type","onClick","collapse","expand","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.7",
+  "version": "0.0.0-alpha.8",
   "type": "module",
   "files": [
     "dist",

package/src/components/data-table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+	type AccessorKeyColumnDef,
 	type ColumnDef,
 	flexRender,
 	getCoreRowModel,
@@ -117,4 +118,4 @@ export function DataTable<TData, TValue>({
 	);
 }
 
-export type { ColumnDef };
+export type { ColumnDef, AccessorKeyColumnDef };

package/src/components/fhir-structure-view.tsx

@@ -15,16 +15,16 @@ type PackageSpec = {
 };
 
 type Coordinate = {
-	id: string;
-	packageSpec: PackageSpec;
-	"package-spec": PackageSpec;
-	label: string;
+	id?: string;
+	packageSpec?: PackageSpec;
+	"package-spec"?: PackageSpec;
+	label?: string;
 };
 
 type FhirStructure = {
 	type?: string;
-	min?: string;
-	max?: string;
+	min?: string | number;
+	max?: string | number;
 	lastNode?: boolean;
 	isSummary?: boolean;
 	isModifier?: boolean;
@@ -40,7 +40,7 @@ type FhirStructure = {
 	vsCoordinate?: Coordinate;
 };
 
-const FiledIcon = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
+function FiledIcon(item: ItemInstance<TreeViewItem<FhirStructure>>) {
 	const filedType = item.getItemData()?.meta?.type;
 
 	switch (filedType) {
@@ -76,7 +76,7 @@ const FiledIcon = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
 		default:
 			return <CustomIcon.ComplexTypeIcon />;
 	}
-};
+}
 
 const customItemFieldNameClass = cn(
 	"flex",
@@ -89,7 +89,7 @@ const customItemFieldNameClass = cn(
 	"in-data-[folder=true]:min-w-[calc(260px-var(--tree-padding))]",
 );
 
-const customItemView = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
+function customItemView(item: ItemInstance<TreeViewItem<FhirStructure>>) {
 	const fieldName = item.getItemData()?.name;
 	const cardinalityMin = item.getItemData()?.meta?.min;
 	const cardinalityMax = item.getItemData()?.meta?.max;
@@ -192,13 +192,13 @@ const customItemView = (item: ItemInstance<TreeViewItem<FhirStructure>>) => {
 			</div>
 		</div>
 	);
-};
+}
 
-const FhirStructureView = ({
+function FhirStructureView({
 	tree,
 }: {
 	tree: Record<string, TreeViewItem<FhirStructure>>;
-}) => {
+}) {
 	const expandedItemIds = React.useMemo(() => {
 		return Object.keys(tree ?? {});
 	}, [tree]);
@@ -213,6 +213,8 @@ const FhirStructureView = ({
 				<div className="min-w-[200px] w-[200px]">Description</div>
 			</div>
 			<TreeView
+				focusedItem={null}
+				onFocusedItemChange={() => {}}
 				hideChevron={true}
 				horizontalLines={true}
 				disableHover={true}
@@ -220,10 +222,10 @@ const FhirStructureView = ({
 				rootItemId="root"
 				items={tree}
 				customItemView={customItemView}
-				expandedItemIds={expandedItemIds}
+				defaultExpandedItems={expandedItemIds}
 			/>
 		</div>
 	);
-};
+}
 
 export { FhirStructureView, type FhirStructure };

package/src/components/segment-control.tsx

@@ -34,7 +34,7 @@ const segmentControlItemClass = cn(
 	"select-none",
 );
 
-const SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {
+function SegmentControlItem({ children, value }: SegmentControlItemProps) {
 	const { defaultValue, onValueChange, name } = useContext(
 		SegmentControlContext,
 	);
@@ -55,14 +55,14 @@ const SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {
 			</label>
 		</div>
 	);
-};
+}
 
-const SegmentControl = ({
+function SegmentControl({
 	children,
 	defaultValue,
 	onValueChange,
 	name,
-}: SegmentControlProps & { children?: ReactNode }) => {
+}: SegmentControlProps & { children?: ReactNode }) {
 	const contextValue: SegmentControlContextType = {
 		...(defaultValue !== undefined && { defaultValue }),
 		...(onValueChange !== undefined && { onValueChange }),
@@ -76,6 +76,6 @@ const SegmentControl = ({
 			</div>
 		</SegmentControlContext.Provider>
 	);
-};
+}
 
 export { SegmentControl, SegmentControlItem };

package/src/components/split-button.tsx

@@ -10,8 +10,8 @@ const splitButtonStyles = cn(
 	"*:data-[slot=dropdown-menu-trigger]:border-l-0",
 );
 
-const SplitButton = ({ children }: { children: React.ReactNode }) => {
+function SplitButton({ children }: { children: React.ReactNode }) {
 	return <div className={splitButtonStyles}>{children}</div>;
-};
+}
 
 export { SplitButton };

package/src/components/tree-view.stories.tsx

@@ -160,14 +160,14 @@ export const Default: Story = {
 	args: {
 		items: items,
 		rootItemId: "root",
-		selectedItemId: "request9",
-		expandedItemIds: ["collection3"],
-		onSelectItem: (a) => action("onSelectItem")(a),
+		focusedItem: "request9",
+		defaultExpandedItems: ["collection3"],
+		onFocusedItemChange: (a) => action("onSelectItem")(a),
 	},
 	render: (args) => <TreeView {...args} />,
 };
 
-const customItemView = (item: ItemInstance<TreeViewItem<ItemMeta>>) => {
+function customItemView(item: ItemInstance<TreeViewItem<ItemMeta>>) {
 	const isRootLevel = item.getItemMeta().level === 0;
 	const hasChildren = item.getItemData()?.children !== undefined;
 	const requestMethhod = item.getItemData()?.meta?.method;
@@ -250,15 +250,15 @@ const customItemView = (item: ItemInstance<TreeViewItem<ItemMeta>>) => {
 			</div>
 		</div>
 	);
-};
+}
 
 export const CustomItemView: Story = {
 	args: {
 		items: items,
 		rootItemId: "root",
-		selectedItemId: "request11",
-		expandedItemIds: ["collection3", "collection4"],
-		onSelectItem: (a) => action("onSelectItem")(a.getItemData()?.name),
+		focusedItem: "request11",
+		defaultExpandedItems: ["collection3", "collection4"],
+		onFocusedItemChange: (a) => action("onSelectItem")(a ? items[a]?.name : a),
 		customItemView: customItemView,
 	},
 	render: (args) => <TreeView {...args} />,

package/src/components/tree-view.tsx

@@ -3,7 +3,7 @@ import type {
 	ItemInstance,
 	TreeConfig,
 	TreeInstance,
-	TreeState,
+	Updater,
 } from "@headless-tree/core";
 import {
 	createOnDropHandler,
@@ -14,7 +14,7 @@ import {
 	syncDataLoaderFeature,
 } from "@headless-tree/core";
 import { useTree } from "@headless-tree/react";
-import React, { useEffect } from "react";
+import React from "react";
 import { Tree, TreeItem, TreeItemLabel } from "#shadcn/components/ui/tree";
 import { cn } from "#shadcn/lib/utils.js";
 
@@ -45,45 +45,46 @@ interface TreeViewItem<T> {
 
 const customClickBehavior: FeatureImplementation = {
 	itemInstance: {
-		getProps: ({ tree, item, prev }) => ({
-			...prev?.(),
-			onClick: () => {
-				item.primaryAction();
-				if (item.isExpanded()) {
-					item.collapse();
-				} else {
-					item.expand();
-				}
-				if (!item.isFolder()) {
-					tree.setSelectedItems([item.getItemMeta().itemId]);
-				}
-			},
-		}),
+		getProps: ({ item, prev }) => {
+			return {
+				...prev?.(),
+				onClick: () => {
+					item.setFocused();
+					item.primaryAction();
+				},
+			};
+		},
 	},
 };
 
 const indent = 22;
 
-function TreeView<T>({
-	rootItemId,
-	items,
-	selectedItemId,
-	expandedItemIds,
-	onSelectItem,
-	customItemView,
-	onRename,
-	disableHover,
-	zebra,
-	horizontalLines,
-	hideChevron,
-	itemLabelClassFn,
-	canReorder,
-	onDropFn,
-}: {
+type ExpansionPropsUncontrolled = {
+	defaultExpandedItems?: string[];
+	expandedItems?: never;
+	onExpandedItemsChange?: never;
+};
+type ExpansionPropsControlled = {
+	defaultExpandedItems?: never;
+	expandedItems: string[];
+	onExpandedItemsChange: (items: string[]) => void;
+};
+type ExpansionProps = ExpansionPropsUncontrolled | ExpansionPropsControlled;
+
+type FocusPropsUncontrolled = {
+	defaultFocusedItem?: string;
+	focusedItem?: never;
+	onFocusedItemChange?: never;
+};
+type FocusPropsControlled = {
+	defaultFocusedItem?: never;
+	focusedItem: string | null;
+	onFocusedItemChange: (item: string | null) => void;
+};
+type FocusProps = FocusPropsUncontrolled | FocusPropsControlled;
+
+type TreeViewProps<T> = {
 	rootItemId: string;
-	selectedItemId?: string;
-	expandedItemIds?: string[];
-	onSelectItem?: (item: ItemInstance<TreeViewItem<T>>) => void;
 	items: Record<string, TreeViewItem<T>>;
 	customItemView?: (
 		item: ItemInstance<TreeViewItem<T>>,
@@ -103,18 +104,68 @@ function TreeView<T>({
 		item: ItemInstance<TreeViewItem<T>>,
 		newChildren: string[],
 	) => void;
-}) {
+} & ExpansionProps &
+	FocusProps;
+
+function TreeView<T>({
+	rootItemId,
+	items,
+	defaultFocusedItem,
+	focusedItem,
+	onFocusedItemChange,
+	defaultExpandedItems,
+	expandedItems,
+	onExpandedItemsChange,
+	customItemView,
+	onRename,
+	disableHover,
+	zebra,
+	horizontalLines,
+	hideChevron,
+	itemLabelClassFn,
+	canReorder,
+	onDropFn,
+}: TreeViewProps<T>) {
 	"use no memo";
-	const [state, setState] = React.useState<Partial<TreeState<TreeViewItem<T>>>>(
-		{},
-	);
+
+	const initialExpandedItems = defaultExpandedItems ?? expandedItems;
+	const initialFocusedItem = defaultFocusedItem ?? focusedItem;
+
+	const setExpandedItems =
+		expandedItems !== undefined && onExpandedItemsChange !== undefined
+			? (updater: Updater<string[]>) => {
+					const newVal =
+						updater instanceof Function ? updater(expandedItems) : updater;
+
+					onExpandedItemsChange(newVal);
+				}
+			: undefined;
+
+	const setFocusedItem =
+		focusedItem !== undefined && onFocusedItemChange !== undefined
+			? (updater: Updater<string | null>) => {
+					const newVal =
+						updater instanceof Function ? updater(focusedItem) : updater;
+
+					onFocusedItemChange(newVal);
+				}
+			: undefined;
+
 	const treeConfig: TreeConfig<TreeViewItem<T>> = {
 		initialState: {
-			selectedItems: selectedItemId ? [selectedItemId] : [],
-			expandedItems: expandedItemIds ?? [],
+			...(initialExpandedItems !== undefined
+				? { expandedItems: initialExpandedItems }
+				: {}),
+			...(initialFocusedItem !== undefined
+				? { focusedItem: initialFocusedItem }
+				: {}),
 		},
-		state,
-		setState,
+		state: {
+			...(expandedItems !== undefined ? { expandedItems } : {}),
+			...(focusedItem !== undefined ? { focusedItem } : {}),
+		},
+		...(setExpandedItems !== undefined ? { setExpandedItems } : {}),
+		...(setFocusedItem !== undefined ? { setFocusedItem } : {}),
 		indent,
 		rootItemId: rootItemId,
 		isItemFolder: (item: ItemInstance<TreeViewItem<T>>) =>
@@ -130,9 +181,9 @@ function TreeView<T>({
 			syncDataLoaderFeature,
 			hotkeysCoreFeature,
 			selectionFeature,
-			customClickBehavior,
 			renamingFeature,
 			dragAndDropFeature,
+			customClickBehavior,
 		],
 		canReorder: canReorder ?? false,
 		onDrop: createOnDropHandler((item, newChildren) => {
@@ -142,28 +193,11 @@ function TreeView<T>({
 
 	const tree = useTree<TreeViewItem<T>>(treeConfig);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: We must have explicit sync here
-	useEffect(() => {
+	const [prevItems, setPrevItems] = React.useState<null | typeof items>(null);
+	if (prevItems !== items) {
 		tree.rebuildTree();
-	}, [items]);
-
-	useEffect(() => {
-		setState((currentState) => {
-			return {
-				...currentState,
-				selectedItems: selectedItemId ? [selectedItemId] : [],
-			};
-		});
-	}, [selectedItemId]);
-
-	useEffect(() => {
-		setState((currentState) => {
-			return {
-				...currentState,
-				expandedItems: expandedItemIds ?? [],
-			};
-		});
-	}, [expandedItemIds]);
+		setPrevItems(items);
+	}
 
 	return (
 		<Tree tree={tree} indent={indent}>
@@ -183,7 +217,7 @@ function TreeView<T>({
 							hideChevron={hideChevron ?? false}
 							disableHover={disableHover ?? false}
 							className={cn(treeItemLabelStyle, itemLabelClassFn?.(item))}
-							onClick={() => onSelectItem?.(item)}
+							// onClick={() => onSelectItem?.(item)}
 							horizontalLines={horizontalLines ?? false}
 						>
 							{customItemView

package/src/icons.tsx

@@ -1,4 +1,4 @@
-export const PlayIcon = () => {
+export function PlayIcon() {
 	return (
 		<svg
 			width="16"
@@ -16,9 +16,9 @@ export const PlayIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const PinIcon = () => {
+export function PinIcon() {
 	return (
 		<svg
 			width="16"
@@ -42,9 +42,9 @@ export const PinIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const ResourceIcon = () => {
+export function ResourceIcon() {
 	return (
 		<svg
 			width="16"
@@ -92,9 +92,9 @@ export const ResourceIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const BackoneElementIcon = () => {
+export function BackoneElementIcon() {
 	return (
 		<svg
 			width="16"
@@ -114,9 +114,9 @@ export const BackoneElementIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const TypCodeIcon = () => {
+export function TypCodeIcon() {
 	return (
 		<svg
 			width="16"
@@ -164,9 +164,9 @@ export const TypCodeIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const ReferenceIcon = () => {
+export function ReferenceIcon() {
 	return (
 		<svg
 			width="16"
@@ -200,9 +200,9 @@ export const ReferenceIcon = () => {
 			/>
 		</svg>
 	);
-};
+}
 
-export const ComplexTypeIcon = () => {
+export function ComplexTypeIcon() {
 	return (
 		<svg
 			width="16"
@@ -248,9 +248,9 @@ export const ComplexTypeIcon = () => {
 			</defs>
 		</svg>
 	);
-};
+}
 
-export const UnionIcon = () => {
+export function UnionIcon() {
 	return (
 		<svg
 			width="16"
@@ -284,4 +284,4 @@ export const UnionIcon = () => {
 			</g>
 		</svg>
 	);
-};
+}

package/src/index.tsx

@@ -1,5 +1,5 @@
 // Shadcn Components
-export { toast } from "sonner";
+export { type ExternalToast, toast } from "sonner";
 export * from "./components/button-dropdown";
 export * from "./components/code-editor";
 export * from "./components/copy-icon";

package/src/shadcn/components/ui/chart.tsx

@@ -68,7 +68,7 @@ function ChartContainer({
 	);
 }
 
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
 	const colorConfig = Object.entries(config).filter(
 		([, config]) => config.theme || config.color,
 	);
@@ -100,7 +100,7 @@ ${colorConfig
 			}}
 		/>
 	);
-};
+}
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 

package/src/shadcn/components/ui/combobox.tsx

@@ -56,17 +56,14 @@ export function Combobox({
 
 	const selectedOption = options.find((option) => option.value === value);
 
-	// Reset search when closing and auto-focus when opening
-	React.useEffect(() => {
-		if (!open) {
+	const changeOpen = (newOpen: boolean) => {
+		if (!newOpen) {
 			setSearchValue("");
 		} else {
-			// Auto-focus on search input when opening
-			setTimeout(() => {
-				inputRef.current?.focus();
-			}, 0);
+			inputRef.current?.focus();
 		}
-	}, [open]);
+		setOpen(newOpen);
+	};
 
 	return (
 		<Select
@@ -74,7 +71,7 @@ export function Combobox({
 			{...(onValueChange && { onValueChange })}
 			disabled={disabled}
 			open={open}
-			onOpenChange={setOpen}
+			onOpenChange={changeOpen}
 		>
 			<SelectTrigger className={className}>
 				<SelectValue placeholder={placeholder}>
@@ -99,7 +96,7 @@ export function Combobox({
 								data-state={value === option.value ? "checked" : undefined}
 								onSelect={(currentValue) => {
 									onValueChange?.(currentValue);
-									setOpen(false);
+									changeOpen(false);
 								}}
 							>
 								{option.label}
@@ -176,19 +173,17 @@ export function MultiCombobox({
 	};
 
 	// Reset search when closing and auto-focus when opening
-	React.useEffect(() => {
-		if (!open) {
+	const changeOpen = (newOpen: boolean) => {
+		if (!newOpen) {
 			setSearchValue("");
 		} else {
-			// Auto-focus on search input when opening
-			setTimeout(() => {
-				inputRef.current?.focus();
-			}, 0);
+			inputRef.current?.focus();
 		}
-	}, [open]);
+		setOpen(newOpen);
+	};
 
 	return (
-		<Select open={open} onOpenChange={setOpen}>
+		<Select open={open} onOpenChange={changeOpen}>
 			<SelectTrigger
 				className={`${className} ${displayText ? "!text-text-primary" : undefined}`}
 				disabled={disabled}