@tristan2828/ui-foundation 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +51 -0
  3. package/bin/ui-foundation.mjs +249 -0
  4. package/conventions/AGENTS.md +149 -0
  5. package/conventions/agents/deny-impl-read.mjs +36 -0
  6. package/conventions/agents/skills/new-entity/SKILL.md +22 -0
  7. package/conventions/agents/spec-tester.md +35 -0
  8. package/conventions/docs/add-an-entity.md +204 -0
  9. package/conventions/docs/cell-patterns.md +204 -0
  10. package/conventions/docs/column-options.md +122 -0
  11. package/conventions/docs/design-language.md +116 -0
  12. package/conventions/docs/entity-plan-template.md +67 -0
  13. package/dist/api/contracts.d.ts +20 -0
  14. package/dist/api/contracts.js +4 -0
  15. package/dist/api/gateway/auth.d.ts +9 -0
  16. package/dist/api/gateway/auth.js +37 -0
  17. package/dist/api/gateway/errors.d.ts +5 -0
  18. package/dist/api/gateway/errors.js +36 -0
  19. package/dist/api/query-client.d.ts +2 -0
  20. package/dist/api/query-client.js +19 -0
  21. package/dist/api/schema.d.ts +246 -0
  22. package/dist/api/schema.js +5 -0
  23. package/dist/api/transport/index.d.ts +5 -0
  24. package/dist/api/transport/index.js +14 -0
  25. package/dist/auth/auth-context.d.ts +19 -0
  26. package/dist/auth/auth-context.js +12 -0
  27. package/dist/auth/auth-provider.d.ts +4 -0
  28. package/dist/auth/auth-provider.js +101 -0
  29. package/dist/auth/use-auth.d.ts +2 -0
  30. package/dist/auth/use-auth.js +9 -0
  31. package/dist/components/app/app-shell.d.ts +28 -0
  32. package/dist/components/app/app-shell.js +64 -0
  33. package/dist/components/app/data-table.d.ts +56 -0
  34. package/dist/components/app/data-table.js +167 -0
  35. package/dist/components/app/entity-form.d.ts +14 -0
  36. package/dist/components/app/entity-form.js +8 -0
  37. package/dist/components/app/error-state.d.ts +6 -0
  38. package/dist/components/app/error-state.js +20 -0
  39. package/dist/components/app/foundation-providers.d.ts +9 -0
  40. package/dist/components/app/foundation-providers.js +15 -0
  41. package/dist/components/app/mock-mode-banner.d.ts +3 -0
  42. package/dist/components/app/mock-mode-banner.js +16 -0
  43. package/dist/components/app/multi-choice.d.ts +14 -0
  44. package/dist/components/app/multi-choice.js +13 -0
  45. package/dist/components/app/password-input.d.ts +3 -0
  46. package/dist/components/app/password-input.js +30 -0
  47. package/dist/components/app/route-error-boundary.d.ts +1 -0
  48. package/dist/components/app/route-error-boundary.js +13 -0
  49. package/dist/components/theme-provider.d.ts +2 -0
  50. package/dist/components/theme-provider.js +8 -0
  51. package/dist/components/ui/badge.d.ts +7 -0
  52. package/dist/components/ui/badge.js +50 -0
  53. package/dist/components/ui/button.d.ts +8 -0
  54. package/dist/components/ui/button.js +34 -0
  55. package/dist/components/ui/calendar.d.ts +10 -0
  56. package/dist/components/ui/calendar.js +76 -0
  57. package/dist/components/ui/card.d.ts +11 -0
  58. package/dist/components/ui/card.js +25 -0
  59. package/dist/components/ui/combobox.d.ts +24 -0
  60. package/dist/components/ui/combobox.js +62 -0
  61. package/dist/components/ui/dialog.d.ts +17 -0
  62. package/dist/components/ui/dialog.js +37 -0
  63. package/dist/components/ui/empty.d.ts +11 -0
  64. package/dist/components/ui/empty.js +33 -0
  65. package/dist/components/ui/field.d.ts +24 -0
  66. package/dist/components/ui/field.js +67 -0
  67. package/dist/components/ui/input-group.d.ts +18 -0
  68. package/dist/components/ui/input-group.js +57 -0
  69. package/dist/components/ui/input.d.ts +3 -0
  70. package/dist/components/ui/input.js +8 -0
  71. package/dist/components/ui/label.d.ts +3 -0
  72. package/dist/components/ui/label.js +7 -0
  73. package/dist/components/ui/popover.d.ts +9 -0
  74. package/dist/components/ui/popover.js +23 -0
  75. package/dist/components/ui/select.d.ts +15 -0
  76. package/dist/components/ui/select.js +35 -0
  77. package/dist/components/ui/separator.d.ts +3 -0
  78. package/dist/components/ui/separator.js +8 -0
  79. package/dist/components/ui/sheet.d.ts +14 -0
  80. package/dist/components/ui/sheet.js +38 -0
  81. package/dist/components/ui/sidebar.d.ts +63 -0
  82. package/dist/components/ui/sidebar.js +255 -0
  83. package/dist/components/ui/skeleton.d.ts +2 -0
  84. package/dist/components/ui/skeleton.js +6 -0
  85. package/dist/components/ui/sonner.d.ts +3 -0
  86. package/dist/components/ui/sonner.js +24 -0
  87. package/dist/components/ui/spinner.d.ts +2 -0
  88. package/dist/components/ui/spinner.js +7 -0
  89. package/dist/components/ui/table.d.ts +13 -0
  90. package/dist/components/ui/table.js +45 -0
  91. package/dist/components/ui/textarea.d.ts +3 -0
  92. package/dist/components/ui/textarea.js +7 -0
  93. package/dist/components/ui/tooltip.d.ts +6 -0
  94. package/dist/components/ui/tooltip.js +16 -0
  95. package/dist/gateway.d.ts +2 -0
  96. package/dist/gateway.js +5 -0
  97. package/dist/hooks/table-url-changes.d.ts +14 -0
  98. package/dist/hooks/table-url-changes.js +32 -0
  99. package/dist/hooks/use-debounced-value.d.ts +1 -0
  100. package/dist/hooks/use-debounced-value.js +12 -0
  101. package/dist/hooks/use-mobile.d.ts +1 -0
  102. package/dist/hooks/use-mobile.js +14 -0
  103. package/dist/hooks/use-table-url-state.d.ts +14 -0
  104. package/dist/hooks/use-table-url-state.js +43 -0
  105. package/dist/index.d.ts +22 -0
  106. package/dist/index.js +28 -0
  107. package/dist/lib/utils.d.ts +1 -0
  108. package/dist/lib/utils.js +1 -0
  109. package/dist/mocks/auth.d.ts +9 -0
  110. package/dist/mocks/auth.js +79 -0
  111. package/dist/mocks/e2e-hooks.d.ts +3 -0
  112. package/dist/mocks/e2e-hooks.js +28 -0
  113. package/dist/mocks/index.d.ts +3 -0
  114. package/dist/mocks/index.js +5 -0
  115. package/dist/mocks/override.d.ts +23 -0
  116. package/dist/mocks/override.js +1 -0
  117. package/dist/routes/login-schema.d.ts +7 -0
  118. package/dist/routes/login-schema.js +13 -0
  119. package/dist/routes/login.d.ts +8 -0
  120. package/dist/routes/login.js +58 -0
  121. package/dist/routes/register-schema.d.ts +9 -0
  122. package/dist/routes/register-schema.js +23 -0
  123. package/dist/routes/register.d.ts +1 -0
  124. package/dist/routes/register.js +58 -0
  125. package/dist/routes/return-path.d.ts +1 -0
  126. package/dist/routes/return-path.js +9 -0
  127. package/dist/testing/index.d.ts +40 -0
  128. package/dist/testing/index.js +103 -0
  129. package/eslint/index.d.ts +11 -0
  130. package/eslint/index.js +179 -0
  131. package/openapi/foundation.yaml +156 -0
  132. package/package.json +158 -0
  133. package/styles/index.css +88 -0
  134. package/styles/theme.css +209 -0
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ import { DayPicker, type DayButton, type Locale } from "react-day-picker";
3
+ import { Button } from "./button.js";
4
+ declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
5
+ buttonVariant?: React.ComponentProps<typeof Button>["variant"];
6
+ }): React.JSX.Element;
7
+ declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
8
+ locale?: Partial<Locale>;
9
+ }): React.JSX.Element;
10
+ export { Calendar, CalendarDayButton };
@@ -0,0 +1,76 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { cn } from "cn";
5
+ import { DayPicker, getDefaultClassNames, } from "react-day-picker";
6
+ import { Button, buttonVariants } from "./button.js";
7
+ import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
8
+ function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
9
+ const defaultClassNames = getDefaultClassNames();
10
+ return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
11
+ formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
12
+ ...formatters,
13
+ }, classNames: {
14
+ root: cn("w-fit", defaultClassNames.root),
15
+ months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
16
+ month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
17
+ nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
18
+ button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
19
+ button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
20
+ month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
21
+ dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
22
+ dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
23
+ dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
24
+ caption_label: cn("font-medium select-none", captionLayout === "label"
25
+ ? "text-sm"
26
+ : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
27
+ month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
28
+ weekdays: cn("flex", defaultClassNames.weekdays),
29
+ weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
30
+ week: cn("mt-2 flex w-full", defaultClassNames.week),
31
+ week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
32
+ week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
33
+ day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
34
+ ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
35
+ : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
36
+ range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
37
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
38
+ range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
39
+ today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
40
+ outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
41
+ disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
42
+ hidden: cn("invisible", defaultClassNames.hidden),
43
+ ...classNames,
44
+ }, components: {
45
+ Root: ({ className, rootRef, ...props }) => {
46
+ return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
47
+ },
48
+ Chevron: ({ className, orientation, ...props }) => {
49
+ if (orientation === "left") {
50
+ return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
51
+ }
52
+ if (orientation === "right") {
53
+ return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
54
+ }
55
+ return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
56
+ },
57
+ DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
58
+ WeekNumber: ({ children, ...props }) => {
59
+ return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
60
+ },
61
+ ...components,
62
+ }, ...props }));
63
+ }
64
+ function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
65
+ const defaultClassNames = getDefaultClassNames();
66
+ const ref = React.useRef(null);
67
+ React.useEffect(() => {
68
+ if (modifiers.focused)
69
+ ref.current?.focus();
70
+ }, [modifiers.focused]);
71
+ return (_jsx(Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
72
+ !modifiers.range_start &&
73
+ !modifiers.range_end &&
74
+ !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
75
+ }
76
+ export { Calendar, CalendarDayButton };
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
3
+ size?: "default" | "sm";
4
+ }): React.JSX.Element;
5
+ declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
6
+ declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
7
+ declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
8
+ declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
9
+ declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
10
+ declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
11
+ export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cn } from "cn";
4
+ function Card({ className, size = "default", ...props }) {
5
+ return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
6
+ }
7
+ function CardHeader({ className, ...props }) {
8
+ return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
9
+ }
10
+ function CardTitle({ className, ...props }) {
11
+ return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
12
+ }
13
+ function CardDescription({ className, ...props }) {
14
+ return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
15
+ }
16
+ function CardAction({ className, ...props }) {
17
+ return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
18
+ }
19
+ function CardContent({ className, ...props }) {
20
+ return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
21
+ }
22
+ function CardFooter({ className, ...props }) {
23
+ return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
24
+ }
25
+ export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
@@ -0,0 +1,24 @@
1
+ import * as React from "react";
2
+ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
3
+ declare const Combobox: typeof ComboboxPrimitive.Root;
4
+ declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
5
+ declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
6
+ declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
7
+ showTrigger?: boolean;
8
+ showClear?: boolean;
9
+ }): React.JSX.Element;
10
+ declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
11
+ declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
12
+ declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element;
13
+ declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
14
+ declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
15
+ declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
16
+ declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
17
+ declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
18
+ declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
19
+ declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
20
+ showRemove?: boolean;
21
+ }): React.JSX.Element;
22
+ declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
23
+ declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
24
+ export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
@@ -0,0 +1,62 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
5
+ import { cn } from "cn";
6
+ import { Button } from "./button.js";
7
+ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group.js";
8
+ import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
9
+ const Combobox = ComboboxPrimitive.Root;
10
+ function ComboboxValue({ ...props }) {
11
+ return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
12
+ }
13
+ function ComboboxTrigger({ className, children, ...props }) {
14
+ return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", "aria-label": "Show options", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
15
+ }
16
+ function ComboboxClear({ className, ...props }) {
17
+ return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", "aria-label": "Clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
18
+ }
19
+ function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
20
+ return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
21
+ }
22
+ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
23
+ return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
24
+ }
25
+ function ComboboxList({ className, ...props }) {
26
+ return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className), ...props }));
27
+ }
28
+ function ComboboxItem({ className, children, ...props }) {
29
+ return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
30
+ }
31
+ function ComboboxGroup({ className, ...props }) {
32
+ return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
33
+ }
34
+ function ComboboxLabel({ className, ...props }) {
35
+ return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
36
+ }
37
+ function ComboboxCollection({ ...props }) {
38
+ return (_jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props }));
39
+ }
40
+ function ComboboxEmpty({ className, ...props }) {
41
+ return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
42
+ }
43
+ function ComboboxSeparator({ className, ...props }) {
44
+ return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
45
+ }
46
+ function ComboboxChips({ className, ...props }) {
47
+ return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
48
+ }
49
+ function ComboboxChip({ className, children, showRemove = true, ...props }) {
50
+ return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove
51
+ // Patched (ui-foundation, Phase G): upstream's icon-only remove
52
+ // button has no accessible name — a critical axe violation. Name
53
+ // it after the chip ("Remove fragile") when the chip is plain text.
54
+ , { "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove", render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
55
+ }
56
+ function ComboboxChipsInput({ className, ...props }) {
57
+ return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
58
+ }
59
+ function useComboboxAnchor() {
60
+ return React.useRef(null);
61
+ }
62
+ export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
3
+ declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
4
+ declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
5
+ declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
6
+ declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
7
+ declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
8
+ declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
9
+ showCloseButton?: boolean;
10
+ }): React.JSX.Element;
11
+ declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
12
+ declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
13
+ showCloseButton?: boolean;
14
+ }): React.JSX.Element;
15
+ declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
16
+ declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
17
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
4
+ import { cn } from "cn";
5
+ import { Button } from "./button.js";
6
+ import { XIcon } from "lucide-react";
7
+ function Dialog({ ...props }) {
8
+ return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
9
+ }
10
+ function DialogTrigger({ ...props }) {
11
+ return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
12
+ }
13
+ function DialogPortal({ ...props }) {
14
+ return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
15
+ }
16
+ function DialogClose({ ...props }) {
17
+ return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
18
+ }
19
+ function DialogOverlay({ className, ...props }) {
20
+ return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
21
+ }
22
+ function DialogContent({ className, children, showCloseButton = true, ...props }) {
23
+ return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
24
+ }
25
+ function DialogHeader({ className, ...props }) {
26
+ return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
27
+ }
28
+ function DialogFooter({ className, showCloseButton = false, children, ...props }) {
29
+ return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" }))] }));
30
+ }
31
+ function DialogTitle({ className, ...props }) {
32
+ return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-heading text-base leading-none font-medium", className), ...props }));
33
+ }
34
+ function DialogDescription({ className, ...props }) {
35
+ return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
36
+ }
37
+ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
@@ -0,0 +1,11 @@
1
+ import { type VariantProps } from "class-variance-authority";
2
+ declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
3
+ declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
4
+ declare const emptyMediaVariants: (props?: ({
5
+ variant?: "default" | "icon" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
8
+ declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
9
+ declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
10
+ declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
11
+ export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
@@ -0,0 +1,33 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cva } from "class-variance-authority";
3
+ import { cn } from "cn";
4
+ function Empty({ className, ...props }) {
5
+ return (_jsx("div", { "data-slot": "empty", className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className), ...props }));
6
+ }
7
+ function EmptyHeader({ className, ...props }) {
8
+ return (_jsx("div", { "data-slot": "empty-header", className: cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
9
+ }
10
+ const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
11
+ variants: {
12
+ variant: {
13
+ default: "bg-transparent",
14
+ icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
15
+ },
16
+ },
17
+ defaultVariants: {
18
+ variant: "default",
19
+ },
20
+ });
21
+ function EmptyMedia({ className, variant = "default", ...props }) {
22
+ return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
23
+ }
24
+ function EmptyTitle({ className, ...props }) {
25
+ return (_jsx("div", { "data-slot": "empty-title", className: cn("font-heading text-sm font-medium tracking-tight", className), ...props }));
26
+ }
27
+ function EmptyDescription({ className, ...props }) {
28
+ return (_jsx("div", { "data-slot": "empty-description", className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
29
+ }
30
+ function EmptyContent({ className, ...props }) {
31
+ return (_jsx("div", { "data-slot": "empty-content", className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className), ...props }));
32
+ }
33
+ export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
@@ -0,0 +1,24 @@
1
+ import { type VariantProps } from "class-variance-authority";
2
+ import { Label } from "./label.js";
3
+ declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
4
+ declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
5
+ variant?: "legend" | "label";
6
+ }): import("react").JSX.Element;
7
+ declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
8
+ declare const fieldVariants: (props?: ({
9
+ orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
10
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
11
+ declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
12
+ declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
13
+ declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
14
+ declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
15
+ declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
16
+ declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
17
+ children?: React.ReactNode;
18
+ }): import("react").JSX.Element;
19
+ declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
20
+ errors?: Array<{
21
+ message?: string;
22
+ } | undefined>;
23
+ }): import("react").JSX.Element | null;
24
+ export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
@@ -0,0 +1,67 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useMemo } from "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "cn";
5
+ import { Label } from "./label.js";
6
+ import { Separator } from "./separator.js";
7
+ function FieldSet({ className, ...props }) {
8
+ return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
9
+ }
10
+ function FieldLegend({ className, variant = "legend", ...props }) {
11
+ return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
12
+ }
13
+ function FieldGroup({ className, ...props }) {
14
+ return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
15
+ }
16
+ const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
17
+ variants: {
18
+ orientation: {
19
+ vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
20
+ horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
21
+ responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
22
+ },
23
+ },
24
+ defaultVariants: {
25
+ orientation: "vertical",
26
+ },
27
+ });
28
+ function Field({ className, orientation = "vertical", ...props }) {
29
+ return (_jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className), ...props }));
30
+ }
31
+ function FieldContent({ className, ...props }) {
32
+ return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className), ...props }));
33
+ }
34
+ function FieldLabel({ className, ...props }) {
35
+ return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
36
+ }
37
+ function FieldTitle({ className, ...props }) {
38
+ return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
39
+ }
40
+ function FieldDescription({ className, ...props }) {
41
+ return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
42
+ }
43
+ function FieldSeparator({ children, className, ...props }) {
44
+ return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
45
+ }
46
+ function FieldError({ className, children, errors, ...props }) {
47
+ const content = useMemo(() => {
48
+ if (children) {
49
+ return children;
50
+ }
51
+ if (!errors?.length) {
52
+ return null;
53
+ }
54
+ const uniqueErrors = [
55
+ ...new Map(errors.map((error) => [error?.message, error])).values(),
56
+ ];
57
+ if (uniqueErrors?.length == 1) {
58
+ return uniqueErrors[0]?.message;
59
+ }
60
+ return (_jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && _jsx("li", { children: error.message }, index)) }));
61
+ }, [children, errors]);
62
+ if (!content) {
63
+ return null;
64
+ }
65
+ return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
66
+ }
67
+ export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
@@ -0,0 +1,18 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import { Button } from "./button.js";
4
+ declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
5
+ declare const inputGroupAddonVariants: (props?: ({
6
+ align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
9
+ declare const inputGroupButtonVariants: (props?: ({
10
+ size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
11
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
12
+ declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
13
+ type?: "button" | "submit" | "reset";
14
+ }): React.JSX.Element;
15
+ declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
16
+ declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
17
+ declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
18
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
@@ -0,0 +1,57 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "cn";
5
+ import { Button } from "./button.js";
6
+ import { Input } from "./input.js";
7
+ import { Textarea } from "./textarea.js";
8
+ function InputGroup({ className, ...props }) {
9
+ return (_jsx("div", { "data-slot": "input-group", role: "group", className: 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]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/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", className), ...props }));
10
+ }
11
+ const inputGroupAddonVariants = 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", {
12
+ variants: {
13
+ align: {
14
+ "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
15
+ "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
16
+ "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
17
+ "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
18
+ },
19
+ },
20
+ defaultVariants: {
21
+ align: "inline-start",
22
+ },
23
+ });
24
+ function InputGroupAddon({ className, align = "inline-start", ...props }) {
25
+ return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
26
+ if (e.target.closest("button")) {
27
+ return;
28
+ }
29
+ e.currentTarget.parentElement?.querySelector("input")?.focus();
30
+ }, ...props }));
31
+ }
32
+ const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
33
+ variants: {
34
+ size: {
35
+ xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
36
+ sm: "",
37
+ "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
38
+ "icon-sm": "size-8 p-0 has-[>svg]:p-0",
39
+ },
40
+ },
41
+ defaultVariants: {
42
+ size: "xs",
43
+ },
44
+ });
45
+ function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
46
+ return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
47
+ }
48
+ function InputGroupText({ className, ...props }) {
49
+ return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
50
+ }
51
+ function InputGroupInput({ className, ...props }) {
52
+ return (_jsx(Input, { "data-slot": "input-group-control", className: 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", className), ...props }));
53
+ }
54
+ function InputGroupTextarea({ className, ...props }) {
55
+ return (_jsx(Textarea, { "data-slot": "input-group-control", className: 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", className), ...props }));
56
+ }
57
+ export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
3
+ export { Input };
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Input as InputPrimitive } from "@base-ui/react/input";
4
+ import { cn } from "cn";
5
+ function Input({ className, type, ...props }) {
6
+ return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
7
+ }
8
+ export { Input };
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare function Label({ className, ...props }: React.ComponentProps<"label">): React.JSX.Element;
3
+ export { Label };
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cn } from "cn";
4
+ function Label({ className, ...props }) {
5
+ return (_jsx("label", { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
6
+ }
7
+ export { Label };
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
3
+ declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
4
+ declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
5
+ declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
6
+ declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
7
+ declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
8
+ declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
9
+ export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4
+ import { cn } from "cn";
5
+ function Popover({ ...props }) {
6
+ return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
7
+ }
8
+ function PopoverTrigger({ ...props }) {
9
+ return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
10
+ }
11
+ function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
12
+ return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
13
+ }
14
+ function PopoverHeader({ className, ...props }) {
15
+ return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
16
+ }
17
+ function PopoverTitle({ className, ...props }) {
18
+ return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn("font-medium", className), ...props }));
19
+ }
20
+ function PopoverDescription({ className, ...props }) {
21
+ return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn("text-muted-foreground", className), ...props }));
22
+ }
23
+ export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
@@ -0,0 +1,15 @@
1
+ import * as React from "react";
2
+ import { Select as SelectPrimitive } from "@base-ui/react/select";
3
+ declare const Select: typeof SelectPrimitive.Root;
4
+ declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
5
+ declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
6
+ declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
7
+ size?: "sm" | "default";
8
+ }): React.JSX.Element;
9
+ declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
10
+ declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
11
+ declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
12
+ declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
13
+ declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
14
+ declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
15
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };