@cmdniels/uikit 1.0.5 → 1.0.7

package/out/components/button/Button.d.ts

@@ -1,4 +1,6 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { buttonVariants } from "./buttonVariants";
 import type { VariantProps } from "class-variance-authority";
-export default function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
+export default function Button({ className, children, variant, size, loading, disabled, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
+    loading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/button/Button.js

@@ -9,11 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import cn from "../../cn";
+import Spinner from "../../components/spinner/Spinner";
 import { buttonVariants } from "./buttonVariants";
 export default function Button(_a) {
-    var { className, variant = "default", size = "default" } = _a, props = __rest(_a, ["className", "variant", "size"]);
-    return (_jsx(ButtonPrimitive, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className })) }, props)));
+    var { className, children, variant = "default", size = "default", loading = false, disabled } = _a, props = __rest(_a, ["className", "children", "variant", "size", "loading", "disabled"]);
+    return (_jsxs(ButtonPrimitive, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className }), "relative"), disabled: disabled !== null && disabled !== void 0 ? disabled : loading }, props, { children: [loading && _jsx(Spinner, { className: "absolute inset-0 m-auto" }), _jsx("span", { className: cn(loading ? "invisible relative" : ""), children: children })] })));
 }

package/out/components/button-group/buttonGroupVariants.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=button]]:border-border has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
             horizontal: "[&>[data-slot]]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",

package/out/components/sortable/Sortable.d.ts

@@ -1,14 +1,45 @@
-import { type DndContextProps, type DragEndEvent, DragOverlay, type UniqueIdentifier } from "@dnd-kit/core";
+import { type DndContextProps, type DragEndEvent, type UniqueIdentifier } from "@dnd-kit/core";
 import { type SortableContextProps } from "@dnd-kit/sortable";
