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

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,
   );
 };
 

package/src/index.ts

@@ -1 +1,6 @@
-export * from './components'
+export * from './components';
+
+import './styles/layers.css';
+import './styles/reset.css';
+import './styles/theme.css';
+import './styles/sprinkles.css';

package/dist/components/Accordion/Accordion.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-type AccordionProps = {
-    children: React.ReactNode;
-    allowMultiple?: boolean;
-    className?: string;
-};
-type AccordionItemProps = {
-    value: string;
-    title: string;
-    children: React.ReactNode;
-    className?: string;
-};
-declare const AccordionComponent: (({ children, allowMultiple, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
-    Item: ({ value, title, children, className, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default AccordionComponent;

package/dist/components/Accordion/Accordion.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { createContext, useContext, useState, useCallback } from 'react';
-import { accordionItem, accordionHeader, accordionContent, accordionIcon, accordionIconExpanded, accordionGroup, } from './styles.css';
-import Box from '../Box';
-const AccordionContext = createContext({
-    allowMultiple: false,
-    expandedItems: new Set(),
-    toggleItem: () => { },
-});
-const Accordion = ({ children, allowMultiple = false, className, }) => {
-    const [expandedItems, setExpandedItems] = useState(new Set());
-    const toggleItem = (value) => {
-        setExpandedItems((prev) => {
-            const newSet = new Set(prev);
-            if (newSet.has(value)) {
-                newSet.delete(value);
-            }
-            else {
-                if (allowMultiple) {
-                    newSet.add(value);
-                }
-                else {
-                    return new Set([value]);
-                }
-            }
-            return newSet;
-        });
-    };
-    return (_jsx(AccordionContext.Provider, { value: { allowMultiple, expandedItems, toggleItem }, children: _jsx(Box, { className: clsx(accordionGroup, className), width: "100%", children: children }) }));
-};
-const AccordionItem = ({ value, title, children, className, }) => {
-    const { expandedItems, toggleItem } = useContext(AccordionContext);
-    const isExpanded = expandedItems.has(value);
-    const toggleExpanded = useCallback(() => {
-        toggleItem(value);
-    }, [value, toggleItem]);
-    return (_jsxs(Box, { as: "div", className: clsx(accordionItem, className), width: "100%", marginBottom: "small", border: "small", borderRadius: "large", overflow: "hidden", children: [_jsxs(Box, { as: "button", onClick: toggleExpanded, className: accordionHeader, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "small", cursor: "pointer", style: { userSelect: 'none' }, fontSize: "14px", fontWeight: "500", color: "c5-700", "aria-expanded": isExpanded, "aria-controls": `accordion-content-${value}`, children: [_jsx(Box, { as: "span", children: title }), _jsx(Box, { as: "span", className: clsx(accordionIcon, isExpanded && accordionIconExpanded), fontSize: "12px", display: "flex", alignItems: "center", justifyContent: "center", "aria-hidden": "true", children: "\u25BC" })] }), _jsx(Box, { as: "div", id: `accordion-content-${value}`, className: clsx(accordionContent[isExpanded ? 'expanded' : 'collapsed']), padding: "small", fontSize: "14px", color: "c5-700", role: "region", children: children })] }));
-};
-const AccordionComponent = Object.assign(Accordion, {
-    Item: AccordionItem,
-});
-export default AccordionComponent;

package/dist/components/Accordion/index.d.ts

@@ -1 +0,0 @@
-export { default as Accordion } from './Accordion';

package/dist/components/Accordion/index.js

@@ -1 +0,0 @@
-export { default as Accordion } from './Accordion';

package/dist/components/Accordion/styles.css.d.ts

@@ -1,7 +0,0 @@
-export declare const accordion: string;
-export declare const accordionItem: string;
-export declare const accordionHeader: string;
-export declare const accordionContent: Record<"expanded" | "collapsed", string>;
-export declare const accordionIcon: string;
-export declare const accordionIconExpanded: string;
-export declare const accordionGroup: string;