@dgithiomi/sbui-web 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,225 @@
+import React, { ReactNode, RefObject, TextareaHTMLAttributes, FocusEvent } from 'react';
+
+type TooltipAnimation = "fade" | "scale" | "none";
+type TooltipPointerDirection = "left" | "right" | "center";
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+type TooltipTrigger = "hover" | "click" | "focus" | "manual";
+type TooltipVariant = "warning" | "success" | "error" | "info";
+interface TooltipProps {
+    /**
+     * Unique identifier for the Tooltip component.
+     */
+    id: string;
+    /**
+     * Custom CSS class for styling the Tooltip.
+     */
+    className?: string;
+    /**
+     *  The text or element displayed inside the Tooltip.
+     */
+    content: string | ReactNode;
+    /**
+     *  The preferred position of the Tooltip relative to the target element.
+     *  - Top: Tooltip appears above the target.
+     *  - Bottom: Tooltip appears below the target.
+     *  - Left: Tooltip appears to the left of the target.
+     *  - Right: Tooltip appears to the right of the target.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Defines how the Tooltip is activated.
+     *  - Hover (default): Tooltip appears when hovering over the target.
+     *  - Click: Tooltip appears when clicking the target.
+     *  - Focus: Tooltip appears when the target gains focus.
+     *  - Manual: Tooltip is controlled programmatically.
+     */
+    trigger?: TooltipTrigger;
+    /**
+     * Time (in milliseconds) before the Tooltip appears/disappears after triggering.
+     */
+    delay?: number;
+    /**
+     * Whether to display an arrow pointing to the target element.
+     */
+    arrow?: boolean;
+    /**
+     *  Defines the appearance animation of the Tooltip.
+     *  - Fade (default): Smooth fade-in effect.
+     *  - Scale: Expands from the center.
+     *  - None: No animation.
+     */
+    animation?: TooltipAnimation;
+    /**
+     * Defines the maximum width of the Tooltip content.
+     */
+    maxWidth?: string | number;
+    /**
+     * Disables the Tooltip when set to true.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the type of element wrapping the Tooltip trigger.
+     */
+    asChild?: "button" | "span" | "div";
+    /**
+     * A reference to the underlying Tooltip container.
+     */
+    ref?: RefObject<HTMLDivElement>;
+    /**
+     * Controls whether the Tooltip is visible by default.
+     * true: The Tooltip is visible when rendered.
+     * false (default): The Tooltip follows the trigger behavior.
+     */
+    isVisible?: boolean;
+    /**
+     * If true, a close button appears inside the Tooltip, allowing manual dismissal.
+     */
+    closeButton?: boolean;
+    /**
+     * Callback function triggered when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered when the Tooltip becomes visible.
+     */
+    onShow?: () => void;
+    /**
+     * Callback function triggered when the Tooltip is hidden.
+     */
+    onHide?: () => void;
+    variant?: TooltipVariant;
+    pointerDirection?: TooltipPointerDirection;
+}
+
+declare const Tooltip: React.FC<TooltipProps & {
+    children: ReactNode;
+}>;
+
+/**
+ * Controls padding and typography scale of the textarea.
+ *
+ * - `small` — compact density for dense forms or tables.
+ * - `default` — standard body size for most layouts.
+ * - `large` — emphasized input for hero or marketing surfaces.
+ */
+type TextAreaSize = "small" | "default" | "large";
+/**
+ * Visual feedback state applied to the field border and clear affordance.
+ *
+ * - `none` — neutral styling (default).
+ * - `error` — error ring and error-toned clear button.
+ * - `warning` — warning ring and warning-toned clear button.
+ */
+type TextAreaStatus = "warning" | "error" | "none";
+/**
+ * Native CSS `resize` behavior on the underlying `<textarea>`.
+ *
+ * - `none` — fixed dimensions (default).
+ * - `vertical` — height only.
+ * - `horizontal` — width only.
+ * - `both` — width and height.
+ */
+type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+/**
+ * Props for the {@link TextArea} component.
+ *
+ * `TextArea` is a controlled multi-line input. Pair `value` with `onChange` for
+ * state updates. Native `<textarea>` attributes (e.g. `name`, `tabIndex`) pass
+ * through via `...props` except `onChange`, `prefix`, and `suffix`, which are
+ * owned by this API.
+ */
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "suffix" | "prefix"> {
+    /** Unique `id` on the native `<textarea>`. Used for labels, tooltips, and tests. */
+    id: string;
+    /** Current textarea value. Use with {@link TextAreaProps.onChange} for controlled usage. */
+    value: string;
+    /** Called with the latest string whenever the user edits the field. */
+    onChange: (value: string) => void;
+    /** Class names merged onto the outer wrapper (layout, spacing, surfaces). */
+    className?: string;
+    /** Hint text shown when the field is empty. */
+    placeholder?: string;
+    /** Initial value when not fully controlled by parent state (rare; prefer `value`). */
+    defaultValue?: string;
+    /** Visual density of the control. @default "default" */
+    size?: TextAreaSize;
+    /** Prevents editing and applies disabled styles. @default false */
+    disabled?: boolean;
+    /** Displays the value but blocks edits (focusable, not dimmed like `disabled`). @default false */
+    readOnly?: boolean;
+    /** Marks the field required for native form validation. @default false */
+    required?: boolean;
+    /** Fired when the textarea receives focus. */
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Fired when the textarea loses focus. */
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Focuses the textarea on mount. @default false */
+    autoFocus?: boolean;
+    /** Shows a clear control when the field has a value (also clears on Escape). @default true */
+    allowClear?: boolean;
+    /** Maximum character count; pairs with {@link TextAreaProps.showCount}. */
+    maxLength?: number;
+    /** Minimum length for native constraint validation. */
+    minLength?: number;
+    /** Renders a live character counter (`value.length` / `maxLength` when set). @default false */
+    showCount?: boolean;
+    /** Visible height in rows (maps to the `rows` attribute). @default 3 */
+    rows?: number;
+    /** Whether the user can resize the textarea with the drag handle. @default "none" */
+    resize?: TextAreaResize;
+    /** Node rendered inside the field shell before the `<textarea>` (e.g. icon). */
+    prefix?: ReactNode;
+    /** Node rendered inside the field shell after the `<textarea>` (e.g. unit label). */
+    suffix?: ReactNode;
+    /** Content attached before the entire field group (flattens leading corners). */
+    addonBefore?: ReactNode;
+    /** Content attached after the entire field group (flattens trailing corners). */
+    addonAfter?: ReactNode;
+    /** Validation or feedback styling for borders and the clear button. @default "none" */
+    status?: TextAreaStatus;
+    /** Shortcut tooltip copy. Wraps the field in `Tooltip` when set. */
+    tooltip?: string;
+    /**
+     * Full {@link TooltipProps} for placement, trigger, variant, and styling.
+     * Merged with `id` and `tooltip` on the wrapping `Tooltip`.
+     */
+    tooltipOptions?: TooltipProps;
+    /** Accessible name when no visible `<label>` is associated with the field. */
+    "aria-label"?: string;
+    /** Id of an element that describes the field (helper or error text). */
+    "aria-describedby"?: string;
+}
+
+declare const TextArea: React.FC<TextAreaProps>;
+
+type ProgressBarProps = {
+    id: string;
+    className?: string;
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    min?: number;
+    size?: "small" | "medium" | "large";
+    color?: string;
+    backgroundColor?: string;
+    striped?: boolean;
+    animated?: boolean;
+    variant?: "solid" | "dashed" | "dotted";
+    showPercentage?: boolean;
+    indeterminate?: boolean;
+    autoFocus?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+    onChange?: (value: number) => void;
+    direction?: "horizontal" | "vertical";
+    minColor?: string;
+    maxColor?: string;
+    showLoadingLabel?: boolean;
+    labelPosition?: "inside" | "outside";
+    minLabel?: string;
+    maxLabel?: string;
+};
+
+declare const ProgressBar: React.FC<ProgressBarProps>;
+
+export { ProgressBar, type ProgressBarProps, TextArea, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaStatus, Tooltip, type TooltipAnimation, type TooltipPlacement, type TooltipPointerDirection, type TooltipProps, type TooltipTrigger, type TooltipVariant };

