@konstructio/ui 0.1.2-alpha.84 → 0.1.2-alpha.85

package/dist/hooks/index.js

@@ -1,4 +1,6 @@
-import { useToggle as e } from "./useToggle.js";
+import { useMediaQuery as o } from "./useMediaQuery.js";
+import { useToggle as m } from "./useToggle.js";
 export {
-  e as useToggle
+  o as useMediaQuery,
+  m as useToggle
 };

package/dist/hooks/useMediaQuery.js

@@ -0,0 +1,17 @@
+import { r as n } from "../utils-COaoD3PI.js";
+import { useEffect as c, useState as h } from "react";
+var m = (e) => n ? window.matchMedia(e).matches : !1, u = (e) => {
+  const [s, a] = h(() => m(e));
+  return c(() => {
+    if (!n) return;
+    const t = window.matchMedia(e), r = (i) => {
+      a(i.matches);
+    };
+    return a(t.matches), t.addEventListener("change", r), () => {
+      t.removeEventListener("change", r);
+    };
+  }, [e]), s;
+};
+export {
+  u as useMediaQuery
+};

package/dist/index.js

@@ -1,154 +1,158 @@
-import { t as o } from "./Checkbox-Cn0UWlk8.js";
-import { t as m } from "./DropdownButton-B2XkEqPt.js";
-import { t as p } from "./Breadcrumb-C95aOsYk.js";
-import { t as a } from "./Input-GBMxM3Z7.js";
-import { t as n } from "./Counter-DtQu_T-D.js";
-import { i as l, t as d } from "./utils-DHuiYnx1.js";
-import { Alert as u } from "./components/Alert/Alert.js";
+import { t as o } from "./Checkbox-BvRmHWxk.js";
+import { t as m } from "./DropdownButton-CWwjA3zI.js";
+import { t as p } from "./Breadcrumb-BYO5PNVF.js";
+import { t as a } from "./Input-BZG7N8m1.js";
+import { t as n } from "./Counter-Qqu8PU85.js";
+import { i as l, t as d } from "./utils-COaoD3PI.js";
+import { Alert as g } from "./components/Alert/Alert.js";
 import { Button as c } from "./components/Button/Button.js";
 import { AlertDialog as D } from "./components/AlertDialog/AlertDialog.js";
-import { Autocomplete as v } from "./components/Autocomplete/Autocomplete.js";
-import { t as S } from "./Loading-DKqxR-oV.js";
+import { Autocomplete as b } from "./components/Autocomplete/Autocomplete.js";
+import { t as w } from "./Loading-DNlO4qxs.js";
 import { Badge as h } from "./components/Badge/Badge.js";
 import { Typography as x } from "./components/Typography/Typography.js";
