@once-ui-system/core 1.7.2 → 1.7.4

package/dist/src/components/SplitView.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Card, Column } from '@once-ui-system/core';
+import { useState, useEffect, useRef } from 'react';
+function useResizeHandle(containerRef, direction) {
+    const [splitRatio, setSplitRatio] = useState(0.3);
+    const [isDragging, setIsDragging] = useState(false);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isDragging || !containerRef.current)
+                return;
+            const container = containerRef.current;
+            const rect = container.getBoundingClientRect();
+            let newRatio;
+            if (direction === 'row') {
+                // Horizontal split: calculate from left
+                newRatio = (e.clientX - rect.left) / rect.width;
+            }
+            else {
+                // Vertical split: calculate from top
+                newRatio = (e.clientY - rect.top) / rect.height;
+            }
+            setSplitRatio(Math.max(0.2, Math.min(0.8, newRatio)));
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = direction === 'row' ? 'col-resize' : 'row-resize';
+            document.body.style.userSelect = 'none';
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isDragging, direction]);
+    return { splitRatio, isDragging, setIsDragging };
+}
+function SplitView({ leftPanel, rightPanel, defaultSplit = 0.3, minSplit = 0.2, maxSplit = 0.8, ...flex }) {
+    const containerRef = useRef(null);
+    const [direction, setDirection] = useState('row');
+    const { splitRatio, isDragging, setIsDragging } = useResizeHandle(containerRef, direction);
+    // Detect direction from flex props or responsive breakpoints
+    useEffect(() => {
+        const updateDirection = () => {
+            if (!containerRef.current)
+                return;
+            const computedStyle = window.getComputedStyle(containerRef.current);
+            const flexDir = computedStyle.flexDirection;
+            setDirection(flexDir === 'column' ? 'column' : 'row');
+        };
+        updateDirection();
+        window.addEventListener('resize', updateDirection);
+        return () => window.removeEventListener('resize', updateDirection);
+    }, []);
+    const isHorizontal = direction === 'row';
+    const splitPercentage = `${splitRatio * 100}%`;
+    return (_jsxs(Row, { ref: containerRef, fill: true, ...flex, children: [_jsx(Column, { fill: true, style: {
+                    [isHorizontal ? 'width' : 'height']: splitPercentage,
+                    [isHorizontal ? 'minWidth' : 'minHeight']: 0,
+                    overflow: 'auto',
+                }, children: leftPanel }), _jsx(Row, { fillHeight: isHorizontal, fillWidth: !isHorizontal, minWidth: isHorizontal ? "12" : undefined, minHeight: !isHorizontal ? "12" : undefined, paddingX: isHorizontal ? "8" : undefined, paddingY: !isHorizontal ? "8" : undefined, center: true, onMouseDown: () => setIsDragging(true), style: {
+                    cursor: isHorizontal ? 'col-resize' : 'row-resize',
+                    userSelect: 'none',
+                }, children: _jsx(Row, { fillWidth: isHorizontal, fillHeight: !isHorizontal, height: isHorizontal ? 8 : undefined, width: !isHorizontal ? 8 : undefined, children: _jsx(Card, { fill: true, background: isDragging ? "neutral-strong" : "neutral-weak", border: "neutral-alpha-weak", radius: "full", style: {
+                            cursor: isHorizontal ? 'col-resize' : 'row-resize',
+                            transition: 'background 0.2s ease',
+                        } }) }) }), _jsx(Column, { fill: true, style: {
+                    [isHorizontal ? 'width' : 'height']: `${(1 - splitRatio) * 100}%`,
+                    [isHorizontal ? 'minWidth' : 'minHeight']: 0,
+                    overflow: 'auto',
+                }, children: rightPanel })] }));
+}
+SplitView.displayName = "SplitView";
+export { SplitView };

package/dist/src/components/StatusIndicator.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Flex } from ".";
+interface StatusIndicatorProps extends React.ComponentProps<typeof Flex> {
+    size?: "s" | "m" | "l";
+    color: "blue" | "indigo" | "violet" | "magenta" | "pink" | "red" | "orange" | "yellow" | "moss" | "green" | "emerald" | "aqua" | "cyan" | "gray";
+    ariaLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const StatusIndicator: React.ForwardRefExoticComponent<Omit<StatusIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatusIndicator };

