@crystallize/design-system 0.0.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -15,10 +15,13 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
-    "class-variance-authority": "^0.3.0",
-    "clsx": "^1.2.1",
+    "@radix-ui/react-progress": "^1.0.1",
+    "@radix-ui/react-radio-group": "1.1.0",
+    "@radix-ui/react-select": "1.1.2",
+    "class-variance-authority": "^0.4.0",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },
@@ -26,26 +29,26 @@
     "@mdx-js/react": "^2.1.5",
     "@storybook/addon-actions": "7.0.0-alpha.47",
     "@storybook/addon-backgrounds": "7.0.0-alpha.47",
-    "@storybook/addon-docs": "^7.0.0-alpha.47",
-    "@storybook/addon-essentials": "^7.0.0-alpha.47",
+    "@storybook/addon-docs": "^7.0.0-beta.4",
+    "@storybook/addon-essentials": "^7.0.0-beta.4",
     "@storybook/addon-highlight": "7.0.0-alpha.47",
-    "@storybook/addon-interactions": "^7.0.0-alpha.47",
-    "@storybook/addon-links": "^7.0.0-alpha.47",
+    "@storybook/addon-interactions": "^7.0.0-beta.4",
+    "@storybook/addon-links": "^7.0.0-beta.4",
     "@storybook/addon-measure": "7.0.0-alpha.47",
     "@storybook/addon-outline": "7.0.0-alpha.47",
-    "@storybook/react": "^7.0.0-alpha.47",
+    "@storybook/react": "^7.0.0-beta.4",
     "@storybook/react-vite": "^7.0.0-alpha.47",
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
     "@vitejs/plugin-react": "^2.2.0",
     "postcss": "^8.4.18",
-    "storybook": "^7.0.0-alpha.47",
+    "storybook": "^7.0.0-beta.4",
     "tailwindcss": "^3.2.1",
     "tsconfig": "0.0.0",
