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

package/src/components/Popover/Popover.tsx

@@ -14,33 +14,7 @@ import {
   popoverFooter,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type PopoverPosition =
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight';
-export type PopoverTriggerType = 'click' | 'hover';
-
-export type PopoverProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    trigger: React.ReactNode;
-    children: React.ReactNode;
-    position?: PopoverPosition;
-    title?: string;
-    footer?: React.ReactNode;
-    showArrow?: boolean;
-    triggerType?: PopoverTriggerType;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-  };
+import { type PopoverProps } from './Popover.types';
 
 const Popover = ({
   trigger,

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type PopoverPosition =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight';
+export type PopoverTriggerType = 'click' | 'hover';
+
+export type PopoverProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    position?: PopoverPosition;
+    title?: string;
+    footer?: React.ReactNode;
+    showArrow?: boolean;
+    triggerType?: PopoverTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+  };

package/src/components/Popover/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';
 

package/src/components/Progress/Progress.stories.tsx

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

package/src/components/Progress/Progress.tsx

@@ -7,16 +7,7 @@ import {
   progressLabel,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type ProgressProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    value: number;
-    max?: number;
-    label?: string;
-    showPercentage?: boolean;
-    variant?: 'default' | 'success' | 'warning' | 'error';
-  };
+import { type ProgressProps } from './Progress.types';
 
 const Progress = ({
   value,

package/src/components/Progress/Progress.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ProgressVariant = 'default' | 'success' | 'warning' | 'error';
+
+export type ProgressProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    value: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    variant?: ProgressVariant;
+  };

package/src/components/Radio/Radio.tsx

@@ -8,25 +8,14 @@ import {
   radioGroupHorizontal,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type RadioContextType = {
-  name?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-};
+import {
+  type RadioProps,
+  type RadioGroupProps,
+  type RadioContextType,
+} from './Radio.types';
 
 const RadioContext = createContext<RadioContextType>({});
 
-type RadioProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'value' | 'onChange'
-> &
-  Sprinkles & {
-    label?: string;
-    value: string;
-  };
-
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
   ({ label, className, value, ...props }, ref) => {
     const context = useContext(RadioContext);
@@ -72,15 +61,6 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
 Radio.displayName = 'Radio';
 
-type RadioGroupProps = {
-  children: React.ReactNode;
-  name: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  layout?: 'vertical' | 'horizontal';
-  className?: string;
-};
-
 const RadioGroup = ({
   children,
   name,

package/src/components/Radio/Radio.types.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type RadioLayout = 'vertical' | 'horizontal';
+
+export type RadioContextType = {
+  name?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+export type RadioProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'value' | 'onChange'
+> &
+  Sprinkles & {
+    label?: string;
+    value: string;
+  };
+
+export type RadioGroupProps = {
+  children: React.ReactNode;
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  layout?: RadioLayout;
+  className?: string;
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -6,17 +6,7 @@ import {
   scrollAreaViewport,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
-
-export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    orientation?: ScrollAreaOrientation;
-    maxHeight?: string | number;
-    maxWidth?: string | number;
-  };
+import { type ScrollAreaProps } from './ScrollArea.types';
 
 const ScrollArea = ({
   children,

package/src/components/ScrollArea/ScrollArea.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+
+export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    orientation?: ScrollAreaOrientation;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+  };

package/src/components/ScrollArea/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/Select/Select.stories.tsx

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

package/src/components/Select/Select.tsx

@@ -1,22 +1,8 @@
 import clsx from 'clsx';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { select, selectLabel, selectWrapper } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type SelectOption = {
-  value: string;
-  label: string;
-  disabled?: boolean;
-};
-
-type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> &
-  Sprinkles & {
-    label?: string;
-    options: SelectOption[];
-    error?: boolean;
-    fullWidth?: boolean;
-  };
+import { type SelectProps } from './Select.types';
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (

package/src/components/Select/Select.types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> &
+  Sprinkles & {
+    label?: string;
+    options: SelectOption[];
+    error?: boolean;
+    fullWidth?: boolean;
+  };

package/src/components/Select/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/Separator/Separator.tsx

@@ -2,15 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { separator, separatorOrientation } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type SeparatorOrientation = 'horizontal' | 'vertical';
-
-export type SeparatorProps = React.HTMLAttributes<HTMLHRElement> &
-  Sprinkles & {
-    orientation?: SeparatorOrientation;
-    decorative?: boolean;
-  };
+import { type SeparatorProps } from './Separator.types';
 
 const Separator = ({
   orientation = 'horizontal',

package/src/components/Separator/Separator.types.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export type SeparatorProps = React.HTMLAttributes<HTMLHRElement> &
+  Sprinkles & {
+    orientation?: SeparatorOrientation;
+    decorative?: boolean;
+  };

package/src/components/Separator/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/Skeleton/Skeleton.tsx

@@ -7,21 +7,7 @@ import {
   skeletonAnimation,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
-export type SkeletonSize = 'small' | 'medium' | 'large';
-export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
-
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    variant?: SkeletonVariant;
-    size?: SkeletonSize;
-    animation?: SkeletonAnimation;
-    width?: string | number;
-    height?: string | number;
-    count?: number;
-  };
+import { type SkeletonProps } from './Skeleton.types';
 
 const Skeleton = ({
   variant = 'text',

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
+export type SkeletonSize = 'small' | 'medium' | 'large';
+export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    variant?: SkeletonVariant;
+    size?: SkeletonSize;
+    animation?: SkeletonAnimation;
+    width?: string | number;
+    height?: string | number;
+    count?: number;
+  };

package/src/components/Skeleton/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';
 

package/src/components/Spinner/Spinner.tsx

@@ -2,23 +2,7 @@ import clsx from 'clsx';
 import { spinner, spinnerColors, spinnerSizes } from './styles.css';
 import React from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type SpinnerColor =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info';
-export type SpinnerSize = 'small' | 'medium' | 'large';
-
-export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    color?: SpinnerColor;
-    size?: SpinnerSize;
-    role?: string;
-  };
+import { type SpinnerProps } from './Spinner.types';
 
 const Spinner = ({
   color = 'primary',

package/src/components/Spinner/Spinner.types.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type SpinnerColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info';
+export type SpinnerSize = 'small' | 'medium' | 'large';
+
+export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    color?: SpinnerColor;
+    size?: SpinnerSize;
+    role?: string;
+  };

package/src/components/Stack/Stack.tsx

@@ -1,26 +1,6 @@
 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 type StackProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    direction?: StackDirection;
-    align?: StackAlign;
-    justify?: StackJustify;
-    gap?: 'none' | 'small' | 'medium' | 'large';
-    wrap?: boolean;
-    children?: React.ReactNode;
-  };
+import { type StackProps, type StackAlign, type StackJustify } from './Stack.types';
 
 const alignMap: Record<StackAlign, string> = {
   start: 'flex-start',

package/src/components/Stack/Stack.types.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+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 type StackGap = 'none' | 'small' | 'medium' | 'large';
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    direction?: StackDirection;
+    align?: StackAlign;
+    justify?: StackJustify;
+    gap?: StackGap;
+    wrap?: boolean;
+    children?: React.ReactNode;
+  };

package/src/components/Stepper/Stepper.stories.tsx

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

package/src/components/Stepper/Stepper.tsx

@@ -17,26 +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';
-
-export interface Step {
-  title: string;
-  description?: string;
-  status?: StepStatus;
-}
-
-export type StepperProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    steps: Step[];
-    currentStep?: number;
-    orientation?: StepperOrientation;
-    showConnectors?: boolean;
-    onStepClick?: (stepIndex: number) => void;
-    clickable?: boolean;
-  };
+import { type StepperProps, type StepStatus } from './Stepper.types';
 
 const Stepper = ({
   steps,

package/src/components/Stepper/Stepper.types.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepStatus = 'pending' | 'current' | 'completed';
+
+export interface Step {
+  title: string;
+  description?: string;
+  status?: StepStatus;
+}
+
+export type StepperProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    steps: Step[];
+    currentStep?: number;
+    orientation?: StepperOrientation;
+    showConnectors?: boolean;
+    onStepClick?: (stepIndex: number) => void;
+    clickable?: boolean;
+  };

package/src/components/Stepper/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/Table/Table.tsx

@@ -11,17 +11,18 @@ import {
   tableContainer,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
+import {
+  type TableProps,
+  type TheadProps,
+  type TbodyProps,
+  type TfootProps,
+  type TrProps,
+  type ThProps,
+  type TdProps,
+} from './Table.types';
 
-// Context to pass striping info to rows
 const TableContext = createContext<{ striped?: boolean }>({});
 
-type TableProps = React.HTMLAttributes<HTMLTableElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    striped?: boolean;
-  };
-
 const TableComponent = ({
   children,
   striped = false,
@@ -39,11 +40,6 @@ const TableComponent = ({
   );
 };
 
-type TheadProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Thead = ({ children, className }: TheadProps) => {
   return (
     <Box as="thead" className={clsx(thead, className)}>
@@ -52,11 +48,6 @@ const Thead = ({ children, className }: TheadProps) => {
   );
 };
 
-type TbodyProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tbody = ({ children, className }: TbodyProps) => {
   return (
     <Box as="tbody" className={clsx(tbody, className)}>
@@ -65,11 +56,6 @@ const Tbody = ({ children, className }: TbodyProps) => {
   );
 };
 
-type TfootProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tfoot = ({ children, className }: TfootProps) => {
   return (
     <Box as="tfoot" className={clsx(tfoot, className)}>
@@ -78,11 +64,6 @@ const Tfoot = ({ children, className }: TfootProps) => {
   );
 };
 
-type TrProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tr = ({ children, className }: TrProps) => {
   const { striped } = useContext(TableContext);
   return (
@@ -95,11 +76,6 @@ const Tr = ({ children, className }: TrProps) => {
   );
 };
 
-type ThProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
 const Th = ({ children, className }: ThProps) => {
   return (
     <Box as="th" className={clsx(th, className)}>
@@ -108,13 +84,6 @@ const Th = ({ children, className }: ThProps) => {
   );
 };
 
-type TdProps = {
-  children?: React.ReactNode;
-  className?: string;
-  colSpan?: number;
-  rowSpan?: number;
-};
-
 const Td = ({ children, className, colSpan, rowSpan }: TdProps) => {
   return (
     <Box