@app-studio/web 0.8.71 → 0.8.73

package/dist/components/Form/Password/Password/Password.state.d.ts

@@ -29,7 +29,7 @@ export declare const usePasswordState: (props: PasswordProps) => {
     onClick?: (() => void) | undefined;
     onFocus?: (() => void) | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    shadow?: import("react").CSSProperties | import("app-studio").Shadow | import("../../../../utils/elevation").Elevation | undefined;
+    shadow?: import("app-studio").Shadow | import("../../../../utils/elevation").Elevation | import("app-studio").ViewProps | undefined;
     shape?: "default" | "sharp" | "rounded" | "pillShaped" | undefined;
     views?: import("../../TextField/TextField/TextField.type").TextFieldStyles | undefined;
     variant?: "outline" | "default" | "none" | undefined;

package/dist/components/HoverCard/HoverCard/HoverCard.props.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+export interface HoverCardProps {
+    /**
+     * The content of the HoverCard
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for different parts of the HoverCard
+     */
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+    };
+}
+export interface HoverCardTriggerProps {
+    /**
+     * The element that triggers the hover card
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the trigger element
+     */
+    views?: {
+        container?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the trigger element
+     */
+    [key: string]: any;
+}
+export interface HoverCardContentProps {
+    /**
+     * The content to be displayed in the hover card
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the content container
+     */
+    views?: {
+        container?: ViewProps;
+    };
+    /**
+     * The side of the trigger to render the content
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * The alignment of the content relative to the trigger
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Additional props to be spread to the content element
+     */
+    [key: string]: any;
+}
+export interface HoverCardType extends React.FC<HoverCardProps> {
+    /**
+     * The trigger element that will show the hover card on hover
+     */
+    Trigger: React.FC<HoverCardTriggerProps>;
+    /**
+     * The content that will be displayed when hovering over the trigger
+     */
+    Content: React.FC<HoverCardContentProps>;
+}

package/dist/components/HoverCard/HoverCard/HoverCard.state.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useHoverCardState: () => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/components/HoverCard/HoverCard/HoverCard.style.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from 'app-studio';
+import { Alignment, Side } from './HoverCard.type';
+export declare const ContentPositions: Record<Side, (align: Alignment) => ViewProps>;

package/dist/components/HoverCard/HoverCard/HoverCard.type.d.ts

@@ -0,0 +1,6 @@
+export declare type Side = 'top' | 'right' | 'bottom' | 'left';
+export declare type Alignment = 'start' | 'center' | 'end';
+export interface HoverCardContextType {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+}

package/dist/components/HoverCard/HoverCard/HoverCard.view.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HoverCardContextType } from './HoverCard.type';
+import { HoverCardContentProps, HoverCardTriggerProps } from './HoverCard.props';
+export declare const HoverCardProvider: React.FC<{
+    children: React.ReactNode;
+    value: HoverCardContextType;
+}>;
+export declare const useHoverCardContext: () => HoverCardContextType;
+export declare const HoverCardTrigger: React.FC<HoverCardTriggerProps>;
+export declare const HoverCardContent: React.FC<HoverCardContentProps>;

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,2 @@
+import { HoverCardType } from './HoverCard/HoverCard.props';
+export declare const HoverCard: HoverCardType;

package/dist/components/HoverCard/examples/default.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultHoverCard: () => React.JSX.Element;

package/dist/components/HoverCard/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './default';

