@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.84.1 → 0.6.0-beta.86.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.
- package/README.md +55 -0
- package/dist/components/ui/input-group.cjs +1 -1
- package/dist/components/ui/input-group.cjs.map +1 -1
- package/dist/components/ui/input-group.js +6 -6
- package/dist/components/ui/input-group.js.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.tailwind.css +1 -1
- package/package.json +18 -12
package/README.md
CHANGED
|
@@ -392,6 +392,61 @@ Visit <http://localhost:6006>.
|
|
|
392
392
|
- [Theming Guide](./THEMING.md) - Customise the design system
|
|
393
393
|
- [Contributing](./CONTRIBUTING.md#development-setup) - Clone the repo and run `yarn storybook`
|
|
394
394
|
|
|
395
|
+
## MCP server (for AI coding agents)
|
|
396
|
+
|
|
397
|
+
This library exposes an [MCP](https://modelcontextprotocol.io/) server so AI
|
|
398
|
+
coding agents (Claude Code, Cursor, Claude Desktop) can query authoritative
|
|
399
|
+
component lists, prop/variant options, and usage examples instead of guessing —
|
|
400
|
+
reducing hallucinated component APIs when scaffolding a data app.
|
|
401
|
+
|
|
402
|
+
There are two endpoints. Pick whichever fits; you can add both.
|
|
403
|
+
|
|
404
|
+
| Endpoint | URL | Tools |
|
|
405
|
+
| --- | --- | --- |
|
|
406
|
+
| **Deployed** (no local checkout needed) | `https://ts-lib-ui-kit-storybook.vercel.app/api/mcp` | docs: `list_components`, `get_component`, `search_components` |
|
|
407
|
+
| **Local** (needs `yarn storybook` running) | `http://localhost:6006/mcp` | full set: docs **+** write/preview/test stories |
|
|
408
|
+
|
|
409
|
+
### Add the connection
|
|
410
|
+
|
|
411
|
+
**Claude Code** — register the deployed server (HTTP transport):
|
|
412
|
+
|
|
413
|
+
```bash
|
|
414
|
+
claude mcp add --transport http ts-ui-kit https://ts-lib-ui-kit-storybook.vercel.app/api/mcp
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
Use `--scope project` to share it with your team via a checked-in `.mcp.json`, or
|
|
418
|
+
`--scope user` to make it available across all your projects. For the local
|
|
419
|
+
server, run `yarn storybook` first, then:
|
|
420
|
+
|
|
421
|
+
```bash
|
|
422
|
+
claude mcp add --transport http ts-ui-kit-local http://localhost:6006/mcp
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
**Cursor / Claude Desktop / other clients** — add an HTTP MCP server to the
|
|
426
|
+
client's MCP config (e.g. Cursor's `.cursor/mcp.json`, or Claude Desktop's
|
|
427
|
+
`claude_desktop_config.json`):
|
|
428
|
+
|
|
429
|
+
```json
|
|
430
|
+
{
|
|
431
|
+
"mcpServers": {
|
|
432
|
+
"ts-ui-kit": {
|
|
433
|
+
"type": "http",
|
|
434
|
+
"url": "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
**Any client (generic helper):**
|
|
441
|
+
|
|
442
|
+
```bash
|
|
443
|
+
npx mcp-add --type http --url "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
Then ask your agent something like *"using the ts-ui-kit MCP, list the available
|
|
447
|
+
components"* or *"build a form using ts-ui-kit primitives"* to confirm it's wired
|
|
448
|
+
up.
|
|
449
|
+
|
|
395
450
|
## Tech Stack
|
|
396
451
|
|
|
397
452
|
- React 19
|
|
@@ -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 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 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"),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;
|
|
2
2
|
//# sourceMappingURL=input-group.cjs.map
|
|
@@ -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 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 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,
|
|
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"}
|
|
@@ -2,7 +2,7 @@ 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
4
|
import { Input as d } from "./input.js";
|
|
5
|
-
import { Textarea as
|
|
5
|
+
import { Textarea as l } from "./textarea.js";
|
|
6
6
|
import { cn as e } from "../../lib/utils.js";
|
|
7
7
|
function v({ className: a, ...t }) {
|
|
8
8
|
return /* @__PURE__ */ r(
|
|
@@ -18,7 +18,7 @@ function v({ className: a, ...t }) {
|
|
|
18
18
|
}
|
|
19
19
|
);
|
|
20
20
|
}
|
|
21
|
-
const
|
|
21
|
+
const p = s(
|
|
22
22
|
"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",
|
|
23
23
|
{
|
|
24
24
|
variants: {
|
|
@@ -45,7 +45,7 @@ function k({
|
|
|
45
45
|
role: "group",
|
|
46
46
|
"data-slot": "input-group-addon",
|
|
47
47
|
"data-align": t,
|
|
48
|
-
className: e(
|
|
48
|
+
className: e(p({ align: t }), a),
|
|
49
49
|
onKeyDown: (n) => {
|
|
50
50
|
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click());
|
|
51
51
|
},
|
|
@@ -111,7 +111,7 @@ function z({
|
|
|
111
111
|
{
|
|
112
112
|
"data-slot": "input-group-control",
|
|
113
113
|
className: e(
|
|
114
|
-
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
|
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
|
),
|
|
117
117
|
...t
|
|
@@ -123,11 +123,11 @@ function G({
|
|
|
123
123
|
...t
|
|
124
124
|
}) {
|
|
125
125
|
return /* @__PURE__ */ r(
|
|
126
|
-
|
|
126
|
+
l,
|
|
127
127
|
{
|
|
128
128
|
"data-slot": "input-group-control",
|
|
129
129
|
className: e(
|
|
130
|
-
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent",
|
|
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
|
),
|
|
133
133
|
...t
|
|
@@ -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 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 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":";;;;;;AAQA,SAASA,EAAW,EAAE,WAAAC,GAAW,GAAGC,KAAsC;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAMG,IAA0BC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,gBACE;AAAA,QACF,cACE;AAAA,QACF,eACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,SAASC,EAAgB;AAAA,EACvB,WAAAN;AAAA,EACA,OAAAO,IAAQ;AAAA,EACR,GAAGN;AACL,GAA+E;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYK;AAAA,MACZ,WAAWJ,EAAGC,EAAwB,EAAE,OAAAG,EAAA,CAAO,GAAGP,CAAS;AAAA,MAC3D,WAAW,CAACQ,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFA,EAAE,cAAc,MAAA;AAAA,MAEpB;AAAA,MACA,SAAS,CAACA,MAAM;AACd,QAAKA,EAAE,OAAuB,QAAQ,QAAQ,KAG9CA,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA;AAAA,MACzD;AAAA,MACC,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAMQ,IAA2BJ;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WACE;AAAA,QACF,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,SAASK,EAAiB;AAAA,EACxB,WAAAV;AAAA,EACA,MAAAW,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGZ;AACL,GACiD;AAC/C,SACE,gBAAAC;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,MAAAH;AAAA,MACA,aAAWE;AAAA,MACX,SAAAD;AAAA,MACA,WAAWT,EAAGM,EAAyB,EAAE,MAAAI,EAAA,CAAM,GAAGb,CAAS;AAAA,MAC1D,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASc,EAAe,EAAE,WAAAf,GAAW,GAAGC,KAAuC;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASe,EAAgB;AAAA,EACvB,WAAAhB;AAAA,EACA,GAAGC;AACL,GAAkC;AAChC,SACE,gBAAAC;AAAA,IAACe;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWd;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASiB,EAAmB;AAAA,EAC1B,WAAAlB;AAAA,EACA,GAAGC;AACL,GAAqC;AACnC,SACE,gBAAAC;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWhB;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
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":";;;;;;AAQA,SAASA,EAAW,EAAE,WAAAC,GAAW,GAAGC,KAAsC;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAMG,IAA0BC;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,gBACE;AAAA,QACF,cACE;AAAA,QACF,eACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAEA,SAASC,EAAgB;AAAA,EACvB,WAAAN;AAAA,EACA,OAAAO,IAAQ;AAAA,EACR,GAAGN;AACL,GAA+E;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAYK;AAAA,MACZ,WAAWJ,EAAGC,EAAwB,EAAE,OAAAG,EAAA,CAAO,GAAGP,CAAS;AAAA,MAC3D,WAAW,CAACQ,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFA,EAAE,cAAc,MAAA;AAAA,MAEpB;AAAA,MACA,SAAS,CAACA,MAAM;AACd,QAAKA,EAAE,OAAuB,QAAQ,QAAQ,KAG9CA,EAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA;AAAA,MACzD;AAAA,MACC,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAMQ,IAA2BJ;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WACE;AAAA,QACF,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,SAASK,EAAiB;AAAA,EACxB,WAAAV;AAAA,EACA,MAAAW,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,GAAGZ;AACL,GACiD;AAC/C,SACE,gBAAAC;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,MAAAH;AAAA,MACA,aAAWE;AAAA,MACX,SAAAD;AAAA,MACA,WAAWT,EAAGM,EAAyB,EAAE,MAAAI,EAAA,CAAM,GAAGb,CAAS;AAAA,MAC1D,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASc,EAAe,EAAE,WAAAf,GAAW,GAAGC,KAAuC;AAC7E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASe,EAAgB;AAAA,EACvB,WAAAhB;AAAA,EACA,GAAGC;AACL,GAAkC;AAChC,SACE,gBAAAC;AAAA,IAACe;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWd;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASiB,EAAmB;AAAA,EAC1B,WAAAlB;AAAA,EACA,GAAGC;AACL,GAAqC;AACnC,SACE,gBAAAC;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWhB;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|