@luxfi/ui 7.4.5 → 7.4.7

package/dist/radio.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly xs: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3 w-3";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly sm: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3.5 w-3.5";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly md: {
+        readonly root: "gap-2";
+        readonly control: "h-4 w-4";
+        readonly indicator: "h-2 w-2";
+        readonly label: "text-sm";
+    };
+    readonly lg: {
+        readonly root: "gap-2.5";
+        readonly control: "h-5 w-5";
+        readonly indicator: "h-2.5 w-2.5";
+        readonly label: "text-base";
+    };
+};
+type RadioSize = keyof typeof SIZE_CLASSES;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string | null;
+    onValueChange?: (details: {
+        value: string | null;
+    }) => void;
+    size?: RadioSize;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+    rootRef?: React.Ref<HTMLLabelElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    value: string;
+    disabled?: boolean;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/radio.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+declare const SIZE_CLASSES: {
+    readonly xs: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3 w-3";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly sm: {
+        readonly root: "gap-1.5";
+        readonly control: "h-3.5 w-3.5";
+        readonly indicator: "h-1.5 w-1.5";
+        readonly label: "text-xs";
+    };
+    readonly md: {
+        readonly root: "gap-2";
+        readonly control: "h-4 w-4";
+        readonly indicator: "h-2 w-2";
+        readonly label: "text-sm";
+    };
+    readonly lg: {
+        readonly root: "gap-2.5";
+        readonly control: "h-5 w-5";
+        readonly indicator: "h-2.5 w-2.5";
+        readonly label: "text-base";
+    };
+};
+type RadioSize = keyof typeof SIZE_CLASSES;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'dir'> {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string | null;
+    onValueChange?: (details: {
+        value: string | null;
+    }) => void;
+    size?: RadioSize;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
+    rootRef?: React.Ref<HTMLLabelElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    value: string;
+    disabled?: boolean;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/rating.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    count?: number;
+    label?: string | Array<string>;
+    defaultValue?: number;
+    onValueChange?: ({ value }: {
+        value: number;
+    }) => void;
+    readOnly?: boolean;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Rating, type RatingProps };

package/dist/rating.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    count?: number;
+    label?: string | Array<string>;
+    defaultValue?: number;
+    onValueChange?: ({ value }: {
+        value: number;
+    }) => void;
+    readOnly?: boolean;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Rating, type RatingProps };

package/dist/select.cjs

@@ -146,11 +146,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -170,7 +166,7 @@ var Skeleton = React2__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -182,7 +178,7 @@ var Skeleton = React2__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/select.d.cts

