@nadicodeai/ui 0.3.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -1
- package/README.md +4 -2
- package/dist/components/accordion.d.ts +15 -5
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +34 -9
- package/dist/components/ai-elements/chain-of-thought.js +1 -1
- package/dist/components/ai-elements/mic-selector.js +1 -1
- package/dist/components/ai-elements/plan.d.ts +3 -2
- package/dist/components/ai-elements/plan.d.ts.map +1 -1
- package/dist/components/ai-elements/reasoning.js +1 -1
- package/dist/components/ai-elements/stack-trace.js +1 -1
- package/dist/components/ai-elements/transcription.js +1 -1
- package/dist/components/ai-elements/voice-selector.d.ts +2 -1
- package/dist/components/ai-elements/voice-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/voice-selector.js +1 -1
- package/dist/components/alert-dialog.d.ts +10 -9
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +16 -13
- package/dist/components/aspect-ratio.d.ts +3 -2
- package/dist/components/aspect-ratio.d.ts.map +1 -1
- package/dist/components/aspect-ratio.js +6 -3
- package/dist/components/avatar.d.ts +5 -5
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +5 -5
- package/dist/components/badge.js +1 -1
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/button-group.js +1 -1
- package/dist/components/button.d.ts +4 -2
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +21 -17
- package/dist/components/checkbox.d.ts +2 -3
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +3 -3
- package/dist/components/collapsible.d.ts +8 -4
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +16 -6
- package/dist/components/command.d.ts +4 -3
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +13 -12
- package/dist/components/context-menu.d.ts +24 -15
- package/dist/components/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu.js +38 -28
- package/dist/components/dialog.d.ts +10 -9
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +11 -10
- package/dist/components/direction.d.ts +6 -5
- package/dist/components/direction.d.ts.map +1 -1
- package/dist/components/direction.js +3 -4
- package/dist/components/drawer.d.ts +22 -10
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +70 -12
- package/dist/components/dropdown-menu.d.ts +25 -16
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +40 -30
- package/dist/components/form.d.ts +3 -3
- package/dist/components/form.d.ts.map +1 -1
- package/dist/components/form.js +1 -1
- package/dist/components/hover-card.d.ts +8 -4
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +12 -7
- package/dist/components/item.js +1 -1
- package/dist/components/label.d.ts +1 -2
- package/dist/components/label.d.ts.map +1 -1
- package/dist/components/label.js +1 -2
- package/dist/components/menubar.d.ts +21 -18
- package/dist/components/menubar.d.ts.map +1 -1
- package/dist/components/menubar.js +25 -23
- package/dist/components/navigation-menu.d.ts +16 -12
- package/dist/components/navigation-menu.d.ts.map +1 -1
- package/dist/components/navigation-menu.js +16 -13
- package/dist/components/popover.d.ts +11 -8
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +33 -12
- package/dist/components/progress.d.ts +7 -4
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +17 -5
- package/dist/components/radio-group.d.ts +4 -4
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +4 -4
- package/dist/components/scroll-area.d.ts +3 -3
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +2 -4
- package/dist/components/select.d.ts +11 -11
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +14 -18
- package/dist/components/separator.d.ts +2 -3
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +3 -3
- package/dist/components/sheet.d.ts +8 -7
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +10 -12
- package/dist/components/sidebar.js +1 -1
- package/dist/components/slider.d.ts +2 -3
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +10 -7
- package/dist/components/switch.d.ts +3 -4
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +2 -2
- package/dist/components/tabs.d.ts +5 -6
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +5 -5
- package/dist/components/theme-mode-switcher.js +1 -1
- package/dist/components/toggle-group.d.ts +12 -4
- package/dist/components/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group.js +29 -7
- package/dist/components/toggle.d.ts +3 -3
- package/dist/components/toggle.d.ts.map +1 -1
- package/dist/components/toggle.js +9 -8
- package/dist/components/tooltip.d.ts +8 -6
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +7 -6
- package/dist/hooks/use-controllable-state.d.ts +9 -0
- package/dist/hooks/use-controllable-state.d.ts.map +1 -0
- package/dist/hooks/use-controllable-state.js +25 -0
- package/dist/lib/base-render.d.ts +14 -0
- package/dist/lib/base-render.d.ts.map +1 -0
- package/dist/lib/base-render.js +16 -0
- package/dist/lib/slot.d.ts +8 -0
- package/dist/lib/slot.d.ts.map +1 -0
- package/dist/lib/slot.js +17 -0
- package/docs/agents/nadicodeai-ui.md +1 -1
- package/docs/migration/base-ui-migration.md +49 -0
- package/llms.txt +2 -2
- package/package.json +3 -6
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
|
|
1
|
+
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
2
|
+
declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
|
|
4
3
|
export { Separator };
|
|
5
4
|
//# sourceMappingURL=separator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAI1E,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,+BAY1B;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Separator as SeparatorPrimitive } from "
|
|
3
|
+
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
function Separator({ className, orientation = "horizontal",
|
|
6
|
-
return (_jsx(SeparatorPrimitive
|
|
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
7
|
}
|
|
8
8
|
export { Separator };
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Dialog as SheetPrimitive } from "
|
|
3
|
-
|
|
4
|
-
declare function
|
|
5
|
-
declare function
|
|
6
|
-
declare function
|
|
2
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
import { type WithAsChild } from "../lib/base-render";
|
|
4
|
+
declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
|
|
5
|
+
declare function SheetTrigger({ ...props }: WithAsChild<SheetPrimitive.Trigger.Props>): React.JSX.Element;
|
|
6
|
+
declare function SheetClose({ ...props }: WithAsChild<SheetPrimitive.Close.Props>): React.JSX.Element;
|
|
7
|
+
declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
|
|
7
8
|
side?: "top" | "right" | "bottom" | "left";
|
|
8
9
|
showCloseButton?: boolean;
|
|
9
10
|
}): React.JSX.Element;
|
|
10
11
|
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
12
|
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
12
|
-
declare function SheetTitle({ className, ...props }:
|
|
13
|
-
declare function SheetDescription({ className, ...props }:
|
|
13
|
+
declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): React.JSX.Element;
|
|
14
|
+
declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): React.JSX.Element;
|
|
14
15
|
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
15
16
|
//# sourceMappingURL=sheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEhE,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAKvE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,qBAO5E;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,qBAIxE;AAmBD,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAiCA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAWtE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,qBAQlC;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}
|
package/dist/components/sheet.js
CHANGED
|
@@ -1,38 +1,36 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
4
|
+
import { withAsChildRender } from "../lib/base-render.js";
|
|
5
5
|
import { cn } from "../lib/utils.js";
|
|
6
|
+
import { Button } from "./button.js";
|
|
7
|
+
import { XIcon } from "lucide-react";
|
|
6
8
|
function Sheet({ ...props }) {
|
|
7
9
|
return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
8
10
|
}
|
|
9
11
|
function SheetTrigger({ ...props }) {
|
|
10
|
-
return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
|
|
12
|
+
return (_jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...withAsChildRender(props) }));
|
|
11
13
|
}
|
|
12
14
|
function SheetClose({ ...props }) {
|
|
13
|
-
return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
|
|
15
|
+
return (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...withAsChildRender(props) }));
|
|
14
16
|
}
|
|
15
17
|
function SheetPortal({ ...props }) {
|
|
16
18
|
return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
17
19
|
}
|
|
18
20
|
function SheetOverlay({ className, ...props }) {
|
|
19
|
-
return (_jsx(SheetPrimitive.
|
|
21
|
+
return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-foreground/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), ...props }));
|
|
20
22
|
}
|
|
21
23
|
function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
|
|
22
|
-
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.
|
|
23
|
-
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", side === "left" &&
|
|
24
|
-
"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", side === "top" &&
|
|
25
|
-
"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
|
|
26
|
-
"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
|
|
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" })] }))] })] }));
|
|
27
25
|
}
|
|
28
26
|
function SheetHeader({ className, ...props }) {
|
|
29
|
-
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-
|
|
27
|
+
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-4", className), ...props }));
|
|
30
28
|
}
|
|
31
29
|
function SheetFooter({ className, ...props }) {
|
|
32
30
|
return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
|
|
33
31
|
}
|
|
34
32
|
function SheetTitle({ className, ...props }) {
|
|
35
|
-
return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-
|
|
33
|
+
return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("text-base font-medium text-foreground", className), ...props }));
|
|
36
34
|
}
|
|
37
35
|
function SheetDescription({ className, ...props }) {
|
|
38
36
|
return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import { PanelLeftIcon } from "lucide-react";
|
|
6
|
-
import { Slot } from "
|
|
6
|
+
import { Slot } from "../lib/slot.js";
|
|
7
7
|
import { useIsMobile } from "../hooks/use-mobile.js";
|
|
8
8
|
import { cn } from "../lib/utils.js";
|
|
9
9
|
import { Button } from "./button.js";
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): React.JSX.Element;
|
|
1
|
+
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
|
|
2
|
+
declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
|
|
4
3
|
export { Slider };
|
|
5
4
|
//# sourceMappingURL=slider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/components/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIjE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,+BA0C5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
4
|
-
import { Slider as SliderPrimitive } from "radix-ui";
|
|
3
|
+
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
|
|
5
4
|
import { cn } from "../lib/utils.js";
|
|
6
5
|
function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
|
|
7
|
-
const _values =
|
|
6
|
+
const _values = Array.isArray(value)
|
|
8
7
|
? value
|
|
9
|
-
:
|
|
10
|
-
?
|
|
11
|
-
:
|
|
12
|
-
|
|
8
|
+
: typeof value === "number"
|
|
9
|
+
? [value]
|
|
10
|
+
: Array.isArray(defaultValue)
|
|
11
|
+
? defaultValue
|
|
12
|
+
: typeof defaultValue === "number"
|
|
13
|
+
? [defaultValue]
|
|
14
|
+
: [min];
|
|
15
|
+
return (_jsx(SliderPrimitive.Root, { className: cn("data-horizontal:w-full data-vertical:h-full", className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
|
|
13
16
|
}
|
|
14
17
|
export { Slider };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
|
1
|
+
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
|
2
|
+
declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
|
|
4
3
|
size?: "sm" | "default";
|
|
5
|
-
}):
|
|
4
|
+
}): import("react").JSX.Element;
|
|
6
5
|
export { Switch };
|
|
7
6
|
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAIjE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,+BAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Switch as SwitchPrimitive } from "
|
|
3
|
+
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
5
|
function Switch({ className, size = "default", ...props }) {
|
|
6
|
-
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent
|
|
6
|
+
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-checked:bg-primary data-unchecked:bg-input data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0" }) }));
|
|
7
7
|
}
|
|
8
8
|
export { Switch };
|
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
|
|
4
|
-
declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
|
|
3
|
+
declare function Tabs({ className, orientation, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
|
|
5
4
|
declare const tabsListVariants: (props?: ({
|
|
6
5
|
variant?: "line" | "default" | null | undefined;
|
|
7
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
declare function TabsList({ className, variant, ...props }:
|
|
9
|
-
declare function TabsTrigger({ className, ...props }:
|
|
10
|
-
declare function TabsContent({ className, ...props }:
|
|
7
|
+
declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>): import("react").JSX.Element;
|
|
8
|
+
declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
|
|
9
|
+
declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
|
|
11
10
|
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
|
|
12
11
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,+BAa1B;AAED,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,+BASlE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,+BAcpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,KAAK,CAAC,KAAK,+BAQtE;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
3
4
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
5
5
|
import { cn } from "../lib/utils.js";
|
|
6
6
|
function Tabs({ className, orientation = "horizontal", ...props }) {
|
|
7
|
-
return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex gap-2 data-
|
|
7
|
+
return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className), ...props }));
|
|
8
8
|
}
|
|
9
|
-
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-
|
|
9
|
+
const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
12
12
|
default: "bg-muted",
|
|
@@ -21,9 +21,9 @@ function TabsList({ className, variant = "default", ...props }) {
|
|
|
21
21
|
return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function TabsTrigger({ className, ...props }) {
|
|
24
|
-
return (_jsx(TabsPrimitive.
|
|
24
|
+
return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function TabsContent({ className, ...props }) {
|
|
27
|
-
return (_jsx(TabsPrimitive.
|
|
27
|
+
return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
|
|
28
28
|
}
|
|
29
29
|
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
|
|
@@ -12,7 +12,7 @@ const themeModeIcons = {
|
|
|
12
12
|
};
|
|
13
13
|
function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, value, ...props }) {
|
|
14
14
|
return (_jsx(ToggleGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextValue) => {
|
|
15
|
-
if (isThemeMode(nextValue)) {
|
|
15
|
+
if (typeof nextValue === "string" && isThemeMode(nextValue)) {
|
|
16
16
|
onValueChange(nextValue);
|
|
17
17
|
}
|
|
18
18
|
}, type: "single", value: value, variant: "outline", ...props, children: themeModes.map((mode) => {
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
3
|
+
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
|
2
4
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
|
|
4
5
|
import { toggleVariants } from "./toggle";
|
|
5
|
-
|
|
6
|
+
type ToggleGroupCompatibilityValue = string | readonly string[];
|
|
7
|
+
type ToggleGroupCompatibilityProps = Omit<ToggleGroupPrimitive.Props<string>, "defaultValue" | "multiple" | "onValueChange" | "value"> & VariantProps<typeof toggleVariants> & {
|
|
8
|
+
defaultValue?: ToggleGroupCompatibilityValue;
|
|
9
|
+
multiple?: boolean;
|
|
10
|
+
onValueChange?: (value: string | string[]) => void;
|
|
6
11
|
spacing?: number;
|
|
7
|
-
|
|
8
|
-
|
|
12
|
+
type?: "single" | "multiple";
|
|
13
|
+
value?: ToggleGroupCompatibilityValue;
|
|
14
|
+
};
|
|
15
|
+
declare function ToggleGroup({ className, defaultValue, multiple, onValueChange, variant, size, spacing, style, type, value, orientation, children, ...props }: ToggleGroupCompatibilityProps): React.JSX.Element;
|
|
16
|
+
declare function ToggleGroupItem({ className, children, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
|
|
9
17
|
export { ToggleGroup, ToggleGroupItem };
|
|
10
18
|
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AACjF,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAcpD,KAAK,6BAA6B,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAA;AAE/D,KAAK,6BAA6B,GAAG,IAAI,CACvC,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,EAClC,cAAc,GAAG,UAAU,GAAG,eAAe,GAAG,OAAO,CACxD,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,YAAY,CAAC,EAAE,6BAA6B,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC5B,KAAK,CAAC,EAAE,6BAA6B,CAAA;CACtC,CAAA;AAcH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,OAAO,EACP,IAAI,EACJ,OAAW,EACX,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAA0B,EAC1B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,6BAA6B,qBAoD/B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,qBAsB7D;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -1,22 +1,44 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
5
|
+
import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
|
|
5
6
|
import { cn } from "../lib/utils.js";
|
|
6
7
|
import { toggleVariants } from "./toggle.js";
|
|
7
8
|
const ToggleGroupContext = React.createContext({
|
|
8
9
|
size: "default",
|
|
9
10
|
variant: "default",
|
|
10
|
-
spacing:
|
|
11
|
+
spacing: 2,
|
|
12
|
+
orientation: "horizontal",
|
|
11
13
|
});
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
+
function toBaseValue(value) {
|
|
15
|
+
if (value === undefined) {
|
|
16
|
+
return undefined;
|
|
17
|
+
}
|
|
18
|
+
if (Array.isArray(value)) {
|
|
19
|
+
return value;
|
|
20
|
+
}
|
|
21
|
+
return value === "" ? [] : [value];
|
|
14
22
|
}
|
|
15
|
-
function
|
|
23
|
+
function ToggleGroup({ className, defaultValue, multiple, onValueChange, variant, size, spacing = 2, style, type, value, orientation = "horizontal", children, ...props }) {
|
|
24
|
+
const isMultiple = multiple ?? type === "multiple";
|
|
25
|
+
const baseDefaultValue = React.useMemo(() => toBaseValue(defaultValue), [defaultValue]);
|
|
26
|
+
const baseValue = React.useMemo(() => toBaseValue(value), [value]);
|
|
27
|
+
const handleValueChange = React.useCallback((nextValue) => {
|
|
28
|
+
onValueChange?.(isMultiple ? nextValue : (nextValue[0] ?? ""));
|
|
29
|
+
}, [isMultiple, onValueChange]);
|
|
30
|
+
const groupStyle = React.useMemo(() => ({
|
|
31
|
+
...style,
|
|
32
|
+
"--gap": spacing,
|
|
33
|
+
}), [spacing, style]);
|
|
34
|
+
const contextValue = React.useMemo(() => ({ variant, size, spacing, orientation }), [orientation, size, spacing, variant]);
|
|
35
|
+
return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, defaultValue: baseDefaultValue, multiple: isMultiple, onValueChange: handleValueChange, orientation: orientation, style: groupStyle, value: baseValue, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: contextValue, children: children }) }));
|
|
36
|
+
}
|
|
37
|
+
function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
|
|
16
38
|
const context = React.useContext(ToggleGroupContext);
|
|
17
|
-
return (_jsx(
|
|
39
|
+
return (_jsx(TogglePrimitive, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
|
|
18
40
|
variant: context.variant || variant,
|
|
19
41
|
size: context.size || size,
|
|
20
|
-
}),
|
|
42
|
+
}), className), ...props, children: children }));
|
|
21
43
|
}
|
|
22
44
|
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
|
-
import {
|
|
3
|
+
import { type WithAsChild } from "../lib/base-render";
|
|
4
4
|
declare const toggleVariants: (props?: ({
|
|
5
5
|
variant?: "default" | "outline" | null | undefined;
|
|
6
6
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
-
declare function Toggle({ className, variant, size, ...props }:
|
|
8
|
+
declare function Toggle({ className, variant, size, asChild, ...props }: WithAsChild<TogglePrimitive.Props> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
|
|
9
9
|
export { Toggle, toggleVariants };
|
|
10
10
|
//# sourceMappingURL=toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGvE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAA;AAED,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,+BAQ1E;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
|
|
3
4
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import {
|
|
5
|
+
import { withAsChildRender } from "../lib/base-render.js";
|
|
5
6
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
const toggleVariants = cva("inline-flex items-center justify-center gap-
|
|
7
|
+
const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
7
8
|
variants: {
|
|
8
9
|
variant: {
|
|
9
10
|
default: "bg-transparent",
|
|
10
|
-
outline: "border border-input bg-transparent
|
|
11
|
+
outline: "border border-input bg-transparent hover:bg-muted",
|
|
11
12
|
},
|
|
12
13
|
size: {
|
|
13
|
-
default: "h-
|
|
14
|
-
sm: "h-
|
|
15
|
-
lg: "h-
|
|
14
|
+
default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
15
|
+
sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
16
|
+
lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
16
17
|
},
|
|
17
18
|
},
|
|
18
19
|
defaultVariants: {
|
|
@@ -20,7 +21,7 @@ const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounde
|
|
|
20
21
|
size: "default",
|
|
21
22
|
},
|
|
22
23
|
});
|
|
23
|
-
function Toggle({ className, variant, size, ...props }) {
|
|
24
|
-
return (_jsx(TogglePrimitive
|
|
24
|
+
function Toggle({ className, variant = "default", size = "default", asChild = false, ...props }) {
|
|
25
|
+
return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...withAsChildRender({ asChild, ...props }) }));
|
|
25
26
|
}
|
|
26
27
|
export { Toggle, toggleVariants };
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
declare function TooltipProvider({ delayDuration, ...props }:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
declare function
|
|
1
|
+
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
2
|
+
import { type WithAsChild } from "../lib/base-render";
|
|
3
|
+
declare function TooltipProvider({ delay, delayDuration, ...props }: TooltipPrimitive.Provider.Props & {
|
|
4
|
+
delayDuration?: TooltipPrimitive.Provider.Props["delay"];
|
|
5
|
+
}): import("react").JSX.Element;
|
|
6
|
+
declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
|
|
7
|
+
declare function TooltipTrigger({ ...props }: WithAsChild<TooltipPrimitive.Trigger.Props>): import("react").JSX.Element;
|
|
8
|
+
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;
|
|
7
9
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
8
10
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAEpE,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGvE,iBAAS,eAAe,CAAC,EACvB,KAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,GAAG;IACnC,aAAa,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;CACzD,+BAQA;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,+BAEzD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,+BAO7C;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAY,EACZ,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAC7B,IAAI,CACF,gBAAgB,CAAC,UAAU,CAAC,KAAK,EACjC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAChD,+BAwBF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Tooltip as TooltipPrimitive } from "
|
|
3
|
+
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
4
|
+
import { withAsChildRender } from "../lib/base-render.js";
|
|
4
5
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
function TooltipProvider({
|
|
6
|
-
return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider",
|
|
6
|
+
function TooltipProvider({ delay = 0, delayDuration, ...props }) {
|
|
7
|
+
return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delayDuration ?? delay, ...props }));
|
|
7
8
|
}
|
|
8
9
|
function Tooltip({ ...props }) {
|
|
9
10
|
return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
|
|
10
11
|
}
|
|
11
12
|
function TooltipTrigger({ ...props }) {
|
|
12
|
-
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
13
|
+
return (_jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...withAsChildRender(props) }));
|
|
13
14
|
}
|
|
14
|
-
function TooltipContent({ className, sideOffset = 0, children, ...props }) {
|
|
15
|
-
return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.
|
|
15
|
+
function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
|
|
16
|
+
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" })] }) }) }));
|
|
16
17
|
}
|
|
17
18
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type SetStateAction<T> = T | ((previousValue: T) => T);
|
|
2
|
+
type UseControllableStateParams<T> = {
|
|
3
|
+
defaultProp?: T;
|
|
4
|
+
onChange?: (value: T) => void;
|
|
5
|
+
prop?: T;
|
|
6
|
+
};
|
|
7
|
+
declare function useControllableState<T>({ defaultProp, onChange, prop, }: UseControllableStateParams<T>): readonly [T, (nextValue: SetStateAction<T>) => void];
|
|
8
|
+
export { useControllableState };
|
|
9
|
+
//# sourceMappingURL=use-controllable-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable-state.ts"],"names":[],"mappings":"AAIA,KAAK,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAEtD,KAAK,0BAA0B,CAAC,CAAC,IAAI;IACnC,WAAW,CAAC,EAAE,CAAC,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAED,iBAAS,oBAAoB,CAAC,CAAC,EAAE,EAC/B,WAAW,EACX,QAAQ,EACR,IAAI,GACL,EAAE,0BAA0B,CAAC,CAAC,CAAC,4BAWhB,cAAc,CAAC,CAAC,CAAC,WAoBhC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAA"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
function useControllableState({ defaultProp, onChange, prop, }) {
|
|
4
|
+
const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultProp);
|
|
5
|
+
const isControlled = prop !== undefined;
|
|
6
|
+
const value = isControlled ? prop : uncontrolledValue;
|
|
7
|
+
const onChangeRef = React.useRef(onChange);
|
|
8
|
+
React.useEffect(() => {
|
|
9
|
+
onChangeRef.current = onChange;
|
|
10
|
+
}, [onChange]);
|
|
11
|
+
const setValue = React.useCallback((nextValue) => {
|
|
12
|
+
const resolvedValue = typeof nextValue === "function"
|
|
13
|
+
? nextValue(value)
|
|
14
|
+
: nextValue;
|
|
15
|
+
if (Object.is(value, resolvedValue)) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
if (!isControlled) {
|
|
19
|
+
setUncontrolledValue(resolvedValue);
|
|
20
|
+
}
|
|
21
|
+
onChangeRef.current?.(resolvedValue);
|
|
22
|
+
}, [isControlled, value]);
|
|
23
|
+
return [value, setValue];
|
|
24
|
+
}
|
|
25
|
+
export { useControllableState };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type AsChildProps = {
|
|
3
|
+
asChild?: boolean;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
render?: unknown;
|
|
6
|
+
};
|
|
7
|
+
type WithoutAsChild<T> = Omit<T, "asChild">;
|
|
8
|
+
declare function withAsChildRender<T extends AsChildProps>({ asChild, children, render, ...props }: T): WithoutAsChild<T>;
|
|
9
|
+
type WithAsChild<T> = T & {
|
|
10
|
+
asChild?: boolean;
|
|
11
|
+
};
|
|
12
|
+
export { withAsChildRender };
|
|
13
|
+
export type { WithAsChild };
|
|
14
|
+
//# sourceMappingURL=base-render.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-render.d.ts","sourceRoot":"","sources":["../../src/lib/base-render.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,KAAK,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAE3C,iBAAS,iBAAiB,CAAC,CAAC,SAAS,YAAY,EAAE,EACjD,OAAO,EACP,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAavB;AAED,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
function withAsChildRender({ asChild, children, render, ...props }) {
|
|
4
|
+
if (asChild && React.isValidElement(children)) {
|
|
5
|
+
return {
|
|
6
|
+
...props,
|
|
7
|
+
render: render ?? children,
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
return {
|
|
11
|
+
...props,
|
|
12
|
+
children,
|
|
13
|
+
render,
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export { withAsChildRender };
|