@konstructio/ui 0.1.2-alpha.52 → 0.1.2-alpha.53

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

@@ -0,0 +1,119 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { selectVariants } from './Select.variants';
+/**
+ * Option type for Select dropdown items.
+ *
+ * @example
+ * ```tsx
+ * const options: Option[] = [
+ *   { value: 'us', label: 'United States', leftIcon: <FlagUS /> },
+ *   { value: 'uk', label: 'United Kingdom', subLabel: 'Europe' },
+ * ];
+ * ```
+ */
+export type Option = {
+    /** Display text for the option */
+    label: string;
+    /** Secondary text displayed below the label */
+    subLabel?: string | ReactNode;
+    /** Icon displayed on the left side of the option */
+    leftIcon?: ReactNode | string;
+    /** CSS classes for the left icon */
+    leftIconClassName?: string;
+    /** Show right component when this option is selected */
+    showRightComponentOnselectedValue?: boolean;
+    /** Component displayed on the right side of the option */
+    rightComponent?: ReactNode | string;
+    /** CSS classes for the right component */
+    rightComponentClassName?: string;
+    /** CSS classes for wrapper when this option is selected */
+    wrapperClassNameOnSelectedValue?: string;
+    /** Unique value for the option */
+    value: string;
+};
+type OnChangeFn = (params: {
+    target: {
+        value: string;
+        name: string;
+    };
+}) => void;
+/**
+ * Props for the Select (Dropdown) component.
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={country}
+ *   onChange={(e) => setCountry(e.target.value)}
+ * />
+ *
+ * // Searchable select
+ * <Select
+ *   label="Search countries"
+ *   options={countries}
+ *   searchable
+ *   highlightSearch
+ * />
+ *
+ * // With infinite scroll
+ * <Select
+ *   options={options}
+ *   isInfiniteScrollEnabled
+ *   onFetchMoreOptions={async ({ page }) => fetchMore(page)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
+ */
+export type SelectProps = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+    additionalOptions?: ReactNode[] | string[];
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    highlightSearch?: boolean;
+    iconClassName?: string;
+    inputClassName?: string;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    label?: string;
+    labelClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    listItemSecondRowClassName?: string;
+    mainWrapperClassName?: string;
+    noOptionsText?: string;
+    options: Option[];
+    searchable?: boolean;
+    showSearchIcon?: boolean;
+    theme?: Theme;
+    value?: string;
+    wrapperClassName?: string;
+    onBlur?: VoidFunction;
+    onChange?: OnChangeFn;
+    onSearchChange?: (searchTerm: string) => void;
+} & ({
+    isInfiniteScrollEnabled: true;
+    onFetchMoreOptions: (params: {
+        page: number;
+        pageSize: number;
+        termOfSearch?: string;
+    }) => Promise<{
+        data: Option[];
+        hasMore: boolean;
+    }>;
+} | {
+    isInfiniteScrollEnabled?: false | undefined;
+    onFetchMoreOptions?: never;
+});
+export {};

package/dist/components/Select/Select.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const selectVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Select/components/EmptyList.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EmptyList: FC;

package/dist/components/Select/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ListProps } from './List.types';
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<ComponentRef<'ul'>>>;

package/dist/components/Select/components/List/List.js

@@ -1,6 +1,6 @@
 import { jsxs as V, jsx as r } from "react/jsx-runtime";
 import { S as Z } from "../../../../index-BvoZGpli.js";
-import { d as B } from "../../../../debounce-BFejQm9P.js";
+import { d as B } from "../../../../debounce-DJveWHr_.js";
 import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
 import { Loading as R } from "../../../Loading/Loading.js";
 import { cn as o } from "../../../../utils/index.js";

package/dist/components/Select/components/List/List.types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentRef, RefObject } from 'react';
+import { SelectProps } from '../../Select.types';
+export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
+    className?: string;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    isLoading: boolean;
+    itemClassName?: string;
+    searchable?: boolean;
+    listItemSecondRowClassName?: string;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    isInfiniteScrollEnabled: SelectProps['isInfiniteScrollEnabled'];
+    onFetchMoreOptions?: SelectProps['onFetchMoreOptions'];
+    noOptionsText?: SelectProps['noOptionsText'];
+};

