@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,35 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { Select as SelectPrimitive } from "@base-ui/react/select";
5
+ import { cn } from "cn";
6
+ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
7
+ const Select = SelectPrimitive.Root;
8
+ function SelectGroup({ className, ...props }) {
9
+ return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props }));
10
+ }
11
+ function SelectValue({ className, ...props }) {
12
+ return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("flex flex-1 text-left", className), ...props }));
13
+ }
14
+ function SelectTrigger({ className, size = "default", children, ...props }) {
15
+ return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
16
+ }
17
+ function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
18
+ return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
19
+ }
20
+ function SelectLabel({ className, ...props }) {
21
+ return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
22
+ }
23
+ function SelectItem({ className, children, ...props }) {
24
+ return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.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" }) })] }));
25
+ }
26
+ function SelectSeparator({ className, ...props }) {
27
+ return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
28
+ }
29
+ function SelectScrollUpButton({ className, ...props }) {
30
+ return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
31
+ }
32
+ function SelectScrollDownButton({ className, ...props }) {
33
+ return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
34
+ }
35
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,3 @@
1
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
2
+ declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
3
+ export { Separator };
@@ -0,0 +1,8 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
4
+ import { cn } from "cn";
5
+ function Separator({ className, orientation = "horizontal", ...props }) {
6
+ return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
7
+ }
8
+ export { Separator };
@@ -0,0 +1,14 @@
1
+ import * as React from "react";
2
+ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
3
+ declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
4
+ declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): React.JSX.Element;
5
+ declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): React.JSX.Element;
6
+ declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
7
+ side?: "top" | "right" | "bottom" | "left";
8
+ showCloseButton?: boolean;
9
+ }): React.JSX.Element;
10
+ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
11
+ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
12
+ declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): React.JSX.Element;
13
+ declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): React.JSX.Element;
14
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,38 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import * as React from "react";
4
+ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
5
+ import { cn } from "cn";
6
+ import { Button } from "./button.js";
7
+ import { XIcon } from "lucide-react";
8
+ function Sheet({ ...props }) {
9
+ return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
10
+ }
11
+ function SheetTrigger({ ...props }) {
12
+ return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
13
+ }
14
+ function SheetClose({ ...props }) {
15
+ return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
16
+ }
17
+ function SheetPortal({ ...props }) {
18
+ return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
19
+ }
20
+ function SheetOverlay({ className, ...props }) {
21
+ return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), ...props }));
22
+ }
23
+ function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
24
+ return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
25
+ }
26
+ function SheetHeader({ className, ...props }) {
27
+ return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-4", className), ...props }));
28
+ }
29
+ function SheetFooter({ className, ...props }) {
30
+ return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
31
+ }
32
+ function SheetTitle({ className, ...props }) {
33
+ return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-heading text-base font-medium text-foreground", className), ...props }));
34
+ }
35
+ function SheetDescription({ className, ...props }) {
36
+ return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
37
+ }
38
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,63 @@
1
+ import * as React from "react";
2
+ import { useRender } from "@base-ui/react/use-render";
3
+ import { type VariantProps } from "class-variance-authority";
4
+ import { Button } from "./button.js";
5
+ import { Input } from "./input.js";
6
+ import { Separator } from "./separator.js";
7
+ import { TooltipContent } from "./tooltip.js";
8
+ type SidebarContextProps = {
9
+ state: "expanded" | "collapsed";
10
+ open: boolean;
11
+ setOpen: (open: boolean) => void;
12
+ openMobile: boolean;
13
+ setOpenMobile: (open: boolean) => void;
14
+ isMobile: boolean;
15
+ toggleSidebar: () => void;
16
+ };
17
+ declare function useSidebar(): SidebarContextProps;
18
+ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
19
+ defaultOpen?: boolean;
20
+ open?: boolean;
21
+ onOpenChange?: (open: boolean) => void;
22
+ }): React.JSX.Element;
23
+ declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
24
+ side?: "left" | "right";
25
+ variant?: "sidebar" | "floating" | "inset";
26
+ collapsible?: "offcanvas" | "icon" | "none";
27
+ }): React.JSX.Element;
28
+ declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
29
+ declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
30
+ declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
31
+ declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
32
+ declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
33
+ declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
34
+ declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
35
+ declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
36
+ declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
37
+ declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
38
+ declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
39
+ declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
40
+ declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
41
+ declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
42
+ declare const sidebarMenuButtonVariants: (props?: ({
43
+ variant?: "default" | "outline" | null | undefined;
44
+ size?: "default" | "sm" | "lg" | null | undefined;
45
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
46
+ declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
47
+ isActive?: boolean;
48
+ tooltip?: string | React.ComponentProps<typeof TooltipContent>;
49
+ } & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
50
+ declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
51
+ showOnHover?: boolean;
52
+ }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
53
+ declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
54
+ declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
55
+ showIcon?: boolean;
56
+ }): React.JSX.Element;
57
+ declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
58
+ declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
59
+ declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
60
+ size?: "sm" | "md";
61
+ isActive?: boolean;
62
+ }): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
63
+ export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
@@ -0,0 +1,255 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { mergeProps } from "@base-ui/react/merge-props";
4
+ import { useRender } from "@base-ui/react/use-render";
5
+ import { cva } from "class-variance-authority";
6
+ import { cn } from "cn";
7
+ import { useIsMobile } from "../../hooks/use-mobile.js";
8
+ import { Button } from "./button.js";
9
+ import { Input } from "./input.js";
10
+ import { Separator } from "./separator.js";
11
+ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./sheet.js";
12
+ import { Skeleton } from "./skeleton.js";
13
+ import { Tooltip, TooltipContent, TooltipTrigger, } from "./tooltip.js";
14
+ import { PanelLeftIcon } from "lucide-react";
15
+ const SIDEBAR_COOKIE_NAME = "sidebar_state";
16
+ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
17
+ const SIDEBAR_WIDTH = "16rem";
18
+ const SIDEBAR_WIDTH_MOBILE = "18rem";
19
+ const SIDEBAR_WIDTH_ICON = "3rem";
20
+ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
21
+ const SidebarContext = React.createContext(null);
22
+ function useSidebar() {
23
+ const context = React.useContext(SidebarContext);
24
+ if (!context) {
25
+ throw new Error("useSidebar must be used within a SidebarProvider.");
26
+ }
27
+ return context;
28
+ }
29
+ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
30
+ const isMobile = useIsMobile();
31
+ const [openMobile, setOpenMobile] = React.useState(false);
32
+ // This is the internal state of the sidebar.
33
+ // We use openProp and setOpenProp for control from outside the component.
34
+ const [_open, _setOpen] = React.useState(defaultOpen);
35
+ const open = openProp ?? _open;
36
+ const setOpen = React.useCallback((value) => {
37
+ const openState = typeof value === "function" ? value(open) : value;
38
+ if (setOpenProp) {
39
+ setOpenProp(openState);
40
+ }
41
+ else {
42
+ _setOpen(openState);
43
+ }
44
+ // This sets the cookie to keep the sidebar state.
45
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
46
+ }, [setOpenProp, open]);
47
+ // Helper to toggle the sidebar.
48
+ const toggleSidebar = React.useCallback(() => {
49
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
50
+ }, [isMobile, setOpen, setOpenMobile]);
51
+ // Adds a keyboard shortcut to toggle the sidebar.
52
+ React.useEffect(() => {
53
+ const handleKeyDown = (event) => {
54
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
55
+ (event.metaKey || event.ctrlKey)) {
56
+ event.preventDefault();
57
+ toggleSidebar();
58
+ }
59
+ };
60
+ window.addEventListener("keydown", handleKeyDown);
61
+ return () => window.removeEventListener("keydown", handleKeyDown);
62
+ }, [toggleSidebar]);
63
+ // We add a state so that we can do data-state="expanded" or "collapsed".
64
+ // This makes it easier to style the sidebar with Tailwind classes.
65
+ const state = open ? "expanded" : "collapsed";
66
+ const contextValue = React.useMemo(() => ({
67
+ state,
68
+ open,
69
+ setOpen,
70
+ isMobile,
71
+ openMobile,
72
+ setOpenMobile,
73
+ toggleSidebar,
74
+ }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
75
+ return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
76
+ "--sidebar-width": SIDEBAR_WIDTH,
77
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
78
+ ...style,
79
+ }, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }));
80
+ }
81
+ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
82
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
83
+ if (collapsible === "none") {
84
+ return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
85
+ }
86
+ if (isMobile) {
87
+ return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
88
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
89
+ }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
90
+ }
91
+ return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
92
+ ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
93
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", "data-side": side, className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
94
+ // Adjust the padding for floating and inset variants.
95
+ variant === "floating" || variant === "inset"
96
+ ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
97
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", children: children }) })] }));
98
+ }
99
+ function SidebarTrigger({ className, onClick, ...props }) {
100
+ const { toggleSidebar } = useSidebar();
101
+ return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
102
+ onClick?.(event);
103
+ toggleSidebar();
104
+ }, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
105
+ }
106
+ function SidebarRail({ className, ...props }) {
107
+ const { toggleSidebar } = useSidebar();
108
+ return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
109
+ }
110
+ function SidebarInset({ className, ...props }) {
111
+ return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
112
+ }
113
+ function SidebarInput({ className, ...props }) {
114
+ return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
115
+ }
116
+ function SidebarHeader({ className, ...props }) {
117
+ return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
118
+ }
119
+ function SidebarFooter({ className, ...props }) {
120
+ return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
121
+ }
122
+ function SidebarSeparator({ className, ...props }) {
123
+ return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props }));
124
+ }
125
+ function SidebarContent({ className, ...props }) {
126
+ return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
127
+ }
128
+ function SidebarGroup({ className, ...props }) {
129
+ return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
130
+ }
131
+ function SidebarGroupLabel({ className, render, ...props }) {
132
+ return useRender({
133
+ defaultTagName: "div",
134
+ props: mergeProps({
135
+ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
136
+ }, props),
137
+ render,
138
+ state: {
139
+ slot: "sidebar-group-label",
140
+ sidebar: "group-label",
141
+ },
142
+ });
143
+ }
144
+ function SidebarGroupAction({ className, render, ...props }) {
145
+ return useRender({
146
+ defaultTagName: "button",
147
+ props: mergeProps({
148
+ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
149
+ }, props),
150
+ render,
151
+ state: {
152
+ slot: "sidebar-group-action",
153
+ sidebar: "group-action",
154
+ },
155
+ });
156
+ }
157
+ function SidebarGroupContent({ className, ...props }) {
158
+ return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
159
+ }
160
+ function SidebarMenu({ className, ...props }) {
161
+ return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-0", className), ...props }));
162
+ }
163
+ function SidebarMenuItem({ className, ...props }) {
164
+ return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
165
+ }
166
+ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
167
+ variants: {
168
+ variant: {
169
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
170
+ outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
171
+ },
172
+ size: {
173
+ default: "h-8 text-sm",
174
+ sm: "h-7 text-xs",
175
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
176
+ },
177
+ },
178
+ defaultVariants: {
179
+ variant: "default",
180
+ size: "default",
181
+ },
182
+ });
183
+ function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
184
+ const { isMobile, state } = useSidebar();
185
+ const comp = useRender({
186
+ defaultTagName: "button",
187
+ props: mergeProps({
188
+ className: cn(sidebarMenuButtonVariants({ variant, size }), className),
189
+ }, props),
190
+ render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
191
+ state: {
192
+ slot: "sidebar-menu-button",
193
+ sidebar: "menu-button",
194
+ size,
195
+ active: isActive,
196
+ },
197
+ });
198
+ if (!tooltip) {
199
+ return comp;
200
+ }
201
+ if (typeof tooltip === "string") {
202
+ tooltip = {
203
+ children: tooltip,
204
+ };
205
+ }
206
+ return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
207
+ }
208
+ function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
209
+ return useRender({
210
+ defaultTagName: "button",
211
+ props: mergeProps({
212
+ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
213
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
214
+ }, props),
215
+ render,
216
+ state: {
217
+ slot: "sidebar-menu-action",
218
+ sidebar: "menu-action",
219
+ },
220
+ });
221
+ }
222
+ function SidebarMenuBadge({ className, ...props }) {
223
+ return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className), ...props }));
224
+ }
225
+ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
226
+ // Random width between 50 to 90%.
227
+ const [width] = React.useState(() => {
228
+ return `${Math.floor(Math.random() * 40) + 50}%`;
229
+ });
230
+ return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
231
+ "--skeleton-width": width,
232
+ } })] }));
233
+ }
234
+ function SidebarMenuSub({ className, ...props }) {
235
+ return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className), ...props }));
236
+ }
237
+ function SidebarMenuSubItem({ className, ...props }) {
238
+ return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
239
+ }
240
+ function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
241
+ return useRender({
242
+ defaultTagName: "a",
243
+ props: mergeProps({
244
+ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
245
+ }, props),
246
+ render,
247
+ state: {
248
+ slot: "sidebar-menu-sub-button",
249
+ sidebar: "menu-sub-button",
250
+ size,
251
+ active: isActive,
252
+ },
253
+ });
254
+ }
255
+ export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
@@ -0,0 +1,2 @@
1
+ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
2
+ export { Skeleton };
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "cn";
3
+ function Skeleton({ className, ...props }) {
4
+ return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-muted", className), ...props }));
5
+ }
6
+ export { Skeleton };
@@ -0,0 +1,3 @@
1
+ import { type ToasterProps } from "sonner";
2
+ declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
3
+ export { Toaster };
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useTheme } from "next-themes";
3
+ import { Toaster as Sonner } from "sonner";
4
+ import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react";
5
+ const Toaster = ({ ...props }) => {
6
+ const { theme = "system" } = useTheme();
7
+ return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
8
+ success: (_jsx(CircleCheckIcon, { className: "size-4" })),
9
+ info: (_jsx(InfoIcon, { className: "size-4" })),
10
+ warning: (_jsx(TriangleAlertIcon, { className: "size-4" })),
11
+ error: (_jsx(OctagonXIcon, { className: "size-4" })),
12
+ loading: (_jsx(Loader2Icon, { className: "size-4 animate-spin" })),
13
+ }, style: {
14
+ "--normal-bg": "var(--popover)",
15
+ "--normal-text": "var(--popover-foreground)",
16
+ "--normal-border": "var(--border)",
17
+ "--border-radius": "var(--radius)",
18
+ }, toastOptions: {
19
+ classNames: {
20
+ toast: "cn-toast",
21
+ },
22
+ }, ...props }));
23
+ };
24
+ export { Toaster };
@@ -0,0 +1,2 @@
1
+ declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
2
+ export { Spinner };
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "cn";
3
+ import { Loader2Icon } from "lucide-react";
4
+ function Spinner({ className, ...props }) {
5
+ return (_jsx(Loader2Icon, { "data-slot": "spinner", role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
6
+ }
7
+ export { Spinner };
@@ -0,0 +1,13 @@
1
+ import * as React from "react";
2
+ declare function Table({ className, containerRef, containerClassName, ...props }: React.ComponentProps<"table"> & {
3
+ containerRef?: React.Ref<HTMLDivElement>;
4
+ containerClassName?: string;
5
+ }): React.JSX.Element;
6
+ declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
7
+ declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
8
+ declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
9
+ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
10
+ declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
11
+ declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
12
+ declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
13
+ export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
@@ -0,0 +1,45 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cn } from "cn";
4
+ // `containerRef`/`containerClassName` are this repo's patch to the upstream
5
+ // primitive. Upstream wraps the <table> in a scroll container that nothing
6
+ // outside can reach, so anything keyed to the scroll viewport — a sticky
7
+ // scrollbar, a pinned column, an IntersectionObserver — had to find that
8
+ // div with querySelector('[data-slot="table-container"]') and re-find it on
9
+ // every render. Forwarding a real ref is the same capability without the
10
+ // DOM lookup. See src/components/app/data-table.tsx's `pinFirstColumn`.
11
+ //
12
+ // A local patch to a shadcn primitive: re-running `shadcn add table` here
13
+ // would overwrite it. Diff against upstream before taking a new version.
14
+ function Table({ className, containerRef, containerClassName, ...props }) {
15
+ return (_jsx("div", { ref: containerRef, "data-slot": "table-container", className: cn("relative w-full overflow-x-auto", containerClassName), children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
16
+ }
17
+ function TableHeader({ className, ...props }) {
18
+ return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
19
+ }
20
+ function TableBody({ className, ...props }) {
21
+ return (_jsx("tbody", { "data-slot": "table-body",
22
+ // Zebra striping, scoped to the body so the header is never tinted.
23
+ // NOTE the specificity trap this creates: `tr:nth-child(even)` is
24
+ // (0,2,1) while any `tr:hover` rule is (0,2,0), so the stripe
25
+ // outranks hover and even rows would not light up — a whole-row
26
+ // hover here lights only the odd rows. data-table.tsx handles this
27
+ // by highlighting a single pinned cell instead of the row.
28
+ className: cn("[&_tr:last-child]:border-0 [&_tr:nth-child(even)]:bg-muted/40", className), ...props }));
29
+ }
30
+ function TableFooter({ className, ...props }) {
31
+ return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
32
+ }
33
+ function TableRow({ className, ...props }) {
34
+ return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
35
+ }
36
+ function TableHead({ className, ...props }) {
37
+ return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className), ...props }));
38
+ }
39
+ function TableCell({ className, ...props }) {
40
+ return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
41
+ }
42
+ function TableCaption({ className, ...props }) {
43
+ return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
44
+ }
45
+ export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
3
+ export { Textarea };
@@ -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 Textarea({ className, ...props }) {
5
+ return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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 }));
6
+ }
7
+ export { Textarea };
@@ -0,0 +1,6 @@
1
+ import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
2
+ declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
3
+ declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
4
+ declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
5
+ declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
6
+ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
@@ -0,0 +1,16 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
3
+ import { cn } from "cn";
4
+ function TooltipProvider({ delay = 0, ...props }) {
5
+ return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
6
+ }
7
+ function Tooltip({ ...props }) {
8
+ return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
9
+ }
10
+ function TooltipTrigger({ ...props }) {
11
+ return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
12
+ }
13
+ function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
14
+ return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 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=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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, _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
15
+ }
16
+ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
@@ -0,0 +1,2 @@
1
+ export { networkError, safeFetch, toAppError } from './api/gateway/errors.js';
2
+ export type { ApiResponse } from './api/transport/index.js';
@@ -0,0 +1,5 @@
1
+ // `@tristan2828/ui-foundation/gateway` — what an app's own gateway modules
2
+ // (src/api/gateway/<entity>.ts) build on: the single fetch path and the
3
+ // wire-error -> AppError translation. Lint allows importing this only from
4
+ // src/api/gateway/, which is what keeps every other layer off the network.
5
+ export { networkError, safeFetch, toAppError } from './api/gateway/errors.js';