@jordan-mace/chaser-design-system 1.2.7 → 1.2.8

package/src/components/Divider/Divider.tsx

@@ -7,14 +7,16 @@ import {
 } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type DividerOrientation = 'horizontal' | 'vertical';
 export type DividerSize = 'small' | 'medium' | 'large';
 
-export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
-  orientation?: DividerOrientation;
-  size?: DividerSize;
-}
+export type DividerProps = React.HTMLAttributes<HTMLHRElement> &
+  Sprinkles & {
+    orientation?: DividerOrientation;
+    size?: DividerSize;
+  };
 
 const Divider = ({
   orientation = 'horizontal',
@@ -27,7 +29,9 @@ const Divider = ({
       className={clsx(
         divider,
         dividerOrientations[orientation],
-        orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size],
+        orientation === 'vertical'
+          ? dividerVerticalSizes[size]
+          : dividerSizes[size],
         props.className,
       )}
       role="separator"

package/src/components/Drawer/Drawer.tsx

@@ -11,10 +11,25 @@ import {
   drawerFooter,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
 
+type DrawerPropsBase = React.HTMLAttributes<HTMLDivElement> & {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  position?: DrawerPosition;
+  size?: DrawerSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+};
+
+export type DrawerProps = DrawerPropsBase & Sprinkles;
+
 const sizeMap: Record<DrawerPosition, Record<DrawerSize, string>> = {
   left: {
     small: '250px',
@@ -42,18 +57,6 @@ const sizeMap: Record<DrawerPosition, Record<DrawerSize, string>> = {
   },
 };
 
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  position?: DrawerPosition;
-  size?: DrawerSize;
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  showCloseButton?: boolean;
-  closeOnOverlayClick?: boolean;
-}
-
 const Drawer = ({
   isOpen,
   onClose,
@@ -139,7 +142,11 @@ const Drawer = ({
           {children}
         </Box>
 
-        {footer && <Box as="div" className={drawerFooter}>{footer}</Box>}
+        {footer && (
+          <Box as="div" className={drawerFooter}>
+            {footer}
+          </Box>
+        )}
       </Box>
     </>
   );

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -12,8 +12,13 @@ import {
   dropdownMenuLabel,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DropdownMenuPosition =
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'topLeft'
+  | 'topRight';
 export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
 
 export interface DropdownMenuItemProps {
@@ -29,13 +34,14 @@ export interface DropdownMenuGroupProps {
   items: DropdownMenuItemProps[];
 }
 
-export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  trigger: React.ReactNode;
-  items?: DropdownMenuItemProps[];
-  groups?: DropdownMenuGroupProps[];
-  position?: DropdownMenuPosition;
-  closeOnItemClick?: boolean;
-}
+export type DropdownMenuProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    trigger: React.ReactNode;
+    items?: DropdownMenuItemProps[];
+    groups?: DropdownMenuGroupProps[];
+    position?: DropdownMenuPosition;
+    closeOnItemClick?: boolean;
+  };
 
 const DropdownMenu = ({
   trigger,
@@ -51,7 +57,10 @@ const DropdownMenu = ({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
@@ -78,7 +87,7 @@ const DropdownMenu = ({
 
   const handleItemClick = (item: DropdownMenuItemProps) => {
     if (item.disabled || item.variant === 'disabled') return;
-    
+
     item.onClick?.();
     if (closeOnItemClick) {
       setIsOpen(false);
@@ -91,7 +100,11 @@ const DropdownMenu = ({
       as="button"
       className={clsx(
         dropdownMenuItem,
-        dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default'],
+        dropdownMenuItemVariants[
+          item.disabled || item.variant === 'disabled'
+            ? 'disabled'
+            : item.variant || 'default'
+        ],
       )}
       onClick={() => handleItemClick(item)}
       disabled={item.disabled || item.variant === 'disabled'}
@@ -128,10 +141,13 @@ const DropdownMenu = ({
       >
         {trigger}
       </Box>
-      
+
       {isOpen && (
         <Box
-          className={clsx(dropdownMenuContent, dropdownMenuPositionVariants[position])}
+          className={clsx(
+            dropdownMenuContent,
+            dropdownMenuPositionVariants[position],
+          )}
           role="menu"
           aria-orientation="vertical"
         >
@@ -140,10 +156,16 @@ const DropdownMenu = ({
               {items.map((item, index) => renderItem(item, index))}
             </Box>
           )}
-          
+
           {groups.map((group, index) => (
             <React.Fragment key={index}>
-              {index > 0 && <Box as="div" className={dropdownMenuSeparator} role="separator" />}
+              {index > 0 && (
+                <Box
+                  as="div"
+                  className={dropdownMenuSeparator}
+                  role="separator"
+                />
+              )}
               {renderGroup(group, index)}
             </React.Fragment>
           ))}

package/src/components/EmptyState/EmptyState.tsx

@@ -8,14 +8,15 @@ import {
   emptyStateAction,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export interface EmptyStateProps {
-  icon?: React.ReactNode;
-  title?: string;
-  description?: string;
-  action?: React.ReactNode;
-  className?: string;
-}
+export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+  };
 
 const EmptyState = ({
   icon,
@@ -41,11 +42,7 @@ const EmptyState = ({
           {description}
         </Box>
       )}
-      {action && (
-        <Box className={emptyStateAction}>
-          {action}
-        </Box>
-      )}
+      {action && <Box className={emptyStateAction}>{action}</Box>}
     </Box>
   );
 };

package/src/components/FileUpload/FileUpload.tsx

@@ -21,6 +21,7 @@ import {
   fileUploadProgressFillVariants,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export interface FileUploadFile {
   id: string;
@@ -32,21 +33,22 @@ export interface FileUploadFile {
   errorMessage?: string;
 }
 
-export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string;
-  files?: FileUploadFile[];
-  onFilesChange?: (files: FileUploadFile[]) => void;
-  onFileAdd?: (files: File[]) => void;
-  onFileRemove?: (fileId: string) => void;
-  accept?: string;
-  multiple?: boolean;
-  maxFileSize?: number;
-  maxFiles?: number;
-  disabled?: boolean;
-  dropzoneText?: string;
-  hint?: string;
-  showProgress?: boolean;
-}
+export type FileUploadProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    label?: string;
+    files?: FileUploadFile[];
+    onFilesChange?: (files: FileUploadFile[]) => void;
+    onFileAdd?: (files: File[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    dropzoneText?: string;
+    hint?: string;
+    showProgress?: boolean;
+  };
 
 const formatFileSize = (bytes: number): string => {
   if (bytes === 0) return '0 Bytes';
@@ -82,8 +84,8 @@ const FileUpload = ({
       return `File size exceeds ${formatFileSize(maxFileSize)}`;
     }
     if (accept) {
-      const acceptedTypes = accept.split(',').map(type => type.trim());
-      const isAccepted = acceptedTypes.some(type => {
+      const acceptedTypes = accept.split(',').map((type) => type.trim());
+      const isAccepted = acceptedTypes.some((type) => {
         if (type.includes('*')) {
           return file.type.startsWith(type.replace('/*', ''));
         }
@@ -96,36 +98,39 @@ const FileUpload = ({
     return null;
   };
 
-  const handleFiles = useCallback((fileList: FileList | null) => {
-    if (!fileList || disabled) return;
+  const handleFiles = useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList || disabled) return;
 
-    const newFiles: File[] = [];
-    const errors: string[] = [];
+      const newFiles: File[] = [];
+      const errors: string[] = [];
 
-    Array.from(fileList).forEach(file => {
-      const validationError = validateFile(file);
-      if (validationError) {
-        errors.push(`${file.name}: ${validationError}`);
-      } else {
-        newFiles.push(file);
-      }
-    });
+      Array.from(fileList).forEach((file) => {
+        const validationError = validateFile(file);
+        if (validationError) {
+          errors.push(`${file.name}: ${validationError}`);
+        } else {
+          newFiles.push(file);
+        }
+      });
 
-    if (maxFiles && files.length + newFiles.length > maxFiles) {
-      errors.push(`Maximum ${maxFiles} files allowed`);
-      newFiles.splice(maxFiles - files.length);
-    }
+      if (maxFiles && files.length + newFiles.length > maxFiles) {
+        errors.push(`Maximum ${maxFiles} files allowed`);
+        newFiles.splice(maxFiles - files.length);
+      }
 
-    if (errors.length > 0) {
-      setError(errors.join(', '));
-    } else {
-      setError(null);
-    }
+      if (errors.length > 0) {
+        setError(errors.join(', '));
+      } else {
+        setError(null);
+      }
 
-    if (newFiles.length > 0) {
-      onFileAdd?.(newFiles);
-    }
-  }, [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd]);
+      if (newFiles.length > 0) {
+        onFileAdd?.(newFiles);
+      }
+    },
+    [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd],
+  );
 
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
@@ -190,7 +195,14 @@ const FileUpload = ({
         aria-disabled={disabled}
       >
         <Box className={fileUploadIcon} aria-hidden="true">
-          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
             <polyline points="17,8 12,3 7,8" />
             <line x1="12" y1="3" x2="12" y2="15" />
@@ -233,9 +245,13 @@ const FileUpload = ({
                 </Box>
                 <Box as="p" className={fileUploadItemSize}>
                   {formatFileSize(file.size)}
-                  {file.status === 'uploading' && showProgress && ' • Uploading...'}
+                  {file.status === 'uploading' &&
+                    showProgress &&
+                    ' • Uploading...'}
                   {file.status === 'success' && ' • Complete'}
-                  {file.status === 'error' && file.errorMessage && ` • ${file.errorMessage}`}
+                  {file.status === 'error' &&
+                    file.errorMessage &&
+                    ` • ${file.errorMessage}`}
                 </Box>
                 {showProgress && file.status === 'uploading' && (
                   <Box className={fileUploadProgressBar}>

package/src/components/Form/Form.tsx

@@ -2,11 +2,12 @@ import clsx from 'clsx';
 import React from 'react';
 import { formStyle } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
-  className?: string;
-  children?: React.ReactNode;
-};
+type FormProps = React.FormHTMLAttributes<HTMLFormElement> &
+  Sprinkles & {
+    children?: React.ReactNode;
+  };
 
 const Form = (props: FormProps) => {
   return (
@@ -14,10 +15,7 @@ const Form = (props: FormProps) => {
       as="form"
       gap="medium"
       paddingX="large"
-      className={clsx(
-        formStyle,
-        props.className,
-      )}
+      className={clsx(formStyle, props.className)}
       {...props}
     >
       {props.children}

package/src/components/Grid/Grid.tsx

@@ -1,17 +1,17 @@
 import React, { forwardRef } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
 export type GridGap = 'none' | 'small' | 'medium' | 'large';
 
-export interface GridProps {
-  columns?: GridColumns;
-  gap?: GridGap;
-  minChildWidth?: string;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}
+export type GridProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    columns?: GridColumns;
+    gap?: GridGap;
+    minChildWidth?: string;
+    children?: React.ReactNode;
+  };
 
 const gapMap: Record<GridGap, string> = {
   none: '0',
@@ -21,7 +21,7 @@ const gapMap: Record<GridGap, string> = {
 };
 
 const Grid = forwardRef<HTMLElement, GridProps>(
-  ({ columns, gap = 'medium', minChildWidth, children, className, style }, ref) => {
+  ({ columns, gap = 'medium', minChildWidth, children, ...props }, ref) => {
     const gapValue: GridGap = gap;
 
     const gridStyle: React.CSSProperties = {
@@ -30,17 +30,22 @@ const Grid = forwardRef<HTMLElement, GridProps>(
     };
 
     if (minChildWidth) {
-      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth}, 1fr))`;
+      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth},1fr))`;
     } else if (columns) {
-      gridStyle.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+      gridStyle.gridTemplateColumns = `repeat(${columns},1fr)`;
     }
 
     return (
-      <Box ref={ref} className={className} style={{ ...gridStyle, ...style }}>
+      <Box
+        ref={ref}
+        className={props.className}
+        style={{ ...gridStyle, ...props.style }}
+        {...props}
+      >
         {children}
       </Box>
     );
-  }
+  },
 );
 
 Grid.displayName = 'Grid';

package/src/components/Icon/Icon.tsx

@@ -2,13 +2,14 @@ import clsx from 'clsx';
 import React from 'react';
 import { icon } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type IconProps = {
-  name?: string;
-  children?: React.ReactNode;
-  className?: string;
-  color?: string;
-};
+type IconProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    name?: string;
+    children?: React.ReactNode;
+    color?: string;
+  };
 
 const IconComponent = ({ name, children, className, color }: IconProps) => {
   const iconMap: Record<string, string> = {

package/src/components/Input/Input.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import { inputStyle, label } from './styles.css';
 import { text } from '../Text/styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-  label?: string;
-  fullWidth?: boolean;
-};
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  Sprinkles & {
+    label?: string;
+    fullWidth?: boolean;
+  };
 
 const Input = (props: InputProps) => {
   return (
@@ -19,10 +21,7 @@ const Input = (props: InputProps) => {
       {props.label && (
         <Box
           as="label"
-          className={clsx(
-            text,
-            label,
-          )}
+          className={clsx(text, label)}
           marginX={{ mobile: 'auto', tablet: 'none' }}
           marginY={{ mobile: 'none', tablet: 'auto' }}
           htmlFor={props.id}

package/src/components/Kbd/Kbd.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { kbd } from './styles.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export interface KbdProps {
-  children: React.ReactNode;
-  className?: string;
-}
+export type KbdProps = React.HTMLAttributes<HTMLElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+  };
 
 const Kbd = ({ children, className, ...props }: KbdProps) => {
   return (

package/src/components/List/List.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { list } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-const List = ({ children }: { children: React.ReactNode }) => {
+const List = ({
+  children,
+  ...props
+}: { children: React.ReactNode } & Sprinkles) => {
   return (
-    <Box as="ul" className={list}>
+    <Box as="ul" className={list} {...props}>
       {children}
     </Box>
   );

package/src/components/List/ListItem.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { listItem } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-const ListItem = ({ children }: { children: React.ReactNode }) => {
+const ListItem = ({
+  children,
+  ...props
+}: { children: React.ReactNode } & Sprinkles) => {
   return (
-    <Box as="li" className={listItem}>
+    <Box as="li" className={listItem} {...props}>
       {children}
     </Box>
   );

package/src/components/Modal/Modal.tsx

@@ -10,10 +10,11 @@ import {
 } from './styles.css';
 import React, { useEffect, useRef } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type ModalSize = 'small' | 'medium' | 'large' | 'full';
 
-export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
   isOpen: boolean;
   onClose: () => void;
   title?: string;
@@ -21,7 +22,9 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
   children?: React.ReactNode;
   footer?: React.ReactNode;
   showCloseButton?: boolean;
-}
+};
+
+export type ModalProps = ModalPropsType & Sprinkles;
 
 interface DialogMethods {
   showModal: () => void;
@@ -84,7 +87,9 @@ const Modal = ({
     >
       {title && (
         <Box as="div" className={modalHeader}>
-          <Box as="h2" className={modalTitle}>{title}</Box>
+          <Box as="h2" className={modalTitle}>
+            {title}
+          </Box>
           {showCloseButton && (
             <Box
               as="button"
@@ -99,9 +104,15 @@ const Modal = ({
         </Box>
       )}
 
-      <Box as="div" className={modalBody}>{children}</Box>
+      <Box as="div" className={modalBody}>
+        {children}
+      </Box>
 
-      {footer && <Box as="div" className={modalFooter}>{footer}</Box>}
+      {footer && (
+        <Box as="div" className={modalFooter}>
+          {footer}
+        </Box>
+      )}
     </Box>
   );
 };

package/src/components/Navbar/Navbar.tsx

@@ -2,8 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 import { navbarStyle } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type NavbarProps = React.HTMLAttributes<HTMLElement> & {
+type NavbarProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
   children?: React.ReactNode;
 };
 

package/src/components/Navbar/NavbarItem.tsx

@@ -2,8 +2,9 @@ import clsx from 'clsx';
 import React from 'react';
 import { navbarItemStyle } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & {
+type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
   children?: React.ReactNode;
 };