florixui 1.9.0 → 1.10.0

package/README.md

@@ -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/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';