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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Eelco Wiersma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,46 +1,23 @@
-<p align='center'>
-<img src="./apps/website/public/saasui.svg#gh-light-mode-only" alt="Saas UI logo" height="60px" />
-<img src="./apps/website/public/saasui-dark.svg#gh-dark-mode-only" alt="Saas UI logo" height="60px" />
-</p>
+# `@saas-ui/react`
 
-<p align='center'>The React component library for Startups</p>
+Unstyled React primitives for Saas UI. Styled Chakra compositions are installed
+from the registry with `@saas-ui/cli`.
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/@saas-ui/react">
-    <img src="https://img.shields.io/npm/v/@saas-ui/react" alt="NPM">
-  </a>
-  <a href="https://www.npmjs.com/package/@saas-ui/react">
-    <img src="https://img.shields.io/npm/dm/@saas-ui/react.svg" alt="npm downloads">
-  </a>
-  <img alt="MIT License" src="https://img.shields.io/github/license/saas-js/saas-ui"/>
-  <a href="https://twitter.com/intent/follow?screen_name=saas_js">
-    <img src="https://img.shields.io/twitter/follow/saas_js" alt="follow on Twitter">
-  </a>
-</p>
+```sh
+npm i @saas-ui/react
+```
 
-<hr />
+```tsx
+import { Sidebar, useSidebar } from '@saas-ui/react/sidebar'
+import { Navbar } from '@saas-ui/react/navbar'
+import { GridList } from '@saas-ui/react/grid-list'
+```
 
-Saas UI is an advanced component library designed to build beautiful B2B and dashboard style apps with speed.
-It's built on top of Chakra UI and fully written in Typescript.
+The package also exports `ErrorBoundary`, stepper hooks, and shared utilities.
 