package/dist/components/Slider/Slider/Slider.props.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="react" />
+import { InputProps, ViewProps } from 'app-studio';
+import { Orientation, Shape, Size, SliderStyles, Variant } from './Slider.type';
+export interface SliderProps extends Omit<InputProps, 'size' | 'onChange'> {
+    /**
+     * The minimum value of the slider
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider
+     */
+    max?: number;
+    /**
+     * The current value of the slider
+     */
+    value?: number;
+    /**
+     * The default value of the slider (uncontrolled)
+     */
+    defaultValue?: number;
+    /**
+     * The step value for the slider
+     */
+    step?: number;
+    /**
+     * Array of specific values to use as steps
+     * When provided, the slider will only allow these values
+     */
+    stepValues?: number[];
+    /**
+     * The shape of the slider
+     */
+    shape?: Shape;
+    /**
+     * The size of the slider
+     */
+    size?: Size;
+    /**
+     * The variant of the slider
+     */
+    variant?: Variant;
+    /**
+     * The orientation of the slider
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the slider is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show the current value label
+     */
+    showValue?: boolean;
+    /**
+     * If true, a tooltip showing the current value will appear on hover/drag
+     */
+    showTooltip?: boolean;
+    /**
+     * Custom label for the slider
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper text to display below the slider
+     */
+    helperText?: string;
+    /**
+     * Callback function when the value changes
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback function when the slider is being dragged
+     */
+    onDrag?: (value: number) => void;
+    /**
+     * Optional color scheme to apply (e.g., 'theme.primary')
+     */
+    colorScheme?: string;
+    /**
+     * Custom styles for the slider components
+     */
+    views?: SliderStyles;
+    /**
+     * Shadow effect for the slider
+     */
+    shadow?: ViewProps;
+    /**
+     * Aria-label for accessibility
+     */
+    ariaLabel?: string;
+}
+export interface SliderViewProps extends SliderProps {
+    /** The current internal value being displayed/manipulated. */
+    currentValue?: number;
+    /** Flag indicating if the thumb is being dragged. */
+    isDragging: boolean;
+    /** Flag indicating if the component is hovered. */
+    isHovered: boolean;
+    /** Reference to the track element. */
+    trackRef: React.RefObject<HTMLDivElement>;
+    /** Reference to the thumb element. */
+    thumbRef: React.RefObject<HTMLDivElement>;
+    /** Handler for mouse down / touch start on the thumb. */
+    handleThumbMouseDown: (event: React.MouseEvent | React.TouchEvent) => void;
+    /** Handler for mouse down / touch start on the track. */
+    handleTrackMouseDown: (event: React.MouseEvent | React.TouchEvent) => void;
+    /** Handler for keyboard interaction on the thumb. */
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    /** The calculated position percentage for the thumb. */
+    thumbPositionPercent: number;
+    /** Callback to set hover state */
+    setIsHovered: (hovered: boolean) => void;
+}

package/dist/components/Slider/Slider/Slider.state.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SliderProps } from './Slider.props';
+export declare const useSliderState: ({ min, max, step, value: controlledValue, defaultValue, onChange, onDrag, orientation, isDisabled, stepValues, }: SliderProps) => {
+    currentValue: number;
+    isDragging: boolean;
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    trackRef: React.RefObject<HTMLDivElement>;
+    thumbRef: React.RefObject<HTMLDivElement>;
+    handleThumbMouseDown: (event: React.MouseEvent | React.TouchEvent) => void;
+    handleTrackMouseDown: (event: React.MouseEvent | React.TouchEvent) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    thumbPositionPercent: number;
+};

package/dist/components/Slider/Slider/Slider.style.d.ts

@@ -0,0 +1,11 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Shape, Size, Variant } from './Slider.type';
+export declare const SliderSizes: Record<Size, ViewProps>;
+export declare const ThumbSizes: Record<Size, ViewProps>;
+export declare const SliderShapes: Record<Shape, number | string>;
+export declare const SliderVariants: Record<Variant, ViewProps>;
+export declare const EnhancedSliderSizes: Record<Size, {
+    trackCrossAxisSize: number;
+    thumbSize: number;
+}>;
+export declare const OrientationStyles: Record<Orientation, ViewProps>;

package/dist/components/Slider/Slider/Slider.type.d.ts

