fix: toggle styles (#138)

droztech · Mar 18, 2024 · 0467112 · 0467112
1 parent fd9cbe2
commit 0467112
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package/src/App.tsx b/package/src/App.tsx
@@ -1,8 +1,8 @@
 import LayoutDefault from './layout/Default'
-import { Form, Input } from './library'
+import { Form, Toggle } from './library'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Envelope, Eraser } from '@phosphor-icons/react'
+import { Alien, Eraser } from '@phosphor-icons/react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -44,18 +44,17 @@ function App() {
       <Form.Root onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
 
-        <Form.Group>
-          <Form.Label>
-            <Envelope />
-            Email
-          </Form.Label>
-          {/* === children === */}
-          <Input.Root>
-            <Input.Input />
-          </Input.Root>
-          {/* === children === */}
-          <Form.Message status="alert">{errors.data?.message}</Form.Message>
-        </Form.Group>
+        <div className="w-156">
+          <Toggle.Root type="multiple" expanded>
+            <Toggle.Item
+              icon={<Alien />}
+              value="a"
+              text="text a"
+              notification
+            />
+            <Toggle.Item value="b" text="text b" />
+          </Toggle.Root>
+        </div>
 
         {/* ================================= TEST AREA ================================= */}
       </Form.Root>

diff --git a/package/src/library/Toggle/Item.tsx b/package/src/library/Toggle/Item.tsx
@@ -21,17 +21,19 @@ const ToggleItem: FC<ToggleItemProps> = forwardRef<
       <Item
         ref={ref}
         className={cn(
-          'group/item flex flex-1 items-center justify-center gap-2 px-4 py-2 first:rounded-l-lg last:rounded-r-lg data-[state="on"]:bg-primary-200 data-[state="on"]:text-primary',
+          'group/item flex flex-1 items-center justify-center gap-2 p-2 text-sm first:rounded-l-lg last:rounded-r-lg data-[state="on"]:bg-primary-200 data-[state="on"]:text-primary',
           className,
         )}
         {...rest}
       >
-        <div className="relative">
-          {icon}
-          {notification && (
-            <div className="absolute -right-1 -top-1 h-2 w-2 rounded-full border border-error-300 bg-error-400" />
-          )}
-        </div>
+        {icon && (
+          <div className="relative">
+            {icon}
+            {notification && (
+              <div className="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full border border-error-300 bg-error-400" />
+            )}
+          </div>
+        )}
         <span className='max-w-full overflow-hidden text-ellipsis whitespace-nowrap group-aria-[expanded="true"]:hidden group-data-[state="on"]/item:!block'>
           {text}
         </span>