@saas-ui/react 3.0.0-next.9 → 3.0.0-rc.0

package/dist/components/sidebar/sidebar.context.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLSystemProps } from '../../system/index.ts';
+import type { SidebarMode, SidebarOptions } from './sidebar.types.ts';
+export interface UseSidebarReturn {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    toggle: () => void;
+    isMobile?: boolean;
+    openMobile?: boolean;
+    setOpenMobile: (open: boolean) => void;
+    mode: SidebarMode;
+    setMode: (mode: SidebarMode) => void;
+}
+declare const useSidebar: () => UseSidebarReturn;
+export interface SidebarProviderProps extends Omit<SidebarOptions, 'children'> {
+    /**
+     * The content of the sidebar.
+     */
+    children: React.ReactNode;
+}
+export declare function SidebarProvider(props: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+export { useSidebar };
+export declare const useSidebarTrigger: () => {
+    open: boolean;
+    isMobile: boolean | undefined;
+    getButtonProps: (props: HTMLSystemProps<"button">) => {
+        onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        'aria-label': string;
+        'data-state': string;
+    };
+    getFlyoutButtonProps: (props: HTMLSystemProps<"button">) => {
+        onMouseEnter: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        'data-state': string;
+    };
+};

package/dist/components/sidebar/sidebar.context.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useControllableState, useIsMobile, useOpenState } from '@saas-ui/hooks';
+import { callAll, createContext } from "../../utils/index.js";
+const [SidebarContextProvider, useSidebar] = createContext({
+    name: 'SidebarProvider',
+    strict: true,
+});
+export function SidebarProvider(props) {
+    const { children, defaultOpen = true, open, onOpenChange, mode: modeProp, onModeChange, } = props;
+    const isMobile = useIsMobile();
+    const [mode, setMode] = useControllableState({
+        defaultValue: 'collapsible',
+        value: modeProp === 'flyout' && isMobile ? 'collapsible' : modeProp,
+        onChange: (mode) => {
+            onModeChange?.({ mode });
+        },
+    });
+    const isFlyout = mode === 'flyout';
+    const [openMobile, setOpenMobile] = useState(false);
+    const openState = useOpenState({
+        defaultOpen: isMobile ? openMobile : isFlyout ? false : defaultOpen,
+        open: isMobile ? openMobile : open,
+        onOpenChange(details) {
+            if (isMobile) {
+                setOpenMobile(details.open);
+            }
+            else {
+                onOpenChange?.({
+                    open: details.open,
+                    mode,
+                });
+            }
+        },
+    });
+    const context = useMemo(() => {
+        return {
+            open: openState.open ?? false,
+            setOpen: openState.setOpen,
+            toggle: () => openState.setOpen((prev) => !prev),
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            mode,
+            setMode,
+        };
+    }, [openState, isMobile, openMobile, mode]);
+    return (_jsx(SidebarContextProvider, { value: context, children: children }));
+}
+export { useSidebar };
+export const useSidebarTrigger = () => {
+    const context = useSidebar();
+    const getButtonProps = (props) => {
+        return {
+            onClick: callAll(context?.toggle, props?.onClick),
+            'aria-label': context.open ? 'Close sidebar' : 'Open sidebar',
+            'data-state': context.open ? 'open' : 'closed',
+        };
+    };
+    const getFlyoutButtonProps = (props) => {
+        return {
+            onMouseEnter: callAll(() => {
+                context?.setOpen(true);
+            }, props?.onMouseEnter),
+            'data-state': context.open ? 'open' : 'closed',
+        };
+    };
+    return {
+        open: context?.open,
+        isMobile: context?.isMobile,
+        getButtonProps,
+        getFlyoutButtonProps,
+    };
+};

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type PresenceProps } from '@ark-ui/react';
+import { type HTMLSystemProps } from '../../system/index.ts';
+import { type UseSidebarReturn } from './sidebar.context.tsx';
+export declare const SidebarContext: (props: {
+    children: (context: UseSidebarReturn) => React.ReactNode;
+}) => React.ReactNode;
+export declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarTriggerProps extends HTMLSystemProps<'button'> {
+}
+export declare const SidebarTrigger: React.ForwardRefExoticComponent<SidebarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarFlyoutTriggerProps extends HTMLSystemProps<'button'> {
+}
+export declare const SidebarFlyoutTrigger: React.ForwardRefExoticComponent<SidebarFlyoutTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SidebarBackdropProps extends HTMLSystemProps<'div'>, PresenceProps {
+}
+export declare const SidebarBackdrop: React.ForwardRefExoticComponent<SidebarBackdropProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sidebar header section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export declare const SidebarHeader: React.ForwardRefExoticComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>;
+/**
+ * Sidebar body section, used for the main content of the sidebar.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export declare const SidebarBody: React.ForwardRefExoticComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>;
+/**
+ * Sidebar footer section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export declare const SidebarFooter: React.ForwardRefExoticComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>;
+export declare const SidebarTrack: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroupHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroupTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SidebarGroupEndElement: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarNavItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarNavButtonProps extends HTMLSystemProps<'div'> {
+    active?: boolean;
+}
+export declare const SidebarNavButton: React.ForwardRefExoticComponent<SidebarNavButtonProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidebarNavItemEndElement: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState } from 'react';
+import { Presence } from '@ark-ui/react';
+import { sui } from "../../system/index.js";
+import { callAll, dataAttr } from "../../utils/index.js";
+import { useSidebar, useSidebarTrigger, } from "./sidebar.context.js";
+export const SidebarContext = function SidebarContext(props) {
+    const context = useSidebar();
+    return props.children(context);
+};
+export const SidebarRoot = React.forwardRef((props, ref) => {
+    const { children, ...containerProps } = props;
+    const { open, mode } = useSidebar();
+    return (_jsx(sui.div, { ref: ref, "data-state": open ? 'open' : 'closed', "data-mode": mode, ...containerProps, children: children }));
+});
+export const SidebarTrigger = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { getButtonProps } = useSidebarTrigger();
+    return (_jsx(sui.button, { ...getButtonProps(rest), ref: ref, ...rest, children: children }));
+});
+export const SidebarFlyoutTrigger = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { getFlyoutButtonProps } = useSidebarTrigger();
+    return (_jsx(sui.button, { ...getFlyoutButtonProps(rest), ref: ref, ...rest, children: children }));
+});
+export const SidebarBackdrop = forwardRef((props, ref) => {
+    const { setOpen, isMobile, open, mode } = useSidebar();
+    const [enabled, setEnabled] = useState(false);
+    if (!isMobile && mode !== 'flyout') {
+        return null;
+    }
+    const backdropProps = {
+        onClick: () => {
+            if (mode !== 'flyout') {
+                setOpen(false);
+            }
+        },
+        onMouseEnter: () => {
+            if (mode === 'flyout') {
+                setOpen(false);
+            }
+        },
+    };
+    return (_jsx(Presence, { present: open, unmountOnExit: true, lazyMount: true, onAnimationStart: () => {
+            setEnabled(false);
+        }, onAnimationEnd: () => {
+            setEnabled(true);
+        }, asChild: true, children: _jsx(sui.div, { ref: ref, "data-visible": enabled, ...backdropProps, ...props }) }));
+});
+/**
+ * Sidebar header section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export const SidebarHeader = sui.header;
+/**
+ * Sidebar body section, used for the main content of the sidebar.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export const SidebarBody = sui.div;
+/**
+ * Sidebar footer section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+export const SidebarFooter = sui.div;
+export const SidebarTrack = forwardRef((props, ref) => {
+    const { setOpen, mode } = useSidebar();
+    return (_jsx(sui.div, { ref: ref, ...props, onClick: callAll(props.onClick, (e) => {
+            if (!e.defaultPrevented && mode !== 'flyout') {
+                setOpen(false);
+            }
+        }) }));
+});
+export const SidebarGroup = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});
+export const SidebarGroupHeader = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});
+export const SidebarGroupTitle = forwardRef((props, ref) => {
+    return _jsx(sui.h5, { ref: ref, ...props });
+});
+export const SidebarGroupEndElement = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});
+export const SidebarGroupContent = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});
+export const SidebarNavItem = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});
+export const SidebarNavButton = forwardRef((props, ref) => {
+    const { children, active, ...rest } = props;
+    const { setOpenMobile, isMobile } = useSidebar();
+    return (_jsx(sui.div, { ref: ref, "data-active": dataAttr(active), role: "button", ...rest, onClick: callAll(props.onClick, (e) => {
+            if (!e.defaultPrevented && isMobile) {
+                setOpenMobile(false);
+            }
+        }), children: children }));
+});
+export const SidebarNavItemEndElement = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ref: ref, ...props });
+});

package/dist/components/sidebar/sidebar.types.d.ts

@@ -0,0 +1,29 @@
+export type SidebarMode = 'flyout' | 'collapsible' | 'compact';
+export interface SidebarOptions {
+    /**
+     * The mode of the sidebar. Flyout mode is only available on desktop.
+     * @default 'collapsible'
+     */
+    mode?: SidebarMode;
+    /**
+     * Control the default visibility of the sidebar.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Control the visibility of the sidebar.
+     */
+    open?: boolean;
+    /**
+     * Callback invoked when the sidebar is opened.
+     */
+    onOpenChange?: (details: {
+        open: boolean;
+        mode: SidebarMode;
+    }) => void;
+    /**
+     * Callback invoked when the mode of the sidebar is changed.
+     */
+    onModeChange?: (details: {
+        mode: SidebarMode;
+    }) => void;
+}