package/dist/index.d.ts

@@ -0,0 +1,225 @@
+import React, { ReactNode, RefObject, TextareaHTMLAttributes, FocusEvent } from 'react';
+
+type TooltipAnimation = "fade" | "scale" | "none";
+type TooltipPointerDirection = "left" | "right" | "center";
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+type TooltipTrigger = "hover" | "click" | "focus" | "manual";
+type TooltipVariant = "warning" | "success" | "error" | "info";
+interface TooltipProps {
+    /**
+     * Unique identifier for the Tooltip component.
+     */
+    id: string;
+    /**
+     * Custom CSS class for styling the Tooltip.
+     */
+    className?: string;
+    /**
+     *  The text or element displayed inside the Tooltip.
+     */
+    content: string | ReactNode;
+    /**
+     *  The preferred position of the Tooltip relative to the target element.
+     *  - Top: Tooltip appears above the target.
+     *  - Bottom: Tooltip appears below the target.
+     *  - Left: Tooltip appears to the left of the target.
+     *  - Right: Tooltip appears to the right of the target.
+     */
+    placement?: TooltipPlacement;
+    /**
+     * Defines how the Tooltip is activated.
+     *  - Hover (default): Tooltip appears when hovering over the target.
+     *  - Click: Tooltip appears when clicking the target.
+     *  - Focus: Tooltip appears when the target gains focus.
+     *  - Manual: Tooltip is controlled programmatically.
+     */
+    trigger?: TooltipTrigger;
+    /**
+     * Time (in milliseconds) before the Tooltip appears/disappears after triggering.
+     */
+    delay?: number;
+    /**
+     * Whether to display an arrow pointing to the target element.
+     */
+    arrow?: boolean;
+    /**
+     *  Defines the appearance animation of the Tooltip.
+     *  - Fade (default): Smooth fade-in effect.
+     *  - Scale: Expands from the center.
+     *  - None: No animation.
+     */
+    animation?: TooltipAnimation;
+    /**
+     * Defines the maximum width of the Tooltip content.
+     */
+    maxWidth?: string | number;
+    /**
+     * Disables the Tooltip when set to true.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the type of element wrapping the Tooltip trigger.
+     */
+    asChild?: "button" | "span" | "div";
+    /**
+     * A reference to the underlying Tooltip container.
+     */
+    ref?: RefObject<HTMLDivElement>;
+    /**
+     * Controls whether the Tooltip is visible by default.
+     * true: The Tooltip is visible when rendered.
+     * false (default): The Tooltip follows the trigger behavior.
+     */
+    isVisible?: boolean;
+    /**
+     * If true, a close button appears inside the Tooltip, allowing manual dismissal.
+     */
+    closeButton?: boolean;
+    /**
+     * Callback function triggered when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Callback function triggered when the Tooltip becomes visible.
+     */
+    onShow?: () => void;
+    /**
+     * Callback function triggered when the Tooltip is hidden.
+     */
+    onHide?: () => void;
+    variant?: TooltipVariant;
+    pointerDirection?: TooltipPointerDirection;
+}
+
+declare const Tooltip: React.FC<TooltipProps & {
+    children: ReactNode;
+}>;
+
+/**
+ * Controls padding and typography scale of the textarea.
+ *
+ * - `small` — compact density for dense forms or tables.
+ * - `default` — standard body size for most layouts.
+ * - `large` — emphasized input for hero or marketing surfaces.
+ */
+type TextAreaSize = "small" | "default" | "large";
+/**
+ * Visual feedback state applied to the field border and clear affordance.
+ *
+ * - `none` — neutral styling (default).
+ * - `error` — error ring and error-toned clear button.
+ * - `warning` — warning ring and warning-toned clear button.
+ */
+type TextAreaStatus = "warning" | "error" | "none";
+/**
+ * Native CSS `resize` behavior on the underlying `<textarea>`.
+ *
+ * - `none` — fixed dimensions (default).
+ * - `vertical` — height only.
+ * - `horizontal` — width only.
+ * - `both` — width and height.
+ */
+type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+/**
+ * Props for the {@link TextArea} component.
+ *
+ * `TextArea` is a controlled multi-line input. Pair `value` with `onChange` for
+ * state updates. Native `<textarea>` attributes (e.g. `name`, `tabIndex`) pass
+ * through via `...props` except `onChange`, `prefix`, and `suffix`, which are
+ * owned by this API.
+ */
+interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "suffix" | "prefix"> {
+    /** Unique `id` on the native `<textarea>`. Used for labels, tooltips, and tests. */
+    id: string;
+    /** Current textarea value. Use with {@link TextAreaProps.onChange} for controlled usage. */
+    value: string;
+    /** Called with the latest string whenever the user edits the field. */
+    onChange: (value: string) => void;
+    /** Class names merged onto the outer wrapper (layout, spacing, surfaces). */
+    className?: string;
+    /** Hint text shown when the field is empty. */
+    placeholder?: string;
+    /** Initial value when not fully controlled by parent state (rare; prefer `value`). */
+    defaultValue?: string;
+    /** Visual density of the control. @default "default" */
+    size?: TextAreaSize;
+    /** Prevents editing and applies disabled styles. @default false */
+    disabled?: boolean;
+    /** Displays the value but blocks edits (focusable, not dimmed like `disabled`). @default false */
+    readOnly?: boolean;
+    /** Marks the field required for native form validation. @default false */
+    required?: boolean;
+    /** Fired when the textarea receives focus. */
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Fired when the textarea loses focus. */
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    /** Focuses the textarea on mount. @default false */
+    autoFocus?: boolean;
+    /** Shows a clear control when the field has a value (also clears on Escape). @default true */
+    allowClear?: boolean;
+    /** Maximum character count; pairs with {@link TextAreaProps.showCount}. */
+    maxLength?: number;
+    /** Minimum length for native constraint validation. */
+    minLength?: number;
+    /** Renders a live character counter (`value.length` / `maxLength` when set). @default false */
+    showCount?: boolean;
+    /** Visible height in rows (maps to the `rows` attribute). @default 3 */
+    rows?: number;
+    /** Whether the user can resize the textarea with the drag handle. @default "none" */
+    resize?: TextAreaResize;
+    /** Node rendered inside the field shell before the `<textarea>` (e.g. icon). */
+    prefix?: ReactNode;
+    /** Node rendered inside the field shell after the `<textarea>` (e.g. unit label). */
+    suffix?: ReactNode;
+    /** Content attached before the entire field group (flattens leading corners). */
+    addonBefore?: ReactNode;
+    /** Content attached after the entire field group (flattens trailing corners). */
+    addonAfter?: ReactNode;
+    /** Validation or feedback styling for borders and the clear button. @default "none" */
+    status?: TextAreaStatus;
+    /** Shortcut tooltip copy. Wraps the field in `Tooltip` when set. */
+    tooltip?: string;
+    /**
+     * Full {@link TooltipProps} for placement, trigger, variant, and styling.
+     * Merged with `id` and `tooltip` on the wrapping `Tooltip`.
+     */
+    tooltipOptions?: TooltipProps;
+    /** Accessible name when no visible `<label>` is associated with the field. */
+    "aria-label"?: string;
+    /** Id of an element that describes the field (helper or error text). */
+    "aria-describedby"?: string;
+}
+
+declare const TextArea: React.FC<TextAreaProps>;
+
+type ProgressBarProps = {
+    id: string;
+    className?: string;
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    min?: number;
+    size?: "small" | "medium" | "large";
+    color?: string;
+    backgroundColor?: string;
+    striped?: boolean;
+    animated?: boolean;
+    variant?: "solid" | "dashed" | "dotted";
+    showPercentage?: boolean;
+    indeterminate?: boolean;
+    autoFocus?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+    onChange?: (value: number) => void;
+    direction?: "horizontal" | "vertical";
+    minColor?: string;
+    maxColor?: string;
+    showLoadingLabel?: boolean;
+    labelPosition?: "inside" | "outside";
+    minLabel?: string;
+    maxLabel?: string;
+};
+
+declare const ProgressBar: React.FC<ProgressBarProps>;
+
+export { ProgressBar, type ProgressBarProps, TextArea, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaStatus, Tooltip, type TooltipAnimation, type TooltipPlacement, type TooltipPointerDirection, type TooltipProps, type TooltipTrigger, type TooltipVariant };