@scalably/ui 0.3.0 → 0.4.1

package/dist/index.d.cts

@@ -1,7 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, ImgHTMLAttributes } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
+import react__default, { ReactNode, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as date_fns from 'date-fns';
 export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
@@ -88,34 +86,68 @@ interface BackToTopProps {
  */
 declare const BackToTop: react.ForwardRefExoticComponent<BackToTopProps & react.RefAttributes<HTMLButtonElement>>;
 
+interface AuthPromptProps {
+    /** Main heading text. Defaults to "Login to continue". */
+    title?: React.ReactNode;
+    /**
+     * Supporting description below the title.
+     * Defaults to "Login to unlock this feature and continue exploring".
+     */
+    description?: React.ReactNode;
+    /** Label for the primary action button (left). Defaults to "Login". */
+    primaryLabel?: React.ReactNode;
+    /** Label for the secondary action button (right). Defaults to "Register". */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * Click handler for the primary action button.
+     * Typically used to navigate to the login page.
+     */
+    onPrimaryClick?: () => void;
+    /**
+     * Click handler for the secondary action button.
+     * Typically used to navigate to the registration page.
+     */
+    onSecondaryClick?: () => void;
+    /** Additional classes for the outer container. */
+    className?: string;
+    /** Additional classes for the buttons wrapper row. */
+    actionsClassName?: string;
+}
 /**
- * Accessible status badge with semantic color variants.
+ * AuthPrompt - A simple authentication call-to-action card.
  *
- * Aligns with design system color semantics:
- * - `success`: Active/Complete/Done/Confirmed/Verified
- * - `warning`: In progress/Waiting for confirmation
- * - `error`: Needs attention/Important/Alert/Danger
- * - `inactive`: Closed/Passed/Not active/Too late
- * - `info`: Informational status
+ * Designed for feature gating flows where users must authenticate before
+ * continuing. The layout follows the Scalably design system and the
+ * provided reference UI:
+ *
+ * - Centered card with title and description
+ * - Two horizontally aligned buttons on the same row
+ * - Mobile-first responsive layout with full-width buttons on small screens
+ * - Consumers provide navigation logic via `onPrimaryClick` / `onSecondaryClick`
  *
  * @example
  * ```tsx
- * <StatusBadge status="success">Active</StatusBadge>
- * <StatusBadge status="warning" variant="outline">Pending</StatusBadge>
- * <StatusBadge status="inactive">Closed</StatusBadge>
- * <StatusBadge status="error" icon={<AlertIcon />}>Urgent</StatusBadge>
+ * <AuthPrompt
+ *   onPrimaryClick={() => router.push("/login")}
+ *   onSecondaryClick={() => router.push("/register")}
+ * />
+ *
+ * <AuthPrompt
+ *   title="Join Scalably"
+ *   description="Create an account or log in to save your workspace."
+ *   primaryLabel="Sign in"
+ *   secondaryLabel="Create account"
+ *   onPrimaryClick={() => navigate("/signin")}
+ *   onSecondaryClick={() => navigate("/signup")}
+ * />
  * ```
  */
-declare const statusBadgeVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-    status?: "error" | "success" | "warning" | "info" | "inactive" | null | undefined;
-    variant?: "solid" | "soft" | "outline" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type StatusBadgeStatus = NonNullable<VariantProps<typeof statusBadgeVariants>["status"]>;
-type StatusBadgeVariant = NonNullable<VariantProps<typeof statusBadgeVariants>["variant"]>;
-type StatusBadgeSize = NonNullable<VariantProps<typeof statusBadgeVariants>["size"]>;
-interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof statusBadgeVariants> {
+declare const AuthPrompt: React.FC<AuthPromptProps>;
+
+type StatusBadgeStatus = "success" | "warning" | "error" | "info" | "inactive";
+type StatusBadgeVariant = "solid" | "soft" | "outline";
+type StatusBadgeSize = "sm" | "md" | "lg";
+interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
     /**
      * Badge size using design system typography.
      * - `sm`: 12px medium (label-12-medium) - default
@@ -123,7 +155,10 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * - `lg`: 16px medium (body-16-medium)
      * @default "sm"
      */
-    size?: "sm" | "md" | "lg";
+    size?: StatusBadgeSize;
+    status?: StatusBadgeStatus;
+    variant?: StatusBadgeVariant;
+    fullWidth?: boolean;
     /**
      * Optional leading icon.
      */
@@ -140,16 +175,13 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 }
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-declare const buttonVariants: (props?: ({
-    variant?: "link" | "text" | "outline" | "default" | "destructive" | "secondary" | null | undefined;
-    size?: "icon" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "text" | "link";
+type ButtonSize = "md" | "lg" | "icon";
 type ButtonBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">;
-interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends ButtonBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     loading?: boolean;
-    disabled?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
 }
@@ -287,8 +319,8 @@ interface MultipleSelectionButtonProps extends MultipleSelectionButtonBaseProps
  */
 declare const MultipleSelectionButton: react.ForwardRefExoticComponent<MultipleSelectionButtonProps & react.RefAttributes<HTMLDivElement>>;
 
-type BaseInputProps$1 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-interface CheckboxProps extends BaseInputProps$1 {
+type BaseInputProps$2 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+interface CheckBoxProps extends BaseInputProps$2 {
     /** Marks the field as invalid (error state). Applies error color styling. */
     invalid?: boolean;
     /** Sets the checkbox to an indeterminate state. */
@@ -345,11 +377,11 @@ interface CheckboxProps extends BaseInputProps$1 {
  * />
  * ```
  */
-declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+declare const CheckBox: react.ForwardRefExoticComponent<CheckBoxProps & react.RefAttributes<HTMLInputElement>>;
 
 type Orientation = "horizontal" | "vertical";
 
-interface CheckboxGroupOption<T extends string = string> {
+interface CheckBoxGroupOption<T extends string = string> {
     value: T;
     label: React.ReactNode;
     description?: React.ReactNode;
@@ -358,7 +390,7 @@ interface CheckboxGroupOption<T extends string = string> {
     id?: string;
 }
 type BaseFieldSetProps$1 = Omit<React.HTMLAttributes<HTMLFieldSetElement>, "onChange">;
-interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProps$1 {
+interface CheckBoxGroupProps<T extends string = string> extends BaseFieldSetProps$1 {
     /** Accessible legend/title for the group */
     legend: React.ReactNode;
     /** Shared name assigned to all checkboxes in this group */
@@ -366,7 +398,7 @@ interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProp
     /** Layout direction */
     orientation?: Orientation;
     /** Checkbox options list */
-    options: CheckboxGroupOption<T>[];
+    options: CheckBoxGroupOption<T>[];
     /** Controlled values array */
     value?: T[];
     /** Uncontrolled default values array */
@@ -387,13 +419,9 @@ interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProp
 /**
  * - Fieldset wrapper managing a group of checkboxes with optional Select All,description, and orientation.
  */
-declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
+declare const CheckBoxGroup: react.ForwardRefExoticComponent<CheckBoxGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
 
-declare const inputVariants: (props?: ({
-    variant?: "error" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type InputVariants = VariantProps<typeof inputVariants>;
-type InputVariant = InputVariants["variant"];
+type InputVariant = "default" | "error";
 type InputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "required">;
 interface InputProps extends InputBaseProps {
     variant?: InputVariant;
@@ -492,10 +520,7 @@ interface QuantityInputProps extends QuantityInputBaseProps {
  */
 declare const QuantityInput: react.ForwardRefExoticComponent<QuantityInputProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const searchInputVariants: (props?: ({
-    variant?: "full" | "compact" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SearchInputVariant = VariantProps<typeof searchInputVariants>["variant"];
+type SearchInputVariant = "compact" | "full";
 type SearchInputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
 interface SearchInputProps extends SearchInputBaseProps {
     variant?: SearchInputVariant;
@@ -657,35 +682,29 @@ type DateInputProps = SingleProps | RangeProps;
  */
 declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
 
-declare const dividerVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    inset?: "end" | "none" | "both" | "start" | null | undefined;
-    thickness?: "sm" | "px" | null | undefined;
-    stretch?: "none" | "full" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type DividerVariant = VariantProps<typeof dividerVariants>;
-type DividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dividerVariants> & {
+type DividerOrientation = "horizontal" | "vertical";
+type DividerInset = "none" | "start" | "end" | "both";
+type DividerThickness = "px" | "sm";
+type DividerStretch = "none" | "full";
+type DividerVariant = {
+    orientation?: DividerOrientation;
+    inset?: DividerInset;
+    thickness?: DividerThickness;
+    stretch?: DividerStretch;
+};
+type DividerProps = React.HTMLAttributes<HTMLDivElement> & DividerVariant & {
     colorClassName?: string;
 };
 /**
  * - Themed horizontal or vertical separator with orientation, inset, thickness,
  * and stretch variants. Uses role="separator" for a11y.
  */
-declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-    inset?: "end" | "none" | "both" | "start" | null | undefined;
-    thickness?: "sm" | "px" | null | undefined;
-    stretch?: "none" | "full" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & DividerVariant & {
     colorClassName?: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare const fileUploadVariants: (props?: ({
-    variant?: "error" | "default" | "disabled" | "dragOver" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type FileUploadVariant = VariantProps<typeof fileUploadVariants>["variant"];
-type FileUploadSize = VariantProps<typeof fileUploadVariants>["size"];
+type FileUploadVariant = "default" | "dragOver" | "error" | "disabled";
+type FileUploadSize = "sm" | "md" | "lg";
 type FileUploadIconType = "file" | "image" | "video";
 interface FileUploadError {
     type: "fileType" | "fileSize" | "fileCount" | "network" | "unknown";
@@ -890,8 +909,8 @@ interface PaginationProps extends PaginationBaseProps {
  */
 declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
 
-type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
-interface RadioProps extends BaseInputProps {
+type BaseInputProps$1 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+interface RadioProps extends BaseInputProps$1 {
     /** Marks the field as invalid (error state). Applies error color styling. */
     invalid?: boolean;
     /** Optional visible label. Use `children` if you need custom label layout. */
@@ -990,10 +1009,58 @@ interface RadioGroupProps<T extends string = string> extends BaseFieldSetProps {
  */
 declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
 
-declare const selectVariants: (props?: ({
-    variant?: "error" | "default" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SelectVariant = VariantProps<typeof selectVariants>["variant"];
+type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
+interface SwitchProps extends BaseInputProps {
+    /** Marks the field as invalid (error state). Applies error color styling. */
+    invalid?: boolean;
+    /** Optional visible label displayed next to the switch. */
+    label?: React.ReactNode;
+    /** Optional hint/description text shown under the label for a11y. */
+    description?: React.ReactNode;
+    /** Id of the description element for aria-describedby; auto-wired if `description` provided. */
+    descriptionId?: string;
+}
+/**
+ * Switch - An accessible on/off switch built on a native checkbox.
+ *
+ * Features:
+ * - Uses system design tokens for colors and typography
+ * - Optional label and hint/description text
+ * - Error/invalid and disabled states with proper styling
+ * - Full keyboard navigation and screen reader support
+ *
+ * Notes:
+ * - Implemented as `type="checkbox"` so it keeps the native checkbox role
+ *   while visually styled as a switch. This ensures maximum compatibility
+ *   with existing form/a11y helpers in the library.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Switch
+ *   id="notifications"
+ *   name="notifications"
+ *   checked={enabled}
+ *   onChange={(e) => setEnabled(e.target.checked)}
+ *   label="Notifications"
+ *   description="This is a hint text to help user."
+ * />
+ *
+ * // With invalid state
+ * <Switch
+ *   id="terms"
+ *   name="terms"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ *   label="Accept terms"
+ *   description="You must accept to continue."
+ *   invalid={!accepted && submitted}
+ * />
+ * ```
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+type SelectVariant = "default" | "error";
 interface SelectOption {
     value: string;
     label: string;
@@ -1092,13 +1159,11 @@ interface SelectProps extends SelectBaseProps {
  */
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
 
-declare const skeletonVariants: (props?: ({
-    variant?: "text" | "circle" | "rectangle" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type SkeletonVariant = NonNullable<VariantProps<typeof skeletonVariants>["variant"]>;
-type SkeletonSize = NonNullable<VariantProps<typeof skeletonVariants>["size"]>;
-interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "height">, VariantProps<typeof skeletonVariants> {
+type SkeletonVariant = "text" | "circle" | "rectangle";
+type SkeletonSize = "sm" | "md" | "lg";
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "width" | "height"> {
+    variant?: SkeletonVariant;
+    size?: SkeletonSize;
     /**
      * Width of the skeleton.
      * If a number is provided, it will be automatically converted to pixels.
@@ -1375,6 +1440,19 @@ interface TimePickerProps {
  */
 declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
 
+type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
+type CountdownSize = "sm" | "lg";
+type CountdownTimeValues = Partial<Record<CountdownUnit, number>>;
+interface CountdownProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    targetDate: Date | string;
+    displayUnits?: CountdownUnit[];
+    size?: CountdownSize;
+    label?: string;
+    onComplete?: () => void;
+    unitLabels?: Partial<Record<CountdownUnit, string>>;
+}
+declare const Countdown: react.ForwardRefExoticComponent<CountdownProps & react.RefAttributes<HTMLDivElement>>;
+
 type ToastStatus = "success" | "info" | "warn" | "error";
 interface ToastAction {
     label: string;
@@ -1665,28 +1743,57 @@ interface ViewToggleProps {
  */
 declare const ViewToggle: React.FC<ViewToggleProps>;
 
+interface DefaultAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override. Falls back to the intrinsic
+     * width/height of the asset when not provided.
+     */
+    size?: number;
+}
+type DefaultAssetComponent = ForwardRefExoticComponent<DefaultAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<DefaultAssetProps & RefAttributes<SVGSVGElement>>>;
+
 /**
- * Centralized catalog of fallback imagery for avatars and generic image slots.
- * Consumers can reference these to keep placeholder usage consistent.
+ * Group avatar placeholder rendered as an inline SVG so consumers
+ * don't need to manage static asset paths.
+ */
+declare const GroupAvatar: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Image placeholder illustration as an inline SVG.
+ */
+declare const ImagePlaceholder: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Profile avatar placeholder rendered as an inline SVG.
  */
-declare const defaultAssets: {
-    readonly avatars: {
-        readonly group: string;
-        readonly profile: string;
+declare const ProfileAvatar: react.MemoExoticComponent<react.ForwardRefExoticComponent<DefaultAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+type DefaultAssetCatalog = {
+    avatars: {
+        group: DefaultAssetComponent;
+        profile: DefaultAssetComponent;
     };
-    readonly placeholders: {
-        readonly image: string;
+    placeholders: {
+        image: DefaultAssetComponent;
     };
 };
+/**
+ * Centralized catalog of fallback imagery for avatars and generic image slots.
+ * Provided as inline SVG React components to avoid bundling pitfalls for consumers.
+ */
+declare const defaultAssets: DefaultAssetCatalog;
+type DefaultAssets = DefaultAssetCatalog;
+type DefaultAssetCategory = keyof DefaultAssetCatalog;
+type DefaultAssetVariant<C extends DefaultAssetCategory = DefaultAssetCategory> = keyof DefaultAssetCatalog[C];
 
 type AvatarPlaceholderCategory = keyof typeof defaultAssets;
 type AvatarPlaceholderVariantMap = {
     [K in AvatarPlaceholderCategory]: keyof (typeof defaultAssets)[K];
 };
 type AvatarPlaceholderVariant<C extends AvatarPlaceholderCategory = AvatarPlaceholderCategory> = AvatarPlaceholderVariantMap[C];
-interface BaseAvatarPlaceholderProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> {
+interface BaseAvatarPlaceholderProps extends Omit<DefaultAssetProps, "children"> {
     /**
-     * Accessible text describing the placeholder image.
+     * Accessible text describing the placeholder illustration.
      * Falls back to a generated description derived from category and variant.
      */
     alt?: string;
@@ -1702,44 +1809,69 @@ interface AvatarPlaceholderProps<C extends AvatarPlaceholderCategory = AvatarPla
     variant: AvatarPlaceholderVariant<C>;
 }
 /**
- * Thin wrapper around the shared default asset catalog that renders placeholder imagery
- * (e.g. generic avatars) as a standard `<img>` element with sensible defaults.
+ * Thin wrapper around the shared default asset catalog that renders placeholder
+ * imagery (e.g. generic avatars) as inline SVG React components with sensible defaults.
  */
-declare const AvatarPlaceholder: react.ForwardRefExoticComponent<AvatarPlaceholderProps<"avatars" | "placeholders"> & react.RefAttributes<HTMLImageElement>>;
+declare const AvatarPlaceholder: react.ForwardRefExoticComponent<AvatarPlaceholderProps<keyof {
+    avatars: {
+        group: DefaultAssetComponent;
+        profile: DefaultAssetComponent;
+    };
+    placeholders: {
+        image: DefaultAssetComponent;
+    };
+}> & react.RefAttributes<SVGSVGElement>>;
 
-declare const logoAssets: {
-    readonly app: {
-        readonly png: string;
-        readonly svg: string;
+interface LogoAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override; falls back to intrinsic size.
+     */
+    size?: number;
+    /**
+     * Optional alt text (mirrored to aria-label by consumers).
+     */
+    alt?: string;
+}
+type LogoAssetComponent = ForwardRefExoticComponent<LogoAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<LogoAssetProps & RefAttributes<SVGSVGElement>>>;
+
+declare const AppLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const CampaignLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const IconBigLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+declare const IconLogo: react.MemoExoticComponent<react.ForwardRefExoticComponent<LogoAssetProps & react.RefAttributes<SVGSVGElement>>>;
+
+type LogoAssetCatalog = {
+    app: {
+        svg: LogoAssetComponent;
     };
-    readonly campaign: {
-        readonly png: string;
-        readonly svg: string;
+    campaign: {
+        svg: LogoAssetComponent;
     };
-    readonly membership: {
-        readonly png: string;
-        readonly svg: string;
+    membership: {
+        svg: LogoAssetComponent;
     };
-    readonly icon: {
-        readonly png: string;
-        readonly svg: string;
+    icon: {
+        svg: LogoAssetComponent;
     };
-    readonly "icon-big": {
-        readonly png: string;
+    "icon-big": {
+        svg: LogoAssetComponent;
     };
 };
+declare const logoAssets: LogoAssetCatalog;
+type LogoAssets = LogoAssetCatalog;
 
 type LogoVariant = keyof typeof logoAssets;
-type LogoFormat = {
-    [K in LogoVariant]: keyof (typeof logoAssets)[K];
-}[LogoVariant];
-interface LogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt"> {
+type LogoFormat = "svg";
+interface LogoProps extends Omit<LogoAssetProps, "children"> {
     /**
      * Which logo variant to render (derived from logo assets).
      */
     variant: LogoVariant;
     /**
-     * File format to render. Defaults to SVG when available, otherwise PNG.
+     * Logical format to render. Both formats map to inline SVG components.
+     * Defaults to SVG when available.
      */
     format?: LogoFormat;
     /**
@@ -1750,7 +1882,7 @@ interface LogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "a
 /**
  * Branded logo renderer that stays tightly coupled to available assets.
  */
-declare const Logo: react.ForwardRefExoticComponent<LogoProps & react.RefAttributes<HTMLImageElement>>;
+declare const Logo: react.ForwardRefExoticComponent<LogoProps & react.RefAttributes<SVGSVGElement>>;
 
 interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
@@ -1809,6 +1941,78 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
  */
 declare const LoadingScreen: react__default.ForwardRefExoticComponent<LoadingScreenProps & react__default.RefAttributes<HTMLDivElement>>;
 
+interface WelcomeAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Optional square dimension override; falls back to intrinsic size.
+     */
+    size?: number;
+}
+type WelcomeAssetComponent = ForwardRefExoticComponent<WelcomeAssetProps & RefAttributes<SVGSVGElement>> | MemoExoticComponent<ForwardRefExoticComponent<WelcomeAssetProps & RefAttributes<SVGSVGElement>>>;
+
+type WelcomeAssetCatalog = {
+    ellipses: readonly [WelcomeAssetComponent, WelcomeAssetComponent];
+    multipleLine: WelcomeAssetComponent;
+    background: WelcomeAssetComponent;
+};
+declare const welcomeAssets: WelcomeAssetCatalog;
+
+type EllipseSource = string | WelcomeAssetComponent;
+type LineSource = string | WelcomeAssetComponent;
+type BackgroundSource = string | WelcomeAssetComponent;
+interface WelcomeBackgroundProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Optional children rendered on top of the animated background.
+     */
+    children?: react__default.ReactNode;
+    /**
+     * Toggle ellipse animation layer.
+     * @default true
+     */
+    showEllipses?: boolean;
+    /**
+     * Toggle line wave animation layer.
+     * @default true
+     */
+    showLines?: boolean;
+    /**
+     * Disable all animations (also handled automatically for prefers-reduced-motion).
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Background image URL or inline React SVG component.
+     * Defaults to bundled inline SVG background.
+     */
+    backgroundImage?: BackgroundSource;
+    /**
+     * Ellipse sources (URLs or inline React SVG components). Defaults to bundled inline SVGs.
+     */
+    ellipsesData?: readonly EllipseSource[];
+    /**
+     * Lines overlay source (URL or inline React SVG component). Defaults to bundled inline SVG.
+     */
+    linesSrc?: LineSource;
+}
+/**
+ * Animated background for welcome/landing experiences.
+ * - Uses deterministic seeded randomness for stable ellipse paths.
+ * - Honors reduced-motion preferences and optional animation disabling.
+ * - Mobile-first; hides heavy layers on very small screens via consumer control.
+ *
+ * @remarks
+ * **Asset handling**
+ * - Recommended: host your own assets (e.g., place files in `/public/static/welcome`)
+ *   and pass them via `backgroundImage`, `ellipsesData`, and `linesSrc`.
+ * - Bundled option: import `welcomeAssets` and copy the hashed files from
+ *   `node_modules/@scalably/ui/dist/` into a served location (e.g., via a
+ *   postinstall script) before using those paths.
+ * Bundler setups differ; self-hosted URLs are the most reliable.
+ */
+declare const WelcomeBackground: {
+    ({ className, style, children, showEllipses, showLines, disableAnimation, backgroundImage, ellipsesData, linesSrc, ...props }: WelcomeBackgroundProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type ImageSourceMode = "both" | "url-only" | "upload-only";
 interface RichTextEditorProps {
     /** Controlled HTML value of the editor */
@@ -1872,6 +2076,23 @@ interface RichTextEditorProps {
      *     "url-only" so the image feature is still usable.
      */
     imageSourceMode?: ImageSourceMode;
+    /**
+     * Maximum number of plain-text characters allowed.
+     * If the limit is reached, further typing is prevented by the
+     * `CharacterCount` extension.
+     *
+     * Non-positive or non-finite values (e.g. 0, NaN, Infinity) are treated
+     * as "no limit".
+     */
+    maxCharacters?: number;
+    /**
+     * Callback fired when the max character limit is reached.
+     * Fired only once per breach (debounced until length drops below limit).
+     */
+    onMaxLengthExceed?: (info: {
+        max: number;
+        current: number;
+    }) => void;
 }
 /**
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -1890,7 +2111,7 @@ interface RichTextEditorProps {
  * import { RichTextEditor, RichTextViewer } from '@scalably/ui';
  *
  * function BlogPost({ post }) {
- *   const [content, setContent] = useState(post.content);
+ *   const [content, setContent] = useState<string>(post.content);
  *
  *   return (
  *     <div>
@@ -1904,7 +2125,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3076,4 +3297,4 @@ interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
  */
 declare const YoutubeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<YoutubeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
 
-export { AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CaptureIcon, type CaptureIconProps, CheckIcon, type CheckIconProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CloseIcon, type CloseIconProps, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, ImageIcon, type ImageIconProps, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InstagramIcon, type InstagramIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkedInIcon, type LinkedInIconProps, ListIcon, type ListIconProps, LoadingScreen, type LoadingScreenProps, Logo, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TwitchIcon, type TwitchIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, zodErrorsToSummary };
+export { AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InstagramIcon, type InstagramIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkedInIcon, type LinkedInIconProps, ListIcon, type ListIconProps, LoadingScreen, type LoadingScreenProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TwitchIcon, type TwitchIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };