@wheelhouse/ui 0.2.3 → 0.2.4

package/dist/components/filters/filters.stories.js

@@ -2,23 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Activity, BarChart3, Filter as FilterIcon, Home, Tag, Users } from 'lucide-react';
+import { BarChart3 } from 'lucide-react';
 import { buildDateSelectorI18nFromT, DATE_SELECTOR_NAMESPACE } from '../../blocks/date-selector';
 import { Button } from '../button';
 import { buildFilterI18nFromT, FILTERS_NAMESPACE } from './filters-i18n.shared';
+import { buildListingGroupedFields } from './filter-fields-listing-demo';
 import { createFilter, DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters } from '.';
-const teamMemberOptions = [
-    { value: 'alex', label: 'Alex Johnson' },
-    { value: 'jamie', label: 'Jamie Lee' },
-    { value: 'sam', label: 'Sam Rivera' },
-    { value: 'taylor', label: 'Taylor Chen' },
-    { value: 'jordan', label: 'Jordan Patel' },
-    { value: 'casey', label: 'Casey Morgan' },
-    { value: 'riley', label: 'Riley Brooks' },
-    { value: 'quinn', label: 'Quinn Foster' },
-    { value: 'avery', label: 'Avery Scott' },
-    { value: 'morgan', label: 'Morgan Wells' },
-];
 function useFiltersStoryLocale() {
     const { t, i18n } = useTranslation(FILTERS_NAMESPACE);
     const filterI18n = useMemo(() => buildFilterI18nFromT(t, i18n.language), [t, i18n.language]);
@@ -28,136 +17,6 @@ function useFiltersStoryLocale() {
     }, [i18n]);
     return { t, i18n, filterI18n, dateSelectorI18n };
 }
