@shipfox/react-ui 0.0.1

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@shipfox/react-ui",
+  "license": "MIT",
+  "version": "0.0.1",
+  "private": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@remixicon/react": "^4.6.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.541.0",
+    "react-day-picker": "^9.5.1",
+    "recharts": "^3.1.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.2.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^8.19.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "date-fns": "^4.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.52.1"
+  },
+  "devDependencies": {
+    "@storybook/builder-vite": "^9.1.8",
+    "@storybook/react": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/react-table": "^8.17.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.1.11",
+    "@vitejs/plugin-react": "^5.0.4",
+    "date-fns": "^4.1.0",
+    "jsdom": "^26.1.0",
+    "storybook": "^9.1.8",
+    "storybook-addon-pseudo-states": "^9.1.8",
+    "tailwindcss": "^4.1.13",
+    "tw-animate-css": "^1.4.0",
+    "@shipfox/biome": "1.2.1",
+    "@shipfox/swc": "1.2.0",
+    "@shipfox/ts-config": "1.3.4",
+    "@shipfox/typescript": "1.1.1",
+    "@shipfox/vite": "1.2.0",
+    "@shipfox/vitest": "1.1.1"
+  },
+  "scripts": {
+    "build": "swc",
+    "check": "biome",
+    "storybook": "storybook dev",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "vitest-run",
+    "type": "tsc-emit"
+  }
+}

package/src/colors.stories.conts.ts

@@ -0,0 +1,164 @@
+export const primitiveColors = {
+  neutral: {
+    variants: [
+      'bg-neutral-0',
+      'bg-neutral-50',
+      'bg-neutral-100',
+      'bg-neutral-200',
+      'bg-neutral-300',
+      'bg-neutral-400',
+      'bg-neutral-500',
+      'bg-neutral-600',
+      'bg-neutral-700',
+      'bg-neutral-800',
+      'bg-neutral-900',
+      'bg-neutral-950',
+      'bg-neutral-1000',
+    ],
+  },
+  purple: {
+    variants: [
+      'bg-purple-50',
+      'bg-purple-100',
+      'bg-purple-200',
+      'bg-purple-300',
+      'bg-purple-400',
+      'bg-purple-500',
+      'bg-purple-600',
+      'bg-purple-700',
+      'bg-purple-800',
+      'bg-purple-900',
+      'bg-purple-950',
+    ],
+  },
+  blue: {
+    variants: [
+      'bg-blue-50',
+      'bg-blue-100',
+      'bg-blue-200',
+      'bg-blue-300',
+      'bg-blue-400',
+      'bg-blue-500',
+      'bg-blue-600',
+      'bg-blue-700',
+      'bg-blue-800',
+      'bg-blue-900',
+      'bg-blue-950',
+    ],
+  },
+  green: {
+    variants: [
+      'bg-green-50',
+      'bg-green-100',
+      'bg-green-200',
+      'bg-green-300',
+      'bg-green-400',
+      'bg-green-500',
+      'bg-green-600',
+      'bg-green-700',
+      'bg-green-800',
+      'bg-green-900',
+      'bg-green-950',
+    ],
+  },
+  primary: {
+    variants: [
+      'bg-primary-50',
+      'bg-primary-100',
+      'bg-primary-200',
+      'bg-primary-300',
+      'bg-primary-400',
+      'bg-primary-500',
+      'bg-primary-600',
+      'bg-primary-700',
+      'bg-primary-800',
+      'bg-primary-900',
+      'bg-primary-950',
+    ],
+  },
+  red: {
+    variants: [
+      'bg-red-50',
+      'bg-red-100',
+      'bg-red-200',
+      'bg-red-300',
+      'bg-red-400',
+      'bg-red-500',
+      'bg-red-600',
+      'bg-red-700',
+      'bg-red-800',
+      'bg-red-900',
+      'bg-red-950',
+    ],
+  },
+  orange: {
+    variants: [
+      'bg-orange-50',
+      'bg-orange-100',
+      'bg-orange-200',
+      'bg-orange-300',
+      'bg-orange-400',
+      'bg-orange-500',
+      'bg-orange-600',
+      'bg-orange-700',
+      'bg-orange-800',
+      'bg-orange-900',
+      'bg-orange-950',
+    ],
+  },
+  accent: {
+    variants: [
+      'bg-accent-purple',
+      'bg-accent-indigo',
+      'bg-accent-mint',
+      'bg-accent-green',
+      'bg-accent-teal',
+      'bg-accent-brown',
+      'bg-accent-blue',
+      'bg-accent-orange',
+      'bg-accent-yellow',
+      'bg-accent-pink',
+      'bg-accent-gray',
+      'bg-accent-cyan',
+      'bg-accent-red',
+    ],
+  },
+  'alpha-white': {
+    variants: [
+      'bg-alpha-white-0',
+      'bg-alpha-white-2',
+      'bg-alpha-white-4',
+      'bg-alpha-white-6',
+      'bg-alpha-white-8',
+      'bg-alpha-white-10',
+      'bg-alpha-white-12',
+      'bg-alpha-white-16',
+      'bg-alpha-white-24',
+      'bg-alpha-white-40',
+      'bg-alpha-white-56',
+      'bg-alpha-white-64',
+      'bg-alpha-white-72',
+      'bg-alpha-white-80',
+      'bg-alpha-white-88',
+    ],
+  },
+  'alpha-black': {
+    variants: [
+      'bg-alpha-black-0',
+      'bg-alpha-black-2',
+      'bg-alpha-black-4',
+      'bg-alpha-black-6',
+      'bg-alpha-black-8',
+      'bg-alpha-black-10',
+      'bg-alpha-black-12',
+      'bg-alpha-black-16',
+      'bg-alpha-black-24',
+      'bg-alpha-black-40',
+      'bg-alpha-black-56',
+      'bg-alpha-black-64',
+      'bg-alpha-black-72',
+      'bg-alpha-black-80',
+      'bg-alpha-black-88',
+    ],
+  },
+} as const;

package/src/colors.stories.tsx

@@ -0,0 +1,66 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code, Header} from 'components/typography';
+import {cn} from 'utils/cn';
+import {primitiveColors} from './colors.stories.conts';
+
+const meta: Meta = {
+  title: 'Assets/Colors',
+};
+export default meta;
+
+type Story = StoryObj;
+
+interface ColorItemProps {
+  color: string;
+  variant: string;
+}
+
+function ColorItem({variant}: ColorItemProps) {
+  const value = variant.split('-').pop();
+  return (
+    <div className="flex flex-col items-center gap-1">
+      <div className={cn('h-24 w-full rounded-6 border border-border', variant)} />
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        {value}
+      </Code>
+    </div>
+  );
+}
+
+interface ColorPaletteProps {
+  title: string;
+  rootKey: string;
+  variants: readonly string[];
+}
+
+function ColorPalette({title, rootKey, variants}: ColorPaletteProps) {
+  return (
+    <div className="grid grid-cols-16 gap-8">
+      <Code variant="label" className="text-foreground-neutral-subtle">
+        {title}
+      </Code>
+      {variants.map((variant) => (
+        <ColorItem key={variant} variant={variant} color={rootKey} />
+      ))}
+    </div>
+  );
+}
+
+export const Palette: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <section className="flex flex-col gap-8">
+        <Header variant="h2">Primitive Colors</Header>
+
+        {Object.entries(primitiveColors).map(([color, variants]) => (
+          <ColorPalette
+            key={color}
+            title={color.replace('-', ' ')}
+            rootKey={color}
+            variants={variants.variants as readonly string[]}
+          />
+        ))}
+      </section>
+    </div>
+  ),
+};

package/src/components/button.stories.tsx

@@ -0,0 +1,126 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Code} from 'components/typography';
+import {Button} from './button';
+
+const variantOptions = [
+  'primary',
+  'secondary',
+  'danger',
+  'transparent',
+  'transparentMuted',
+] as const;
+const sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: variantOptions,
+    },
+    size: {
+      control: 'select',
+      options: sizeOptions,
+    },
+    asChild: {control: 'boolean'},
+  },
+  args: {
+    children: 'Click me',
+    variant: 'primary',
+    size: 'md',
+  },
+} satisfies Meta<typeof Button>;
+
+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) => (
+        <table key={size} className="w-fit border-separate border-spacing-x-32 border-spacing-y-16">
+          <thead>
+            <tr>
+              <th>{size}</th>
+              <th>Default</th>
+              <th>Hover</th>
+              <th>Active</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>
+                  <Button {...args} variant={variant} size={size}>
+                    Click me
+                  </Button>
+                </td>
+                <td>
+                  <Button {...args} variant={variant} className="hover" size={size}>
+                    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
+                  </Button>
+                </td>
+                <td>
+                  <Button {...args} variant={variant} disabled size={size}>
+                    Click me
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ))}
+    </div>
+  ),
+};
+
+Variants.parameters = {
+  pseudo: {
+    hover: '.hover',
+    active: '.active',
+    focusVisible: '.focus',
+  },
+};
+
+export const Icons: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-16">
+      <div>
+        <Button {...args} iconLeft="google">
+          Click me
+        </Button>
+      </div>
+      <div>
+        <Button {...args} iconRight="microsoft">
+          Click me
+        </Button>
+      </div>
+      <div>
+        <Button {...args} iconLeft="google" iconRight="microsoft">
+          Click me
+        </Button>
+      </div>
+    </div>
+  ),
+};

package/src/components/button.tsx

@@ -0,0 +1,63 @@
+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';
+import {Icon, type IconName} from './icon/icon';
+
+export const buttonVariants = cva(
+  'rounded-6 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-foreground-contrast-primary 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',
+        secondary:
+          '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',
+        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',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  },
+);
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  iconLeft,
+  iconRight,
+  ...props
+}: ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    iconLeft?: IconName;
+    iconRight?: IconName;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp data-slot="button" className={cn(buttonVariants({variant, size, className}))} {...props}>
+      {iconLeft && <Icon name={iconLeft} />}
+      {children}
+      {iconRight && <Icon name={iconRight} />}
+    </Comp>
+  );
+}

package/src/components/icon/custom/badge.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function BadgeIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Badge</title>
+      <path d="M17.533 9.00013C17.533 7.83 16.9271 6.7452 15.9703 6.11266C16.1996 4.9884 15.8604 3.79266 15.0338 2.966C14.2071 2.13933 13.0103 1.80013 11.8871 2.02946C11.2535 1.07266 10.1698 0.466797 8.99964 0.466797C7.82951 0.466797 6.74471 1.07266 6.11218 2.02946C4.98471 1.79693 3.79218 2.13933 2.96551 2.966C2.13778 3.79373 1.79964 4.9884 2.02898 6.11266C1.07218 6.7452 0.466309 7.82893 0.466309 9.00013C0.466309 10.1713 1.07218 11.254 2.02898 11.8876C1.79964 13.0119 2.13778 14.2065 2.96551 15.0343C3.79218 15.862 4.98684 16.1991 6.11218 15.9708C6.74471 16.9276 7.82844 17.5335 8.99964 17.5335C10.1708 17.5335 11.2535 16.9276 11.8871 15.9708C13.0082 16.2001 14.206 15.8609 15.0338 15.0343C15.8615 14.2076 16.1996 13.0119 15.9703 11.8876C16.9271 11.2551 17.533 10.1703 17.533 9.00013ZM13.0988 6.55533L8.56551 12.422C8.42044 12.6097 8.19964 12.7239 7.96284 12.7324C7.95218 12.7324 7.94258 12.7324 7.93298 12.7324C7.70684 12.7324 7.49031 12.6364 7.33778 12.4679L4.93778 9.8012C4.64231 9.47266 4.66898 8.96706 4.99751 8.67053C5.32711 8.37613 5.83164 8.40173 6.12818 8.73026L7.88604 10.6844L11.8338 5.57613C12.1036 5.22626 12.6071 5.16226 12.9559 5.43213C13.3058 5.702 13.3698 6.2044 13.0999 6.55426L13.0988 6.55533Z" />
+    </svg>
+  );
+}

package/src/components/icon/custom/check-circle-solid.tsx

@@ -0,0 +1,24 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function CheckCircleSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Check Circle Solid</title>
+      <g clipPath="url(#clip0_6552_160761)">
+        <path d="M9.19984 0.664062C4.49477 0.664062 0.666504 4.49233 0.666504 9.1974C0.666504 13.9025 4.49477 17.7307 9.19984 17.7307C13.9049 17.7307 17.7332 13.9025 17.7332 9.1974C17.7332 4.49233 13.9049 0.664062 9.19984 0.664062ZM13.299 6.7526L8.7657 12.6193C8.62064 12.807 8.39984 12.9211 8.16304 12.9297C8.15237 12.9297 8.14277 12.9297 8.13317 12.9297C7.90704 12.9297 7.6905 12.8337 7.53797 12.6651L5.13797 9.99846C4.8425 9.66993 4.86917 9.16433 5.1977 8.86779C5.5273 8.5734 6.03077 8.599 6.32837 8.92753L8.08624 10.8817L12.034 5.7734C12.3038 5.42353 12.8073 5.35953 13.1561 5.6294C13.506 5.89926 13.57 6.40166 13.3001 6.75153L13.299 6.7526Z" />
+      </g>
+      <defs>
+        <clipPath id="clip0_6552_160761">
+          <rect width="18" height="18" fill="white" transform="translate(0.200195 0.199219)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/components/icon/custom/circle-dotted-line.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function CircleDottedLineIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Circle Dotted Line</title>
+      <path d="M7.17235 18.3086C7.46415 17.8702 8.05551 17.7513 8.49369 18.043C9.2707 18.5608 10.1526 18.9325 11.0991 19.117C11.616 19.2177 11.9539 19.7187 11.8533 20.236C11.7526 20.7531 11.2519 21.0906 10.7352 20.9901C9.53488 20.7561 8.41811 20.2857 7.43693 19.6318C6.99881 19.3397 6.88057 18.7472 7.17235 18.3086ZM16.5055 18.043C16.9438 17.7509 17.5358 17.87 17.8277 18.3086C18.1195 18.7472 18.0006 19.3398 17.5623 19.6318C16.5812 20.2856 15.465 20.7561 14.2648 20.9901C13.7481 21.0907 13.2474 20.7531 13.1467 20.236C13.0461 19.7187 13.384 19.2177 13.9009 19.117C14.8473 18.9325 15.7286 18.5607 16.5055 18.043ZM4.27439 12.6194C4.79159 12.5204 5.29128 12.8604 5.39013 13.3781C5.57468 14.3443 5.95069 15.2417 6.4787 16.0309C6.77163 16.4687 6.65463 17.0617 6.21723 17.3549C5.7797 17.6482 5.18731 17.5304 4.89433 17.0924C4.22698 16.0949 3.75068 14.9592 3.51712 13.7361C3.41829 13.2185 3.75732 12.7184 4.27439 12.6194ZM19.6099 13.3781C19.7087 12.8604 20.2084 12.5204 20.7256 12.6194C21.2426 12.7184 21.5817 13.2185 21.4829 13.7361C21.2493 14.9591 20.773 16.0949 20.1057 17.0924C19.8127 17.5304 19.2203 17.6482 18.7828 17.3549C18.3453 17.0617 18.2283 16.4688 18.5213 16.0309C19.0493 15.2417 19.4253 14.3443 19.6099 13.3781ZM4.89433 6.92474C5.18738 6.4871 5.77981 6.36987 6.21723 6.66304C6.65462 6.95631 6.77164 7.54924 6.4787 7.9871C5.95069 8.77632 5.57467 9.67363 5.39013 10.6399C5.29128 11.1575 4.79159 11.4975 4.27439 11.3986C3.75731 11.2996 3.41829 10.7995 3.51712 10.2819C3.75069 9.05872 4.2269 7.92235 4.89433 6.92474ZM18.7828 6.66304C19.2202 6.36987 19.8126 6.48706 20.1057 6.92474C20.7731 7.92235 21.2493 9.05871 21.4829 10.2819C21.5817 10.7994 21.2426 11.2995 20.7256 11.3986C20.2084 11.4975 19.7087 11.1575 19.6099 10.6399C19.4253 9.67364 19.0493 8.77632 18.5213 7.9871C18.2284 7.54922 18.3453 6.95629 18.7828 6.66304ZM10.7352 3.02556C11.252 2.92503 11.7527 3.26243 11.8533 3.77961C11.9539 4.29692 11.616 4.79792 11.0991 4.89866C10.1526 5.08317 9.27069 5.4541 8.49369 5.97188C8.05553 6.26382 7.46424 6.14542 7.17235 5.70707C6.88059 5.26849 6.99888 4.67594 7.43693 4.38379C8.41811 3.72993 9.53488 3.25952 10.7352 3.02556ZM13.1467 3.77961C13.2474 3.2624 13.748 2.92494 14.2648 3.02556C15.4651 3.25951 16.5811 3.72997 17.5623 4.38379C18.0006 4.67587 18.1195 5.26839 17.8277 5.70707C17.5358 6.14551 16.9437 6.2639 16.5055 5.97188C15.7287 5.45425 14.8472 5.08315 13.9009 4.89866C13.384 4.79792 13.0461 4.29692 13.1467 3.77961Z" />
+    </svg>
+  );
+}

