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

package/src/components/NumberInput/NumberInput.tsx

@@ -13,25 +13,30 @@ import {
   numberInputErrorMessage,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type NumberInputPosition = 'right' | 'left';
 
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> {
-  label?: string;
-  value?: number | '';
-  onChange?: (value: number | '') => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  stepperPosition?: NumberInputPosition;
-  placeholder?: string;
-  hint?: string;
-  error?: boolean;
-  errorMessage?: string;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  allowEmpty?: boolean;
-}
+export type NumberInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'value' | 'min' | 'max'
+> &
+  Sprinkles & {
+    label?: string;
+    value?: number | '';
+    onChange?: (value: number | '') => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepperPosition?: NumberInputPosition;
+    placeholder?: string;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    allowEmpty?: boolean;
+  };
 
 const NumberInput = ({
   label,
@@ -53,7 +58,7 @@ const NumberInput = ({
 }: NumberInputProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
-    
+
     if (inputValue === '') {
       if (allowEmpty) {
         onChange?.('');
@@ -62,7 +67,7 @@ const NumberInput = ({
       }
       return;
     }
-    
+
     const numValue = parseFloat(inputValue);
     if (!isNaN(numValue)) {
       const clampedValue = Math.min(Math.max(numValue, min), max);
@@ -82,8 +87,10 @@ const NumberInput = ({
     onChange?.(newValue);
   }, [value, step, min, onChange]);
 
-  const isIncrementDisabled = disabled || (typeof value === 'number' && value >= max);
-  const isDecrementDisabled = disabled || (typeof value === 'number' && value <= min);
+  const isIncrementDisabled =
+    disabled || (typeof value === 'number' && value >= max);
+  const isDecrementDisabled =
+    disabled || (typeof value === 'number' && value <= min);
 
   const displayValue = value === '' ? '' : value;
 
@@ -94,7 +101,7 @@ const NumberInput = ({
           {label}
         </Box>
       )}
-      
+
       <Box className={numberInputContainer}>
         <Box
           as="input"
@@ -113,7 +120,7 @@ const NumberInput = ({
           )}
           {...props}
         />
-        
+
         <Box
           className={clsx(
             numberInputStepper,

package/src/components/Pagination/Pagination.tsx

@@ -1,16 +1,23 @@
 import clsx from 'clsx';
 import React from 'react';
-import { paginationContainer, pageButton, pageButtonVariants, ellipsis } from './styles.css';
+import {
+  paginationContainer,
+  pageButton,
+  pageButtonVariants,
+  ellipsis,
+} from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export type PaginationProps = {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  siblingCount?: number;
-  showFirstLast?: boolean;
-  showPrevNext?: boolean;
-};
+export type PaginationProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+  };
 
 const Pagination = ({
   currentPage,
@@ -19,23 +26,24 @@ const Pagination = ({
   siblingCount = 1,
   showFirstLast = true,
   showPrevNext = true,
+  ...props
 }: PaginationProps) => {
   const generatePageNumbers = () => {
     const pages: (number | string)[] = [];
-    
+
     const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
     const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    
+
     const shouldShowLeftEllipsis = leftSiblingIndex > 2;
     const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
-    
+
     if (totalPages <= 7) {
       for (let i = 1; i <= totalPages; i++) {
         pages.push(i);
       }
     } else {
       pages.push(1);
-      
+
       if (shouldShowLeftEllipsis) {
         pages.push('left-ellipsis');
       } else if (currentPage > 3) {
@@ -43,13 +51,13 @@ const Pagination = ({
           pages.push(i);
         }
       }
-      
+
       for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
         if (i !== 1 && i !== totalPages) {
           pages.push(i);
         }
       }
-      
+
       if (shouldShowRightEllipsis) {
         pages.push('right-ellipsis');
       } else if (currentPage < totalPages - 2) {
@@ -57,17 +65,18 @@ const Pagination = ({
           pages.push(i);
         }
       }
-      
+
       pages.push(totalPages);
     }
-    
+
     return pages;
   };
-  
+
   const pages = generatePageNumbers();
-  
+  const { className, ...restProps } = props;
+
   return (
-    <Box className={paginationContainer}>
+    <Box className={clsx(paginationContainer, className)} {...restProps}>
       {showFirstLast && (
         <Box
           as="button"
@@ -78,7 +87,7 @@ const Pagination = ({
           {'<<'}
         </Box>
       )}
-      
+
       {showPrevNext && (
         <Box
           as="button"
@@ -89,15 +98,17 @@ const Pagination = ({
           {'<'}
         </Box>
       )}
-      
-      {pages.map((page, index) => (
+
+      {pages.map((page, index) =>
         typeof page === 'number' ? (
           <Box
             key={`page-${page}`}
             as="button"
             className={clsx(
               pageButton,
-              page === currentPage ? pageButtonVariants.active : pageButtonVariants.default
+              page === currentPage
+                ? pageButtonVariants.active
+                : pageButtonVariants.default,
             )}
             onClick={() => onPageChange(page)}
           >
@@ -107,9 +118,9 @@ const Pagination = ({
           <Box key={`${page}-${index}`} className={ellipsis}>
             ...
           </Box>
-        )
-      ))}
-      
+        ),
+      )}
+
       {showPrevNext && (
         <Box
           as="button"
@@ -120,7 +131,7 @@ const Pagination = ({
           {'>'}
         </Box>
       )}
-      
+
       {showFirstLast && (
         <Box
           as="button"

package/src/components/Popover/Popover.tsx

@@ -14,23 +14,33 @@ import {
   popoverFooter,
 } from './styles.css';
 import Box from '../Box';
-
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type PopoverPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight';
 export type PopoverTriggerType = 'click' | 'hover';
 
-export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  position?: PopoverPosition;
-  title?: string;
-  footer?: React.ReactNode;
-  showArrow?: boolean;
-  triggerType?: PopoverTriggerType;
-  closeOnClickOutside?: boolean;
-  closeOnEscape?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-}
+export type PopoverProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    position?: PopoverPosition;
+    title?: string;
+    footer?: React.ReactNode;
+    showArrow?: boolean;
+    triggerType?: PopoverTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+  };
 
 const Popover = ({
   trigger,
@@ -58,7 +68,10 @@ const Popover = ({
     if (!closeOnClickOutside) return;
 
     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);
       }
     };
@@ -118,7 +131,7 @@ const Popover = ({
       >
         {trigger}
       </Box>
-      
+
       {isOpen && (
         <Box
           className={clsx(popoverContent, popoverPositionVariants[position])}
@@ -128,10 +141,13 @@ const Popover = ({
           {showArrow && (
             <Box
               as="span"
-              className={clsx(popoverArrow, popoverArrowPositionVariants[position])}
+              className={clsx(
+                popoverArrow,
+                popoverArrowPositionVariants[position],
+              )}
             />
           )}
-          
+
           {(title || triggerType === 'click') && (
             <Box as="div" className={popoverHeader}>
               {title && (
@@ -152,11 +168,11 @@ const Popover = ({
               )}
             </Box>
           )}
-          
+
           <Box as="div" className={popoverBody}>
             {children}
           </Box>
-          
+
           {footer && (
             <Box as="div" className={popoverFooter}>
               {footer}

package/src/components/Progress/Progress.tsx

@@ -7,15 +7,16 @@ import {
   progressLabel,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type ProgressProps = {
-  value: number;
-  max?: number;
-  label?: string;
-  showPercentage?: boolean;
-  variant?: 'default' | 'success' | 'warning' | 'error';
-  className?: string;
-};
+type ProgressProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    value: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+  };
 
 const Progress = ({
   value,
@@ -26,41 +27,41 @@ const Progress = ({
   className,
 }: ProgressProps) => {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-  
+
   return (
-      <Box className={clsx(progress, className)} width="100%">
-        {(label || showPercentage) && (
-          <Box
-            className={progressLabel}
-            display="flex"
-            justifyContent="space-between"
-            fontSize="12px"
-            fontWeight="500"
-            color="c5-600"
-            marginBottom="small"
-            fontFamily="body"
-          >
-            {label && <Box as="span">{label}</Box>}
-            {showPercentage && <Box as="span">{percentage}%</Box>}
-          </Box>
-        )}
+    <Box className={clsx(progress, className)} width="100%">
+      {(label || showPercentage) && (
         <Box
-          as="div"
-          className={progressBar[variant]}
-          role="progressbar"
-          aria-valuenow={value}
-          aria-valuemin={0}
-          aria-valuemax={max}
+          className={progressLabel}
+          display="flex"
+          justifyContent="space-between"
+          fontSize="12px"
+          fontWeight="500"
+          color="c5-600"
+          marginBottom="small"
+          fontFamily="body"
         >
-          <Box
-            as="div"
-            className={progressFill[variant]}
-            style={{ width: `${percentage}%` }}
-            role="presentation"
-          />
+          {label && <Box as="span">{label}</Box>}
+          {showPercentage && <Box as="span">{percentage}%</Box>}
         </Box>
+      )}
+      <Box
+        as="div"
+        className={progressBar[variant]}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+      >
+        <Box
+          as="div"
+          className={progressFill[variant]}
+          style={{ width: `${percentage}%` }}
+          role="presentation"
+        />
       </Box>
-    );
+    </Box>
+  );
 };
 
 export default Progress;

package/src/components/Radio/Radio.tsx

@@ -8,6 +8,7 @@ import {
   radioGroupHorizontal,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 type RadioContextType = {
   name?: string;
@@ -20,17 +21,18 @@ const RadioContext = createContext<RadioContextType>({});
 type RadioProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'type' | 'value' | 'onChange'
-> & {
-  label?: string;
-  value: string;
-};
+> &
+  Sprinkles & {
+    label?: string;
+    value: string;
+  };
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
   ({ label, className, value, ...props }, ref) => {
     const context = useContext(RadioContext);
     const name = context.name || props.name;
     const isChecked = context.value === value;
-    
+
     const handleChange = () => {
       if (context.onChange) {
         context.onChange(value);
@@ -58,7 +60,11 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
           className={radioInput}
           {...props}
         />
-        {label && <Box as="span" className={radioLabel}>{label}</Box>}
+        {label && (
+          <Box as="span" className={radioLabel}>
+            {label}
+          </Box>
+        )}
       </Box>
     );
   },

package/src/components/ScrollArea/ScrollArea.tsx

@@ -6,16 +6,17 @@ import {
   scrollAreaViewport,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
 
-export interface ScrollAreaProps {
-  children: React.ReactNode;
-  orientation?: ScrollAreaOrientation;
-  maxHeight?: string | number;
-  maxWidth?: string | number;
-  className?: string;
-}
+export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    orientation?: ScrollAreaOrientation;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+  };
 
 const ScrollArea = ({
   children,
@@ -40,9 +41,7 @@ const ScrollArea = ({
       style={style}
       {...props}
     >
-      <Box className={scrollAreaViewport}>
-        {children}
-      </Box>
+      <Box className={scrollAreaViewport}>{children}</Box>
     </Box>
   );
 };

package/src/components/Select/Select.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 import { select, selectLabel, selectWrapper } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 type SelectOption = {
   value: string;
@@ -9,15 +10,19 @@ type SelectOption = {
   disabled?: boolean;
 };
 
-type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
-  label?: string;
-  options: SelectOption[];
-  error?: boolean;
-  fullWidth?: boolean;
-};
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> &
+  Sprinkles & {
+    label?: string;
+    options: SelectOption[];
+    error?: boolean;
+    fullWidth?: boolean;
+  };
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+  (
+    { label, options, error = false, fullWidth = true, className, ...props },
+    ref,
+  ) => {
     return (
       <Box className={selectWrapper} width="100%">
         {label && (

package/src/components/Separator/Separator.tsx

@@ -1,18 +1,16 @@
 import clsx from 'clsx';
 import React from 'react';
-import {
-  separator,
-  separatorOrientation,
-} from './styles.css';
+import { separator, separatorOrientation } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type SeparatorOrientation = 'horizontal' | 'vertical';
 
-export interface SeparatorProps {
-  orientation?: SeparatorOrientation;
-  decorative?: boolean;
-  className?: string;
-}
+export type SeparatorProps = React.HTMLAttributes<HTMLHRElement> &
+  Sprinkles & {
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+  };
 
 const Separator = ({
   orientation = 'horizontal',
@@ -23,11 +21,7 @@ const Separator = ({
   return (
     <Box
       as="hr"
-      className={clsx(
-        separator,
-        separatorOrientation[orientation],
-        className,
-      )}
+      className={clsx(separator, separatorOrientation[orientation], className)}
       aria-hidden={decorative}
       {...props}
     />

package/src/components/Skeleton/Skeleton.tsx

@@ -7,19 +7,21 @@ import {
   skeletonAnimation,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
 export type SkeletonSize = 'small' | 'medium' | 'large';
 export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
 
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: SkeletonVariant;
-  size?: SkeletonSize;
-  animation?: SkeletonAnimation;
-  width?: string | number;
-  height?: string | number;
-  count?: number;
-}
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    variant?: SkeletonVariant;
+    size?: SkeletonSize;
+    animation?: SkeletonAnimation;
+    width?: string | number;
+    height?: string | number;
+    count?: number;
+  };
 
 const Skeleton = ({
   variant = 'text',
@@ -54,11 +56,7 @@ const Skeleton = ({
   ));
 
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      gap="small"
-    >
+    <Box display="flex" flexDirection="column" gap="small">
       {skeletons}
     </Box>
   );

package/src/components/Spinner/Spinner.tsx

@@ -1,20 +1,24 @@
 import clsx from 'clsx';
-import {
-  spinner,
-  spinnerColors,
-  spinnerSizes,
-} from './styles.css';
+import { spinner, spinnerColors, spinnerSizes } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export type SpinnerColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info';
 export type SpinnerSize = 'small' | 'medium' | 'large';
 
-export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-  color?: SpinnerColor;
-  size?: SpinnerSize;
-  role?: string;
-}
+export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    color?: SpinnerColor;
+    size?: SpinnerSize;
+    role?: string;
+  };
 
 const Spinner = ({
   color = 'primary',