-import { ButtonGroup as P } from "./components/ButtonGroup/ButtonGroup.js";
-import { Card as L } from "./components/Card/Card.js";
-import { useToggle as E } from "./hooks/useToggle.js";
-import { DatePicker as k } from "./components/Datepicker/DatePicker.js";
-import { Radio as G } from "./components/Radio/Radio.js";
-import { RadioGroup as z } from "./components/RadioGroup/RadioGroup.js";
-import { TimePicker as O } from "./components/TimePicker/TimePicker.js";
-import { DateRangePicker as W } from "./components/DateRangePicker/DateRangePicker.js";
-import { Divider as q } from "./components/Divider/Divider.js";
-import { Drawer as J } from "./components/Drawer/Drawer.js";
-import { BadgeMultiSelect as Q } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as Y } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as _ } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { TextMultiSelect as rr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
-import { TimeFilterDropdown as tr } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
-import { Filter as ir } from "./components/Filter/Filter.js";
-import { t as er } from "./ImageUpload-BzXjGZ2w.js";
-import { LineChart as fr } from "./components/LineChart/LineChart.js";
-import { t as sr } from "./Modal-DbTe8PVX.js";
-import { t as dr } from "./components-DNFycJGm.js";
-import { PhoneNumberInput as ur } from "./components/PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as cr } from "./components/PieChart/PieChart.js";
-import { ProgressBar as Dr } from "./components/ProgressBar/ProgressBar.js";
-import { RadioCard as vr } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as Sr } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { Range as hr } from "./components/Range/Range.js";
-import { Select as xr } from "./components/Select/Select.js";
-import { Footer as Pr } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as Lr } from "./components/Sidebar/components/Logo/Logo.js";
-import { NavigationGroup as Er } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as kr } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Gr } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Navigation as zr } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { Sidebar as Or } from "./components/Sidebar/Sidebar.js";
-import { Slider as Wr } from "./components/Slider/Slider.js";
-import { t as qr } from "./Spinner-CyuXAaC8.js";
-import { horizontalConnectorWrapperVariants as Jr, stepConnectorVariants as Kr, stepContentVariants as Qr, stepDescriptionVariants as Xr, stepIndicatorVariants as Yr, stepItemVariants as Zr, stepLabelVariants as _r, stepListVariants as $r, stepVariants as ro, stepperVariants as oo } from "./components/Stepper/Stepper.variants.js";
-import { Stepper as mo } from "./components/Stepper/Stepper.js";
-import { t as po } from "./Switch-DjbC0A8y.js";
-import { Table as ao } from "./components/Table/Table.js";
-import { Content as no } from "./components/Tabs/components/Content.js";
-import { List as lo } from "./components/Tabs/components/List.js";
-import { Trigger as uo } from "./components/Tabs/components/Trigger.js";
-import { Tabs as co } from "./components/Tabs/Tabs.js";
-import { Tag as Do } from "./components/Tag/Tag.js";
-import { TagSelect as vo } from "./components/TagSelect/TagSelect.js";
-import { TextArea as So } from "./components/TextArea/TextArea.js";
-import { t as ho } from "./Toast-D7GhS4fm.js";
-import { Tooltip as xo } from "./components/Tooltip/Tooltip.js";
-import { VirtualizedTableEvent as Po, sendCollapseRowEvent as Io, sendExpandRowEvent as Lo, sendToggleRowEvent as No } from "./components/VirtualizedTable/events/index.js";
-import { TruncateText as Fo } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
-import { VirtualizedTable as Ao } from "./components/VirtualizedTable/VirtualizedTable.js";
-import { ThemeContext as Mo } from "./contexts/theme.context.js";
-import { useTheme as yo } from "./contexts/theme.hook.js";
-import { t as Uo } from "./theme.provider-BgxXUOMP.js";
+import { ButtonGroup as L } from "./components/ButtonGroup/ButtonGroup.js";
+import { Card as I } from "./components/Card/Card.js";
+import { useMediaQuery as E } from "./hooks/useMediaQuery.js";
+import { useToggle as M } from "./hooks/useToggle.js";
+import { DatePicker as A } from "./components/Datepicker/DatePicker.js";
+import { Radio as y } from "./components/Radio/Radio.js";
+import { RadioGroup as O } from "./components/RadioGroup/RadioGroup.js";
+import { TimePicker as U } from "./components/TimePicker/TimePicker.js";
+import { DateRangePicker as j } from "./components/DateRangePicker/DateRangePicker.js";
+import { Divider as H } from "./components/Divider/Divider.js";
+import { Drawer as K } from "./components/Drawer/Drawer.js";
+import { BadgeMultiSelect as Y } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as _ } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as rr } from "./components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TextMultiSelect as tr } from "./components/Filter/components/TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as ir } from "./components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { Filter as er } from "./components/Filter/Filter.js";
+import { t as fr } from "./ImageUpload-DebL0hwF.js";
+import { LineChart as sr } from "./components/LineChart/LineChart.js";
+import { t as dr } from "./Modal-IyDr5vIx.js";
+import { t as gr } from "./components-C_LekSz_.js";
+import { PhoneNumberInput as cr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as Dr } from "./components/PieChart/PieChart.js";
+import { ProgressBar as br } from "./components/ProgressBar/ProgressBar.js";
+import { RadioCard as wr } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as hr } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { Range as xr } from "./components/Range/Range.js";
+import { Select as Lr } from "./components/Select/Select.js";
+import { Footer as Ir } from "./components/Sidebar/components/Footer/Footer.js";
+import { Label as Er } from "./components/Sidebar/components/Label/Label.js";
+import { Logo as Mr } from "./components/Sidebar/components/Logo/Logo.js";
+import { NavigationGroup as Ar } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as yr } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as Or } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Navigation as Ur } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { Sidebar as jr } from "./components/Sidebar/Sidebar.js";
+import { Slider as Hr } from "./components/Slider/Slider.js";
+import { t as Kr } from "./Spinner-BB1muhcJ.js";
+import { horizontalConnectorWrapperVariants as Yr, stepConnectorVariants as Zr, stepContentVariants as _r, stepDescriptionVariants as $r, stepIndicatorVariants as ro, stepItemVariants as oo, stepLabelVariants as to, stepListVariants as mo, stepVariants as io, stepperVariants as po } from "./components/Stepper/Stepper.variants.js";
+import { Stepper as ao } from "./components/Stepper/Stepper.js";
+import { t as no } from "./Switch-CT2R9JgM.js";
+import { Table as lo } from "./components/Table/Table.js";
+import { Content as go } from "./components/Tabs/components/Content.js";
+import { List as co } from "./components/Tabs/components/List.js";
+import { Trigger as Do } from "./components/Tabs/components/Trigger.js";
+import { Tabs as bo } from "./components/Tabs/Tabs.js";
+import { Tag as wo } from "./components/Tag/Tag.js";
+import { TagSelect as ho } from "./components/TagSelect/TagSelect.js";
+import { TextArea as xo } from "./components/TextArea/TextArea.js";
+import { t as Lo } from "./Toast-CWyLcmNX.js";
+import { Tooltip as Io } from "./components/Tooltip/Tooltip.js";
+import { VirtualizedTableEvent as Eo, sendCollapseRowEvent as Fo, sendExpandRowEvent as Mo, sendToggleRowEvent as ko } from "./components/VirtualizedTable/events/index.js";
+import { TruncateText as Go } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { VirtualizedTable as zo } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { ThemeContext as Qo } from "./contexts/theme.context.js";
+import { useTheme as Wo } from "./contexts/theme.hook.js";
+import { t as qo } from "./theme.provider-ps3SkwAo.js";
 import "./contexts/index.js";
 export {
-  u as Alert,
+  g as Alert,
   D as AlertDialog,
-  v as Autocomplete,
+  b as Autocomplete,
   h as Badge,
-  Q as BadgeMultiSelect,
+  Y as BadgeMultiSelect,
   p as Breadcrumb,
   c as Button,
-  P as ButtonGroup,
-  L as Card,
+  L as ButtonGroup,
+  I as Card,
   o as Checkbox,
-  no as Content,
+  go as Content,
   n as Counter,
-  Y as DateFilterDropdown,
-  k as DatePicker,
-  _ as DateRangeFilterDropdown,
-  W as DateRangePicker,
-  q as Divider,
-  J as Drawer,
-  xr as Dropdown,
+  _ as DateFilterDropdown,
+  A as DatePicker,
+  rr as DateRangeFilterDropdown,
+  j as DateRangePicker,
+  H as Divider,
+  K as Drawer,
+  Lr as Dropdown,
   m as DropdownButton,
-  ir as Filter,
-  Pr as Footer,
-  er as ImageUpload,
+  er as Filter,
+  Ir as Footer,
+  fr as ImageUpload,
   a as Input,
-  fr as LineChart,
-  lo as List,
-  S as Loading,
-  Lr as Logo,
-  sr as Modal,
-  dr as MultiSelectDropdown,
-  zr as Navigation,
-  Er as NavigationGroup,
-  kr as NavigationOption,
-  Gr as NavigationSeparator,
+  Er as Label,
+  sr as LineChart,
+  co as List,
+  w as Loading,
+  Mr as Logo,
+  dr as Modal,
+  gr as MultiSelectDropdown,
+  Ur as Navigation,
+  Ar as NavigationGroup,
+  yr as NavigationOption,
+  Or as NavigationSeparator,
   n as NumberInput,
-  ur as PhoneNumberInput,
-  cr as PieChart,
-  Dr as ProgressBar,
-  G as Radio,
-  vr as RadioCard,
-  Sr as RadioCardGroup,
-  z as RadioGroup,
-  hr as Range,
-  xr as Select,
-  Or as Sidebar,
-  Wr as Slider,
-  qr as Spinner,
-  mo as Stepper,
-  po as Switch,
-  ao as Table,
-  co as Tabs,
-  Do as Tag,
-  vo as TagSelect,
-  So as TextArea,
-  rr as TextMultiSelect,
-  Mo as ThemeContext,
-  Uo as ThemeProvider,
-  tr as TimeFilterDropdown,
-  O as TimePicker,
-  ho as Toast,
-  xo as Tooltip,
-  uo as Trigger,
-  Fo as TruncateText,
+  cr as PhoneNumberInput,
+  Dr as PieChart,
+  br as ProgressBar,
+  y as Radio,
+  wr as RadioCard,
+  hr as RadioCardGroup,
+  O as RadioGroup,
+  xr as Range,
+  Lr as Select,
+  jr as Sidebar,
+  Hr as Slider,
+  Kr as Spinner,
+  ao as Stepper,
+  no as Switch,
+  lo as Table,
+  bo as Tabs,
+  wo as Tag,
+  ho as TagSelect,
+  xo as TextArea,
+  tr as TextMultiSelect,
+  Qo as ThemeContext,
+  qo as ThemeProvider,
+  ir as TimeFilterDropdown,
+  U as TimePicker,
+  Lo as Toast,
+  Io as Tooltip,
+  Do as Trigger,
+  Go as TruncateText,
   x as Typography,
-  Ao as VirtualizedTable,
-  Po as VirtualizedTableEvent,
+  zo as VirtualizedTable,
+  Eo as VirtualizedTableEvent,
   d as cn,
-  Jr as horizontalConnectorWrapperVariants,
+  Yr as horizontalConnectorWrapperVariants,
   l as resolveColor,
-  Io as sendCollapseRowEvent,
-  Lo as sendExpandRowEvent,
-  No as sendToggleRowEvent,
-  Kr as stepConnectorVariants,
-  Qr as stepContentVariants,
-  Xr as stepDescriptionVariants,
-  Yr as stepIndicatorVariants,
-  Zr as stepItemVariants,
-  _r as stepLabelVariants,
-  $r as stepListVariants,
-  ro as stepVariants,
-  oo as stepperVariants,
-  yo as useTheme,
-  E as useToggle
+  Fo as sendCollapseRowEvent,
+  Mo as sendExpandRowEvent,
+  ko as sendToggleRowEvent,
+  Zr as stepConnectorVariants,
+  _r as stepContentVariants,
+  $r as stepDescriptionVariants,
+  ro as stepIndicatorVariants,
+  oo as stepItemVariants,
+  to as stepLabelVariants,
+  mo as stepListVariants,
+  io as stepVariants,
+  po as stepperVariants,
+  E as useMediaQuery,
+  Wo as useTheme,
+  M as useToggle
 };

