@crystallize/design-system 1.3.0 → 1.3.2

package/src/iconography/warning.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, SVGProps } from 'react';
+
+type WarningProps = SVGProps<SVGSVGElement>;
+type WarningRef = SVGSVGElement;
+
+export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      fill="none"
+      viewBox="0 0 22 22"
+      {...delegated}
+    >
+      <path
+        d="M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z"
+        fill="#FFDE99"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.3657 16.9982L11.8784 4.02993C11.5043 3.38198 10.5691 3.38198 10.195 4.02993L2.70778 16.9982C2.33369 17.6462 2.8013 18.4561 3.54948 18.4561H18.524C19.2722 18.4561 19.7398 17.6462 19.3657 16.9982ZM12.398 3.72993C11.793 2.68198 10.2804 2.68198 9.67541 3.72993L2.18816 16.6982C1.58313 17.7462 2.33942 19.0561 3.54948 19.0561H18.524C19.734 19.0561 20.4903 17.7462 19.8853 16.6982L12.398 3.72993Z"
+        fill="#528693"
+      />
+      <path
+        d="M10.4293 8.73822C10.4293 8.33098 10.7595 8.00085 11.1667 8.00085V8.00085C11.5739 8.00085 11.9041 8.33098 11.9041 8.73822V12.3883C11.9041 12.7956 11.5739 13.1257 11.1667 13.1257V13.1257C10.7595 13.1257 10.4293 12.7956 10.4293 12.3883V8.73822Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.504 8.73824V12.3883C12.504 13.127 11.9053 13.7257 11.1667 13.7257C10.4281 13.7257 9.82932 13.127 9.82932 12.3883V8.73825C9.82932 7.99964 10.4281 7.40088 11.1667 7.40088C11.9053 7.40088 12.504 7.99964 12.504 8.73824ZM11.1667 8.00088C10.7594 8.00088 10.4293 8.33101 10.4293 8.73825V12.3883C10.4293 12.7956 10.7594 13.1257 11.1667 13.1257C11.5739 13.1257 11.904 12.7956 11.904 12.3883V8.73824C11.904 8.33101 11.5739 8.00088 11.1667 8.00088Z"
+        fill="#528693"
+      />
+      <path
+        d="M11.9041 15.7807C11.9041 16.1879 11.5739 16.5181 11.1667 16.5181C10.7595 16.5181 10.4293 16.1879 10.4293 15.7807C10.4293 15.3735 10.7595 15.0433 11.1667 15.0433C11.5739 15.0433 11.9041 15.3735 11.9041 15.7807Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.504 15.7807C12.504 16.5193 11.9053 17.1181 11.1667 17.1181C10.4281 17.1181 9.82932 16.5193 9.82932 15.7807C9.82932 15.0421 10.4281 14.4434 11.1667 14.4434C11.9053 14.4434 12.504 15.0421 12.504 15.7807ZM11.1667 16.5181C11.5739 16.5181 11.904 16.188 11.904 15.7807C11.904 15.3735 11.5739 15.0434 11.1667 15.0434C10.7594 15.0434 10.4293 15.3735 10.4293 15.7807C10.4293 16.188 10.7594 16.5181 11.1667 16.5181Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Warning.displayName = 'WarningIcon';

package/src/index.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-sans text-gray;
+  }
+  input,
+  textarea,
+  button {
+    @apply font-sans text-gray;
+  }
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+import './index.css';
+
+// Components ---
+export * from './action-menu';
+export * from './avatar';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './icon-button';
+export * from './inline-radio';
+export * from './input-with-label';
+export * from './input';
+export * from './label';
+export * from './progress';
+export * from './radio';
+export * from './select';
+export * from './slider';
+export * from './spinner';
+export * from './tag';
+
+// Icons ---
+export * from './iconography';
+
+// Tokens ---
+import { buttonTokens } from './button';
+import { cardToken } from './card';
+
+export const tokens = {
+  button: buttonTokens,
+  card: cardToken,
+};

package/src/inline-radio/index.ts

@@ -0,0 +1 @@
+export * from './inline-radio';

package/src/inline-radio/inline-radio.css