package/dist/components/Select/components/List/List.variants.d.ts

@@ -0,0 +1 @@
+export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Select/components/ListItem/ListItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListItemProps } from './ListItem.types';
+export declare const ListItem: FC<ListItemProps>;

package/dist/components/Select/components/ListItem/ListItem.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../../Select.types';
+export type ListItemProps = Option & {
+    isEmpty?: boolean;
+    className?: string;
+    listItemSecondRowClassName?: string;
+    isClickable: boolean;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+};

package/dist/components/Select/components/ListItem/ListItem.variants.d.ts

@@ -0,0 +1 @@
+export declare const listItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Select/components/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { ComponentRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { SelectProps } from '../Select.types';
+export declare const Wrapper: ForwardRefExoticComponent<Omit<SelectProps, 'options'> & RefAttributes<ComponentRef<'input'>>>;

package/dist/components/Select/components/Wrapper.js

@@ -1,28 +1,28 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { forwardRef as Z, useId as ee, useRef as w, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
-import { S as le } from "../../../loader-juvMSJ9L.js";
+import { forwardRef as Z, useId as ee, useRef as k, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
 import { Typography as ne } from "../../Typography/Typography.js";
-import { cn as n } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as se, selectVariants as ce } from "../Select.variants.js";
-import { useSelect as ie } from "../hooks/useSelect.js";
-import { List as me } from "./List/List.js";
-import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
-import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
+import { cn as l } from "../../../utils/index.js";
+import { labelVariants as le, inputVariants as oe, selectVariants as se } from "../Select.variants.js";
+import { useSelect as ce } from "../hooks/useSelect.js";
+import { List as ie } from "./List/List.js";
+import { c as me } from "../../../createLucideIcon-CP-mMPfa.js";
+import { LoaderIcon as pe } from "../../../assets/icons/components/Loader.js";
+import { C as ue } from "../../../chevron-up-IlDPxR7j.js";
 import { useSelectContext as fe } from "../contexts/select.hook.js";
 const de = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], xe = pe("search", de), je = Z(
+], xe = me("search", de), je = Z(
   ({
-    additionalOptions: b,
-    className: z,
+    additionalOptions: O,
+    className: b,
     defaultValue: x,
     disabled: t = !1,
     error: f,
     iconClassName: R,
-    inputClassName: S,
-    isInfiniteScrollEnabled: F = !1,
-    isLoading: g,
+    inputClassName: F,
+    isInfiniteScrollEnabled: S = !1,
+    isLoading: w,
     isRequired: h,
     label: v,
     labelClassName: T,
@@ -32,7 +32,7 @@ const de = [
     name: d,
     noOptionsText: _,
     placeholder: N,
-    searchable: k = !1,
+    searchable: g = !1,
     showSearchIcon: C,
     theme: $,
     wrapperClassName: H,
@@ -41,16 +41,16 @@ const de = [
     onSearchChange: q,
     ...y
   }, A) => {
-    const I = ee(), s = w(null), L = w(null), B = w(0), {
+    const I = ee(), s = k(null), L = k(null), B = k(0), {
       isOpen: c,
-      options: l,
+      options: n,
       searchTerm: D,
       value: o,
       setCanFilter: G,
       setSearchTerm: J,
       setValue: i,
       toggleOpen: K
-    } = fe(), e = te(() => l.find(({ value: a }) => a === o), [l, o]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ie({
+    } = fe(), e = te(() => n.find(({ value: a }) => a === o), [n, o]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
       ulRef: L,
       inputRef: s,
       disabled: t,
@@ -59,30 +59,30 @@ const de = [
     }), m = d ? `${I}-${d}` : I;
     ae(A, () => s.current, [s]), re(() => {
       if (x && !o) {
-        const a = l && l.find((p) => p.value === x);
+        const a = n && n.find((p) => p.value === x);
         a && i(a.value);
       }
-    }, [x, l, i, o]);
+    }, [x, n, i, o]);
     const X = (a) => {
       const p = a.target.value;
       G(!0), i(""), J(p ?? ""), q?.(p);
-      const O = l.find(
+      const z = n.find(
         (Y) => Y.value.toLocaleLowerCase() === p.toLocaleLowerCase()
       );
-      i(O ? O.value : e?.value ?? "");
+      i(z ? z.value : e?.value ?? "");
     };
     return /* @__PURE__ */ u(
       "div",
       {
         ref: Q,
-        className: n("flex flex-col w-full relative", H),
+        className: l("flex flex-col w-full relative", H),
         "data-theme": $,
         children: [
           v ? /* @__PURE__ */ u(
             "label",
             {
               id: m,
-              className: n(oe({ className: T })),
+              className: l(le({ className: T })),
               htmlFor: m,
               onClick: () => !t && j(),
               children: [
@@ -96,8 +96,8 @@ const de = [
             {
               ref: V,
               id: m,
-              className: n(
-                ce({ className: z, hasError: !!f, disabled: t })
+              className: l(
+                se({ className: b, hasError: !!f, disabled: t })
               ),
               role: "combobox",
               onClick: () => !t && K(!c),
@@ -110,7 +110,7 @@ const de = [
                   C && /* @__PURE__ */ r(
                     xe,
                     {
-                      className: n(
+                      className: l(
                         "w-4",
                         "h-4",
                         "text-zinc-500",
@@ -122,14 +122,14 @@ const de = [
                       )
                     }
                   ),
-                  k ? /* @__PURE__ */ r(
+                  g ? /* @__PURE__ */ r(
                     "input",
                     {
                       type: "text",
                       value: c ? D : e?.label ?? o ?? "",
                       onChange: X,
                       placeholder: N,
-                      className: n(se({ className: S }), {
+                      className: l(oe({ className: F }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
@@ -148,7 +148,7 @@ const de = [
                     ne,
                     {
                       variant: "body2",
-                      className: n(
+                      className: l(
                         "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
                         {
                           "text-red-700": !!f,
@@ -166,11 +166,17 @@ const de = [
                     }
                   )
                 ] }),
-                g ? /* @__PURE__ */ r(le, { className: "w-4 h-4 text-metal-400 animate-spin select-none" }) : !C && /* @__PURE__ */ r(
+                w ? /* @__PURE__ */ r(
+                  pe,
+                  {
+                    size: 16,
+                    className: "text-metal-400 animate-spin select-none"
+                  }
+                ) : !C && /* @__PURE__ */ r(
                   ue,
                   {
                     "data-state": c ? "open" : "closed",
-                    className: n(
+                    className: l(
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
                       R,
                       {
@@ -198,20 +204,20 @@ const de = [
             }
           ),
           c && /* @__PURE__ */ r(
-            me,
+            ie,
             {
               ref: L,
-              additionalOptions: b,
+              additionalOptions: O,
               className: E,
               itemClassName: M,
               name: d,
               wrapperInputRef: V,
               inputRef: s,
-              options: l,
-              isLoading: !!g,
-              searchable: k,
+              options: n,
+              isLoading: !!w,
+              searchable: g,
               listItemSecondRowClassName: W,
-              isInfiniteScrollEnabled: F,
+              isInfiniteScrollEnabled: S,
               onFetchMoreOptions: P,
               noOptionsText: _
             }

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

@@ -0,0 +1,3 @@
+export * from './EmptyList';
+export * from './List/List';
+export * from './Wrapper';

package/dist/components/Select/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/components/Select/constants/pagination.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LIST_SIZE = 10;

package/dist/components/Select/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './select.hook';
+export * from './select.provider';

package/dist/components/Select/contexts/select.context.d.ts

@@ -0,0 +1,21 @@
+import { ComponentRef, Dispatch, RefObject, SetStateAction } from 'react';
+import { Option } from '../Select.types';
+export type SelectContextType = {
+    highlightSearchEnabled: boolean;
+    isOpen: boolean;
+    searchTerm: string;
+    value?: string;
+    canFilter: boolean;
+    canContinueFetching: boolean;
+    page: number;
+    options: Option[];
+    isTyping?: boolean;
+    setOptions: Dispatch<SetStateAction<Option[]>>;
+    setPage: Dispatch<SetStateAction<number>>;
+    setCanContinueFetching: Dispatch<SetStateAction<boolean>>;
+    setCanFilter: Dispatch<SetStateAction<boolean>>;
+    setSearchTerm: Dispatch<SetStateAction<string>>;
+    setValue: (value: string, inputRef?: RefObject<ComponentRef<'input'> | null>) => void;
+    toggleOpen: (value?: boolean) => void;
+};
+export declare const SelectContext: import('react').Context<SelectContextType>;

package/dist/components/Select/contexts/select.hook.d.ts

@@ -0,0 +1,2 @@
+import { SelectContextType } from './select.context';
+export declare const useSelectContext: () => SelectContextType;

package/dist/components/Select/contexts/select.provider.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { SelectProps, Option } from '../Select.types';
+export declare const SelectProvider: FC<PropsWithChildren & {
+    highlightSearch?: boolean;
+    name?: string;
+    value?: string;
+    options: Option[];
+    onChange?: SelectProps['onChange'];
+    onBlur?: SelectProps['onBlur'];
+}>;

package/dist/components/Select/hooks/useNavigationList.d.ts

@@ -0,0 +1,11 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Select.types';
+type UseNavigationListProps = {
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    searchable?: boolean;
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
+    filteredOptions: Option[];
+};
+export declare const useNavigationUlList: ({ searchable, ulRef, wrapperInputRef, filteredOptions, }: UseNavigationListProps) => void;
+export {};

package/dist/components/Select/hooks/useSelect.d.ts

@@ -0,0 +1,15 @@
+import { ComponentRef, RefObject } from 'react';
+import { SelectProps, Option } from '../Select.types';
+type UseSelectParams = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef?: RefObject<ComponentRef<'input'> | null>;
+    disabled: boolean;
+    internalValue?: Option;
+    onBlur?: SelectProps['onBlur'];
+};
+export declare const useSelect: ({ ulRef, inputRef, disabled, internalValue, onBlur, }: UseSelectParams) => {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    wrapperInputRef: RefObject<HTMLDivElement | null>;
+    handleOpen: () => void;
+};
+export {};

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
+import { SidebarChildrenProps, SidebarProps } from './Sidebar.types';
+/**
+ * A compound component for building application sidebars.
+ * Includes sub-components for logo, navigation, groups, options, and footer.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar canResize minWith={200} maxWith={400} theme="dark">
+ *   <Sidebar.Logo>
+ *     <img src="/logo.svg" alt="Logo" />
+ *   </Sidebar.Logo>
+ *   <Sidebar.Navigation>
+ *     <Sidebar.NavigationGroup label="Menu">
+ *       <Sidebar.NavigationOption href="/" icon={<Home />}>
+ *         Home
+ *       </Sidebar.NavigationOption>
+ *     </Sidebar.NavigationGroup>
+ *   </Sidebar.Navigation>
+ *   <Sidebar.Footer>Version 1.0</Sidebar.Footer>
+ * </Sidebar>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-sidebar--docs Storybook}
+ */
+declare const Sidebar: FC<SidebarProps> & SidebarChildrenProps;
+export { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator, Sidebar, };

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

@@ -0,0 +1,54 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { wrapperSiderbarVariants } from './Sidebar.variants';
+import { FooterProps, LogoProps, NavigationGroupProps, NavigationOptionProps, NavigationProps, NavigationSeparatorProps } from './components';
+/**
+ * Props for the Sidebar component.
+ * A compound component for building application sidebars with navigation.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar canResize minWith={200} maxWith={400}>
+ *   <Sidebar.Logo>
+ *     <img src="/logo.svg" alt="Logo" />
+ *   </Sidebar.Logo>
+ *   <Sidebar.Navigation>
+ *     <Sidebar.NavigationGroup label="Main">
+ *       <Sidebar.NavigationOption href="/dashboard" icon={<Home />}>
+ *         Dashboard
+ *       </Sidebar.NavigationOption>
+ *       <Sidebar.NavigationOption href="/settings" icon={<Settings />}>
+ *         Settings
+ *       </Sidebar.NavigationOption>
+ *     </Sidebar.NavigationGroup>
+ *   </Sidebar.Navigation>
+ *   <Sidebar.Footer>v1.0.0</Sidebar.Footer>
+ * </Sidebar>
+ * ```
+ */
+export interface SidebarProps extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
+    /** Whether the sidebar can be resized by dragging */
+    canResize?: boolean;
+    /** Additional CSS classes for the divider */
+    dividerClassName?: string;
+    /** Maximum width when resizing (in pixels) */
+    maxWith?: number;
+    /** Minimum width when resizing (in pixels) */
+    minWith?: number;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+}
+/**
+ * Sidebar compound component type with sub-components.
+ */
+export type SidebarChildrenProps = {
+    Footer: FC<FooterProps>;
+    Logo: FC<LogoProps>;
+    Navigation: FC<NavigationProps>;
+    NavigationGroup: FC<NavigationGroupProps>;
+    NavigationOption: FC<NavigationOptionProps>;
+    NavigationSeparator: FC<NavigationSeparatorProps>;
+};

package/dist/components/Sidebar/Sidebar.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const wrapperSiderbarVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const dragVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Sidebar/components/Footer/Footer.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { FooterProps } from './Footer.types';
+declare const Footer: FC<FooterProps>;
+export { Footer };

package/dist/components/Sidebar/components/Footer/Footer.types.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { footerVariants } from './Footer.variants';
+export interface FooterProps extends PropsWithChildren, VariantProps<typeof footerVariants> {
+    className?: string;
+}

package/dist/components/Sidebar/components/Footer/Footer.variants.d.ts

@@ -0,0 +1 @@
+export declare const footerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Sidebar/components/Logo/Logo.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LogoProps } from './Logo.types';
+declare const Logo: FC<LogoProps>;
+export { Logo };

package/dist/components/Sidebar/components/Logo/Logo.types.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { logoVariants } from './Logo.variants';
+export interface LogoProps extends PropsWithChildren, VariantProps<typeof logoVariants> {
+    className?: string;
+}

package/dist/components/Sidebar/components/Logo/Logo.variants.d.ts

@@ -0,0 +1 @@
+export declare const logoVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Sidebar/components/Navigation/Navigation.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationChildrenProps, NavigationProps } from './Navigation.types';
+declare const Navigation: FC<NavigationProps> & NavigationChildrenProps;
+export { Navigation };

package/dist/components/Sidebar/components/Navigation/Navigation.types.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { NavigationGroupProps } from '../NavigationGroup/NavigationGroup.types';
+import { NavigationOptionProps } from '../NavigationOption/NavigationOption.types';
+import { NavigationSeparatorProps } from '../NavigationSeparator/NavigationSeparator.types';
+import { NavigationTitleProps } from '../NavigationTitle/NavigationTitle.types';
+import { navigationVariants } from './Navigation.variants';
+export interface NavigationProps extends PropsWithChildren, VariantProps<typeof navigationVariants> {
+    className?: string;
+}
+export type NavigationChildrenProps = {
+    NavigationGroup: FC<NavigationGroupProps>;
+    NavigationOption: FC<NavigationOptionProps>;
+    NavigationSeparator: FC<NavigationSeparatorProps>;
+    NavigationTitle: FC<NavigationTitleProps>;
+};

package/dist/components/Sidebar/components/Navigation/Navigation.variants.d.ts

@@ -0,0 +1 @@
+export declare const navigationVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationGroupProps } from './NavigationGroup.types';
+declare const NavigationGroup: FC<NavigationGroupProps>;
+export { NavigationGroup };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.types.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { HtmlHTMLAttributes, PropsWithChildren } from 'react';
+import { navigationGroupsVariants } from './NavigationGroup.variants';
+export interface NavigationGroupProps extends PropsWithChildren, VariantProps<typeof navigationGroupsVariants>, Pick<HtmlHTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    title?: string;
+    titleClassName?: string;
+    isVisible?: boolean;
+}

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.variants.d.ts

@@ -0,0 +1 @@
+export declare const navigationGroupsVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationOptionProps } from './NavigationOption.types';
+declare const NavigationOption: FC<NavigationOptionProps>;
+export { NavigationOption };