@@ -0,0 +1,130 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+
+interface ListCollection<T> {
+    items: Array<T>;
+}
+declare function createListCollection<T>(config: {
+    items: Array<T>;
+}): ListCollection<T>;
+type ViewMode = 'default' | 'compact';
+interface SelectOption<Value extends string = string> {
+    label: string;
+    renderLabel?: (place: 'item' | 'value-text') => React.ReactNode;
+    value: Value;
+    icon?: React.ReactNode;
+    afterElement?: React.ReactNode;
+}
+interface SelectRootProps {
+    children?: React.ReactNode;
+    collection?: ListCollection<SelectOption>;
+    defaultValue?: Array<string>;
+    value?: Array<string>;
+    onValueChange?: (details: {
+        value: Array<string>;
+        items: Array<SelectOption>;
+    }) => void;
+    onInteractOutside?: () => void;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'lg';
+    variant?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    positioning?: {
+        sameWidth?: boolean;
+        offset?: {
+            mainAxis?: number;
+            crossAxis?: number;
+        };
+    };
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    asChild?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    w?: string | Record<string, string>;
+    maxW?: string | Record<string, string>;
+    minW?: string | Record<string, string>;
+    hideFrom?: string;
+}
+declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectControlProps {
+    children?: React.ReactNode;
+    noIndicator?: boolean;
+    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+        asChild?: boolean;
+        px?: string | number;
+        className?: string;
+    };
+    loading?: boolean;
+    defaultValue?: Array<string>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectControl: React.ForwardRefExoticComponent<SelectControlProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectClearTriggerProps {
+    className?: string;
+}
+declare const SelectClearTrigger: React.ForwardRefExoticComponent<SelectClearTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectContentProps {
+    children?: React.ReactNode;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps {
+    item: SelectOption;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueTextProps {
+    children?: (items: Array<SelectOption>) => React.ReactNode;
+    placeholder?: string;
+    size?: SelectRootProps['size'];
+    required?: boolean;
+    invalid?: boolean;
+    errorText?: string;
+    mode?: ViewMode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectValueText: React.ForwardRefExoticComponent<SelectValueTextProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectItemGroupProps {
+    children?: React.ReactNode;
+    label: React.ReactNode;
+    className?: string;
+}
+declare const SelectItemGroup: React.ForwardRefExoticComponent<SelectItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItemText: React.ForwardRefExoticComponent<RadixSelect.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectProps extends SelectRootProps {
+    collection: ListCollection<SelectOption>;
+    placeholder: string;
+    portalled?: boolean;
+    loading?: boolean;
+    errorText?: string;
+    contentProps?: SelectContentProps;
+    contentHeader?: React.ReactNode;
+    itemFilter?: (item: SelectOption) => boolean;
+    mode?: ViewMode;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectAsyncProps extends Omit<SelectProps, 'collection'> {
+    placeholder: string;
+    portalled?: boolean;
+    loading?: boolean;
+    loadOptions: (input: string, currentValue: Array<string>) => Promise<ListCollection<SelectOption>>;
+    extraControls?: React.ReactNode;
+    mode?: ViewMode;
+}
+declare const SelectAsync: React.ForwardRefExoticComponent<SelectAsyncProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type ListCollection, Select, SelectAsync, type SelectAsyncProps, SelectClearTrigger, type SelectClearTriggerProps, SelectContent, type SelectContentProps, SelectControl, type SelectControlProps, SelectItem, SelectItemGroup, type SelectItemProps, SelectItemText, SelectLabel, type SelectOption, type SelectProps, SelectRoot, type SelectRootProps, SelectValueText, type ViewMode, createListCollection };

package/dist/select.d.ts

@@ -0,0 +1,130 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import * as React from 'react';
+
+interface ListCollection<T> {
+    items: Array<T>;
+}
+declare function createListCollection<T>(config: {
+    items: Array<T>;
+}): ListCollection<T>;
+type ViewMode = 'default' | 'compact';
+interface SelectOption<Value extends string = string> {
+    label: string;
+    renderLabel?: (place: 'item' | 'value-text') => React.ReactNode;
+    value: Value;
+    icon?: React.ReactNode;
+    afterElement?: React.ReactNode;
+}
+interface SelectRootProps {
+    children?: React.ReactNode;
+    collection?: ListCollection<SelectOption>;
+    defaultValue?: Array<string>;
+    value?: Array<string>;
+    onValueChange?: (details: {
+        value: Array<string>;
+        items: Array<SelectOption>;
+    }) => void;
+    onInteractOutside?: () => void;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'lg';
+    variant?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    positioning?: {
+        sameWidth?: boolean;
+        offset?: {
+            mainAxis?: number;
+            crossAxis?: number;
+        };
+    };
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    asChild?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    w?: string | Record<string, string>;
+    maxW?: string | Record<string, string>;
+    minW?: string | Record<string, string>;
+    hideFrom?: string;
+}
+declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectControlProps {
+    children?: React.ReactNode;
+    noIndicator?: boolean;
+    triggerProps?: React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+        asChild?: boolean;
+        px?: string | number;
+        className?: string;
+    };
+    loading?: boolean;
+    defaultValue?: Array<string>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectControl: React.ForwardRefExoticComponent<SelectControlProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectClearTriggerProps {
+    className?: string;
+}
+declare const SelectClearTrigger: React.ForwardRefExoticComponent<SelectClearTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectContentProps {
+    children?: React.ReactNode;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps {
+    item: SelectOption;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectValueTextProps {
+    children?: (items: Array<SelectOption>) => React.ReactNode;
+    placeholder?: string;
+    size?: SelectRootProps['size'];
+    required?: boolean;
+    invalid?: boolean;
+    errorText?: string;
+    mode?: ViewMode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const SelectValueText: React.ForwardRefExoticComponent<SelectValueTextProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectItemGroupProps {
+    children?: React.ReactNode;
+    label: React.ReactNode;
+    className?: string;
+}
+declare const SelectItemGroup: React.ForwardRefExoticComponent<SelectItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItemText: React.ForwardRefExoticComponent<RadixSelect.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectProps extends SelectRootProps {
+    collection: ListCollection<SelectOption>;
+    placeholder: string;
+    portalled?: boolean;
+    loading?: boolean;
+    errorText?: string;
+    contentProps?: SelectContentProps;
+    contentHeader?: React.ReactNode;
+    itemFilter?: (item: SelectOption) => boolean;
+    mode?: ViewMode;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectAsyncProps extends Omit<SelectProps, 'collection'> {
+    placeholder: string;
+    portalled?: boolean;
+    loading?: boolean;
+    loadOptions: (input: string, currentValue: Array<string>) => Promise<ListCollection<SelectOption>>;
+    extraControls?: React.ReactNode;
+    mode?: ViewMode;
+}
+declare const SelectAsync: React.ForwardRefExoticComponent<SelectAsyncProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type ListCollection, Select, SelectAsync, type SelectAsyncProps, SelectClearTrigger, type SelectClearTriggerProps, SelectContent, type SelectContentProps, SelectControl, type SelectControlProps, SelectItem, SelectItemGroup, type SelectItemProps, SelectItemText, SelectLabel, type SelectOption, type SelectProps, SelectRoot, type SelectRootProps, SelectValueText, type ViewMode, createListCollection };

package/dist/select.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React2.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React2.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/separator.d.cts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'solid' | 'dashed' | 'dotted';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+interface SeparatorProps extends React__default.HTMLAttributes<HTMLHRElement> {
+    readonly orientation?: Orientation;
+    readonly variant?: Variant;
+    readonly size?: Size;
+}
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLHRElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/separator.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+type Variant = 'solid' | 'dashed' | 'dotted';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+interface SeparatorProps extends React__default.HTMLAttributes<HTMLHRElement> {
+    readonly orientation?: Orientation;
+    readonly variant?: Variant;
+    readonly size?: Size;
+}
+declare const Separator: React__default.ForwardRefExoticComponent<SeparatorProps & React__default.RefAttributes<HTMLHRElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/skeleton.cjs

@@ -144,11 +144,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -168,7 +164,7 @@ var Skeleton = React__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -180,7 +176,7 @@ var Skeleton = React__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -217,7 +213,12 @@ var SkeletonText = React__namespace.forwardRef(
     )) });
   }
 );
+function LoadingBar({ loading = true }) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+}
 