-## Links
+Existing projects that used the previous Chakra re-export bundle should follow
+the [migration guide](https://github.com/saas-js/saas-ui/blob/v3/MIGRATION.md).
 
-💡 [Documentation](https://saas-ui.dev/docs)
+## License
 
-🧭 [Roadmap](https://roadmap.saas-ui.dev)
-
-🖼 [Storybooks](https://storybook.saas-ui.pro)
-
-🌟 [Saas UI Pro](https://saas-ui.dev/#pro-features)
-
-## Sponsors ❤️
-
-Saas UI is sponsored by these amazing companies and people.
-
-- [LocalXPose](https://localxpose.io/)
-
-## Contributing & Support
-
-Want to help? Great! Check out the [contributing guidelines](CONTRIBUTING.md) and feel free to open a PR or [discussion](https://github.com/saas-js/saas-ui/discussions/new) for feature requests and feedback.
-
-If you'd like to support the project financially, you can [become a sponsor](https://github.com/sponsors/saas-js) of Saas UI or consider ordering [Saas UI Pro Beta](https://saas-ui.lemonsqueezy.com/checkout/buy/5c76854f-738a-46b8-b32d-932a97d477f5). All funds will go toward the further development of Saas UI. This will give you access to the private Git repository with the beta and our private Discord server for support.
+MIT

package/dist/components/error-boundary/error-boundary.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ErrorContext } from './error-provider.tsx';
+export interface ErrorBoundaryProps {
+    fallback?: React.ReactNode;
+    children: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+export interface ErrorBoundaryState {
+    error?: Error | null;
+    errorInfo?: any;
+}
+/**
+ * A container component that catches errors and displays a fallback UI.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/utils/error-boundary
+ */
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+    state: ErrorBoundaryState;
+    static contextType: React.Context<import("./error-provider.tsx").ErrorContextValue>;
+    context: React.ContextType<typeof ErrorContext>;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    onError: (error: Error, errorInfo: any) => void;
+    componentDidCatch(error: Error, errorInfo: any): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/dist/components/error-boundary/error-boundary.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ErrorContext } from "./error-provider.js";
+/**
+ * A container component that catches errors and displays a fallback UI.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/utils/error-boundary
+ */
+export class ErrorBoundary extends React.Component {
+    state;
+    static contextType = ErrorContext;
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    onError = (error, errorInfo) => {
+        this.props.onError?.(error, errorInfo);
+        this.context.onError?.(error, errorInfo);
+    };
+    componentDidCatch(error, errorInfo) {
+        this.onError(error, errorInfo);
+    }
+    render() {
+        if (this.state.error) {
+            return this.props.fallback || _jsx("h1", { children: "Something went wrong." });
+        }
+        return this.props.children;
+    }
+}

package/dist/components/error-boundary/error-provider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ErrorProviderProps {
+    children: React.ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+export interface ErrorContextValue {
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+export declare const ErrorContext: React.Context<ErrorContextValue>;
+export declare const ErrorProvider: (props: ErrorProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useErrorContext: () => ErrorContextValue;

package/dist/components/error-boundary/error-provider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const ErrorContext = React.createContext({});
+export const ErrorProvider = (props) => {
+    const { children, onError } = props;
+    const value = React.useMemo(() => ({ onError }), [onError]);
+    return _jsx(ErrorContext.Provider, { value: value, children: children });
+};
+export const useErrorContext = () => React.useContext(ErrorContext);

package/dist/components/error-boundary/index.d.ts

@@ -0,0 +1,4 @@
+export { ErrorProvider, ErrorContext, useErrorContext, } from './error-provider.tsx';
+export type { ErrorProviderProps, ErrorContextValue, } from './error-provider.tsx';
+export { ErrorBoundary } from './error-boundary.tsx';
+export type { ErrorBoundaryProps, ErrorBoundaryState, } from './error-boundary.tsx';

package/dist/components/error-boundary/index.js

@@ -0,0 +1,2 @@
+export { ErrorProvider, ErrorContext, useErrorContext, } from "./error-provider.js";
+export { ErrorBoundary } from "./error-boundary.js";

package/dist/components/grid-list/grid-list.context.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+interface GridListContext {
+    id: string;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    focusId: string | null;
+    setFocusId: React.Dispatch<React.SetStateAction<string | null>>;
+}
+export declare const GridListProvider: React.Provider<GridListContext>, useGridListContext: () => GridListContext;
+export interface UseGridListProps {
+    id?: string;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+export declare const useGridList: (props: UseGridListProps) => {
+    id: string;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    focusId: string | null;
+    setFocusId: React.Dispatch<React.SetStateAction<string | null>>;
+    listProps: {
+        onBlur: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
+    };
+};
+export interface GridListItemOptions {
+    id?: string;
+    disabled?: boolean;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare const useGridListItem: (props: GridListItemOptions) => {
+    itemProps: {
+        id: string;
+        "data-focus": boolean | "true" | "false";
+        "aria-disabled": boolean | undefined;
+        tabIndex: number;
+        onFocus: (event: React.FocusEvent<HTMLDivElement, Element>) => void;
+        onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+    };
+};
+export {};

package/dist/components/grid-list/grid-list.context.js

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { nextById, prevById, queryAll } from '@zag-js/dom-utils';
+import { callAll, createContext, dataAttr } from "../../utils/index.js";
+export const [GridListProvider, useGridListContext] = createContext({
+    name: 'GridListContext',
+    errorMessage: 'useGridListContext: `context` is undefined. Seems you forgot to wrap the components in `<GridList />`',
+});
+function queryAllItems(root) {
+    return queryAll(root, `[role='row'][tabindex]:not([aria-disabled='true'])`);
+}
+export const useGridList = (props) => {
+    const id = React.useId();
+    const ref = React.useRef(null);
+    const [focusId, setFocusId] = React.useState(null);
+    const listProps = {
+        onBlur: callAll(props.onBlur, (e) => {
+            if (e.relatedTarget) {
+                const items = queryAllItems(ref.current);
+                if (!items.includes(e.relatedTarget)) {
+                    setFocusId(null);
+                }
+            }
+        }),
+    };
+    return {
+        id: props.id ?? id,
+        containerRef: ref,
+        focusId,
+        setFocusId,
+        listProps,
+    };
+};
+export const useGridListItem = (props) => {
+    const { id: containerId, containerRef, focusId, setFocusId, } = useGridListContext();
+    const id = `${containerId}-${React.useId()}`;
+    const buttonId = props.id ?? id;
+    const isFocused = focusId === buttonId;
+    function getItems() {
+        return queryAllItems(containerRef.current);
+    }
+    const itemProps = {
+        id: buttonId,
+        ['data-focus']: dataAttr(isFocused),
+        ['aria-disabled']: props.disabled ? true : undefined,
+        tabIndex: props.disabled ? -1 : 0,
+        onFocus: callAll(props.onFocus, () => {
+            setFocusId(buttonId);
+        }),
+        onKeyDown: callAll(props.onKeyDown, React.useCallback((e) => {
+            const items = getItems();
+            const keyMap = {
+                ArrowUp: () => {
+                    prevById(items, buttonId)?.focus();
+                },
+                ArrowDown: () => {
+                    nextById(items, buttonId)?.focus();
+                },
+                Home: () => {
+                    items[0]?.focus();
+                },
+                End: () => {
+                    items[items.length - 1]?.focus();
+                },
+            };
+            if (keyMap[e.key]) {
+                e.preventDefault();
+                keyMap[e.key](e);
+            }
+        }, [buttonId])),
+        onClick: (e) => {
+            if (props.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            props.onClick?.(e);
+        },
+    };
+    return {
+        itemProps,
+    };
+};

package/dist/components/grid-list/grid-list.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type HTMLSystemProps } from '../../system/index.ts';
+import { type GridListItemOptions } from './grid-list.context.ts';
+export interface GridListRootProps extends HTMLSystemProps<'div'> {
+}
+/**
+ * React component to render lists of data
+ */
+export declare const GridListRoot: React.ForwardRefExoticComponent<GridListRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface GridListHeaderProps extends HTMLSystemProps<'div'> {
+}
+export declare const GridListHeader: React.ForwardRefExoticComponent<GridListHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface GridListItemProps extends GridListItemOptions, HTMLSystemProps<'div'> {
+}
+export declare const GridListItem: React.ForwardRefExoticComponent<GridListItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface GridListCellProps extends HTMLSystemProps<'div'> {
+}
+export declare const GridListCell: React.ForwardRefExoticComponent<GridListCellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/grid-list/grid-list.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { sui } from "../../system/index.js";
+import { mergeRefs } from "../../utils/index.js";
+import { GridListProvider, useGridList, useGridListItem, } from "./grid-list.context.js";
+/**
+ * React component to render lists of data
+ */
+export const GridListRoot = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { listProps, ...context } = useGridList(props);
+    return (_jsx(GridListProvider, { value: context, children: _jsx(sui.div, { ref: mergeRefs(ref, context.containerRef), role: "grid", "aria-readonly": true, ...rest, ...listProps, children: children }) }));
+});
+export const GridListHeader = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    return (_jsx(sui.div, { ref: ref, role: "columnheader", ...rest, children: children }));
+});
+export const GridListItem = React.forwardRef((props, ref) => {
+    const { children, disabled, id, onClick, onFocus, onKeyDown, ...rest } = props;
+    const { itemProps } = useGridListItem({
+        disabled,
+        id,
+        onClick,
+        onFocus,
+        onKeyDown,
+    });
+    return (_jsx(sui.div, { ref: ref, role: "row", ...rest, ...itemProps, children: children }));
+});
+export const GridListCell = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    return (_jsx(sui.div, { ref: ref, role: "gridcell", ...rest, children: children }));
+});

package/dist/components/grid-list/index.d.ts

@@ -1 +1 @@
-export { GridList_alias_1 as GridList } from '../../_tsup-dts-rollup.js';
+export * as GridList from './namespace.ts';

package/dist/components/grid-list/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  grid_list_exports
-} from "../../chunk-ZUT5GZTD.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  grid_list_exports as GridList
-};
+export * as GridList from "./namespace.js";

package/dist/components/grid-list/namespace.d.ts

@@ -0,0 +1,2 @@
+export { GridListRoot as Root, GridListHeader as Header, GridListItem as Item, GridListCell as Cell, } from './grid-list.tsx';
+export type { GridListRootProps as RootProps, GridListHeaderProps as HeaderProps, GridListItemProps as ItemProps, GridListCellProps as CellProps, } from './grid-list.tsx';

package/dist/components/grid-list/namespace.js

@@ -0,0 +1 @@
+export { GridListRoot as Root, GridListHeader as Header, GridListItem as Item, GridListCell as Cell, } from "./grid-list.js";

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

@@ -1 +1 @@
-export { Navbar_alias_1 as Navbar } from '../../_tsup-dts-rollup.js';
+export * as Navbar from './namespace.ts';

package/dist/components/navbar/index.js

@@ -1,9 +1 @@
-'use client'
-import {
-  navbar_exports
-} from "../../chunk-DJNPK2LM.js";
-import "../../chunk-ZULBHMWG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  navbar_exports as Navbar
-};
+export * as Navbar from "./namespace.js";

package/dist/components/navbar/namespace.d.ts

@@ -0,0 +1,2 @@
+export { NavbarRoot as Root, NavbarContent as Content, NavbarBrand as Brand, NavbarItemGroup as ItemGroup, NavbarItem as Item, NavbarLink as Link, } from './navbar.tsx';
+export type { NavbarRootProps as RootProps, NavbarItemProps as ItemProps, NavbarLinkProps as LinkProps, } from './navbar.tsx';

package/dist/components/navbar/namespace.js

@@ -0,0 +1 @@
+export { NavbarRoot as Root, NavbarContent as Content, NavbarBrand as Brand, NavbarItemGroup as ItemGroup, NavbarItem as Item, NavbarLink as Link, } from "./navbar.js";

package/dist/components/navbar/navbar.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type HTMLSystemProps } from '../../system/index.ts';
+import { UseNavbarProps } from './use-navbar.ts';
+export declare const NavbarProvider: React.Provider<{
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    height: string | number;
+    hidden: boolean;
+    shouldHideOnScroll: boolean;
+    rootProps: {
+        ref: React.RefObject<HTMLDivElement | null>;
+        'data-hidden': boolean | "true" | "false";
+        'data-at-top': boolean | "true" | "false";
+        style: {
+            '--navbar-height': string | number;
+        };
+    };
+}>, useNavbarContext: () => {
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    height: string | number;
+    hidden: boolean;
+    shouldHideOnScroll: boolean;
+    rootProps: {
+        ref: React.RefObject<HTMLDivElement | null>;
+        'data-hidden': boolean | "true" | "false";
+        'data-at-top': boolean | "true" | "false";
+        style: {
+            '--navbar-height': string | number;
+        };
+    };
+};
+export interface NavbarRootProps extends UseNavbarProps, Omit<HTMLSystemProps<'div'>, 'height'> {
+    children?: React.ReactNode | React.ReactNode[];
+}
+export declare const NavbarRoot: React.ForwardRefExoticComponent<Omit<NavbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const NavbarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavbarBrand: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NavbarItemGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & React.RefAttributes<HTMLUListElement>>;
+export interface NavbarItemProps extends HTMLSystemProps<'li'> {
+}
+export declare const NavbarItem: React.ForwardRefExoticComponent<NavbarItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface NavbarLinkProps extends HTMLSystemProps<'a'> {
+}
+export declare const NavbarLink: React.ForwardRefExoticComponent<NavbarLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/navbar/navbar.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { sui } from "../../system/index.js";
+import { createContext } from "../../utils/index.js";
+import { splitNavbarProps, useNavbar } from "./use-navbar.js";
+export const [NavbarProvider, useNavbarContext] = createContext({
+    name: 'NavbarContext',
+    strict: true,
+    errorMessage: 'useNavbarContext: `context` is undefined. Seems you forgot to wrap component within <Navbar />',
+});
+export const NavbarRoot = forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const [navbarProps, rootProps] = splitNavbarProps(rest);
+    const context = useNavbar({ ...navbarProps, ref });
+    return (_jsx(NavbarProvider, { value: context, children: _jsx(sui.div, { ...rootProps, ...context.rootProps, style: {
+                '--navbar-height': context.height,
+                ...props.style,
+            }, children: children }) }));
+});
+export const NavbarContent = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ...props, ref: ref });
+});
+export const NavbarBrand = forwardRef((props, ref) => {
+    return _jsx(sui.div, { ...props, ref: ref });
+});
+export const NavbarItemGroup = forwardRef((props, ref) => {
+    return _jsx(sui.ul, { ...props, ref: ref });
+});
+export const NavbarItem = forwardRef((props, ref) => {
+    return _jsx(sui.li, { ...props, ref: ref });
+});
+export const NavbarLink = forwardRef((props, ref) => {
+    return _jsx(sui.a, { ...props, ref: ref });
+});

