@turingpaper/ui 0.0.12 → 0.0.14

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 (44) hide show
  1. package/dist/accordion.mjs +34 -46
  2. package/dist/alert-dialog.mjs +54 -113
  3. package/dist/avatar.mjs +26 -42
  4. package/dist/badge.mjs +21 -25
  5. package/dist/breadcrumb.mjs +58 -91
  6. package/dist/button.mjs +40 -48
  7. package/dist/card.mjs +41 -63
  8. package/dist/chart.mjs +123 -204
  9. package/dist/checkbox.mjs +17 -26
  10. package/dist/collapsible.mjs +6 -7
  11. package/dist/command.mjs +70 -109
  12. package/dist/components/mermaid-diagram.d.ts +0 -2
  13. package/dist/dialog.mjs +48 -99
  14. package/dist/drawer.mjs +48 -98
  15. package/dist/dropdown-menu.mjs +72 -143
  16. package/dist/hover-card.mjs +16 -23
  17. package/dist/input-group.mjs +71 -135
  18. package/dist/input-otp.mjs +40 -47
  19. package/dist/input.mjs +13 -21
  20. package/dist/label.mjs +15 -19
  21. package/dist/map.mjs +640 -730
  22. package/dist/mermaid-diagram.mjs +125 -141
  23. package/dist/pagination.mjs +62 -105
  24. package/dist/popover.mjs +15 -23
  25. package/dist/progress.mjs +16 -24
  26. package/dist/provider.d.ts +2 -1
  27. package/dist/provider.mjs +18 -14
  28. package/dist/radio-group.mjs +23 -30
  29. package/dist/scroll-area.mjs +30 -38
  30. package/dist/select.mjs +69 -121
  31. package/dist/separator.mjs +16 -24
  32. package/dist/sheet.mjs +58 -110
  33. package/dist/skeleton.mjs +10 -16
  34. package/dist/slider.mjs +18 -23
  35. package/dist/styles.css +1 -1
  36. package/dist/switch.mjs +14 -27
  37. package/dist/table.mjs +57 -87
  38. package/dist/tabs.mjs +25 -46
  39. package/dist/textarea.mjs +11 -17
  40. package/dist/toggle-group.mjs +36 -40
  41. package/dist/toggle.mjs +34 -37
  42. package/dist/tooltip.mjs +15 -23
  43. package/dist/utils.mjs +6 -6
  44. package/package.json +7 -7
