@venkat91/ark-ui-components/dist/index.d.ts

React component library built on Ark UI with TypeScript and Panda CSS

import * as React from 'react';

// Common UI Types
export type Variant = 'primary' | 'secondary' | 'danger';
export type Size = 'sm' | 'md' | 'lg';

// Button Types
export type ButtonVariant = Variant;
export type ButtonSize = Size;

export interface CustomButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

// Dialog Types
export interface CustomDialogProps {
  trigger?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  content?: React.ReactNode;
  rootProps?: Record<string, any>;
  triggerProps?: Record<string, any>;
  backdropProps?: Record<string, any>;
  positionerProps?: Record<string, any>;
  contentProps?: Record<string, any>;
  titleProps?: Record<string, any>;
  descriptionProps?: Record<string, any>;
  closeTriggerProps?: Record<string, any>;
}

// Tab Types
export interface TabItem {
  label: React.ReactNode;
  value: string;
  content: React.ReactNode;
  triggerProps?: Record<string, any>;
}

export interface CustomTabProps {
  items: TabItem[];
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  rootProps?: Record<string, any>;
  listProps?: Record<string, any>;
}

// Slider Types
export interface CustomSliderProps {
  label?: React.ReactNode;
  min?: number;
  max?: number;
  step?: number;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  rootProps?: Record<string, any>;
  controlProps?: Record<string, any>;
  trackProps?: Record<string, any>;
  rangeProps?: Record<string, any>;
  thumbProps?: Record<string, any>;
  showValue?: boolean;
  className?: string;
}

// Popover Types
export interface CustomPopoverProps {
  trigger?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  content?: React.ReactNode;
  rootProps?: Record<string, any>;
  triggerProps?: Record<string, any>;
  contentProps?: Record<string, any>;
  positionerProps?: Record<string, any>;
  indicatorProps?: Record<string, any>;
  arrowProps?: Record<string, any>;
}

// Storybook Common Types
export type StoryPlaygroundArgs<T> = T & {
  // Common args that all components might have in stories
};

// Utility type for story component props
export type StoryComponentProps<T> = T & {
  // Any additional props needed for stories
};

// Common style variants
export declare const VARIANT_STYLES: Record<ButtonVariant, string>;
export declare const SIZE_STYLES: Record<ButtonSize, string>;

// Export all component props as a union for convenience
export type AllComponentProps = 
  | CustomButtonProps 
  | CustomDialogProps 
  | CustomTabProps 
  | CustomSliderProps 
  | CustomPopoverProps;

// Component exports
export declare const CustomButton: React.FC<CustomButtonProps>;
export declare const CustomDialog: React.FC<CustomDialogProps>;
export declare const CustomTab: React.FC<CustomTabProps>;
export declare const CustomSlider: React.FC<CustomSliderProps>;
export declare const CustomPopover: React.FC<CustomPopoverProps>;

// Styled system exports
export declare const css: (...args: any[]) => string;
export declare const cx: (...args: any[]) => string;

// Library metadata
export declare const LIBRARY_VERSION: string;
export declare const LIBRARY_NAME: string;