-function buildDemoFields(t) {
-    return [
-        {
-            key: 'status',
-            label: t('story.fields.status', { defaultValue: 'Status' }),
-            type: 'select',
-            icon: _jsx(FilterIcon, { className: "size-4" }),
-            options: [
-                { value: 'active', label: t('story.options.active', { defaultValue: 'Active' }) },
-                { value: 'draft', label: t('story.options.draft', { defaultValue: 'Draft' }) },
-            ],
-        },
-        {
-            key: 'name',
-            label: t('story.fields.name', { defaultValue: 'Name' }),
-            type: 'text',
-            placeholder: t('story.namePlaceholder', { defaultValue: 'Contains…' }),
-            icon: _jsx(Tag, { className: "size-4" }),
-        },
-    ];
-}
-function buildGroupedFieldsWithSearch(t, dateSelectorI18n, i18n) {
-    return [
-        {
-            group: t('story.groups.listingFeatures', { defaultValue: 'Listing Features' }),
-            fields: [
-                {
-                    key: 'propertyType',
-                    label: t('story.fields.propertyType', { defaultValue: 'Property Type' }),
-                    type: 'multiselect',
-                    icon: _jsx(Home, { className: "size-4" }),
-                    options: [
-                        { value: 'house', label: t('story.options.house', { defaultValue: 'House' }) },
-                        { value: 'condo', label: t('story.options.condo', { defaultValue: 'Condo' }) },
-                        { value: 'townhome', label: t('story.options.townhome', { defaultValue: 'Townhome' }) },
-                        { value: 'land', label: t('story.options.land', { defaultValue: 'Land' }) },
-                    ],
-                },
-                {
-                    key: 'hasPool',
-                    label: t('story.fields.hasPool', { defaultValue: 'Has Pool' }),
-                    type: 'select',
-                    icon: _jsx(Home, { className: "size-4" }),
-                    options: [
-                        { value: 'yes', label: t('story.options.yes', { defaultValue: 'Yes' }) },
-                        { value: 'no', label: t('story.options.no', { defaultValue: 'No' }) },
-                    ],
-                },
-            ],
-        },
-        {
-            group: t('story.groups.listingStatus', { defaultValue: 'Listing Status' }),
-            fields: [
-                {
-                    key: 'listingStatus',
-                    label: t('story.fields.listingStatus', { defaultValue: 'Listing Status' }),
-                    type: 'multiselect',
-                    icon: _jsx(Activity, { className: "size-4" }),
-                    options: [
-                        { value: 'active', label: t('story.options.active', { defaultValue: 'Active' }) },
-                        { value: 'pending', label: t('story.options.pending', { defaultValue: 'Pending' }) },
-                        { value: 'sold', label: t('story.options.sold', { defaultValue: 'Sold' }) },
-                        { value: 'withdrawn', label: t('story.options.withdrawn', { defaultValue: 'Withdrawn' }) },
-                        { value: 'expired', label: t('story.options.expired', { defaultValue: 'Expired' }) },
-                    ],
-                },
-            ],
-        },
-        {
-            group: t('story.groups.teamAccess', { defaultValue: 'Team & Access' }),
-            fields: [
-                {
-                    key: 'teamMember',
-                    label: t('story.fields.teamMember', { defaultValue: 'Team Member' }),
-                    type: 'multiselect',
-                    icon: _jsx(Users, { className: "size-4" }),
-                    options: teamMemberOptions,
-                },
-                {
-                    key: 'yourAccess',
-                    label: t('story.fields.yourAccess', { defaultValue: 'Your Access' }),
-                    type: 'select',
-                    icon: _jsx(Users, { className: "size-4" }),
-                    options: [
-                        { value: 'owner', label: t('story.options.owner', { defaultValue: 'Owner' }) },
-                        { value: 'editor', label: t('story.options.editor', { defaultValue: 'Editor' }) },
-                        { value: 'viewer', label: t('story.options.viewer', { defaultValue: 'Viewer' }) },
-                    ],
-                },
-                {
-                    key: 'listingAdmin',
-                    label: t('story.fields.listingAdmin', { defaultValue: 'Admin of Listing' }),
-                    type: 'select',
-                    icon: _jsx(Users, { className: "size-4" }),
-                    options: [
-                        { value: 'me', label: t('story.options.me', { defaultValue: 'Me' }) },
-                        { value: 'broker', label: t('story.options.broker', { defaultValue: 'Broker' }) },
-                    ],
-                },
-            ],
-        },
-        {
-            group: t('story.groups.listingPerformance', { defaultValue: 'Listing Performance' }),
-            fields: [
-                {
-                    key: 'adjRevpar',
-                    label: t('story.fields.adjRevpar', { defaultValue: 'Adj. RevPAR' }),
-                    type: 'date_metric',
-                    icon: _jsx(BarChart3, { className: "size-4" }),
-                    dateMetricProps: {
-                        showRollingPresets: true,
-                        i18nInstance: i18n,
-                        i18n: dateSelectorI18n,
-                    },
-                },
-                {
-                    key: 'performanceTier',
-                    label: t('story.fields.performanceTier', { defaultValue: 'Performance Tier' }),
-                    type: 'select',
-                    icon: _jsx(BarChart3, { className: "size-4" }),
-                    options: [
-                        { value: 'top', label: t('story.options.top', { defaultValue: 'Top quartile' }) },
-                        { value: 'mid', label: t('story.options.mid', { defaultValue: 'Mid' }) },
-                        { value: 'low', label: t('story.options.low', { defaultValue: 'Needs attention' }) },
-                    ],
-                },
-            ],
-        },
-    ];
-}
 const FILTER_PLAYGROUND_KEYS = [
     'className',
     'size',
@@ -235,14 +94,14 @@ function addFilterTriggerButtonLabel(size, label) {
 }
 function FiltersStoryHost(playground) {
     const [filters, setFilters] = useState([]);
-    const { t, filterI18n } = useFiltersStoryLocale();
-    const fields = useMemo(() => buildDemoFields(t), [t]);
+    const { t, i18n, filterI18n, dateSelectorI18n } = useFiltersStoryLocale();
+    const fields = useMemo(() => buildListingGroupedFields(t, dateSelectorI18n, i18n), [t, dateSelectorI18n, i18n]);
     return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: fields, onChange: setFilters, i18n: filterI18n, trigger: addFilterTriggerButtonLabel(playground.size, filterI18n.addFilterTitle), ...playground }) }));
 }
 function FiltersWithInitialStateHost(playground) {
-    const [filters, setFilters] = useState(() => [createFilter('status', 'is', ['active'])]);
-    const { t, filterI18n } = useFiltersStoryLocale();
-    const fields = useMemo(() => buildDemoFields(t), [t]);
+    const [filters, setFilters] = useState(() => [createFilter('is_active', 'is', ['active'])]);
+    const { t, i18n, filterI18n, dateSelectorI18n } = useFiltersStoryLocale();
+    const fields = useMemo(() => buildListingGroupedFields(t, dateSelectorI18n, i18n), [t, dateSelectorI18n, i18n]);
     return (_jsx("div", { className: "flex min-h-32 min-w-[min(100%,28rem)] flex-wrap items-start gap-2 p-4", children: _jsx(Filters, { filters: filters, fields: fields, onChange: setFilters, i18n: filterI18n, trigger: addFilterTriggerButtonLabel(playground.size, filterI18n.addFilterTitle), ...playground }) }));
 }
 const meta = {
@@ -285,7 +144,7 @@ function FiltersGroupedAndSearchHost(props) {
     const { groupedMenuMode, defaultAddFilterGroupsCollapsed, ...raw } = props;
     const { nestedAddFilterGroups: _omitNested, collapsibleAddFilterGroups: _omitCollapsible, defaultAddFilterGroupsCollapsed: _omitDefaultCollapsed, ...playground } = pickFiltersPlaygroundArgs(raw);
     const { t, i18n, filterI18n, dateSelectorI18n } = useFiltersStoryLocale();
-    const groupedFieldsWithSearch = useMemo(() => buildGroupedFieldsWithSearch(t, dateSelectorI18n, i18n), [t, dateSelectorI18n, i18n]);
+    const groupedFieldsWithSearch = useMemo(() => buildListingGroupedFields(t, dateSelectorI18n, i18n), [t, dateSelectorI18n, i18n]);
     const groupedI18n = useMemo(() => ({
         ...filterI18n,
         searchFields: t('story.searchFieldsGrouped', { defaultValue: 'Filter by…' }),

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

@@ -3,5 +3,6 @@ export * from './filters-i18n.shared';
 export * from './filters-types';
 export * from './filters-utils';
 export { dateSegmentLabelForBar, FilterDateMetricBarPeriodSegments, FilterDateMetricBarValueSegment } from './filter-date-metric-value';
+export { buildListingDemoFields, buildListingDemoFieldsForDocs, buildListingGroupedFields, buildListingGroupedFieldsForDocs, } from './filter-fields-listing-demo';
 export { DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters, FiltersContent } from './filters';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AACxI,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,iCAAiC,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AACxI,OAAO,EACH,sBAAsB,EACtB,6BAA6B,EAC7B,yBAAyB,EACzB,gCAAgC,GACnC,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,kCAAkC,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/filters/index.js

@@ -3,4 +3,5 @@ export * from './filters-i18n.shared';
 export * from './filters-types';
 export * from './filters-utils';
 export { dateSegmentLabelForBar, FilterDateMetricBarPeriodSegments, FilterDateMetricBarValueSegment } from './filter-date-metric-value';
+export { buildListingDemoFields, buildListingDemoFieldsForDocs, buildListingGroupedFields, buildListingGroupedFieldsForDocs, } from './filter-fields-listing-demo';
 export { DEFAULT_SUBMENU_SEARCH_MIN_OPTIONS, Filters, FiltersContent } from './filters';

package/dist/components/index.d.ts

@@ -40,6 +40,8 @@ export * from './scroll-area';
 export * from './separator';
 export * from './select';
 export * from './sheet';
+export * from './sidebar';
+export * from './skeleton';
 export * from './slider';
 export * from './sonner';
 export * from './sortable';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -40,6 +40,8 @@ export * from './scroll-area';
 export * from './separator';
 export * from './select';
 export * from './sheet';
+export * from './sidebar';
+export * from './skeleton';
 export * from './slider';
 export * from './sonner';
 export * from './sortable';

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

@@ -1,2 +1,3 @@
 export * from './popover';
+export { createPopoverHandle, PopoverHandle } from './popover-handle';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/popover/index.js

@@ -1 +1,2 @@
 export * from './popover';
+export { createPopoverHandle, PopoverHandle } from './popover-handle';

package/dist/components/popover/popover-handle.d.ts

@@ -0,0 +1,6 @@
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+/** @see [Base UI Popover — createHandle](https://base-ui.com/react/components/popover) */
+export declare const createPopoverHandle: typeof PopoverPrimitive.createHandle;
+/** @see [Base UI Popover — Handle](https://base-ui.com/react/components/popover) */
+export declare const PopoverHandle: typeof PopoverPrimitive.Handle;
+//# sourceMappingURL=popover-handle.d.ts.map

package/dist/components/popover/popover-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-handle.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover-handle.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAErE,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,sCAAgC,CAAC;AAEjE,oFAAoF;AACpF,eAAO,MAAM,aAAa,gCAA0B,CAAC"}

package/dist/components/popover/popover-handle.js

@@ -0,0 +1,6 @@
+'use client';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+/** @see [Base UI Popover — createHandle](https://base-ui.com/react/components/popover) */
+export const createPopoverHandle = PopoverPrimitive.createHandle;
+/** @see [Base UI Popover — Handle](https://base-ui.com/react/components/popover) */
+export const PopoverHandle = PopoverPrimitive.Handle;

package/dist/components/popover/popover.d.ts

@@ -1,20 +1,54 @@
 import * as React from 'react';
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
-type PopoverContentPositionProps = Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
-/** Props for the popover root. See [Base UI Popover](https://base-ui.com/react/components/popover). */
+type PositionerFieldsOmittedFromPopup = Pick<PopoverPrimitive.Positioner.Props, 'anchor' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'positionMethod' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'>;
+/** @see [Base UI Popover — Root](https://base-ui.com/react/components/popover) */
 export type PopoverProps = PopoverPrimitive.Root.Props;
 declare function Popover({ ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-/** Props for the element that toggles the popover (typically a button). */
+/** @see [Base UI Popover — Trigger](https://base-ui.com/react/components/popover) */
 export type PopoverTriggerProps = PopoverPrimitive.Trigger.Props;
 declare function PopoverTrigger({ ...props }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
-/** Props for the floating surface; includes positioner `side` / `align` controls. */
-export type PopoverContentProps = PopoverPrimitive.Popup.Props & PopoverContentPositionProps;
-declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Portal](https://base-ui.com/react/components/popover) */
+export type PopoverPortalProps = PopoverPrimitive.Portal.Props;
+declare function PopoverPortal({ ...props }: PopoverPortalProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Positioner](https://base-ui.com/react/components/popover) */
+export type PopoverPositionerProps = PopoverPrimitive.Positioner.Props;
+declare function PopoverPositioner({ className, ...props }: PopoverPrimitive.Positioner.Props): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Popup](https://base-ui.com/react/components/popover) */
+export type PopoverPopupProps = PopoverPrimitive.Popup.Props;
+declare function PopoverPopup({ className, ...props }: PopoverPrimitive.Popup.Props): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Arrow](https://base-ui.com/react/components/popover) */
+export type PopoverArrowProps = PopoverPrimitive.Arrow.Props;
+declare function PopoverArrow({ ...props }: PopoverArrowProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Backdrop](https://base-ui.com/react/components/popover) */
+export type PopoverBackdropProps = PopoverPrimitive.Backdrop.Props;
+declare function PopoverBackdrop({ ...props }: PopoverBackdropProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Close](https://base-ui.com/react/components/popover) */
+export type PopoverCloseProps = PopoverPrimitive.Close.Props;
+declare function PopoverClose({ ...props }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Viewport](https://base-ui.com/react/components/popover) */
+export type PopoverViewportProps = PopoverPrimitive.Viewport.Props;
+declare function PopoverViewport({ ...props }: PopoverViewportProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Shorthand: `Portal` → `Positioner` → `Popup` with design-system surface styles on the popup.
+ * Pass any `Popover.Popup` prop; positioning props (`anchor`, `side`, …) are forwarded to `Positioner`.
+ * Use `positionerProps` / `portalProps` / `positionerClassName` for full control.
+ */
+export type PopoverContentProps = Omit<PopoverPrimitive.Popup.Props, keyof PositionerFieldsOmittedFromPopup> & Partial<PositionerFieldsOmittedFromPopup> & {
+    portalProps?: Omit<PopoverPrimitive.Portal.Props, 'children'>;
+    positionerProps?: Partial<PopoverPrimitive.Positioner.Props>;
+    /** Merged into `Popover.Positioner` after defaults (`isolate z-50`). */
+    positionerClassName?: string;
+    /** Forwarded to `Popover.Portal` (can also be set inside `portalProps`). */
+    keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];
+};
+declare function PopoverContent({ portalProps, positionerProps, positionerClassName, keepMounted, className, children, ...rest }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 export type PopoverHeaderProps = React.ComponentProps<'div'>;
 declare function PopoverHeader({ className, ...props }: PopoverHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Title](https://base-ui.com/react/components/popover) */
 export type PopoverTitleProps = PopoverPrimitive.Title.Props;
 declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+/** @see [Base UI Popover — Description](https://base-ui.com/react/components/popover) */
 export type PopoverDescriptionProps = PopoverPrimitive.Description.Props;
 declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverViewport, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, };
 //# sourceMappingURL=popover.d.ts.map

package/dist/components/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,KAAK,2BAA2B,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,CAAC;AAE5H,uGAAuG;AACvG,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAE1C;AAED,2EAA2E;AAC3E,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC;AAEjE,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,qFAAqF;AACrF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,2BAA2B,CAAC;AAE7F,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAgB,EAAE,WAAe,EAAE,IAAe,EAAE,UAAc,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAevI;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7D,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEjE;AAED,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC;AAE7D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAE/D;AAED,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC,WAAW,CAAC,KAAK,CAAC;AAEzE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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"}

package/dist/components/popover/popover.js

@@ -3,14 +3,61 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { cn } from '../../lib/utils';
+const POPUP_SURFACE_CLASS = 'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95';
+/** Keys handled by `Popover.Positioner` when passed to `PopoverContent` (remaining props go to `Popover.Popup`). */
+const POPOVER_CONTENT_POSITIONER_KEYS = new Set([
+    'anchor',
+    'side',
+    'sideOffset',
+    'align',
+    'alignOffset',
+    'positionMethod',
+    'collisionBoundary',
+    'collisionPadding',
+    'sticky',
+    'arrowPadding',
+    'disableAnchorTracking',
+    'collisionAvoidance',
+]);
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = 'center', alignOffset = 0, side = 'bottom', sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn('z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }) }) }));
+function PopoverPortal({ ...props }) {
+    return _jsx(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+}
+function PopoverPositioner({ className, ...props }) {
+    return _jsx(PopoverPrimitive.Positioner, { className: cn('isolate z-50', className), "data-slot": "popover-positioner", ...props });
+}
+function PopoverPopup({ className, ...props }) {
+    return _jsx(PopoverPrimitive.Popup, { className: cn(POPUP_SURFACE_CLASS, className), "data-slot": "popover-popup", ...props });
+}
+function PopoverArrow({ ...props }) {
+    return _jsx(PopoverPrimitive.Arrow, { "data-slot": "popover-arrow", ...props });
+}
+function PopoverBackdrop({ ...props }) {
+    return _jsx(PopoverPrimitive.Backdrop, { "data-slot": "popover-backdrop", ...props });
+}
+function PopoverClose({ ...props }) {
+    return _jsx(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverViewport({ ...props }) {
+    return _jsx(PopoverPrimitive.Viewport, { "data-slot": "popover-viewport", ...props });
+}
+function PopoverContent({ portalProps, positionerProps, positionerClassName, keepMounted, className, children, ...rest }) {
+    const positionerBag = {};
+    const popupBag = { ...rest };
+    for (const key of POPOVER_CONTENT_POSITIONER_KEYS) {
+        if (key in popupBag) {
+            positionerBag[key] = popupBag[key];
+            delete popupBag[key];
+        }
+    }
+    const { keepMounted: keepMountedPortal, ...restPortal } = portalProps ?? {};
+    const mergedKeepMounted = keepMounted ?? keepMountedPortal;
+    return (_jsx(PopoverPrimitive.Portal, { keepMounted: mergedKeepMounted, ...restPortal, children: _jsx(PopoverPrimitive.Positioner, { ...positionerBag, ...positionerProps, className: cn('isolate z-50', positionerClassName, positionerProps?.className), children: _jsx(PopoverPrimitive.Popup, { className: cn(POPUP_SURFACE_CLASS, className), ...popupBag, children: children }) }) }));
 }
 function PopoverHeader({ className, ...props }) {
     return _jsx("div", { "data-slot": "popover-header", className: cn('flex flex-col gap-0.5 text-sm', className), ...props });
@@ -21,4 +68,4 @@ function PopoverTitle({ className, ...props }) {
 function PopoverDescription({ className, ...props }) {
     return _jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn('text-muted-foreground', className), ...props });
 }
-export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverViewport, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, };

package/dist/components/progress/progress.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
 import { cn } from '../../lib/utils';
 function Progress({ className, children, value, ...props }) {
-    return (_jsxs(ProgressPrimitive.Root, { value: value, "data-slot": "progress", className: cn('flex flex-wrap gap-3', className), ...props, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
+    return (_jsxs(ProgressPrimitive.Root, { value: value, "data-slot": "progress", className: cn('flex w-full min-w-0 flex-wrap gap-1.5', className), ...props, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
 }
 function ProgressTrack({ className, ...props }) {
     return (_jsx(ProgressPrimitive.Track, { className: cn('relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted', className), "data-slot": "progress-track", ...props }));

package/dist/components/progress/progress.stories.d.ts

@@ -3,7 +3,16 @@ import { Progress } from './progress';
 declare const meta: Meta<typeof Progress>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithLabel: Story;
+/** Mirrors [ReUI — Basic progress](https://reui.io/components/progress). */
+export declare const BasicProgress: Story;
+/** Thinner track via `className` on the root (no `size` prop on the component). */
+export declare const SmallProgress: Story;
+export declare const LargeProgress: Story;
+export declare const StatusMessages: Story;
+export declare const FileUploadList: Story;
+export declare const WithSlider: Story;
+export declare const MultiStep: Story;
+/** `value={null}` — animated indeterminate state (not one of the eight ReUI gallery titles, but part of the component API). */
 export declare const Indeterminate: Story;
+export declare const CustomColors: Story;
 //# sourceMappingURL=progress.stories.d.ts.map

package/dist/components/progress/progress.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.stories.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAgC,MAAM,YAAY,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KASvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC"}
+{"version":3,"file":"progress.stories.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,QAAQ,EAAgC,MAAM,YAAY,CAAC;AAGpE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAa5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgC5B,CAAC;AA2BF,eAAO,MAAM,UAAU,EAAE,KAGxB,CAAC;AAkDF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,+HAA+H;AAC/H,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwB1B,CAAC"}

package/dist/components/progress/progress.stories.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card';
+import { Label } from '../label';
+import { Slider } from '../slider';
 import { Progress, ProgressLabel, ProgressValue } from './progress';
+import { cn } from '../../lib/utils';
 const meta = {
     title: 'Components/Progress',
     component: Progress,
@@ -8,22 +13,90 @@ const meta = {
         layout: 'centered',
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "flex w-full max-w-xs flex-col gap-2", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "mx-auto flex w-full max-w-md min-w-80 flex-col gap-4 px-4", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export const Default = {
+/** Mirrors [ReUI — Basic progress](https://reui.io/components/progress). */
+export const BasicProgress = {
+    name: 'Basic progress',
     args: {
         value: 45,
         'aria-label': 'Progress',
     },
 };
-export const WithLabel = {
-    render: () => (_jsx(Progress, { value: 72, children: _jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(ProgressLabel, { children: "Uploading" }), _jsx(ProgressValue, {})] }) })),
+/** Thinner track via `className` on the root (no `size` prop on the component). */
+export const SmallProgress = {
+    name: 'Small progress',
+    args: {
+        value: 62,
+        'aria-label': 'Progress',
+        className: '[&_[data-slot=progress-track]]:h-0.5',
+    },
+};
+export const LargeProgress = {
+    name: 'Large progress',
+    args: {
+        value: 38,
+        'aria-label': 'Progress',
+        className: '[&_[data-slot=progress-track]]:h-2.5',
+    },
 };
+export const StatusMessages = {
+    name: 'Progress bar with status messages',
+    render: () => (_jsx(Progress, { value: 68, children: _jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1", children: [_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(ProgressLabel, { children: "Deploying" }), _jsx(ProgressValue, {})] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Build finished \u2014 uploading assets to the CDN\u2026" })] }) })),
+};
+export const FileUploadList = {
+    name: 'File upload list with progress & status',
+    render: () => {
+        const files = [
+            { name: 'report.pdf', value: 100, status: 'Complete' },
+            { name: 'screenshot.png', value: 72, status: 'Uploading' },
+            { name: 'archive.zip', value: 14, status: 'Queued' },
+        ];
+        return (_jsxs(Card, { size: "sm", children: [_jsxs(CardHeader, { className: "pb-0", children: [_jsx(CardTitle, { children: "Uploads" }), _jsx(CardDescription, { children: "3 files \u00B7 2.4 MB total" })] }), _jsx(CardContent, { className: "flex flex-col gap-2", children: files.map((file) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "truncate font-medium", children: file.name }), _jsx("span", { className: "shrink-0 text-muted-foreground tabular-nums", children: file.status })] }), _jsx(Progress, { value: file.value, "aria-label": `${file.name} upload progress`, className: "gap-2 [&_[data-slot=progress-track]]:h-1", children: _jsxs("span", { className: "sr-only", children: [file.name, ": ", file.value, "% complete"] }) })] }, file.name))) })] }));
+    },
+};
+function ProgressWithSliderDemo() {
+    const [value, setValue] = useState(40);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Progress, { value: value, "aria-labelledby": "progress-with-slider-label", children: _jsxs("div", { className: "flex w-full min-w-0 items-center", children: [_jsx(ProgressLabel, { id: "progress-with-slider-label", children: "Completion" }), _jsx(ProgressValue, {})] }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "progress-slider-control", children: "Adjust value" }), _jsx(Slider, { id: "progress-slider-control", value: value, onValueChange: (v) => setValue(typeof v === 'number' ? v : (v[0] ?? 0)), min: 0, max: 100, "aria-valuetext": `${value} percent` })] })] }));
+}
+export const WithSlider = {
+    name: 'Progress bar with slider',
+    render: () => _jsx(ProgressWithSliderDemo, {}),
+};
+function MultiStepDemo() {
+    const total = 4;
+    const [current, setCurrent] = useState(1);
+    const pct = Math.round(((current - 1) / (total - 1)) * 100);
+    useEffect(() => {
+        const id = window.setInterval(() => {
+            setCurrent((step) => (step >= total ? 1 : step + 1));
+        }, 2200);
+        return () => window.clearInterval(id);
+    }, []);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("ol", { className: "flex w-full list-none items-center gap-1 p-0", "aria-label": "Onboarding steps", children: Array.from({ length: total }, (_, i) => {
+                    const step = i + 1;
+                    const state = step < current ? 'complete' : step === current ? 'current' : 'upcoming';
+                    return (_jsxs("li", { className: cn('flex min-w-0 items-center gap-1', step !== 1 ? 'flex-1' : ''), children: [i > 0 ? _jsx("span", { className: "h-px min-w-2 flex-1 bg-border", "aria-hidden": true }) : null, _jsx("span", { className: state === 'complete'
+                                    ? 'flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground'
+                                    : state === 'current'
+                                        ? 'flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-medium text-primary ring-2 ring-primary ring-offset-2 ring-offset-background'
+                                        : 'flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground', children: state === 'complete' ? '✓' : step })] }, step));
+                }) }), _jsx(Progress, { value: pct, "aria-label": `Step ${current} of ${total}`, children: _jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsxs(ProgressLabel, { children: ["Step ", current, " of ", total] }), _jsx(ProgressValue, {})] }) })] }));
+}
+export const MultiStep = {
+    name: 'Multi-step progress indicator',
+    render: () => _jsx(MultiStepDemo, {}),
+};
+/** `value={null}` — animated indeterminate state (not one of the eight ReUI gallery titles, but part of the component API). */
 export const Indeterminate = {
     args: {
         value: null,
         'aria-label': 'Loading',
     },
 };
+export const CustomColors = {
+    name: 'Progress bar with custom colors',
+    render: () => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Progress, { value: 80, "aria-label": "Storage used", className: "[&_[data-slot=progress-indicator]]:bg-emerald-600", children: _jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(ProgressLabel, { children: "Storage" }), _jsx(ProgressValue, {})] }) }), _jsx(Progress, { value: 45, "aria-label": "API quota", className: "[&_[data-slot=progress-indicator]]:bg-amber-500", children: _jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(ProgressLabel, { children: "API quota" }), _jsx(ProgressValue, {})] }) }), _jsx(Progress, { value: 92, "aria-label": "Error budget", className: "[&_[data-slot=progress-indicator]]:bg-destructive", children: _jsxs("div", { className: "flex w-full min-w-0 items-center gap-2", children: [_jsx(ProgressLabel, { children: "Error budget" }), _jsx(ProgressValue, {})] }) })] })),
+};

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

@@ -0,0 +1,2 @@
+export * from './sidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/sidebar/index.js

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