package/dist/components/sidebar/sidebar.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,2 @@
-export { Steps_alias_1 as Steps } from '../../_tsup-dts-rollup.js';
+export { useStepper, StepperProvider, useStep, useStepperContext, useStepperNextButton, useStepperPrevButton, } from './use-stepper.tsx';
+export type { UseStepProps, UseStepperProps, UseStepperReturn, } from './use-stepper.tsx';

package/dist/components/steps/index.js

@@ -1,10 +1 @@
-'use client'
-import {
-  steps_exports
-} from "../../chunk-XQTIY2ND.js";
-import "../../chunk-KTLWEUNW.js";
-import "../../chunk-XRQQE2AC.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  steps_exports as Steps
-};
+export { useStepper, StepperProvider, useStep, useStepperContext, useStepperNextButton, useStepperPrevButton, } from "./use-stepper.js";

package/dist/components/steps/use-stepper.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+export declare const StepperProvider: React.Provider<{
+    stepsRef: React.RefObject<string[]>;
+    activeStep: string;
+    activeIndex: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    completed: boolean;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setStep: (name: string) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    registerStep: (name: string) => void;
+    unregisterStep: (name: string) => void;
+}>, useStepperContext: () => {
+    stepsRef: React.RefObject<string[]>;
+    activeStep: string;
+    activeIndex: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    completed: boolean;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setStep: (name: string) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    registerStep: (name: string) => void;
+    unregisterStep: (name: string) => void;
+};
+export interface UseStepperProps {
+    step?: number | string;
+    steps?: string[];
+    completed?: boolean;
+    onChange?(index: number): void;
+}
+export declare function useStepper(props: UseStepperProps): {
+    stepsRef: React.RefObject<string[]>;
+    activeStep: string;
+    activeIndex: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    completed: boolean;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setStep: (name: string) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    registerStep: (name: string) => void;
+    unregisterStep: (name: string) => void;
+};
+export type UseStepperReturn = ReturnType<typeof useStepper>;
+export interface UseStepProps {
+    id?: string;
+    active?: boolean;
+    completed?: boolean;
+}
+export declare function useStep(props: UseStepProps): {
+    active: boolean | undefined;
+    completed: boolean | undefined;
+};
+/**
+ * Returns props for a Prev Button
+ */
+export declare function useStepperPrevButton({ label }?: {
+    label?: string | undefined;
+}): {
+    disabled: boolean;
+    onClick: () => void;
+    children: string;
+};
+/**
+ * Returns props for a Next Button
+ */
+export declare function useStepperNextButton({ label, submitLabel, }?: {
+    label?: string | undefined;
+    submitLabel?: string | undefined;
+}): {
+    disabled: boolean;
+    onClick: () => void;
+    children: string;
+};