@@ -0,0 +1,36 @@
+.c-inline-radio-group {
+  @apply inline-flex space-x-1 rounded bg-gray-100-800 p-[3px];
+}
+
+.c-inline-radio-group-xs {
+  @apply h-6;
+}
+
+.c-inline-radio-group-sm {
+  @apply h-9 text-sm;
+}
+
+.c-inline-radio-group-md {
+  @apply h-11 text-base;
+}
+
+.c-inline-radio-group-lg {
+  @apply h-14 text-lg;
+}
+
+.c-inline-radio {
+  @apply m-0 flex cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm font-medium !leading-none text-gray;
+
+  &[aria-checked='true'] {
+    @apply bg-elevate shadow-sm;
+  }
+
+  &:focus-visible {
+    @apply outline outline-1 outline-inherit;
+    outline-color: currentColor;
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+}

package/src/inline-radio/inline-radio.stories.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { InlineRadio } from './inline-radio';
+import { Icon } from '../iconography';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InlineRadio.Group> = {
+  title: 'Components/InlineRadio',
+  component: InlineRadio.Group,
+  argTypes: {
+    size: {
+      defaultValue: 'sm',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineRadio.Group>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="plus" size="xs">
+        <InlineRadio.Item value="plus" id="example-r1">
+          +
+        </InlineRadio.Item>
+        <InlineRadio.Item value="minus" id="example-r2">
+          -
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const ProductView: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="pretty" size="xs">
+        <InlineRadio.Item value="pretty" id="productview-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="productview-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [view, setView] = useState('pretty');
+
+    return (
+      <InlineRadio.Group value={view} onValueChange={v => setView(v)} size="xs">
+        <InlineRadio.Item value="pretty" id="controlled-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="controlled-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const WithSize: Story = {
+  render: ({ size }) => {
+    return (
+      <InlineRadio.Group defaultValue="preview" size={size}>
+        <InlineRadio.Item value="preview" id="controlled-r1">
+          Preview
+        </InlineRadio.Item>
+        <InlineRadio.Item value="edit" id="controlled-r2">
+          Edit
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};

package/src/inline-radio/inline-radio.tsx

@@ -0,0 +1,41 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cx, cva, VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import './inline-radio.css';
+
+const inlineRadioGroupStyles = cva('c-inline-radio-group', {
+  variants: {
+    size: {
+      xs: 'c-inline-radio-group-xs',
+      sm: 'c-inline-radio-group-sm',
+      md: 'c-inline-radio-group-md',
+      lg: 'c-inline-radio-group-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+type InlineRadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root> &
+  VariantProps<typeof inlineRadioGroupStyles>;
+
+function InlineRadioGroup({ size, className, ...delegated }: InlineRadioGroupProps) {
+  return <RadioGroupPrimitive.Root {...delegated} className={inlineRadioGroupStyles({ size, className })} />;
+}
+
+type InlineRadioItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function InlineRadioItem({ children, className, ...delegated }: InlineRadioItemProps) {
+  return (
+    <RadioGroupPrimitive.Item {...delegated} className={cx('c-inline-radio', className)}>
+      <RadioGroupPrimitive.Indicator forceMount>{children}</RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export const InlineRadio = {
+  Group: InlineRadioGroup,
+  Item: InlineRadioItem,
+};

package/src/input/Input.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from '.';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "c'mon type something",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "I'm disabled",
+    disabled: true,
+  },
+};

package/src/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input';

package/src/input/input.css

@@ -0,0 +1,7 @@
+.c-input {
+  @apply border-none bg-transparent p-0 placeholder:text-sm placeholder:font-light placeholder:italic placeholder:text-gray-400-500 focus:outline-none;
+
+  &:disabled {
+    @apply cursor-not-allowed text-gray-400-500;
+  }
+}

package/src/input/input.tsx

@@ -0,0 +1,20 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef } from 'react';
+
+import './input.css';
+
+type InputStylesProps = VariantProps<typeof inputStyles>;
+const inputStyles = cva(['c-input'], {
+  variants: {},
+  defaultVariants: {},
+});
+
+type InputProps = InputStylesProps & ComponentPropsWithRef<'input'>;
+
+export type InputRef = HTMLInputElement;
+
+export const Input = forwardRef<InputRef, InputProps>(({ className, ...delegated }, ref) => {
+  return <input ref={ref} className={inputStyles({ className })} type="text" {...delegated} />;
+});
+
+Input.displayName = 'Input';

package/src/input-with-label/InputWithLabel.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { InputWithLabel } from '.';
+
+const meta: Meta<typeof InputWithLabel> = {
+  title: 'Components/InputWithLabel',
+  component: InputWithLabel,
+  argTypes: {
+    variant: {
+      defaultValue: '',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputWithLabel>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    value: 'Luke Skywalker',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    status: 'error',
+  },
+};
+
+export const ErrorWithMessage: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    status: 'error',
+    errorMessage: 'You are not my father',
+  },
+};
+
+export const Elevated: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+  },
+};
+
+export const ElevatedError: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+    status: 'error',
+    errorMessage: 'Something went no no',
+  },
+};
+
+export const WithAppend: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    variant: 'elevated',
+    append: <div className="self-end">🍩</div>,
+    id: 'my-id',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    disabled: true,
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    readOnly: true,
+    value: 'Darth Vader',
+  },
+};
+
+export const PassingPropsToLabel: Story = {
+  args: {
+    placeholder: 'Luke Skywalker',
+    label: 'Name',
+    value: 'Darth Vader',
+    labelProps: {
+      className: 'bg-elevated',
+    },
+  },
+};

package/src/input-with-label/index.ts

@@ -0,0 +1,3 @@
+import './input-with-label.css';
+
+export { InputWithLabel } from './input-with-label';

package/src/input-with-label/input-with-label.css

@@ -0,0 +1,35 @@
+.c-input-with-label {
+  @apply relative block rounded border border-solid border-transparent p-3;
+
+  &-input-wrap {
+    @apply mt-3 flex;
+  }
+
+  &-input {
+    @apply flex-1 overflow-hidden text-ellipsis text-base;
+  }
+
+  &-append {
+    @apply -mr-3 flex flex-shrink-0 items-center px-3;
+  }
+
+  &-elevated {
+    @apply bg-elevate shadow;
+  }
+
+  &.c-input-with-label--error {
+    @apply text-error;
+  }
+
+  &-error {
+    @apply !mt-1 text-xs text-error;
+  }
+
+  &-sm {
+    @apply text-sm;
+  }
+
+  &-lg {
+    @apply text-lg;
+  }
+}

package/src/input-with-label/input-with-label.tsx

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+
+import { Input } from '../input';
+import { Label } from '../label';
+import { Triangle } from '../iconography/triangle';
+
+const inputWithLabelStyles = cva(['c-input-with-label'], {
+  variants: {
+    variant: {
+      default: '',
+      elevated: 'c-input-with-label-elevated',
+      outlined: 'c-input-with-label-outlined',
+    },
+    status: {
+      error: 'c-input-with-label--error',
+    },
+  },
+  defaultVariants: {},
+});
+
+type InputWithLabelStylesProps = VariantProps<typeof inputWithLabelStyles>;
+
+export type InputWithLabelProps = InputWithLabelStylesProps & {
+  label: string;
+  append?: ReactNode;
+  errorMessage?: string;
+  labelProps?: ComponentPropsWithoutRef<'label'>;
+} & ComponentPropsWithRef<'input'>;
+
+export type InputWithLabelRef = HTMLInputElement;
+
+export const InputWithLabel = forwardRef<InputWithLabelRef, InputWithLabelProps>(
+  ({ className, label, append, errorMessage, status, variant, id, labelProps, ...delegated }, ref) => {
+    const { className: labelClassName, ...labelPropsRest } = labelProps ?? {};
+
+    return (
+      <>
+        <Label
+          className={inputWithLabelStyles({ status, variant, className: labelClassName })}
+          htmlFor={id}
+          {...labelPropsRest}
+        >
+          {label}
+          <span className="c-input-with-label-input-wrap">
+            <Input className={cx('c-input-with-label-input', className)} ref={ref} id={id} {...delegated} />
+            {!append && !errorMessage ? null : (
+              <div className="c-input-with-label-append" title={errorMessage}>
+                {errorMessage ? <Triangle /> : append}
+              </div>
+            )}
+          </span>
+        </Label>
+      </>
+    );
+  },
+);
+
+InputWithLabel.displayName = 'InputWithLabel';

package/src/label/index.ts

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

package/src/label/label.css

@@ -0,0 +1,3 @@
+.c-label {
+  @apply text-sm font-medium text-gray-500-400;
+}

package/src/label/label.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    htmlFor: 'id',
+    children: 'Hello, World!',
+  },
+};

package/src/label/label.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, LabelHTMLAttributes } from 'react';
+import { cx } from 'class-variance-authority';
+
+import './label.css';
+
+type LabelRef = HTMLLabelElement;
+type LabelProps = LabelHTMLAttributes<LabelRef>;
+
+export const Label = forwardRef<LabelRef, LabelProps>(({ className, ...delegated }, ref) => {
+  return <label ref={ref} className={cx('c-label', className)} {...delegated} />;
+});
+
+Label.displayName = 'Label';