package/dist/components/navbar/use-navbar.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export declare const splitNavbarProps: <T extends Record<string, any>>(props: T) => [Pick<T, "parentRef" | "height" | "shouldHideOnScroll" | "disableScrollHandler" | "onScrollPositionChange">, Omit<T, "parentRef" | "height" | "shouldHideOnScroll" | "disableScrollHandler" | "onScrollPositionChange">];
+export interface UseNavbarProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref: React.ForwardedRef<HTMLDivElement>;
+    /**
+     * The parent element where the navbar is placed within.
+     * This is used to determine the scroll position and whether the navbar should be hidden or not.
+     * @default `window`
+     */
+    parentRef?: React.RefObject<HTMLElement>;
+    /**
+     * The height of the navbar.
+     * @default "3.5rem" (56px)
+     */
+    height?: number | string;
+    /**
+     * Whether the navbar should hide on scroll or not.
+     * @default false
+     */
+    shouldHideOnScroll?: boolean;
+    /**
+     * Whether the navbar parent scroll event should be listened to or not.
+     * @default false
+     */
+    disableScrollHandler?: boolean;
+    /**
+     * The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled.
+     * it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`.
+     */
+    onScrollPositionChange?: (scrollPosition: number) => void;
+}
+export declare function useNavbar(props: UseNavbarProps): {
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    height: string | number;
+    hidden: boolean;
+    shouldHideOnScroll: boolean;
+    rootProps: {
+        ref: React.RefObject<HTMLDivElement | null>;
+        'data-hidden': boolean | "true" | "false";
+        'data-at-top': boolean | "true" | "false";
+        style: {
+            '--navbar-height': string | number;
+        };
+    };
+};
+export type UseNavbarReturn = ReturnType<typeof useNavbar>;

