@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.92.1 → 0.6.0-beta.94.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/ui/input-group.cjs +1 -1
  2. package/dist/components/ui/input-group.cjs.map +1 -1
  3. package/dist/components/ui/input-group.js +16 -16
  4. package/dist/components/ui/input-group.js.map +1 -1
  5. package/dist/components/ui/resizable.cjs +1 -1
  6. package/dist/components/ui/resizable.cjs.map +1 -1
  7. package/dist/components/ui/resizable.js +27 -15
  8. package/dist/components/ui/resizable.js.map +1 -1
  9. package/dist/index.css +1 -1
  10. package/dist/index.d.ts +18 -0
  11. package/dist/index.tailwind.css +1 -1
  12. package/package.json +1 -1
package/dist/components/ui/input-group.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("class-variance-authority"),u=require("./button.cjs"),p=require("./input.cjs"),d=require("./textarea.cjs"),e=require("../../lib/utils.cjs");function l({className:n,...t}){return r.jsx("div",{"data-slot":"input-group",role:"group",className:e.cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",n),...t})}const c=o.cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",{variants:{align:{"inline-start":"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]","inline-end":"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]","block-start":"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2","block-end":"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"}},defaultVariants:{align:"inline-start"}});function g({className:n,align:t="inline-start",...s}){return r.jsx("div",{role:"group","data-slot":"input-group-addon","data-align":t,className:e.cn(c({align:t}),n),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())},onClick:a=>{a.target.closest("button")||a.currentTarget.parentElement?.querySelector("input")?.focus()},...s})}const b=o.cva("flex items-center gap-2 text-sm shadow-none",{variants:{size:{xs:"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",sm:"","icon-xs":"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0","icon-sm":"size-8 p-0 has-[>svg]:p-0"}},defaultVariants:{size:"xs"}});function f({className:n,type:t="button",variant:s="ghost",size:a="xs",...i}){return r.jsx(u.Button,{type:t,"data-size":a,variant:s,className:e.cn(b({size:a}),n),...i})}function h({className:n,...t}){return r.jsx("span",{className:e.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",n),...t})}function x({className:n,...t}){return r.jsx(p.Input,{"data-slot":"input-group-control",className:e.cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",n),...t})}function m({className:n,...t}){return r.jsx(d.Textarea,{"data-slot":"input-group-control",className:e.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",n),...t})}exports.InputGroup=l;exports.InputGroupAddon=g;exports.InputGroupButton=f;exports.InputGroupInput=x;exports.InputGroupText=h;exports.InputGroupTextarea=m;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("class-variance-authority"),u=require("./button.cjs"),p=require("./input.cjs"),l=require("./textarea.cjs"),e=require("../../lib/utils.cjs");function d({className:n,...t}){return r.jsx("div",{"data-slot":"input-group",role:"group",className:e.cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:bg-input/50 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",n),...t})}const c=s.cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",{variants:{align:{"inline-start":"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]","inline-end":"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]","block-start":"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2","block-end":"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"}},defaultVariants:{align:"inline-start"}});function g({className:n,align:t="inline-start",...o}){return r.jsx("div",{role:"group","data-slot":"input-group-addon","data-align":t,className:e.cn(c({align:t}),n),onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())},onClick:a=>{a.target.closest("button")||a.currentTarget.parentElement?.querySelector("input")?.focus()},...o})}const b=s.cva("flex items-center gap-2 text-sm shadow-none",{variants:{size:{xs:"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",sm:"","icon-xs":"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0","icon-sm":"size-8 p-0 has-[>svg]:p-0"}},defaultVariants:{size:"xs"}});function f({className:n,type:t="button",variant:o="ghost",size:a="xs",...i}){return r.jsx(u.Button,{type:t,"data-size":a,variant:o,className:e.cn(b({size:a}),n),...i})}function h({className:n,...t}){return r.jsx("span",{className:e.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",n),...t})}function x({className:n,...t}){return r.jsx(p.Input,{"data-slot":"input-group-control",className:e.cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",n),...t})}function m({className:n,...t}){return r.jsx(l.Textarea,{"data-slot":"input-group-control",className:e.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",n),...t})}exports.InputGroup=d;exports.InputGroupAddon=g;exports.InputGroupButton=f;exports.InputGroupInput=x;exports.InputGroupText=h;exports.InputGroupTextarea=m;
2
2
  //# sourceMappingURL=input-group.cjs.map