package/dist/src/components/StyleOverlay.d.ts

@@ -0,0 +1,9 @@
+import { IconButton, Flex } from ".";
+import { DisplayProps } from "../interfaces";
+interface StyleOverlayProps extends React.ComponentProps<typeof Flex> {
+    iconButtonProps?: Partial<React.ComponentProps<typeof IconButton>>;
+    children: React.ReactNode;
+    zIndex?: DisplayProps["zIndex"];
+}
+declare const StyleOverlay: import("react").ForwardRefExoticComponent<Omit<StyleOverlayProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { StyleOverlay };

package/dist/src/components/StylePanel.d.ts

@@ -0,0 +1,7 @@
+import { Flex } from ".";
+interface StylePanelProps extends React.ComponentProps<typeof Flex> {
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const StylePanel: import("react").ForwardRefExoticComponent<Omit<StylePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { StylePanel };

package/dist/src/components/Swiper.d.ts

@@ -0,0 +1,16 @@
+import { Flex } from ".";
+interface SwiperItem {
+    slide: string | React.ReactNode;
+    alt?: string;
+}
+interface SwiperProps extends React.ComponentProps<typeof Flex> {
+    items: SwiperItem[];
+    controls?: boolean | "contained";
+    priority?: boolean;
+    fill?: boolean;
+    aspectRatio?: string;
+    sizes?: string;
+    indicator?: boolean;
+}
+declare const Swiper: React.FC<SwiperProps>;
+export { Swiper };

package/dist/src/components/Switch.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { InteractiveDetailsProps } from ".";
+interface SwitchProps extends Omit<InteractiveDetailsProps, "onClick">, React.InputHTMLAttributes<HTMLInputElement> {
+    style?: React.CSSProperties;
+    className?: string;
+    isChecked: boolean;
+    loading?: boolean;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    reverse?: boolean;
+    ariaLabel?: string;
+    onToggle: () => void;
+}
+declare const Switch: React.FC<SwitchProps>;
+export { Switch };

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

@@ -0,0 +1,15 @@
+import { Flex } from ".";
+import { ReactNode } from "react";
+type TableProps = React.ComponentProps<typeof Flex> & {
+    data: {
+        headers: {
+            content: ReactNode;
+            key: string;
+            sortable?: boolean;
+        }[];
+        rows: ReactNode[][];
+    };
+    onRowClick?: (rowIndex: number) => void;
+};
+declare function Table({ data, onRowClick, ...flex }: TableProps): import("react/jsx-runtime").JSX.Element;
+export { Table };

package/dist/src/components/Tag.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+import { IconName } from "../icons";
+import { ColorScheme } from "@/types";
+interface TagProps extends React.ComponentProps<typeof Flex> {
+    variant?: ColorScheme | "gradient";
+    size?: "s" | "m" | "l";
+    label?: string;
+    prefixIcon?: IconName;
+    suffixIcon?: IconName;
+    children?: ReactNode;
+}
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tag };
+export type { TagProps };

package/dist/src/components/TagInput.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from ".";
+interface TagInputProps extends Omit<InputProps, "onChange" | "value"> {
+    value: string[];
+    onChange: (value: string[]) => void;
+}
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { TagInput };
+export type { TagInputProps };

package/dist/src/components/Textarea.d.ts

@@ -0,0 +1,23 @@
+import React, { TextareaHTMLAttributes, ReactNode } from "react";
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    lines?: number | "auto";
+    height?: "xs" | "s" | "m" | "l" | "xl";
+    error?: boolean;
+    errorMessage?: ReactNode;
+    description?: ReactNode;
+    radius?: "none" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    className?: string;
+    hasPrefix?: ReactNode;
+    hasSuffix?: ReactNode;
+    variant?: "default" | "ghost";
+    characterCount?: boolean;
+    resize?: "horizontal" | "vertical" | "both" | "none";
+    validate?: (value: ReactNode) => ReactNode | null;
+    disabled?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };
+export type { TextareaProps };

