@shipfox/react-ui 0.14.0 → 0.16.0

package/src/components/tooltip/tooltip.stories.tsx

@@ -1,284 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import {Button} from '../button';
-import {Tooltip, TooltipContent, type TooltipContentProps, TooltipTrigger} from './tooltip';
-
-type TooltipStoryArgs = {
-  defaultOpen?: boolean;
-  delayDuration?: number;
-  variant?: TooltipContentProps['variant'];
-  size?: TooltipContentProps['size'];
-  side?: TooltipContentProps['side'];
-  align?: TooltipContentProps['align'];
-  sideOffset?: TooltipContentProps['sideOffset'];
-  animated?: TooltipContentProps['animated'];
-};
-
-const meta = {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs'],
-  argTypes: {
-    defaultOpen: {control: 'boolean'},
-    delayDuration: {control: 'number'},
-    variant: {
-      control: 'select',
-      options: ['default', 'inverted', 'muted'],
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-    },
-    side: {
-      control: 'select',
-      options: ['top', 'bottom', 'left', 'right'],
-    },
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-    },
-    sideOffset: {control: 'number'},
-    animated: {control: 'boolean'},
-  },
-  args: {
-    defaultOpen: false,
-    delayDuration: 0,
-    variant: 'default',
-    size: 'md',
-    side: 'top',
-    align: 'center',
-    sideOffset: 8,
-    animated: true,
-  },
-} satisfies Meta<TooltipStoryArgs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    defaultOpen: false,
-  },
-
-  render: (args: TooltipStoryArgs) => {
-    const {defaultOpen, delayDuration, variant, size, side, align, sideOffset, animated} = args;
-    return (
-      <div className="flex items-center justify-center p-64">
-        <Tooltip defaultOpen={defaultOpen} delayDuration={delayDuration}>
-          <TooltipTrigger asChild>
-            <Button>Hover me</Button>
-          </TooltipTrigger>
-          <TooltipContent
-            variant={variant}
-            size={size}
-            side={side}
-            align={align}
-            sideOffset={sideOffset}
-            animated={animated}
-          >
-            Tooltip Text
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    );
-  },
-};
-
-export const Types: Story = {
-  render: () => (
-    <div className="flex flex-col gap-64 p-64">
-      <Code variant="label" className="text-foreground-neutral-subtle">
-        TYPES
-      </Code>
-      <div className="flex flex-col gap-32">
-        {/* Text Type */}
-        <div className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Type=Text
-          </Code>
-          <div className="flex gap-16">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="primary">Tooltip Text</Button>
-              </TooltipTrigger>
-              <TooltipContent variant="inverted">Tooltip Text</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="secondary">Tooltip Text</Button>
-              </TooltipTrigger>
-              <TooltipContent>Tooltip Text</TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Shortcut Type */}
-        <div className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Type=Shortcut
-          </Code>
-          <div className="flex gap-16">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="primary">Tooltip Text</Button>
-              </TooltipTrigger>
-              <TooltipContent variant="inverted">
-                <div className="flex items-center gap-6">
-                  <span>Tooltip Text</span>
-                  <div className="flex items-center gap-4">
-                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
-                      ⌘
-                    </kbd>
-                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-sm text-foreground-neutral-subtle">
-                      /
-                    </kbd>
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="secondary">Tooltip Text</Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <div className="flex items-center gap-6">
-                  <span>Tooltip Text</span>
-                  <div className="flex items-center gap-4">
-                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
-                      ⌘
-                    </kbd>
-                    <kbd className="flex h-16 w-16 items-center justify-center rounded-4 border border-border-neutral-base bg-background-field-base text-xs text-foreground-neutral-subtle">
-                      /
-                    </kbd>
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Graph Type */}
-        <div className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Type=Graph
-          </Code>
-          <div className="flex gap-16">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="primary">Hover for graph data</Button>
-              </TooltipTrigger>
-              <TooltipContent variant="inverted" className="w-160">
-                <div className="flex flex-col gap-4">
-                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
-                  <div className="flex flex-col gap-4">
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-purple-500" />
-                        <span className="text-xs">Data A</span>
-                      </div>
-                      <span className="text-xs">$6.14</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-green-500" />
-                        <span className="text-xs">Data B</span>
-                      </div>
-                      <span className="text-xs">$4.37</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-orange-500" />
-                        <span className="text-xs">Data C</span>
-                      </div>
-                      <span className="text-xs">$12.88</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-blue-500" />
-                        <span className="text-xs">Data D</span>
-                      </div>
-                      <span className="text-xs">$2.91</span>
-                    </div>
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="secondary">Hover for graph data</Button>
-              </TooltipTrigger>
-              <TooltipContent className="w-160">
-                <div className="flex flex-col gap-4">
-                  <div className="text-xs text-foreground-neutral-subtle">Jul 22, 2025</div>
-                  <div className="flex flex-col gap-4">
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-purple-500" />
-                        <span className="text-xs">Data A</span>
-                      </div>
-                      <span className="text-xs">$6.14</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-green-500" />
-                        <span className="text-xs">Data B</span>
-                      </div>
-                      <span className="text-xs">$4.37</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-orange-500" />
-                        <span className="text-xs">Data C</span>
-                      </div>
-                      <span className="text-xs">$12.88</span>
-                    </div>
-                    <div className="flex items-center justify-between gap-12">
-                      <div className="flex flex-1 items-center gap-4">
-                        <div className="size-6 rounded-full bg-blue-500" />
-                        <span className="text-xs">Data D</span>
-                      </div>
-                      <span className="text-xs">$2.91</span>
-                    </div>
-                  </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Breadcrumbs Type */}
-        <div className="flex flex-col gap-16">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            Type=Breadcrumbs
-          </Code>
-          <div className="flex gap-16">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="primary">Breadcrumb</Button>
-              </TooltipTrigger>
-              <TooltipContent variant="inverted">
-                <div className="flex items-center gap-6">
-                  <span>Breadcrumb</span>
-                  <span className="text-foreground-neutral-muted">/</span>
-                  <span>Breadcrumb</span>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="secondary">Breadcrumb</Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <div className="flex items-center gap-6">
-                  <span>Breadcrumb</span>
-                  <span className="text-foreground-neutral-muted">/</span>
-                  <span>Breadcrumb</span>
-                </div>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/tooltip/tooltip.tsx

