@wheelhouse/ui 0.2.2 → 0.2.4

package/dist/blocks/columns/columns-types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { DateSelectorValue } from '../date-selector';
+export interface ColumnDefinition {
+    id: string;
+    name: string;
+    description?: string;
+    /** When true, selecting the row opens the date configuration pane. */
+    supportsDateRange?: boolean;
+    icon?: ReactNode;
+}
+export interface ColumnFieldGroup {
+    group?: string;
+    fields: ColumnDefinition[];
+}
+export type ColumnsFieldsConfig = (ColumnDefinition | ColumnFieldGroup)[];
+export interface SelectedColumn {
+    id: string;
+    dateRange?: DateSelectorValue;
+}
+export interface ColumnsI18n {
+    triggerLabel: string;
+    triggerCount: (n: number) => string;
+    addColumnsTitle: string;
+    addColumnsSubtitle: string;
+    clearAll: string;
+    /** Shown after the numeric count in the footer (e.g. "columns selected"). */
+    columnsSelectedSuffix: (n: number) => string;
+    configureDateRangeHint: string;
+    done: string;
+}
+export declare const DEFAULT_COLUMNS_I18N: ColumnsI18n;
+export interface ColumnsProps {
+    columns: ColumnsFieldsConfig;
+    value: SelectedColumn[];
+    onChange: (value: SelectedColumn[]) => void;
+    className?: string;
+    popoverContentClassName?: string;
+    i18n?: Partial<ColumnsI18n>;
+}
+//# sourceMappingURL=columns-types.d.ts.map

package/dist/blocks/columns/columns-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-types.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,EAAE,CAAC;AAE1E,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,iBAAiB,CAAC;CACjC;AAED,MAAM,WAAW,WAAW;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,qBAAqB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,oBAAoB,EAAE,WASlC,CAAC;AAEF,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B"}

package/dist/blocks/columns/columns-types.js

@@ -0,0 +1,10 @@
+export const DEFAULT_COLUMNS_I18N = {
+    triggerLabel: 'Columns',
+    triggerCount: (n) => `${n} column${n === 1 ? '' : 's'}`,
+    addColumnsTitle: 'Add Columns',
+    addColumnsSubtitle: 'Select columns to add to the table',
+    clearAll: 'Clear all',
+    columnsSelectedSuffix: (n) => (n === 1 ? 'column selected' : 'columns selected'),
+    configureDateRangeHint: 'Configure date range for this column',
+    done: 'Done',
+};

package/dist/blocks/columns/columns-utils.d.ts

@@ -0,0 +1,13 @@
+import type { DateSelectorValue } from '../date-selector';
+import type { ColumnDefinition, ColumnsFieldsConfig } from './columns-types';
+/** Secondary label for sortable rows: rolling presets and custom period summaries (e.g. `2024 Q2`). */
+export declare function formatColumnDateRangeSecondary(value: DateSelectorValue): string | null;
+export declare function flattenColumns(fields: ColumnsFieldsConfig): ColumnDefinition[];
+export type ColumnsMenuSection = {
+    groupLabel?: string;
+    fields: ColumnDefinition[];
+};
+export declare function parseColumnSections(config: ColumnsFieldsConfig): ColumnsMenuSection[];
+export declare function hasTopLevelColumnGroups(config: ColumnsFieldsConfig): boolean;
+export declare function buildColumnMap(fields: ColumnsFieldsConfig): Record<string, ColumnDefinition>;
+//# sourceMappingURL=columns-utils.d.ts.map

package/dist/blocks/columns/columns-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-utils.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns-utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAoB,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE/F,uGAAuG;AACvG,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAoDtF;AAMD,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,gBAAgB,EAAE,CAO9E;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC;AAErF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,kBAAkB,EAAE,CAWrF;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,mBAAmB,GAAG,OAAO,CAE5E;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAS5F"}

package/dist/blocks/columns/columns-utils.js