package/dist/components/navbar/use-navbar.js

@@ -0,0 +1,70 @@
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useResizeObserver } from '@react-aria/utils';
+import { useScrollPosition } from '@saas-ui/hooks';
+import { dataAttr, splitProps } from "../../utils/index.js";
+export const splitNavbarProps = (props) => splitProps(props, [
+    'parentRef',
+    'height',
+    'shouldHideOnScroll',
+    'disableScrollHandler',
+    'onScrollPositionChange',
+]);
+export function useNavbar(props) {
+    const { ref, parentRef, height = '3.5rem', shouldHideOnScroll = false, disableScrollHandler = false, onScrollPositionChange, } = props;
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current);
+    const prevWidth = useRef(0);
+    const navHeight = useRef(0);
+    const [hidden, setHidden] = useState(false);
+    const [atTop, setAtTop] = useState(true);
+    const updateWidth = () => {
+        if (rootRef.current) {
+            const width = rootRef.current.offsetWidth;
+            if (width !== prevWidth.current) {
+                prevWidth.current = width;
+            }
+        }
+    };
+    useResizeObserver({
+        ref: rootRef,
+        onResize: () => {
+            const currentWidth = rootRef.current?.offsetWidth;
+            if (currentWidth !== prevWidth.current) {
+                updateWidth();
+            }
+        },
+    });
+    useEffect(() => {
+        updateWidth();
+        navHeight.current = rootRef.current?.offsetHeight || 0;
+    }, []);
+    useScrollPosition({
+        elementRef: parentRef,
+        isEnabled: shouldHideOnScroll || !disableScrollHandler,
+        callback: ({ prevPos, currPos }) => {
+            onScrollPositionChange?.(currPos.y);
+            setAtTop(currPos.y === 0);
+            if (shouldHideOnScroll) {
+                setHidden((prev) => {
+                    const next = currPos.y > prevPos.y && currPos.y > navHeight.current;
+                    return next !== prev ? next : prev;
+                });
+            }
+        },
+    });
+    const rootProps = {
+        ref: rootRef,
+        'data-hidden': dataAttr(hidden),
+        'data-at-top': dataAttr(atTop),
+        style: {
+            '--navbar-height': height,
+        },
+    };
+    return {
+        rootRef,
+        height,
+        hidden,
+        shouldHideOnScroll,
+        rootProps,
+    };
+}

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