@@ -0,0 +1,18 @@
+import { ViewProps, TextProps } from 'app-studio';
+export declare type Shape = 'sharp' | 'rounded' | 'pillShaped';
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type Variant = 'default' | 'outline';
+export declare type Orientation = 'horizontal' | 'vertical';
+export interface SliderStyles {
+    container?: ViewProps;
+    track?: ViewProps;
+    progress?: ViewProps;
+    filledTrack?: ViewProps;
+    thumb?: ViewProps;
+    label?: ViewProps;
+    valueLabel?: ViewProps;
+    stepMarks?: ViewProps;
+    tooltip?: ViewProps & {
+        text?: TextProps;
+    };
+}

package/dist/components/Slider/Slider/Slider.view.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SliderViewProps } from './Slider.props';
+export declare const SliderView: React.FC<SliderViewProps>;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SliderProps } from './Slider/Slider.props';
+/**
+ * Slider allows users to select a value from a range by moving a handle.
+ */
+export declare const Slider: React.FC<SliderProps>;

package/dist/components/Slider/SliderDemo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SliderDemo: () => React.JSX.Element;
+export default SliderDemo;

package/dist/components/Slider/examples/controlled.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ControlledDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/custom.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/default.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/disabled.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DisabledDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/range.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RangeDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/shapes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ShapesDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/sizes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SizesDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/stepValues.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StepValuesDemo: () => React.JSX.Element;
+export declare const PricingTiersDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/tooltip.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TooltipDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/variants.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VariantsDemo: () => React.JSX.Element;

package/dist/components/Slider/examples/vertical.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VerticalDemo: () => React.JSX.Element;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/components/Table/Table.d.ts

@@ -2,13 +2,13 @@ import React from 'react';
 import { TableLayoutProps } from './Table/Table.props';
 export declare const Table: {
     ({ children, views, onClick }: TableLayoutProps): React.JSX.Element;
-    Head: React.FC<any>;
-    HeadCell: React.FC<any>;
-    Body: React.FC<any>;
-    Row: React.FC<any>;
-    Cell: React.FC<any>;
-    Footer: React.FC<any>;
-    Caption: React.FC<any>;
-    Container: React.FC<any>;
+    Head: React.FC<import("app-studio").ViewProps>;
+    HeadCell: React.FC<import("app-studio").ViewProps>;
+    Body: React.FC<import("app-studio").ViewProps>;
+    Row: React.FC<import("app-studio").ViewProps>;
+    Cell: React.FC<import("app-studio").ViewProps>;
+    Footer: React.FC<import("app-studio").ViewProps>;
+    Caption: React.FC<import("app-studio").ViewProps>;
+    Container: React.FC<import("app-studio").ViewProps>;
     Template: React.FC<import("./Table/Table.props").TableViewProps>;
 };

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './Form/DatePicker/DatePicker';
 export * from './Form/Password/Password';
 export * from './Form/ComboBox/ComboBox';
 export * from './Formik';
+export * from './Slider';
 export * from './Layout/Center/Center';
 export * from './Layout/Horizontal/Horizontal';
 export * from './Layout/Vertical/Vertical';
@@ -32,6 +33,7 @@ export * as Icon from './Icon/Icon';
 export * from './Toggle/Toggle';
 export * from './ToggleGroup/ToggleGroup';
 export * from './DragAndDrop/DragAndDrop';
+export * from './HoverCard/HoverCard';
 export * from './Alert/Alert/Alert.props';
 export * from './AspectRatio/AspectRatio/AspectRatio.props';
 export * from './Avatar/Avatar/Avatar.props';
@@ -60,3 +62,4 @@ export * from './Tabs/Tabs/Tabs.props';
 export * from './Text/Text/Text.props';
 export * from './Toggle/Toggle/Toggle.props';
 export * from './ToggleGroup/ToggleGroup/ToggleGroup.props';
+export * from './HoverCard/HoverCard/HoverCard.props';

package/dist/pages/hoverCard.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HoverCardPage: () => React.JSX.Element;
+export default HoverCardPage;

package/dist/pages/slider.page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const LinkPage: () => React.JSX.Element;
+export default LinkPage;