package/dist/components/steps/use-stepper.js

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { createContext } from '../../utils';
+export const [StepperProvider, useStepperContext] = createContext({
+    name: 'StepperContext',
+    errorMessage: 'useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`',
+});
+export function useStepper(props) {
+    const { step, onChange, steps } = props;
+    const [activeIndex, setIndex] = React.useState(0);
+    const stepsRef = React.useRef(steps || []);
+    const initializedRef = React.useRef(false);
+    const [, onUpdate] = React.useState(Date.now());
+    const registerStep = React.useCallback((name) => {
+        const newSteps = [...stepsRef.current];
+        if (newSteps.indexOf(name) !== -1) {
+            return;
+        }
+        newSteps.push(name);
+        stepsRef.current = newSteps;
+        onUpdate(Date.now());
+    }, [stepsRef, onUpdate]);
+    const unregisterStep = (name) => {
+        stepsRef.current = stepsRef.current.slice(stepsRef.current.indexOf(name), 1);
+    };
+    const setStep = (name) => {
+        const i = stepsRef.current.indexOf(name);
+        if (i !== -1) {
+            setIndex(i);
+        }
+    };
+    const nextStep = () => {
+        setIndex(activeIndex + 1);
+    };
+    const prevStep = () => {
+        setIndex(activeIndex - 1);
+    };
+    React.useEffect(() => {
+        if (typeof step === 'string') {
+            setStep(step);
+        }
+        else if (typeof step === 'number') {
+            setIndex(step);
+        }
+        else if (activeIndex === -1) {
+            setIndex(0); // initiate the stepper by activating the first step
+        }
+    }, [step]);
+    React.useEffect(() => {
+        if (!initializedRef.current) {
+            initializedRef.current = true;
+            return;
+        }
+        onChange?.(activeIndex);
+    }, [activeIndex, onChange]);
+    const context = {
+        stepsRef,
+        activeStep: stepsRef.current[activeIndex],
+        activeIndex,
+        isFirstStep: activeIndex === 0,
+        isLastStep: activeIndex === stepsRef.current.length - 1,
+        completed: activeIndex >= stepsRef.current.length,
+        setIndex,
+        setStep,
+        nextStep,
+        prevStep,
+        registerStep,
+        unregisterStep,
+    };
+    return context;
+}
+export function useStep(props) {
+    const { id, active, completed } = props;
+    const { stepsRef, registerStep, unregisterStep, activeStep } = useStepperContext();
+    React.useEffect(() => {
+        console.log('useStep', id);
+        if (!id) {
+            return;
+        }
+        registerStep(id);
+        return () => {
+            unregisterStep(id);
+        };
+    }, [stepsRef]);
+    return {
+        active: id ? activeStep === id : active,
+        completed,
+    };
+}
+/**
+ * Returns props for a Prev Button
+ */
+export function useStepperPrevButton({ label = 'Back' } = {}) {
+    const { isFirstStep, prevStep } = useStepperContext();
+    return {
+        disabled: isFirstStep,
+        onClick: prevStep,
+        children: label,
+    };
+}
+/**
+ * Returns props for a Next Button
+ */
+export function useStepperNextButton({ label = 'Next', submitLabel = 'Submit', } = {}) {
+    const { isLastStep, completed, nextStep } = useStepperContext();
+    return {
+        disabled: completed,
+        onClick: nextStep,
+        children: isLastStep ? submitLabel : label,
+    };
+}