-import { type ComponentProps, type ComponentPropsWithRef, type ElementType, type ReactElement, type ReactNode } from "react";
-interface GetItemValue<T> {
+export declare const orientationConfig: {
+    vertical: {
+        modifiers: import("@dnd-kit/core").Modifier[];
+        strategy: import("@dnd-kit/sortable").SortingStrategy;
+        collisionDetection: import("@dnd-kit/core").CollisionDetection;
+    };
+    horizontal: {
+        modifiers: import("@dnd-kit/core").Modifier[];
+        strategy: import("@dnd-kit/sortable").SortingStrategy;
+        collisionDetection: import("@dnd-kit/core").CollisionDetection;
+    };
+    mixed: {
+        modifiers: import("@dnd-kit/core").Modifier[];
+        strategy: undefined;
+        collisionDetection: import("@dnd-kit/core").CollisionDetection;
+    };
+};
+export interface SortableRootContextValue<T> {
+    id: string;
+    items: UniqueIdentifier[];
+    modifiers: DndContextProps["modifiers"];
+    strategy: SortableContextProps["strategy"];
+    activeId: UniqueIdentifier | null;
+    setActiveId: (id: UniqueIdentifier | null) => void;
+    getItemValue: (item: T) => UniqueIdentifier;
+    flatCursor: boolean;
+}
+export default function Sortable<T>(props: DndContextProps & (T extends object ? {
     /**
      * Callback that returns a unique identifier for each sortable item. Required for array of objects.
      * @example getItemValue={(item) => item.id}
      */
     getItemValue: (item: T) => UniqueIdentifier;
-}
-type SortableProps<T> = DndContextProps & (T extends object ? GetItemValue<T> : Partial<GetItemValue<T>>) & {
+} : {
+    /**
+     * Callback that returns a unique identifier for each sortable item. Required for array of objects.
+     * @example getItemValue={(item) => item.id}
+     */
+    getItemValue?: (item: T) => UniqueIdentifier;
+}) & {
     value: T[];
     onValueChange?: (items: T[]) => void;
     onMove?: (event: DragEndEvent & {
@@ -18,31 +49,4 @@ type SortableProps<T> = DndContextProps & (T extends object ? GetItemValue<T> :
     strategy?: SortableContextProps["strategy"];
     orientation?: "vertical" | "horizontal" | "mixed";
     flatCursor?: boolean;
-};
-declare function Sortable<T>(props: SortableProps<T>): import("react/jsx-runtime").JSX.Element;
-interface SortableContentProps<T extends ElementType = "div"> {
-    strategy?: SortableContextProps["strategy"];
-    children: ReactNode;
-    render?: ReactElement<T>;
-    withoutSlot?: boolean;
-}
-declare function SortableContent<T extends ElementType = "div">(props: SortableContentProps<T> & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;
-interface SortableItemProps<T extends ElementType = "div"> {
-    value: UniqueIdentifier;
-    asHandle?: boolean;
-    render?: ReactElement<T>;
-    disabled?: boolean;
-}
-declare function SortableItem<T extends ElementType = "div">(props: SortableItemProps<T> & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;
-interface SortableItemHandleProps<T extends ElementType = "button"> {
-    render?: ReactElement<T>;
-}
-declare function SortableItemHandle<T extends ElementType = "button">(props: SortableItemHandleProps<T> & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;
-interface SortableOverlayProps extends Omit<ComponentProps<typeof DragOverlay>, "children"> {
-    container?: Element | DocumentFragment | null;
-    children?: ((params: {
-        value: UniqueIdentifier;
-    }) => ReactNode) | ReactNode;
-}
-declare function SortableOverlay(props: SortableOverlayProps): import("react").ReactPortal | null;
-export { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, type SortableProps, };
+}): import("react/jsx-runtime").JSX.Element;

package/out/components/sortable/Sortable.js

@@ -11,15 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { closestCenter, closestCorners, defaultDropAnimationSideEffects, DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { closestCenter, closestCorners, DndContext, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from "@dnd-kit/core";
 import { restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
-import { arrayMove, horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useComposedRefs } from "motion/react";
-import { createContext, useCallback, cloneElement, useContext, useId, useLayoutEffect, useMemo, useState, } from "react";
-import * as ReactDOM from "react-dom";
-import cn from "../../cn";
-const orientationConfig = {
+import { arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { useCallback, useId, useMemo, useState } from "react";
+import SortableRootContext from "./SortableRootContext";
+export const orientationConfig = {
     vertical: {
         modifiers: [restrictToVerticalAxis, restrictToParentElement],
         strategy: verticalListSortingStrategy,
@@ -36,20 +33,7 @@ const orientationConfig = {
         collisionDetection: closestCorners,
     },
 };
-const ROOT_NAME = "Sortable";
-const CONTENT_NAME = "SortableContent";
-const ITEM_NAME = "SortableItem";
-const ITEM_HANDLE_NAME = "SortableItemHandle";
-const OVERLAY_NAME = "SortableOverlay";
-const SortableRootContext = createContext(null);
-function useSortableContext(consumerName) {
-    const context = useContext(SortableRootContext);
-    if (!context) {
-        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
-    }
-    return context;
-}
-function Sortable(props) {
+export default function Sortable(props) {
     const { value, onValueChange, collisionDetection, modifiers, strategy, onMove, orientation = "vertical", flatCursor = false, getItemValue: getItemValueProp, accessibility, onDragStart: onDragStartProp, onDragEnd: onDragEndProp, onDragCancel: onDragCancelProp } = props, sortableProps = __rest(props, ["value", "onValueChange", "collisionDetection", "modifiers", "strategy", "onMove", "orientation", "flatCursor", "getItemValue", "accessibility", "onDragStart", "onDragEnd", "onDragCancel"]);
     const id = useId();
     const [activeId, setActiveId] = useState(null);
@@ -160,104 +144,3 @@ function Sortable(props) {
     return (_jsx(SortableRootContext.Provider, { value: contextValue, children: _jsx(DndContext, Object.assign({ collisionDetection: collisionDetection !== null && collisionDetection !== void 0 ? collisionDetection : config.collisionDetection, modifiers: modifiers !== null && modifiers !== void 0 ? modifiers : config.modifiers, sensors: sensors }, sortableProps, { id: id, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragCancel: onDragCancel, accessibility: Object.assign({ announcements,
                 screenReaderInstructions }, accessibility) })) }));
 }
-const SortableContentContext = createContext(false);
-function SortableContent(props) {
-    const { strategy: strategyProp, render, withoutSlot, children } = props, contentProps = __rest(props, ["strategy", "render", "withoutSlot", "children"]);
-    const context = useSortableContext(CONTENT_NAME);
-    const element = render ? (cloneElement(render, Object.assign(Object.assign(Object.assign({}, contentProps), render.props), { children, "data-slot": "sortable-content" }))) : (_jsx("div", Object.assign({ "data-slot": "sortable-content" }, contentProps, { children: children })));
-    return (_jsx(SortableContentContext.Provider, { value: true, children: _jsx(SortableContext, { items: context.items, strategy: strategyProp !== null && strategyProp !== void 0 ? strategyProp : context.strategy, children: withoutSlot ? children : element }) }));
-}
-const SortableItemContext = createContext(null);
-function useSortableItemContext(consumerName) {
-    const context = useContext(SortableItemContext);
-    if (!context) {
-        throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
-    }
-    return context;
-}
-function SortableItem(props) {
-    const { value, style, asHandle, render, disabled, className, ref } = props, itemProps = __rest(props, ["value", "style", "asHandle", "render", "disabled", "className", "ref"]);
-    const inSortableContent = useContext(SortableContentContext);
-    const inSortableOverlay = useContext(SortableOverlayContext);
-    if (!inSortableContent && !inSortableOverlay) {
-        throw new Error(`\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``);
-    }
-    if (value === "") {
-        throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
-    }
-    const context = useSortableContext(ITEM_NAME);
-    const id = useId();
-    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
-        id: value,
-        disabled,
-    });
-    const composedRef = useComposedRefs(ref, (node) => {
-        if (disabled) {
-            return;
-        }
-        setNodeRef(node);
-        if (asHandle) {
-            setActivatorNodeRef(node);
-        }
-    });
-    const composedStyle = useMemo(() => (Object.assign({ transform: CSS.Translate.toString(transform), transition }, style)), [transform, transition, style]);
-    const itemContext = useMemo(() => ({
-        id,
-        attributes,
-        listeners,
-        setActivatorNodeRef,
-        isDragging,
-        disabled,
-    }), [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]);
-    const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ id, "data-disabled": disabled, "data-dragging": isDragging ? "" : undefined, "data-slot": "sortable-item" }, itemProps), (asHandle && !disabled ? attributes : {})), (asHandle && !disabled ? listeners : {})), { ref: composedRef, style: composedStyle, className: cn("focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-hidden dark:focus-visible:ring-neutral-300", {
-            "touch-none select-none": asHandle,
-            "cursor-default": context.flatCursor,
-            "data-dragging:cursor-grabbing": !context.flatCursor,
-            "cursor-grab": !isDragging && asHandle && !context.flatCursor,
-            "opacity-50": isDragging,
-            "pointer-events-none opacity-50": disabled,
-        }, className) });
-    const element = render ? cloneElement(render, mergedProps) : _jsx("div", Object.assign({}, mergedProps));
-    return _jsx(SortableItemContext.Provider, { value: itemContext, children: element });
-}
-function SortableItemHandle(props) {
-    const { render, disabled, className } = props, itemHandleProps = __rest(props, ["render", "disabled", "className"]);
-    const context = useSortableContext(ITEM_HANDLE_NAME);
-    const itemContext = useSortableItemContext(ITEM_HANDLE_NAME);
-    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : itemContext.disabled;
-    const composedRef = useComposedRefs(itemHandleProps.ref, (node) => {
-        if (!isDisabled) {
-            return;
-        }
-        itemContext.setActivatorNodeRef(node);
-    });
-    const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ type: "button", "aria-controls": itemContext.id, "data-disabled": isDisabled, "data-dragging": itemContext.isDragging ? "" : undefined, "data-slot": "sortable-item-handle" }, itemHandleProps), (isDisabled ? {} : itemContext.attributes)), (isDisabled ? {} : itemContext.listeners)), { ref: composedRef, className: cn("select-none disabled:pointer-events-none disabled:opacity-50", context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing", className), disabled: isDisabled });
-    return render ? cloneElement(render, mergedProps) : _jsx("button", Object.assign({}, mergedProps));
-}
-const SortableOverlayContext = createContext(false);
-const dropAnimation = {
-    sideEffects: defaultDropAnimationSideEffects({
-        styles: {
-            active: {
-                opacity: "0.4",
-            },
-        },
-    }),
-};
-function SortableOverlay(props) {
-    var _a;
-    const { container: containerProp, children } = props, overlayProps = __rest(props, ["container", "children"]);
-    const context = useSortableContext(OVERLAY_NAME);
-    const [mounted, setMounted] = useState(false);
-    useLayoutEffect(() => setMounted(true), []);
-    const container = containerProp !== null && containerProp !== void 0 ? containerProp : (mounted ? (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body : null);
-    if (!container) {
-        return null;
-    }
-    return ReactDOM.createPortal(_jsx(DragOverlay, Object.assign({ dropAnimation: dropAnimation, modifiers: context.modifiers, className: cn(!context.flatCursor && "cursor-grabbing") }, overlayProps, { children: _jsx(SortableOverlayContext.Provider, { value: true, children: context.activeId
-                ? typeof children === "function"
-                    ? children({ value: context.activeId })
-                    : children
-                : null }) })), container);
-}
-export { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, };

package/out/components/sortable/SortableContent.d.ts

@@ -0,0 +1,8 @@
+import { type SortableContextProps } from "@dnd-kit/sortable";
+import { type ComponentPropsWithRef, type ElementType, type ReactElement, type ReactNode } from "react";
+export default function SortableContent<T extends ElementType = "div">(props: {
+    strategy?: SortableContextProps["strategy"];
+    children: ReactNode;
+    render?: ReactElement<T>;
+    withoutSlot?: boolean;
+} & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;

package/out/components/sortable/SortableContent.js

@@ -0,0 +1,23 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SortableContext } from "@dnd-kit/sortable";
+import { cloneElement } from "react";
+import SortableContentContext from "./SortableContentContext";
+import useSortableContext from "./useSortableContext";
+export default function SortableContent(props) {
+    const { strategy: strategyProp, render, withoutSlot, children } = props, contentProps = __rest(props, ["strategy", "render", "withoutSlot", "children"]);
+    const context = useSortableContext();
+    const element = render ? (cloneElement(render, Object.assign(Object.assign(Object.assign({}, contentProps), render.props), { children, "data-slot": "sortable-content" }))) : (_jsx("div", Object.assign({ "data-slot": "sortable-content" }, contentProps, { children: children })));
+    return (_jsx(SortableContentContext.Provider, { value: true, children: _jsx(SortableContext, { items: context.items, strategy: strategyProp !== null && strategyProp !== void 0 ? strategyProp : context.strategy, children: withoutSlot ? children : element }) }));
+}

package/out/components/sortable/SortableContentContext.d.ts

@@ -0,0 +1,2 @@
+declare const SortableContentContext: import("react").Context<boolean>;
+export default SortableContentContext;

package/out/components/sortable/SortableContentContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const SortableContentContext = createContext(false);
+export default SortableContentContext;

package/out/components/sortable/SortableItem.d.ts

@@ -0,0 +1,17 @@
+import { type UniqueIdentifier, type DraggableAttributes, type DraggableSyntheticListeners } from "@dnd-kit/core";
+import { type ComponentPropsWithRef, type ElementType, type ReactElement } from "react";
+export interface SortableItemContextValue {
+    id: string;
+    attributes: DraggableAttributes;
+    listeners: DraggableSyntheticListeners | undefined;
+    setActivatorNodeRef: (node: HTMLElement | null) => void;
+    isDragging?: boolean;
+    disabled?: boolean;
+}
+export declare const SortableItemContext: import("react").Context<SortableItemContextValue | null>;
+export default function SortableItem<T extends ElementType = "div">(props: {
+    value: UniqueIdentifier;
+    asHandle?: boolean;
+    render?: ReactElement<T>;
+    disabled?: boolean;
+} & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;

package/out/components/sortable/SortableItem.js

@@ -0,0 +1,67 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useComposedRefs } from "motion/react";
+import { cloneElement, createContext, useContext, useId, useMemo, } from "react";
+import cn from "../../cn";
+import SortableContentContext from "./SortableContentContext";
+import SortableOverlayContext from "./SortableOverlayContext";
+import useSortableContext from "./useSortableContext";
+export const SortableItemContext = createContext(null);
+export default function SortableItem(props) {
+    const { value, style, asHandle, render, disabled, className, ref } = props, itemProps = __rest(props, ["value", "style", "asHandle", "render", "disabled", "className", "ref"]);
+    const inSortableContent = useContext(SortableContentContext);
+    const inSortableOverlay = useContext(SortableOverlayContext);
+    if (!inSortableContent && !inSortableOverlay) {
+        throw new Error("`SortableItem` must be used within `SortableContent` or `SortableOverlay`");
+    }
+    if (value === "") {
+        throw new Error("`SortableItem` value cannot be an empty string");
+    }
+    const context = useSortableContext();
+    const id = useId();
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+        id: value,
+        disabled,
+    });
+    const composedRef = useComposedRefs(ref, (node) => {
+        if (disabled) {
+            return;
+        }
+        setNodeRef(node);
+        if (asHandle) {
+            setActivatorNodeRef(node);
+        }
+    });
+    const composedStyle = useMemo(() => (Object.assign({ transform: CSS.Translate.toString(transform), transition }, style)), [transform, transition, style]);
+    const itemContext = useMemo(() => ({
+        id,
+        attributes,
+        listeners,
+        setActivatorNodeRef,
+        isDragging,
+        disabled,
+    }), [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]);
+    const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ id, "data-disabled": disabled, "data-dragging": isDragging ? "" : undefined, "data-slot": "sortable-item" }, itemProps), (asHandle && !disabled ? attributes : {})), (asHandle && !disabled ? listeners : {})), { ref: composedRef, style: composedStyle, className: cn("focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:ring-offset-1 focus-visible:outline-hidden dark:focus-visible:ring-neutral-300", {
+            "touch-none select-none": asHandle,
+            "cursor-default": context.flatCursor,
+            "data-dragging:cursor-grabbing": !context.flatCursor,
+            "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+            "opacity-50": isDragging,
+            "pointer-events-none opacity-50": disabled,
+        }, className) });
+    const element = render ? cloneElement(render, mergedProps) : _jsx("div", Object.assign({}, mergedProps));
+    return _jsx(SortableItemContext.Provider, { value: itemContext, children: element });
+}

package/out/components/sortable/SortableItemHandle.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithRef, type ElementType, type ReactElement } from "react";
+export default function SortableItemHandle<T extends ElementType = "button">(props: {
+    render?: ReactElement<T>;
+} & ComponentPropsWithRef<T>): import("react/jsx-runtime").JSX.Element;

package/out/components/sortable/SortableItemHandle.js

@@ -0,0 +1,32 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "motion/react";
+import { cloneElement } from "react";
+import cn from "../../cn";
+import useSortableContext from "./useSortableContext";
+import useSortableItemContext from "./useSortableItemContext";
+export default function SortableItemHandle(props) {
+    const { render, disabled, className } = props, itemHandleProps = __rest(props, ["render", "disabled", "className"]);
+    const context = useSortableContext();
+    const itemContext = useSortableItemContext();
+    const isDisabled = disabled !== null && disabled !== void 0 ? disabled : itemContext.disabled;
+    const composedRef = useComposedRefs(itemHandleProps.ref, (node) => {
+        if (!isDisabled) {
+            return;
+        }
+        itemContext.setActivatorNodeRef(node);
+    });
+    const mergedProps = Object.assign(Object.assign(Object.assign(Object.assign({ type: "button", "aria-controls": itemContext.id, "data-disabled": isDisabled, "data-dragging": itemContext.isDragging ? "" : undefined, "data-slot": "sortable-item-handle" }, itemHandleProps), (isDisabled ? {} : itemContext.attributes)), (isDisabled ? {} : itemContext.listeners)), { ref: composedRef, className: cn("select-none disabled:pointer-events-none disabled:opacity-50", context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing", className), disabled: isDisabled });
+    return render ? cloneElement(render, mergedProps) : _jsx("button", Object.assign({}, mergedProps));
+}

package/out/components/sortable/SortableOverlay.d.ts

@@ -0,0 +1,8 @@
+import { type UniqueIdentifier, DragOverlay } from "@dnd-kit/core";
+import { type ComponentProps, type ReactNode } from "react";
+export default function SortableOverlay(props: {
+    container?: Element | DocumentFragment | null;
+    children?: ((params: {
+        value: UniqueIdentifier;
+    }) => ReactNode) | ReactNode;
+} & Omit<ComponentProps<typeof DragOverlay>, "children">): import("react").ReactPortal | null;

package/out/components/sortable/SortableOverlay.js

@@ -0,0 +1,44 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragOverlay, defaultDropAnimationSideEffects } from "@dnd-kit/core";
+import { useLayoutEffect, useState } from "react";
+import * as ReactDOM from "react-dom";
+import cn from "../../cn";
+import SortableOverlayContext from "./SortableOverlayContext";
+import useSortableContext from "./useSortableContext";
+const dropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+        styles: {
+            active: {
+                opacity: "0.4",
+            },
+        },
+    }),
+};
+export default function SortableOverlay(props) {
+    var _a;
+    const { container: containerProp, children } = props, overlayProps = __rest(props, ["container", "children"]);
+    const context = useSortableContext();
+    const [mounted, setMounted] = useState(false);
+    useLayoutEffect(() => setMounted(true), []);
+    const container = containerProp !== null && containerProp !== void 0 ? containerProp : (mounted ? (_a = globalThis.document) === null || _a === void 0 ? void 0 : _a.body : null);
+    if (!container) {
+        return null;
+    }
+    return ReactDOM.createPortal(_jsx(DragOverlay, Object.assign({ dropAnimation: dropAnimation, modifiers: context.modifiers, className: cn(!context.flatCursor && "cursor-grabbing") }, overlayProps, { children: _jsx(SortableOverlayContext.Provider, { value: true, children: context.activeId
+                ? typeof children === "function"
+                    ? children({ value: context.activeId })
+                    : children
+                : null }) })), container);
+}

package/out/components/sortable/SortableOverlayContext.d.ts

@@ -0,0 +1,2 @@
+declare const SortableOverlayContext: import("react").Context<boolean>;
+export default SortableOverlayContext;

package/out/components/sortable/SortableOverlayContext.js

@@ -0,0 +1,4 @@
+"use client";
+import { createContext } from "react";
+const SortableOverlayContext = createContext(false);
+export default SortableOverlayContext;

package/out/components/sortable/SortableRootContext.d.ts

@@ -0,0 +1,3 @@
+import { type SortableRootContextValue } from "./Sortable";
+declare const SortableRootContext: import("react").Context<SortableRootContextValue<unknown> | null>;
+export default SortableRootContext;

package/out/components/sortable/SortableRootContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const SortableRootContext = createContext(null);
+export default SortableRootContext;

package/out/components/sortable/useSortableContext.d.ts

@@ -0,0 +1 @@
+export default function useSortableContext(): import("./Sortable").SortableRootContextValue<unknown>;

package/out/components/sortable/useSortableContext.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import SortableRootContext from "./SortableRootContext";
+export default function useSortableContext() {
+    const context = useContext(SortableRootContext);
+    if (!context) {
+        throw new Error("`useSortableContext` must be used within `Sortable`");
+    }
+    return context;
+}

package/out/components/sortable/useSortableItemContext.d.ts

@@ -0,0 +1 @@
+export default function useSortableItemContext(): import("./SortableItem").SortableItemContextValue;

package/out/components/sortable/useSortableItemContext.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { SortableItemContext } from "./SortableItem";
+export default function useSortableItemContext() {
+    const context = useContext(SortableItemContext);
+    if (!context) {
+        throw new Error("`useSortableItemContext` must be used within `SortableItem`");
+    }
+    return context;
+}

package/out/components/spinner/Spinner.d.ts

@@ -0,0 +1,2 @@
+import { IconLoader } from "@tabler/icons-react";
+export default function Spinner({ className, ...props }: React.ComponentProps<typeof IconLoader>): import("react/jsx-runtime").JSX.Element;

package/out/components/spinner/Spinner.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconLoader } from "@tabler/icons-react";
+import cn from "../../cn";
+export default function Spinner(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(IconLoader, Object.assign({ role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className) }, props)));
+}

package/out/components/typography/TypographyImg.d.ts

@@ -1,4 +1,4 @@
-declare const TypographyImg: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "alt" | "src" | "loading" | "srcSet"> & {
+declare const TypographyImg: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "loading" | "alt" | "src" | "srcSet"> & {
     src: string | import("next/dist/shared/lib/get-img-props").StaticImport;
     alt: string;
     width?: number | `${number}`;

package/out/index.d.ts

@@ -135,7 +135,12 @@ export { default as SelectValue } from "./components/select/SelectValue";
 export { default as Separator } from "./components/separator/Separator";
 export { default as Skeleton } from "./components/skeleton/Skeleton";
 export { default as Toaster } from "./components/sonner/Toaster";
-export * from "./components/sortable/Sortable";
+export { default as Sortable } from "./components/sortable/Sortable";
+export { default as SortableContent } from "./components/sortable/SortableContent";
+export { default as SortableItem } from "./components/sortable/SortableItem";
+export { default as SortableItemHandle } from "./components/sortable/SortableItemHandle";
+export { default as SortableOverlay } from "./components/sortable/SortableOverlay";
+export { default as Spinner } from "./components/spinner/Spinner";
 export { default as Switch } from "./components/switch/Switch";
 export { default as Table } from "./components/table/Table";
 export { default as TableBody } from "./components/table/TableBody";

package/out/index.js

@@ -165,7 +165,13 @@ export { default as Skeleton } from "./components/skeleton/Skeleton";
 // Sonner
 export { default as Toaster } from "./components/sonner/Toaster";
 // Sortable
-export * from "./components/sortable/Sortable";
+export { default as Sortable } from "./components/sortable/Sortable";
+export { default as SortableContent } from "./components/sortable/SortableContent";
+export { default as SortableItem } from "./components/sortable/SortableItem";
+export { default as SortableItemHandle } from "./components/sortable/SortableItemHandle";
+export { default as SortableOverlay } from "./components/sortable/SortableOverlay";
+// Spinner
+export { default as Spinner } from "./components/spinner/Spinner";
 // Switch
 export { default as Switch } from "./components/switch/Switch";
 // Table

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdniels/uikit",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "private": false,
   "license": "MIT",
   "type": "module",