@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/lib/components/RadioCard/RadioCard.types.d.ts

@@ -0,0 +1,25 @@
+import { Theme } from '../../../domain/theme';
+import { Props as CardProps } from '../Card/Card.types';
+import { Props as RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioCard component.
+ * Combines Card styling with Radio functionality.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard
+ *   name="plan"
+ *   value="pro"
+ *   label="Pro Plan"
+ *   description="$29/month"
+ *   checked={selected === 'pro'}
+ *   onChange={(value) => setSelected(value)}
+ * />
+ * ```
+ */
+export type Props = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
+    labelWrapperClassName?: string;
+    theme?: Theme;
+};
+/** @deprecated Use Props instead */
+export type RadioCardProps = Props;

package/dist/lib/components/RadioCard/RadioCard.variants.d.ts

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

package/dist/lib/components/RadioCardGroup/RadioCardGroup.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Props } from './RadioCardGroup.types';
+/**
+ * A group of card-style radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="plan"
+ *   direction="row"
+ *   options={[
+ *     { value: 'starter', label: 'Starter', description: 'For individuals' },
+ *     { value: 'team', label: 'Team', description: 'For small teams' },
+ *     { value: 'business', label: 'Business', description: 'For organizations' },
+ *   ]}
+ *   defaultChecked="team"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiocardgroup--docs Storybook}
+ */
+export declare const RadioCardGroup: FC<Props>;

package/dist/lib/components/RadioCardGroup/RadioCardGroup.types.d.ts

@@ -0,0 +1,32 @@
+import { Theme } from '../../../domain/theme';
+import { Props as RadioCardProps } from '../RadioCard/RadioCard.types';
+/**
+ * Props for the RadioCardGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioCardGroup
+ *   name="pricing"
+ *   options={[
+ *     { value: 'basic', label: 'Basic', description: '$9/mo' },
+ *     { value: 'pro', label: 'Pro', description: '$29/mo' },
+ *     { value: 'enterprise', label: 'Enterprise', description: 'Custom' },
+ *   ]}
+ *   defaultChecked="pro"
+ *   onValueChange={(value) => setTier(value)}
+ * />
+ * ```
+ */
+export type Props = {
+    asChild?: boolean;
+    className?: string;
+    defaultChecked?: string;
+    direction?: 'row' | 'col';
+    name: string;
+    options: Omit<RadioCardProps, 'name' | 'checked' | 'defaultChecked'>[];
+    theme?: Theme;
+    wrapperClassName?: string;
+    onValueChange?: (value: string) => void;
+};
+/** @deprecated Use Props instead */
+export type RadioCardGroupProps = Props;

package/dist/lib/components/RadioCardGroup/RadioCardGroup.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const radioCardGroupVariants: (props?: ({
+    direction?: "row" | "col" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { Props } from './RadioGroup.types';
+/**
+ * A group of radio buttons with shared state management.
+ *
+ * @example
+ * ```tsx
+ * // Vertical layout (default)
+ * <RadioGroup
+ *   name="subscription"
+ *   options={[
+ *     { value: 'monthly', label: 'Monthly', description: '$10/mo' },
+ *     { value: 'yearly', label: 'Yearly', description: '$100/yr' },
+ *   ]}
+ *   defaultChecked="monthly"
+ *   onValueChange={(value) => setSubscription(value)}
+ * />
+ *
+ * // Horizontal layout
+ * <RadioGroup
+ *   name="size"
+ *   direction="row"
+ *   options={[
+ *     { value: 'sm', label: 'Small' },
+ *     { value: 'md', label: 'Medium' },
+ *     { value: 'lg', label: 'Large' },
+ *   ]}
+ *   onValueChange={setSize}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-radiogroup--docs Storybook}
+ */
+export declare const RadioGroup: FC<Props>;

package/dist/lib/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { Theme } from '../../../domain/theme';
+import { Props as RadioProps } from '../Radio/Radio.types';
+/**
+ * Props for the RadioGroup component.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   name="plan"
+ *   options={[
+ *     { value: 'basic', label: 'Basic' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise' },
+ *   ]}
+ *   defaultChecked="basic"
+ *   onValueChange={(value) => setPlan(value)}
+ * />
+ * ```
+ */
+export interface Props {
+    /** Merge props onto child element */
+    asChild?: boolean;
+    /** CSS classes for each radio option */
+    className?: RadioProps['className'];
+    /** Initially selected value (uncontrolled mode) */
+    defaultChecked?: string;
+    /** Layout direction (row or col) */
+    direction?: 'row' | 'col';
+    /** Label for the group */
+    label?: string | ReactNode;
+    /** Form field name (shared by all radios) */
+    name: string;
+    /** Array of radio options */
+    options: Omit<RadioProps, 'name' | 'checked' | 'defaultChecked'>[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Currently selected value (controlled mode) */
+    value?: string;
+    /** CSS classes for the wrapper */
+    wrapperClassName?: string;
+    /** Callback when selection changes */
+    onValueChange?: (value: string) => void;
+}
+/** @deprecated Use Props instead */
+export type RadioGroupProps = Props;

package/dist/lib/components/RadioGroup/RadioGroup.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const radioGroupVariants: (props?: ({
+    direction?: "row" | "col" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/lib/components/Range/Range.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './Range.types';
+/**
+ * A dual-thumb slider component for selecting a value range.
+ * Built on Radix UI Slider for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Budget"
+ *   min={0}
+ *   max={10000}
+ *   defaultValue={[2000, 8000]}
+ *   showValue
+ *   name="budget"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-range--docs Storybook}
+ */
+export declare const Range: FC<Props>;

package/dist/lib/components/Range/Range.types.d.ts

@@ -0,0 +1,44 @@
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../domain/theme';
+import { rangeVariants } from './Range.variants';
+/**
+ * Props for the Range component.
+ * A dual-thumb slider for selecting a value range.
+ *
+ * @example
+ * ```tsx
+ * <Range
+ *   label="Price Range"
+ *   min={0}
+ *   max={1000}
+ *   defaultValue={[100, 500]}
+ *   showValue
+ *   size="md"
+ * />
+ * ```
+ */
+export interface Props extends VariantProps<typeof rangeVariants> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial range values [min, max] */
+    defaultValue?: SliderPropsBase['defaultValue'];
+    /** Label displayed above the range slider */
+    label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Maximum value for the range */
+    max?: SliderPropsBase['max'];
+    /** Minimum value for the range */
+    min?: SliderPropsBase['min'];
+    /** Form field name for the hidden input */
+    name?: string;
+    /** Whether to display the current range values */
+    showValue?: boolean;
+    /** Size of the slider track and thumbs */
+    size?: 'sm' | 'md' | 'lg';
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/** @deprecated Use Props instead */
+export type RangeProps = Props;

package/dist/lib/components/Range/Range.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const rangeVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rangeOutsideVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { Props } from './Select.types';
+export type { OptionGroup, AdditionalOptionGroup } from './Select.types';
+/**
+ * A dropdown select component with search, icons, and infinite scroll support.
+ * Also exported as `Dropdown` for convenience.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select
+ *   label="Country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ *   value={selected}
+ *   onChange={(e) => setSelected(e.target.value)}
+ * />
+ *
+ * // Searchable with custom icons
+ * <Select
+ *   label="Select region"
+ *   options={regions.map(r => ({
+ *     value: r.id,
+ *     label: r.name,
+ *     leftIcon: <RegionIcon />,
+ *     subLabel: r.description,
+ *   }))}
+ *   searchable
+ *   highlightSearch
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-select--docs Storybook}
+ */
+export declare const Select: FC<Props>;

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

@@ -0,0 +1,140 @@
+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;
+};
+/**
+ * A group of options with a non-interactive header label.
+ */
+export type OptionGroup = {
+    groupLabel: string;
+    options: Option[];
+};
+/**
+ * A group of additional options with a non-interactive header label.
+ */
+export type AdditionalOptionGroup = {
+    groupLabel: string;
+    options: ReactNode[];
+};
+export declare const isOptionGroup: (item: Option | OptionGroup) => item is OptionGroup;
+export declare const isAdditionalOptionGroup: (item: unknown) => item is AdditionalOptionGroup;
+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 Props = VariantProps<typeof selectVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+    additionalOptions?: ReactNode[] | string[] | AdditionalOptionGroup[];
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    highlightSearch?: boolean;
+    iconClassName?: string;
+    inputClassName?: string;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    label?: string;
+    labelAction?: ReactNode;
+    labelClassName?: string;
+    labelWrapperClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    listItemSecondRowClassName?: string;
+    mainWrapperClassName?: string;
+    noOptionsText?: string;
+    visibleItems?: number;
+    options: Option[] | OptionGroup[];
+    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;
+});
+/** @deprecated Use Props instead */
+export type SelectProps = Props;
+export {};

package/dist/lib/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/lib/components/Select/components/AdditionalOptions/AdditionalOptions.d.ts

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

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

@@ -0,0 +1,4 @@
+import { Props as SelectProps } from '../../Select.types';
+export type Props = {
+    additionalOptions?: SelectProps['additionalOptions'];
+};

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

@@ -0,0 +1 @@
+export declare const additionalOptionSlotClassName: string;

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

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

package/dist/lib/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/lib/components/Select/components/List/List.types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentRef, RefObject } from 'react';
+import { Props as SelectProps } from '../../Select.types';
+export type ListProps = Pick<SelectProps, 'name' | 'options' | 'theme' | 'additionalOptions'> & {
+    className?: string;
+    groupedOptions: SelectProps['options'];
+    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'];
+    visibleItems?: number;
+};

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

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

package/dist/lib/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/lib/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/lib/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/lib/components/Select/components/Wrapper.d.ts

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

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

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

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

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

package/dist/lib/components/Select/constants/list.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_HEIGHT_PX = 40;

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

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

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

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

package/dist/lib/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/lib/components/Select/contexts/select.hook.d.ts

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

package/dist/lib/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/lib/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/lib/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/lib/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
+import { SidebarChildrenProps, Props as 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, };