@jordan-mace/chaser-design-system 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "type": "module",
   "style": "./dist/index.css",
   "sideEffects": true,

package/src/components/Accordion/Accordion.tsx

@@ -9,26 +9,18 @@ import {
   accordionGroup,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type AccordionContextType = {
-  allowMultiple?: boolean;
-  expandedItems: Set<string>;
-  toggleItem: (value: string) => void;
-};
+import {
+  type AccordionContextType,
+  type AccordionProps,
+  type AccordionItemProps,
+} from './Accordion.types';
 
-const AccordionContext = createContext<AccordionContextType>({
+export const AccordionContext = createContext<AccordionContextType>({
   allowMultiple: false,
   expandedItems: new Set(),
-  toggleItem: () => {},
+  toggleItem: () => { },
 });
 
-type AccordionProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    allowMultiple?: boolean;
-  };
-
 const Accordion = ({
   children,
   allowMultiple = false,
@@ -67,13 +59,6 @@ const Accordion = ({
   );
 };
 
-type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    value: string;
-    title: string;
-    children: React.ReactNode;
-  };
-
 const AccordionItem = ({
   value,
   title,

package/src/components/Accordion/Accordion.types.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type AccordionContextType = {
+  allowMultiple?: boolean;
+  expandedItems: Set<string>;
+  toggleItem: (value: string) => void;
+};
+
+export type AccordionProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    allowMultiple?: boolean;
+  };
+
+export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    value: string;
+    title: string;
+    children: React.ReactNode;
+  };

package/src/components/Accordion/index.ts

@@ -1 +1,2 @@
-export { default as Accordion } from './Accordion';
+export { default as Accordion, AccordionContext } from './Accordion';
+export type { AccordionProps, AccordionContextType, AccordionItemProps } from './Accordion';

package/src/components/Alert/Alert.tsx

@@ -7,15 +7,7 @@ import {
 } from './styles.css';
 import React from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type AlertProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    severity?: 'success' | 'warning' | 'error' | 'info';
-    dismissible?: boolean;
-    onDismiss?: () => void;
-    children?: React.ReactNode;
-  };
+import { type AlertProps } from './Alert.types';
 
 const Alert = ({
   severity = 'info',

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type AlertSeverity = 'success' | 'warning' | 'error' | 'info';
+
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    severity?: AlertSeverity;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+  };

package/src/components/AspectRatio/AspectRatio.tsx

@@ -1,12 +1,6 @@
 import React, { forwardRef } from 'react';
-import Box, { type BoxProps } from '../Box';
-
-export type AspectRatioValue = '1/1' | '4/3' | '16/9' | '21/9' | number;
-
-export interface AspectRatioProps extends BoxProps {
-  ratio?: AspectRatioValue;
-  children?: React.ReactNode;
-}
+import Box from '../Box';
+import { type AspectRatioProps } from './AspectRatio.types';
 
 const AspectRatio = forwardRef<HTMLElement, AspectRatioProps>(
   ({ ratio = '1/1', children, ...props }, ref) => {

package/src/components/AspectRatio/AspectRatio.types.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+
+export type AspectRatioValue = '1/1' | '4/3' | '16/9' | '21/9' | number;
+
+export interface AspectRatioProps extends BoxProps {
+  ratio?: AspectRatioValue;
+  children?: React.ReactNode;
+}

package/src/components/Avatar/Avatar.tsx

@@ -7,16 +7,7 @@ import {
   avatarWrapper,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type AvatarProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    alt?: string;
-    src?: string;
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    children?: React.ReactNode;
-    fallback?: string;
-  };
+import { type AvatarProps } from './Avatar.types';
 
 const Avatar = ({
   alt,

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type AvatarSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export type AvatarProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    alt?: string;
+    src?: string;
+    size?: AvatarSize;
+    children?: React.ReactNode;
+    fallback?: string;
+  };

package/src/components/Badge/Badge.tsx

@@ -6,20 +6,8 @@ import {
   badgeDot,
   badgeDotSizes,
 } 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 type BadgeProps = React.HTMLAttributes<HTMLSpanElement> &
-  Sprinkles & {
-    variant?: BadgeVariant;
-    size?: BadgeSize;
-    dot?: boolean;
-    children?: React.ReactNode;
-  };
+import { type BadgeProps } from './Badge.types';
 
 const Badge = ({
   variant = 'default',

package/src/components/Badge/Badge.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'small' | 'medium' | 'large';
+
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    children?: React.ReactNode;
+  };

package/src/components/Box/Box.tsx

@@ -2,13 +2,7 @@ import clsx from 'clsx';
 import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
 import { reset } from './reset.css';
 import React, { forwardRef } from 'react';
-
-type BoxProps = Sprinkles & {
-  as?: React.ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  [key: string]: unknown;
-};
+import { type BoxProps } from './Box.types';
 
 const Box = forwardRef<HTMLElement, BoxProps>((props, ref) => {
   const { as: Component = 'div', className, children, ...rest } = props;
@@ -69,4 +63,4 @@ const Box = forwardRef<HTMLElement, BoxProps>((props, ref) => {
 Box.displayName = 'Box';
 
 export default Box;
-export type { BoxProps };
+export type { BoxProps } from './Box.types';

package/src/components/Box/Box.types.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type BoxProps = Sprinkles & {
+  as?: React.ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  [key: string]: unknown;
+};

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Breadcrumb } from '.';
-import React from 'react';
-
 const meta = {
   title: 'Components/Breadcrumb',
   component: Breadcrumb,

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import React from 'react';
 import {
   breadcrumb,
   breadcrumbList,
@@ -9,19 +8,7 @@ import {
   breadcrumbCurrent,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type BreadcrumbItem = {
-  label: string;
-  href?: string;
-  current?: boolean;
-};
-
-type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    items: BreadcrumbItem[];
-    separator?: string;
-  };
+import { type BreadcrumbProps } from './Breadcrumb.types';
 
 const Breadcrumb = ({ items, className, separator = '/' }: BreadcrumbProps) => {
   return (

package/src/components/Breadcrumb/Breadcrumb.types.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  current?: boolean;
+};
+
+export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    items: BreadcrumbItem[];
+    separator?: string;
+  };

package/src/components/Button/Button.tsx

@@ -2,15 +2,7 @@ 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> &
-  Sprinkles & {
-    variant: 'primary' | 'secondary';
-    children?: React.ReactNode;
-    label?: string;
-    fullWidth?: boolean;
-  };
+import { type ButtonProps } from './Button.types';
 
 const Button = ({ label, ...props }: ButtonProps) => {
   return (

package/src/components/Button/Button.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ButtonVariant = 'primary' | 'secondary';
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  Sprinkles & {
+    variant: ButtonVariant;
+    children?: React.ReactNode;
+    label?: string;
+    fullWidth?: boolean;
+  };

package/src/components/Card/Card.tsx

@@ -2,14 +2,7 @@ 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> &
-  Sprinkles & {
-    variant?: 'elevated' | 'outlined' | 'filled';
-    children?: React.ReactNode;
-    padding?: 'none' | 'small' | 'medium' | 'large';
-  };
+import { type CardProps } from './Card.types';
 
 const Card = ({
   variant = 'elevated',

package/src/components/Card/Card.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardPadding = 'none' | 'small' | 'medium' | 'large';
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    variant?: CardVariant;
+    children?: React.ReactNode;
+    padding?: CardPadding;
+  };

package/src/components/Checkbox/Checkbox.tsx

@@ -2,13 +2,7 @@ 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'> &
-  Sprinkles & {
-    label?: string;
-    indeterminate?: boolean;
-  };
+import { type CheckboxProps } from './Checkbox.types';
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ label, className, indeterminate, ...props }, ref) => {

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> &
+  Sprinkles & {
+    label?: string;
+    indeterminate?: boolean;
+  };

package/src/components/Collapse/Collapse.stories.tsx

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import React from 'react';
 import { Collapse } from '.';
 import { Box } from '../Box';
 

package/src/components/Collapse/Collapse.tsx

@@ -1,23 +1,11 @@
 import clsx from 'clsx';
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   collapseContainer,
   collapseContent,
-  collapseAnimation,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type CollapseAnimation = 'height' | 'opacity' | 'both';
-
-export type CollapseProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    isOpen: boolean;
-    children: React.ReactNode;
-    animation?: CollapseAnimation;
-    duration?: number;
-    onAnimationEnd?: () => void;
-  };
+import { type CollapseProps } from './Collapse.types';
 
 const Collapse = ({
   isOpen,

package/src/components/Collapse/Collapse.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type CollapseAnimation = 'height' | 'opacity' | 'both';
+
+export type CollapseProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    isOpen: boolean;
+    children: React.ReactNode;
+    animation?: CollapseAnimation;
+    duration?: number;
+    onAnimationEnd?: () => void;
+  };

package/src/components/Collapse/styles.css.ts

@@ -1,5 +1,4 @@
-import { style, styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
+import { styleVariants, keyframes } from '@vanilla-extract/css';
 import { styleWithLayer } from '../../styles/utils';
 
 const collapseIn = keyframes({

package/src/components/Combobox/Combobox.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import React from 'react';
+
 import { Combobox } from '.';
 
 const meta = {

package/src/components/Combobox/Combobox.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   comboboxContainer,
   comboboxInput,
@@ -16,33 +16,7 @@ import {
   comboboxErrorMessage,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export interface ComboboxOption {
-  value: string;
-  label: string;
-  disabled?: 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;
-  };
+import { type ComboboxProps, type ComboboxOption } from './Combobox.types';
 
 const defaultFilterFn = (
   option: ComboboxOption,

package/src/components/Combobox/Combobox.types.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: 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;
+  };

package/src/components/Combobox/styles.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/Container/Container.tsx

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

package/src/components/Container/Container.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export type ContainerProps = Sprinkles & {
+  size?: ContainerSize;
+  centerContent?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};

package/src/components/Divider/Divider.tsx

@@ -5,18 +5,8 @@ import {
   dividerSizes,
   dividerVerticalSizes,
 } 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 type DividerProps = React.HTMLAttributes<HTMLHRElement> &
-  Sprinkles & {
-    orientation?: DividerOrientation;
-    size?: DividerSize;
-  };
+import { type DividerProps } from './Divider.types';
 
 const Divider = ({
   orientation = 'horizontal',

package/src/components/Divider/Divider.types.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSize = 'small' | 'medium' | 'large';
+
+export type DividerProps = React.HTMLAttributes<HTMLHRElement> &
+  Sprinkles & {
+    orientation?: DividerOrientation;
+    size?: DividerSize;
+  };

package/src/components/Drawer/Drawer.tsx

@@ -11,24 +11,7 @@ import {
   drawerFooter,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
-export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
-
-type DrawerPropsBase = React.HTMLAttributes<HTMLDivElement> & {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  position?: DrawerPosition;
-  size?: DrawerSize;
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  showCloseButton?: boolean;
-  closeOnOverlayClick?: boolean;
-};
-
-export type DrawerProps = DrawerPropsBase & Sprinkles;
+import { type DrawerProps, type DrawerPosition, type DrawerSize } from './Drawer.types';
 
 const sizeMap: Record<DrawerPosition, Record<DrawerSize, string>> = {
   left: {

package/src/components/Drawer/Drawer.types.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
+
+type DrawerPropsBase = React.HTMLAttributes<HTMLDivElement> & {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  position?: DrawerPosition;
+  size?: DrawerSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+};
+
+export type DrawerProps = DrawerPropsBase & Sprinkles;

package/src/components/Drawer/styles.css.ts

@@ -1,4 +1,4 @@
-import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { styleVariants, keyframes } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';