@mieweb/ui 0.7.3-dev.2 → 0.7.3-dev.20

package/dist/components/Autocomplete/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants } from '../Input/index.cjs';
+import { inputVariants, RequiredMarkVariant } from '../Input/index.cjs';
 import 'class-variance-authority/types';
 
 interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>, 'size'> {
@@ -41,6 +41,23 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
     clearOnSelect?: boolean;
     /** Disable the input. */
     disabled?: boolean;
+    /** Label for the input. */
+    label?: string;
+    /**
+     * How the label is rendered.
+     * - `stacked` (default): label above the input.
+     * - `floating`: label rests inside the input like a placeholder and floats
+     *   to the top of the field when focused or filled. Ignores `placeholder`.
+     */
+    labelVariant?: 'stacked' | 'floating';
+    /** Whether the input is required. */
+    required?: boolean;
+    /**
+     * Color of the required asterisk.
+     * - `default`: destructive (hard requirement).
+     * - `warning`: warning color (soft requirement / recommended).
+     */
+    requiredVariant?: RequiredMarkVariant;
     /** Accessible label for the combobox input. */
     'aria-label'?: string;
     /** Class applied to the outer wrapper. */
@@ -50,7 +67,7 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
     /** Forwarded ref to the underlying input. */
     inputRef?: React.Ref<HTMLInputElement>;
     /** Additional props forwarded to the input element. */
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'placeholder' | 'disabled' | 'aria-label'>;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'placeholder' | 'disabled' | 'required' | 'aria-label'>;
 }
 /**
  * A data-agnostic, presentational combobox. It renders a search input with a
@@ -69,7 +86,7 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
  * />
  * ```
  */
