@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import {
+  tooltipContainer,
+  tooltipContent,
+  tooltipPositions,
+  tooltipArrow,
+  tooltipArrowTop,
+  tooltipArrowBottom,
+  tooltipArrowLeft,
+  tooltipArrowRight,
+} from './styles.css';
+import React, { useState } from 'react';
+import Box from '../Box';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+  content: string;
+  position?: TooltipPosition;
+  showArrow?: boolean;
+  children: React.ReactNode;
+}
+
+const Tooltip = ({
+  content,
+  position = 'top',
+  showArrow = true,
+  children,
+  ...props
+}: TooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const arrowStyle = {
+    top: position === 'bottom' ? tooltipArrowBottom : undefined,
+    bottom: position === 'top' ? tooltipArrowTop : undefined,
+    left: position === 'right' ? tooltipArrowLeft : undefined,
+    right: position === 'left' ? tooltipArrowRight : undefined,
+  };
+
+  return (
+    <Box
+      as="div"
+      className={clsx(tooltipContainer, props.className)}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+      {...props}
+    >
+      {children}
+      <Box
+        as="div"
+        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)}
+          />
+        )}
+        {content}
+      </Box>
+    </Box>
+  );
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPosition } from './Tooltip';

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

@@ -0,0 +1,94 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const tooltipPositions = styleVariants({
+  top: {
+    bottom: '100%',
+    marginBottom: '0.25rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  bottom: {
+    top: '100%',
+    marginTop: '0.25rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  left: {
+    right: '100%',
+    marginRight: '0.25rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  right: {
+    left: '100%',
+    marginLeft: '0.25rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+});
+
+export const tooltipContainer = styleWithLayer({
+  position: 'relative',
+  display: 'inline-flex',
+});
+
+export const tooltipContent = styleWithLayer({
+  position: 'absolute',
+  backgroundColor: vars.colors.textPrimary,
+  color: vars.colors.backgroundDefault,
+  padding: '0.375rem 0.75rem',
+  borderRadius: '0.375rem',
+  fontSize: '0.75rem',
+  whiteSpace: 'nowrap',
+  zIndex: 1001,
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  opacity: 0,
+  visibility: 'hidden',
+  transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
+  pointerEvents: 'none',
+  selectors: {
+    '&[data-visible="true"]': {
+      opacity: 1,
+      visibility: 'visible',
+    },
+  },
+});
+
+export const tooltipArrow = styleWithLayer({
+  position: 'absolute',
+  width: '0',
+  height: '0',
+  borderStyle: 'solid',
+  borderWidth: '0.25rem',
+  borderColor: 'transparent',
+});
+
+export const tooltipArrowTop = styleWithLayer({
+  bottom: '-0.25rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  borderTopColor: vars.colors.textPrimary,
+});
+
+export const tooltipArrowBottom = styleWithLayer({
+  top: '-0.25rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  borderBottomColor: vars.colors.textPrimary,
+});
+
+export const tooltipArrowLeft = styleWithLayer({
+  right: '-0.25rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  borderLeftColor: vars.colors.textPrimary,
+});
+
+export const tooltipArrowRight = styleWithLayer({
+  left: '-0.25rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  borderRightColor: vars.colors.textPrimary,
+});

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { VisuallyHidden } from '.';
+
+const meta = {
+  title: 'Components/VisuallyHidden',
+  component: VisuallyHidden,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof VisuallyHidden>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'This text is visually hidden but accessible to screen readers',
+  },
+};
+
+export const AsSpan: Story = {
+  args: {
+    as: 'span',
+    children: 'Hidden span element',
+  },
+};
+
+export const WithVisibleContent: Story = {
+  args: {
+    children: 'Screen reader label',
+  },
+  render: () => (
+    <div>
+      <button>
+        <VisuallyHidden>Close</VisuallyHidden>
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+  ),
+};

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import VisuallyHidden from './VisuallyHidden';
+import React from 'react';
+
+describe('VisuallyHidden', () => {
+  it('renders visually hidden content', async () => {
+    const { container } = await render(
+      <VisuallyHidden>Screen reader only text</VisuallyHidden>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders as different element', async () => {
+    const { container } = await render(
+      <VisuallyHidden as="span">Hidden span content</VisuallyHidden>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { visuallyHidden } from './styles.css';
+
+export interface VisuallyHiddenProps {
+  children: React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+}
+
+const VisuallyHidden = ({ 
+  children, 
+  as: Component = 'span',
+  className,
+  ...props 
+}: VisuallyHiddenProps) => {
+  return React.createElement(
+    Component as React.ElementType,
+    {
+      className: visuallyHidden,
+      ...props,
+    },
+    children
+  );
+};
+
+export default VisuallyHidden;

package/src/components/VisuallyHidden/index.ts

@@ -0,0 +1,2 @@
+export { default as VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';

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

@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const visuallyHidden = styleWithLayer({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+});

package/src/components/index.ts

@@ -0,0 +1,68 @@
+export { Button } from './Button';
+export { List, ListItem } from './List';
+export { Input } from './Input';
+export { Form, FormInput } from './Form';
+export { Navbar, NavbarItem } from './Navbar';
+export { Card } from './Card';
+export { Alert } from './Alert';
+export { P, Header } from './Text';
+export { Modal } from './Modal';
+export { Badge } from './Badge';
+export { Divider } from './Divider';
+export { Spinner } from './Spinner';
+export { Tooltip } from './Tooltip';
+export { Toggle } from './Toggle';
+export { Checkbox } from './Checkbox';
+export { Radio } from './Radio';
+export { Select } from './Select';
+export { Tabs } from './Tabs';
+export { Avatar } from './Avatar';
+export { Tag } from './Tag';
+export { Breadcrumb } from './Breadcrumb';
+export { Accordion } from './Accordion';
+export { Progress } from './Progress';
+export { Icon } from './Icon';
+export { ToastProvider, Toast, useToast } from './Toast';
+export { default as Box } from './Box';
+export type { BoxProps } from './Box';
+export { Table } from './Table';
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonSize, SkeletonAnimation } from './Skeleton';
+export { Drawer } from './Drawer';
+export type { DrawerProps, DrawerPosition, DrawerSize } from './Drawer';
+export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuPosition, DropdownMenuItemVariant } from './DropdownMenu';
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPosition, PopoverTriggerType } from './Popover';
+export { Stepper } from './Stepper';
+export type { StepperProps, Step, StepperOrientation, StepStatus } from './Stepper';
+export { Combobox } from './Combobox';
+export type { ComboboxProps, ComboboxOption } from './Combobox';
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps, NumberInputPosition } from './NumberInput';
+export { FileUpload } from './FileUpload';
+export type { FileUploadProps, FileUploadFile } from './FileUpload';
+export { Stack } from './Stack';
+export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack';
+export { Grid } from './Grid';
+export type { GridProps, GridColumns, GridGap } from './Grid';
+export { Container } from './Container';
+export type { ContainerProps, ContainerSize } from './Container';
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioValue } from './AspectRatio';
+export { Collapse } from './Collapse';
+export type { CollapseProps, CollapseAnimation } from './Collapse';
+export { VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export { Separator } from './Separator';
+export type { SeparatorProps, SeparatorOrientation } from './Separator';
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';
+export { Kbd } from './Kbd';
+export type { KbdProps } from './Kbd';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/styles/layers.css.ts

@@ -0,0 +1,3 @@
+export const resetLayer = 'reset' as const;
+export const themeLayer = 'theme' as const;
+export const componentsLayer = 'components' as const;

package/src/styles/reset.css.ts

@@ -0,0 +1,79 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+import { globalStyle } from '@vanilla-extract/css';
+import { resetLayer } from './layers.css';
+
+globalStyle(
+  'html, body, div, span, applet, object, iframe, \
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, \
+a, abbr, acronym, address, big, cite, code, \
+del, dfn, em, img, ins, kbd, q, s, samp, \
+small, strike, strong, sub, sup, tt, var, \
+b, u, i, center, \
+dl, dt, dd, ol, ul, li, \
+fieldset, form, label, legend, \
+table, caption, tbody, tfoot, thead, tr, th, td, \
+article, aside, canvas, details, embed, \
+figure, figcaption, footer, header, hgroup, \
+menu, nav, output, ruby, section, summary,\
+time, mark, audio, video',
+  {
+    [resetLayer]: {
+      margin: 0,
+      padding: 0,
+      border: 0,
+      fontSize: '100%',
+      font: 'inherit',
+      verticalAlign: 'baseline',
+    },
+  },
+);
+
+/* HTML5 display-role reset for older browsers */
+globalStyle(
+  'article, aside, details, figcaption, figure, \
+footer, header, hgroup, menu, nav, section',
+  {
+    [resetLayer]: {
+      display: 'block',
+    },
+  },
+);
+
+globalStyle('body', {
+  [resetLayer]: {
+    lineHeight: 1,
+  },
+});
+
+globalStyle('ol, ul', {
+  [resetLayer]: {
+    listStyle: 'none',
+  },
+});
+
+globalStyle('blockquote, q', {
+  [resetLayer]: {
+    quotes: 'none',
+  },
+});
+
+globalStyle(
+  'blockquote:before, blockquote:after, \
+q:before, q:after',
+  {
+    [resetLayer]: {
+      content: 'none',
+    },
+  },
+);
+
+globalStyle('table', {
+  [resetLayer]: {
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+  },
+});

package/src/styles/sprinkles.css.ts

@@ -0,0 +1,177 @@
+import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
+import { componentsLayer } from './layers.css';
+
+const space = {
+  none: 0,
+  small: '4px',
+  medium: '8px',
+  large: '16px',
+  auto: 'auto',
+  // etc.
+};
+
+const responsiveProperties = defineProperties({
+  '@layer': componentsLayer,
+  conditions: {
+    mobile: {},
+    tablet: { '@media': 'screen and (min-width: 768px)' },
+    desktop: { '@media': 'screen and (min-width: 1024px)' },
+  },
+  defaultCondition: 'mobile',
+  responsiveArray: ['mobile', 'tablet', 'desktop'],
+  properties: {
+    display: ['none', 'flex', 'block', 'inline'],
+    width: ['auto', '100%', '50%', '25%'],
+    height: ['auto', '100%', '50%', '25%'],
+    flexDirection: ['row', 'column'],
+    justifyContent: [
+      'stretch',
+      'flex-start',
+      'center',
+      'flex-end',
+      'space-around',
+      'space-between',
+    ],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    paddingTop: space,
+    paddingBottom: space,
+    paddingLeft: space,
+    paddingRight: space,
+    marginLeft: space,
+    marginRight: space,
+    marginTop: space,
+    marginBottom: space,
+    borderLeft: space,
+    borderRight: space,
+    borderTop: space,
+    borderBottom: space,
+    borderRadius: space,
+    gap: space,
+    // etc.
+  },
+  shorthands: {
+    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+    border: ['borderTop', 'borderRight', 'borderBottom', 'borderLeft'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+    placeItems: ['justifyContent', 'alignItems'],
+  },
+});
+
+export const colors = {
+  // Generated color tokens from base palette [CAE5FF, ACEDFF, 89BBFE, 6F8AB7, 615D6C]
+  'c1-50': '#F5FAFE',
+  'c1-100': '#DDEEFD',
+  'c1-150': '#BFDFFC',
+  'c1-200': '#A6D3FC',
+  'c1-250': '#88C4FC',
+  'c1-300': '#6EB7FC',
+  'c1-350': '#54ABFC',
+  'c1-400': '#349CFE',
+  'c1-450': '#1A90FF',
+  'c1-500': '#0181F9',
+  'c1-550': '#0374DD',
+  'c1-600': '#0464BE',
+  'c1-650': '#0457A4',
+  'c1-700': '#054A8A',
+  'c1-750': '#043A6C',
+  'c1-800': '#042D53',
+  'c1-850': '#031D35',
+  'c1-900': '#02101D',
+
+  'c2-50': '#F5FCFE',
+  'c2-100': '#DDF6FD',
+  'c2-150': '#BFEFFC',
+  'c2-200': '#A6E9FC',
+  'c2-250': '#88E3FC',
+  'c2-300': '#6EDDFC',
+  'c2-350': '#54D8FC',
+  'c2-400': '#34D2FE',
+  'c2-450': '#1ACDFF',
+  'c2-500': '#01C3F9',
+  'c2-550': '#03AEDD',
+  'c2-600': '#0496BE',
+  'c2-650': '#0481A4',
+  'c2-700': '#056D8A',
+  'c2-750': '#04556C',
+  'c2-800': '#044253',
+  'c2-850': '#032A35',
+  'c2-900': '#02171D',
+
+  'c3-50': '#F5F9FE',
+  'c3-100': '#DDEBFD',
+  'c3-150': '#C0DAFC',
+  'c3-200': '#A7CCFB',
+  'c3-250': '#89BAFB',
+  'c3-300': '#70ACFB',
+  'c3-350': '#569DFB',
+  'c3-400': '#368CFC',
+  'c3-450': '#1C7DFD',
+  'c3-500': '#046DF6',
+  'c3-550': '#0662DB',
+  'c3-600': '#0655BC',
+  'c3-650': '#064AA2',
+  'c3-700': '#063F88',
+  'c3-750': '#06316B',
+  'c3-800': '#052652',
+  'c3-850': '#031935',
+  'c3-900': '#020E1C',
+
+  'c4-50': '#F8FAFB',
+  'c4-100': '#E8ECF3',
+  'c4-150': '#D4DBE8',
+  'c4-200': '#C3CDDF',
+  'c4-250': '#AFBDD5',
+  'c4-300': '#9DAFCD',
+  'c4-350': '#8DA1C4',
+  'c4-400': '#7790BB',
+  'c4-450': '#6682B2',
+  'c4-500': '#5472A6',
+  'c4-550': '#4C6794',
+  'c4-600': '#425980',
+  'c4-650': '#3A4D6E',
+  'c4-700': '#31415E',
+  'c4-750': '#273449',
+  'c4-800': '#1E2838',
+  'c4-850': '#141A24',
+  'c4-900': '#0B0E14',
+
+  'c5-50': '#FAFAFA',
+  'c5-100': '#EDECEE',
+  'c5-150': '#DDDCE0',
+  'c5-200': '#D0CED4',
+  'c5-250': '#C0BEC6',
+  'c5-300': '#B3B0BA',
+  'c5-350': '#A5A2AE',
+  'c5-400': '#9692A0',
+  'c5-450': '#898494',
+  'c5-500': '#797486',
+  'c5-550': '#6D6878',
+  'c5-600': '#5E5A68',
+  'c5-650': '#514E5A',
+  'c5-700': '#45424C',
+  'c5-750': '#37353B',
+  'c5-800': '#2A292E',
+  'c5-850': '#1B1A1E',
+  'c5-900': '#0F0E10',
+};
+
+const colorProperties = defineProperties({
+  conditions: {
+    lightMode: {},
+    darkMode: { '@media': '(prefers-color-scheme: dark)' },
+  },
+  defaultCondition: 'lightMode',
+  properties: {
+    color: colors,
+    background: colors,
+    // etc.
+  },
+});
+
+export const sprinkles = createSprinkles(responsiveProperties, colorProperties);
+
+// It's a good idea to export the Sprinkles type too
+export type Sprinkles = Parameters<typeof sprinkles>[0];