@@ -0,0 +1,85 @@
+import { format } from 'date-fns';
+import { DEFAULT_DATE_SELECTOR_I18N, getRollingSummaryLabel } from '../date-selector';
+/** Secondary label for sortable rows: rolling presets and custom period summaries (e.g. `2024 Q2`). */
+export function formatColumnDateRangeSecondary(value) {
+    const i18n = DEFAULT_DATE_SELECTOR_I18N;
+    const { period } = value;
+    const rollingLabel = getRollingSummaryLabel(value, i18n);
+    if (rollingLabel)
+        return rollingLabel;
+    if (period === 'day') {
+        const { startDate, endDate } = value;
+        if (startDate && endDate) {
+            return `${format(startDate, 'M/d/yyyy')} – ${format(endDate, 'M/d/yyyy')}`;
+        }
+        if (startDate) {
+            return format(startDate, 'M/d/yyyy');
+        }
+        return null;
+    }
+    if (period === 'month') {
+        const { year, month, rangeStart, rangeEnd } = value;
+        if (rangeStart && rangeEnd) {
+            return `${i18n.monthsShort[rangeStart.value]} ${rangeStart.year} – ${i18n.monthsShort[rangeEnd.value]} ${rangeEnd.year}`;
+        }
+        if (year !== undefined && month !== undefined) {
+            return `${i18n.monthsShort[month]} ${year}`;
+        }
+        return null;
+    }
+    if (period === 'quarter') {
+        const { year, quarter, rangeStart, rangeEnd } = value;
+        if (rangeStart && rangeEnd) {
+            return `${rangeStart.year} ${i18n.quarters[rangeStart.value]} – ${rangeEnd.year} ${i18n.quarters[rangeEnd.value]}`;
+        }
+        if (year !== undefined && quarter !== undefined) {
+            return `${year} ${i18n.quarters[quarter]}`;
+        }
+        return null;
+    }
+    if (period === 'year') {
+        const { year, rangeStart, rangeEnd } = value;
+        if (rangeStart && rangeEnd) {
+            return `${rangeStart.year} – ${rangeEnd.year}`;
+        }
+        if (year !== undefined) {
+            return String(year);
+        }
+        return null;
+    }
+    return null;
+}
+function isFieldGroup(item) {
+    return item !== null && typeof item === 'object' && 'fields' in item && Array.isArray(item.fields);
+}
+export function flattenColumns(fields) {
+    return fields.reduce((acc, item) => {
+        if (isFieldGroup(item)) {
+            return [...acc, ...item.fields];
+        }
+        return [...acc, item];
+    }, []);
+}
+export function parseColumnSections(config) {
+    const sections = [];
+    for (const raw of config) {
+        if (isFieldGroup(raw)) {
+            const groupLabel = raw.group ? String(raw.group) : undefined;
+            sections.push({ groupLabel, fields: raw.fields });
+        }
+        else {
+            sections.push({ groupLabel: undefined, fields: [raw] });
+        }
+    }
+    return sections;
+}
+export function hasTopLevelColumnGroups(config) {
+    return config.some((item) => isFieldGroup(item));
+}
+export function buildColumnMap(fields) {
+    const flat = flattenColumns(fields);
+    return flat.reduce((acc, col) => {
+        acc[col.id] = col;
+        return acc;
+    }, {});
+}