package/dist/components/ui/input-group.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input-group.cjs","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n \"inline-end\":\n \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n e.currentTarget.click()\n }\n }}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n <Input\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n <Textarea\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n"],"names":["InputGroup","className","props","jsx","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":"2QAQA,SAASA,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAsC,CACxE,OACEC,EAAAA,IAAC,MAAA,CACC,YAAU,cACV,KAAK,QACL,UAAWC,EAAAA,GACT,46BACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,MAAMG,EAA0BC,EAAAA,IAC9B,0PACA,CACE,SAAU,CACR,MAAO,CACL,eACE,uEACF,aACE,sEACF,cACE,oGACF,YACE,kGAAA,CACJ,EAEF,gBAAiB,CACf,MAAO,cAAA,CACT,CAEJ,EAEA,SAASC,EAAgB,CACvB,UAAAN,EACA,MAAAO,EAAQ,eACR,GAAGN,CACL,EAA+E,CAC7E,OACEC,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,YAAU,oBACV,aAAYK,EACZ,UAAWJ,EAAAA,GAAGC,EAAwB,CAAE,MAAAG,CAAA,CAAO,EAAGP,CAAS,EAC3D,UAAYQ,GAAM,EACZA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAA,EACFA,EAAE,cAAc,MAAA,EAEpB,EACA,QAAUA,GAAM,CACTA,EAAE,OAAuB,QAAQ,QAAQ,GAG9CA,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA,CACzD,EACC,GAAGP,CAAA,CAAA,CAGV,CAEA,MAAMQ,EAA2BJ,EAAAA,IAC/B,8CACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UACE,8DACF,UAAW,2BAAA,CACb,EAEF,gBAAiB,CACf,KAAM,IAAA,CACR,CAEJ,EAEA,SAASK,EAAiB,CACxB,UAAAV,EACA,KAAAW,EAAO,SACP,QAAAC,EAAU,QACV,KAAAC,EAAO,KACP,GAAGZ,CACL,EACiD,CAC/C,OACEC,EAAAA,IAACY,EAAAA,OAAA,CACC,KAAAH,EACA,YAAWE,EACX,QAAAD,EACA,UAAWT,EAAAA,GAAGM,EAAyB,CAAE,KAAAI,CAAA,CAAM,EAAGb,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASc,EAAe,CAAE,UAAAf,EAAW,GAAGC,GAAuC,CAC7E,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,GACT,yHACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASe,EAAgB,CACvB,UAAAhB,EACA,GAAGC,CACL,EAAkC,CAChC,OACEC,EAAAA,IAACe,EAAAA,MAAA,CACC,YAAU,sBACV,UAAWd,EAAAA,GACT,6MACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASiB,EAAmB,CAC1B,UAAAlB,EACA,GAAGC,CACL,EAAqC,CACnC,OACEC,EAAAA,IAACiB,EAAAA,SAAA,CACC,YAAU,sBACV,UAAWhB,EAAAA,GACT,8NACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV"}
1
+ {"version":3,"file":"input-group.cjs","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:bg-input/50 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n \"inline-end\":\n \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n e.currentTarget.click()\n }\n }}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n <Input\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n <Textarea\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n"],"names":["InputGroup","className","props","jsx","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":"2QAQA,SAASA,EAAW,CAAE,UAAAC,EAAW,GAAGC,GAAsC,CACxE,OACEC,EAAAA,IAAC,MAAA,CACC,YAAU,cACV,KAAK,QACL,UAAWC,EAAAA,GACT,khCACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,MAAMG,EAA0BC,EAAAA,IAC9B,0PACA,CACE,SAAU,CACR,MAAO,CACL,eACE,uEACF,aACE,sEACF,cACE,oGACF,YACE,kGAAA,CACJ,EAEF,gBAAiB,CACf,MAAO,cAAA,CACT,CAEJ,EAEA,SAASC,EAAgB,CACvB,UAAAN,EACA,MAAAO,EAAQ,eACR,GAAGN,CACL,EAA+E,CAC7E,OACEC,EAAAA,IAAC,MAAA,CACC,KAAK,QACL,YAAU,oBACV,aAAYK,EACZ,UAAWJ,EAAAA,GAAGC,EAAwB,CAAE,MAAAG,CAAA,CAAO,EAAGP,CAAS,EAC3D,UAAYQ,GAAM,EACZA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAA,EACFA,EAAE,cAAc,MAAA,EAEpB,EACA,QAAUA,GAAM,CACTA,EAAE,OAAuB,QAAQ,QAAQ,GAG9CA,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA,CACzD,EACC,GAAGP,CAAA,CAAA,CAGV,CAEA,MAAMQ,EAA2BJ,EAAAA,IAC/B,8CACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,4FACJ,GAAI,GACJ,UACE,8DACF,UAAW,2BAAA,CACb,EAEF,gBAAiB,CACf,KAAM,IAAA,CACR,CAEJ,EAEA,SAASK,EAAiB,CACxB,UAAAV,EACA,KAAAW,EAAO,SACP,QAAAC,EAAU,QACV,KAAAC,EAAO,KACP,GAAGZ,CACL,EACiD,CAC/C,OACEC,EAAAA,IAACY,EAAAA,OAAA,CACC,KAAAH,EACA,YAAWE,EACX,QAAAD,EACA,UAAWT,EAAAA,GAAGM,EAAyB,CAAE,KAAAI,CAAA,CAAM,EAAGb,CAAS,EAC1D,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASc,EAAe,CAAE,UAAAf,EAAW,GAAGC,GAAuC,CAC7E,OACEC,EAAAA,IAAC,OAAA,CACC,UAAWC,EAAAA,GACT,yHACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASe,EAAgB,CACvB,UAAAhB,EACA,GAAGC,CACL,EAAkC,CAChC,OACEC,EAAAA,IAACe,EAAAA,MAAA,CACC,YAAU,sBACV,UAAWd,EAAAA,GACT,6MACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASiB,EAAmB,CAC1B,UAAAlB,EACA,GAAGC,CACL,EAAqC,CACnC,OACEC,EAAAA,IAACiB,EAAAA,SAAA,CACC,YAAU,sBACV,UAAWhB,EAAAA,GACT,8NACAH,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV"}
package/dist/components/ui/input-group.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { jsx as r } from "react/jsx-runtime";
2
2
  import { cva as s } from "class-variance-authority";
