@shipfox/react-ui 0.4.0 → 0.6.0

package/src/components/button/button-link.stories.tsx

@@ -0,0 +1,86 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ButtonLink} from './button-link';
+
+const meta = {
+  title: 'Components/Button/ButtonLink',
+  component: ButtonLink,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['base', 'interactive', 'muted', 'subtle'],
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'xl'],
+    },
+    underline: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    children: 'Label',
+    variant: 'base',
+    size: 'sm',
+    underline: false,
+    href: '#',
+  },
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base">
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive">
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted">
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle">
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithUnderline: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} variant="base" underline>
+        Base
+      </ButtonLink>
+      <ButtonLink {...args} variant="interactive" underline>
+        Interactive
+      </ButtonLink>
+      <ButtonLink {...args} variant="muted" underline>
+        Muted
+      </ButtonLink>
+      <ButtonLink {...args} variant="subtle" underline>
+        Subtle
+      </ButtonLink>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <div className="flex gap-16 items-center">
+      <ButtonLink {...args} iconLeft="addLine">
+        Icon Left
+      </ButtonLink>
+      <ButtonLink {...args} iconRight="chevronRight">
+        Icon Right
+      </ButtonLink>
+      <ButtonLink {...args} iconLeft="addLine" iconRight="chevronRight">
+        Both Icons
+      </ButtonLink>
+    </div>
+  ),
+};

package/src/components/button/button-link.tsx

@@ -0,0 +1,76 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const buttonLinkVariants = cva(
+  'inline-flex items-center justify-center gap-4 whitespace-nowrap transition-colors disabled:pointer-events-none outline-none font-medium',
+  {
+    variants: {
+      variant: {
+        base: 'text-foreground-neutral-base hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        interactive:
+          'text-foreground-highlight-interactive hover:text-foreground-highlight-interactive-hover focus-visible:text-foreground-highlight-interactive disabled:text-foreground-neutral-disabled',
+        muted:
+          'text-foreground-neutral-muted hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+        subtle:
+          'text-foreground-neutral-subtle hover:text-foreground-neutral-base focus-visible:text-foreground-neutral-base disabled:text-foreground-neutral-disabled',
+      },
+      size: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        xl: 'text-xl',
+      },
+      underline: {
+        true: 'underline decoration-solid [text-underline-position:from-font]',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'base',
+      size: 'sm',
+      underline: false,
+    },
+  },
+);
+
+const iconSizeMap = {
+  xs: 14,
+  sm: 14,
+  md: 16,
+  xl: 20,
+} as const;
+
+export function ButtonLink({
+  className,
+  variant,
+  size = 'sm',
+  underline,
+  asChild = false,
+  children,
+  iconLeft,
+  iconRight,
+  ...props
+}: ComponentProps<'a'> &
+  VariantProps<typeof buttonLinkVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'a';
+  const iconSize = iconSizeMap[size as keyof typeof iconSizeMap];
+
+  return (
+    <Comp
+      data-slot="button-link"
+      className={cn(buttonLinkVariants({variant, size, underline, className}))}
+      {...props}
+    >
+      {iconLeft && <Icon name={iconLeft} size={iconSize} />}
+      {children}
+      {iconRight && <Icon name={iconRight} size={iconSize} />}
+    </Comp>
+  );
+}

package/src/components/button/button.stories.tsx

@@ -6,6 +6,7 @@ const variantOptions = [
   'primary',
   'secondary',
   'danger',
+  'success',
   'transparent',
   'transparentMuted',
 ] as const;