@@ -1,4 +1,4 @@
-export { Sidebar_alias_1 as Sidebar } from '../../_tsup-dts-rollup.js';
-export { useSidebarStyles_alias_1 as useSidebarStyles } from '../../_tsup-dts-rollup.js';
-export { useSidebarItemStyles_alias_1 as useSidebarItemStyles } from '../../_tsup-dts-rollup.js';
-export { useSidebar_alias_1 as useSidebar } from '../../_tsup-dts-rollup.js';
+export * as Sidebar from './namespace.ts';
+export { useSidebar, useSidebarTrigger, type SidebarProviderProps, } from './sidebar.context.tsx';
+export type { UseSidebarReturn } from './sidebar.context.tsx';
+export type { SidebarMode, SidebarOptions, SidebarOptions as RootBaseProps, } from './sidebar.types.ts';

package/dist/components/sidebar/index.js

@@ -1,14 +1,2 @@
-'use client'
-import {
-  sidebar_exports,
-  useSidebar,
-  useSidebarItemStyles,
-  useSidebarStyles
-} from "../../chunk-U23VDAWJ.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  sidebar_exports as Sidebar,
-  useSidebar,
-  useSidebarItemStyles,
-  useSidebarStyles
-};
+export * as Sidebar from "./namespace.js";
+export { useSidebar, useSidebarTrigger, } from "./sidebar.context.js";

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