-    "tsup": "^6.3.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.2"
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.4",
+    "vite": "^3.2.5"
   },
   "keywords": [
     "react",

package/src/action-menu/action-item.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { cx } from 'class-variance-authority';
 import type { HTMLAttributes } from 'react';
 
 import { DropdownMenu } from '../dropdown-menu';
@@ -11,7 +11,7 @@ export function Item({ children, className, onSelect }: ItemProps) {
   return (
     <DropdownMenu.Item
       onClick={onSelect}
-      className={clsx(
+      className={cx(
         'items-center text-density cursor-pointer flex font-sans font-medium text-sm gap-2 py-2.5 px-5',
         'hover:bg-[#f4f4f4]',
         '[&.danger]:text-error',

package/src/action-menu/action-menu.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { cx } from 'class-variance-authority';
 import type { ReactNode } from 'react';
 
 import { DropdownMenu } from '../dropdown-menu';
@@ -17,7 +17,7 @@ export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
       <button
         tabIndex={tabIndex}
         type="button"
-        className={clsx(
+        className={cx(
           'items-center bg-transparent rounded-full border-none cursor-pointer flex justify-center p-1',
           'hover:bg-gray-6 focus:bg-gray-6 focus:outline-offset-2 focus:outline focus:outline-1 focus:outline-glacier focus-visible:outline-offset-2 focus-visible:outline focus-visible:outline-1 focus-visible:outline-glacier',
           'active:scale-95',

package/src/checkbox/checkbox.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Label } from '../label';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Example: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onCheckedChange={c => setChecked(Boolean(c))} />;
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox id="with-label-c1" defaultChecked={true} />
+        <Label htmlFor="with-label-c1">Accept terms and conditions.</Label>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c1" defaultChecked={true} disabled />
+          <Label htmlFor="disabled-c1">Accept terms and conditions.</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c2" defaultChecked={false} disabled />
+          <Label htmlFor="disabled-c2">Accept terms and conditions.</Label>
+        </div>
+      </div>
+    );
+  },
+};

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,36 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cx } from 'class-variance-authority';
+import { ComponentProps, forwardRef } from 'react';
+
+export type CheckboxRef = HTMLButtonElement;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
+  return (
+    <CheckboxPrimitive.Root
+      {...props}
+      ref={ref}
+      className={cx(
+        'flex h-3.5 w-3.5 items-center justify-center rounded-sm border border-solid border-[#ddd] bg-white',
+        'focus:outline-none focus:ring-1 focus:ring-[#528693] focus:ring-offset-1',
+        'radix-state-checked:border-[#528693] radix-state-checked:bg-neptune',
+        'radix-state-checked:disabled:opacity-40 radix-state-unchecked:disabled:!bg-[#ddd]/20',
+      )}
+    >
+      <CheckboxPrimitive.Indicator>
+        <svg viewBox="0 0 9 9" fill="none" className="h-2 w-2">
+          <path
+            d="M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
+            fill="#528693"
+          />
+          <path
+            d="M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
+            stroke="#528693"
+          />
+        </svg>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

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

package/src/dialog/dialog.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode, RefAttributes } from 'react';
-import clsx from 'clsx';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, cx, VariantProps } from 'class-variance-authority';
 
 import { Button } from '../button';
 import { Icon } from '../icons';
@@ -31,15 +30,16 @@ type DialogContentProps = DialogContentStylesProps & {
     DialogFuncProps,
     'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'
   > &
-  DialogPrimitive.DialogContentProps;
+  DialogPrimitive.DialogContentProps &
+  Pick<DialogPrimitive.PortalProps, 'container'>;
 
-function DialogContent({ children, closable = true, type, className, ...delegated }: DialogContentProps) {
+function DialogContent({ children, closable = true, type, className, container, ...delegated }: DialogContentProps) {
   const withIcon = typeof type !== 'undefined';
 
   const IconComponent = type && IconMap[type];
 
   return (
-    <DialogPrimitive.Portal>
+    <DialogPrimitive.Portal container={container}>
       <DialogPrimitive.Overlay className="bg-black/30 fixed inset-0" />
       <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
         {IconComponent && <IconComponent className="my-1 shrink-0" width={32} height={32} />}
@@ -61,7 +61,7 @@ type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitlePro
 function DialogTitle({ className, ...delegated }: DialogTitleProps) {
   return (
     <DialogPrimitive.Title
-      className={clsx('m-0 font-semibold text-2xl font-sans text-black-text', className)}
+      className={cx('m-0 font-medium text-xl font-sans text-black-text', className)}
       {...delegated}
     />
   );

package/src/dropdown-menu/DropdownMenu.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta } from '@storybook/react';
-import clsx from 'clsx';
 import { useState } from 'react';
 
 import { DropdownMenu } from '.';
@@ -39,7 +38,7 @@ export const WithOpenState = () => {
       <Button>
         <div className="flex items-center">
           <Icon.NailPolish width={20} height={20} /> <span className="pl-4 pr-8">Pretty</span>
-          <Icon.Arrow className={clsx({ 'rotate-180': isOpen })} />
+          <Icon.Arrow className={isOpen ? 'rotate-180' : ''} />
         </div>
       </Button>
     </DropdownMenu.Root>

package/src/dropdown-menu/dropdown-menu-item.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import clsx from 'clsx';
+import { cx } from 'class-variance-authority';
+import type { ReactNode } from 'react';
 
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
   children: ReactNode;
@@ -10,7 +10,7 @@ export function DropdownMenuItem({ children, className, ...delegated }: Dropdown
   return (
     <DropdownMenuPrimitive.Item
       {...delegated}
-      className={clsx(
+      className={cx(
         'text-xs font-medium text-black-text',
         'flex h-10 cursor-pointer items-center bg-white px-4 outline-asteroid',
         'hover:bg-[#F8F8F9] hover:outline-none hover:focus-visible:outline-none',

package/src/dropdown-menu/dropdown-menu-label.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import clsx from 'clsx';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cx } from 'class-variance-authority';
+import type { ReactNode } from 'react';
 
 type DropdownMenuLabelProps = {
   children: ReactNode;
@@ -9,7 +9,7 @@ type DropdownMenuLabelProps = {
 export function DropdownMenuLabel({ children }: DropdownMenuLabelProps) {
   return (
     <DropdownMenuPrimitive.Label
-      className={clsx('bg-white px-4 py-2 text-xs text-label', 'first:rounded-tl first:rounded-tr')}
+      className={cx('bg-white px-4 py-2 text-xs text-label', 'first:rounded-tl first:rounded-tr')}
     >
       {children}
     </DropdownMenuPrimitive.Label>

package/src/icons/error.tsx

@@ -14,35 +14,28 @@ export const Error = forwardRef<ErrorRef, ErrorProps>((delegated, ref) => {
       viewBox="0 0 22 22"
       {...delegated}
     >
-      <g clipPath="url(#a)">
-        <path
-          fill="#DD1367"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          fillRule="evenodd"
-          d="m7.364 13.479 1.157 1.157L11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157-2.48 2.478-2.478-2.478L7.364 8.52 9.842 11l-2.478 2.479Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M6.94 13.903a.6.6 0 0 1 0-.849L8.994 11 6.94 8.946a.6.6 0 0 1 0-.849L8.097 6.94a.6.6 0 0 1 .849 0L11 8.994l2.054-2.054a.6.6 0 0 1 .849 0l1.157 1.157a.6.6 0 0 1 0 .849L13.006 11l2.054 2.054a.6.6 0 0 1 0 .849l-1.157 1.157a.6.6 0 0 1-.849 0L11 13.006 8.946 15.06a.6.6 0 0 1-.849 0L6.94 13.903ZM11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157L11 9.842 8.521 7.364 7.364 8.52 9.842 11l-2.478 2.479 1.157 1.157L11 12.158Z"
-          clipRule="evenodd"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
+      <path
+        fill="#DD1367"
+        d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="m7.364 13.479 1.157 1.157L11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157-2.48 2.478-2.478-2.478L7.364 8.52 9.842 11l-2.478 2.479Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M6.94 13.903a.6.6 0 0 1 0-.849L8.994 11 6.94 8.946a.6.6 0 0 1 0-.849L8.097 6.94a.6.6 0 0 1 .849 0L11 8.994l2.054-2.054a.6.6 0 0 1 .849 0l1.157 1.157a.6.6 0 0 1 0 .849L13.006 11l2.054 2.054a.6.6 0 0 1 0 .849l-1.157 1.157a.6.6 0 0 1-.849 0L11 13.006 8.946 15.06a.6.6 0 0 1-.849 0L6.94 13.903ZM11 12.158l2.479 2.478 1.157-1.157L12.158 11l2.478-2.479-1.157-1.157L11 9.842 8.521 7.364 7.364 8.52 9.842 11l-2.478 2.479 1.157 1.157L11 12.158Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 });

package/src/icons/info.tsx

@@ -14,38 +14,31 @@ export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
       viewBox="0 0 22 22"
       {...delegated}
     >
-      <g clipPath="url(#a)">
-        <path
-          fill="#BFF6F8"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
-          clipRule="evenodd"
-        />
-        <path fill="#fff" d="M14.814 6.317a.991.991 0 1 1-1.983 0 .991.991 0 0 1 1.983 0Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M15.415 6.317a1.592 1.592 0 1 1-3.184 0 1.592 1.592 0 0 1 3.184 0Zm-1.592.991a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          d="m9.37 16.049 1.8.26-.22-.7-.78-.621.56-1.14 2.261-3.382-.34-1.381-1.92-1-1.261.14-.28.32 1.08.54.14.54-2.22 2.862-.821 2.36 2 1.202Z"
-        />
-        <path
-          fill="#528693"
-          d="M10.476 16.666a4.93 4.93 0 0 1-2.096-.599c-1.114-.605-1.482-1.63-.961-2.673a9.606 9.606 0 0 1 1.437-1.963l.067-.077c.252-.293.513-.595.742-.897.288-.38.538-.745.443-1.031-.056-.164-.215-.282-.485-.362a1.58 1.58 0 0 0-.247-.033l-.055-.004a.984.984 0 0 1-.481-.096c-.169-.132-.098-.51-.013-.676a.915.915 0 0 1 .701-.473c.139-.025.28-.037.42-.035.656.034 1.301.176 1.91.42 1.104.424 1.631 1.263 1.41 2.244a4.193 4.193 0 0 1-.908 1.714c-.128.161-.26.315-.392.471l-.07.083c-.282.32-.544.654-.788 1.003l-.144.206c-.161.209-.291.44-.385.687a.582.582 0 0 0 .32.743.91.91 0 0 0 .32.08c.175.021.356.044.428.21a.575.575 0 0 1-.035.477 1.144 1.144 0 0 1-1.138.581Zm-.877-8.193c.128.079.268.136.414.17.18.04.35.12.494.236.58.552.14 1.272-.318 1.903-.214.292-.47.58-.74.884l-.068.077c-.624.692-1.27 1.408-1.497 2.232a1.148 1.148 0 0 0 .163 1.06c.493.658 1.78.907 2.819.921l.035-.05-.025-.035a1.248 1.248 0 0 1-.865-.594 1.04 1.04 0 0 1 .006-.894 8.071 8.071 0 0 1 1.309-1.977l.127-.155c.171-.21.356-.437.525-.665.371-.501.844-1.245.664-1.915-.315-1.173-2.15-1.209-3.03-1.226h-.057l.044.028Z"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
+      <path
+        fill="#BFF6F8"
+        d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M21.431 11c0 5.76-4.67 10.43-10.43 10.43C5.238 21.43.568 16.76.568 11S5.24.57 11 .57C16.76.57 21.431 5.24 21.431 11Zm-10.43 9.83c5.429 0 9.83-4.4 9.83-9.83s-4.401-9.83-9.83-9.83c-5.43 0-9.832 4.4-9.832 9.83S5.571 20.83 11 20.83Z"
+        clipRule="evenodd"
+      />
+      <path fill="#fff" d="M14.814 6.317a.991.991 0 1 1-1.983 0 .991.991 0 0 1 1.983 0Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M15.415 6.317a1.592 1.592 0 1 1-3.184 0 1.592 1.592 0 0 1 3.184 0Zm-1.592.991a.991.991 0 1 0 0-1.982.991.991 0 0 0 0 1.982Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="m9.37 16.049 1.8.26-.22-.7-.78-.621.56-1.14 2.261-3.382-.34-1.381-1.92-1-1.261.14-.28.32 1.08.54.14.54-2.22 2.862-.821 2.36 2 1.202Z"
+      />
+      <path
+        fill="#528693"
+        d="M10.476 16.666a4.93 4.93 0 0 1-2.096-.599c-1.114-.605-1.482-1.63-.961-2.673a9.606 9.606 0 0 1 1.437-1.963l.067-.077c.252-.293.513-.595.742-.897.288-.38.538-.745.443-1.031-.056-.164-.215-.282-.485-.362a1.58 1.58 0 0 0-.247-.033l-.055-.004a.984.984 0 0 1-.481-.096c-.169-.132-.098-.51-.013-.676a.915.915 0 0 1 .701-.473c.139-.025.28-.037.42-.035.656.034 1.301.176 1.91.42 1.104.424 1.631 1.263 1.41 2.244a4.193 4.193 0 0 1-.908 1.714c-.128.161-.26.315-.392.471l-.07.083c-.282.32-.544.654-.788 1.003l-.144.206c-.161.209-.291.44-.385.687a.582.582 0 0 0 .32.743.91.91 0 0 0 .32.08c.175.021.356.044.428.21a.575.575 0 0 1-.035.477 1.144 1.144 0 0 1-1.138.581Zm-.877-8.193c.128.079.268.136.414.17.18.04.35.12.494.236.58.552.14 1.272-.318 1.903-.214.292-.47.58-.74.884l-.068.077c-.624.692-1.27 1.408-1.497 2.232a1.148 1.148 0 0 0 .163 1.06c.493.658 1.78.907 2.819.921l.035-.05-.025-.035a1.248 1.248 0 0 1-.865-.594 1.04 1.04 0 0 1 .006-.894 8.071 8.071 0 0 1 1.309-1.977l.127-.155c.171-.21.356-.437.525-.665.371-.501.844-1.245.664-1.915-.315-1.173-2.15-1.209-3.03-1.226h-.057l.044.028Z"
+      />
     </svg>
   );
 });

package/src/icons/warning.tsx

@@ -14,47 +14,40 @@ export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) =>
       viewBox="0 0 22 22"
       {...delegated}
     >
-      <g clipPath="url(#a)">
-        <path
-          fill="#FFDE99"
-          d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M21.43 11c0 5.76-4.67 10.43-10.43 10.43S.57 16.76.57 11 5.24.57 11 .57 21.43 5.24 21.43 11ZM11 20.83c5.43 0 9.83-4.4 9.83-9.83S16.43 1.17 11 1.17 1.17 5.57 1.17 11s4.4 9.83 9.83 9.83Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#fff"
-          d="M10.077 5.232c.41-.71 1.436-.71 1.846 0L17 14.025c.41.71-.103 1.599-.924 1.599H5.923c-.82 0-1.333-.889-.923-1.6l5.077-8.792Z"
-        />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="m16.48 14.325-5.077-8.793a.466.466 0 0 0-.806 0L5.52 14.325c-.18.31.045.699.403.699h10.153a.466.466 0 0 0 .404-.7Zm-4.557-9.093a1.066 1.066 0 0 0-1.846 0L5 14.025c-.41.71.103 1.599.923 1.599h10.153c.821 0 1.334-.889.924-1.6l-5.077-8.792Z"
-          clipRule="evenodd"
-        />
-        <path fill="#FFDE99" d="M10.588 8.628a.5.5 0 1 1 1 0v2.475a.5.5 0 0 1-1 0V8.628Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M12.188 8.628v2.475a1.1 1.1 0 0 1-2.2 0V8.628a1.1 1.1 0 1 1 2.2 0Zm-1.1-.5a.5.5 0 0 0-.5.5v2.475a.5.5 0 1 0 1 0V8.628a.5.5 0 0 0-.5-.5Z"
-          clipRule="evenodd"
-        />
-        <path fill="#FFDE99" d="M11.588 13.403a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
-        <path
-          fill="#528693"
-          fillRule="evenodd"
-          d="M12.188 13.403a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Zm-1.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"
-          clipRule="evenodd"
-        />
-      </g>
-      <defs>
-        <clipPath id="a">
-          <path fill="#fff" d="M0 0h22v22H0z" />
-        </clipPath>
-      </defs>
+      <path
+        fill="#FFDE99"
+        d="M20.83 11c0 5.43-4.4 9.83-9.83 9.83S1.17 16.43 1.17 11 5.57 1.17 11 1.17s9.83 4.4 9.83 9.83Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M21.43 11c0 5.76-4.67 10.43-10.43 10.43S.57 16.76.57 11 5.24.57 11 .57 21.43 5.24 21.43 11ZM11 20.83c5.43 0 9.83-4.4 9.83-9.83S16.43 1.17 11 1.17 1.17 5.57 1.17 11s4.4 9.83 9.83 9.83Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M10.077 5.232c.41-.71 1.436-.71 1.846 0L17 14.025c.41.71-.103 1.599-.924 1.599H5.923c-.82 0-1.333-.889-.923-1.6l5.077-8.792Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m16.48 14.325-5.077-8.793a.466.466 0 0 0-.806 0L5.52 14.325c-.18.31.045.699.403.699h10.153a.466.466 0 0 0 .404-.7Zm-4.557-9.093a1.066 1.066 0 0 0-1.846 0L5 14.025c-.41.71.103 1.599.923 1.599h10.153c.821 0 1.334-.889.924-1.6l-5.077-8.792Z"
+        clipRule="evenodd"
+      />
+      <path fill="#FFDE99" d="M10.588 8.628a.5.5 0 1 1 1 0v2.475a.5.5 0 0 1-1 0V8.628Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M12.188 8.628v2.475a1.1 1.1 0 0 1-2.2 0V8.628a1.1 1.1 0 1 1 2.2 0Zm-1.1-.5a.5.5 0 0 0-.5.5v2.475a.5.5 0 1 0 1 0V8.628a.5.5 0 0 0-.5-.5Z"
+        clipRule="evenodd"
+      />
+      <path fill="#FFDE99" d="M11.588 13.403a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M12.188 13.403a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Zm-1.1.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 });

package/src/index.ts

@@ -1,8 +1,20 @@
 import './index.css';
 
 // Components ---
-
 export * from './action-menu';
 export * from './button';
+export * from './card';
+export * from './checkbox';
 export * from './dialog';
 export * from './dropdown-menu';
+export * from './icon-button';
+export * from './inline-radio';
+export * from './input';
+export * from './label';
+export * from './progress';
+export * from './radio';
+export * from './select';
+export * from './text-field';
+
+// Icons ---
+export * from './icons';

package/src/inline-radio/index.ts

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

package/src/inline-radio/inline-radio.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { InlineRadio } from './inline-radio';
+import { Icon } from '../icons';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InlineRadio.Group> = {
+  title: 'Components/InlineRadio',
+  component: InlineRadio.Group,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineRadio.Group>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="plus">
+        <InlineRadio.Item value="plus" id="example-r1">
+          +
+        </InlineRadio.Item>
+        <InlineRadio.Item value="minus" id="example-r2">
+          -
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const ProductView: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="pretty">
+        <InlineRadio.Item value="pretty" id="productview-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="productview-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [view, setView] = useState('pretty');
+
+    return (
+      <InlineRadio.Group value={view} onValueChange={v => setView(v)}>
+        <InlineRadio.Item value="pretty" id="controlled-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="controlled-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};

package/src/inline-radio/inline-radio.tsx

@@ -0,0 +1,36 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cx } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+type InlineRadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+
+function InlineRadioGroup(delegated: InlineRadioGroupProps) {
+  return (
+    <RadioGroupPrimitive.Root {...delegated} className="inline-flex space-x-1 rounded-sm bg-[#9095a81a] p-[3px]" />
+  );
+}
+
+type InlineRadioItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function InlineRadioItem({ children, className, ...delegated }: InlineRadioItemProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      {...delegated}
+      className={cx(
+        'm-0 p-0',
+        'flex cursor-pointer items-center justify-center rounded border-none bg-transparent text-sm leading-none text-zinc-800',
+        'disabled:cursor-not-allowed',
+        'radix-state-checked:bg-white radix-state-checked:shadow-sm',
+        'focus:outline-neptune',
+        className,
+      )}
+    >
+      <RadioGroupPrimitive.Indicator forceMount>{children}</RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export const InlineRadio = {
+  Group: InlineRadioGroup,
+  Item: InlineRadioItem,
+};

package/src/input/Input.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from '.';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'type something',
+  },
+};

package/src/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input';