@shipfox/react-ui 0.14.0 → 0.16.0

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,391 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code, Header} from 'components/typography';
-import {Checkbox, CheckboxLabel, CheckboxLinks} from '.';
-
-const meta = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    disabled: {control: 'boolean'},
-    checked: {control: 'boolean'},
-  },
-  args: {
-    size: 'md',
-    disabled: false,
-  },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div className="flex flex-col gap-32">
-      <div className="flex flex-col gap-16">
-        <Header variant="h4">Controlled Checkbox</Header>
-        <Code variant="label" className="text-foreground-neutral-subtle">
-          Use the controls below to change the checkbox state
-        </Code>
-        <Checkbox {...args} />
-      </div>
-
-      <div className="flex flex-col gap-32">
-        <Header variant="h4">All States</Header>
-        {(['sm', 'md', 'lg'] as const).map((size) => (
-          <div key={size} className="flex flex-wrap gap-16">
-            <Header variant="h4">Size: {size}</Header>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Unchecked
-              </Code>
-              <Checkbox size={size} />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Checked
-              </Code>
-              <Checkbox size={size} checked />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Indeterminate
-              </Code>
-              <Checkbox size={size} checked="indeterminate" />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Disabled (Unchecked)
-              </Code>
-              <Checkbox size={size} disabled />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Disabled (Checked)
-              </Code>
-              <Checkbox size={size} checked disabled />
-            </div>
-            <div className="flex flex-col gap-8">
-              <Code variant="label" className="text-foreground-neutral-subtle">
-                Focus
-              </Code>
-              <Checkbox size={size} className="focus" />
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-  parameters: {
-    pseudo: {
-      focusVisible: '.focus',
-    },
-  },
-};
-
-export const CheckboxLabelStory: StoryObj = {
-  render: () => (
-    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        CHECKBOX LABEL - WITHOUT BORDER
-      </Code>
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Indeterminate
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Checked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            checked
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Unchecked
-          </Code>
-          <CheckboxLabel
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-          />
-        </div>
-      </div>
-
-      <Code variant="label" className="text-foreground-neutral-subtle mt-32">
-        CHECKBOX LABEL - WITH BORDER
-      </Code>
-      <div className="flex flex-col gap-16">
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-hover-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Focus - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-focus-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            border
-            className="focus"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Hover - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-hover-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-            className="hover"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Focus - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-focus-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            border
-            className="focus"
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Default - Indeterminate
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-default-indeterminate"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Unchecked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-unchecked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            disabled
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Checked
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-checked"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked
-            disabled
-            border
-          />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Code variant="label" className="text-foreground-neutral-subtle text-xs">
-            Disabled - Indeterminate
-          </Code>
-          <CheckboxLabel
-            id="checkbox-border-disabled-indeterminate"
-            label="Label"
-            optional
-            showInfoIcon
-            description="The quick brown fox jumps over a lazy dog."
-            checked="indeterminate"
-            disabled
-            border
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-CheckboxLabelStory.parameters = {
-  pseudo: {
-    hover: '.hover',
-    focusVisible: '.focus',
-  },
-};
-
-export const CheckboxLinksStory: StoryObj = {
-  args: {
-    disabled: true,
-  },
-
-  render: () => (
-    <div className="flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        CHECKBOX LINKS
-      </Code>
-      <div className="flex flex-col gap-16">
-        <CheckboxLinks
-          id="checkbox-links-default"
-          label="Accept policies"
-          links={[
-            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
-            {
-              label: 'Privacy Policy',
-              onClick: () =>
-                window.open(
-                  'https://www.shipfox.io/legal/privacy-policy',
-                  '_blank',
-                  'noopener,noreferrer',
-                ),
-            },
-          ]}
-        />
-        <CheckboxLinks
-          id="checkbox-links-checked"
-          label="Accept policies"
-          links={[
-            {label: 'Terms of use', href: 'https://www.shipfox.io/legal/terms-of-service'},
-            {
-              label: 'Privacy Policy',
-              onClick: () =>
-                window.open(
-                  'https://www.shipfox.io/legal/privacy-policy',
-                  '_blank',
-                  'noopener,noreferrer',
-                ),
-            },
-          ]}
-          checked
-        />
-      </div>
-    </div>
-  ),
-};

package/src/components/checkbox/checkbox.tsx

@@ -1,71 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {Icon} from 'components/icon';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-export const checkboxVariants = cva(
-  'peer shrink-0 border-none transition-all duration-100 outline-none cursor-pointer',
-  {
-    variants: {
-      size: {
-        sm: 'size-16',
-        md: 'size-20',
-        lg: 'size-24',
-      },
-    },
-    defaultVariants: {
-      size: 'sm',
-    },
-  },
-);
-
-export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> &
-  VariantProps<typeof checkboxVariants>;
-
-export function Checkbox({
-  className,
-  size,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  ...props
-}: CheckboxProps) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onCheckedChange={onCheckedChange}
-      className={cn(
-        checkboxVariants({size}),
-        // Unchecked state - default
-        'rounded-4 bg-checkbox-unchecked-bg shadow-checkbox-unchecked',
-        // Unchecked state - hover
-        'hover:bg-checkbox-unchecked-bg-hover',
-        // Unchecked state - focus
-        'focus-visible:shadow-checkbox-unchecked-focus',
-        // Checked state
-        'data-[state=checked]:bg-checkbox-checked-bg data-[state=checked]:text-foreground-neutral-on-color data-[state=checked]:shadow-checkbox-checked',
-        'data-[state=checked]:hover:bg-checkbox-checked-bg-hover',
-        'data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',
-        // Indeterminate state
-        'data-[state=indeterminate]:bg-checkbox-indeterminate-bg data-[state=indeterminate]:text-foreground-neutral-on-color data-[state=indeterminate]:shadow-checkbox-indeterminate',
-        'data-[state=indeterminate]:hover:bg-checkbox-indeterminate-bg-hover',
-        'data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',
-        // Disabled state
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-        {checked === 'indeterminate' ? (
-          <Icon name="subtractLine" className="size-16" aria-hidden="true" />
-        ) : (
-          <Icon name="check" className="size-16" aria-hidden="true" />
-        )}
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}

package/src/components/checkbox/index.ts

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

package/src/components/code-block/code-block-footer.tsx

@@ -1,190 +0,0 @@
-import {Slot} from '@radix-ui/react-slot';
-import {Icon} from 'components/icon/icon';
-import {ShinyText} from 'components/shiny-text';
-import {Text} from 'components/typography';
-import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
-import {ShipfoxLoader} from 'shipfox-loader-react';
-import {cn} from 'utils/cn';
-
-export type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {
-  asChild?: boolean;
-  state?: 'running' | 'done';
-  message?: ReactNode;
-  description?: ReactNode;
-  icon?: ReactNode;
-};
-
-export function CodeBlockFooter({
-  className,
-  asChild = false,
-  state = 'running',
-  message,
-  description,
-  icon,
-  children,
-  ...props
-}: CodeBlockFooterProps) {
-  const Comp = asChild ? Slot : 'div';
-
-  const defaultIcon =
-    icon ??
-    (state === 'running' ? (
-      <ShipfoxLoader size={20} animation="circular" color="white" background="dark" />
-    ) : (
-      <Icon
-        name="checkCircleSolid"
-        className="size-20 text-foreground-neutral-base"
-        aria-hidden="true"
-      />
-    ));
-
-  if (asChild || children) {
-    return (
-      <Comp
-        data-slot="code-block-footer"
-        className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
-        {...props}
-      >
-        {children}
-      </Comp>
-    );
-  }
-
-  return (
-    <Comp
-      data-slot="code-block-footer"
-      className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
-      {...props}
-    >
-      <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
-      {(message || description) && (
-        <CodeBlockFooterContent>
-          {message && (
-            <CodeBlockFooterMessage>
-              {state === 'running' && typeof message === 'string' ? (
-                <ShinyText text={message} speed={3} />
-              ) : (
-                message
-              )}
-            </CodeBlockFooterMessage>
-          )}
-          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
-        </CodeBlockFooterContent>
-      )}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterIconProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterIcon({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterIconProps) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot="code-block-footer-icon"
-      className={cn('flex shrink-0 items-center justify-center size-20', className)}
-      {...props}
-    >
-      {children}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterContentProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterContent({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterContentProps) {
-  const Comp = asChild ? Slot : 'div';
-
-  return (
-    <Comp
-      data-slot="code-block-footer-content"
-      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}
-      {...props}
-    >
-      {children}
-    </Comp>
-  );
-}
-
-export type CodeBlockFooterMessageProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterMessage({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterMessageProps) {
-  if (asChild) {
-    return (
-      <Slot
-        data-slot="code-block-footer-message"
-        className={cn('overflow-hidden text-ellipsis whitespace-nowrap text-xs', className)}
-        {...props}
-      >
-        {children}
-      </Slot>
-    );
-  }
-
-  return (
-    <Text
-      data-slot="code-block-footer-message"
-      size="xs"
-      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-}
-
-export type CodeBlockFooterDescriptionProps = ComponentProps<'div'> & {
-  asChild?: boolean;
-};
-
-export function CodeBlockFooterDescription({
-  className,
-  asChild = false,
-  children,
-  ...props
-}: CodeBlockFooterDescriptionProps) {
-  if (asChild) {
-    return (
-      <Slot
-        data-slot="code-block-footer-description"
-        className={cn('text-xs text-foreground-neutral-subtle', className)}
-        {...props}
-      >
-        {children}
-      </Slot>
-    );
-  }
-
-  return (
-    <Text
-      data-slot="code-block-footer-description"
-      size="xs"
-      className={cn('text-foreground-neutral-subtle', className)}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-}