@shipfox/react-ui 0.13.0 → 0.15.0

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

@@ -0,0 +1,361 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {Input} from '../input';
+import {Popover, PopoverContent, PopoverTrigger} from '../popover';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '../select';
+import {Textarea} from '../textarea';
+import {Code, Header} from '../typography';
+import {ButtonGroup, ButtonGroupSeparator, ButtonGroupText} from './button-group';
+
+const meta = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A container that groups related buttons together with consistent styling. Automatically styles Button, Input, Select, and Textarea children without requiring manual className overrides. Separators are recommended for visual hierarchy.',
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the button group',
+      defaultValue: 'horizontal',
+    },
+  },
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+function SelectExample() {
+  const [currency, setCurrency] = useState('$');
+
+  return (
+    <div className="inline-flex gap-8">
+      <ButtonGroup className="w-280" aria-label="Currency converter">
+        <Select value={currency} onValueChange={setCurrency}>
+          <SelectTrigger
+            className="w-80 font-mono text-foreground-neutral-subtle"
+            aria-label="Select currency"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent align="start">
+            <SelectItem value="$">$ USD</SelectItem>
+            <SelectItem value="€">€ EUR</SelectItem>
+            <SelectItem value="£">£ GBP</SelectItem>
+            <SelectItem value="¥">¥ JPY</SelectItem>
+          </SelectContent>
+        </Select>
+        <ButtonGroupSeparator />
+        <Input placeholder="10.00" pattern="[0-9]*" aria-label="Amount" />
+      </ButtonGroup>
+      <ButtonGroup aria-label="Send action">
+        <Button variant="secondary" aria-label="Send">
+          <Icon name="arrowRightLine" className="size-16 text-foreground-neutral-subtle" />
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+
+function PopoverExample() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ButtonGroup aria-label="Copilot actions">
+      <ButtonGroupText>
+        <Icon name="sparklingLine" className="size-16" />
+        Copilot
+      </ButtonGroupText>
+      <ButtonGroupSeparator />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="secondary"
+            size="sm"
+            className="!text-foreground-neutral-subtle"
+            aria-label="Open Copilot options"
+          >
+            <Icon name="arrowDownSLine" className="size-16" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="w-320 p-0 rounded-12">
+          <div className="px-16 py-12 border-b border-border-neutral-strong">
+            <Header variant="h4" className="text-sm font-medium">
+              Agent Tasks
+            </Header>
+          </div>
+          <div className="p-16 flex flex-col gap-12">
+            <Textarea
+              placeholder="Describe your task in natural language."
+              className="min-h-80 resize-none"
+              aria-label="Task description"
+            />
+            <div className="flex flex-col gap-8">
+              <Code variant="label" className="font-medium text-foreground-neutral-base">
+                Start a new task with Copilot
+              </Code>
+              <Code variant="paragraph" className="text-foreground-neutral-subtle text-xs">
+                Describe your task in natural language. Copilot will work in the background and open
+                a pull request for your review.
+              </Code>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </ButtonGroup>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex flex-col gap-24">
+      {/* Basic Button Group */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Basic Button Group
+        </Code>
+        <ButtonGroup aria-label="Text alignment">
+          <Button variant="secondary" size="sm" aria-label="Align left">
+            <Icon name="rewindFill" className="size-14 text-foreground-neutral-subtle" />
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="secondary" size="sm" aria-label="Align center">
+            <Icon name="playFill" className="size-14 text-foreground-neutral-subtle" />
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="secondary" size="sm" aria-label="Align right">
+            <Icon name="speedFill" className="size-14 text-foreground-neutral-subtle" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      {/* Sizes */}
+      <div className="flex flex-col gap-12">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Sizes
+        </Code>
+        <div className="flex flex-col gap-8">
+          <ButtonGroup aria-label="Small buttons">
+            <Button variant="secondary" size="sm" aria-label="Cut">
+              <Icon name="rewindFill" className="size-14 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="sm" aria-label="Copy">
+              <Icon name="playFill" className="size-14 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="sm" aria-label="Paste">
+              <Icon name="speedFill" className="size-14 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup aria-label="Medium buttons">
+            <Button variant="secondary" size="md" aria-label="Cut">
+              <Icon name="rewindFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="md" aria-label="Copy">
+              <Icon name="playFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="md" aria-label="Paste">
+              <Icon name="speedFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup aria-label="Large buttons">
+            <Button variant="secondary" size="lg" aria-label="Cut">
+              <Icon name="rewindFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="lg" aria-label="Copy">
+              <Icon name="playFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="lg" aria-label="Paste">
+              <Icon name="speedFill" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Orientation */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Orientation
+        </Code>
+        <div className="flex gap-24 items-start">
+          <ButtonGroup aria-label="Horizontal">
+            <Button variant="secondary" size="sm" aria-label="Zoom in">
+              <Icon name="addLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="secondary" size="sm" aria-label="Zoom out">
+              <Icon name="subtractLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup orientation="vertical" className="h-fit w-fit" aria-label="Vertical">
+            <Button variant="secondary" size="sm" aria-label="Increase">
+              <Icon name="addLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator orientation="horizontal" />
+            <Button variant="secondary" size="sm" aria-label="Decrease">
+              <Icon name="subtractLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Split Button */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Split Button
+        </Code>
+        <ButtonGroup aria-label="Save actions">
+          <Button variant="secondary" size="sm" className=" !text-foreground-neutral-subtle">
+            Save
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="secondary" size="sm" aria-label="More options">
+            <Icon name="arrowDownSLine" className="size-16 text-foreground-neutral-subtle" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      {/* With Input */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          With Input
+        </Code>
+        <ButtonGroup className="w-320" aria-label="Search">
+          <Input placeholder="Search..." aria-label="Search input" />
+          <ButtonGroupSeparator />
+          <Button variant="secondary" aria-label="Submit search">
+            <Icon name="searchLine" className="size-16 text-foreground-neutral-subtle" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      {/* Quantity Input */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Quantity Selector
+        </Code>
+        <ButtonGroup className="w-280" aria-label="Quantity selector">
+          <Button variant="secondary" aria-label="Decrease">
+            <Icon name="subtractLine" className="size-16 text-foreground-neutral-subtle" />
+          </Button>
+          <ButtonGroupSeparator />
+          <Input placeholder="1" className="text-center" aria-label="Quantity" />
+          <ButtonGroupSeparator />
+          <Button variant="secondary" aria-label="Increase">
+            <Icon name="addLine" className="size-16 text-foreground-neutral-subtle" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      {/* With Select */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          With Select
+        </Code>
+        <SelectExample />
+      </div>
+
+      {/* With Popover */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          With Popover
+        </Code>
+        <PopoverExample />
+      </div>
+
+      {/* Nested Groups */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Nested Groups
+        </Code>
+        <div className="inline-flex gap-8">
+          <ButtonGroup aria-label="Page selection">
+            <Button
+              variant="transparent"
+              className="w-42 !text-foreground-neutral-subtle"
+              aria-label="Page 1"
+            >
+              1
+            </Button>
+            <ButtonGroupSeparator />
+            <Button
+              variant="transparent"
+              className="w-42 !text-foreground-neutral-subtle"
+              aria-label="Page 2"
+            >
+              2
+            </Button>
+            <ButtonGroupSeparator />
+            <Button
+              variant="transparent"
+              className="w-42 !text-foreground-neutral-subtle"
+              aria-label="Page 3"
+            >
+              3
+            </Button>
+            <ButtonGroupSeparator />
+            <Button
+              variant="transparent"
+              className="w-42 !text-foreground-neutral-subtle"
+              aria-label="Page 4"
+            >
+              4
+            </Button>
+            <ButtonGroupSeparator />
+            <Button
+              variant="transparent"
+              className="w-42 !text-foreground-neutral-subtle"
+              aria-label="Page 5"
+            >
+              5
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup aria-label="Pagination controls">
+            <Button variant="transparent" aria-label="Previous page">
+              <Icon name="arrowLeftSLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+            <ButtonGroupSeparator />
+            <Button variant="transparent" aria-label="Next page">
+              <Icon name="arrowRightSLine" className="size-16 text-foreground-neutral-subtle" />
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Disabled State */}
+      <div className="flex flex-col gap-8">
+        <Code variant="label" className="text-foreground-neutral-subtle">
+          Disabled State
+        </Code>
+        <ButtonGroup aria-label="Button group with disabled state">
+          <Button variant="secondary" size="sm" className=" !text-foreground-neutral-subtle">
+            Enabled
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="secondary" size="sm" disabled>
+            Disabled
+          </Button>
+          <ButtonGroupSeparator />
+          <Button variant="secondary" size="sm" className=" !text-foreground-neutral-subtle">
+            Enabled
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,111 @@
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
+import type {ComponentProps} from 'react';
+import {cn} from 'utils/cn';
+
+const buttonGroupVariants = cva(
+  [
+    'flex w-fit items-stretch',
+    // Apply shadow to the group container instead of individual children
+    'rounded-6 shadow-button-neutral',
+    // Focus management
+    '[&>*]:focus-visible:z-10 [&>*]:focus-visible:relative',
+    // Select trigger sizing
+    "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
+    // Input flex
+    '[&>input]:flex-1',
+    // Nested button groups
+    'has-[>[data-slot=button-group]]:gap-8',
+    // Remove shadows from all children to prevent inner shadow artifacts
+    '[&>*]:shadow-none',
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: [
+          // Remove left border-radius and left border from all but first child
+          '[&>*:not(:first-child)]:rounded-l-none',
+          '[&>*:not(:first-child)]:border-l-0',
+          // Remove right border-radius from all but last child
+          '[&>*:not(:last-child)]:rounded-r-none',
+        ],
+        vertical: [
+          'flex-col',
+          // Remove top border-radius and top border from all but first child
+          '[&>*:not(:first-child)]:rounded-t-none',
+          '[&>*:not(:first-child)]:border-t-0',
+          // Remove bottom border-radius from all but last child
+          '[&>*:not(:last-child)]:rounded-b-none',
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  },
+);
+
+type ButtonGroupProps = ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
+
+function ButtonGroup({className, orientation, ...props}: ButtonGroupProps) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" is semantically correct for button groups
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({orientation}), className)}
+      {...props}
+    />
+  );
+}
+
+type ButtonGroupTextProps = ComponentProps<'div'> & {
+  asChild?: boolean;
+};
+
+function ButtonGroupText({className, asChild = false, ...props}: ButtonGroupTextProps) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="button-group-text"
+      className={cn(
+        'flex items-center gap-8 rounded-6 px-12',
+        'bg-background-field-base text-foreground-neutral-subtle',
+        'text-sm leading-20 font-medium',
+        'shadow-button-neutral',
+        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type ButtonGroupSeparatorProps = ComponentProps<'div'> & {
+  orientation?: 'horizontal' | 'vertical';
+};
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: ButtonGroupSeparatorProps) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="button-group-separator"
+      data-orientation={orientation}
+      className={cn(
+        'shrink-0 self-stretch',
+        'bg-border-neutral-strong',
+        orientation === 'vertical' ? 'h-auto w-px' : 'h-px w-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};

package/src/components/button-group/index.ts

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

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

@@ -1,7 +1,10 @@
 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 {useResolvedTheme} from 'hooks/useResolvedTheme';
 import type {ComponentProps, HTMLAttributes, ReactNode} from 'react';
+import {ShipfoxLoader} from 'shipfox-loader-react';
 import {cn} from 'utils/cn';
 
 export type CodeBlockFooterProps = HTMLAttributes<HTMLDivElement> & {
@@ -23,11 +26,17 @@ export function CodeBlockFooter({
   ...props
 }: CodeBlockFooterProps) {
   const Comp = asChild ? Slot : 'div';
+  const resolvedTheme = useResolvedTheme();
 
   const defaultIcon =
     icon ??
     (state === 'running' ? (
-      <Icon name="shipfox" className="size-20" aria-hidden="true" />
+      <ShipfoxLoader
+        size={20}
+        animation="circular"
+        color={resolvedTheme === 'dark' ? 'white' : 'orange'}
+        background={resolvedTheme === 'dark' ? 'dark' : 'light'}
+      />
     ) : (
       <Icon
         name="checkCircleSolid"
@@ -57,7 +66,15 @@ export function CodeBlockFooter({
       <CodeBlockFooterIcon className="text-tag-success-icon">{defaultIcon}</CodeBlockFooterIcon>
       {(message || description) && (
         <CodeBlockFooterContent>
-          {message && <CodeBlockFooterMessage>{message}</CodeBlockFooterMessage>}
+          {message && (
+            <CodeBlockFooterMessage>
+              {state === 'running' && typeof message === 'string' ? (
+                <ShinyText text={message} speed={3} />
+              ) : (
+                message
+              )}
+            </CodeBlockFooterMessage>
+          )}
           {description && <CodeBlockFooterDescription>{description}</CodeBlockFooterDescription>}
         </CodeBlockFooterContent>
       )}

package/src/components/command/command.stories.tsx

@@ -0,0 +1,133 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {Icon} from '../icon';
+import {Popover, PopoverContent, PopoverTrigger} from '../popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  CommandTrigger,
+} from './command';
+
+const meta = {
+  title: 'Components/Command',
+  component: Command,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Command>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-10 shadow-tooltip max-w-400">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Icon name="calendar2Line" className="size-16 mr-8" />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Icon name="emotion2Line" className="size-16 mr-8" />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem>
+            <Icon name="calculatorLine" className="size-16 mr-8" />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <Icon name="user3Line" className="size-16 mr-8" />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Icon name="mailLine" className="size-16 mr-8" />
+            <span>Mail</span>
+            <CommandShortcut>⌘M</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Icon name="settings3Line" className="size-16 mr-8" />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};
+
+export const Combobox: Story = {
+  render: () => {
+    const frameworks = [
+      {value: 'next.js', label: 'Next.js', icon: 'reactjsLine' as const},
+      {value: 'sveltekit', label: 'SvelteKit', icon: 'svelteLine' as const},
+      {value: 'nuxt.js', label: 'Nuxt.js', icon: 'vuejsLine' as const},
+      {value: 'remix', label: 'Remix', icon: 'reactjsLine' as const},
+      {value: 'astro', label: 'Astro', icon: 'rocketLine' as const},
+      {value: 'vue', label: 'Vue', icon: 'vuejsLine' as const},
+      {value: 'react', label: 'React', icon: 'reactjsLine' as const},
+    ];
+
+    function ComboboxDemo() {
+      const [open, setOpen] = useState(false);
+      const [value, setValue] = useState('');
+
+      return (
+        <div className="flex flex-col gap-16">
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <CommandTrigger className="w-280" placeholder="Select framework...">
+                {value ? frameworks.find((framework) => framework.value === value)?.label : null}
+              </CommandTrigger>
+            </PopoverTrigger>
+            <PopoverContent className="w-280 p-0" align="start">
+              <Command>
+                <CommandInput placeholder="Search framework..." />
+                <CommandList>
+                  <CommandEmpty>No framework found.</CommandEmpty>
+                  <CommandGroup>
+                    {frameworks.map((framework) => (
+                      <CommandItem
+                        key={framework.value}
+                        value={framework.value}
+                        onSelect={(currentValue) => {
+                          setValue(currentValue === value ? '' : currentValue);
+                          setOpen(false);
+                        }}
+                      >
+                        <Icon
+                          name="check"
+                          className={`size-16 mr-8 ${value === framework.value ? 'opacity-100' : 'opacity-0'}`}
+                        />
+                        <Icon name={framework.icon} className="size-16 mr-8" />
+                        {framework.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          {value && (
+            <p className="text-sm text-foreground-neutral-muted">
+              Selected: {frameworks.find((f) => f.value === value)?.label}
+            </p>
+          )}
+        </div>
+      );
+    }
+
+    return <ComboboxDemo />;
+  },
+};