@noxickon/onyx 2.0.3 → 3.0.0

package/dist/ui/Tabs/src/Tabs.types.d.ts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface OxTabsProps extends ComponentPropsWithRef<'div'> {
+    children: ReactNode;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
+    variant?: 'bordered' | 'pills';
+}
+export interface OxTabsListProps extends ComponentPropsWithRef<'div'> {
+    children: ReactNode;
+}
+export interface OxTabsTriggerProps extends ComponentPropsWithRef<'button'> {
+    children: ReactNode;
+    value: string;
+}
+export interface OxTabsContentProps extends ComponentPropsWithRef<'div'> {
+    children: ReactNode;
+    value: string;
+}

package/dist/ui/Tabs/src/TabsContent.d.ts

@@ -0,0 +1,2 @@
+import { OxTabsContentProps } from './Tabs.types';
+export declare const OxTabsContent: ({ children, className, value, ...domProps }: OxTabsContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/Tabs/src/TabsList.d.ts

@@ -0,0 +1,2 @@
+import { OxTabsListProps } from './Tabs.types';
+export declare const OxTabsList: ({ children, className, ...domProps }: OxTabsListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Tabs/src/TabsTrigger.d.ts

@@ -0,0 +1,2 @@
+import { OxTabsTriggerProps } from './Tabs.types';
+export declare const OxTabsTrigger: ({ children, className, disabled, value, ...domProps }: OxTabsTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Tabs/src/context/TabContext.d.ts

@@ -0,0 +1,2 @@
+import { OxTabsContextValue } from './TabContext.types';
+export declare const OxTabsContext: import('react').Context<OxTabsContextValue | null>;

package/dist/ui/Tabs/src/context/TabContext.types.d.ts

@@ -0,0 +1,5 @@
+export interface OxTabsContextValue {
+    onValueChange: (value: string) => void;
+    value: string;
+    variant: 'bordered' | 'pills';
+}

package/dist/ui/Tabs/src/context/useTabContext.d.ts

@@ -0,0 +1 @@
+export declare const useOxTabsContext: () => import('./TabContext.types').OxTabsContextValue;

package/dist/ui/Tabs/src/tabs.styles.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tabsListVariants: (props?: ({
+    variant?: "bordered" | "pills" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tabsTriggerVariants: (props?: ({
+    variant?: "bordered" | "pills" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TabsListVariants = VariantProps<typeof tabsListVariants>;
+export type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>;

package/dist/ui/Tabs/test/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/Tag/Tag.stories.d.ts

@@ -0,0 +1,34 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ children, className, color, ...domProps }: import('..').OxTagProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: {
+                disable: true;
+            };
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: ("purple" | "lime" | "red" | "yellow" | "green" | "blue" | "indigo" | "pink" | "amber" | "emerald" | "teal" | "cyan" | "sky" | "violet" | "fuchsia" | "orange" | "rose" | "gray" | "info" | "success" | "warning" | "destructive" | "primary" | "accent" | "default")[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Colors: Story;
+export declare const WithIcons: Story;
+export declare const ContextualUsage: Story;
+export declare const CustomStyling: Story;

package/dist/ui/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './src/Tag.types';
+export { OxTag } from './src/Tag';

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

@@ -0,0 +1,2 @@
+import { OxTagProps } from './Tag.types';
+export declare const OxTag: ({ children, className, color, ...domProps }: OxTagProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Tag/src/Tag.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ColorStyleName } from '../../../_internal/styles';
+export interface OxTagProps extends ComponentPropsWithRef<'span'> {
+    children: ReactNode;
+    color?: ColorStyleName;
+}

package/dist/ui/Tag/test/Tag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/ThemeSwitcher/ThemeSwitcher.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ className, onThemeChange, size, theme: controlledTheme, ...domProps }: import('..').OxThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        theme: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        onThemeChange: {
+            control: false;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const Uncontrolled: Story;

package/dist/ui/ThemeSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+export { OxThemeSwitcher } from './src/ThemeSwitcher';
+export type * from './src/ThemeSwitcher.types';

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

@@ -0,0 +1,2 @@
+import { OxThemeSwitcherProps } from './ThemeSwitcher.types';
+export declare const OxThemeSwitcher: ({ className, onThemeChange, size, theme: controlledTheme, ...domProps }: OxThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/ThemeSwitcher/src/ThemeSwitcher.types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef } from 'react';
+import { Theme } from '../../../hooks/useTheme';
+export type ThemeSwitcherSize = 'sm' | 'md' | 'lg';
+export interface OxThemeSwitcherProps extends Omit<ComponentPropsWithRef<'button'>, 'onChange'> {
+    onThemeChange?: (theme: Theme) => void;
+    size?: ThemeSwitcherSize;
+    theme?: Theme;
+}

package/dist/ui/ThemeSwitcher/test/ThemeSwitcher.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { OxTimeline } from '..';
+declare const meta: Meta<typeof OxTimeline>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const UserJourney: Story;
+export declare const FlexibleContent: Story;
+export declare const ColorVariants: Story;
+export declare const MinimalContent: Story;

package/dist/ui/Timeline/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './src/Timeline.types';
+export declare const OxTimeline: (({ children, className, ...domProps }: import('.').OxTimelineProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ align, children, className, color, description, icon, label, showSeparator, timestamp, ...domProps }: import('.').OxTimelineItemProps) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,2 @@
+import { OxTimelineProps } from './Timeline.types';
+export declare const OxTimeline: ({ children, className, ...domProps }: OxTimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Timeline/src/Timeline.types.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { ColorStyleName } from '../../../_internal/styles';
+export type OxTimelineAlign = 'left' | 'right';
+export interface OxTimelineProps extends ComponentPropsWithRef<'ol'> {
+    children: ReactNode;
+}
+export interface OxTimelineItemProps extends ComponentPropsWithRef<'li'> {
+    align?: OxTimelineAlign;
+    color?: ColorStyleName;
+    description?: string;
+    icon?: LucideIcon;
+    label: string;
+    showSeparator?: boolean;
+    timestamp?: string;
+}

package/dist/ui/Timeline/src/TimelineItem.d.ts

@@ -0,0 +1,2 @@
+import { OxTimelineItemProps } from './Timeline.types';
+export declare const OxTimelineItem: ({ align, children, className, color, description, icon, label, showSeparator, timestamp, ...domProps }: OxTimelineItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Timeline/test/Timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/Toast/Toast.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { OxToastProvider } from '..';
+declare const meta: Meta<typeof OxToastProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const BasicToasts: Story;
+export declare const WithDescriptions: Story;
+export declare const Customization: Story;
+export declare const Positioning: Story;
+export declare const Stacking: Story;
+export declare const RealWorldExamples: Story;

package/dist/ui/Toast/index.d.ts

@@ -0,0 +1,5 @@
+export type * from './src/Toast.types';
+export type * from './src/context/ToastContext.types';
+export { OxToastProvider } from './src/context/ToastProvider';
+export { useOxToast } from './src/context/useToast';
+export { OxToast } from './src/Toast';

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

@@ -0,0 +1,2 @@
+import { OxToastProps } from './Toast.types';
+export declare const OxToast: ({ align, onRemove, position, toasts }: OxToastProps) => import('react').ReactPortal;

package/dist/ui/Toast/src/Toast.types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { ColorStyleName, StatusType } from '../../../_internal/styles';
+export type OxToastAlign = 'left' | 'center' | 'right';
+export type OxToastPosition = 'top' | 'bottom';
+export interface OxToastData {
+    color?: ColorStyleName;
+    customContent?: ReactNode;
+    description?: string;
+    duration?: number;
+    icon?: LucideIcon;
+    id: string;
+    isRemoving?: boolean;
+    path?: string;
+    title: string;
+    type: StatusType;
+}
+export interface OxToastProps {
+    align: OxToastAlign;
+    onRemove: (id: string) => void;
+    position: OxToastPosition;
+    toasts: OxToastData[];
+}
+export interface OxToastItemProps {
+    index: number;
+    onRemove: (id: string) => void;
+    position: OxToastPosition;
+    toast: OxToastData;
+}

package/dist/ui/Toast/src/ToastItem.d.ts

@@ -0,0 +1,2 @@
+import { OxToastItemProps } from './Toast.types';
+export declare const OxToastItem: ({ index, onRemove, position, toast }: OxToastItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toast/src/context/ToastContext.d.ts

@@ -0,0 +1,2 @@
+import { OxToastContextApi } from './ToastContext.types';
+export declare const OxToastContext: import('react').Context<OxToastContextApi | null>;

package/dist/ui/Toast/src/context/ToastContext.types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { ColorStyleName } from '../../../../_internal/styles';
+import { OxToastAlign, OxToastPosition } from '../../..';
+export interface OxToastOptions {
+    color?: ColorStyleName;
+    description?: string;
+    duration?: number;
+    icon?: LucideIcon;
+    path?: string;
+}
+export interface OxToastContextApi {
+    (title: string, options?: OxToastOptions): string;
+    custom: (content: ReactNode, options?: {
+        duration?: number;
+    }) => string;
+    destructive: (title: string, options?: OxToastOptions) => string;
+    dismiss: (id?: string) => void;
+    info: (title: string, options?: OxToastOptions) => string;
+    success: (title: string, options?: OxToastOptions) => string;
+    warning: (title: string, options?: OxToastOptions) => string;
+}
+export interface OxToastProviderProps {
+    align?: OxToastAlign;
+    children: ReactNode;
+    maxToasts?: number;
+    position?: OxToastPosition;
+}

package/dist/ui/Toast/src/context/ToastProvider.d.ts

@@ -0,0 +1,2 @@
+import { OxToastProviderProps } from './ToastContext.types';
+export declare const OxToastProvider: ({ align, children, maxToasts, position, }: OxToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toast/src/context/useToast.d.ts

@@ -0,0 +1,2 @@
+import { OxToastContextApi } from './ToastContext.types';
+export declare const useOxToast: () => OxToastContextApi;

package/dist/ui/Toast/test/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,53 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: (({ children, className, disabled, id: propertyId, onPressedChange, pressed, size, value, ...domProps }: import('..').OxToggleProps) => import("react/jsx-runtime").JSX.Element) & {
+        Group: ({ children, className, disabled, name, onValueChange, size, type, value, ...domProps }: import('..').OxToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    subcomponents: {
+        'OxToggle.Group': React.ComponentType<unknown>;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        children: {
+            control: {
+                disable: true;
+            };
+            description: string;
+        };
+        pressed: {
+            control: "boolean";
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        onPressedChange: {
+            control: false;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Basic: Story;
+export declare const SingleSelection: Story;
+export declare const MultipleSelection: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const Toolbar: Story;

package/dist/ui/Toggle/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './src/Toggle.types';
+export declare const OxToggle: (({ children, className, disabled, id: propertyId, onPressedChange, pressed, size, value, ...domProps }: import('.').OxToggleProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ children, className, disabled, name, onValueChange, size, type, value, ...domProps }: import('.').OxToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/ui/Toggle/src/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { OxToggleProps } from './Toggle.types';
+export declare const OxToggle: ({ children, className, disabled, id: propertyId, onPressedChange, pressed, size, value, ...domProps }: OxToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toggle/src/Toggle.types.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface OxToggleProps extends Omit<ComponentPropsWithRef<'button'>, 'onChange'> {
+    children?: ReactNode;
+    onPressedChange?: (pressed: boolean) => void;
+    pressed?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    value?: string;
+}
+export interface OxToggleGroupSingleProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    children: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    onValueChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'single';
+    value?: string;
+}
+export interface OxToggleGroupMultipleProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange'> {
+    children: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    onValueChange?: (value: string[]) => void;
+    size?: 'sm' | 'md' | 'lg';
+    type: 'multiple';
+    value?: string[];
+}
+export type OxToggleGroupProps = OxToggleGroupSingleProps | OxToggleGroupMultipleProps;
+export type OxToggleValue = string | string[];

package/dist/ui/Toggle/src/ToggleGroup.d.ts

@@ -0,0 +1,2 @@
+import { OxToggleGroupProps } from './Toggle.types';
+export declare const OxToggleGroup: ({ children, className, disabled, name, onValueChange, size, type, value, ...domProps }: OxToggleGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Toggle/src/context/ToggleGroupContext.d.ts

@@ -0,0 +1,2 @@
+import { ToggleGroupContextValue } from './ToggleGroupContext.types';
+export declare const ToggleGroupContext: import('react').Context<ToggleGroupContextValue | null>;

package/dist/ui/Toggle/src/context/ToggleGroupContext.types.d.ts

@@ -0,0 +1,8 @@
+export interface ToggleGroupContextValue {
+    disabled?: boolean;
+    name?: string;
+    onToggle?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    type?: 'single' | 'multiple';
+    value?: string | string[];
+}

package/dist/ui/Toggle/src/context/useToggleGroup.d.ts

@@ -0,0 +1 @@
+export declare const useToggleGroup: () => import('./ToggleGroupContext.types').ToggleGroupContextValue | null;

package/dist/ui/Toggle/test/Toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { OxTooltip } from '..';
+declare const meta: Meta<typeof OxTooltip>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Positions: Story;
+export declare const Triggers: Story;
+export declare const SkipDelay: Story;

package/dist/ui/Tooltip/index.d.ts

@@ -0,0 +1,5 @@
+export type * from './src/Tooltip.types';
+export type * from './src/context/TooltipContext.types';
+export { OxTooltip } from './src/Tooltip';
+export { OxTooltipProvider } from './src/TooltipProvider';
+export { useOxTooltipContext } from './src/context/useOxTooltipContext';

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

@@ -0,0 +1,2 @@
+import { OxTooltipProps } from './Tooltip.types';
+export declare const OxTooltip: ({ align, children, className, content, disabled, hoverDelay, interactive, position, trigger, }: OxTooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Tooltip/src/Tooltip.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { OxPopperAlign, OxPopperSide } from '../../Popper';
+export type OxTooltipTriggerMode = 'hover' | 'click' | 'focus';
+export interface OxTooltipProps {
+    align?: OxPopperAlign;
+    children: ReactNode;
+    className?: string;
+    content: ReactNode;
+    disabled?: boolean;
+    hoverDelay?: number;
+    interactive?: boolean;
+    position?: OxPopperSide;
+    trigger?: OxTooltipTriggerMode;
+}

package/dist/ui/Tooltip/src/TooltipProvider.d.ts

@@ -0,0 +1,2 @@
+import { OxTooltipProviderProps } from './context/TooltipContext.types';
+export declare const OxTooltipProvider: ({ children, skipDelayDuration, }: OxTooltipProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Tooltip/src/context/TooltipContext.d.ts

@@ -0,0 +1,2 @@
+import { TooltipContextValue } from './TooltipContext.types';
+export declare const TooltipContext: import('react').Context<TooltipContextValue | null>;

package/dist/ui/Tooltip/src/context/TooltipContext.types.d.ts

@@ -0,0 +1,11 @@
+export interface TooltipContextValue {
+    isTooltipOpen: boolean;
+    onTooltipClose: () => void;
+    onTooltipOpen: () => void;
+    shouldSkipDelay: () => boolean;
+    skipDelayDuration: number;
+}
+export interface OxTooltipProviderProps {
+    children: React.ReactNode;
+    skipDelayDuration?: number;
+}

package/dist/ui/Tooltip/src/context/useOxTooltipContext.d.ts

@@ -0,0 +1,2 @@
+import { TooltipContextValue } from './TooltipContext.types';
+export declare const useOxTooltipContext: () => TooltipContextValue | null;

package/dist/ui/Tooltip/test/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/index.d.ts

@@ -0,0 +1,43 @@
+export * from './Accordion';
+export * from './Alert';
+export * from './AspectRatio';
+export * from './Avatar';
+export * from './Badge';
+export * from './Tag';
+export * from './Breadcrumb';
+export * from './Button';
+export * from './Calendar';
+export * from './Card';
+export * from './DescriptionList';
+export * from './Dnd';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './EndlessList';
+export * from './HoverCard';
+export * from './Icon';
+export * from './Image';
+export * from './JsonField';
+export * from './Kanban';
+export * from './Link';
+export * from './Masonry';
+export * from './Dialog';
+export * from './Notifications';
+export * from './PageOutline';
+export * from './Pagination';
+export * from './Popover';
+export * from './Popper';
+export * from './Progress';
+export * from './Separator';
+export * from './Skeleton';
+export * from './Slider';
+export * from './SortableList';
+export * from './Spinner';
+export * from './StatusDisplay';
+export * from './Stepper';
+export * from './Table';
+export * from './Tabs';
+export * from './ThemeSwitcher';
+export * from './Timeline';
+export * from './Toast';
+export * from './Toggle';
+export * from './Tooltip';