droplinked-ui-kit 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,448 @@
+import { BoxProps } from '@chakra-ui/react';
+import { ButtonProps as ButtonProps_2 } from '@chakra-ui/react';
+import { ChangeEvent } from 'react';
+import { default as default_2 } from 'react';
+import { ElementType } from 'react';
+import { FlexProps } from '@chakra-ui/react';
+import { InputProps as InputProps_2 } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { SystemContext } from '@chakra-ui/react';
+import { TextareaProps } from '@chakra-ui/react';
+
+export declare function ActionMenu(props: ActionMenuProps): JSX.Element;
+
+export declare type ActionMenuItem = {
+    icon: ElementType;
+    title: string;
+    variant?: ActionMenuItemVariant;
+    onClick?: () => void;
+    hasBottomDivider?: boolean;
+};
+
+declare type ActionMenuItemVariant = 'default' | 'error' | 'disabled' | 'selected';
+
+declare type ActionMenuProps = {
+    items: ActionMenuItem[];
+    triggerIcon?: ElementType;
+    triggerAriaLabel?: string;
+    buttonVariant?: ButtonProps['variant'];
+    buttonProps?: Omit<ButtonProps, 'buttonType' | 'leftIcon' | 'children' | 'variant'>;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeOnSelect?: boolean;
+    menuWidth?: string | number;
+};
+
+export declare function ActionOverlay({ children, ...rest }: FlexProps): JSX.Element;
+
+declare type BaseProps = {
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    onClick?: () => void;
+};
+
+export declare function Button(props: ButtonProps): JSX.Element;
+
+declare interface ButtonProps extends Omit<ButtonProps_2, 'variant'> {
+    leftIcon?: ElementType;
+    rightIcon?: ElementType;
+    icon?: ElementType;
+    variant?: variants;
+    buttonType?: ButtonType;
+}
+
+declare type ButtonType = 'text' | 'icon';
+
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+
+declare interface CheckboxProps extends Omit<BoxProps, 'onChange'> {
+    id?: string;
+    label?: string;
+    subtitle?: string;
+    isRequired?: boolean;
+    requiredText?: string;
+    chipsLabel?: string;
+    isDisabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    icon?: ElementType;
+}
+
+export declare function CheckoutHeader(props: CheckoutHeaderProps): JSX.Element;
+
+declare interface CheckoutHeaderProps {
+    buttonLabel: string;
+    onClick?: () => void;
+    imageSrc: string;
+    imageAlt: string;
+}
+
+export declare function Chips(props: ChipsProps): JSX.Element;
+
+declare interface ChipsProps extends Omit<BoxProps, 'color' | 'direction'> {
+    label?: string;
+    showLeftIcon?: boolean;
+    showRightIcon?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    variant?: variants;
+    onClick?: () => void;
+}
+
+/**
+ * Corner Radius Options (from design system)
+ */
+export declare const cornerRadiusOptions: Record<RadiiOption, RadiiConfigs>;
+
+/**
+ * Create Chakra UI System from FullThemePalette
+ * This function enables dynamic theme updates for the Drag & Drop Designer
+ */
+export declare function createThemeSystem(palette?: FullThemePalette, typography?: TypographyConfigs, radiiOption?: RadiiOption): SystemContext;
+
+/**
+ * Default Light Theme Palette
+ */
+export declare const defaultLightTheme: FullThemePalette;
+
+/**
+ * Default Border Radius Configuration (Option 2)
+ */
+export declare const defaultRadii: RadiiConfigs;
+
+/**
+ * Default system instance
+ * Can be replaced with custom theme in Designer or Checkout
+ */
+export declare const defaultSystem: SystemContext;
+
+/**
+ * Default Typography Configuration
+ */
+export declare const defaultTypography: TypographyConfigs;
+
+export declare function Dropdown(props: DropdownProps): JSX.Element;
+
+declare interface DropdownProps {
+    triggerText?: string;
+    children?: ReactNode | ((helpers: DropdownRenderHelpers) => ReactNode);
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    leftIcon?: ElementType;
+    title?: string;
+    subtitle?: string;
+    secondaryText?: string;
+    required?: boolean;
+    chipsLabel?: string;
+    isDisabled?: boolean;
+    isError?: boolean;
+    isSuccess?: boolean;
+    message?: string;
+}
+
+declare interface DropdownRenderHelpers {
+    open: boolean;
+    close: () => void;
+}
+
+/**
+ * Central theme interface for UI-Kit
+ * Used across Drag & Drop Designer and Checkout projects
+ */
+export declare interface FullThemePalette {
+    isDarkTheme?: boolean;
+    themeName: string;
+    primary: {
+        main: string;
+        hover: string;
+        tint10: string;
+        tint20: string;
+    };
+    neutral: {
+        bgDark: string;
+        bgLight: string;
+        neutral10: string;
+        neutral30: string;
+        neutral50: string;
+    };
+    text: {
+        main: string;
+        inverse: string;
+        subtext: string;
+        disabled: string;
+    };
+    state: {
+        success: {
+            main: string;
+            tint10: string;
+            tint20: string;
+        };
+        error: {
+            main: string;
+            tint10: string;
+            tint20: string;
+        };
+        warning: {
+            main: string;
+            tint10: string;
+            tint20: string;
+        };
+        info: {
+            main: string;
+            tint10: string;
+            tint20: string;
+        };
+    };
+}
+
+export declare function IconContainer(props: IconContainerProps): JSX.Element;
+
+declare type IconContainerProps = {
+    type?: IconContainerType;
+    variant?: IconContainerVariant;
+    icon?: ElementType;
+    text?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+};
+
+declare type IconContainerType = 'icon' | 'text' | 'image';
+
+declare type IconContainerVariant = 'outlined' | 'muted' | 'secondary' | 'information' | 'success' | 'warning' | 'error' | 'disabled' | 'image';
+
+declare type IconListItemProps = BaseProps & {
+    type: 'icon';
+    leftIcon: ElementType;
+};
+
+export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface InputProps extends Omit<InputProps_2, 'title' | 'onChange' | 'variant' | 'isInvalid'> {
+    /** Label text */
+    title?: string;
+    /** Subtitle text displayed below label */
+    subtitle?: string;
+    /** Left icon element */
+    leftIcon?: ReactNode;
+    /** Right icon element */
+    rightIcon?: ReactNode;
+    /** The supporting message text */
+    supportingMessage?: string;
+    /** Right element to display outside the input */
+    rightElement?: ReactNode;
+    /** Secondary text next to the label (e.g. "(Required)") */
+    secondaryText?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Label text for the chips badge in the label row */
+    chipsLabel?: string;
+    /** Variant of the input */
+    variant?: variants;
+    /** Change handler */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Disabled state */
+    isDisabled?: boolean;
+}
+
+export declare function ListItem(props: ListItemProps): JSX.Element;
+
+declare type ListItemProps = TextListItemProps | IconListItemProps;
+
+export declare function Modal(props: ModalProps): JSX.Element;
+
+declare interface ModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback when modal open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Modal header content (TabBar, SearchBar, etc.) */
+    headerContent?: ReactNode;
+    /** Modal body content */
+    children: ReactNode;
+    /** Modal footer content (buttons, etc.) */
+    footerContent?: ReactNode;
+    /** Modal title */
+    title?: string;
+    /** Icon to display in header */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Whether to show close button */
+    showCloseButton?: boolean;
+    /** Whether to apply blur background to backdrop */
+    hasBlurBg?: boolean;
+    /** Modal size (desktop only) */
+    size?: 'full' | 'sm' | 'md' | 'lg' | 'xl';
+    minHeight?: string;
+    maxHeight?: string;
+}
+
+export declare function ProductCard(props: ProductCardProps): JSX.Element;
+
+declare interface ProductCardProps {
+    title: string;
+    price: number;
+    abbreviation: string;
+    sku: string[];
+    quantity: number;
+    url?: string;
+    thumbnail: string;
+    rightContent?: ReactNode;
+}
+
+export declare interface RadiiConfigs {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+
+export declare type RadiiOption = 'option1' | 'option2' | 'option3' | 'option4';
+
+export declare function SearchBar(props: SearchBarProps): JSX.Element;
+
+declare interface SearchBarProps extends Omit<BoxProps, 'onChange'> {
+    placeholder?: string;
+    variant?: SearchBarVariant;
+    value?: string;
+    defaultValue?: string;
+    onChange?: InputProps_2['onChange'];
+    showClear?: boolean;
+    isDisabled?: boolean;
+    isExpanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+
+declare type SearchBarVariant = 'maximized' | 'icon';
+
+export declare function SectionTitle(props: SectionTitleProps): JSX.Element;
+
+declare interface SectionTitleProps extends Omit<BoxProps, 'title' | 'color' | 'direction'> {
+    title?: string;
+    icon?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    showIcon?: boolean;
+}
+
+export declare function SelectionCard(props: SelectionCardProps): JSX.Element;
+
+declare type SelectionCardProps = {
+    title: string;
+    subtitle: ReactNode;
+    actionMenuItems: ActionMenuItem[];
+    actionMenuProps?: Omit<ActionMenuProps, 'items'>;
+    isSelected?: boolean;
+    onClick?: () => void;
+};
+
+export declare const SelectionTab: ({ label, icon, showIcon, isSelected, isDisabled, onClick, }: SelectionTabProps) => JSX.Element;
+
+declare interface SelectionTabProps {
+    label: string;
+    icon?: ElementType;
+    showIcon?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    onClick?: () => void;
+}
+
+export declare const TextArea: default_2.ForwardRefExoticComponent<TextAreaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
+
+declare interface TextAreaProps extends Omit<TextareaProps, 'title' | 'onChange' | 'variant' | 'isInvalid'> {
+    /** Label text */
+    title?: string;
+    /** Subtitle text displayed below label */
+    subtitle?: string;
+    /** The supporting message text */
+    supportingMessage?: string;
+    /** Secondary text next to the label (e.g. "(Required)") */
+    secondaryText?: string;
+    /** Whether the textarea is required */
+    required?: boolean;
+    /** Label text for the chips badge in the label row */
+    chipsLabel?: string;
+    /** Variant of the textarea */
+    variant?: variants;
+    /** Change handler */
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** Number of visible text rows */
+    rows?: number;
+}
+
+declare type TextListItemProps = BaseProps & {
+    type?: 'text';
+    label: string;
+    chipsLabel?: string;
+    leftIcon?: ElementType;
+    rightContent?: ReactNode;
+};
+
+export declare function Toast(props: ToastProps): JSX.Element;
+
+declare type ToastProps = {
+    variant?: ToastVariant;
+    title: string;
+    description: string;
+    secondaryTitle: string;
+    primaryTitle: string;
+    onSecondaryClick?: () => void;
+    onPrimaryClick?: () => void;
+    onClose?: () => void;
+};
+
+declare type ToastVariant = 'information' | 'success' | 'warning' | 'error';
+
+export declare interface TypographyConfigs {
+    fontFamily: string;
+    fontSizes?: {
+        h1?: string;
+        h2?: string;
+        h3?: string;
+        h4?: string;
+        h5?: string;
+        h6?: string;
+        subtitle?: string;
+        body1?: string;
+        body2?: string;
+        body3?: string;
+        caption?: string;
+    };
+}
+
+/**
+ * Theme Provider for UI-Kit
+ * Wraps Chakra UI and Next Themes
+ *
+ * @example
+ * // Use with default theme
+ * <UIKitProvider>
+ *   <App />
+ * </UIKitProvider>
+ *
+ * @example
+ * // Use with custom theme
+ * const customSystem = createThemeSystem(customPalette, customTypography, 'option3');
+ * <UIKitProvider system={customSystem}>
+ *   <App />
+ * </UIKitProvider>
+ */
+export declare function UIKitProvider({ children, system }: UIKitProviderProps): JSX.Element;
+
+declare interface UIKitProviderProps {
+    children: ReactNode;
+    system?: SystemContext;
+}
+
+declare type variants = 'primary' | 'outlined' | 'filled' | 'muted' | 'transparent' | 'information' | 'success' | 'warning' | 'error' | 'disabled';
+
+export { }

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "droplinked-ui-kit",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/droplinked-ui-kit.cjs",
+  "module": "./dist/droplinked-ui-kit.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/droplinked-ui-kit.js",
+      "require": "./dist/droplinked-ui-kit.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": "^3.30.0",
+    "@emotion/react": "^11.14.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/react": "^3.30.0",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@emotion/react": "^11.14.0",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-mcp": "^0.2.2",
+    "@storybook/addon-onboarding": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.3",
+    "globals": "^16.5.0",
+    "next-themes": "^0.4.6",
+    "playwright": "^1.58.1",
+    "prop-types": "^15.8.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.2.3",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.0.3",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "react-router-dom": "^7.12.0"
+  }
+}