@zvk/ui 0.1.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+const TabsRootContext = React.createContext(null);
+const TabsTriggerContext = React.createContext(null);
+function useTabsContext(calledBy) {
+    const context = React.useContext(TabsRootContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within <Tabs />`);
+    }
+    return context;
+}
+function useTabsTriggerContext(calledBy) {
+    const context = React.useContext(TabsTriggerContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within <Tabs.Trigger />`);
+    }
+    return context;
+}
+function getSafeValueId(value) {
+    return value.replace(/[^a-zA-Z0-9._:-]/g, "-");
+}
+function getNextEnabledTabIndex(currentIndex, direction, triggers) {
+    if (triggers.length === 0) {
+        return -1;
+    }
+    for (let step = 1; step <= triggers.length; step += 1) {
+        const nextIndex = (currentIndex + step * direction + triggers.length) % triggers.length;
+        if (!triggers[nextIndex]?.disabled) {
+            return nextIndex;
+        }
+    }
+    return currentIndex;
+}
+function getFirstEnabledTabIndex(triggers) {
+    return triggers.findIndex((trigger) => !trigger.disabled);
+}
+function getLastEnabledTabIndex(triggers) {
+    for (let index = triggers.length - 1; index >= 0; index -= 1) {
+        if (!triggers[index]?.disabled) {
+            return index;
+        }
+    }
+    return -1;
+}
+function TabsRoot({ children, className, defaultValue = "", disabled = false, ref, activationMode = "automatic", onValueChange, orientation = "horizontal", value, ...props }) {
+    const [currentValue, setCurrentValue] = useControllableState({
+        ...(value !== undefined ? { value } : {}),
+        defaultValue,
+        ...(onValueChange ? { onChange: onValueChange } : {})
+    });
+    const triggerRegistry = React.useRef(new Map());
+    const triggerOrder = React.useRef([]);
+    const valueMetadata = React.useRef(new Map());
+    const [contentIdOverrides, setContentIdOverrides] = React.useState(() => new Map());
+    const instanceId = React.useId();
+    const getMetadata = React.useCallback((tabValue) => {
+        const existing = valueMetadata.current.get(tabValue);
+        if (existing) {
+            return existing;
+        }
+        const safeValue = getSafeValueId(tabValue);
+        const metadata = {
+            triggerId: `${instanceId}-trigger-${safeValue}`,
+            contentId: `${instanceId}-content-${safeValue}`
+        };
+        valueMetadata.current.set(tabValue, metadata);
+        return metadata;
+    }, [instanceId]);
+    const setContentIdForValue = React.useCallback((tabValue, id) => {
+        setContentIdOverrides((current) => {
+            if (current.get(tabValue) === id) {
+                return current;
+            }
+            const next = new Map(current);
+            next.set(tabValue, id);
+            return next;
+        });
+    }, []);
+    const resetContentIdForValue = React.useCallback((tabValue, id) => {
+        setContentIdOverrides((current) => {
+            if (current.get(tabValue) !== id) {
+                return current;
+            }
+            const next = new Map(current);
+            next.delete(tabValue);
+            return next;
+        });
+    }, []);
+    const registerTrigger = React.useCallback((triggerValue, triggerRef, isDisabled) => {
+        if (!triggerRegistry.current.has(triggerValue)) {
+            triggerOrder.current.push(triggerValue);
+        }
+        triggerRegistry.current.set(triggerValue, {
+            ref: triggerRef,
+            disabled: isDisabled
+        });
+        getMetadata(triggerValue);
+    }, [getMetadata]);
+    const unregisterTrigger = React.useCallback((triggerValue) => {
+        triggerRegistry.current.delete(triggerValue);
+        triggerOrder.current = triggerOrder.current.filter((registeredValue) => registeredValue !== triggerValue);
+    }, []);
+    const getOrderedTriggers = React.useCallback(() => triggerOrder.current
+        .map((registeredValue) => ({
+        value: registeredValue,
+        ...triggerRegistry.current.get(registeredValue)
+    }))
+        .filter((trigger) => Boolean(trigger.ref) && trigger.ref !== null), []);
+    return (_jsx(TabsRootContext.Provider, { value: {
+            activationMode,
+            disabled,
+            getOrderedTriggers,
+            getContentIdForValue(tabValue) {
+                return contentIdOverrides.get(tabValue) ?? getMetadata(tabValue).contentId;
+            },
+            getTriggerIdForValue(tabValue) {
+                return getMetadata(tabValue).triggerId;
+            },
+            orientation,
+            registerTrigger,
+            resetContentIdForValue,
+            setContentIdForValue,
+            setValue: setCurrentValue,
+            unregisterTrigger,
+            value: currentValue
+        }, children: _jsx("div", { ...props, ref: ref, className: cn("liano-tabs", className), "data-orientation": orientation, "data-state": activationMode, "data-disabled": disabled ? "true" : undefined, children: children }) }));
+}
+function TabsList({ className, ref, ...props }) {
+    const context = useTabsContext("Tabs.List");
+    return (_jsx("div", { ...props, ref: ref, role: "tablist", className: cn("liano-tabs__list", className), "aria-orientation": context.orientation === "vertical" ? "vertical" : "horizontal" }));
+}
+function TabsTrigger({ className, onClick, onKeyDown, ref, value, ...props }) {
+    const context = useTabsContext("Tabs.Trigger");
+    const triggerRef = React.useRef(null);
+    const triggerContext = React.useMemo(() => ({ value }), [value]);
+    const triggerId = context.getTriggerIdForValue(value);
+    const contentId = context.getContentIdForValue(value);
+    const isSelected = context.value === value;
+    const isDisabled = context.disabled || props.disabled === true;
+    React.useLayoutEffect(() => {
+        context.registerTrigger(value, triggerRef.current, isDisabled);
+        return () => context.unregisterTrigger(value);
+    }, [context, isDisabled, value]);
+    const moveFocusTo = (nextValue) => {
+        const triggers = context.getOrderedTriggers();
+        const target = triggers.find((trigger) => trigger.value === nextValue);
+        target?.ref?.focus();
+    };
+    const handleKeyDown = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        const triggers = context.getOrderedTriggers();
+        const currentIndex = triggers.findIndex((trigger) => trigger.value === value);
+        if (currentIndex === -1) {
+            return;
+        }
+        let nextIndex = -1;
+        const isHorizontal = context.orientation === "horizontal";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        if (event.key === prevKey) {
+            nextIndex = getNextEnabledTabIndex(currentIndex, -1, triggers);
+        }
+        else if (event.key === nextKey) {
+            nextIndex = getNextEnabledTabIndex(currentIndex, 1, triggers);
+        }
+        else if (event.key === "Home") {
+            nextIndex = getFirstEnabledTabIndex(triggers);
+        }
+        else if (event.key === "End") {
+            nextIndex = getLastEnabledTabIndex(triggers);
+        }
+        else if ((event.key === "Enter" || event.key === " ") && context.activationMode === "manual") {
+            event.preventDefault();
+            context.setValue(value);
+        }
+        else {
+            return;
+        }
+        if (nextIndex === -1) {
+            return;
+        }
+        event.preventDefault();
+        const nextValue = triggers[nextIndex]?.value;
+        moveFocusTo(nextValue);
+        if (context.activationMode === "automatic" && nextValue) {
+            context.setValue(nextValue);
+        }
+    };
+    return (_jsx(TabsTriggerContext.Provider, { value: triggerContext, children: _jsx("button", { ...props, ref: (node) => {
+                triggerRef.current = node;
+                if (typeof ref === "function") {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+            }, id: triggerId, role: "tab", "aria-controls": contentId, "aria-selected": isSelected, className: cn("liano-tabs__trigger", className), "data-state": isSelected ? "active" : "inactive", "data-disabled": isDisabled ? "true" : undefined, disabled: isDisabled, onClick: composeEventHandlers(onClick, () => {
+                if (!isDisabled && !context.disabled) {
+                    context.setValue(value);
+                }
+            }), onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown), tabIndex: isSelected ? 0 : -1, type: "button" }) }));
+}
+function TabsContent({ className, forceMount = false, ref, value, ...props }) {
+    const context = useTabsContext("Tabs.Content");
+    const { getContentIdForValue, resetContentIdForValue, setContentIdForValue } = context;
+    const isSelected = context.value === value;
+    const triggerId = context.getTriggerIdForValue(value);
+    const contentId = props.id ?? getContentIdForValue(value);
+    React.useLayoutEffect(() => {
+        if (props.id === undefined) {
+            return undefined;
+        }
+        setContentIdForValue(value, contentId);
+        return () => {
+            resetContentIdForValue(value, contentId);
+        };
+    }, [contentId, props.id, resetContentIdForValue, setContentIdForValue, value]);
+    if (!forceMount && !isSelected) {
+        return null;
+    }
+    return (_jsx(TabsTriggerContext.Provider, { value: { value }, children: _jsx("div", { ...props, id: props.id ?? contentId, ref: ref, role: "tabpanel", "aria-labelledby": triggerId, className: cn("liano-tabs__content", className), "data-state": isSelected ? "open" : "closed", hidden: !isSelected ? true : undefined }) }));
+}
+export const Tabs = Object.assign(TabsRoot, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent
+});

