@chatsdk-dev/ui 0.0.1

package/dist/components/tabs.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+function Tabs({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className), ...props }));
+}
+const tabsListVariants = cva("relative rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", {
+    variants: {
+        variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function TabsList({ className, variant = "default", ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", className: cn("gap-1.5 rounded-sm border border-transparent px-2 py-1 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:text-foreground dark:data-active:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), ...props }));
+}
+function TabsIndicator({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Indicator, { className: cn("absolute rounded-sm bg-background shadow-sm transition-all duration-200", "left-[var(--active-tab-left)] top-[var(--active-tab-top)]", "w-[var(--active-tab-width)] h-[var(--active-tab-height)]", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn("text-sm flex-1 outline-none", className), ...props }));
+}
+export { Tabs, TabsContent, TabsIndicator, TabsList, tabsListVariants, TabsTrigger, };

package/dist/components/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/components/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAWlC"}

package/dist/components/textarea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+export function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-sm border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}

package/dist/components/toggle.d.ts

@@ -0,0 +1,9 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    variant?: "outline" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAmBnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQ7D;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva } from "class-variance-authority";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+const toggleVariants = cva("hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-input hover:bg-muted border bg-transparent shadow-xs",
+        },
+        size: {
+            default: "h-9 min-w-9 px-2",
+            sm: "h-8 min-w-8 px-1.5",
+            lg: "h-10 min-w-10 px-2.5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Toggle({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(TogglePrimitive, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
+}
+export { Toggle, toggleVariants };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,iBAAS,eAAe,CAAC,EACvB,KAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,QAAQ,CAAC,KAAK,2CAQjC;AAED,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,2CAMzD;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,OAAO,CAAC,KAAK,2CAEnE;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,2CAwBF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/tooltip.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn } from "@chatsdk-dev/ui/lib/utils";
+function TooltipProvider({ delay = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
+}
+function Tooltip({ ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+    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("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-sm px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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" })] }) }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/typography/h1.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+import { textVariants } from "./text";
+type H1Props = VariantProps<typeof textVariants> & {
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function H1({ children, className, variant }: H1Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=h1.d.ts.map

package/dist/components/typography/h1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"h1.d.ts","sourceRoot":"","sources":["../../../src/components/typography/h1.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEtC,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAc,EAAE,EAAE,OAAO,2CAIlE"}

package/dist/components/typography/h1.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { textVariants } from "./text";
+export function H1({ children, className, variant = "h1" }) {
+    return (_jsx("h1", { className: cn(textVariants({ variant }), className), children: children }));
+}

package/dist/components/typography/paragraph.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function Paragraph({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=paragraph.d.ts.map

package/dist/components/typography/paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../../src/components/typography/paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAMA"}

package/dist/components/typography/paragraph.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { textVariants } from "./text";
+export function Paragraph({ children, className, }) {
+    return (_jsx("p", { className: cn(textVariants({ variant: "paragraph1" }), className), children: children }));
+}

package/dist/components/typography/text.d.ts

@@ -0,0 +1,14 @@
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+export declare const textVariants: (props?: ({
+    variant?: "button" | "h1" | "h2" | "small" | "default" | "paragraph1" | "paragraph2" | "mono" | "tiny" | null | undefined;
+    color?: "accent" | "meta" | "popover" | "disabled" | "primary" | "secondary" | "destructive" | "default" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextVariants = VariantProps<typeof textVariants>;
+type DefaultTagName = "span" | "p" | "div";
+interface TextProps extends Omit<useRender.ComponentProps<"div">, "color">, TextVariants {
+    as?: DefaultTagName;
+}
+export declare function Text({ className, render, as, variant, color, ...props }: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=text.d.ts.map

package/dist/components/typography/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/typography/text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,eAAO,MAAM,YAAY;;;8EA6BvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAE7D,KAAK,cAAc,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC;AAE3C,UAAU,SACR,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IACpE,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EACnB,SAAS,EACT,MAAM,EACN,EAAU,EACV,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,SAAS,8FASX"}

package/dist/components/typography/text.js

@@ -0,0 +1,41 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+export const textVariants = cva("font-body", {
+    variants: {
+        variant: {
+            default: "text-sm",
+            h1: "font-heading text-2xl font-medium",
+            h2: "font-heading leading-none font-semibold text-xl",
+            paragraph1: "text-base",
+            paragraph2: "text-sm text-zinc-600",
+            small: "text-sm",
+            button: "text-button leading-none font-medium",
+            mono: "font-mono text-[13px] leading-none translate-y-[1px]",
+            tiny: "text-xs text-zinc-600",
+        },
+        color: {
+            default: "text-foreground",
+            primary: "text-primary-foreground",
+            secondary: "text-secondary-foreground",
+            muted: "text-muted-foreground",
+            accent: "text-accent-foreground",
+            popover: "text-popover-foreground",
+            meta: "text-zinc-400",
+            disabled: "text-zinc-400",
+            destructive: "text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        color: "default",
+    },
+});
+export function Text({ className, render, as = "div", variant, color, ...props }) {
+    return useRender({
+        defaultTagName: as,
+        render,
+        props: mergeProps({ className: cn(textVariants({ variant, color }), className) }, props),
+    });
+}

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,5 @@
+type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+export declare function useBreakpoint(breakpoint: Breakpoint): boolean;
+export declare function useIsMobile(): boolean;
+export {};
+//# sourceMappingURL=use-breakpoint.d.ts.map

package/dist/hooks/use-breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/use-breakpoint.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAyBpD,wBAAgB,aAAa,CAAC,UAAU,EAAE,UAAU,WAyBnD;AAED,wBAAgB,WAAW,YAG1B"}

package/dist/hooks/use-breakpoint.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+// Fallback to Tailwind defaults if CSS variables aren't available
+const DEFAULT_BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+};
+function getBreakpointValue(breakpoint) {
+    if (typeof window === "undefined") {
+        return DEFAULT_BREAKPOINTS[breakpoint];
+    }
+    const cssVarValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(`--breakpoint-${breakpoint}`)
+        .trim();
+    return cssVarValue
+        ? parseInt(cssVarValue, 10)
+        : DEFAULT_BREAKPOINTS[breakpoint];
+}
+export function useBreakpoint(breakpoint) {
+    const [isAtBreakpoint, setIsAtBreakpoint] = React.useState(() => {
+        // Initialize synchronously on client side
+        if (typeof window === "undefined") {
+            return false; // Default to false on server
+        }
+        const breakpointValue = getBreakpointValue(breakpoint);
+        return window.innerWidth >= breakpointValue;
+    });
+    React.useEffect(() => {
+        const breakpointValue = getBreakpointValue(breakpoint);
+        const mql = window.matchMedia(`(min-width: ${breakpointValue}px)`);
+        const onChange = () => {
+            setIsAtBreakpoint(window.innerWidth >= breakpointValue);
+        };
+        mql.addEventListener("change", onChange);
+        setIsAtBreakpoint(window.innerWidth >= breakpointValue);
+        return () => mql.removeEventListener("change", onChange);
+    }, [breakpoint]);
+    return !!isAtBreakpoint;
+}
+export function useIsMobile() {
+    const isAboveMd = useBreakpoint("md");
+    return !isAboveMd;
+}

package/dist/hooks/use-controllable-state.d.ts

@@ -0,0 +1,14 @@
+export declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined, deps?: React.DependencyList): T;
+export interface UseControllableStateProps<T> {
+    value?: T;
+    defaultValue?: T | (() => T);
+    onChange?: (value: T) => void;
+    shouldUpdate?: (prev: T, next: T) => boolean;
+}
+/**
+ * The `useControllableState` hook returns the state and function that updates the state, just like React.useState does.
+ *
+ * @see Docs https://v2.chakra-ui.com/docs/hooks/use-controllable#usecontrollablestate
+ */
+export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];
+//# sourceMappingURL=use-controllable-state.d.ts.map

package/dist/hooks/use-controllable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable-state.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EAC9D,QAAQ,EAAE,CAAC,GAAG,SAAS,EACvB,IAAI,GAAE,KAAK,CAAC,cAAmB,KAUhC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CAC9C;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAiC7C,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CACzE"}

package/dist/hooks/use-controllable-state.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useCallbackRef(callback, deps = []) {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useCallback(((...args) => callbackRef.current?.(...args)), deps);
+}
+/**
+ * The `useControllableState` hook returns the state and function that updates the state, just like React.useState does.
+ *
+ * @see Docs https://v2.chakra-ui.com/docs/hooks/use-controllable#usecontrollablestate
+ */
+export function useControllableState(props) {
+    const { value: valueProp, defaultValue, onChange, shouldUpdate = (prev, next) => prev !== next, } = props;
+    const onChangeProp = useCallbackRef(onChange);
+    const shouldUpdateProp = useCallbackRef(shouldUpdate);
+    const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+    const controlled = valueProp !== undefined;
+    const value = controlled ? valueProp : uncontrolledState;
+    const setValue = useCallbackRef((next) => {
+        const setter = next;
+        const nextValue = typeof next === "function" ? setter(value) : next;
+        if (!shouldUpdateProp(value, nextValue)) {
+            return;
+        }
+        if (!controlled) {
+            setUncontrolledState(nextValue);
+        }
+        onChangeProp(nextValue);
+    }, [controlled, onChangeProp, value, shouldUpdateProp]);
+    return [value, setValue];
+}