package/dist/blocks/columns/columns.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnsProps } from './columns-types';
+export declare function Columns({ columns, value, onChange, className, popoverContentClassName, i18n: i18nPartial }: ColumnsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=columns.d.ts.map

package/dist/blocks/columns/columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AAIpE,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,uBAAuB,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,YAAY,2CA2RxH"}

package/dist/blocks/columns/columns.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Columns3, GripVertical, X } from 'lucide-react';
+import { Button } from '../../components/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/collapsible';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';
+import { ScrollArea } from '../../components/scroll-area';
+import { Separator } from '../../components/separator';
+import { Sortable, SortableItem, SortableItemHandle } from '../../components/sortable';
+import { cn } from '../../lib/utils';
+import { DateSelector } from '../date-selector';
+import { DEFAULT_COLUMNS_I18N } from './columns-types';
+import { buildColumnMap, formatColumnDateRangeSecondary, parseColumnSections } from './columns-utils';
+export function Columns({ columns, value, onChange, className, popoverContentClassName, i18n: i18nPartial }) {
+    const i18n = useMemo(() => ({ ...DEFAULT_COLUMNS_I18N, ...i18nPartial }), [i18nPartial]);
+    const columnMap = useMemo(() => buildColumnMap(columns), [columns]);
+    const sections = useMemo(() => parseColumnSections(columns), [columns]);
+    const [open, setOpen] = useState(false);
+    const [activeColumnId, setActiveColumnId] = useState(null);
+    const selectedIdSet = useMemo(() => new Set(value.map((v) => v.id)), [value]);
+    const activeDef = activeColumnId ? columnMap[activeColumnId] : undefined;
+    const showRightPanel = Boolean(activeDef?.supportsDateRange && activeColumnId && selectedIdSet.has(activeColumnId));
+    const activeSelected = activeColumnId ? value.find((s) => s.id === activeColumnId) : undefined;
+    const activeDateRange = activeSelected?.dateRange;
+    const handleOpenChange = useCallback((next) => {
+        setOpen(next);
+        if (!next) {
+            setActiveColumnId(null);
+        }
+    }, []);
+    const updateSelectedDateRange = useCallback((columnId, dateRange) => {
+        onChange(value.map((row) => (row.id === columnId ? { ...row, dateRange } : row)));
+    }, [onChange, value]);
+    const removeColumn = useCallback((id) => {
+        onChange(value.filter((v) => v.id !== id));
+        setActiveColumnId((prev) => (prev === id ? null : prev));
+    }, [onChange, value]);
+    const clearAll = useCallback(() => {
+        onChange([]);
+        setActiveColumnId(null);
+    }, [onChange]);
+    const addColumn = useCallback((id) => {
+        if (selectedIdSet.has(id))
+            return;
+        onChange([...value, { id }]);
+    }, [onChange, selectedIdSet, value]);
+    const handleRowActivate = useCallback((id) => {
+        setActiveColumnId(id);
+    }, []);
+    const count = value.length;
+    return (_jsx("div", { className: cn(className), children: _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-2 font-normal", "aria-expanded": open, "aria-haspopup": "dialog" }), children: [_jsx(Columns3, { className: "size-4 text-primary", "aria-hidden": true }), _jsxs("span", { className: "text-sm", children: [i18n.triggerLabel, " \u00B7 ", i18n.triggerCount(count)] }), _jsx(ChevronDown, { className: "size-4 opacity-60", "aria-hidden": true })] }), _jsx(PopoverContent, { align: "start", className: cn('w-auto max-w-[min(100vw-2rem,720px)] gap-0 overflow-hidden p-0 shadow-lg ring-1 ring-foreground/10', showRightPanel ? 'min-w-[min(100vw-2rem,720px)]' : 'min-w-[min(100vw-2rem,340px)]', popoverContentClassName), children: _jsxs("div", { className: "flex max-h-[min(85vh,560px)] min-h-0", children: [_jsxs("div", { className: cn('flex min-h-0 min-w-0 flex-1 flex-col border-e border-border', showRightPanel ? 'max-w-[340px]' : 'w-full max-w-[360px]'), children: [_jsx("div", { className: "shrink-0 space-y-1 border-b border-border px-3 py-2.5", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: i18n.addColumnsTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: i18n.addColumnsSubtitle })] }), _jsx("button", { type: "button", onClick: clearAll, disabled: count === 0, className: "shrink-0 text-xs font-medium text-primary hover:underline disabled:pointer-events-none disabled:opacity-40", children: i18n.clearAll })] }) }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: _jsxs("div", { className: "flex flex-col gap-2 px-3 py-2", children: [value.length > 0 ? (_jsx(Sortable, { value: value, onValueChange: onChange, getItemValue: (item) => item.id, className: "flex flex-col gap-2", children: value.map((row) => {
+                                                        const def = columnMap[row.id];
+                                                        if (!def)
+                                                            return null;
+                                                        const isActive = activeColumnId === row.id;
+                                                        const secondary = row.dateRange && def.supportsDateRange ? formatColumnDateRangeSecondary(row.dateRange) : null;
+                                                        const showHighlight = isActive && def.supportsDateRange;
+                                                        return (_jsxs(SortableItem, { value: row.id, className: cn('flex min-w-0 items-center gap-2 rounded-md border px-2 py-1.5 text-sm shadow-xs transition-colors', showHighlight
+                                                                ? 'border-primary bg-primary text-primary-foreground'
+                                                                : isActive
+                                                                    ? 'border-primary/40 bg-primary/5'
+                                                                    : 'border-border bg-card text-card-foreground'), children: [_jsx(SortableItemHandle, { className: cn('shrink-0 touch-none', showHighlight ? 'text-primary-foreground/80' : 'text-muted-foreground'), "aria-label": `Reorder ${def.name}`, children: _jsx(GripVertical, { className: "size-4", strokeWidth: 2.5 }) }), _jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-1.5 text-start", onClick: () => handleRowActivate(row.id), children: [_jsx("span", { className: cn('truncate font-medium', !secondary && 'flex-1'), children: def.name }), secondary ? (_jsxs("span", { className: cn('truncate text-xs', showHighlight ? 'text-primary-foreground/85' : 'text-muted-foreground'), children: ["\u00B7 ", secondary] })) : null] }), _jsx("button", { type: "button", className: cn('shrink-0 rounded-sm p-0.5 outline-none hover:bg-black/10 focus-visible:ring-2 focus-visible:ring-ring', showHighlight && 'hover:bg-white/15'), "aria-label": `Remove ${def.name}`, onClick: (e) => {
+                                                                        e.stopPropagation();
+                                                                        removeColumn(row.id);
+                                                                    }, children: _jsx(X, { className: "size-4" }) })] }, row.id));
+                                                    }) })) : (_jsx("p", { className: "text-xs text-muted-foreground", children: "No columns selected." })), _jsx(Separator, { className: "my-1" }), _jsx("div", { className: "flex flex-col gap-2 pb-2", children: sections.map((section, si) => {
+                                                        const available = section.fields.filter((f) => !selectedIdSet.has(f.id));
+                                                        if (available.length === 0)
+                                                            return null;
+                                                        const flatUngrouped = !section.groupLabel && available.length === 1;
+                                                        if (flatUngrouped) {
+                                                            const field = available[0];
+                                                            return (_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start text-sm text-foreground hover:bg-accent hover:text-accent-foreground", onClick: () => addColumn(field.id), children: [field.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: field.name })] }, field.id));
+                                                        }
+                                                        const heading = section.groupLabel ?? (available.length > 1 ? 'Columns' : (available[0]?.name ?? 'Columns'));
+                                                        return (_jsxs(Collapsible, { defaultOpen: true, className: "flex flex-col gap-1", children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center gap-2 rounded-md px-1 py-1.5 text-start text-sm font-medium hover:bg-muted/80", type: "button", children: [available[0]?.icon, _jsx("span", { className: "min-w-0 flex-1 truncate", children: heading }), _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-data-[panel-open]:rotate-90" })] }), _jsx(CollapsibleContent, { className: "flex flex-col gap-0.5 ps-1", children: available.map((field) => (_jsx("button", { type: "button", className: "rounded-md px-2 py-1.5 text-start text-sm text-foreground hover:bg-accent hover:text-accent-foreground", onClick: () => addColumn(field.id), children: field.name }, field.id))) })] }, si));
+                                                    }) })] }) }), _jsxs("div", { className: "shrink-0 border-t border-border px-3 py-2 text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-primary tabular-nums", children: count }), " ", i18n.columnsSelectedSuffix(count)] })] }), showRightPanel && activeColumnId && activeDef?.supportsDateRange ? (_jsxs("div", { className: "flex min-h-0 w-[min(100%,380px)] min-w-[280px] flex-1 flex-col border-border bg-popover", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2 border-b border-border px-3 py-2.5", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: activeDef.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: activeDef.description ?? i18n.configureDateRangeHint })] }), _jsx("button", { type: "button", className: "shrink-0 rounded-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Close configuration", onClick: () => setActiveColumnId(null), children: _jsx(X, { className: "size-4" }) })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx("div", { className: "flex min-h-0 flex-1 flex-col p-3", children: _jsx(DateSelector, { value: activeDateRange, onChange: (next) => updateSelectedDateRange(activeColumnId, next), showRollingPresets: true, periodTypes: ['day', 'month', 'quarter', 'year'], separateDayPeriod: true, showInput: false, showOperators: false, defaultPeriodType: "day", defaultFilterType: "between", fillHeight: true, className: "min-h-0 max-w-none flex-1" }) }) }), _jsx("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border px-3 py-2.5", children: _jsx(Button, { type: "button", size: "sm", onClick: () => setActiveColumnId(null), children: i18n.done }) })] })) : null] }) })] }) }));
+}

package/dist/blocks/columns/columns.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=columns.stories.d.ts.map

package/dist/blocks/columns/columns.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/columns.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqEvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/blocks/columns/columns.stories.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Activity, BarChart3, Home, Users } from 'lucide-react';
+import { useState } from 'react';
+import { Columns } from './columns';
+const rolling180 = {
+    period: 'day',
+    operator: 'between',
+    selectionMode: 'rolling-next',
+    rollingDays: 180,
+};
+const catalog = [
+    {
+        group: 'Listing Features',
+        fields: [
+            { id: 'address', name: 'Address', description: 'Property address' },
+            { id: 'bathrooms', name: 'Bathrooms', description: '' },
+            { id: 'bedrooms', name: 'Bedrooms', description: '' },
+        ].map((f) => ({ ...f, icon: _jsx(Home, { className: "size-4 text-muted-foreground", "aria-hidden": true }) })),
+    },
+    {
+        group: 'Listing Status',
+        fields: [{ id: 'status', name: 'Status', description: 'Current listing status' }].map((f) => ({
+            ...f,
+            icon: _jsx(Activity, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
+        })),
+    },
+    {
+        group: 'Team & Access',
+        fields: [{ id: 'team', name: 'Team', description: '' }].map((f) => ({
+            ...f,
+            icon: _jsx(Users, { className: "size-4 text-muted-foreground", "aria-hidden": true }),
+        })),
+    },
+    {
+        group: 'Listing Performance',
+        fields: [
+            {
+                id: 'occupancy',
+                name: 'Adj. Occupancy',
+                description: 'Configure date range for this column',
+                supportsDateRange: true,
+            },
+            {
+                id: 'adr',
+                name: 'Avg. Daily Rate',
+                description: 'Configure date range for this column',
+                supportsDateRange: true,
+            },
+        ].map((f) => ({ ...f, icon: _jsx(BarChart3, { className: "size-4 text-muted-foreground", "aria-hidden": true }) })),
+    },
+];
+const initialSelected = [{ id: 'bedrooms' }, { id: 'bathrooms' }, { id: 'occupancy', dateRange: rolling180 }, { id: 'adr' }];
+function ColumnsPlayground() {
+    const [value, setValue] = useState(initialSelected);
+    return (_jsx("div", { className: "p-6", children: _jsx(Columns, { columns: catalog, value: value, onChange: setValue }) }));
+}
+const meta = {
+    title: 'Blocks/Columns',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(ColumnsPlayground, {}),
+};

package/dist/blocks/columns/index.d.ts

@@ -0,0 +1,6 @@
+export { Columns } from './columns';
+export type { ColumnDefinition, ColumnFieldGroup, ColumnsFieldsConfig, ColumnsI18n, ColumnsProps, SelectedColumn } from './columns-types';
+export { DEFAULT_COLUMNS_I18N } from './columns-types';
+export { buildColumnMap, flattenColumns, formatColumnDateRangeSecondary, hasTopLevelColumnGroups, parseColumnSections } from './columns-utils';
+export type { ColumnsMenuSection } from './columns-utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/columns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC1I,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,8BAA8B,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC/I,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/blocks/columns/index.js

@@ -0,0 +1,3 @@
+export { Columns } from './columns';
+export { DEFAULT_COLUMNS_I18N } from './columns-types';
+export { buildColumnMap, flattenColumns, formatColumnDateRangeSecondary, hasTopLevelColumnGroups, parseColumnSections } from './columns-utils';

package/dist/blocks/date-selector/date-selector-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector-context.d.ts","sourceRoot":"","sources":["../../../src/blocks/date-selector/date-selector-context.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,wBAAwB,EAA8B,MAAM,uBAAuB,CAAC;AAElG,QAAA,MAAM,mBAAmB,mDAIvB,CAAC;AAEH,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,gCAAwC,CAAC;AAE5E,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/blocks/date-selector/date-selector-default-i18n.d.ts

@@ -0,0 +1,10 @@
+import type { i18n as I18nInstance } from 'i18next';
+/**
+ * Dedicated i18next instance with built-in `dateSelector` resources. Used when no {@link I18nextProvider}
+ * wraps the tree and no `i18nInstance` prop is passed.
+ *
+ * Lives in a client module because `initReactI18next` touches React (`createContext`), which is not
+ * available in the React Server Components runtime.
+ */
+export declare function getDateSelectorDefaultI18n(): I18nInstance;
+//# sourceMappingURL=date-selector-default-i18n.d.ts.map

package/dist/blocks/date-selector/date-selector-default-i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector-default-i18n.d.ts","sourceRoot":"","sources":["../../../src/blocks/date-selector/date-selector-default-i18n.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAOpD;;;;;;GAMG;AACH,wBAAgB,0BAA0B,IAAI,YAAY,CAgBzD"}

package/dist/blocks/date-selector/date-selector-default-i18n.js

@@ -0,0 +1,29 @@
+'use client';
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { DATE_SELECTOR_NAMESPACE, DATE_SELECTOR_RESOURCE_BUNDLES } from './date-selector-i18n-resources';
+let defaultI18nForDateSelector;
+/**
+ * Dedicated i18next instance with built-in `dateSelector` resources. Used when no {@link I18nextProvider}
+ * wraps the tree and no `i18nInstance` prop is passed.
+ *
+ * Lives in a client module because `initReactI18next` touches React (`createContext`), which is not
+ * available in the React Server Components runtime.
+ */
+export function getDateSelectorDefaultI18n() {
+    if (!defaultI18nForDateSelector) {
+        const inst = createInstance();
+        inst.use(initReactI18next).init({
+            lng: 'en',
+            fallbackLng: 'en',
+            supportedLngs: Object.keys(DATE_SELECTOR_RESOURCE_BUNDLES),
+            interpolation: { escapeValue: false },
+            react: { useSuspense: false },
+            ns: [DATE_SELECTOR_NAMESPACE],
+            defaultNS: DATE_SELECTOR_NAMESPACE,
+            resources: Object.fromEntries(Object.entries(DATE_SELECTOR_RESOURCE_BUNDLES).map(([lng, bundle]) => [lng, { [DATE_SELECTOR_NAMESPACE]: bundle }])),
+        });
+        defaultI18nForDateSelector = inst;
+    }
+    return defaultI18nForDateSelector;
+}

package/dist/blocks/date-selector/date-selector-i18n-resources.d.ts

@@ -0,0 +1,11 @@
+import { type DateSelectorI18nConfig } from './date-selector-types';
+/** i18next namespace for {@link DateSelector} strings. */
+export declare const DATE_SELECTOR_NAMESPACE: "dateSelector";
+/**
+ * JSON-shaped resource for the `dateSelector` namespace (nested objects + string arrays).
+ * Bundled for `en`, `es`, `fr`, and `de`; register on your i18n instance with {@link registerDateSelectorI18n}.
+ */
+export type DateSelectorResourceBundle = DateSelectorI18nConfig;
+/** Built-in locale bundles keyed by language code. */
+export declare const DATE_SELECTOR_RESOURCE_BUNDLES: Record<string, DateSelectorResourceBundle>;
+//# sourceMappingURL=date-selector-i18n-resources.d.ts.map

package/dist/blocks/date-selector/date-selector-i18n-resources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector-i18n-resources.d.ts","sourceRoot":"","sources":["../../../src/blocks/date-selector/date-selector-i18n-resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAA8B,MAAM,uBAAuB,CAAC;AAEhG,0DAA0D;AAC1D,eAAO,MAAM,uBAAuB,EAAG,cAAuB,CAAC;AAE/D;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,CAAC;AAoPhE,sDAAsD;AACtD,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,0BAA0B,CAMrF,CAAC"}