package/dist/components/tabs-with-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { TabsWithSidebar } from "./tabs-with-sidebar.js";
+export type { TabsWithSidebarPanelProps, TabsWithSidebarProps, TabsWithSidebarSidebarProps, TabsWithSidebarWidth } from "./tabs-with-sidebar.js";

package/dist/components/tabs-with-sidebar/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { TabsWithSidebar } from "./tabs-with-sidebar.js";

package/dist/components/tabs-with-sidebar/tabs-with-sidebar.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type TabsProps } from "../tabs/tabs.js";
+export type TabsWithSidebarWidth = "sm" | "md" | "lg";
+export interface TabsWithSidebarProps extends TabsProps {
+    sidebarWidth?: TabsWithSidebarWidth;
+}
+export interface TabsWithSidebarSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    sidebarWidth?: TabsWithSidebarWidth;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface TabsWithSidebarPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+declare function TabsWithSidebarRoot({ className, orientation, ref, sidebarWidth, ...props }: TabsWithSidebarProps): React.JSX.Element;
+declare function TabsWithSidebarSidebar({ className, ref, sidebarWidth, ...props }: TabsWithSidebarSidebarProps): React.JSX.Element;
+declare function TabsWithSidebarPanel({ className, ref, ...props }: TabsWithSidebarPanelProps): React.JSX.Element;
+export declare const TabsWithSidebar: typeof TabsWithSidebarRoot & {
+    Sidebar: typeof TabsWithSidebarSidebar;
+    Panel: typeof TabsWithSidebarPanel;
+};
+export {};

