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

package/dist/components/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & Sprinkles & {
     label?: string;
     fullWidth?: boolean;
 };

package/dist/components/Toggle/Toggle.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type ToggleSize = 'small' | 'medium' | 'large';
-export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> {
+export type ToggleProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'checked' | 'onChange'> & Sprinkles & {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     size?: ToggleSize;
     label?: string;
-}
+};
 declare const Toggle: ({ checked, onChange, size, label, disabled, id, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default Toggle;

package/dist/components/Toggle/Toggle.js

@@ -12,6 +12,6 @@ const Toggle = ({ checked = false, onChange, size = 'medium', label, disabled =
             onChange(e.target.checked);
         }
     };
-    return (_jsxs(Box, { as: "div", className: toggle, children: [_jsxs(Box, { as: "label", htmlFor: toggleId, className: toggleLabel, children: [_jsx(Box, { as: "input", type: "checkbox", id: toggleId, checked: checked, onChange: handleChange, disabled: disabled, className: toggleInput, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-checked": checked, role: "switch", ...props }), _jsx(Box, { as: "span", className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked), "data-size": size, children: _jsx(Box, { as: "span", className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked) }) }), _jsx(Box, { as: "span", className: toggleFocusRing, "data-focused": isFocused, "aria-hidden": "true" })] }), label && _jsx(Box, { as: "span", marginLeft: "small", children: label })] }));
+    return (_jsxs(Box, { as: "div", className: toggle, children: [_jsxs(Box, { as: "label", htmlFor: toggleId, className: toggleLabel, children: [_jsx(Box, { as: "input", type: "checkbox", id: toggleId, checked: checked, onChange: handleChange, disabled: disabled, className: toggleInput, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "aria-checked": checked, role: "switch", ...props }), _jsx(Box, { as: "span", className: clsx(toggleTrack, toggleSizes[size], checked ? toggleTrackChecked : toggleTrackUnchecked), "data-size": size, children: _jsx(Box, { as: "span", className: clsx(toggleThumb, toggleThumbSizes[size], checked ? toggleThumbChecked : toggleThumbUnchecked) }) }), _jsx(Box, { as: "span", className: toggleFocusRing, "data-focused": isFocused, "aria-hidden": "true" })] }), label && (_jsx(Box, { as: "span", marginLeft: "small", children: label }))] }));
 };
 export default Toggle;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     content: string;
     position?: TooltipPosition;
     showArrow?: boolean;
     children: React.ReactNode;
-}
+};
 declare const Tooltip: ({ content, position, showArrow, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-export interface VisuallyHiddenProps {
+import { Sprinkles } from '../../styles/sprinkles.css';
+export type VisuallyHiddenProps = Sprinkles & {
     children: React.ReactNode;
     as?: React.ElementType;
-    className?: string;
-}
-declare const VisuallyHidden: ({ children, as: Component, className, ...props }: VisuallyHiddenProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+declare const VisuallyHidden: ({ children, as: Component, ...props }: VisuallyHiddenProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default VisuallyHidden;

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { visuallyHidden } from './styles.css';
-const VisuallyHidden = ({ children, as: Component = 'span', className, ...props }) => {
+const VisuallyHidden = ({ children, as: Component = 'span', ...props }) => {
     return React.createElement(Component, {
         className: visuallyHidden,
         ...props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "type": "module",
   "sideEffects": [
     "*.css.js"

package/src/components/Accordion/Accordion.tsx

@@ -9,6 +9,7 @@ import {
   accordionGroup,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 type AccordionContextType = {
   allowMultiple?: boolean;
@@ -22,16 +23,16 @@ const AccordionContext = createContext<AccordionContextType>({
   toggleItem: () => {},
 });
 
-type AccordionProps = {
-  children: React.ReactNode;
-  allowMultiple?: boolean;
-  className?: string;
-};
+type AccordionProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    allowMultiple?: boolean;
+  };
 
 const Accordion = ({
   children,
   allowMultiple = false,
-  className,
+  ...props
 }: AccordionProps) => {
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
@@ -52,10 +53,13 @@ const Accordion = ({
   };
 
   return (
-    <AccordionContext.Provider value={{ allowMultiple, expandedItems, toggleItem }}>
+    <AccordionContext.Provider
+      value={{ allowMultiple, expandedItems, toggleItem }}
+    >
       <Box
-        className={clsx(accordionGroup, className)}
+        className={clsx(accordionGroup, props.className)}
         width="100%"
+        {...props}
       >
         {children}
       </Box>
@@ -63,18 +67,18 @@ const Accordion = ({
   );
 };
 
-type AccordionItemProps = {
-  value: string;
-  title: string;
-  children: React.ReactNode;
-  className?: string;
-};
+type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    value: string;
+    title: string;
+    children: React.ReactNode;
+  };
 
 const AccordionItem = ({
   value,
   title,
   children,
-  className,
+  ...props
 }: AccordionItemProps) => {
   const { expandedItems, toggleItem } = useContext(AccordionContext);
   const isExpanded = expandedItems.has(value);
@@ -86,12 +90,13 @@ const AccordionItem = ({
   return (
     <Box
       as="div"
-      className={clsx(accordionItem, className)}
+      className={clsx(accordionItem, props.className)}
       width="100%"
       marginBottom="small"
       border="small"
       borderRadius="large"
       overflow="hidden"
+      {...props}
     >
       <Box
         as="button"

package/src/components/Alert/Alert.tsx

@@ -7,13 +7,15 @@ import {
 } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
-  severity?: 'success' | 'warning' | 'error' | 'info';
-  dismissible?: boolean;
-  onDismiss?: () => void;
-  children?: React.ReactNode;
-};
+type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    severity?: 'success' | 'warning' | 'error' | 'info';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+  };
 
 const Alert = ({
   severity = 'info',
@@ -29,7 +31,9 @@ const Alert = ({
       className={clsx(alert, alertVariants[severity], props.className)}
       {...props}
     >
-      <Box as="div" className={alertContent}>{children}</Box>
+      <Box as="div" className={alertContent}>
+        {children}
+      </Box>
       {dismissible && onDismiss && (
         <Box
           as="button"

package/src/components/Avatar/Avatar.tsx

@@ -1,16 +1,22 @@
 import clsx from 'clsx';
 import React from 'react';
-import { avatar, avatarImage, avatarWithImage, avatarWrapper } from './styles.css';
+import {
+  avatar,
+  avatarImage,
+  avatarWithImage,
+  avatarWrapper,
+} from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type AvatarProps = {
-  alt?: string;
-  className?: string;
-  src?: string;
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  children?: React.ReactNode;
-  fallback?: string;
-};
+type AvatarProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    alt?: string;
+    src?: string;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    children?: React.ReactNode;
+    fallback?: string;
+  };
 
 const Avatar = ({
   alt,
@@ -38,11 +44,7 @@ const Avatar = ({
   const initials = children || fallback;
 
   return (
-    <Box
-      className={clsx(sizeClass, className)}
-      role="img"
-      aria-label={alt}
-    >
+    <Box className={clsx(sizeClass, className)} role="img" aria-label={alt}>
       {initials}
     </Box>
   );

package/src/components/Badge/Badge.tsx

@@ -8,16 +8,18 @@ import {
 } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 export type BadgeSize = 'small' | 'medium' | 'large';
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  dot?: boolean;
-  children?: React.ReactNode;
-}
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    children?: React.ReactNode;
+  };
 
 const Badge = ({
   variant = 'default',

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -9,6 +9,7 @@ import {
   breadcrumbCurrent,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 type BreadcrumbItem = {
   label: string;
@@ -16,17 +17,13 @@ type BreadcrumbItem = {
   current?: boolean;
 };
 
-type BreadcrumbProps = {
-  items: BreadcrumbItem[];
-  className?: string;
-  separator?: string;
-};
+type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    items: BreadcrumbItem[];
+    separator?: string;
+  };
 
-const Breadcrumb = ({
-  items,
-  className,
-  separator = '/',
-}: BreadcrumbProps) => {
+const Breadcrumb = ({ items, className, separator = '/' }: BreadcrumbProps) => {
   return (
     <Box
       as="nav"

package/src/components/Button/Button.tsx

@@ -2,13 +2,15 @@ import clsx from 'clsx';
 import { button, buttonVariants } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant: 'primary' | 'secondary';
-  children?: React.ReactNode;
-  label?: string;
-  fullWidth?: boolean;
-};
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  Sprinkles & {
+    variant: 'primary' | 'secondary';
+    children?: React.ReactNode;
+    label?: string;
+    fullWidth?: boolean;
+  };
 
 const Button = ({ label, ...props }: ButtonProps) => {
   return (
@@ -16,11 +18,7 @@ const Button = ({ label, ...props }: ButtonProps) => {
       as="button"
       borderRadius="large"
       width={props.fullWidth ? '100%' : undefined}
-      className={clsx(
-        buttonVariants[props.variant],
-        button,
-        props.className,
-      )}
+      className={clsx(buttonVariants[props.variant], button, props.className)}
       {...props}
     >
       {props.children || label}

package/src/components/Card/Card.tsx

@@ -2,12 +2,14 @@ import clsx from 'clsx';
 import { card, cardVariants } from './styles.css';
 import React from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
-  variant?: 'elevated' | 'outlined' | 'filled';
-  children?: React.ReactNode;
-  padding?: 'none' | 'small' | 'medium' | 'large';
-};
+type CardProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    variant?: 'elevated' | 'outlined' | 'filled';
+    children?: React.ReactNode;
+    padding?: 'none' | 'small' | 'medium' | 'large';
+  };
 
 const Card = ({
   variant = 'elevated',
@@ -19,11 +21,7 @@ const Card = ({
       as="div"
       borderRadius="large"
       padding={padding !== 'none' ? padding : undefined}
-      className={clsx(
-        cardVariants[variant],
-        card,
-        props.className,
-      )}
+      className={clsx(cardVariants[variant], card, props.className)}
       {...props}
     >
       {props.children}

package/src/components/Checkbox/Checkbox.tsx

@@ -2,14 +2,13 @@ import clsx from 'clsx';
 import React, { forwardRef, useEffect, useRef } from 'react';
 import { checkboxContainer, checkboxInput, checkboxLabel } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
-type CheckboxProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'type'
-> & {
-  label?: string;
-  indeterminate?: boolean;
-};
+type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> &
+  Sprinkles & {
+    label?: string;
+    indeterminate?: boolean;
+  };
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ label, className, indeterminate, ...props }, ref) => {
@@ -47,7 +46,11 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           style={{ width: '18px', height: '18px' }}
           {...props}
         />
-        {label && <Box as="span" className={checkboxLabel}>{label}</Box>}
+        {label && (
+          <Box as="span" className={checkboxLabel}>
+            {label}
+          </Box>
+        )}
       </Box>
     );
   },

package/src/components/Collapse/Collapse.tsx

@@ -6,17 +6,18 @@ import {
   collapseAnimation,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type CollapseAnimation = 'height' | 'opacity' | 'both';
 
-export interface CollapseProps {
-  isOpen: boolean;
-  children: React.ReactNode;
-  animation?: CollapseAnimation;
-  duration?: number;
-  className?: string;
-  onAnimationEnd?: () => void;
-}
+export type CollapseProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    isOpen: boolean;
+    children: React.ReactNode;
+    animation?: CollapseAnimation;
+    duration?: number;
+    onAnimationEnd?: () => void;
+  };
 
 const Collapse = ({
   isOpen,
@@ -26,7 +27,9 @@ const Collapse = ({
   className,
   onAnimationEnd,
 }: CollapseProps) => {
-  const [height, setHeight] = useState<number | undefined>(isOpen ? undefined : 0);
+  const [height, setHeight] = useState<number | undefined>(
+    isOpen ? undefined : 0,
+  );
   const [isAnimating, setIsAnimating] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
 

package/src/components/Combobox/Combobox.tsx

@@ -16,6 +16,7 @@ import {
   comboboxErrorMessage,
 } from './styles.css';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export interface ComboboxOption {
   value: string;
@@ -23,23 +24,30 @@ export interface ComboboxOption {
   disabled?: boolean;
 }
 
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
-  label?: string;
-  options: ComboboxOption[];
-  value?: string;
-  onChange?: (value: string, option: ComboboxOption | null) => void;
-  onInputChange?: (inputValue: string) => void;
-  placeholder?: string;
-  hint?: string;
-  error?: boolean;
-  errorMessage?: string;
-  fullWidth?: boolean;
-  clearable?: boolean;
-  disabled?: boolean;
-  filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
-}
+export type ComboboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'value'
+> &
+  Sprinkles & {
+    label?: string;
+    options: ComboboxOption[];
+    value?: string;
+    onChange?: (value: string, option: ComboboxOption | null) => void;
+    onInputChange?: (inputValue: string) => void;
+    placeholder?: string;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    fullWidth?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
+  };
 
-const defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {
+const defaultFilterFn = (
+  option: ComboboxOption,
+  inputValue: string,
+): boolean => {
   return option.label.toLowerCase().includes(inputValue.toLowerCase());
 };
 
@@ -66,7 +74,7 @@ const Combobox = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const selectedOption = options.find(opt => opt.value === value);
+  const selectedOption = options.find((opt) => opt.value === value);
 
   useEffect(() => {
     if (selectedOption) {
@@ -76,11 +84,16 @@ const Combobox = ({
     }
   }, [selectedOption, isOpen]);
 
-  const filteredOptions = options.filter(option => filterFn(option, inputValue));
+  const filteredOptions = options.filter((option) =>
+    filterFn(option, inputValue),
+  );
 
   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);
         if (selectedOption) {
           setInputValue(selectedOption.label);
@@ -108,7 +121,7 @@ const Combobox = ({
 
   const handleOptionClick = (option: ComboboxOption) => {
     if (option.disabled) return;
-    
+
     setInputValue(option.label);
     setIsOpen(false);
     onChange?.(option.value, option);
@@ -131,17 +144,21 @@ const Combobox = ({
         if (!isOpen) {
           setIsOpen(true);
         }
-        setHighlightedIndex(prev => 
-          prev < filteredOptions.length - 1 ? prev + 1 : prev
+        setHighlightedIndex((prev) =>
+          prev < filteredOptions.length - 1 ? prev + 1 : prev,
         );
         break;
       case 'ArrowUp':
         e.preventDefault();
-        setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
         break;
       case 'Enter':
         e.preventDefault();
-        if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+        if (
+          isOpen &&
+          highlightedIndex >= 0 &&
+          filteredOptions[highlightedIndex]
+        ) {
           handleOptionClick(filteredOptions[highlightedIndex]);
         } else {
           setIsOpen(!isOpen);
@@ -158,16 +175,21 @@ const Combobox = ({
     }
   };
 
-  const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
+  const displayValue =
+    selectedOption && !isOpen ? selectedOption.label : inputValue;
 
   return (
-    <Box className={comboboxContainer} ref={containerRef} width={fullWidth ? '100%' : undefined}>
+    <Box
+      className={comboboxContainer}
+      ref={containerRef}
+      width={fullWidth ? '100%' : undefined}
+    >
       {label && (
         <Box as="label" className={comboboxLabel}>
           {label}
         </Box>
       )}
-      
+
       <Box position="relative">
         <Box
           as="input"
@@ -188,10 +210,14 @@ const Combobox = ({
           aria-expanded={isOpen}
           aria-autocomplete="list"
           aria-controls={isOpen ? 'combobox-listbox' : undefined}
-          aria-activedescendant={highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined}
+          aria-activedescendant={
+            highlightedIndex >= 0
+              ? `option-${filteredOptions[highlightedIndex]?.value}`
+              : undefined
+          }
           {...props}
         />
-        
+
         {clearable && inputValue && !disabled && (
           <Box
             as="button"
@@ -203,7 +229,7 @@ const Combobox = ({
             ×
           </Box>
         )}
-        
+
         <Box className={comboboxArrow} aria-hidden="true">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
             <path d="M6 8L1 3h10z" />
@@ -238,7 +264,10 @@ const Combobox = ({
                 aria-selected={option.value === value}
                 aria-disabled={option.disabled}
                 style={{
-                  backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : undefined,
+                  backgroundColor:
+                    index === highlightedIndex
+                      ? 'var(--highlight-color, #f3f4f6)'
+                      : undefined,
                 }}
               >
                 {option.label}

package/src/components/Container/Container.tsx

@@ -1,15 +1,16 @@
 import React, { forwardRef } from 'react';
 import Box from '../Box';
+import { Sprinkles } from '../../styles/sprinkles.css';
 
 export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
-export interface ContainerProps {
+export type ContainerProps = Sprinkles & {
   size?: ContainerSize;
   centerContent?: boolean;
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
-}
+};
 
 const sizeMap: Record<ContainerSize, string> = {
   sm: '640px',
@@ -39,7 +40,7 @@ const Container = forwardRef<HTMLElement, ContainerProps>(
         {children}
       </Box>
     );
-  }
+  },
 );
 
 Container.displayName = 'Container';