+exports.LoadingBar = LoadingBar;
 exports.Skeleton = Skeleton;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;

package/dist/skeleton.d.cts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    readonly loading: boolean | undefined;
+    /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
+    readonly asChild?: boolean;
+    readonly w?: any;
+    readonly h?: any;
+    readonly minW?: any;
+    readonly maxW?: any;
+    readonly display?: string;
+    readonly flexGrow?: number;
+    readonly flexShrink?: number;
+    readonly flexBasis?: string;
+    readonly fontWeight?: number | string;
+    readonly textStyle?: string;
+    readonly borderRadius?: string;
+    readonly alignSelf?: string;
+    readonly alignItems?: string;
+    readonly justifyContent?: string;
+    readonly color?: string;
+    readonly mt?: number | string;
+    readonly mb?: number | string;
+    readonly ml?: number | string;
+    readonly mr?: number | string;
+    readonly height?: string;
+    readonly overflow?: string;
+    readonly whiteSpace?: string;
+    readonly textOverflow?: string;
+    readonly textTransform?: string;
+    readonly gap?: number | string;
+    readonly gridTemplateColumns?: string;
+    readonly minWidth?: string;
+    readonly boxSize?: number | string;
+    readonly py?: number | string;
+    readonly px?: number | string;
+    readonly p?: number | string;
+    readonly hideBelow?: string;
+    readonly as?: React.ElementType;
+    readonly fontSize?: string;
+    readonly flexWrap?: React.CSSProperties['flexWrap'];
+    readonly wordBreak?: React.CSSProperties['wordBreak'];
+    readonly lineHeight?: string;
+    readonly marginRight?: string;
+    readonly position?: React.CSSProperties['position'];
+    readonly background?: string;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly size?: string | number;
+    readonly loading?: boolean;
+}
+declare const SkeletonCircle: React.ForwardRefExoticComponent<SkeletonCircleProps & React.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly noOfLines?: number;
+    readonly loading?: boolean;
+}
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The page-level "work is in flight" signal — one animated element, however
+ * many skeletons are on screen. Mount it while any request is outstanding.
+ *
+ * It is `position: fixed` and 2px tall, so it is out of flow: it cannot shift
+ * layout (CLS 0) and it cannot tint content. Under prefers-reduced-motion the
+ * sweep stops and the track stays lit, so the state is still legible.
+ *
+ * This is what replaces a bare spinner. A spinner says "something is
+ * happening somewhere"; a skeleton plus this bar says "here is the shape of
+ * what is coming, and it is still coming".
+ */
+declare function LoadingBar({ loading }: {
+    readonly loading?: boolean;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { LoadingBar, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };