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

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "type": "module",
   "sideEffects": [
+    "*.css.mjs",
     "*.css.js"
   ],
   "repository": {
@@ -11,16 +12,24 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
     },
     "./layers.css": {
-      "types": "./dist/styles/layers.css.d.ts",
-      "import": "./dist/styles/layers.css.js"
+      "types": "./dist/styles/layers.css.d.mts",
+      "import": "./dist/styles/layers.css.mjs"
+    },
+    "./reset.css": {
+      "types": "./dist/styles/reset.css.d.mts",
+      "import": "./dist/styles/reset.css.mjs"
     },
     "./theme.css": {
-      "types": "./dist/styles/theme.css.d.ts",
-      "import": "./dist/styles/theme.css.js"
+      "types": "./dist/styles/theme.css.d.mts",
+      "import": "./dist/styles/theme.css.mjs"
+    },
+    "./sprinkles.css": {
+      "types": "./dist/styles/sprinkles.css.d.mts",
+      "import": "./dist/styles/sprinkles.css.mjs"
     }
   },
   "files": [
@@ -75,8 +84,8 @@
     "@rsbuild/core": "^1.6.14"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --project tsconfig.build.json --noCheck --skipLibCheck || true",
-    "dev": "tsc --project tsconfig.build.json --watch --noCheck --skipLibCheck || true",
+    "build": "tsdown src/index.ts src/styles/layers.css.ts src/styles/reset.css.ts src/styles/theme.css.ts src/styles/sprinkles.css.ts --format esm --dts --clean",
+    "dev": "tsdown src/index.ts src/styles/layers.css.ts src/styles/reset.css.ts src/styles/theme.css.ts src/styles/sprinkles.css.ts --format esm --dts --watch",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test": "vitest --config=vitest.browser.config.ts",

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/Box/reset.css.ts

@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { componentsLayer } from '../../styles/layers.css';
+import { resetLayer } from '../../styles/layers.css';
 
 export const reset = style({
   '@layer': {
-    [componentsLayer]: {
+    [resetLayer]: {
       margin: 0,
       padding: 0,
       border: 0,

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';

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"