package/dist/src/components/ThemeSwitcher.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ThemeSwitcher: React.ForwardRefExoticComponent<Omit<Omit<import("./Row").RowProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ThemeSwitcher };

package/dist/src/components/TiltFx.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Flex } from ".";
+interface TiltFxProps extends React.ComponentProps<typeof Flex> {
+    children: React.ReactNode;
+    intensity?: number;
+    reducedMotion?: boolean | "auto";
+}
+declare const TiltFx: React.FC<TiltFxProps>;
+export { TiltFx };

package/dist/src/components/Timeline.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex } from ".";
+import { TShirtSizes } from "@/types";
+export interface TimelineItem {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    state?: "default" | "active" | "success" | "danger";
+    marker?: React.ReactNode;
+    children?: React.ReactNode;
+}
+interface TimelineProps extends Omit<React.ComponentProps<typeof Flex>, "children"> {
+    items: TimelineItem[];
+    alignment?: "left" | "right";
+    size?: TShirtSizes;
+}
+declare const Timeline: React.FC<TimelineProps>;
+export { Timeline };

package/dist/src/components/Toast.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ToastProps {
+    className?: string;
+    variant: "success" | "danger";
+    icon?: boolean;
+    onClose?: () => void;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export { Toast };

package/dist/src/components/Toaster.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface ToasterProps {
+    toasts: {
+        id: string;
+        variant: "success" | "danger";
+        message: React.ReactNode;
+        action?: React.ReactNode;
+    }[];
+    removeToast: (id: string) => void;
+}
+declare const Toaster: React.FC<ToasterProps>;
+export { Toaster };

package/dist/src/components/ToggleButton.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from "react";
+import { IconName } from "../icons";
+interface CommonProps {
+    label?: ReactNode;
+    selected?: boolean;
+    variant?: "ghost" | "outline";
+    size?: "xs" | "s" | "m" | "l" | "xl";
+    radius?: "none" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    rounded?: boolean;
+    horizontal?: "start" | "center" | "end" | "between";
+    fillWidth?: boolean;
+    weight?: "default" | "strong";
+    truncate?: boolean;
+    disabled?: boolean;
+    prefixIcon?: IconName;
+    suffixIcon?: IconName;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    href?: string;
+}
+export type ToggleButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const ToggleButton: React.ForwardRefExoticComponent<CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLElement>>;
+export { ToggleButton };

package/dist/src/components/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { Row } from ".";
+import { IconName } from "../icons";
+interface TooltipProps extends React.ComponentProps<typeof Row> {
+    label: ReactNode;
+    prefixIcon?: IconName;
+    suffixIcon?: IconName;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip };

package/dist/src/components/TypeFx.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Text } from ".";
+export interface TypeFxProps extends Omit<React.ComponentProps<typeof Text>, 'children'> {
+    words: string | string[];
+    speed?: number;
+    delay?: number;
+    hold?: number;
+    trigger?: "instant" | "custom";
+    onTrigger?: (triggerFn: () => void) => void;
+    loop?: boolean;
+    children?: React.ReactNode;
+}
+declare const TypeFx: React.FC<TypeFxProps>;
+export { TypeFx };

package/dist/src/components/User.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { TagProps, AvatarProps } from ".";
+interface UserProps {
+    name?: string;
+    children?: React.ReactNode;
+    subline?: React.ReactNode;
+    tag?: string;
+    tagProps?: TagProps;
+    loading?: boolean;
+    avatarProps?: AvatarProps;
+    className?: string;
+}
+declare const User: React.ForwardRefExoticComponent<UserProps & React.RefAttributes<HTMLDivElement>>;
+export { User };
+export type { UserProps };