@@ -48,7 +49,6 @@ export const Variants: Story = {
               <th>{size}</th>
               <th>Default</th>
               <th>Hover</th>
-              <th>Active</th>
               <th>Focus</th>
               <th>Disabled</th>
             </tr>
@@ -71,11 +71,6 @@ export const Variants: Story = {
                     Click me
                   </Button>
                 </td>
-                <td>
-                  <Button {...args} variant={variant} className="active" size={size}>
-                    Click me
-                  </Button>
-                </td>
                 <td>
                   <Button {...args} variant={variant} className="focus" size={size}>
                     Click me
@@ -98,7 +93,6 @@ export const Variants: Story = {
 Variants.parameters = {
   pseudo: {
     hover: '.hover',
-    active: '.active',
     focusVisible: '.focus',
   },
 };

package/src/components/button/button.tsx

@@ -15,18 +15,20 @@ export const buttonVariants = cva(
           'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',
         danger:
           'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+        success:
+          'bg-background-button-success-default text-foreground-neutral-on-color shadow-button-success hover:bg-background-button-success-hover active:bg-background-button-success-pressed focus-visible:shadow-button-success-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
         transparent:
           'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
         transparentMuted:
           'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
       },
       size: {
-        '2xs': 'px-6 text-xs gap-4',
-        xs: 'px-6 py-2 text-xs gap-4',
-        sm: 'px-8 py-4 text-sm gap-6',
-        md: 'px-10 py-6 text-md gap-8',
-        lg: 'px-12 py-8 text-lg gap-8',
-        xl: 'px-12 py-10 text-xl gap-10',
+        '2xs': 'h-20 px-6 text-xs gap-4',
+        xs: 'h-24 px-6 text-xs gap-4',
+        sm: 'h-28 px-8 text-sm gap-6',
+        md: 'h-32 px-10 text-md gap-8',
+        lg: 'h-36 px-12 text-lg gap-8',
+        xl: 'h-40 px-12 text-xl gap-10',
       },
     },
     defaultVariants: {

package/src/components/button/icon-button.stories.tsx

@@ -0,0 +1,182 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {IconButton} from './icon-button';
+
+const variantOptions = ['primary', 'transparent'] as const;
+const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+const radiusOptions = ['rounded', 'full'] as const;
+
+const meta = {
+  title: 'Components/Button/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: variantOptions,
+    },
+    size: {
+      control: 'select',
+      options: sizeOptions,
+    },
+    radius: {
+      control: 'select',
+      options: radiusOptions,
+    },
+    muted: {control: 'boolean'},
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    icon: 'addLine',
+    variant: 'primary',
+    size: 'md',
+    radius: 'rounded',
+    muted: false,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-32">
+      {sizeOptions.map((size) => (
+        <div key={size} className="flex flex-col gap-16">
+          <Code variant="label" className="text-foreground-neutral-subtle">
+            Size: {size}
+          </Code>
+          {radiusOptions.map((radius) => (
+            <table
+              key={radius}
+              className="w-fit border-separate border-spacing-x-32 border-spacing-y-16"
+            >
+              <thead>
+                <tr>
+                  <th>{radius}</th>
+                  <th>Default</th>
+                  <th>Hover</th>
+                  <th>Focus</th>
+                  <th>Disabled</th>
+                </tr>
+              </thead>
+              <tbody>
+                {variantOptions.map((variant) => (
+                  <tr key={variant}>
+                    <td>
+                      <Code variant="label" className="text-foreground-neutral-subtle">
+                        {variant}
+                      </Code>
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="hover"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        className="focus"
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                    <td>
+                      <IconButton
+                        {...args}
+                        icon="addLine"
+                        aria-label="Add"
+                        variant={variant}
+                        disabled
+                        size={size}
+                        radius={radius}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+Variants.parameters = {
+  pseudo: {
+    hover: '.hover',
+    focusVisible: '.focus',
+  },
+};
+
+export const Muted: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Normal:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" />
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Muted:</Code>
+        <IconButton {...args} icon="addLine" aria-label="Add" muted />
+        <IconButton {...args} icon="addLine" aria-label="Add" variant="transparent" muted />
+      </div>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: ({children: _children, ...args}) => (
+    <div className="flex flex-col gap-16">
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Rounded:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="rounded"
+          />
+        ))}
+      </div>
+      <div className="flex gap-16 items-center">
+        <Code variant="label">Full:</Code>
+        {sizeOptions.map((size) => (
+          <IconButton
+            {...args}
+            key={size}
+            icon="addLine"
+            aria-label="Add"
+            size={size}
+            radius="full"
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/components/button/icon-button.tsx

@@ -0,0 +1,69 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import {Icon, type IconName} from 'components/icon';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+export const iconButtonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-background-button-inverted-default text-tag-neutral-icon shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',
+        transparent:
+          'bg-background-button-transparent-default text-tag-neutral-icon hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',
+      },
+      size: {
+        '2xs': 'w-20 h-20 text-xs',
+        xs: 'w-24 h-24 text-xs',
+        sm: 'w-28 h-28 text-sm',
+        md: 'w-32 h-32 text-md',
+        lg: 'w-36 h-36 text-lg',
+        xl: 'w-40 h-40 text-xl',
+      },
+      radius: {
+        rounded: 'rounded-6',
+        full: 'rounded-full',
+      },
+      muted: {
+        true: 'opacity-60',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      radius: 'rounded',
+      muted: false,
+    },
+  },
+);
+
+export function IconButton({
+  className,
+  variant,
+  size,
+  radius,
+  muted,
+  asChild = false,
+  children,
+  icon,
+  ...props
+}: ComponentProps<'button'> &
+  VariantProps<typeof iconButtonVariants> & {
+    asChild?: boolean;
+    icon?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="icon-button"
+      className={cn(iconButtonVariants({variant, size, radius, muted}), className)}
+      {...props}
+    >
+      {icon ? <Icon name={icon} /> : children}
+    </Comp>
+  );
+}

package/src/components/button/index.ts

@@ -1 +1,3 @@
 export * from './button';
+export * from './button-link';
+export * from './icon-button';

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

@@ -1,5 +1,6 @@
 import {Slot} from '@radix-ui/react-slot';
 import {Icon} from 'components/icon/icon';
+import {Text} from 'components/typography';
 import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
 import {cn} from 'utils/cn';
 
@@ -53,22 +54,12 @@ export function CodeBlockFooter({
       className={cn('flex w-full items-center justify-start gap-12 px-16 py-12', className)}
       {...props}
     >
-      <div className="flex shrink-0 items-center justify-center size-20 text-tag-success-icon">
-        {defaultIcon}
-      </div>
+      <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
       {(message || description) && (
-        <div className="flex flex-col items-start justify-center gap-0">
-          {message && (
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base">
-              {message}
-            </div>
-          )}
-          {description && (
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle">
-              {description}
-            </div>
-          )}
-        </div>
+        <CodeBlockFooterContent>
+          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}
+          {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
+        </CodeBlockFooterContent>
       )}
     </Comp>
   );
@@ -112,7 +103,7 @@ export function CodeBlockFooterContent({
   return (
     <Comp
       data-slot="code-block-footer-content"
-      className={cn('flex flex-col items-start justify-center gap-0', className)}
+      className={cn('flex flex-col items-start justify-center gap-0 min-w-0 flex-1', className)}
       {...props}
     >
       {children}
@@ -130,19 +121,27 @@ export function CodeBlockFooterMessage({
   children,
   ...props
 }: CodeBlockFooterMessageProps) {
-  const Comp = asChild ? Slot : 'div';
+  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 (
-    <Comp
+    <Text
       data-slot="code-block-footer-message"
-      className={cn(
-        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-base',
-        className,
-      )}
+      size="xs"
+      className={cn('overflow-hidden text-ellipsis whitespace-nowrap', className)}
       {...props}
     >
       {children}
-    </Comp>
+    </Text>
   );
 }
 
@@ -156,18 +155,26 @@ export function CodeBlockFooterDescription({
   children,
   ...props
 }: CodeBlockFooterDescriptionProps) {
-  const Comp = asChild ? Slot : 'div';
+  if (asChild) {
+    return (
+      <Slot
+        data-slot="code-block-footer-description"
+        className={cn('text-xs text-foreground-neutral-subtle', className)}
+        {...props}
+      >
+        {children}
+      </Slot>
+    );
+  }
 
   return (
-    <Comp
+    <Text
       data-slot="code-block-footer-description"
-      className={cn(
-        'overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle',
-        className,
-      )}
+      size="xs"
+      className={cn('text-foreground-neutral-subtle', className)}
       {...props}
     >
       {children}
-    </Comp>
+    </Text>
   );
 }

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

@@ -49,8 +49,11 @@ export function CodeContent({
             '[counter-reset:line] [counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
         )}
       >
-        {lines.map((line) => (
-          <span className="line px-12 w-full relative font-code text-xs leading-20" key={line}>
+        {lines.map((line, index) => (
+          <span
+            className="line px-12 w-full relative font-code text-xs leading-20"
+            key={`${index}-${line}`}
+          >
             {line}
           </span>
         ))}

package/src/components/dynamic-item/dynamic-item.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import {Button} from 'components/button/button';
 import {ItemTitle} from 'components/item';
+import {MovingBorder} from 'components/moving-border';
 import {cn} from 'utils/cn';
 import illustration1 from '../../assets/illustration-1.svg';
 import illustration2 from '../../assets/illustration-2.svg';
@@ -8,7 +9,6 @@ import illustrationBg from '../../assets/illustration-gradient.svg';
 import {Avatar} from '../avatar/avatar';
 import {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';
 import {Icon} from '../icon/icon';
-import {MovingBorder} from '../moving-border/moving-border';
 import {DynamicItem} from './dynamic-item';
 
 const meta = {

package/src/components/icon/icon.tsx

@@ -1,5 +1,8 @@
 import {
   type RemixiconComponentType,
+  RiAddLine,
+  RiArrowRightSLine,
+  RiBookOpenFill,
   RiCheckLine,
   RiCloseLine,
   RiFileCopyLine,
@@ -56,6 +59,9 @@ const iconsMap = {
   money: RiMoneyDollarCircleLine,
   homeSmile: RiHomeSmileFill,
   copy: RiFileCopyLine,
+  addLine: RiAddLine,
+  chevronRight: RiArrowRightSLine,
+  bookOpen: RiBookOpenFill,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './inline-tips';
 export * from './input';
 export * from './item';
 export * from './label';
+export * from './modal';
 export * from './textarea';
 export * from './theme';
 export * from './toast';

package/src/components/modal/index.ts

@@ -0,0 +1,23 @@
+export type {
+  ModalContentProps,
+  ModalDescriptionProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  ModalTitleProps,
+} from './modal';
+export {
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger,
+  modalContentVariants,
+  modalDefaultTransition,
+  modalOverlayVariants,
+} from './modal';