@l3mpire/ui 2.10.0 → 2.12.0

package/USAGE.md

@@ -114,7 +114,7 @@ Works with all Tailwind spacing prefixes: `p-`, `px-`, `py-`, `m-`, `mx-`, `my-`
 
 **Line heights:** `leading-2xs` (14px), `leading-xs` (16px), `leading-sm` (20px), `leading-base` (24px), `leading-md` (28px), `leading-lg` (32px)
 
-**Font weights:** `font-regular` (400), `font-medium` (500), `font-bold` (700)
+**Font weights:** `font-regular` (400), `font-semibold` (600), `font-bold` (700)
 
 ### Typography component
 
@@ -946,12 +946,15 @@ import {
 | `SummaryChip` | Minimal mode: "Filters (N)" with interactive popover |
 
 **Responsive:** FilterSystem auto-detects container width via `ResizeObserver`:
-- **Default** (>600px): full chips, labels, "Filters" button
-- **Minimal** (≤600px): SummaryChip "Filters (N)" with interactive popover, icon-only Sort/Filter buttons
+- **Default** (>breakpoint): full chips, labels, "Filters" button
+- **Minimal** (≤breakpoint): SummaryChip "Filters (N)" with interactive popover, icon-only Sort/Filter buttons
+- The breakpoint is configurable via the `breakpoint` prop on `FilterSystem` (default: `600`).
 
 **Built-in Clear:** appears inline after the last filter chip ("Clear" text in default, × icon in minimal). Separate from "Discard changes" which goes in `actions` (right side) to revert a saved view.
 
-**And/Or toggle:** each row in the advanced popover has an independent And/Or toggle button (click to switch).
+**And/Or toggle:** each row in the advanced popover has an independent And/Or toggle button. The choice is **persisted on each `FilterCondition` as `logicOperator: "and" | "or"`** (defaults to `"and"` when undefined), so it survives remounts and can be serialized.
+
+**Advanced filter shortcut:** the PropertySelector footer shows an "Advanced filter · N rule(s)" item. Clicking it closes the property selector and opens the advanced popover directly in its initial empty state — where the user picks the first property inline via a "Where | [Select property ▾]" draft row. When no advanced filters exist yet, clicking this shortcut makes the AdvancedChip appear with the popover already open; closing without adding a filter removes the chip automatically.
 
 | Utility | Purpose |
 |---|---|

package/dist/index.d.mts

@@ -357,8 +357,8 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const typographyVariants: (props?: ({
-    variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | null | undefined;
+    variant?: "xs" | "sm" | "md" | "lg" | "h1" | "h2" | "h3" | null | undefined;
+    weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
@@ -698,11 +698,14 @@ interface PropertyDefinition {
     };
 }
 type FilterValue = string | number | boolean | Date | [number, number] | [Date, Date] | string[] | null;
+type LogicOperator = "and" | "or";
 interface FilterCondition {
     id: string;
     propertyId: string;
     operator: OperatorType | null;
     value: FilterValue;
+    /** Logic connector to the previous filter. Defaults to "and". */
+    logicOperator?: LogicOperator;
 }
 interface FilterState {
     basicFilters: FilterCondition[];
@@ -821,6 +824,13 @@ interface PropertySelectorProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    /**
+     * When provided, renders an "Advanced filter" item at the bottom of the
+     * popover with a divider above it.
+     */
+    onAdvancedFilter?: () => void;
+    /** Count of existing advanced filter rules, displayed next to the item. */
+    advancedFilterCount?: number;
 }
 declare const PropertySelector: React.FC<PropertySelectorProps>;
 
@@ -865,10 +875,10 @@ declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 type FilterBarMode = "default" | "minimal";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
- * - default: > 600px
- * - minimal: ≤ 600px
+ * - default: > breakpoint
+ * - minimal: ≤ breakpoint
  */
-declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode): FilterBarMode;
+declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode, breakpoint?: number): FilterBarMode;
 
 interface FilterSystemProps {
     properties: PropertyDefinition[];
@@ -877,6 +887,8 @@ interface FilterSystemProps {
     sortFields?: SortField[];
     /** Force a specific mode instead of auto-detecting via ResizeObserver. */
     mode?: FilterBarMode;
+    /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
+    breakpoint?: number;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -921,7 +933,12 @@ interface SummaryChipProps {
     properties: PropertyDefinition[];
     onFiltersChange: (filters: FilterCondition[]) => void;
     onClearAll: () => void;
+    /** Custom trigger element. When omitted, renders the default "Filters (N)" button. */
+    children?: React.ReactNode;
     className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;
 

package/dist/index.d.ts

@@ -357,8 +357,8 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
 declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const typographyVariants: (props?: ({
-    variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | null | undefined;
+    variant?: "xs" | "sm" | "md" | "lg" | "h1" | "h2" | "h3" | null | undefined;
+    weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
@@ -698,11 +698,14 @@ interface PropertyDefinition {
     };
 }
 type FilterValue = string | number | boolean | Date | [number, number] | [Date, Date] | string[] | null;
+type LogicOperator = "and" | "or";
 interface FilterCondition {
     id: string;
     propertyId: string;
     operator: OperatorType | null;
     value: FilterValue;
+    /** Logic connector to the previous filter. Defaults to "and". */
+    logicOperator?: LogicOperator;
 }
 interface FilterState {
     basicFilters: FilterCondition[];
@@ -821,6 +824,13 @@ interface PropertySelectorProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    /**
+     * When provided, renders an "Advanced filter" item at the bottom of the
+     * popover with a divider above it.
+     */
+    onAdvancedFilter?: () => void;
+    /** Count of existing advanced filter rules, displayed next to the item. */
+    advancedFilterCount?: number;
 }
 declare const PropertySelector: React.FC<PropertySelectorProps>;
 
@@ -865,10 +875,10 @@ declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
 type FilterBarMode = "default" | "minimal";
 /**
  * Observes the container width and returns the appropriate FilterBar mode.
- * - default: > 600px
- * - minimal: ≤ 600px
+ * - default: > breakpoint
+ * - minimal: ≤ breakpoint
  */
-declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode): FilterBarMode;
+declare function useFilterBarMode(ref: React.RefObject<HTMLElement | null>, override?: FilterBarMode, breakpoint?: number): FilterBarMode;
 
 interface FilterSystemProps {
     properties: PropertyDefinition[];
@@ -877,6 +887,8 @@ interface FilterSystemProps {
     sortFields?: SortField[];
     /** Force a specific mode instead of auto-detecting via ResizeObserver. */
     mode?: FilterBarMode;
+    /** Width breakpoint (px) for switching to minimal mode. Default: 600. */
+    breakpoint?: number;
     children?: React.ReactNode;
     actions?: React.ReactNode;
     className?: string;
@@ -921,7 +933,12 @@ interface SummaryChipProps {
     properties: PropertyDefinition[];
     onFiltersChange: (filters: FilterCondition[]) => void;
     onClearAll: () => void;
+    /** Custom trigger element. When omitted, renders the default "Filters (N)" button. */
+    children?: React.ReactNode;
     className?: string;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare const SummaryChip: React.FC<SummaryChipProps>;