package/dist/src/components/UserMenu.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { UserProps, DropdownWrapperProps } from ".";
+import { Placement } from "@floating-ui/react-dom";
+interface UserMenuProps extends UserProps, Pick<DropdownWrapperProps, "minHeight" | "minWidth" | "maxWidth"> {
+    selected?: boolean;
+    placement?: Placement;
+    dropdown?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const UserMenu: React.FC<UserMenuProps>;
+export { UserMenu };

package/dist/src/components/WeatherFx.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Flex } from ".";
+type WeatherType = "rain" | "snow" | "leaves" | "lightning";
+interface WeatherFxProps extends React.ComponentProps<typeof Flex> {
+    type?: WeatherType;
+    speed?: number;
+    colors?: string[];
+    intensity?: number;
+    angle?: number;
+    duration?: number;
+    trigger?: "mount" | "hover" | "click" | "manual";
+    active?: boolean;
+    reducedMotion?: boolean | "auto";
+    children?: React.ReactNode;
+}
+declare const WeatherFx: React.ForwardRefExoticComponent<Omit<WeatherFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { WeatherFx };

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

@@ -0,0 +1,120 @@
+export * from "./Accordion";
+export * from "./AccordionGroup";
+export * from "./Animation";
+export * from "./Arrow";
+export * from "./ArrowNavigationContext";
+export * from "./AutoScroll";
+export * from "./Avatar";
+export * from "./AvatarGroup";
+export * from "./Badge";
+export * from "./BlobFx";
+export * from "./Banner";
+export * from "./Background";
+export * from "./BlockQuote";
+export * from "./Button";
+export * from "./MatrixFx";
+export * from "./WeatherFx";
+export * from "./Carousel";
+export * from "./Swiper";
+export * from "./Card";
+export * from "./CursorCard";
+export * from "./Cursor";
+export * from "./CountFx";
+export * from "./CountdownFx";
+export * from "./Column";
+export * from "./Checkbox";
+export * from "./Chip";
+export * from "./ColorInput";
+export * from "./CompareImage";
+export * from "./ContextMenu";
+export * from "./DateInput";
+export * from "./DatePicker";
+export * from "./DateRangeInput";
+export * from "./DateRangePicker";
+export * from "./Dialog";
+export * from "./Dropdown";
+export * from "./DropdownWrapper";
+export * from "./ElementType";
+export * from "./EmojiPicker";
+export * from "./EmojiPickerDropdown";
+export * from "./Fade";
+export * from "./Feedback";
+export * from "./ServerFlex";
+export * from "./ClientFlex";
+export * from "./Flex";
+export * from "./FlipFx";
+export * from "./FocusTrap";
+export * from "./GlitchFx";
+export * from "./ServerGrid";
+export * from "./ClientGrid";
+export * from "./Grid";
+export * from "./Heading";
+export * from "./HoloFx";
+export * from "./Hover";
+export * from "./HoverCard";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./InfiniteScroll";
+export * from "./InlineCode";
+export * from "./Input";
+export * from "./InteractiveDetails";
+export * from "./Kbd";
+export * from "./LetterFx";
+export * from "./Line";
+export * from "./List";
+export * from "./ListItem";
+export * from "./Logo";
+export * from "./LogoCloud";
+export * from "./Mask";
+export * from "./MasonryGrid";
+export * from "./Media";
+export * from "./Modal";
+export * from "./NavIcon";
+export * from "./NumberInput";
+export * from "./OgCard";
+export * from "./Option";
+export * from "./OTPInput";
+export * from "./Particle";
+export * from "./PasswordInput";
+export * from "./ProgressBar";
+export * from "./Pulse";
+export * from "./RadioButton";
+export * from "./RevealFx";
+export * from "./Row";
+export * from "./Scroller";
+export * from "./ScrollContainer";
+export * from "./ScrollLock";
+export * from "./ScrollToTop";
+export * from "./SegmentedControl";
+export * from "./Select";
+export * from "./ServerFlex";
+export * from "./ServerGrid";
+export * from "./ShineFx";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./SmartLink";
+export * from "./Spinner";
+export * from "./SplitView";
+export * from "./StatusIndicator";
+export * from "./StylePanel";
+export * from "./StyleOverlay";
+export * from "./Switch";
+export * from "./Table";
+export * from "./Tag";
+export * from "./TagInput";
+export * from "./Text";
+export * from "./Textarea";
+export * from "./TiltFx";
+export * from "./Timeline";
+export * from "./Toast";
+export * from "./Toaster";
+export * from "./ToggleButton";
+export * from "./Tooltip";
+export * from "./TypeFx";
+export * from "./ThemeInit";
+export * from "./ThemeSwitcher";
+export * from "./User";
+export * from "./UserMenu";
+export * from "./Pulse";
+export * from "./CelebrationFx";
+export * from "./FadingLettersFx";