package/dist/{isObject--aYwGuhx.js → isObject-CGNJbB5a.js}

@@ -1,4 +1,4 @@
-import { t as i } from "./chunk-D1xtDmiO.js";
+import { t as i } from "./chunk-cI0lbGMq.js";
 var y = /* @__PURE__ */ i(((n, t) => {
   var r = typeof global == "object" && global && global.Object === Object && global;
   t.exports = r;

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Footer, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
+import { Footer, Label, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator } from './components';
 import { SidebarChildrenProps, Props as SidebarProps } from './Sidebar.types';
 /**
  * A compound component for building application sidebars.
@@ -25,4 +25,4 @@ import { SidebarChildrenProps, Props as SidebarProps } from './Sidebar.types';
  * @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, };
+export { Footer, Label, Logo, Navigation, NavigationGroup, NavigationOption, NavigationSeparator, Sidebar, };

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

@@ -1,8 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import { FC, PropsWithChildren } from 'react';
 import { Theme } from '../../../domain/theme';
+import { SidebarModeProp } from './hooks/useSidebarMode';
 import { wrapperSiderbarVariants } from './Sidebar.variants';
-import { FooterProps, LogoProps, NavigationGroupProps, NavigationOptionProps, NavigationProps, NavigationSeparatorProps } from './components';
+import { FooterProps, LabelProps, LogoProps, NavigationGroupProps, NavigationOptionProps, NavigationProps, NavigationSeparatorProps } from './components';
 /**
  * Props for the Sidebar component.
  * A compound component for building application sidebars with navigation.
@@ -27,15 +28,54 @@ import { FooterProps, LogoProps, NavigationGroupProps, NavigationOptionProps, Na
  * </Sidebar>
  * ```
  */
-export interface Props extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
-    /** Whether the sidebar can be resized by dragging */
+export interface Props extends Omit<VariantProps<typeof wrapperSiderbarVariants>, 'mode'>, PropsWithChildren {
+    /** Whether the sidebar can be resized by dragging (only in expanded mode) */
     canResize?: boolean;
     /** Additional CSS classes for the divider */
     dividerClassName?: string;
-    /** Maximum width when resizing (in pixels) */
+    /**
+     * Viewport width in pixels below which the sidebar switches to `drawer` mode in `auto` mode (defaults to 640).
+     */
+    drawerBreakpoint?: number;
+    /**
+     * Maximum width in pixels for the drawer panel in `drawer` mode (defaults to 280).
+     * The drawer width is `min(viewport, drawerMaxWidth)`, so on viewports narrower than
+     * the cap it shrinks to fit instead of overflowing.
+     */
+    drawerMaxWidth?: number;
+    /**
+     * Viewport width in pixels at or above which the sidebar switches to `expanded` mode in `auto` mode (defaults to 1024).
+     */
+    expandedBreakpoint?: number;
+    /**
+     * When true, animates the hover-expand width transition with `motion`. Only takes effect
+     * together with `expandOnHover`. Defaults to `true`.
+     */
+    animateOnHover?: boolean;
+    /**
+     * When true and the sidebar is in `collapsed` mode, hovering a navigation option
+     * expands only that option (animated width) to reveal its label. The expanded
+     * option overlays content to its right and does not push siblings. Defaults to `true`.
+     */
+    expandOnHover?: boolean;
+    /** Initial width in pixels when entering expanded mode (defaults to 256, clamped to [minWith, maxWith]) */
+    initialWidth?: number;
+    /** Maximum width when resizing in pixels (defaults to 300) */
     maxWith?: number;
-    /** Minimum width when resizing (in pixels) */
+    /** Minimum width when resizing in pixels (defaults to 240) */
     minWith?: number;
+    /** Additional CSS classes for the auto-injected separator between groups in collapsed mode */
+    separatorClassName?: string;
+    /** Additional CSS classes for the hamburger trigger button rendered in drawer mode */
+    triggerClassName?: string;
+    /**
+     * Controls the responsive mode of the sidebar.
+     * - `auto` (default): derives the mode from the viewport width
+     *   (`>=1024px` expanded, `640-1023px` collapsed, `<640px` drawer).
+     * - `expanded`, `collapsed`, `drawer`: force a specific mode
+     *   (useful for testing, stories, or manual control).
+     */
+    mode?: SidebarModeProp;
     /** Theme override for this component */
     theme?: Theme;
     /** Additional CSS classes for the wrapper */
@@ -48,6 +88,7 @@ export type SidebarProps = Props;
  */
 export type SidebarChildrenProps = {
     Footer: FC<FooterProps>;
+    Label: FC<LabelProps>;
     Logo: FC<LogoProps>;
     Navigation: FC<NavigationProps>;
     NavigationGroup: FC<NavigationGroupProps>;

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

@@ -1,2 +1,4 @@
-export declare const wrapperSiderbarVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const wrapperSiderbarVariants: (props?: ({
+    mode?: "expanded" | "collapsed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const dragVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1,7 @@
+export interface Props {
+    isOpen: boolean;
+    onClick: VoidFunction;
+    className?: string;
+}
+/** @deprecated Use Props instead */
+export type HamburgerTriggerProps = Props;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { typographyVariants } from '../../../../../components/Typography/Typography.variants';
+export interface Props extends PropsWithChildren {
+    className?: string;
+    variant?: VariantProps<typeof typographyVariants>['variant'];
+}
+/** @deprecated Use Props instead */
+export type LabelProps = Props;

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

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { SidebarProps } from '../../Sidebar.types';
-declare const Wrapper: FC<SidebarProps>;
+import { Props } from '../../Sidebar.types';
+declare const Wrapper: FC<Props>;
 export { Wrapper };

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

@@ -1,5 +1,9 @@
 export * from './Footer/Footer';
 export type { FooterProps } from './Footer/Footer.types';
+export * from './HamburgerTrigger/HamburgerTrigger';
+export type { HamburgerTriggerProps } from './HamburgerTrigger/HamburgerTrigger.types';
+export * from './Label/Label';
+export type { LabelProps } from './Label/Label.types';
 export * from './Logo/Logo';
 export type { LogoProps } from './Logo/Logo.types';
 export * from './Navigation/Navigation';

package/dist/lib/components/Sidebar/contexts/SidebarContext.d.ts

@@ -0,0 +1,10 @@
+export type SidebarMode = 'expanded' | 'collapsed' | 'drawer';
+export interface SidebarContextValue {
+    mode: SidebarMode;
+    isCollapsed: boolean;
+    expandOnHover: boolean;
+    animateOnHover: boolean;
+    separatorClassName?: string;
+}
+export declare const SidebarContext: import('react').Context<SidebarContextValue>;
+export declare const useSidebarContext: () => SidebarContextValue;

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

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

package/dist/lib/components/Sidebar/hooks/index.d.ts

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

package/dist/lib/components/Sidebar/hooks/useSidebarMode.d.ts

@@ -0,0 +1,5 @@
+import { SidebarMode } from '../contexts/SidebarContext';
+export type SidebarModeProp = SidebarMode | 'auto';
+export declare const DEFAULT_EXPANDED_BREAKPOINT = 1024;
+export declare const DEFAULT_DRAWER_BREAKPOINT = 640;
+export declare const useSidebarMode: (mode?: SidebarModeProp, expandedBreakpoint?: number, drawerBreakpoint?: number) => SidebarMode;

package/dist/lib/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from './useMediaQuery';
 export * from './useToggle';

package/dist/lib/hooks/useMediaQuery.d.ts

@@ -0,0 +1 @@
+export declare const useMediaQuery: (query: string) => boolean;

package/dist/{libphonenumber-7uXgv7U8.js → libphonenumber-Dy3Kac9j.js}

@@ -1,4 +1,4 @@
-import { i as __require, t as __commonJSMin } from "./chunk-D1xtDmiO.js";
+import { i as __require, t as __commonJSMin } from "./chunk-cI0lbGMq.js";
 var require_libphonenumber = /* @__PURE__ */ __commonJSMin(((exports, module) => {
   (function(t) {
     if (typeof exports == "object" && typeof module < "u") module.exports = t();

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.83",
+  "version": "0.1.2-alpha.84",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,6 +69,7 @@
     "format:prettier": "prettier lib --write './**/*.{js,jsx,ts,tsx}' --config ./.prettierrc",
     "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prepare": "husky",
+    "setup": "npm rebuild esbuild && husky",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run --coverage",
@@ -88,18 +89,18 @@
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@react-input/mask": "^2.0.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.23",
+    "@tanstack/react-virtual": "^3.13.24",
     "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "countries-and-timezones": "^3.8.0",
-    "country-flag-icons": "^1.6.15",
+    "countries-and-timezones": "^3.9.0",
+    "country-flag-icons": "^1.6.16",
     "country-locale-map": "^1.9.12",
     "google-libphonenumber": "^3.2.44",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "motion": "^12.38.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.14.0",
@@ -146,8 +147,8 @@
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/addon-links": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
-    "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/react-query": "^5.96.2",
+    "@tailwindcss/vite": "^4.2.4",
+    "@tanstack/react-query": "^5.99.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -157,14 +158,14 @@
     "@types/lodash": "^4.17.24",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.58.1",
-    "@typescript-eslint/parser": "^8.58.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.3",
-    "autoprefixer": "^10.4.27",
+    "@vitest/coverage-v8": "^4.1.5",
+    "autoprefixer": "^10.5.0",
     "eslint": "^9.39.3",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vitest": "^0.5.4",
@@ -173,19 +174,19 @@
     "jest-axe": "^10.0.0",
     "jsdom": "^29.0.2",
     "lodash": "^4.18.1",
-    "postcss": "^8.5.9",
-    "prettier": "^3.8.1",
+    "postcss": "^8.5.10",
+    "prettier": "^3.8.3",
     "rimraf": "^6.1.3",
     "storybook": "^10.3.5",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.4",
     "ts-node": "^10.9.2",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^5.2.0",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.3"
+    "vitest": "^4.1.5"
   },
   "overrides": {
     "storybook": "$storybook",