package/dist/components/tabs-with-sidebar/tabs-with-sidebar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs } from "../tabs/tabs.js";
+import { cn } from "../../utils/cn.js";
+function TabsWithSidebarRoot({ className, orientation = "vertical", ref, sidebarWidth = "md", ...props }) {
+    return (_jsx(Tabs, { ...props, ...(ref ? { ref } : {}), className: cn("liano-tabs-with-sidebar", className), "data-sidebar-width": sidebarWidth, orientation: orientation }));
+}
+function TabsWithSidebarSidebar({ className, ref, sidebarWidth = "md", ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-tabs-with-sidebar__sidebar", className), "data-sidebar-width": sidebarWidth }));
+}
+function TabsWithSidebarPanel({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-tabs-with-sidebar__panel", className) });
+}
+export const TabsWithSidebar = Object.assign(TabsWithSidebarRoot, {
+    Sidebar: TabsWithSidebarSidebar,
+    Panel: TabsWithSidebarPanel
+});

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

@@ -0,0 +1,2 @@
+export { Textarea } from "./textarea.js";
+export type { TextareaProps, TextareaSize } from "./textarea.js";

package/dist/components/textarea/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Textarea } from "./textarea.js";

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type TextareaSize = "sm" | "md" | "lg";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    invalid?: boolean;
+    size?: TextareaSize;
+    ref?: React.Ref<HTMLTextAreaElement>;
+}
+export declare function Textarea({ "aria-describedby": ariaDescribedBy, className, description, disabled, error, id, invalid, label, ref, required, rows, size, ...props }: TextareaProps): React.JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Field } from "../field/field.js";
+import { cn } from "../../utils/cn.js";
+function hasRenderableNode(value) {
+    return value !== undefined && value !== null && value !== false;
+}
+function joinIds(...ids) {
+    const value = ids.filter(Boolean).join(" ");
+    return value.length > 0 ? value : undefined;
+}
+export function Textarea({ "aria-describedby": ariaDescribedBy, className, description, disabled, error, id, invalid, label, ref, required, rows, size = "md", ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const hasLabel = hasRenderableNode(label);
+    const hasDescription = hasRenderableNode(description);
+    const hasError = hasRenderableNode(error);
+    const invalidState = invalid || Boolean(hasError);
+    const descriptionId = hasDescription ? `${inputId}-description` : undefined;
+    const errorId = hasError ? `${inputId}-error` : undefined;
+    const describedBy = joinIds(ariaDescribedBy, descriptionId, errorId);
+    const textarea = (_jsx("textarea", { ...props, ref: ref, "aria-describedby": describedBy, "aria-invalid": invalidState ? true : undefined, className: cn("liano-textarea", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": invalidState ? "true" : undefined, "data-required": required ? "true" : undefined, "data-size": size, disabled: disabled, id: inputId, required: required, rows: rows }));
+    if (!hasLabel && !hasDescription && !hasError) {
+        return textarea;
+    }
+    return (_jsxs(Field, { disabled: Boolean(disabled), invalid: invalidState, required: Boolean(required), children: [hasLabel ? _jsx(Field.Label, { htmlFor: inputId, children: label }) : null, textarea, hasDescription ? _jsx(Field.Description, { id: descriptionId, children: description }) : null, hasError ? _jsx(Field.Error, { id: errorId, children: error }) : null] }));
+}

package/dist/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast, ToastViewport } from "./toast.js";
+export type { ToastActionProps, ToastCloseProps, ToastPlacement, ToastProps, ToastTextProps, ToastTone, ToastViewportProps } from "./toast.js";

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { Toast, ToastViewport } from "./toast.js";

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export type ToastTone = "neutral" | "success" | "warning" | "destructive" | "info";
+export type ToastPlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+export interface ToastViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+    placement?: ToastPlacement;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    tone?: ToastTone;
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ToastTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface ToastActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export interface ToastCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export declare function ToastViewport({ className, placement, ref, ...props }: ToastViewportProps): React.ReactElement;
+declare function ToastRoot({ className, ref, role, tone, ...props }: ToastProps): React.JSX.Element;
+declare function ToastTitle({ className, ref, ...props }: ToastTextProps): React.JSX.Element;
+declare function ToastDescription({ className, ref, ...props }: ToastTextProps): React.JSX.Element;
+declare function ToastAction({ className, ref, type, ...props }: ToastActionProps): React.JSX.Element;
+declare function ToastClose({ children, className, ref, type, ...props }: ToastCloseProps): React.JSX.Element;
+export declare const Toast: typeof ToastRoot & {
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    Action: typeof ToastAction;
+    Close: typeof ToastClose;
+};
+export {};

package/dist/components/toast/toast.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+export function ToastViewport({ className, placement = "top-right", ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, "aria-label": props["aria-label"] ?? "Notifications", className: cn("liano-toast-viewport", className), "data-placement": placement, role: "region" }));
+}
+function ToastRoot({ className, ref, role, tone = "neutral", ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cn("liano-toast", className), "data-tone": tone, role: role ?? (tone === "destructive" ? "alert" : "status") }));
+}
+function ToastTitle({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-toast__title", className) });
+}
+function ToastDescription({ className, ref, ...props }) {
+    return _jsx("div", { ...props, ref: ref, className: cn("liano-toast__description", className) });
+}
+function ToastAction({ className, ref, type = "button", ...props }) {
+    return _jsx("button", { ...props, ref: ref, className: cn("liano-toast__action", className), type: type });
+}
+function ToastClose({ children = "×", className, ref, type = "button", ...props }) {
+    return (_jsx("button", { ...props, ref: ref, className: cn("liano-toast__close", className), type: type, children: children }));
+}
+export const Toast = Object.assign(ToastRoot, {
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Action: ToastAction,
+    Close: ToastClose
+});

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

@@ -0,0 +1,2 @@
+export { Toggle } from "./toggle.js";
+export type { ToggleProps, ToggleSize, ToggleVariant } from "./toggle.js";

package/dist/components/toggle/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Toggle } from "./toggle.js";

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleVariant = "default" | "outline" | "ghost";
+export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    size?: ToggleSize;
+    variant?: ToggleVariant;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+export declare function Toggle({ "aria-pressed": ariaPressed, className, defaultPressed, disabled, onClick, onPressedChange, pressed, ref, size, type, variant, ...props }: ToggleProps): React.JSX.Element;