package/src/components/icon/custom/component-fill.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function ComponentFillIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Component Fill</title>
+      <path d="M16.6277 17.1584L13.0159 20.7702C12.8791 20.9071 12.6989 20.9894 12.5151 20.999C12.3313 21.0087 12.1588 20.945 12.0357 20.8218L8.32124 17.1074L12.4489 12.9797L16.6277 17.1584ZM11.5203 12.0511L7.39263 16.1788L3.67817 12.4643C3.55503 12.3412 3.49129 12.1687 3.50096 11.9849C3.51064 11.8011 3.59294 11.6209 3.72976 11.4841L7.34155 7.87231L11.5203 12.0511ZM16.6788 6.89263L12.5521 11.0193L8.37334 6.84052L11.9841 3.22976C12.1209 3.09294 12.3011 3.01064 12.4849 3.00096C12.6687 2.99129 12.8412 3.05503 12.9643 3.17817L16.6788 6.89263ZM21.3218 11.5357C21.445 11.6588 21.5087 11.8313 21.499 12.0151C21.4894 12.1989 21.4071 12.3791 21.2702 12.5159L17.6595 16.1267L13.4807 11.9479L17.6074 7.82124L21.3218 11.5357Z" />
+    </svg>
+  );
+}

package/src/components/icon/custom/component-line.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function ComponentLineIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Component Line</title>
+      <path d="M20.7217 12.1353C20.8449 12.2584 20.9086 12.4309 20.8989 12.6147C20.8893 12.7985 20.807 12.9787 20.6701 13.1155L12.4158 21.3698C12.279 21.5067 12.0988 21.589 11.915 21.5986C11.7312 21.6083 11.5587 21.5446 11.4356 21.4214L3.07807 13.0639C2.95493 12.9408 2.89119 12.7683 2.90086 12.5845C2.91054 12.4007 2.99284 12.2205 3.12966 12.0837L11.384 3.82937C11.5208 3.69255 11.701 3.61024 11.8848 3.60057C12.0686 3.59089 12.2411 3.65464 12.3642 3.77778L20.7217 12.1353ZM10.9197 12.6512L7.66955 9.40105L4.57417 12.4964L7.82432 15.7466L10.9197 12.6512ZM15.0985 16.83L11.8483 13.5798L8.75293 16.6752L12.0031 19.9253L15.0985 16.83ZM15.0469 8.52403L11.7967 5.27388L8.70134 8.36926L11.9515 11.6194L15.0469 8.52403ZM19.2256 12.7028L15.9755 9.45264L12.8801 12.548L16.1303 15.7982L19.2256 12.7028Z" />
+    </svg>
+  );
+}

package/src/components/icon/custom/ellipse-mini-solid.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function EllipseMiniSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Ellipse Mini Solid</title>
+      <circle cx="12.2" cy="12.2" r="3.2" />
+    </svg>
+  );
+}

package/src/components/icon/custom/index.ts

