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

package/src/components/Stack/Stack.tsx

@@ -1,20 +1,26 @@
 import React, { forwardRef } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type StackDirection = 'row' | 'column';
 export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
-export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-
-export interface StackProps {
-  direction?: StackDirection;
-  align?: StackAlign;
-  justify?: StackJustify;
-  gap?: 'none' | 'small' | 'medium' | 'large';
-  wrap?: boolean;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-}
+export type StackJustify =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'between'
+  | 'around'
+  | 'evenly';
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    direction?: StackDirection;
+    align?: StackAlign;
+    justify?: StackJustify;
+    gap?: 'none' | 'small' | 'medium' | 'large';
+    wrap?: boolean;
+    children?: React.ReactNode;
+  };
 
 const alignMap: Record<StackAlign, string> = {
   start: 'flex-start',
@@ -33,10 +39,23 @@ const justifyMap: Record<StackJustify, string> = {
 };
 
 const Stack = forwardRef<HTMLElement, StackProps>(
-  ({ direction = 'column', align, justify, gap, wrap, children, className, style, ...rest }, ref) => {
+  (
+    {
+      direction = 'column',
+      align,
+      justify,
+      gap,
+      wrap,
+      children,
+      className,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
     const alignItems = align ? alignMap[align] : undefined;
     const justifyContent = justify ? justifyMap[justify] : undefined;
-    
+
     return (
       <Box
         ref={ref}
@@ -52,7 +71,7 @@ const Stack = forwardRef<HTMLElement, StackProps>(
         {children}
       </Box>
     );
-  }
+  },
 );
 
 Stack.displayName = 'Stack';

package/src/components/Stepper/Stepper.tsx

@@ -17,6 +17,7 @@ import {
   stepConnectorVertical,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type StepperOrientation = 'horizontal' | 'vertical';
 export type StepStatus = 'pending' | 'current' | 'completed';
@@ -27,14 +28,15 @@ export interface Step {
   status?: StepStatus;
 }
 
-export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: Step[];
-  currentStep?: number;
-  orientation?: StepperOrientation;
-  showConnectors?: boolean;
-  onStepClick?: (stepIndex: number) => void;
-  clickable?: boolean;
-}
+export type StepperProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    steps: Step[];
+    currentStep?: number;
+    orientation?: StepperOrientation;
+    showConnectors?: boolean;
+    onStepClick?: (stepIndex: number) => void;
+    clickable?: boolean;
+  };
 
 const Stepper = ({
   steps,
@@ -73,7 +75,7 @@ const Stepper = ({
         const status = stepItem.status || getStepStatus(index);
         const isLast = index === steps.length - 1;
         const isCompleted = status === 'completed';
-        
+
         return (
           <Box
             key={index}
@@ -83,11 +85,14 @@ const Stepper = ({
           >
             {showConnectors && !isLast && orientation === 'horizontal' && (
               <Box
-                className={clsx(stepConnector, isCompleted && stepConnectorCompleted)}
+                className={clsx(
+                  stepConnector,
+                  isCompleted && stepConnectorCompleted,
+                )}
                 aria-hidden="true"
               />
             )}
-            
+
             {showConnectors && !isLast && orientation === 'vertical' && (
               <Box
                 className={stepConnectorVertical}
@@ -95,19 +100,16 @@ const Stepper = ({
                 aria-hidden="true"
               />
             )}
-            
+
             <Box
-              className={clsx(
-                stepIndicator,
-                stepIndicatorVariants[status],
-              )}
+              className={clsx(stepIndicator, stepIndicatorVariants[status])}
               onClick={() => handleStepClick(index)}
               style={{ cursor: clickable ? 'pointer' : 'default' }}
               aria-label={`Step ${index + 1}: ${stepItem.title}`}
             >
               {status === 'completed' ? '✓' : index + 1}
             </Box>
-            
+
             <Box
               className={clsx(
                 stepContent,

package/src/components/Table/Table.tsx

@@ -11,30 +11,27 @@ import {
   tableContainer,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 // Context to pass striping info to rows
 const TableContext = createContext<{ striped?: boolean }>({});
 
-type TableProps = {
-  children: React.ReactNode;
-  className?: string;
-  striped?: boolean;
-  containerClassName?: string;
-};
+type TableProps = React.HTMLAttributes<HTMLTableElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    striped?: boolean;
+  };
 
 const TableComponent = ({
   children,
-  className,
   striped = false,
-  containerClassName,
+  className,
+  ...props
 }: TableProps) => {
   return (
     <TableContext.Provider value={{ striped }}>
-      <Box
-        className={clsx(tableContainer, containerClassName)}
-        width="100%"
-      >
-        <Box as="table" className={clsx(table, className)}>
+      <Box className={clsx(tableContainer, className)} width="100%">
+        <Box as="table" className={clsx(table)} {...props}>
           {children}
         </Box>
       </Box>
@@ -48,7 +45,11 @@ type TheadProps = {
 };
 
 const Thead = ({ children, className }: TheadProps) => {
-  return <Box as="thead" className={clsx(thead, className)}>{children}</Box>;
+  return (
+    <Box as="thead" className={clsx(thead, className)}>
+      {children}
+    </Box>
+  );
 };
 
 type TbodyProps = {
@@ -57,7 +58,11 @@ type TbodyProps = {
 };
 
 const Tbody = ({ children, className }: TbodyProps) => {
-  return <Box as="tbody" className={clsx(tbody, className)}>{children}</Box>;
+  return (
+    <Box as="tbody" className={clsx(tbody, className)}>
+      {children}
+    </Box>
+  );
 };
 
 type TfootProps = {
@@ -66,7 +71,11 @@ type TfootProps = {
 };
 
 const Tfoot = ({ children, className }: TfootProps) => {
-  return <Box as="tfoot" className={clsx(tfoot, className)}>{children}</Box>;
+  return (
+    <Box as="tfoot" className={clsx(tfoot, className)}>
+      {children}
+    </Box>
+  );
 };
 
 type TrProps = {
@@ -79,10 +88,7 @@ const Tr = ({ children, className }: TrProps) => {
   return (
     <Box
       as="tr"
-      className={clsx(
-        tr[striped ? 'striped' : 'default'],
-        className,
-      )}
+      className={clsx(tr[striped ? 'striped' : 'default'], className)}
     >
       {children}
     </Box>
@@ -95,7 +101,11 @@ type ThProps = {
 };
 
 const Th = ({ children, className }: ThProps) => {
-  return <Box as="th" className={clsx(th, className)}>{children}</Box>;
+  return (
+    <Box as="th" className={clsx(th, className)}>
+      {children}
+    </Box>
+  );
 };
 
 type TdProps = {

package/src/components/Tabs/Tabs.tsx

@@ -9,6 +9,7 @@ import {
   tabContent,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 type TabsContextType = {
   activeTab: string;
@@ -21,20 +22,21 @@ const TabsContext = createContext<TabsContextType>({
   setActiveTab: () => {},
 });
 
-type TabsProps = {
-  children: React.ReactNode;
-  defaultValue?: string;
-  orientation?: 'horizontal' | 'vertical';
-  className?: string;
-  onChange?: (value: string) => void;
-};
+type TabsProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    defaultValue?: string;
+    orientation?: 'horizontal' | 'vertical';
+    onChange?: (value: string) => void;
+  };
 
 const Tabs = ({
   children,
   defaultValue = '',
   orientation = 'horizontal',
-  className,
   onChange,
+  className,
+  ...props
 }: TabsProps) => {
   const [activeTab, setActiveTab] = useState(defaultValue);
 
@@ -46,8 +48,10 @@ const Tabs = ({
   };
 
   return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab: handleTabChange, orientation }}>
-      <Box className={clsx(tabsContainer, className)} width="100%">
+    <TabsContext.Provider
+      value={{ activeTab, setActiveTab: handleTabChange, orientation }}
+    >
+      <Box className={clsx(tabsContainer, className)} width="100%" {...props}>
         {children}
       </Box>
     </TabsContext.Provider>

package/src/components/Tag/Tag.tsx

@@ -2,14 +2,15 @@ import clsx from 'clsx';
 import React from 'react';
 import { tag, removeButton, tagGroup } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type TagProps = {
-  children: React.ReactNode;
-  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-  onRemove?: () => void;
-  removable?: boolean;
-  className?: string;
-};
+type TagProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    onRemove?: () => void;
+    removable?: boolean;
+  };
 
 const Tag = ({
   children,

package/src/components/Text/Header.tsx

@@ -2,12 +2,13 @@ import clsx from 'clsx';
 import { heading, text } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type HeaderProps = {
-  variant: 'h1' | 'h2' | 'h3';
-  className?: string;
-  children?: React.ReactNode;
-};
+type HeaderProps = React.HTMLAttributes<HTMLHeadingElement> &
+  Sprinkles & {
+    variant: 'h1' | 'h2' | 'h3';
+    children?: React.ReactNode;
+  };
 
 const Header = ({ variant, children, className }: HeaderProps) => {
   return (

package/src/components/Text/P.tsx

@@ -2,11 +2,12 @@ import clsx from 'clsx';
 import { text } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type PProps = React.HTMLAttributes<HTMLParagraphElement> & {
-  children: React.ReactNode;
-  className?: string;
-};
+type PProps = React.HTMLAttributes<HTMLParagraphElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+  };
 
 const P = (props: PProps) => {
   return (

package/src/components/TextArea/TextArea.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import { textAreaStyle, label } from './styles.css';
 import { text } from '../Text/styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  label?: string;
-  fullWidth?: boolean;
-};
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  Sprinkles & {
+    label?: string;
+    fullWidth?: boolean;
+  };
 
 const TextArea = (props: TextAreaProps) => {
   return (
@@ -19,10 +21,7 @@ const TextArea = (props: TextAreaProps) => {
       {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/Toggle/Toggle.tsx

@@ -15,15 +15,20 @@ import {
 } from './styles.css';
 import React, { useState, useId } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type ToggleSize = 'small' | 'medium' | 'large';
 
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> {
-  checked?: boolean;
-  onChange?: (checked: boolean) => void;
-  size?: ToggleSize;
-  label?: string;
-}
+export type ToggleProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'checked' | 'onChange'
+> &
+  Sprinkles & {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: ToggleSize;
+    label?: string;
+  };
 
 const Toggle = ({
   checked = false,
@@ -86,7 +91,11 @@ const Toggle = ({
           aria-hidden="true"
         />
       </Box>
-      {label && <Box as="span" marginLeft="small">{label}</Box>}
+      {label && (
+        <Box as="span" marginLeft="small">
+          {label}
+        </Box>
+      )}
     </Box>
   );
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -11,15 +11,17 @@ import {
 } from './styles.css';
 import React, { useState } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-  content: string;
-  position?: TooltipPosition;
-  showArrow?: boolean;
-  children: React.ReactNode;
-}
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    content: string;
+    position?: TooltipPosition;
+    showArrow?: boolean;
+    children: React.ReactNode;
+  };
 
 const Tooltip = ({
   content,
@@ -50,17 +52,20 @@ const Tooltip = ({
       {children}
       <Box
         as="div"
-        className={clsx(
-          tooltipContent,
-          tooltipPositions[position],
-        )}
+        className={clsx(tooltipContent, tooltipPositions[position])}
         data-visible={isVisible}
         role="tooltip"
       >
         {showArrow && (
           <Box
             as="span"
-            className={clsx(tooltipArrow, arrowStyle.top, arrowStyle.bottom, arrowStyle.left, arrowStyle.right)}
+            className={clsx(
+              tooltipArrow,
+              arrowStyle.top,
+              arrowStyle.bottom,
+              arrowStyle.left,
+              arrowStyle.right,
+            )}
           />
         )}
         {content}

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { visuallyHidden } from './styles.css';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-export interface VisuallyHiddenProps {
+export type VisuallyHiddenProps = Sprinkles & {
   children: React.ReactNode;
   as?: React.ElementType;
-  className?: string;
-}
+};
 
-const VisuallyHidden = ({ 
-  children, 
+const VisuallyHidden = ({
+  children,
   as: Component = 'span',
-  className,
-  ...props 
+  ...props
 }: VisuallyHiddenProps) => {
   return React.createElement(
     Component as React.ElementType,
@@ -19,7 +18,7 @@ const VisuallyHidden = ({
       className: visuallyHidden,
       ...props,
     },
-    children
+    children,
   );
 };