package/dist/components/toggle/toggle.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { composeEventHandlers } from "../../utils/compose-event-handlers.js";
+import { cn } from "../../utils/cn.js";
+export function Toggle({ "aria-pressed": ariaPressed, className, defaultPressed = false, disabled, onClick, onPressedChange, pressed, ref, size = "md", type = "button", variant = "default", ...props }) {
+    const [currentPressed, setPressed] = useControllableState({
+        ...(pressed !== undefined ? { value: pressed } : {}),
+        defaultValue: defaultPressed,
+        ...(onPressedChange ? { onChange: onPressedChange } : {})
+    });
+    return (_jsx("button", { ...props, ref: ref, "aria-pressed": ariaPressed ?? currentPressed, className: cn("liano-toggle", className), "data-disabled": disabled ? "true" : undefined, "data-size": size, "data-state": currentPressed ? "on" : "off", "data-variant": variant, disabled: disabled, onClick: composeEventHandlers(onClick, () => {
+            if (!disabled) {
+                setPressed((value) => !value);
+            }
+        }), type: type }));
+}

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from "./toggle-group.js";
+export type { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupProps, ToggleGroupSingleProps } from "./toggle-group.js";

package/dist/components/toggle-group/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ToggleGroup } from "./toggle-group.js";

package/dist/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { type ToggleProps } from "../toggle/toggle.js";
+export interface ToggleGroupSingleProps extends React.HTMLAttributes<HTMLDivElement> {
+    type: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+}
+export interface ToggleGroupMultipleProps extends React.HTMLAttributes<HTMLDivElement> {
+    type: "multiple";
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+}
+export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+export interface ToggleGroupItemProps extends Omit<ToggleProps, "pressed" | "defaultPressed" | "onPressedChange"> {
+    value: string;
+}
+declare function ToggleGroupRoot(props: ToggleGroupProps): React.JSX.Element;
+declare function ToggleGroupItem({ disabled, onClick, value, ...props }: ToggleGroupItemProps): React.JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export {};

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { cn } from "../../utils/cn.js";
+import { Toggle } from "../toggle/toggle.js";
+const ToggleGroupContext = React.createContext(null);
+function useToggleGroupContext(calledBy) {
+    const context = React.useContext(ToggleGroupContext);
+    if (!context) {
+        throw new Error(`"${calledBy}" must be used within a <ToggleGroup />`);
+    }
+    return context;
+}
+function ToggleGroupRoot(props) {
+    const { children, className, disabled, orientation = "horizontal", type } = props;
+    const singleValueProp = type === "single" && props.value !== undefined ? props.value : undefined;
+    const singleDefaultValue = type === "single" ? props.defaultValue ?? "" : "";
+    const singleOnValueChange = type === "single" ? props.onValueChange : undefined;
+    const multipleValueProp = type === "multiple" && props.value !== undefined ? [...props.value] : undefined;
+    const multipleDefaultValue = type === "multiple" ? [...(props.defaultValue ?? [])] : [];
+    const multipleOnValueChange = type === "multiple" ? props.onValueChange : undefined;
+    const [singleValue, setSingleValue] = useControllableState({
+        ...(singleValueProp !== undefined ? { value: singleValueProp } : {}),
+        defaultValue: singleDefaultValue,
+        ...(singleOnValueChange ? { onChange: singleOnValueChange } : {})
+    });
+    const [multipleValue, setMultipleValue] = useControllableState({
+        ...(multipleValueProp !== undefined ? { value: multipleValueProp } : {}),
+        defaultValue: multipleDefaultValue,
+        ...(multipleOnValueChange ? { onChange: multipleOnValueChange } : {})
+    });
+    const isPressed = React.useCallback((itemValue) => type === "single" ? singleValue === itemValue : multipleValue.includes(itemValue), [multipleValue, singleValue, type]);
+    const toggleValue = React.useCallback((itemValue) => {
+        if (type === "single") {
+            setSingleValue((value) => value === itemValue ? "" : itemValue);
+            return;
+        }
+        setMultipleValue((value) => {
+            if (value.includes(itemValue)) {
+                return value.filter((entry) => entry !== itemValue);
+            }
+            return [...value, itemValue];
+        });
+    }, [setMultipleValue, setSingleValue, type]);
+    const context = React.useMemo(() => ({
+        ...(disabled !== undefined ? { disabled } : {}),
+        isPressed,
+        orientation,
+        toggleValue
+    }), [disabled, isPressed, orientation, toggleValue]);
+    const { children: _children, className: _className, defaultValue: _defaultValue, disabled: _disabled, onValueChange: _onValueChange, orientation: _orientation, type: _type, value: _value, ...domProps } = props;
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx("div", { ...domProps, className: cn("liano-toggle-group", className), "data-disabled": disabled ? "true" : undefined, "data-orientation": orientation, role: "group", children: children }) }));
+}
+function ToggleGroupItem({ disabled, onClick, value, ...props }) {
+    const context = useToggleGroupContext("ToggleGroup.Item");
+    const isDisabled = Boolean(context.disabled) || Boolean(disabled);
+    return (_jsx(Toggle, { ...props, disabled: isDisabled, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented && !isDisabled) {
+                context.toggleValue(value);
+            }
+        }, pressed: context.isPressed(value) }));
+}
+export const ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Item: ToggleGroupItem
+});

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

@@ -0,0 +1,2 @@
+export { Tooltip } from "./tooltip.js";
+export type { TooltipProps } from "./tooltip.js";

package/dist/components/tooltip/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Tooltip } from "./tooltip.js";

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { FloatingPlacement } from "../../internal/floating/index.js";
+export interface TooltipProps {
+    children: React.ReactElement;
+    content: React.ReactNode;
+    placement?: FloatingPlacement;
+    delay?: number;
+    disabled?: boolean;
+}
+export declare function Tooltip({ children, content, delay, disabled, placement }: TooltipProps): React.JSX.Element;