@@ -0,0 +1,5 @@
+export { SidebarRoot as Root, SidebarContext as Context, SidebarTrigger as Trigger, SidebarFlyoutTrigger as FlyoutTrigger, SidebarBackdrop as Backdrop, SidebarHeader as Header, SidebarBody as Body, SidebarFooter as Footer, SidebarTrack as Track, SidebarGroup as Group, SidebarGroupHeader as GroupHeader, SidebarGroupTitle as GroupTitle, SidebarGroupEndElement as GroupEndElement, SidebarGroupContent as GroupContent, SidebarNavItem as NavItem, SidebarNavButton as NavButton, SidebarNavItemEndElement as NavItemEndElement, } from './sidebar.tsx';
+export type { SidebarNavButtonProps as NavButtonProps, SidebarFlyoutTriggerProps as FlyoutTriggerProps, SidebarTriggerProps as TriggerProps, } from './sidebar.tsx';
+export type { SidebarOptions as RootBaseProps, SidebarMode as Mode, } from './sidebar.types.ts';
+export { SidebarProvider as Provider } from './sidebar.context.tsx';
+export type { SidebarProviderProps as ProviderProps } from './sidebar.context.tsx';

package/dist/components/sidebar/namespace.js

@@ -0,0 +1,2 @@
+export { SidebarRoot as Root, SidebarContext as Context, SidebarTrigger as Trigger, SidebarFlyoutTrigger as FlyoutTrigger, SidebarBackdrop as Backdrop, SidebarHeader as Header, SidebarBody as Body, SidebarFooter as Footer, SidebarTrack as Track, SidebarGroup as Group, SidebarGroupHeader as GroupHeader, SidebarGroupTitle as GroupTitle, SidebarGroupEndElement as GroupEndElement, SidebarGroupContent as GroupContent, SidebarNavItem as NavItem, SidebarNavButton as NavButton, SidebarNavItemEndElement as NavItemEndElement, } from "./sidebar.js";
+export { SidebarProvider as Provider } from "./sidebar.context.js";