package/src/progress/Progress.stories.tsx

@@ -0,0 +1,26 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { Progress } from '.';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    const [progress, setProgress] = useState(13);
+
+    useEffect(() => {
+      const timer = setTimeout(() => setProgress(100), 1500);
+      return () => clearTimeout(timer);
+    }, []);
+
+    return <Progress value={progress} />;
+  },
+};

package/src/progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from './progress';

package/src/progress/progress.css

@@ -0,0 +1,7 @@
+.c-progress-root {
+  @apply relative h-4 w-full overflow-hidden rounded-full bg-gray-50-900;
+}
+
+.c-progress-indicator {
+  @apply h-full w-full transform bg-cyan-300-600 duration-500 ease-linear;
+}

package/src/progress/progress.tsx

@@ -0,0 +1,17 @@
+import * as ProgressPrimitives from '@radix-ui/react-progress';
+import { cx } from 'class-variance-authority';
+
+import './progress.css';
+
+type ProgressProps = ProgressPrimitives.ProgressProps;
+
+export function Progress({ className, value }: ProgressProps) {
+  return (
+    <ProgressPrimitives.Root className={cx(className, 'c-progress-root')} value={value}>
+      <ProgressPrimitives.Indicator
+        className="c-progress-indicator"
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitives.Root>
+  );
+}

package/src/radio/index.ts

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

package/src/radio/radio.css

@@ -0,0 +1,20 @@
+.c-radio-item {
+  @apply flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-full border border-solid border-gray-200-700 bg-gray-50-900 p-0;
+
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+
+  &:disabled {
+    @apply bg-gray-100-800 opacity-40;
+  }
+
+  &[aria-checked='true'] {
+    @apply border-cyan-700-200 bg-cyan-200-700;
+  }
+}
+
+.c-radio-indicator {
+  @apply block h-[6px] w-[6px] rounded-full bg-cyan-700-200;
+}