@@ -1,143 +1,72 @@
1
- import { jsxs as l, jsx as n } from "react/jsx-runtime";
2
- import * as d from "react";
3
- import { DropdownMenu as e } from "radix-ui";
4
- import { ChevronRight as m, Check as c, Circle as p } from "lucide-react";
5
- import { cn as s } from "./utils.mjs";
6
- const I = e.Root, S = e.Trigger, C = e.Group, z = e.Portal, k = e.Sub, _ = e.RadioGroup, u = d.forwardRef(({ className: o, inset: t, children: a, ...r }, i) => /* @__PURE__ */ l(
7
- e.SubTrigger,
8
- {
9
- ref: i,
10
- className: s(
11
- "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
12
- t && "pl-8",
13
- o
14
- ),
15
- ...r,
16
- children: [
17
- a,
18
- /* @__PURE__ */ n(m, { className: "ml-auto" })
19
- ]
20
- }
21
- ));
22
- u.displayName = e.SubTrigger.displayName;
23
- const f = d.forwardRef(({ className: o, ...t }, a) => /* @__PURE__ */ n(
24
- e.SubContent,
25
- {
26
- ref: a,
27
- className: s(
28
- "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
29
- o
30
- ),
31
- ...t
32
- }
33
- ));
34
- f.displayName = e.SubContent.displayName;
35
- const g = d.forwardRef(({ className: o, sideOffset: t = 4, ...a }, r) => /* @__PURE__ */ n(e.Portal, { children: /* @__PURE__ */ n(
36
- e.Content,
37
- {
38
- ref: r,
39
- sideOffset: t,
40
- className: s(
41
- "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
42
- o
43
- ),
44
- ...a
45
- }
46
- ) }));
47
- g.displayName = e.Content.displayName;
48
- const w = d.forwardRef(({ className: o, inset: t, ...a }, r) => /* @__PURE__ */ n(
49
- e.Item,
50
- {
51
- ref: r,
52
- className: s(
53
- "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
54
- t && "pl-8",
55
- o
56
- ),
57
- ...a
58
- }
59
- ));
60
- w.displayName = e.Item.displayName;
61
- const b = d.forwardRef(({ className: o, children: t, checked: a, ...r }, i) => /* @__PURE__ */ l(
62
- e.CheckboxItem,
63
- {
64
- ref: i,
65
- className: s(
66
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
67
- o
68
- ),
69
- checked: a,
70
- ...r,
71
- children: [
72
- /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(c, { className: "h-4 w-4" }) }) }),
73
- t
74
- ]
75
- }
76
- ));
77
- b.displayName = e.CheckboxItem.displayName;
78
- const h = d.forwardRef(({ className: o, children: t, ...a }, r) => /* @__PURE__ */ l(
79
- e.RadioItem,
80
- {
81
- ref: r,
82
- className: s(
83
- "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
84
- o
85
- ),
86
- ...a,
87
- children: [
88
- /* @__PURE__ */ n("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(e.ItemIndicator, { children: /* @__PURE__ */ n(p, { className: "h-2 w-2 fill-current" }) }) }),
89
- t
90
- ]
91
- }
92
- ));
93
- h.displayName = e.RadioItem.displayName;
94
- const x = d.forwardRef(({ className: o, inset: t, ...a }, r) => /* @__PURE__ */ n(
95
- e.Label,
96
- {
97
- ref: r,
98
- className: s(
99
- "px-2 py-1.5 text-sm font-semibold",
100
- t && "pl-8",
101
- o
102
- ),
103
- ...a
104
- }
105
- ));
106
- x.displayName = e.Label.displayName;
107
- const N = d.forwardRef(({ className: o, ...t }, a) => /* @__PURE__ */ n(
108
- e.Separator,
109
- {
110
- ref: a,
111
- className: s("-mx-1 my-1 h-px bg-muted", o),
112
- ...t
113
- }
114
- ));
115
- N.displayName = e.Separator.displayName;
116
- const y = ({
117
- className: o,
118
- ...t
119
- }) => /* @__PURE__ */ n(
120
- "span",
121
- {
122
- className: s("ml-auto text-xs tracking-widest opacity-60", o),
123
- ...t
124
- }
125
- );
126
- y.displayName = "DropdownMenuShortcut";
127
- export {
128
- I as DropdownMenu,
129
- b as DropdownMenuCheckboxItem,
130
- g as DropdownMenuContent,
131
- C as DropdownMenuGroup,
132
- w as DropdownMenuItem,
133
- x as DropdownMenuLabel,
134
- z as DropdownMenuPortal,
135
- _ as DropdownMenuRadioGroup,
136
- h as DropdownMenuRadioItem,
137
- N as DropdownMenuSeparator,
138
- y as DropdownMenuShortcut,
139
- k as DropdownMenuSub,
140
- f as DropdownMenuSubContent,
141
- u as DropdownMenuSubTrigger,
142
- S as DropdownMenuTrigger
143
- };
1
+ import { cn as e } from "./utils.mjs";
2
+ import * as t from "react";
3
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
+ import { DropdownMenu as i } from "radix-ui";
5
+ import { Check as a, ChevronRight as o, Circle as s } from "lucide-react";
6
+ //#region src/components/dropdown-menu.tsx
7
+ var c = i.Root, l = i.Trigger, u = i.Group, d = i.Portal, f = i.Sub, p = i.RadioGroup, m = t.forwardRef(({ className: t, inset: a, children: s, ...c }, l) => /* @__PURE__ */ r(i.SubTrigger, {
8
+ ref: l,
9
+ className: e("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", a && "pl-8", t),
10
+ ...c,
11
+ children: [s, /* @__PURE__ */ n(o, { className: "ml-auto" })]
12
+ }));
13
+ m.displayName = i.SubTrigger.displayName;
14
+ var h = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.SubContent, {
15
+ ref: a,
16
+ className: e("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", t),
17
+ ...r
18
+ }));
19
+ h.displayName = i.SubContent.displayName;
20
+ var g = t.forwardRef(({ className: t, sideOffset: r = 4, ...a }, o) => /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ n(i.Content, {
21
+ ref: o,
22
+ sideOffset: r,
23
+ className: e("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", t),
24
+ ...a
25
+ }) }));
26
+ g.displayName = i.Content.displayName;
27
+ var _ = t.forwardRef(({ className: t, inset: r, ...a }, o) => /* @__PURE__ */ n(i.Item, {
28
+ ref: o,
29
+ className: e("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", r && "pl-8", t),
30
+ ...a
31
+ }));
32
+ _.displayName = i.Item.displayName;
33
+ var v = t.forwardRef(({ className: t, children: o, checked: s, ...c }, l) => /* @__PURE__ */ r(i.CheckboxItem, {
34
+ ref: l,
35
+ className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
36
+ checked: s,
37
+ ...c,
38
+ children: [/* @__PURE__ */ n("span", {
39
+ className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
40
+ children: /* @__PURE__ */ n(i.ItemIndicator, { children: /* @__PURE__ */ n(a, { className: "h-4 w-4" }) })
41
+ }), o]
42
+ }));
43
+ v.displayName = i.CheckboxItem.displayName;
44
+ var y = t.forwardRef(({ className: t, children: a, ...o }, c) => /* @__PURE__ */ r(i.RadioItem, {
45
+ ref: c,
46
+ className: e("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", t),
47
+ ...o,
48
+ children: [/* @__PURE__ */ n("span", {
49
+ className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
50
+ children: /* @__PURE__ */ n(i.ItemIndicator, { children: /* @__PURE__ */ n(s, { className: "h-2 w-2 fill-current" }) })
51
+ }), a]
52
+ }));
53
+ y.displayName = i.RadioItem.displayName;
54
+ var b = t.forwardRef(({ className: t, inset: r, ...a }, o) => /* @__PURE__ */ n(i.Label, {
55
+ ref: o,
56
+ className: e("px-2 py-1.5 text-sm font-semibold", r && "pl-8", t),
57
+ ...a
58
+ }));
59
+ b.displayName = i.Label.displayName;
60
+ var x = t.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ n(i.Separator, {
61
+ ref: a,
62
+ className: e("-mx-1 my-1 h-px bg-muted", t),
63
+ ...r
64
+ }));
65
+ x.displayName = i.Separator.displayName;
66
+ var S = ({ className: t, ...r }) => /* @__PURE__ */ n("span", {
67
+ className: e("ml-auto text-xs tracking-widest opacity-60", t),
68
+ ...r
69
+ });
70
+ S.displayName = "DropdownMenuShortcut";
71
+ //#endregion
72
+ export { c as DropdownMenu, v as DropdownMenuCheckboxItem, g as DropdownMenuContent, u as DropdownMenuGroup, _ as DropdownMenuItem, b as DropdownMenuLabel, d as DropdownMenuPortal, p as DropdownMenuRadioGroup, y as DropdownMenuRadioItem, x as DropdownMenuSeparator, S as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuSubContent, m as DropdownMenuSubTrigger, l as DropdownMenuTrigger };
@@ -1,23 +1,16 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import * as n from "react";
3
- import { HoverCard as o } from "radix-ui";
4
- import { cn as s } from "./utils.mjs";
5
- const c = o.Root, g = o.Trigger, m = n.forwardRef(({ className: t, align: e = "center", sideOffset: a = 4, ...r }, d) => /* @__PURE__ */ i(
6
- o.Content,
7
- {
8
- ref: d,
9
- align: e,
10
- sideOffset: a,
11
- className: s(
12
- "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
13
- t
14
- ),
15
- ...r
16
- }
17
- ));
18
- m.displayName = o.Content.displayName;
19
- export {
20
- c as HoverCard,
21
- m as HoverCardContent,
22
- g as HoverCardTrigger
23
- };
1
+ "use client";
2
+ import { cn as e } from "./utils.mjs";
3
+ import * as t from "react";
4
+ import { jsx as n } from "react/jsx-runtime";
5
+ import { HoverCard as r } from "radix-ui";
6
+ //#region src/components/hover-card.tsx
7
+ var i = r.Root, a = r.Trigger, o = t.forwardRef(({ className: t, align: i = "center", sideOffset: a = 4, ...o }, s) => /* @__PURE__ */ n(r.Content, {
8
+ ref: s,
9
+ align: i,
10
+ sideOffset: a,
11
+ className: e("z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]", t),
12
+ ...o
13
+ }));
14
+ o.displayName = r.Content.displayName;
15
+ //#endregion
16
+ export { i as HoverCard, o as HoverCardContent, a as HoverCardTrigger };
@@ -1,141 +1,77 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- import { cva as i } from "class-variance-authority";
3
- import { cn as r } from "./utils.mjs";
4
- import { Button as u } from "./button.mjs";
5
- import { Input as l } from "./input.mjs";
6
- import { Textarea as d } from "./textarea.mjs";
7
- function v({ className: a, ...t }) {
8
- return /* @__PURE__ */ n(
9
- "div",
10
- {
11
- "data-slot": "input-group",
12
- role: "group",
13
- className: r(
14
- "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive-foreground has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/20 has-[textarea]:rounded-xl 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:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40 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
- a
16
- ),
17
- ...t
18
- }
19
- );
1
+ import { cn as e } from "./utils.mjs";
2
+ import { Button as t } from "./button.mjs";
3
+ import { Input as n } from "./input.mjs";
4
+ import { Textarea as r } from "./textarea.mjs";
5
+ import "react";
6
+ import { jsx as i } from "react/jsx-runtime";
7
+ import { cva as a } from "class-variance-authority";
8
+ //#region src/components/input-group.tsx
9
+ function o({ className: t, ...n }) {
10
+ return /* @__PURE__ */ i("div", {
11
+ "data-slot": "input-group",
12
+ role: "group",
13
+ className: e("group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-input/30 transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive-foreground has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/20 has-[textarea]:rounded-xl 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:has-[[data-slot][aria-invalid=true]]:ring-destructive-foreground/40 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", t),
14
+ ...n
15
+ });
20
16
  }
21
- const p = i(
22
- "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
23
- {
24
- variants: {
25
- align: {
26
- "inline-start": "order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
27
- "inline-end": "order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
28
- "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3",
29
- "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3"
30
- }
31
- },
32
- defaultVariants: {
33
- align: "inline-start"
34
- }
35
- }
36
- );
37
- function k({
38
- className: a,
39
- align: t = "inline-start",
40
- ...e
41
- }) {
42
- return /* @__PURE__ */ n(
43
- "div",
44
- {
45
- role: "group",
46
- "data-slot": "input-group-addon",
47
- "data-align": t,
48
- className: r(p({ align: t }), a),
49
- onClick: (o) => {
50
- o.target.closest("button") || o.currentTarget.parentElement?.querySelector("input")?.focus();
51
- },
52
- ...e
53
- }
54
- );
17
+ var s = a("flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4", {
18
+ variants: { align: {
19
+ "inline-start": "order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
20
+ "inline-end": "order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
21
+ "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3",
22
+ "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3"
23
+ } },
24
+ defaultVariants: { align: "inline-start" }
25
+ });
26
+ function c({ className: t, align: n = "inline-start", ...r }) {
27
+ return /* @__PURE__ */ i("div", {
28
+ role: "group",
29
+ "data-slot": "input-group-addon",
30
+ "data-align": n,
31
+ className: e(s({ align: n }), t),
32
+ onClick: (e) => {
33
+ e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
34
+ },
35
+ ...r
36
+ });
55
37
  }
56
- const g = i(
57
- "flex items-center gap-2 rounded-4xl text-sm shadow-none",
58
- {
59
- variants: {
60
- size: {
61
- xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
62
- sm: "",
63
- "icon-xs": "size-6 p-0 has-[>svg]:p-0",
64
- "icon-sm": "size-8 p-0 has-[>svg]:p-0"
65
- }
66
- },
67
- defaultVariants: {
68
- size: "xs"
69
- }
70
- }
71
- );
72
- function z({
73
- className: a,
74
- type: t = "button",
75
- variant: e = "ghost",
76
- size: o = "xs",
77
- ...s
78
- }) {
79
- return /* @__PURE__ */ n(
80
- u,
81
- {
82
- type: t,
83
- "data-size": o,
84
- variant: e,
85
- className: r(g({ size: o }), a),
86
- ...s
87
- }
88
- );
38
+ var l = a("flex items-center gap-2 rounded-4xl text-sm shadow-none", {
39
+ variants: { size: {
40
+ xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
41
+ sm: "",
42
+ "icon-xs": "size-6 p-0 has-[>svg]:p-0",
43
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0"
44
+ } },
45
+ defaultVariants: { size: "xs" }
46
+ });
47
+ function u({ className: n, type: r = "button", variant: a = "ghost", size: o = "xs", ...s }) {
48
+ return /* @__PURE__ */ i(t, {
49
+ type: r,
50
+ "data-size": o,
51
+ variant: a,
52
+ className: e(l({ size: o }), n),
53
+ ...s
54
+ });
89
55
  }
90
- function w({ className: a, ...t }) {
91
- return /* @__PURE__ */ n(
92
- "span",
93
- {
94
- className: r(
95
- "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
96
- a
97
- ),
98
- ...t
99
- }
100
- );
56
+ function d({ className: t, ...n }) {
57
+ return /* @__PURE__ */ i("span", {
58
+ className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
59
+ ...n
60
+ });
101
61
  }
102
- function G({
103
- className: a,
104
- ...t
105
- }) {
106
- return /* @__PURE__ */ n(
107
- l,
108
- {
109
- "data-slot": "input-group-control",
110
- className: r(
111
- "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
112
- a
113
- ),
114
- ...t
115
- }
116
- );
62
+ function f({ className: t, ...r }) {
63
+ return /* @__PURE__ */ i(n, {
64
+ "data-slot": "input-group-control",
65
+ className: e("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", t),
66
+ ...r
67
+ });
117
68
  }
118
- function I({
119
- className: a,
120
- ...t
121
- }) {
122
- return /* @__PURE__ */ n(
123
- d,
124
- {
125
- "data-slot": "input-group-control",
126
- className: r(
127
- "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
128
- a
129
- ),
130
- ...t
131
- }
132
- );
69
+ function p({ className: t, ...n }) {
70
+ return /* @__PURE__ */ i(r, {
71
+ "data-slot": "input-group-control",
72
+ className: e("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", t),
73
+ ...n
74
+ });
133
75
  }
134
- export {
135
- v as InputGroup,
136
- k as InputGroupAddon,
137
- z as InputGroupButton,
138
- G as InputGroupInput,
139
- w as InputGroupText,
140
- I as InputGroupTextarea
141
- };
76
+ //#endregion
77
+ export { o as InputGroup, c as InputGroupAddon, u as InputGroupButton, f as InputGroupInput, d as InputGroupText, p as InputGroupTextarea };
@@ -1,48 +1,41 @@
1
- import { jsx as t, jsxs as c } from "react/jsx-runtime";
2
- import * as a from "react";
3
- import { OTPInput as m, OTPInputContext as u } from "input-otp";
4
- import { Dot as f } from "lucide-react";
5
- import { cn as n } from "./utils.mjs";
6
- const x = a.forwardRef(({ className: e, containerClassName: r, ...o }, s) => /* @__PURE__ */ t(
7
- m,
8
- {
9
- ref: s,
10
- containerClassName: n(
11
- "flex items-center gap-2 has-[:disabled]:opacity-50",
12
- r
13
- ),
14
- className: n("disabled:cursor-not-allowed", e),
15
- ...o
16
- }
17
- ));
18
- x.displayName = "InputOTP";
19
- const O = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ t("div", { ref: o, className: n("flex items-center", e), ...r }));
20
- O.displayName = "InputOTPGroup";
21
- const P = a.forwardRef(({ index: e, className: r, ...o }, s) => {
22
- const i = a.useContext(u), { char: d, hasFakeCaret: l, isActive: p } = i.slots[e];
23
- return /* @__PURE__ */ c(
24
- "div",
25
- {
26
- ref: s,
27
- className: n(
28
- "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
29
- p && "z-10 border-ring ring-3 ring-ring/50",
30
- r
31
- ),
32
- ...o,
33
- children: [
34
- d,
35
- l && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
36
- ]
37
- }
38
- );
1
+ import { cn as e } from "./utils.mjs";
2
+ import * as t from "react";
3
+ import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
+ import { Dot as i } from "lucide-react";
5
+ import { OTPInput as a, OTPInputContext as o } from "input-otp";
6
+ //#region src/components/input-otp.tsx
7
+ var s = t.forwardRef(({ className: t, containerClassName: r, ...i }, o) => /* @__PURE__ */ n(a, {
8
+ ref: o,
9
+ containerClassName: e("flex items-center gap-2 has-[:disabled]:opacity-50", r),
10
+ className: e("disabled:cursor-not-allowed", t),
11
+ ...i
12
+ }));
13
+ s.displayName = "InputOTP";
14
+ var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
15
+ ref: i,
16
+ className: e("flex items-center", t),
17
+ ...r
18
+ }));
19
+ c.displayName = "InputOTPGroup";
20
+ var l = t.forwardRef(({ index: i, className: a, ...s }, c) => {
21
+ let { char: l, hasFakeCaret: u, isActive: d } = t.useContext(o).slots[i];
22
+ return /* @__PURE__ */ r("div", {
23
+ ref: c,
24
+ className: e("relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md", d && "z-10 border-ring ring-3 ring-ring/50", a),
25
+ ...s,
26
+ children: [l, u && /* @__PURE__ */ n("div", {
27
+ className: "pointer-events-none absolute inset-0 flex items-center justify-center",
28
+ children: /* @__PURE__ */ n("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
29
+ })]
30
+ });
39
31
  });
40
- P.displayName = "InputOTPSlot";
41
- const T = a.forwardRef(({ ...e }, r) => /* @__PURE__ */ t("div", { ref: r, role: "separator", ...e, children: /* @__PURE__ */ t(f, {}) }));
42
- T.displayName = "InputOTPSeparator";
43
- export {
44
- x as InputOTP,
45
- O as InputOTPGroup,
46
- T as InputOTPSeparator,
47
- P as InputOTPSlot
48
- };
32
+ l.displayName = "InputOTPSlot";
33
+ var u = t.forwardRef(({ ...e }, t) => /* @__PURE__ */ n("div", {
34
+ ref: t,
35
+ role: "separator",
36
+ ...e,
37
+ children: /* @__PURE__ */ n(i, {})
38
+ }));
39
+ u.displayName = "InputOTPSeparator";
40
+ //#endregion
41
+ export { s as InputOTP, c as InputOTPGroup, u as InputOTPSeparator, l as InputOTPSlot };
package/dist/input.mjs CHANGED
@@ -1,21 +1,13 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import * as n from "react";
3
- import { cn as d } from "./utils.mjs";
4
- const l = n.forwardRef(
5
- ({ className: e, type: r, ...o }, i) => /* @__PURE__ */ t(
6
- "input",
7
- {
8
- type: r,
9
- className: d(
10
- "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
11
- e
12
- ),
13
- ref: i,
14
- ...o
15
- }
16
- )
17
- );
18
- l.displayName = "Input";
19
- export {
20
- l as Input
21
- };
1
+ import { cn as e } from "./utils.mjs";
2
+ import * as t from "react";
3
+ import { jsx as n } from "react/jsx-runtime";
4
+ //#region src/components/input.tsx
5
+ var r = t.forwardRef(({ className: t, type: r, ...i }, a) => /* @__PURE__ */ n("input", {
6
+ type: r,
7
+ className: e("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", t),
8
+ ref: a,
9
+ ...i
10
+ }));
11
+ r.displayName = "Input";
12
+ //#endregion
13
+ export { r as Input };