@crewlethq/ui 0.4.4 → 0.5.0

package/dist/SearchTrigger-Z5D4AAY7.css

@@ -0,0 +1,112 @@
+/*
+ * A button drawn as the field it stands in for.
+ *
+ * TWO PLACES, TWO GROUNDS. The approved design draws it in the rail, the
+ * whole width of the sidebar on the frame, and in a screen's own bar on the
+ * sheet. In each it is one rung up from what it stands on, the sheet on the
+ * frame and the card on the sheet, inside the default hairline, so it reads
+ * as a field sunk into neither and lifted off both.
+ */
+
+.crewlet-search-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* The design's 10px inside each end: two steps and a half. */
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  text-align: start;
+  cursor: pointer;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * THE RAIL'S FIELD: the full width of the sidebar, on the SHEET's ground, and
+ * a step taller than a control. It is the rail's one field and the first
+ * thing in it under the company's name, and the design stands it at 34px,
+ * the medium control and one scale step, so it reads as the way in rather
+ * than as one more button.
+ */
+.crewlet-search-trigger--rail {
+  display: flex;
+  width: 100%;
+  height: calc(var(--size-control-md) + var(--spacing-1));
+  background: var(--color-surface-background);
+}
+
+/*
+ * A SCREEN'S OWN SEARCH, in a bar on the sheet: the CARD's ground, the
+ * control height of the buttons beside it, and a resting width of its own.
+ */
+.crewlet-search-trigger--toolbar {
+  /* The resting width of the box, the design's. A bar with less room sets it. */
+  --crewlet-search-trigger-width: 200px;
+
+  min-width: var(--crewlet-search-trigger-width);
+  height: var(--size-control-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-search-trigger:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-search-trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+.crewlet-search-trigger__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The glyph is quieter than the word beside it, on the decoration step, which
+   is the one thing that step is for. */
+.crewlet-search-trigger__icon svg {
+  color: var(--color-text-muted);
+}
+
+/* The label takes the room, so the hint stands at the box's end. */
+.crewlet-search-trigger__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The hint as a whole, so its keys stay together at the end of the box. */
+.crewlet-search-trigger__shortcut {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  flex: none;
+}
+
+/* Under the shell's breakpoint, strictly, as the shell switches: a toolbar's
+   field collapses to its glyph where the rail becomes a drawer. The rail's
+   own field does not, because the drawer is as wide as the rail was. */
+@media (width < 1024px) {
+  .crewlet-search-trigger--toolbar {
+    min-width: 0;
+  }
+
+  .crewlet-search-trigger--toolbar .crewlet-search-trigger__label,
+  .crewlet-search-trigger--toolbar .crewlet-search-trigger__shortcut {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-search-trigger {
+    transition: none;
+  }
+}

package/dist/SegmentedControl/index.js

@@ -1,5 +1,5 @@
-export { SegmentedControl } from '../chunk-7PEFUMQJ.js';
-import '../chunk-Q3B66TJM.js';
+export { SegmentedControl } from '../chunk-DHPUMOTX.js';
+import '../chunk-QY7UU5ZB.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedMeter/SegmentedMeter.d.ts

@@ -0,0 +1,107 @@
+import type { HTMLAttributes } from 'react';
+import type { Tone } from '../utils/tone.js';
+/**
+ * The states a part may be in: the four the approved design divides a crew or
+ * a project into. Info is working (or active), warning is waiting on a person,
+ * danger is stopped, success is done.
+ *
+ * NOT `neutral` and NOT `brand`. The quiet part of a whole, the idle seats or
+ * the work nobody has started, is the REMAINDER, which the meter draws itself
+ * from `total`; a neutral segment would be a second way to draw the same
+ * thing, and the two would sit side by side looking like one. The accent means
+ * "act here", and a share of a bar is not an action.
+ */
+export type SegmentedMeterTone = Extract<Tone, 'info' | 'success' | 'warning' | 'danger'>;
+/** One part of the whole. */
+export interface SegmentedMeterSegment {
+    /** What tells two parts apart, unique within the meter: `working`, `done`. */
+    id: string;
+    /**
+     * How many. A finite number of at least 0, read as given ("4 working"), so a
+     * caller who needs a unit or a format names the whole meter with `label`. A
+     * part of 0 is neither drawn nor spoken.
+     */
+    value: number;
+    /** The state the part is in. */
+    tone: SegmentedMeterTone;
+    /** The word the count is read with: "working" in "4 working". */
+    label: string;
+}
+/**
+ * How the bar stands. `default` is the design's 8px state bar, the figure at
+ * the end of a stat tile's value line; `compact` is its 6px progress bar, the
+ * one a project row carries under its name, at the height of a `Meter`'s track.
+ */
+export type SegmentedMeterSize = 'default' | 'compact';
+export interface SegmentedMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The parts, in the order they are drawn from the leading end. */
+    segments: readonly SegmentedMeterSegment[];
+    /**
+     * The whole the parts belong to: seven seats, sixty-one tasks. What the
+     * parts leave of it is the REMAINDER, drawn after them in the quiet
+     * `--color-border-strong`. Without one the whole is the parts' own sum and
+     * there is no remainder.
+     *
+     * A total UNDER the parts' sum is not the whole of them. The bar cannot draw
+     * more than its length, so it draws the parts against their own sum, and the
+     * name keeps the figures it was given ("4 working, 3 waiting of 6"), as a
+     * `Meter` past its maximum keeps "140 of 100" rather than a bar that quietly
+     * rounds itself down to the limit it overran.
+     */
+    total?: number | undefined;
+    /**
+     * The word the remainder is read with: "idle" in "1 idle of 7". Without one
+     * the remainder is drawn and not named, and "of 7" still says there is more
+     * than the parts.
+     */
+    remainderLabel?: string | undefined;
+    size?: SegmentedMeterSize | undefined;
+    /**
+     * The accessible name, where the derived one ("4 working, 1 waiting, 1
+     * stopped, 1 idle of 7") is not what the bar means where it stands: a
+     * figure with a unit, or a count the caller formats.
+     */
+    label?: string | undefined;
+    /**
+     * The same figures are already written beside the bar, so it says nothing
+     * itself: a tile whose second line reads "1 waiting · 1 stopped · 1 idle"
+     * beside a bar that read out the same parts would say them twice.
+     */
+    decorative?: boolean | undefined;
+}
+/**
+ * What the bar says to somebody who cannot see it: every part it draws, in
+ * the order drawn, with its word, then the remainder when it has a word, then
+ * the whole. "4 working, 1 waiting, 1 stopped, 1 idle of 7".
+ *
+ * A PART OF 0 IS NOT SPOKEN, because it is not drawn: the name is the picture
+ * in words, and "0 stopped" would describe a segment nobody can see. A bar
+ * with nothing in it says "0 of 7".
+ */
+export declare function segmentedMeterLabel(segments: readonly SegmentedMeterSegment[], total?: number, remainderLabel?: string): string;
+/**
+ * A whole divided into the states its parts are in: how many seats are
+ * working, waiting, stopped and idle; how much of a project is done, active
+ * and still to do.
+ *
+ * EACH PART IS ITS SHARE OF THE BAR, and the shares add to the whole of it:
+ * each one's flex basis is its percentage of the whole, the remainder
+ * included, and the 2px gaps are taken out of them in proportion, so a part
+ * of 4 in 7 is 4/7 of the bar that is not gap. A part of 0 is not drawn at
+ * all, rather than drawn at no width: an empty box still takes a gap on each
+ * side, and its neighbours would stand 4px apart where every other pair
+ * stands 2px. No part is ever narrower than the kit's status dot, 7px, the
+ * smallest mark this kit asks a reader to tell by its hue, or than an equal
+ * share of the bar where so many parts would not fit at 7px: one stopped seat
+ * in sixty would otherwise be a sliver nobody could name.
+ *
+ * THE GAP IS WHAT SEPARATES TWO STATES, not a contrast between their fills:
+ * every fill is its tone's fill step, which the palette suite measures at 3:1
+ * as a mark on every opaque rung, and the ground shows between each pair.
+ *
+ * ONE IMAGE TO A SCREEN READER, named by `segmentedMeterLabel`, so the bar is
+ * read once as its figures rather than as five unlabelled shapes. It is not
+ * a `meter` role: that role carries ONE value against a range, and this is
+ * several.
+ */
+export declare function SegmentedMeter({ segments, total, remainderLabel, size, label, decorative, className, style, ...rest }: SegmentedMeterProps): import("react").JSX.Element;

package/dist/SegmentedMeter/index.d.ts

@@ -0,0 +1,3 @@
+import './SegmentedMeter.css';
+export { SegmentedMeter, segmentedMeterLabel } from './SegmentedMeter.js';
+export type { SegmentedMeterProps, SegmentedMeterSegment, SegmentedMeterSize, SegmentedMeterTone, } from './SegmentedMeter.js';

package/dist/SegmentedMeter/index.js

@@ -0,0 +1,2 @@
+export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
+import '../chunk-ODEQTPFM.js';

package/dist/SegmentedMeter-KQNML2TW.css

@@ -0,0 +1,109 @@
+/*
+ * The segmented meter: a whole divided into the states its parts are in
+ * (SegmentedMeter.tsx).
+ *
+ * THE APPROVED DESIGN'S STATE BAR. 8px tall with 2px between the parts, each
+ * part its tone's FILL step and the remainder the quiet --color-border-strong:
+ * "4 of 7 working" on the Home screen's first tile. The compact step is the
+ * design's 6px progress bar under a project's name, the height of a Meter's
+ * track. Both are the measure of one mark, fixed at every density, as a
+ * Meter's track and a status dot are: a bar read by its proportions does not
+ * shrink with the gaps around it.
+ *
+ * A FILL IS A MARK. Nothing is written on it, so it takes the fill step, which
+ * the palette suite in @crewlethq/tokens measures at 3:1 against every opaque
+ * rung, and the ground shows through the gap on either side of it: two states
+ * are told apart by the gap between them and by the hue each clears on the
+ * ground, never by a contrast between two fills, which no rule measures.
+ *
+ * THE REMAINDER IS THE EXTENT OF THE BAR, not a reading, as a Meter's track
+ * is: what is left of seven seats once four work, one waits and one has
+ * stopped. It is the strong hairline's colour, which stands dE 7.99 off its
+ * nearest rung (the light frame) and 17.19 off its farthest, far past the dE 3
+ * this kit holds every "can a reader notice it" difference to, so the whole is
+ * visible on any ground the bar is put on. It is quieter than a fill by design:
+ * the idle seats are the part of the picture nobody has to act on.
+ */
+
+.crewlet-segmented-meter {
+  /* The gap between two parts, declared once because the width floor below
+     takes it out of the bar as well. */
+  --crewlet-segmented-meter-gap: 2px;
+  /* How many parts share the bar. The component sets it from the parts it
+     draws; one is what a bar that says nothing else holds. */
+  --crewlet-segmented-meter-count: 1;
+
+  display: flex;
+  gap: var(--crewlet-segmented-meter-gap);
+  height: 8px;
+  min-width: 0;
+  /*
+   * ROUND AT THE TWO ENDS AND SQUARE BETWEEN THE PARTS, which is the design's
+   * bar: the corner is the bar's, clipped, rather than each part's, so a part
+   * in the middle is a plain block and the ends are round whichever parts
+   * happen to stand there. The design writes 3px; the ramp's smallest step is
+   * --radius-xs, 4px, which is half the bar at both heights, so the ends are
+   * round.
+   */
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+}
+
+.crewlet-segmented-meter--compact {
+  height: 6px;
+}
+
+/*
+ * A PART'S WIDTH IS ITS SHARE, set by the component as a flex basis in
+ * percent of the whole. The bases add to 100%, the gaps push the row past its
+ * box, and every part gives back in proportion to its basis, which is what
+ * flex-shrink at 1 does: each ends at its share of the bar less the gaps.
+ *
+ * THE FLOOR is the kit's 7px status dot, the smallest mark this kit asks a
+ * reader to tell by its hue: at its share alone one stopped seat in sixty is a
+ * sixth of a pixel. It yields to an equal share of the bar where so many parts
+ * are drawn that 7px each would not fit, so no part is ever pushed out of the
+ * end. A part held at the floor overstates its share, and the name says the
+ * exact figures.
+ */
+.crewlet-segmented-meter__segment {
+  flex-grow: 0;
+  flex-shrink: 1;
+  min-width: min(
+    7px,
+    calc(
+      (100% - (var(--crewlet-segmented-meter-count) - 1) * var(--crewlet-segmented-meter-gap)) /
+        var(--crewlet-segmented-meter-count)
+    )
+  );
+  height: 100%;
+}
+
+.crewlet-segmented-meter__segment[data-tone='info'] { background: var(--color-feedback-info); }
+.crewlet-segmented-meter__segment[data-tone='success'] { background: var(--color-feedback-success); }
+.crewlet-segmented-meter__segment[data-tone='warning'] { background: var(--color-feedback-warning); }
+.crewlet-segmented-meter__segment[data-tone='danger'] { background: var(--color-feedback-danger); }
+
+.crewlet-segmented-meter__remainder {
+  background: var(--color-border-strong);
+}
+
+/*
+ * FORCED COLORS. The mode repaints every author background to Canvas, so a bar
+ * drawn only in backgrounds disappears whole for exactly the reader who asked
+ * for more contrast, and a bar is read by its LENGTHS, which that reader needs
+ * as much as anybody. A system colour an author writes is kept, so the parts
+ * are drawn in CanvasText and the remainder in GrayText, the system's own
+ * pair for "there" and "quieter", and the gaps still stand between the parts.
+ * The hues go, as every hue does in this mode: the name says which part is
+ * which state.
+ */
+@media (forced-colors: active) {
+  .crewlet-segmented-meter__segment[data-tone] {
+    background: CanvasText;
+  }
+
+  .crewlet-segmented-meter__remainder {
+    background: GrayText;
+  }
+}

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-KNYYCWMK.js';
-import '../chunk-KIC7BZYJ.js';
+export { Select } from '../chunk-SJQ546ID.js';
+import '../chunk-6MU7HNB4.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Shortcut/index.js

@@ -1,4 +1,4 @@
-export { matchesShortcut, useShortcut } from '../chunk-F6OE5FH3.js';
+export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
 import '../chunk-7RPGY3JE.js';
-import '../chunk-ITHXJHBB.js';
+import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SidebarNav/SidebarNav.d.ts

@@ -1,19 +1,29 @@
 /**
  * The rail's navigation: groups of rows, one of which says where the reader is.
  *
- * THE ROW THE READER IS ON IS THE ONE PLACE THE ACCENT APPEARS IN THE CHROME,
- * and it takes the accent twice over: the accent's soft tint as its ground,
- * and the accent ink for its label and its glyph. Position AND hue, so the row
- * is found at a glance by a reader who sees the hue and by one who does not.
+ * THE ROW THE READER IS ON IS RAISED, WITH A HAIRLINE ROUND IT, AND NO HUE: it
+ * is found by its position, its lift and its line, by a reader who sees
+ * colour and by one who does not. The accent is the primary action's fill, so
+ * a violet row in the rail would read as a second primary on every screen.
  * `aria-current="page"` says the same thing to a screen reader, and the style
  * is drawn FROM that attribute, so the two cannot come apart. The stylesheet
- * carries why this replaced a one-pixel accent bar outside the row's edge.
+ * carries why the hairline is an outline rather than a shadow.
  *
  * THE LINK ELEMENT BELONGS TO THE APPLICATION (`renderLink`). A router's own
  * link is what carries a client navigation and a leave guard; a plain anchor is
  * what carries a middle click into a new tab. Neither is right everywhere, so
  * neither is built in: the engine keeps plain anchors and the console passes
  * its router's NavLink.
+ *
+ * A FIGURE AT THE END OF A ROW IS ONE OF TWO THINGS, and the two are two props
+ * rather than one prop with a tone. A `count` is how many of something the
+ * destination holds (the open tasks in a project), a quiet figure in the
+ * tertiary ink; a `badge` is how many things are waiting on the reader (the
+ * unread in the inbox), the one filled pill in the chrome. Both are READ as
+ * part of the row's name, with the words the caller gives them ("Inbox, 5
+ * unread"), because a bare "5" after a name says nothing about what it counts,
+ * and both carry those words as required props, so a figure without them does
+ * not type-check.
  */
 import { type MouseEventHandler, type ReactNode } from 'react';
 export interface SidebarNavProps {
@@ -26,6 +36,24 @@ export interface SidebarNavProps {
     className?: string | undefined;
     children?: ReactNode;
 }
+/**
+ * The one control a group's heading can carry at its end: the add beside
+ * "Projects".
+ *
+ * A DESCRIPTION RATHER THAN AN ELEMENT, because the rail is what draws it: a
+ * square at the pointer-target floor, which is exactly the heading's height,
+ * named by `label`, with its ring inside its own box like every row in a
+ * clipping scroller. A control handed in whole would bring its own step, and
+ * the smallest one in the kit is two pixels taller than the heading it sits
+ * in.
+ */
+export interface NavGroupAction {
+    /** What pressing it does, in words: "New project". It is the control's name. */
+    label: string;
+    /** The glyph. Decoration: the label is the name. */
+    icon: ReactNode;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
 export interface NavGroupProps {
     /**
      * The group's heading. Without one the rows are simply a run of rows, and an
@@ -34,6 +62,13 @@ export interface NavGroupProps {
      * rail spent on nothing.
      */
     label?: ReactNode;
+    /**
+     * A control at the end of the heading. It is a sibling of the heading's
+     * words rather than part of them, so the group is still named by its label
+     * alone, and it takes its own place in the tab order before the group's
+     * first row.
+     */
+    action?: NavGroupAction | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }
@@ -46,33 +81,58 @@ export interface NavLinkProps {
     onClick?: MouseEventHandler<HTMLElement> | undefined;
 }
 /**
- * How loudly a row's badge is drawn.
+ * A figure at the end of a row, and what it counts.
  *
- * `neutral` is a quiet figure at the end of the row, in the row's own ink.
- * `attention` is the one badge in the chrome allowed a status hue: a count of
- * what is waiting on a person is the one thing that should pull the eye out of
- * whatever screen the reader is on. It is a tint behind a word rather than a
- * word in a hue, so it still reads to somebody who cannot separate the hue.
- *
- * A TONE RATHER THAN A COMPONENT THE CALLER PASSES IN, because the tint has to
- * clear its floor on the ground the ROW has, which is the accent tint on the
- * reader's own row. That is a fact about the rail, measured in the rail's own
- * stylesheet, and not something a call site can be asked to know.
+ * VALUES RATHER THAN AN ELEMENT, because the rail is what paints them: the
+ * pair has to clear its floor on every ground a ROW can have, the reader's
+ * own raised row included, and that is a fact about the rail, measured in the
+ * rail's own stylesheet, not something a call site can be asked to know.
  */
-export type NavBadgeTone = 'neutral' | 'attention';
+export interface NavFigure {
+    /** The figure, drawn as given, so the caller decides its formatting. */
+    value: number | string;
+    /**
+     * What is counted, read after the figure as part of the row's name:
+     * `unread` makes the inbox row "Inbox, 5 unread". Required, because a
+     * figure read with no word after it is a number nobody can place.
+     */
+    label: string;
+}
+/** A quiet figure: how many of something the destination holds. */
+export interface NavCount extends NavFigure {
+    /**
+     * A mark before the figure: the working dot beside a count of agents at
+     * work. Decoration, because the label says the same thing in words.
+     */
+    mark?: ReactNode;
+}
 export interface NavItemProps {
     /** What the row is called. */
     label: ReactNode;
     /** The row's glyph. Decoration: the label beside it carries the meaning. */
     icon?: ReactNode;
     /**
-     * A count or a state at the end of the row. The slot draws it: whatever is
-     * passed contributes its text and the name a screen reader reads after the
-     * row's own, so a `<Count>` here is a figure rather than a second pill.
+     * A short key drawn as a chip before the label, in place of a glyph: a
+     * project's `ENG`. It is text, and READ as the start of the row's name
+     * ("ENG Core platform"), because it is the prefix every item in that project
+     * is filed under and a reader who hears it can find them. A string rather
+     * than an element, because the rail paints the chip and measures it.
+     */
+    lead?: string | undefined;
+    /**
+     * How many of something the destination holds, as a quiet figure at the end
+     * of the row in the tertiary ink: the open tasks in a project.
+     */
+    count?: NavCount | undefined;
+    /**
+     * How many things at this destination are waiting on the reader, as the one
+     * filled pill in the chrome, in the accent: the unread in the inbox. A count
+     * of what is waiting on the reader is the one thing in the rail that asks
+     * them to act, which is what the accent means; it is a FILL carrying a
+     * figure rather than a figure in a hue, so it still reads to somebody who
+     * cannot separate the hue. Anything else is a `count`.
      */
-    badge?: ReactNode;
-    /** How loudly. Neutral unless this row is what needs a person. */
-    badgeTone?: NavBadgeTone | undefined;
+    badge?: NavFigure | undefined;
     href?: string | undefined;
     /** Whether this row is the screen the reader is on. */
     current?: boolean | undefined;
@@ -112,6 +172,6 @@ export declare namespace SidebarNav {
  * `<div>` here still carries the label's own padding, which put sixteen blank
  * pixels at the top of the rail and named a group nothing could read.
  */
-export declare function NavGroup({ label, className, children }: NavGroupProps): import("react").JSX.Element;
+export declare function NavGroup({ label, action, className, children }: NavGroupProps): import("react").JSX.Element;
 /** One row: a glyph, a label, an optional badge, and optionally rows beneath. */
-export declare function NavItem({ label, icon, badge, badgeTone, href, current, disabledReason, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;
+export declare function NavItem({ label, icon, lead, count, badge, href, current, disabledReason, renderLink, onClick, children, expanded, defaultExpanded, onExpandedChange, expandLabel, className, }: NavItemProps): import("react").JSX.Element;

package/dist/SidebarNav/index.d.ts

@@ -1,3 +1,3 @@
 import './SidebarNav.css';
 export { NavGroup, NavItem, SidebarNav } from './SidebarNav.js';
-export type { NavBadgeTone, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps } from './SidebarNav.js';
+export type { NavCount, NavFigure, NavGroupAction, NavGroupProps, NavItemProps, NavLinkProps, SidebarNavProps, } from './SidebarNav.js';

package/dist/SidebarNav/index.js

@@ -1,3 +1,3 @@
-export { NavGroup, NavItem, SidebarNav } from '../chunk-3EYF6HKB.js';
+export { NavGroup, NavItem, SidebarNav } from '../chunk-IVFJD7WY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';