@muraldevkit/ui-toolkit 1.8.1 → 1.9.1

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../utils';
+import { Kind, Orientation, Spacing } from './constants';
+interface MrlDividerProps {
+    /**
+     * Applies additional HTML attributes to the divider element.
+     */
+    attrs?: AttrsObject;
+    /**
+     * Defines which color scheme to used based on the background color of the container.
+     * White/light backgrounds should use "default" and dark/saturated color backgrounds
+     * should use "inverse".
+     */
+    kind: Kind;
+    /**
+     * Use to set a width/height of a divider to create an offset from surrounding content.
+     * This is commonly found in toolbars. Value can be any valid CSS `width/height` value, such as
+     * a CSS variable or rem value. Warning, vertical dividers may not work if set to a percentage,
+     * due to browser limitations with calculating dynamic heights. You should not set the parent to
+     * a static height to make this work as that poses accessibility issues.
+     */
+    length?: string;
+    /**
+     * Determines the orientation of the divider based on the sibling elements' orientation.
+     * Stacked elements should use "horizontal" and elements displayed in a row should use
+     * "vertical". Note for the "vertical" orientation, only usage between a row of Icon Buttons
+     * is currently supported.
+     */
+    orientation: Orientation;
+    /**
+     * Determines how much space to provide between the elements that the divider is separating.
+     * This option only applies to horizontal orientation.
+     */
+    spacing?: Spacing;
+}
+/**
+ * Used to visually and semantically separate two elements.
+ * For visual separation only view this package's mixins
+ *
+ * @param props - component props
+ * @returns a MrlDivider React component.
+ */
+export declare function MrlDivider({ attrs, kind, length, orientation, spacing }: MrlDividerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "inverse"];
+    orientations: readonly ["horizontal", "vertical"];
+    spacings: readonly ["small", "medium", "large"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export type Orientation = (typeof allowedValues.orientations)[number];
+export type Spacing = (typeof allowedValues.spacings)[number];
+export interface DividerDefaults {
+    kind: Kind;
+    orientation: Orientation;
+    spacing: Spacing;
+}
+/**
+ * Default values for props on the Divider component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: DividerDefaults;