3
3
  import { Button as u } from "./button.js";
4
- import { Input as d } from "./input.js";
5
- import { Textarea as l } from "./textarea.js";
6
- import { cn as e } from "../../lib/utils.js";
4
+ import { Input as l } from "./input.js";
5
+ import { Textarea as d } from "./textarea.js";
6
+ import { cn as o } from "../../lib/utils.js";
7
7
  function v({ className: a, ...t }) {
8
8
  return /* @__PURE__ */ r(
9
9
  "div",
10
10
  {
11
11
  "data-slot": "input-group",
12
12
  role: "group",
13
- className: e(
14
- "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
13
+ className: o(
14
+ "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:bg-input/50 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
15
15
  a
16
16
  ),
17
17
  ...t
@@ -37,7 +37,7 @@ const p = s(
37
37
  function k({
38
38
  className: a,
39
39
  align: t = "inline-start",
40
- ...o
40
+ ...e
41
41
  }) {
42
42
  return /* @__PURE__ */ r(
43
43
  "div",
@@ -45,14 +45,14 @@ function k({
45
45
  role: "group",
46
46
  "data-slot": "input-group-addon",
47
47
  "data-align": t,
48
- className: e(p({ align: t }), a),
48
+ className: o(p({ align: t }), a),
49
49
  onKeyDown: (n) => {
50
50
  (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click());
51
51
  },
52
52
  onClick: (n) => {
53
53
  n.target.closest("button") || n.currentTarget.parentElement?.querySelector("input")?.focus();
54
54
  },
55
- ...o
55
+ ...e
56
56
  }
57
57
  );
58
58
  }
@@ -75,7 +75,7 @@ const c = s(
75
75
  function w({
76
76
  className: a,
77
77
  type: t = "button",
78
- variant: o = "ghost",
78
+ variant: e = "ghost",
79
79
  size: n = "xs",
80
80
  ...i
81
81
  }) {
@@ -84,8 +84,8 @@ function w({
84
84
  {
85
85
  type: t,
86
86
  "data-size": n,
87
- variant: o,
88
- className: e(c({ size: n }), a),
87
+ variant: e,
88
+ className: o(c({ size: n }), a),
89
89
  ...i
90
90
  }
91
91
  );
@@ -94,7 +94,7 @@ function y({ className: a, ...t }) {
94
94
  return /* @__PURE__ */ r(
95
95
  "span",
96
96
  {
97
- className: e(
97
+ className: o(
98
98
  "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
99
99
  a
100
100
  ),
@@ -107,10 +107,10 @@ function z({
107
107
  ...t
108
108
  }) {
109
109
  return /* @__PURE__ */ r(
110
- d,
110
+ l,
111
111
  {
112
112
  "data-slot": "input-group-control",
113
- className: e(
113
+ className: o(
114
114
  "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
115
115
  a
116
116
  ),
@@ -123,10 +123,10 @@ function G({
123
123
  ...t
124
124
  }) {
125
125
  return /* @__PURE__ */ r(
126
- l,
126
+ d,
127
127
  {
128
128
  "data-slot": "input-group-control",
129
- className: e(
129
+ className: o(
130
130
  "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
131
131
  a
132
132
  ),
package/dist/components/ui/input-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n \"inline-end\":\n \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n e.currentTarget.click()\n }\n }}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n <Input\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n <Textarea\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n"],"names":["InputGroup","className","props","jsx","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":"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"}
1
+ {"version":3,"file":"input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:bg-input/50 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:shadow-focus has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:shadow-focus has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n className\n )}\n {...props}\n />\n )\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n \"inline-end\":\n \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n \"block-start\":\n \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n \"block-end\":\n \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n }\n)\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n e.currentTarget.click()\n }\n }}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n }}\n {...props}\n />\n )\n}\n\nconst inputGroupButtonVariants = cva(\n \"flex items-center gap-2 text-sm shadow-none\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n }\n)\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n VariantProps<typeof inputGroupButtonVariants>) {\n return (\n <Button\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<\"input\">) {\n return (\n <Input\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<\"textarea\">) {\n return (\n <Textarea\n data-slot=\"input-group-control\"\n className={cn(\n \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 focus-visible:shadow-none disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n}\n"],"names":["InputGroup","className","props","jsx","cn","inputGroupAddonVariants","cva","InputGroupAddon","align","e","inputGroupButtonVariants","InputGroupButton","type","variant","size","Button","InputGroupText","InputGroupInput","Input","InputGroupTextarea","Textarea"],"mappings":"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"}
package/dist/components/ui/resizable.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("react-resizable-panels"),o=require("../../lib/utils.cjs");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const i=s(l);function u({className:e,...t}){return r.jsx(i.Group,{"data-slot":"resizable-panel-group",className:o.cn("flex h-full w-full aria-[orientation=vertical]:flex-col",e),...t})}function f({...e}){return r.jsx(i.Panel,{"data-slot":"resizable-panel",...e})}function c({withHandle:e,className:t,...a}){return r.jsx(i.Separator,{"data-slot":"resizable-handle",className:o.cn("relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring focus-visible:outline-hidden 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",t),...a,children:e&&r.jsx("div",{className:"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border"})})}exports.ResizableHandle=c;exports.ResizablePanel=f;exports.ResizablePanelGroup=u;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("react-resizable-panels"),o=require("../../lib/utils.cjs");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const i=s(l);function f({className:e,...t}){return r.jsx(i.Group,{"data-slot":"resizable-panel-group",className:o.cn("flex h-full w-full aria-[orientation=vertical]:flex-col",e),...t})}function u({...e}){return r.jsx(i.Panel,{"data-slot":"resizable-panel",...e})}function c({withHandle:e,className:t,...a}){return r.jsx(i.Separator,{"data-slot":"resizable-handle","aria-label":"Resize",className:o.cn("relative flex shrink-0 items-center justify-center bg-transparent transition-colors ring-offset-background focus-visible:outline-hidden","w-px aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full","after:absolute after:w-3 after:inset-y-0 after:left-1/2 after:-translate-x-1/2","aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-3 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2","hover:bg-border active:bg-border focus-visible:bg-ring","hover:[&>div]:bg-border active:[&>div]:bg-border focus-visible:[&>div]:bg-ring","[&[aria-orientation=horizontal]>div]:rotate-90",t),...a,children:e&&r.jsx("div",{className:"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-transparent transition-colors"})})}exports.ResizableHandle=c;exports.ResizablePanel=u;exports.ResizablePanelGroup=f;
2
2
  //# sourceMappingURL=resizable.cjs.map
package/dist/components/ui/resizable.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"resizable.cjs","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n <ResizablePrimitive.Group\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\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring focus-visible:outline-hidden 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=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle"],"mappings":"odAIA,SAASA,EAAoB,CAC3B,UAAAC,EACA,GAAGC,CACL,EAAkC,CAChC,OACEC,EAAAA,IAACC,EAAmB,MAAnB,CACC,YAAU,wBACV,UAAWC,EAAAA,GACT,0DACAJ,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASI,EAAe,CAAE,GAAGJ,GAAwC,CACnE,aAAQE,EAAmB,MAAnB,CAAyB,YAAU,kBAAmB,GAAGF,EAAO,CAC1E,CAEA,SAASK,EAAgB,CACvB,WAAAC,EACA,UAAAP,EACA,GAAGC,CACL,EAEG,CACD,OACEC,EAAAA,IAACC,EAAmB,UAAnB,CACC,YAAU,mBACV,UAAWC,EAAAA,GACT,ukBACAJ,CAAA,EAED,GAAGC,EAEH,SAAAM,GACCL,EAAAA,IAAC,MAAA,CAAI,UAAU,iDAAA,CAAkD,CAAA,CAAA,CAIzE"}
1
+ {"version":3,"file":"resizable.cjs","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n <ResizablePrimitive.Group\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\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\n/**\n * Resize handle between two panels.\n *\n * The handle's layout footprint is a **1px divider that sits exactly on the\n * panel boundary**, so the divider, the grip, and the seam between the panels\n * all line up — regardless of the panels' backgrounds. A wide, transparent\n * **grab area** is layered on top via `::after` (it overlaps both panels by 6px\n * without taking layout space) so the handle can be grabbed anywhere in the gap,\n * not just on the hairline.\n *\n * The 1px divider — and the optional grip (`withHandle`) — stay hidden at rest\n * and **reveal on hover, keyboard focus, or while dragging** (the handle tracks\n * the pointer, so it stays hovered). Keyboard focus reveals them in the `ring`\n * color for a clear focus indicator. Works in both orientations.\n *\n * Has a default `aria-label` so the separator always has an accessible name;\n * pass `aria-label` to override it with something context-specific.\n */\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n aria-label=\"Resize\"\n className={cn(\n // 1px divider on the seam (hidden at rest); centers the grip on it\n \"relative flex shrink-0 items-center justify-center bg-transparent transition-colors ring-offset-background focus-visible:outline-hidden\",\n \"w-px aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full\",\n // wide transparent grab area via ::after — overlays the panels, no layout\n \"after:absolute after:w-3 after:inset-y-0 after:left-1/2 after:-translate-x-1/2\",\n \"aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-3 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2\",\n // reveal the divider on hover / active drag (border) and keyboard focus (ring)\n \"hover:bg-border active:bg-border focus-visible:bg-ring\",\n // reveal the grip likewise\n \"hover:[&>div]:bg-border active:[&>div]:bg-border focus-visible:[&>div]:bg-ring\",\n // grip rotates for the horizontal separator\n \"[&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-transparent transition-colors\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle"],"mappings":"odAIA,SAASA,EAAoB,CAC3B,UAAAC,EACA,GAAGC,CACL,EAAkC,CAChC,OACEC,EAAAA,IAACC,EAAmB,MAAnB,CACC,YAAU,wBACV,UAAWC,EAAAA,GACT,0DACAJ,CAAA,EAED,GAAGC,CAAA,CAAA,CAGV,CAEA,SAASI,EAAe,CAAE,GAAGJ,GAAwC,CACnE,aAAQE,EAAmB,MAAnB,CAAyB,YAAU,kBAAmB,GAAGF,EAAO,CAC1E,CAoBA,SAASK,EAAgB,CACvB,WAAAC,EACA,UAAAP,EACA,GAAGC,CACL,EAEG,CACD,OACEC,EAAAA,IAACC,EAAmB,UAAnB,CACC,YAAU,mBACV,aAAW,SACX,UAAWC,EAAAA,GAET,0IACA,+EAEA,iFACA,kXAEA,yDAEA,iFAEA,iDACAJ,CAAA,EAED,GAAGC,EAEH,SAAAM,GACCL,EAAAA,IAAC,MAAA,CAAI,UAAU,wEAAA,CAAyE,CAAA,CAAA,CAIhG"}
package/dist/components/ui/resizable.js CHANGED
@@ -1,45 +1,57 @@
1
- import { jsx as e } from "react/jsx-runtime";
2
- import * as t from "react-resizable-panels";
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import * as e from "react-resizable-panels";
3
3
  import { cn as i } from "../../lib/utils.js";
4
4
  function s({
5
5
  className: a,
6
- ...r
6
+ ...t
7
7
  }) {
8
- return /* @__PURE__ */ e(
9
- t.Group,
8
+ return /* @__PURE__ */ r(
9
+ e.Group,
10
10
  {
11
11
  "data-slot": "resizable-panel-group",
12
12
  className: i(
13
13
  "flex h-full w-full aria-[orientation=vertical]:flex-col",
14
14
  a
15
15
  ),
16
- ...r
16
+ ...t
17
17
  }
18
18
  );
19
19
  }
20
20
  function f({ ...a }) {
21
- return /* @__PURE__ */ e(t.Panel, { "data-slot": "resizable-panel", ...a });
21
+ return /* @__PURE__ */ r(e.Panel, { "data-slot": "resizable-panel", ...a });
22
22
  }
23
- function u({
23
+ function b({
24
24
  withHandle: a,
25
- className: r,
25
+ className: t,
26
26
  ...o
27
27
  }) {
28
- return /* @__PURE__ */ e(
29
- t.Separator,
28
+ return /* @__PURE__ */ r(
29
+ e.Separator,
30
30
  {
31
31
  "data-slot": "resizable-handle",
32
+ "aria-label": "Resize",
32
33
  className: i(
33
- "relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring focus-visible:outline-hidden 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",
34
- r
34
+ // 1px divider on the seam (hidden at rest); centers the grip on it
35
+ "relative flex shrink-0 items-center justify-center bg-transparent transition-colors ring-offset-background focus-visible:outline-hidden",
36
+ "w-px aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full",
37
+ // wide transparent grab area via ::after — overlays the panels, no layout
38
+ "after:absolute after:w-3 after:inset-y-0 after:left-1/2 after:-translate-x-1/2",
39
+ "aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-3 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2",
40
+ // reveal the divider on hover / active drag (border) and keyboard focus (ring)
41
+ "hover:bg-border active:bg-border focus-visible:bg-ring",
42
+ // reveal the grip likewise
43
+ "hover:[&>div]:bg-border active:[&>div]:bg-border focus-visible:[&>div]:bg-ring",
44
+ // grip rotates for the horizontal separator
45
+ "[&[aria-orientation=horizontal]>div]:rotate-90",
46
+ t
35
47
  ),
36
48
  ...o,
37
- children: a && /* @__PURE__ */ e("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })
49
+ children: a && /* @__PURE__ */ r("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-transparent transition-colors" })
38
50
  }
39
51
  );
40
52
  }
41
53
  export {
42
- u as ResizableHandle,
54
+ b as ResizableHandle,
43
55
  f as ResizablePanel,
44
56
  s as ResizablePanelGroup
45
57
  };
package/dist/components/ui/resizable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n <ResizablePrimitive.Group\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\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring focus-visible:outline-hidden 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=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle"],"mappings":";;;AAIA,SAASA,EAAoB;AAAA,EAC3B,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkC;AAChC,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe,EAAE,GAAGJ,KAAwC;AACnE,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAgB;AAAA,EACvB,YAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGC;AACL,GAEG;AACD,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAM,KACC,gBAAAL,EAAC,OAAA,EAAI,WAAU,kDAAA,CAAkD;AAAA,IAAA;AAAA,EAAA;AAIzE;"}
1
+ {"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n <ResizablePrimitive.Group\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\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\n/**\n * Resize handle between two panels.\n *\n * The handle's layout footprint is a **1px divider that sits exactly on the\n * panel boundary**, so the divider, the grip, and the seam between the panels\n * all line up — regardless of the panels' backgrounds. A wide, transparent\n * **grab area** is layered on top via `::after` (it overlaps both panels by 6px\n * without taking layout space) so the handle can be grabbed anywhere in the gap,\n * not just on the hairline.\n *\n * The 1px divider — and the optional grip (`withHandle`) — stay hidden at rest\n * and **reveal on hover, keyboard focus, or while dragging** (the handle tracks\n * the pointer, so it stays hovered). Keyboard focus reveals them in the `ring`\n * color for a clear focus indicator. Works in both orientations.\n *\n * Has a default `aria-label` so the separator always has an accessible name;\n * pass `aria-label` to override it with something context-specific.\n */\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n aria-label=\"Resize\"\n className={cn(\n // 1px divider on the seam (hidden at rest); centers the grip on it\n \"relative flex shrink-0 items-center justify-center bg-transparent transition-colors ring-offset-background focus-visible:outline-hidden\",\n \"w-px aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full\",\n // wide transparent grab area via ::after — overlays the panels, no layout\n \"after:absolute after:w-3 after:inset-y-0 after:left-1/2 after:-translate-x-1/2\",\n \"aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-3 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2\",\n // reveal the divider on hover / active drag (border) and keyboard focus (ring)\n \"hover:bg-border active:bg-border focus-visible:bg-ring\",\n // reveal the grip likewise\n \"hover:[&>div]:bg-border active:[&>div]:bg-border focus-visible:[&>div]:bg-ring\",\n // grip rotates for the horizontal separator\n \"[&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-transparent transition-colors\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle"],"mappings":";;;AAIA,SAASA,EAAoB;AAAA,EAC3B,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkC;AAChC,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe,EAAE,GAAGJ,KAAwC;AACnE,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAoBA,SAASK,EAAgB;AAAA,EACvB,YAAAC;AAAA,EACA,WAAAP;AAAA,EACA,GAAGC;AACL,GAEG;AACD,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,cAAW;AAAA,MACX,WAAWC;AAAA;AAAA,QAET;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAAM,KACC,gBAAAL,EAAC,OAAA,EAAI,WAAU,yEAAA,CAAyE;AAAA,IAAA;AAAA,EAAA;AAIhG;"}