@@ -1,121 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import {cva, type VariantProps} from 'class-variance-authority';
-import {motion, type Transition} from 'framer-motion';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-const tooltipContentVariants = cva(
-  'rounded-8 px-8 py-4 text-xs font-medium leading-20 z-50 w-fit text-balance shadow-tooltip',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background-components-base text-foreground-neutral-base',
-        inverted: 'bg-background-button-inverted-default text-foreground-contrast-primary',
-        muted: 'bg-background-neutral-subtle text-foreground-neutral-muted',
-      },
-      size: {
-        sm: 'px-6 py-2 text-xs',
-        md: 'px-8 py-4 text-xs',
-        lg: 'px-10 py-6 text-sm',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  },
-);
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({...props}: ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({...props}: ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-const defaultTransition: Transition = {
-  type: 'spring',
-  stiffness: 300,
-  damping: 17,
-};
-
-type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> &
-  VariantProps<typeof tooltipContentVariants> & {
-    animated?: boolean;
-    transition?: Transition;
-  };
-
-function TooltipContent({
-  className,
-  sideOffset = 8,
-  children,
-  variant,
-  size,
-  animated = true,
-  transition = defaultTransition,
-  ...props
-}: TooltipContentProps) {
-  if (animated) {
-    return (
-      <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-          data-slot="tooltip-content"
-          sideOffset={sideOffset}
-          asChild
-          {...props}
-        >
-          <motion.div
-            className={cn(tooltipContentVariants({variant, size, className}))}
-            initial={{opacity: 0, scale: 0.95}}
-            animate={{opacity: 1, scale: 1}}
-            exit={{opacity: 0, scale: 0.95}}
-            transition={transition}
-          >
-            {children}
-          </motion.div>
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Portal>
-    );
-  }
-
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(tooltipContentVariants({variant, size, className}))}
-        {...props}
-      >
-        {children}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-  tooltipContentVariants,
-  defaultTransition,
-};
-export type {TooltipContentProps};

package/src/components/typography/code.stories.tsx

@@ -1,36 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from './code';
-
-const meta: Meta = {
-  title: 'Typography/Code',
-};
-export default meta;
-
-type Story = StoryObj;
-
-const variants = ['label', 'paragraph'] as const;
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      {variants.map((variant) => (
-        <div key={variant} className="grid grid-cols-2 gap-8">
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {variant}
-            </Code>
-            <Code variant={variant}>The quick brown fox jumps over the lazy dog</Code>
-          </div>
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {variant} - Bold
-            </Code>
-            <Code variant={variant} bold>
-              The quick brown fox jumps over the lazy dog
-            </Code>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/typography/code.tsx

@@ -1,38 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
-import {cn} from 'utils';
-
-export const codeVariants = cva('', {
-  variants: {
-    variant: {
-      label: 'text-xs',
-      paragraph: 'text-sm',
-    },
-  },
-  defaultVariants: {
-    variant: 'paragraph',
-  },
-});
-
-export type CodeProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
-  VariantProps<typeof codeVariants> & {
-    as?: ElementType;
-    bold?: boolean;
-  };
-
-export function Code({children, className, variant, as, bold, ...props}: CodeProps) {
-  const Component = as ?? 'p';
-  return (
-    <Component
-      className={cn(
-        codeVariants({variant}),
-        'leading-20 font-code',
-        {'font-bold': bold},
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}

package/src/components/typography/header.stories.tsx

@@ -1,27 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from './code';
-import {Header} from './header';
-
-const meta: Meta = {
-  title: 'Typography/Header',
-};
-export default meta;
-
-type Story = StoryObj;
-
-const variants = ['h1', 'h2', 'h3', 'h4'] as const;
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      {variants.map((variant) => (
-        <div key={variant} className="flex flex-col gap-4">
-          <Code variant="label" className="text-foreground-neutral-subtle">
-            {variant}
-          </Code>
-          <Header variant={variant}>The quick brown fox jumps over the lazy dog</Header>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/typography/header.tsx

@@ -1,41 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
-import {cn} from 'utils';
-
-export const headerVariants = cva('', {
-  variants: {
-    variant: {
-      h1: 'text-3xl',
-      h2: 'text-xl',
-      h3: 'text-lg',
-      h4: 'text-md',
-    },
-  },
-  defaultVariants: {
-    variant: 'h1',
-  },
-});
-
-const components = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-} as const;
-
-export type HeaderProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
-  VariantProps<typeof headerVariants> & {
-    as?: ElementType;
-  };
-
-export function Header({children, className, variant, as, ...props}: HeaderProps) {
-  const Component = as ?? (variant ? components[variant] : 'h1');
-  return (
-    <Component
-      className={cn(headerVariants({variant}), 'font-display font-medium', className)}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}

package/src/components/typography/index.ts

@@ -1,3 +0,0 @@
-export * from './code';
-export * from './header';
-export * from './text';

package/src/components/typography/text.stories.tsx

@@ -1,67 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from './code';
-import {Text} from './text';
-
-const meta: Meta = {
-  title: 'Typography/Text',
-};
-export default meta;
-
-type Story = StoryObj;
-
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      {sizes.map((size) => (
-        <div key={size} className="grid grid-cols-2 gap-8">
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {size}
-            </Code>
-            <Text size={size}>The quick brown fox jumps over the lazy dog</Text>
-          </div>
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {size} - Bold
-            </Code>
-            <Text size={size} bold>
-              The quick brown fox jumps over the lazy dog
-            </Text>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-const textParagraph =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
-
-export const Paragraph: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      {sizes.map((size) => (
-        <div key={size} className="grid grid-cols-2 gap-8">
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {size} - Regular
-            </Code>
-            <Text size={size} compact={false}>
-              {textParagraph}
-            </Text>
-          </div>
-          <div className="flex flex-col gap-4">
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {size} - Compact
-            </Code>
-            <Text size={size} compact={true}>
-              {textParagraph}
-            </Text>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-};

package/src/components/typography/text.tsx

@@ -1,50 +0,0 @@
-import {cva, type VariantProps} from 'class-variance-authority';
-import type {ElementType, HTMLAttributes, PropsWithChildren} from 'react';
-import {cn} from 'utils';
-
-export const textVariants = cva('', {
-  variants: {
-    size: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-md',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export type TextProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> &
-  VariantProps<typeof textVariants> & {
-    as?: ElementType;
-    compact?: boolean;
-    bold?: boolean;
-  };
-
-export function Text({
-  children,
-  className,
-  size,
-  as,
-  compact = true,
-  bold = false,
-  ...props
-}: TextProps) {
-  const Component = as ?? 'p';
-  return (
-    <Component
-      className={cn(
-        textVariants({size}),
-        'font-display',
-        {'leading-20': compact, 'font-medium': bold},
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}

package/src/hooks/index.ts

@@ -1,6 +0,0 @@
-export * from './useCopyToClipboard';
-export * from './useMediaQuery';
-export * from './useResolvedTheme';
-export * from './useShikiHighlight';
-export * from './useShikiStyleInjection';
-export * from './useTheme';