@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/search/search.stories.tsx

@@ -1,392 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {useState} from 'react';
-import {Icon} from '../icon';
-import {
-  Search,
-  SearchContent,
-  SearchEmpty,
-  SearchFooter,
-  SearchGroup,
-  SearchInline,
-  SearchInput,
-  SearchItem,
-  SearchList,
-  SearchSeparator,
-  SearchTrigger,
-} from './index';
-
-const meta: Meta = {
-  title: 'Components/Search',
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A search component with two types: inline (input-style) and modal (trigger + overlay). Supports primary/secondary variants, base/small sizes, and squared/rounded radius options.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Inline: Story = {
-  render: () => {
-    function InlineDemo() {
-      const [value, setValue] = useState('');
-
-      return (
-        <div className="flex flex-col gap-16 max-w-400">
-          <SearchInline
-            placeholder="Search..."
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            onClear={() => setValue('')}
-          />
-          {value && (
-            <p className="text-sm text-foreground-neutral-muted">Searching for: "{value}"</p>
-          )}
-        </div>
-      );
-    }
-    return <InlineDemo />;
-  },
-};
-
-export const InlineVariants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Primary (default)</span>
-        <div className="flex gap-8">
-          <SearchInline
-            variant="primary"
-            radius="squared"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-          <SearchInline
-            variant="primary"
-            radius="rounded"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-        </div>
-      </div>
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Secondary</span>
-        <div className="flex gap-8">
-          <SearchInline
-            variant="secondary"
-            radius="squared"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-          <SearchInline
-            variant="secondary"
-            radius="rounded"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const InlineSizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Base (32px)</span>
-        <div className="flex gap-8">
-          <SearchInline
-            size="base"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-        </div>
-      </div>
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Small (28px)</span>
-        <div className="flex gap-8">
-          <SearchInline
-            size="small"
-            placeholder="Search..."
-            defaultValue="random"
-            className="w-200"
-          />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-function ModalSearchDemo() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Search open={open} onOpenChange={setOpen} shortcutKey="meta+k">
-      <SearchTrigger placeholder="Find..." className="w-full max-w-280" />
-      <SearchContent aria-describedby={undefined}>
-        <SearchInput placeholder="Search for anything..." />
-        <SearchList>
-          <SearchEmpty>No results found.</SearchEmpty>
-          <SearchGroup heading="Recent">
-            <SearchItem
-              icon={
-                <Icon name="gitBranchLine" className="size-16 text-foreground-neutral-subtle" />
-              }
-              description="qr-attendance"
-            >
-              feat/data-processing
-            </SearchItem>
-            <SearchItem
-              icon={
-                <Icon name="gitBranchLine" className="size-16 text-foreground-neutral-subtle" />
-              }
-              description="qr-attendance"
-            >
-              feat/pagination-polling
-            </SearchItem>
-          </SearchGroup>
-          <SearchSeparator />
-          <SearchGroup heading="Team">
-            <SearchItem
-              icon={<Icon name="rocketLine" className="size-16 text-foreground-neutral-subtle" />}
-              description="Team"
-            >
-              Deployments
-            </SearchItem>
-            <SearchItem
-              icon={<Icon name="linksLine" className="size-16 text-foreground-neutral-subtle" />}
-              description="Team"
-            >
-              Integrations
-            </SearchItem>
-          </SearchGroup>
-        </SearchList>
-        <SearchFooter />
-      </SearchContent>
-    </Search>
-  );
-}
-
-export const Modal: Story = {
-  render: () => <ModalSearchDemo />,
-};
-
-function TriggerPreview({
-  variant,
-  size,
-  radius,
-  className,
-}: {
-  variant?: 'primary' | 'secondary';
-  size?: 'base' | 'small';
-  radius?: 'squared' | 'rounded';
-  className?: string;
-}) {
-  return (
-    <Search>
-      <SearchTrigger variant={variant} size={size} radius={radius} className={className} />
-    </Search>
-  );
-}
-
-export const ModalTriggerVariants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Primary (default)</span>
-        <div className="flex gap-8">
-          <TriggerPreview variant="primary" radius="squared" className="w-200" />
-          <TriggerPreview variant="primary" radius="rounded" className="w-200" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Secondary</span>
-        <div className="flex gap-8">
-          <TriggerPreview variant="secondary" radius="squared" className="w-200" />
-          <TriggerPreview variant="secondary" radius="rounded" className="w-200" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const ModalTriggerSizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-16">
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Base (32px)</span>
-        <div className="flex gap-8">
-          <TriggerPreview size="base" variant="primary" className="w-200" />
-          <TriggerPreview size="base" variant="secondary" className="w-200" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-8">
-        <span className="text-xs text-foreground-neutral-muted">Small (28px)</span>
-        <div className="flex gap-8">
-          <TriggerPreview size="small" variant="primary" className="w-200" />
-          <TriggerPreview size="small" variant="secondary" className="w-200" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-export const AllCombinations: Story = {
-  render: () => (
-    <div className="flex flex-col gap-24">
-      <div>
-        <h3 className="text-sm font-medium text-foreground-neutral-base mb-12">Inline Search</h3>
-        <div className="grid grid-cols-4 gap-12">
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Base</span>
-            <SearchInline
-              variant="primary"
-              radius="squared"
-              size="base"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Small</span>
-            <SearchInline
-              variant="primary"
-              radius="squared"
-              size="small"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Base</span>
-            <SearchInline
-              variant="primary"
-              radius="rounded"
-              size="base"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Small</span>
-            <SearchInline
-              variant="primary"
-              radius="rounded"
-              size="small"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Squared / Base
-            </span>
-            <SearchInline
-              variant="secondary"
-              radius="squared"
-              size="base"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Squared / Small
-            </span>
-            <SearchInline
-              variant="secondary"
-              radius="squared"
-              size="small"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Rounded / Base
-            </span>
-            <SearchInline
-              variant="secondary"
-              radius="rounded"
-              size="base"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Rounded / Small
-            </span>
-            <SearchInline
-              variant="secondary"
-              radius="rounded"
-              size="small"
-              placeholder="Search..."
-              className="w-full"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-medium text-foreground-neutral-base mb-12">
-          Modal Search Triggers
-        </h3>
-        <div className="grid grid-cols-4 gap-12">
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Base</span>
-            <TriggerPreview variant="primary" radius="squared" size="base" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Small</span>
-            <TriggerPreview variant="primary" radius="squared" size="small" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Base</span>
-            <TriggerPreview variant="primary" radius="rounded" size="base" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Small</span>
-            <TriggerPreview variant="primary" radius="rounded" size="small" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Squared / Base
-            </span>
-            <TriggerPreview variant="secondary" radius="squared" size="base" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Squared / Small
-            </span>
-            <TriggerPreview variant="secondary" radius="squared" size="small" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Rounded / Base
-            </span>
-            <TriggerPreview variant="secondary" radius="rounded" size="base" className="w-full" />
-          </div>
-          <div className="flex flex-col gap-4">
-            <span className="text-xs text-foreground-neutral-muted">
-              Secondary / Rounded / Small
-            </span>
-            <TriggerPreview variant="secondary" radius="rounded" size="small" className="w-full" />
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/components/search/search.tsx

@@ -1,47 +0,0 @@
-import {Command as CommandPrimitive} from 'cmdk';
-import type {ReactNode} from 'react';
-import {useCallback, useState} from 'react';
-import {SearchContext, useControllableState, useKeyboardShortcut} from './search-context';
-
-export type SearchProps = {
-  children: ReactNode;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  defaultOpen?: boolean;
-  shortcutKey?: string;
-  shouldFilter?: boolean;
-};
-
-export function Search({
-  children,
-  open: controlledOpen,
-  onOpenChange,
-  defaultOpen = false,
-  shortcutKey,
-  shouldFilter = true,
-}: SearchProps) {
-  const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);
-  const [searchValue, setSearchValue] = useState('');
-
-  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
-
-  useKeyboardShortcut(shortcutKey, handleOpen);
-
-  const handleSetOpen = useCallback(
-    (newOpen: boolean) => {
-      if (!newOpen) {
-        setSearchValue('');
-      }
-      setOpen(newOpen);
-    },
-    [setOpen],
-  );
-
-  return (
-    <SearchContext.Provider value={{open, setOpen: handleSetOpen, searchValue, setSearchValue}}>
-      <CommandPrimitive data-slot="search" shouldFilter={shouldFilter}>
-        {children}
-      </CommandPrimitive>
-    </SearchContext.Provider>
-  );
-}

package/src/components/select/index.ts

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

package/src/components/select/select.stories.tsx

@@ -1,207 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Kbd} from '../kbd';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from './select';
-
-const meta = {
-  title: 'Components/Select',
-  component: Select,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Select>
-      <SelectTrigger className="w-200">
-        <SelectValue placeholder="Select an option" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="option1">Option 1</SelectItem>
-        <SelectItem value="option2">Option 2</SelectItem>
-        <SelectItem value="option3">Option 3</SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const WithGroups: Story = {
-  render: () => (
-    <Select defaultValue="typescript">
-      <SelectTrigger className="w-280">
-        <SelectValue placeholder="Select a technology" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>Frontend</SelectLabel>
-          <SelectItem value="react">React</SelectItem>
-          <SelectItem value="vue">Vue</SelectItem>
-          <SelectItem value="angular">Angular</SelectItem>
-          <SelectItem value="svelte">Svelte</SelectItem>
-        </SelectGroup>
-        <SelectSeparator />
-        <SelectGroup>
-          <SelectLabel>Backend</SelectLabel>
-          <SelectItem value="nodejs">Node.js</SelectItem>
-          <SelectItem value="python">Python</SelectItem>
-          <SelectItem value="ruby">Ruby</SelectItem>
-          <SelectItem value="go">Go</SelectItem>
-        </SelectGroup>
-        <SelectSeparator />
-        <SelectGroup>
-          <SelectLabel>Languages</SelectLabel>
-          <SelectItem value="typescript">TypeScript</SelectItem>
-          <SelectItem value="javascript">JavaScript</SelectItem>
-          <SelectItem value="rust">Rust</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  ),
-};
-
-export const WithIcons: Story = {
-  render: () => (
-    <div className="flex flex-col gap-12">
-      <Select defaultValue="active">
-        <SelectTrigger className="w-200">
-          <SelectValue placeholder="Select status" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="active" icon="checkboxCircleLine">
-            Active
-          </SelectItem>
-          <SelectItem value="pending" icon="timeLine">
-            Pending
-          </SelectItem>
-          <SelectItem value="inactive" icon="closeLine">
-            Inactive
-          </SelectItem>
-        </SelectContent>
-      </Select>
-
-      <Select defaultValue="medium">
-        <SelectTrigger className="w-200">
-          <SelectValue placeholder="Select priority" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="high" icon="arrowUpLine">
-            High
-          </SelectItem>
-          <SelectItem value="medium" icon="equalLine">
-            Medium
-          </SelectItem>
-          <SelectItem value="low" icon="arrowDownLine">
-            Low
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-12">
-      <Select>
-        <SelectTrigger size="small" className="w-200">
-          <SelectValue placeholder="Small" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>
-
-      <Select>
-        <SelectTrigger size="base" className="w-200">
-          <SelectValue placeholder="Base (default)" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-col gap-12">
-      <Select>
-        <SelectTrigger variant="base" className="w-200">
-          <SelectValue placeholder="Base variant" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>
-
-      <Select>
-        <SelectTrigger variant="component" className="w-200">
-          <SelectValue placeholder="Component variant" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="option1">Option 1</SelectItem>
-          <SelectItem value="option2">Option 2</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  ),
-};
-
-export const TimeSelector: Story = {
-  render: () => (
-    <Select defaultValue="2days">
-      <SelectTrigger className="w-280">
-        <div className="flex items-center gap-8 flex-1 min-w-0">
-          <SelectValue placeholder="Select time range" />
-        </div>
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="1hour">
-          <div className="flex items-center gap-8">
-            <Kbd className="h-16">1h</Kbd>
-            <span>Past 1 Hour</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="1day">
-          <div className="flex items-center gap-8">
-            <Kbd className="h-16">1d</Kbd>
-            <span>Past 1 Day</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="2days">
-          <div className="flex items-center gap-8">
-            <Kbd className="h-16">2d</Kbd>
-            <span>Past 2 Days</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="7days">
-          <div className="flex items-center gap-8">
-            <Kbd className="h-16">7d</Kbd>
-            <span>Past 7 Days</span>
-          </div>
-        </SelectItem>
-        <SelectItem value="30days">
-          <div className="flex items-center gap-8">
-            <Kbd className="h-16">30d</Kbd>
-            <span>Past 30 Days</span>
-          </div>
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  ),
-};