package/dist/src/contexts/DataThemeProvider.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { ChartMode, ChartVariant } from "../modules/data";
+interface ChartOptions {
+    variant: ChartVariant;
+    mode: ChartMode;
+    height: number;
+    axis: {
+        stroke: string;
+    };
+    tick: {
+        fill: string;
+        fontSize: number;
+        line: boolean;
+    };
+}
+interface DataThemeState extends ChartOptions {
+    setChartOptions: (options: Partial<ChartOptions>) => void;
+}
+interface DataThemeProviderProps extends Partial<ChartOptions> {
+    children: ReactNode;
+}
+declare const defaultChartOptions: ChartOptions;
+export declare function DataThemeProvider({ children, variant, mode, height, axis, tick, ...rest }: DataThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useDataTheme: () => DataThemeState;
+export { defaultChartOptions };

package/dist/src/contexts/ThemeProvider.d.ts

@@ -0,0 +1,48 @@
+import { Schemes } from "../types";
+export type Theme = "dark" | "light" | "system";
+export type NeutralColor = "sand" | "gray" | "slate";
+export type SolidType = "color" | "contrast" | "inverse";
+export type SolidStyle = "flat" | "plastic";
+export type BorderStyle = "rounded" | "playful" | "conservative";
+export type SurfaceStyle = "filled" | "translucent";
+export type TransitionStyle = "all" | "micro" | "macro" | "none";
+export type ScalingSize = "90" | "95" | "100" | "105" | "110";
+export type DataStyle = "categorical" | "divergent" | "sequential";
+interface StyleOptions {
+    theme: Theme;
+    neutral: NeutralColor | "custom";
+    brand: Schemes | "custom";
+    accent: Schemes | "custom";
+    solid: SolidType;
+    solidStyle: SolidStyle;
+    border: BorderStyle;
+    surface: SurfaceStyle;
+    transition: TransitionStyle;
+    scaling: ScalingSize;
+}
+type ThemeProviderState = {
+    theme: Theme;
+    resolvedTheme: "light" | "dark";
+    setTheme: (theme: Theme) => void;
+};
+type StyleProviderState = StyleOptions & {
+    setStyle: (style: Partial<StyleOptions>) => void;
+};
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    theme?: Theme;
+    neutral?: NeutralColor | "custom";
+    brand?: Schemes | "custom";
+    accent?: Schemes | "custom";
+    solid?: SolidType;
+    solidStyle?: SolidStyle;
+    border?: BorderStyle;
+    surface?: SurfaceStyle;
+    transition?: TransitionStyle;
+    scaling?: ScalingSize;
+};
+declare const defaultStyleOptions: StyleOptions;
+export declare function ThemeProvider({ children, theme: propTheme, neutral, brand, accent, solid, solidStyle, border, surface, transition, scaling, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+export declare const useStyle: () => StyleProviderState;
+export { defaultStyleOptions };

package/dist/src/contexts/ToastProvider.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from "react";
+interface Toast {
+    id: string;
+    variant: "success" | "danger";
+    message: ReactNode;
+    action?: ReactNode;
+}
+interface ToastContextProps {
+    toasts: Toast[];
+    addToast: (toast: Omit<Toast, "id">) => void;
+    removeToast: (id: string) => void;
+}
+export declare const useToast: () => ToastContextProps;
+declare const ToastProvider: React.FC<{
+    children: ReactNode;
+}>;
+export { ToastProvider };

package/dist/src/contexts/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./IconProvider";
+export * from "./ThemeProvider";
+export * from "./ToastProvider";
+export * from "./DataThemeProvider";
+export * from "./LayoutProvider";