@@ -0,0 +1,11 @@
+export * from './badge';
+export * from './check-circle-solid';
+export * from './circle-dotted-line';
+export * from './component-fill';
+export * from './component-line';
+export * from './ellipse-mini-solid';
+export * from './info-tooltip-fill';
+export * from './resize';
+export * from './spinner';
+export * from './thunder';
+export * from './x-circle-solid';

package/src/components/icon/custom/info-tooltip-fill.tsx

@@ -0,0 +1,21 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function InfoTooltipFillIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Info Tooltip Fill</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21ZM14.1068 16.6204L14.2505 16.0329C14.1761 16.0678 14.0562 16.1077 13.8917 16.1532C13.7268 16.1986 13.5784 16.2217 13.448 16.2217C13.1701 16.2217 12.9745 16.1762 12.8609 16.0847C12.7482 15.9931 12.692 15.8209 12.692 15.5687C12.692 15.4688 12.7089 15.3198 12.7444 15.1248C12.7788 14.9286 12.8183 14.7542 12.8623 14.6016L13.3988 12.7021C13.4514 12.5278 13.4874 12.3362 13.5068 12.127C13.5266 11.9183 13.5358 11.7723 13.5358 11.6894C13.5358 11.2888 13.3954 10.9638 13.1145 10.7131C12.8337 10.4625 12.4337 10.3372 11.9153 10.3372C11.6269 10.3372 11.3219 10.3885 10.9992 10.4909C10.6764 10.593 10.339 10.7161 9.98606 10.8598L9.84198 11.4478C9.94716 11.4089 10.0724 11.367 10.219 11.3237C10.3649 11.2805 10.5081 11.2582 10.6474 11.2582C10.9318 11.2582 11.1233 11.3067 11.2237 11.4022C11.3241 11.498 11.3745 11.6684 11.3745 11.9119C11.3745 12.0466 11.3586 12.1962 11.3255 12.3588C11.2929 12.5225 11.2521 12.6955 11.2042 12.8781L10.6654 14.7852C10.6174 14.9856 10.5824 15.1649 10.5604 15.3241C10.5385 15.4832 10.528 15.6392 10.528 15.791C10.528 16.1829 10.6728 16.506 10.9624 16.761C11.2519 17.015 11.6579 17.1429 12.1799 17.1429C12.5198 17.1429 12.8181 17.0984 13.0748 17.0091C13.3313 16.92 13.6757 16.7905 14.1068 16.6204ZM14.0112 8.90429C14.2619 8.67189 14.3866 8.38926 14.3866 8.05831C14.3866 7.72811 14.2621 7.44491 14.0112 7.20957C13.7612 6.97486 13.4599 6.85714 13.1075 6.85714C12.7541 6.85714 12.4515 6.97459 12.1991 7.20957C11.9467 7.44491 11.8203 7.72801 11.8203 8.05831C11.8203 8.38926 11.9467 8.6718 12.1991 8.90429C12.452 9.13752 12.754 9.25423 13.1075 9.25423C13.46 9.25423 13.7612 9.13752 14.0112 8.90429Z"
+      />
+    </svg>
+  );
+}

package/src/components/icon/custom/resize.tsx

@@ -0,0 +1,17 @@
+import type {RemixiconComponentType} from '@remixicon/react';
+import type {ComponentProps} from 'react';
+
+export function ResizeIcon(_props: ComponentProps<RemixiconComponentType>) {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Resize</title>
+      <path d="M20.7425 13.4539C21.2111 12.9854 21.9711 12.9855 22.4398 13.4539C22.9084 13.9226 22.9084 14.6826 22.4398 15.1512L15.6517 21.9393C15.1831 22.4079 14.4231 22.4079 13.9544 21.9393C13.486 21.4706 13.4859 20.7106 13.9544 20.242L20.7425 13.4539ZM19.3363 5.25961C19.8048 4.79102 20.5649 4.79112 21.0335 5.25961C21.5022 5.72823 21.5022 6.48824 21.0335 6.95687L7.45736 20.533C6.98873 21.0017 6.22872 21.0017 5.76009 20.533C5.2916 20.0644 5.29151 19.3044 5.76009 18.8358L19.3363 5.25961Z" />
+    </svg>
+  );
+}