florixui 1.9.0 → 1.11.0

package/README.md

@@ -199,7 +199,7 @@ A drop-in "three-dot" overflow menu. Pass a flat list of items (actions, labels,
 
 ### Advanced Input
 
-A batteries-included input that bundles label, description, icons, affixes, password toggle, loading, error/helper text, and a textarea mode into one component.
+A batteries-included input that bundles label, description, icons, affixes, password toggle, loading, error/helper text, a textarea mode, and a multi-value tags mode into one component.
 
 ```tsx
 <AdvancedInput
@@ -577,6 +577,16 @@ A modal window overlaid on the page that interrupts the user to require a respon
 </Dialog>
 ```
 
+### Divider
+
+A separator that can carry a label, a count badge, and an icon — with start / center / end label positions, color and thickness variants, and a vertical orientation. For a plain rule, use Separator.
+
+```tsx
+<Divider label="Trigger Settings" labelPosition="start" />
+<Divider label="Or continue with" labelPosition="center" />
+<Divider label="Section end" labelPosition="end" />
+```
+
 ### Dropdown Menu
 
 Displays a menu of actions or options triggered by a button, built on Radix UI with full keyboard and focus support.

package/dist/components/custom/advanced-input.d.ts

@@ -35,7 +35,30 @@ type InputProps = BaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>,
 type TextareaProps = BaseProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
     as: "textarea";
 };
-export type AdvancedInputProps = InputProps | TextareaProps;
+type TagsProps = BaseProps & {
+    as: "tags";
+    /** Current tags. Controlled. */
+    value: string[];
+    /** Called with the new tags array. */
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Where the chips render:
+     * - `inside` (default): chips sit inside the field, before the cursor.
+     * - `below`: the input stays single-line; chips render below it.
+     */
+    badgePosition?: "inside" | "below";
+    /** Keys that commit the current text as a tag. Default `[",", "Enter"]`. */
+    separators?: string[];
+    /** Prevent duplicate tags (case-insensitive). Default `true`. */
+    dedupe?: boolean;
+    /** Max number of tags. */
+    maxTags?: number;
+};
+export type AdvancedInputProps = InputProps | TextareaProps | TagsProps;
 export declare const AdvancedInput: React.ForwardRefExoticComponent<AdvancedInputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export interface PhoneInputProps extends Omit<InputProps, "as" | "startItem" | "value" | "onChange" | "type" | "defaultValue"> {
     /** Full phone value in E.164-ish form, e.g. "+919876543210". Controlled. */

package/dist/components/custom/divider.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    /** Label text shown in the divider. */
+    label?: React.ReactNode;
+    /** Optional count rendered as a badge after the label. */
+    count?: number;
+    /** Tint for the line, label, and count. */
+    color?: "default" | "primary" | "muted";
+    /** Line weight. */
+    thickness?: "thin" | "medium" | "thick";
+    /** Size of the label text. */
+    labelSize?: "sm" | "md" | "lg";
+    /** Where the label sits along a horizontal divider. */
+    labelPosition?: "start" | "center" | "end";
+    /** Divider orientation. */
+    orientation?: "horizontal" | "vertical";
+    /** Height for a vertical divider (e.g. "h-11", "h-full"). */
+    height?: string;
+    /** Optional icon shown before the label (horizontal, start position). */
+    icon?: React.ReactNode;
+}
+/**
+ * A separator that can carry a `label`, a `count` badge, and an `icon`. Supports
+ * `start` / `center` / `end` label positions, `color` and `thickness` variants,
+ * and a `vertical` orientation. For a plain rule with no label, use `Separator`.
+ */
+declare function Divider({ className, label, count, color, thickness, labelSize, labelPosition, orientation, height, icon, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export { Divider, dividerVariants };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/custom/confirm-prompt';
 export * from './components/custom/custom-tabs';
 export * from './components/custom/data-cell';
 export * from './components/custom/def-row';
+export * from './components/custom/divider';
 export * from './components/custom/empty-state';
 export * from './components/custom/faceted-filter';
 export * from './components/custom/list-card';