-declare function Autocomplete<T>({ items, onSelect, getItemKey, renderItem, filter, value: controlledValue, defaultValue, onValueChange, placeholder, emptyMessage, createLabel, onCreate, minQueryLength, clearOnSelect, disabled, size, className, inputClassName, inputRef, inputProps, 'aria-label': ariaLabel, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function Autocomplete<T>({ items, onSelect, getItemKey, renderItem, filter, value: controlledValue, defaultValue, onValueChange, placeholder, emptyMessage, createLabel, onCreate, minQueryLength, clearOnSelect, disabled, label, labelVariant, required, requiredVariant, size, className, inputClassName, inputRef, inputProps, 'aria-label': ariaLabel, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Autocomplete {
     var displayName: string;
 }

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

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { inputVariants } from '../Input/index.js';
+import { inputVariants, RequiredMarkVariant } from '../Input/index.js';
 import 'class-variance-authority/types';
 
 interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>, 'size'> {
@@ -41,6 +41,23 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
     clearOnSelect?: boolean;
     /** Disable the input. */
     disabled?: boolean;
+    /** Label for the input. */
+    label?: string;
+    /**
+     * How the label is rendered.
+     * - `stacked` (default): label above the input.
+     * - `floating`: label rests inside the input like a placeholder and floats
+     *   to the top of the field when focused or filled. Ignores `placeholder`.
+     */
+    labelVariant?: 'stacked' | 'floating';
+    /** Whether the input is required. */
+    required?: boolean;
+    /**
+     * Color of the required asterisk.
+     * - `default`: destructive (hard requirement).
+     * - `warning`: warning color (soft requirement / recommended).
+     */
+    requiredVariant?: RequiredMarkVariant;
     /** Accessible label for the combobox input. */
     'aria-label'?: string;
     /** Class applied to the outer wrapper. */
@@ -50,7 +67,7 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
     /** Forwarded ref to the underlying input. */
     inputRef?: React.Ref<HTMLInputElement>;
     /** Additional props forwarded to the input element. */
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'placeholder' | 'disabled' | 'aria-label'>;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'placeholder' | 'disabled' | 'required' | 'aria-label'>;
 }
 /**
  * A data-agnostic, presentational combobox. It renders a search input with a
@@ -69,7 +86,7 @@ interface AutocompleteProps<T> extends Pick<VariantProps<typeof inputVariants>,
  * />
  * ```
  */
-declare function Autocomplete<T>({ items, onSelect, getItemKey, renderItem, filter, value: controlledValue, defaultValue, onValueChange, placeholder, emptyMessage, createLabel, onCreate, minQueryLength, clearOnSelect, disabled, size, className, inputClassName, inputRef, inputProps, 'aria-label': ariaLabel, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function Autocomplete<T>({ items, onSelect, getItemKey, renderItem, filter, value: controlledValue, defaultValue, onValueChange, placeholder, emptyMessage, createLabel, onCreate, minQueryLength, clearOnSelect, disabled, label, labelVariant, required, requiredVariant, size, className, inputClassName, inputRef, inputProps, 'aria-label': ariaLabel, }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/Autocomplete/index.js

@@ -1,5 +1,6 @@
-export { Autocomplete } from '../../chunk-P6L74SKG.js';
-import '../../chunk-YXCE2HSK.js';
+export { Autocomplete } from '../../chunk-QGZC43L7.js';
+import '../../chunk-6NZXWKUE.js';
+import '../../chunk-3IMM2PM4.js';
 import '../../chunk-62ZOA6PX.js';
 import '../../chunk-BOOJDRJO.js';
 import '../../chunk-TQONQSJO.js';

package/dist/components/Badge/index.d.cts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "outline" | "danger" | "default" | "success" | "warning" | null | undefined;
+    variant?: "secondary" | "outline" | "danger" | "default" | "warning" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "outline" | "danger" | "default" | "success" | "warning" | null | undefined;
+    variant?: "secondary" | "outline" | "danger" | "default" | "warning" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {

package/dist/components/Card/index.d.cts

@@ -10,7 +10,7 @@ declare const cardVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const cardAccentVariants: (props?: ({
-    color?: "primary" | "success" | "info" | "warning" | "destructive" | null | undefined;
+    color?: "primary" | "warning" | "success" | "info" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /** Semantic HTML element to render as */

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

@@ -10,7 +10,7 @@ declare const cardVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const cardAccentVariants: (props?: ({
-    color?: "primary" | "success" | "info" | "warning" | "destructive" | null | undefined;
+    color?: "primary" | "warning" | "success" | "info" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /** Semantic HTML element to render as */

package/dist/components/Checkbox/index.cjs

@@ -1,21 +1,22 @@
 'use strict';
 
-var chunkS3MKIDYG_cjs = require('../../chunk-S3MKIDYG.cjs');
+var chunk7AECNMYV_cjs = require('../../chunk-7AECNMYV.cjs');
+require('../../chunk-Z5S5JEJD.cjs');
 require('../../chunk-S5RVSXDV.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunkS3MKIDYG_cjs.Checkbox; }
+  get: function () { return chunk7AECNMYV_cjs.Checkbox; }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunkS3MKIDYG_cjs.CheckboxGroup; }
+  get: function () { return chunk7AECNMYV_cjs.CheckboxGroup; }
 });
 Object.defineProperty(exports, "checkboxVariants", {
   enumerable: true,
-  get: function () { return chunkS3MKIDYG_cjs.checkboxVariants; }
+  get: function () { return chunk7AECNMYV_cjs.checkboxVariants; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/components/Checkbox/index.d.cts

@@ -32,6 +32,14 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
 interface CheckboxGroupProps {
     /** Group label */
     label?: string;
+    /**
+     * How the group label is rendered.
+     * - `stacked` (default): label above the options.
+     * - `floating`: renders the group as a bordered field matching floating
+     *   inputs, with the label fixed in the floated position so mixed forms
+     *   stay vertically aligned.
+     */
+    labelVariant?: 'stacked' | 'floating';
     /** Description for the group */
     description?: string;
     /** Error message for the group */
@@ -55,7 +63,7 @@ interface CheckboxGroupProps {
  * </CheckboxGroup>
  * ```
  */
-declare function CheckboxGroup({ label, description, error, orientation, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ label, labelVariant, description, error, orientation, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
 declare namespace CheckboxGroup {
     var displayName: string;
 }

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

@@ -32,6 +32,14 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
 interface CheckboxGroupProps {
     /** Group label */
     label?: string;
+    /**
+     * How the group label is rendered.
+     * - `stacked` (default): label above the options.
+     * - `floating`: renders the group as a bordered field matching floating
+     *   inputs, with the label fixed in the floated position so mixed forms
+     *   stay vertically aligned.
+     */
+    labelVariant?: 'stacked' | 'floating';
     /** Description for the group */
     description?: string;
     /** Error message for the group */
@@ -55,7 +63,7 @@ interface CheckboxGroupProps {
  * </CheckboxGroup>
  * ```
  */
-declare function CheckboxGroup({ label, description, error, orientation, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ label, labelVariant, description, error, orientation, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
 declare namespace CheckboxGroup {
     var displayName: string;
 }

package/dist/components/Checkbox/index.js

@@ -1,4 +1,5 @@
-export { Checkbox, CheckboxGroup, checkboxVariants } from '../../chunk-KFLDXJEE.js';
+export { Checkbox, CheckboxGroup, checkboxVariants } from '../../chunk-753Z3NXL.js';
+import '../../chunk-3IMM2PM4.js';
 import '../../chunk-TQONQSJO.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/CustomizableDashboard/index.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var chunkYVIH26FG_cjs = require('../../chunk-YVIH26FG.cjs');
+require('../../chunk-PLMXN23Q.cjs');
+require('../../chunk-RS5VA6QU.cjs');
+require('../../chunk-RDGRKYQ5.cjs');
+require('../../chunk-NNEFAUHV.cjs');
+require('../../chunk-FHY3K6PL.cjs');
+require('../../chunk-S5RVSXDV.cjs');
+require('../../chunk-SCV7C55E.cjs');
+
+
+
+Object.defineProperty(exports, "CustomizableDashboard", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.CustomizableDashboard; }
+});
+Object.defineProperty(exports, "DashboardCustomizePanel", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.DashboardCustomizePanel; }
+});
+Object.defineProperty(exports, "consolidateColumns", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.consolidateColumns; }
+});
+Object.defineProperty(exports, "mergeColumnOrder", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.mergeColumnOrder; }
+});
+Object.defineProperty(exports, "moveAcrossColumns", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.moveAcrossColumns; }
+});
+Object.defineProperty(exports, "reorderOnDrop", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.reorderOnDrop; }
+});
+Object.defineProperty(exports, "requiredColumns", {
+  enumerable: true,
+  get: function () { return chunkYVIH26FG_cjs.requiredColumns; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/components/CustomizableDashboard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/components/CustomizableDashboard/index.d.cts

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Catalog metadata for a widget a user can show or hide on a dashboard. */
+interface WidgetDefinition {
+    /** Matches the portlet's `PortletItem.id`. */
+    id: string;
+    title: string;
+    description?: string;
+    /** Small leading icon, e.g. `<Activity className="h-4 w-4" />`. */
+    icon?: React.ReactNode;
+    /** Widgets sharing a category are grouped under a heading. */
+    category?: string;
+}
+interface DashboardCustomizePanelProps {
+    /** Whether the panel is open. */
+    open: boolean;
+    /** Callback when the panel should open or close. */
+    onOpenChange: (open: boolean) => void;
+    /** The full widget catalog for this dashboard. */
+    widgets: WidgetDefinition[];
+    /** Ids of widgets currently hidden. */
+    hiddenIds: string[];
+    /** Called when a widget is shown (`visible: true`) or hidden. */
+    onToggleWidget: (id: string, visible: boolean) => void;
+    /** When provided, renders a "Reset layout" action in the footer. */
+    onReset?: () => void;
+    /** Panel heading (default "Customize dashboard"). */
+    title?: string;
+    /** Supporting copy under the heading. */
+    description?: string;
+}
+/**
+ * A slide-in panel listing a dashboard's widget catalog with show/hide
+ * toggles, grouped by category, plus an optional layout reset.
+ *
+ * Used automatically by `CustomizableDashboard` when its `widgets` prop is
+ * set, and exported standalone for hosts that render their own trigger or
+ * persist visibility elsewhere.
+ *
+ * @example
+ * ```tsx
+ * <DashboardCustomizePanel
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   widgets={WIDGETS}
+ *   hiddenIds={hidden}
+ *   onToggleWidget={(id, visible) =>
+ *     setHidden((prev) =>
+ *       visible ? prev.filter((h) => h !== id) : [...prev, id]
+ *     )
+ *   }
+ * />
+ * ```
+ */
+declare function DashboardCustomizePanel({ open, onOpenChange, widgets, hiddenIds, onToggleWidget, onReset, title, description, }: DashboardCustomizePanelProps): react_jsx_runtime.JSX.Element;
+
+/** A dashboard item: a stable id plus the rendered content. */
+interface PortletItem {
+    id: string;
+    node: React.ReactNode;
+}
+/** Number of visible columns. */
+type DashboardLayout = 1 | 2 | 3;
+/** Portlet items grouped into three logical columns. */
+type DashboardColumns = [PortletItem[], PortletItem[], PortletItem[]];
+/** Portlet ids grouped into three logical columns. */
+type DashboardOrder = [string[], string[], string[]];
+interface CustomizableDashboardProps {
+    /**
+     * Portlets grouped into three columns. This is the default arrangement;
+     * user reordering (persisted or controlled) takes precedence. Items later
+     * removed from props disappear from saved layouts automatically, and new
+     * items appear in their props column.
+     */
+    columns: DashboardColumns;
+    /** Toolbar heading rendered before the layout toggle. */
+    title?: string;
+    /**
+     * Base localStorage key used to persist column order and layout mode
+     * (`{storageKey}-portlet-order` / `{storageKey}-dashboard-layout`).
+     * Omit to disable built-in persistence (e.g. when using `order` /
+     * `onOrderChange` with a server-side store). Distinct dashboards must
+     * pass distinct keys.
+     */
+    storageKey?: string;
+    /** Accessible label for the dashboard grid region. */
+    ariaLabel?: string;
+    /**
+     * Optional DOM element to portal the toolbar (title + layout toggle)
+     * into, e.g. a page header actions row. When omitted, the toolbar
+     * renders inline above the grid.
+     */
+    toolbarSlot?: HTMLElement | null;
+    /** Initial column order for uncontrolled usage with external persistence. */
+    defaultOrder?: DashboardOrder;
+    /** Controlled column order. Changes are reported via `onOrderChange`. */
+    order?: DashboardOrder;
+    /** Called with the full new order after a drop or layout normalization. */
+    onOrderChange?: (order: DashboardOrder) => void;
+    /** Initial layout mode for uncontrolled usage (default 3). */
+    defaultLayout?: DashboardLayout;
+    /** Controlled layout mode. Changes are reported via `onLayoutChange`. */
+    layout?: DashboardLayout;
+    /** Called when the user changes the column layout (or it auto-shrinks). */
+    onLayoutChange?: (layout: DashboardLayout) => void;
+    /**
+     * CSS selector for the header element inside each portlet that receives
+     * the drag handle. Defaults to the `DashboardWidget` header slot. When no
+     * header matches, the handle floats over the portlet's top end corner.
+     */
+    dragHandleSelector?: string;
+    /**
+     * Widget catalog metadata. When provided, the toolbar gains a Customize
+     * button opening a panel where users show/hide widgets and reset the
+     * layout. Ids must match the portlet ids in `columns`.
+     */
+    widgets?: WidgetDefinition[];
+    /** Initially hidden widget ids for uncontrolled usage. */
+    defaultHiddenIds?: string[];
+    /** Controlled hidden widget ids. Changes reported via `onHiddenChange`. */
+    hiddenIds?: string[];
+    /** Called with the full hidden-id list when visibility changes. */
+    onHiddenChange?: (hiddenIds: string[]) => void;
+    /** Label for the toolbar customize button (default "Customize"). */
+    customizeLabel?: string;
+    /** Additional class name for the grid element. */
+    className?: string;
+}
+/**
+ * Merge a saved/provided order with the current props columns: saved
+ * positions win, unknown saved ids are dropped, and new items are appended
+ * to their original props column.
+ */
+declare function mergeColumnOrder(columns: DashboardColumns, saved: DashboardOrder | null): DashboardOrder;
+/**
+ * Move `activeId` into the column named by `overId` (a column id or an item
+ * id), inserted before the hovered item. Returns the same reference when no
+ * cross-column move is needed.
+ */
+declare function moveAcrossColumns(order: DashboardOrder, activeId: string, overId: string): DashboardOrder;
+/**
+ * Final order for a drop. Same-column drags reorder around the hovered
+ * item. After a cross-column move, the one position `moveAcrossColumns`
+ * already chose — active sitting immediately before the hovered item — is
+ * kept (reordering would flip it to the other side of that item), but
+ * hovering any other item in the destination column still reorders, so a
+ * drag can keep moving after it crosses.
+ */
+declare function reorderOnDrop(order: DashboardOrder, activeId: string, overId: string, crossedColumns: boolean): DashboardOrder;
+/**
+ * Consolidate columns beyond the visible count into the last visible one.
+ * Returns the same reference when nothing needs to move so callers can use
+ * reference equality to skip persistence/notification.
+ */
+declare function consolidateColumns(order: DashboardOrder, mode: DashboardLayout): DashboardOrder;
+/**
+ * Columns needed to show every item: the highest occupied index + 1, so a
+ * gap like `[a], [], [c]` still requires three columns.
+ */
+declare function requiredColumns(order: DashboardOrder): DashboardLayout;
+/**
+ * A user-customizable portlet dashboard: a responsive 1–3 column grid whose
+ * items can be dragged between and within columns, with a column-layout
+ * toggle and optional persistence.
+ *
+ * Each portlet's drag handle is appended to the header element matched by
+ * `dragHandleSelector` inside its content — `DashboardWidget` headers are
+ * matched by default. Portlets without a matching header get a floating
+ * handle in their top end corner.
+ *
+ * Order and layout are persisted to localStorage when `storageKey` is set,
+ * or can be controlled via `order`/`onOrderChange` and
+ * `layout`/`onLayoutChange` for server-side persistence.
+ *
+ * Passing a `widgets` catalog adds a toolbar Customize button opening a
+ * `DashboardCustomizePanel` where users show/hide widgets and reset the
+ * layout; visibility follows the same persistence rules via
+ * `hiddenIds`/`onHiddenChange`.
+ *
+ * @example
+ * ```tsx
+ * <CustomizableDashboard
+ *   storageKey="home"
+ *   columns={[
+ *     [{ id: 'stats', node: <StatsWidget /> }],
+ *     [{ id: 'tasks', node: <TasksWidget /> }],
+ *     [{ id: 'orders', node: <OrdersWidget /> }],
+ *   ]}
+ * />
+ * ```
+ */
+declare const CustomizableDashboard: React.ForwardRefExoticComponent<CustomizableDashboardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CustomizableDashboard, type CustomizableDashboardProps, type DashboardColumns, DashboardCustomizePanel, type DashboardCustomizePanelProps, type DashboardLayout, type DashboardOrder, type PortletItem, type WidgetDefinition, consolidateColumns, mergeColumnOrder, moveAcrossColumns, reorderOnDrop, requiredColumns };