@toolpath/ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -323,7 +323,7 @@ var Button = ({
       onClick(event);
     }
   };
-  const ContentWrapper = ({ children: children2 }) => /* @__PURE__ */ jsx10(
+  const wrap = (inner) => /* @__PURE__ */ jsx10(
     "div",
     {
       className: cn(
@@ -352,19 +352,21 @@ var Button = ({
         },
         className
       ),
-      children: children2
+      children: inner
     }
   );
-  const content = !isLoading ? /* @__PURE__ */ jsx10(ContentWrapper, { children }) : /* @__PURE__ */ jsx10(ContentWrapper, { children: /* @__PURE__ */ jsx10(
-    AnimatedEllipsis,
-    {
-      className: cn({
-        "h-2 w-1": size === "sm",
-        "h-2 w-1.5": size === "md",
-        "h-3 w-2": size === "lg"
-      })
-    }
-  ) });
+  const content = !isLoading ? wrap(children) : wrap(
+    /* @__PURE__ */ jsx10(
+      AnimatedEllipsis,
+      {
+        className: cn({
+          "h-2 w-1": size === "sm",
+          "h-2 w-1.5": size === "md",
+          "h-3 w-2": size === "lg"
+        })
+      }
+    )
+  );
   if (asLink) {
     return /* @__PURE__ */ jsx10(
       Link,
@@ -574,7 +576,7 @@ var CalloutContent = ({ children, className }) => {
                   "hover:bg-gray-100 dark:hover:bg-zinc-800",
                   "transition-colors cursor-pointer"
                 ),
-                children: /* @__PURE__ */ jsx11(XIcon, { className: "size-3.5" })
+                children: /* @__PURE__ */ jsx11(XIcon, { weight: "bold", className: "size-3.5" })
               }
             ),
             children
@@ -662,15 +664,15 @@ var Checkbox = ({
       ),
       ...props,
       children: /* @__PURE__ */ jsxs6(BaseCheckbox.Indicator, { className: "flex items-center justify-center text-white", keepMounted: true, children: [
-        checked && /* @__PURE__ */ jsx12(CheckIcon, { className: "w-full h-full" }),
-        indeterminate && /* @__PURE__ */ jsx12(MinusIcon, { className: "w-full h-full" })
+        checked && /* @__PURE__ */ jsx12(CheckIcon, { weight: "bold", className: "w-full h-full" }),
+        indeterminate && /* @__PURE__ */ jsx12(MinusIcon, { weight: "bold", className: "w-full h-full" })
       ] })
     }
   );
 };
 
 // src/combobox/button.tsx
-import { ArrowsOutLineVerticalIcon } from "@phosphor-icons/react";
+import { CaretUpDownIcon } from "@phosphor-icons/react";
 
 // src/combobox/combobox-context.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
@@ -823,7 +825,7 @@ var Button2 = ({
             className: cn("ml-auto", {
               "opacity-0 group-hover:opacity-100 group-data-[popup-open]:opacity-100": variant === "ghost"
             }),
-            children: /* @__PURE__ */ jsx17(ArrowsOutLineVerticalIcon, { className: "size-3.5 text-gray-200 dark:text-zinc-400" })
+            children: /* @__PURE__ */ jsx17(CaretUpDownIcon, { weight: "bold", className: "size-3.5 text-gray-200 dark:text-zinc-400" })
           }
         )
       ]
@@ -993,7 +995,7 @@ import { useEffect, useRef as useRef3, useState as useState4 } from "react";
 import {
   Combobox as BaseCombobox9
 } from "@base-ui/react";
-import { ArrowBendUpLeftIcon } from "@phosphor-icons/react";
+import { ArrowElbowDownLeftIcon } from "@phosphor-icons/react";
 import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 var Item = ({ className, children, value, ...props }) => {
   const { itemToStringLabel } = useCombobox();
@@ -1031,7 +1033,13 @@ var Item = ({ className, children, value, ...props }) => {
       ...props,
       children: [
         /* @__PURE__ */ jsx23("div", { ref, className: "flex-1 truncate", children: /* @__PURE__ */ jsx23(Tooltip, { tip, side: "right", sideOffset: 12, delay: 500, children: /* @__PURE__ */ jsx23(Fragment3, { children }) }) }),
-        /* @__PURE__ */ jsx23(ArrowBendUpLeftIcon, { className: "size-4 text-gray-300 dark:text-zinc-400 hidden group-data-[highlighted]:block group-hover:hidden group-data-[highlighted]:group-hover:hidden group-data-[selected]:hidden" })
+        /* @__PURE__ */ jsx23(
+          ArrowElbowDownLeftIcon,
+          {
+            weight: "bold",
+            className: "size-4 text-gray-300 dark:text-zinc-400 hidden group-data-[highlighted]:block group-hover:hidden group-data-[highlighted]:group-hover:hidden group-data-[selected]:hidden"
+          }
+        )
       ]
     }
   );
@@ -1342,8 +1350,13 @@ var Dialog2 = Object.assign(Dialog, {
 });
 
 // src/editable-cell/editable-cell.tsx
-import { useCallback as useCallback7, useEffect as useEffect3, useLayoutEffect, useRef as useRef6 } from "react";
-import { ArrowBendUpLeftIcon as ArrowBendUpLeftIcon2 } from "@phosphor-icons/react";
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect3,
+  useLayoutEffect,
+  useRef as useRef6
+} from "react";
+import { ArrowElbowDownLeftIcon as ArrowElbowDownLeftIcon2 } from "@phosphor-icons/react";
 
 // src/input/input.tsx
 import {
@@ -1519,6 +1532,7 @@ var Input2 = ({
     props?.onBlur?.(event);
   };
   const iconClassName = cn(
+    "self-center",
     {
       "text-gray-400 dark:text-zinc-400": (variant === "muted" || variant === "default") && !disabled,
       "text-gray-200 dark:text-zinc-400": variant === "secondary" || disabled
@@ -1533,7 +1547,7 @@ var Input2 = ({
       "-ml-1 mr-2 w-5": size === "xl"
     }
   );
-  const iconElement = type === "search" && !IconComponent ? /* @__PURE__ */ jsx35(MagnifyingGlassIcon, { "data-icon": true, className: iconClassName }) : IconComponent ? /* @__PURE__ */ jsx35(IconComponent, { "data-icon": true, className: iconClassName }) : null;
+  const iconElement = type === "search" && !IconComponent ? /* @__PURE__ */ jsx35(MagnifyingGlassIcon, { weight: "bold", "data-icon": true, className: iconClassName }) : IconComponent ? /* @__PURE__ */ jsx35(IconComponent, { "data-icon": true, className: iconClassName }) : null;
   let placeholder = props.placeholder;
   if (!props.placeholder && type === "search") {
     placeholder = "Search";
@@ -1634,7 +1648,7 @@ var Input2 = ({
               "transition-opacity group-hover/input:opacity-100 focus:opacity-100",
               value ? "opacity-0" : "invisible"
             ),
-            children: copied ? /* @__PURE__ */ jsx35(CheckIcon2, {}) : /* @__PURE__ */ jsx35(CopyIcon, {})
+            children: copied ? /* @__PURE__ */ jsx35(CheckIcon2, { weight: "bold" }) : /* @__PURE__ */ jsx35(CopyIcon, {})
           }
         ) }) }),
         suffix && /* @__PURE__ */ jsx35(
@@ -1661,6 +1675,7 @@ var Input2 = ({
 
 // src/editable-cell/editable-cell.tsx
 import { jsx as jsx36 } from "react/jsx-runtime";
+var ReturnIcon = (props) => /* @__PURE__ */ jsx36(ArrowElbowDownLeftIcon2, { weight: "bold", ...props });
 var liveEdit = {
   key: null,
   value: "",
@@ -1857,7 +1872,7 @@ var EditableCell = ({
             name: `editable-${field}-${rowId}`,
             id: `editable-${field}-${rowId}`,
             size: "md",
-            icon: ArrowBendUpLeftIcon2,
+            icon: ReturnIcon,
             iconPosition: "right",
             inputMode: type === "number" ? "numeric" : void 0,
             onBlur: handleBlur,
@@ -2251,9 +2266,10 @@ var Item2 = ({
               previous && /* @__PURE__ */ jsx40(
                 CaretRightIcon,
                 {
+                  weight: "regular",
                   "data-previous": true,
                   className: cn(
-                    "flex size-5 rotate-180 truncate text-gray-300 dark:text-zinc-500",
+                    "flex size-4 rotate-180 truncate text-gray-300 dark:text-zinc-500",
                     {
                       "sm:hidden": breakpoint === "sm",
                       "md:hidden": breakpoint === "md",
@@ -2270,8 +2286,9 @@ var Item2 = ({
         /* @__PURE__ */ jsx40(
           CaretRightIcon,
           {
+            weight: "regular",
             "data-separator": true,
-            className: cn("hidden size-5 text-gray-300 dark:text-zinc-500", {
+            className: cn("hidden size-4 text-gray-300 dark:text-zinc-500", {
               "sm:flex": breakpoint === "sm",
               "md:flex": breakpoint === "md",
               "lg:flex": breakpoint === "lg",
@@ -2535,7 +2552,7 @@ var SubmenuTrigger = ({ className, children, ...props }) => {
         ...props,
         children: [
           /* @__PURE__ */ jsx49("div", { className: "flex-1", children }),
-          /* @__PURE__ */ jsx49(CaretRightIcon2, { className: "size-4" })
+          /* @__PURE__ */ jsx49(CaretRightIcon2, { weight: "regular", className: "size-3" })
         ]
       }
     );
@@ -2546,7 +2563,7 @@ var SubmenuTrigger = ({ className, children, ...props }) => {
       nativeButton: false,
       render: (renderProps) => /* @__PURE__ */ jsxs15("div", { ...renderProps, tabIndex: -1, className: submenuTriggerClass, children: [
         /* @__PURE__ */ jsx49("div", { className: "flex-1", children: renderProps.children }),
-        /* @__PURE__ */ jsx49(CaretRightIcon2, { className: "size-4" })
+        /* @__PURE__ */ jsx49(CaretRightIcon2, { weight: "regular", className: "size-3" })
       ] }),
       ...props,
       children
@@ -2731,6 +2748,7 @@ var List2 = () => {
                         children: /* @__PURE__ */ jsx52(
                           XIcon2,
                           {
+                            weight: "regular",
                             className: cn({
                               "text-gray dark:text-zinc-950": variant === "warning",
                               "text-white dark:text-zinc-50": variant === "danger" || variant === "success" || variant === "info"
@@ -2854,7 +2872,7 @@ var QuantityInput = ({
                 "w-9": size === "xl"
               }
             ),
-            children: /* @__PURE__ */ jsx53(MinusIcon2, { className: "size-3.5 text-white dark:text-zinc-100" })
+            children: /* @__PURE__ */ jsx53(MinusIcon2, { weight: "bold", className: "size-3.5 text-white dark:text-zinc-100" })
           }
         ),
         /* @__PURE__ */ jsx53(
@@ -2896,7 +2914,7 @@ var QuantityInput = ({
                 "w-9": size === "xl"
               }
             ),
-            children: /* @__PURE__ */ jsx53(PlusIcon, { className: "size-3.5 text-white dark:text-zinc-100" })
+            children: /* @__PURE__ */ jsx53(PlusIcon, { weight: "bold", className: "size-3.5 text-white dark:text-zinc-100" })
           }
         )
       ]
@@ -4144,6 +4162,7 @@ var GroupHeader = ({
         /* @__PURE__ */ jsx69(
           CaretRightIcon3,
           {
+            weight: "bold",
             className: cn(
               "pointer-events-none fill-current text-gray dark:text-zinc-100 size-3 -rotate-90",
               { "rotate-90": isCollapsed }
@@ -4273,8 +4292,14 @@ var TreeIcon = ({ item, type = "IconDefault" }) => {
       children: [
         /* @__PURE__ */ jsx70(Indentation, { item, isExpanded }),
         type === "IconDefault" && /* @__PURE__ */ jsx70("div", { className: "w-5" }),
-        type === "IconRight" && /* @__PURE__ */ jsx70(CaretRightIcon4, { className: "size-5 text-gray-300 dark:text-zinc-100" }),
-        type === "IconDown" && /* @__PURE__ */ jsx70(CaretRightIcon4, { className: "size-5 text-gray-300 dark:text-zinc-100 rotate-90" })
+        type === "IconRight" && /* @__PURE__ */ jsx70(CaretRightIcon4, { weight: "bold", className: "size-5 text-gray-300 dark:text-zinc-100" }),
+        type === "IconDown" && /* @__PURE__ */ jsx70(
+          CaretRightIcon4,
+          {
+            weight: "bold",
+            className: "size-5 text-gray-300 dark:text-zinc-100 rotate-90"
+          }
+        )
       ]
     }
   );
@@ -5394,7 +5419,7 @@ var Toggle2 = Object.assign(Toggle, {
 
 // src/toast/list.tsx
 import { Toast as Toast2 } from "@base-ui/react";
-import { SpinnerGapIcon, XIcon as XIcon3 } from "@phosphor-icons/react";
+import { CircleNotchIcon, XIcon as XIcon3 } from "@phosphor-icons/react";
 
 // src/toast/provider.tsx
 import {
@@ -5476,7 +5501,13 @@ var List4 = () => {
             children: customContent ? customContent : /* @__PURE__ */ jsxs30(Fragment8, { children: [
               /* @__PURE__ */ jsxs30("div", { className: "flex w-full flex-col gap-1 rounded-lg px-2 py-3", children: [
                 /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 px-2", children: [
-                  isLoading && /* @__PURE__ */ jsx82(SpinnerGapIcon, { className: "size-4 shrink-0 animate-spin text-gray-300 dark:text-zinc-200" }),
+                  isLoading && /* @__PURE__ */ jsx82(
+                    CircleNotchIcon,
+                    {
+                      weight: "bold",
+                      className: "size-4 shrink-0 animate-spin text-gray-300 dark:text-zinc-200"
+                    }
+                  ),
                   /* @__PURE__ */ jsx82(Toast2.Title, { className: "flex-1 whitespace-pre-line break-words text-sm font-bold text-gray-500 dark:text-zinc-200" })
                 ] }),
                 /* @__PURE__ */ jsx82(Toast2.Content, { className: "flex flex-col px-2 transition-opacity duration-300 data-[behind]:opacity-0 data-[expanded]:opacity-100", children: /* @__PURE__ */ jsx82(Toast2.Description, { className: "flex-1 whitespace-pre-line break-words text-sm font-medium text-gray-500 dark:text-zinc-200" }) }),
@@ -5494,7 +5525,7 @@ var List4 = () => {
                   "aria-label": "Close",
                   nativeButton: true,
                   render: (renderProps) => {
-                    return /* @__PURE__ */ jsx82("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx82(IconButton, { size: "lg", ...renderProps, children: /* @__PURE__ */ jsx82(XIcon3, { className: "text-gray-300 dark:text-zinc-400" }) }) });
+                    return /* @__PURE__ */ jsx82("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx82(IconButton, { size: "lg", ...renderProps, children: /* @__PURE__ */ jsx82(XIcon3, { weight: "bold", className: "text-gray-300 dark:text-zinc-400" }) }) });
                   }
                 }
               )
@@ -5553,6 +5584,7 @@ var Collapsed = ({ onExpand }) => {
       children: /* @__PURE__ */ jsx83(
         DotsSixVerticalIcon,
         {
+          weight: "bold",
           "data-handle-icon": true,
           className: `size-4 text-gray-200 dark:text-zinc-500 group-hover:text-gray-300 dark:group-hover:text-zinc-400 ${isVertical ? "rotate-90" : ""}`
         }
@@ -5840,7 +5872,7 @@ var Pagination = ({ pagination, page, onClick, className }) => {
         ),
         onClick: () => onClick(page - 1),
         children: [
-          /* @__PURE__ */ jsx88(CaretRightIcon5, { className: "size-5 rotate-180" }),
+          /* @__PURE__ */ jsx88(CaretRightIcon5, { weight: "bold", className: "size-4 rotate-180" }),
           /* @__PURE__ */ jsx88("span", { className: "sr-only", children: "Previous" })
         ]
       }
@@ -5881,7 +5913,7 @@ var Pagination = ({ pagination, page, onClick, className }) => {
         onClick: () => onClick(page + 1),
         children: [
           /* @__PURE__ */ jsx88("span", { className: "sr-only", children: "Next" }),
-          /* @__PURE__ */ jsx88(CaretRightIcon5, { className: "size-5" })
+          /* @__PURE__ */ jsx88(CaretRightIcon5, { weight: "bold", className: "size-4" })
         ]
       }
     )

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@toolpath/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Toolpath React and Tailwind UI primitives",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/toolpath/toolpath.git",
+    "url": "https://github.com/toolpath/ui-packages.git",
     "directory": "packages/ui"
   },
   "homepage": "https://developers.toolpath.com",
   "bugs": {
-    "url": "https://github.com/toolpath/toolpath/issues"
+    "url": "https://github.com/toolpath/ui-packages/issues"
   },
   "publishConfig": {
     "access": "public",

package/src/breadcrumbs/item.tsx

@@ -54,9 +54,10 @@ export const Item = ({
             <>
               {previous && (
                 <CaretRightIcon
+                  weight="regular"
                   data-previous
                   className={cn(
-                    'flex size-5 rotate-180 truncate text-gray-300 dark:text-zinc-500',
+                    'flex size-4 rotate-180 truncate text-gray-300 dark:text-zinc-500',
                     {
                       'sm:hidden': breakpoint === 'sm',
                       'md:hidden': breakpoint === 'md',
@@ -70,8 +71,9 @@ export const Item = ({
             </>
           </Link>
           <CaretRightIcon
+            weight="regular"
             data-separator
-            className={cn('hidden size-5 text-gray-300 dark:text-zinc-500', {
+            className={cn('hidden size-4 text-gray-300 dark:text-zinc-500', {
               'sm:flex': breakpoint === 'sm',
               'md:flex': breakpoint === 'md',
               'lg:flex': breakpoint === 'lg',

package/src/button/button.tsx

@@ -82,7 +82,23 @@ export const Button = ({
     }
   }
 
-  const ContentWrapper = ({ children }: { children: ReactNode }) => (
+  /*
+   * The inner surface, as an element rather than a component.
+   *
+   * It used to be `const ContentWrapper = ({children}) => ...` declared here,
+   * inside `Button` — which makes it a **new component type on every render**,
+   * so React unmounts the whole content subtree and mounts a fresh one each
+   * time. That is a real defect and not only a wasted render: a `click` is only
+   * dispatched when `mousedown` and `mouseup` land on the same element, and the
+   * `<div>` the pointer is actually over was being replaced between the two.
+   * Any render occurring mid-press — a hover handler on an ancestor is enough —
+   * silently swallowed the click, while the button stayed in the tree, matched
+   * by role and name, and reported enabled.
+   *
+   * It cost two long debugging sessions in the part viewer before the cause was
+   * found (F61, F67). Nothing in the types or the tests says so.
+   */
+  const wrap = (inner: ReactNode) => (
     <div
       className={cn(
         'whitespace-nowrap rounded px-3 py-1 font-body text-xs font-semibold tracking-normal',
@@ -118,23 +134,21 @@ export const Button = ({
         className,
       )}
     >
-      {children}
+      {inner}
     </div>
   )
 
-  const content = !isLoading ? (
-    <ContentWrapper>{children}</ContentWrapper>
-  ) : (
-    <ContentWrapper>
-      <AnimatedEllipsis
-        className={cn({
-          'h-2 w-1': size === 'sm',
-          'h-2 w-1.5': size === 'md',
-          'h-3 w-2': size === 'lg',
-        })}
-      />
-    </ContentWrapper>
-  )
+  const content = !isLoading
+    ? wrap(children)
+    : wrap(
+        <AnimatedEllipsis
+          className={cn({
+            'h-2 w-1': size === 'sm',
+            'h-2 w-1.5': size === 'md',
+            'h-3 w-2': size === 'lg',
+          })}
+        />,
+      )
 
   if (asLink) {
     return (

package/src/callout/callout.tsx

@@ -172,7 +172,7 @@ const CalloutContent = ({ children, className }: CalloutContentProps) => {
               'transition-colors cursor-pointer',
             )}
           >
-            <XIcon className="size-3.5" />
+            <XIcon weight="bold" className="size-3.5" />
           </Popover.Close>
           {children}
         </Popover.Popup>

package/src/checkbox/checkbox.tsx

@@ -68,8 +68,8 @@ export const Checkbox = ({
       {...props}
     >
       <BaseCheckbox.Indicator className="flex items-center justify-center text-white" keepMounted>
-        {checked && <CheckIcon className="w-full h-full" />}
-        {indeterminate && <MinusIcon className="w-full h-full" />}
+        {checked && <CheckIcon weight="bold" className="w-full h-full" />}
+        {indeterminate && <MinusIcon weight="bold" className="w-full h-full" />}
       </BaseCheckbox.Indicator>
     </BaseCheckbox.Root>
   )

package/src/combobox/button.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, SVGProps } from 'react'
 import { cn } from '../helpers'
-import { ArrowsOutLineVerticalIcon } from '@phosphor-icons/react'
+import { CaretUpDownIcon } from '@phosphor-icons/react'
 import { useCombobox } from './combobox-context'
 import { Icon } from './icon'
 import { Trigger } from './trigger'
@@ -92,7 +92,7 @@ export const Button = ({
             variant === 'ghost',
         })}
       >
-        <ArrowsOutLineVerticalIcon className="size-3.5 text-gray-200 dark:text-zinc-400" />
+        <CaretUpDownIcon weight="bold" className="size-3.5 text-gray-200 dark:text-zinc-400" />
       </Icon>
     </Trigger>
   )

package/src/combobox/item.tsx

@@ -5,7 +5,7 @@ import {
 } from '@base-ui/react'
 import { useCombobox } from './combobox-context'
 import { cn } from '../helpers'
-import { ArrowBendUpLeftIcon } from '@phosphor-icons/react'
+import { ArrowElbowDownLeftIcon } from '@phosphor-icons/react'
 import { Tooltip } from '../tooltip/tooltip'
 
 export type ComboboxItemProps = BaseComboboxItemProps
@@ -52,7 +52,10 @@ export const Item = ({ className, children, value, ...props }: ComboboxItemProps
           <>{children}</>
         </Tooltip>
       </div>
-      <ArrowBendUpLeftIcon className="size-4 text-gray-300 dark:text-zinc-400 hidden group-data-[highlighted]:block group-hover:hidden group-data-[highlighted]:group-hover:hidden group-data-[selected]:hidden" />
+      <ArrowElbowDownLeftIcon
+        weight="bold"
+        className="size-4 text-gray-300 dark:text-zinc-400 hidden group-data-[highlighted]:block group-hover:hidden group-data-[highlighted]:group-hover:hidden group-data-[selected]:hidden"
+      />
     </BaseCombobox.Item>
   )
 }

package/src/editable-cell/editable-cell.tsx

@@ -1,8 +1,20 @@
-import React, { FC, ReactNode, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import React, {
+  FC,
+  ReactNode,
+  SVGProps,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from 'react'
 import { cn } from '../helpers'
-import { ArrowBendUpLeftIcon } from '@phosphor-icons/react'
+import { ArrowElbowDownLeftIcon } from '@phosphor-icons/react'
 import { Input } from '../input'
 
+const ReturnIcon = (props: SVGProps<SVGSVGElement>) => (
+  <ArrowElbowDownLeftIcon weight="bold" {...props} />
+)
+
 export interface EditingCell {
   rowId: string | number
   field: string
@@ -254,7 +266,7 @@ export const EditableCell: FC<EditableCellProps> = ({
           name={`editable-${field}-${rowId}`}
           id={`editable-${field}-${rowId}`}
           size="md"
-          icon={ArrowBendUpLeftIcon}
+          icon={ReturnIcon}
           iconPosition="right"
           inputMode={type === 'number' ? 'numeric' : undefined}
           onBlur={handleBlur}

package/src/input/input.tsx

@@ -118,6 +118,7 @@ export const Input = ({
   }
 
   const iconClassName = cn(
+    'self-center',
     {
       'text-gray-400 dark:text-zinc-400':
         (variant === 'muted' || variant === 'default') && !disabled,
@@ -138,7 +139,7 @@ export const Input = ({
 
   const iconElement =
     type === 'search' && !IconComponent ? (
-      <MagnifyingGlassIcon data-icon className={iconClassName} />
+      <MagnifyingGlassIcon weight="bold" data-icon className={iconClassName} />
     ) : IconComponent ? (
       <IconComponent data-icon className={iconClassName} />
     ) : null
@@ -249,7 +250,7 @@ export const Input = ({
                 value ? 'opacity-0' : 'invisible',
               )}
             >
-              {copied ? <CheckIcon /> : <CopyIcon />}
+              {copied ? <CheckIcon weight="bold" /> : <CopyIcon />}
             </IconButton>
           </Tooltip>
         </div>

package/src/menu/submenu-trigger.tsx

@@ -26,7 +26,7 @@ export const SubmenuTrigger = ({ className, children, ...props }: MenuSubmenuTri
         {...(props as MenuSubmenuTriggerProps)}
       >
         <div className="flex-1">{children}</div>
-        <CaretRightIcon className="size-4" />
+        <CaretRightIcon weight="regular" className="size-3" />
       </ContextMenu.SubmenuTrigger>
     )
   }
@@ -37,7 +37,7 @@ export const SubmenuTrigger = ({ className, children, ...props }: MenuSubmenuTri
       render={(renderProps) => (
         <div {...renderProps} tabIndex={-1} className={submenuTriggerClass}>
           <div className="flex-1">{renderProps.children}</div>
-          <CaretRightIcon className="size-4" />
+          <CaretRightIcon weight="regular" className="size-3" />
         </div>
       )}
       {...(props as MenuSubmenuTriggerProps)}

package/src/notification/list.tsx

@@ -103,6 +103,7 @@ export const List = () => {
                         {...renderProps}
                       >
                         <XIcon
+                          weight="regular"
                           className={cn({
                             'text-gray dark:text-zinc-950': variant === 'warning',
                             'text-white dark:text-zinc-50':

package/src/pagination/pagination.tsx

@@ -60,7 +60,7 @@ export const Pagination: FC<PaginationProps> = ({ pagination, page, onClick, cla
         )}
         onClick={() => onClick(page - 1)}
       >
-        <CaretRightIcon className="size-5 rotate-180" />
+        <CaretRightIcon weight="bold" className="size-4 rotate-180" />
         <span className="sr-only">Previous</span>
       </button>
       <nav className="text-sm text-gray-400 dark:text-zinc-300">
@@ -129,7 +129,7 @@ export const Pagination: FC<PaginationProps> = ({ pagination, page, onClick, cla
         onClick={() => onClick(page + 1)}
       >
         <span className="sr-only">Next</span>
-        <CaretRightIcon className="size-5" />
+        <CaretRightIcon weight="bold" className="size-4" />
       </button>
     </div>
   )

package/src/panels/collapsed.tsx

@@ -24,6 +24,7 @@ export const Collapsed: FC<CollapsedProps> = ({ onExpand }) => {
       className={`flex h-full relative w-full items-center justify-center group outline-none focus-visible:ring-2 ring-info/75 ring-inset ${isVertical ? 'cursor-row-resize' : 'cursor-col-resize'}`}
     >
       <DotsSixVerticalIcon
+        weight="bold"
         data-handle-icon
         className={`size-4 text-gray-200 dark:text-zinc-500 group-hover:text-gray-300 dark:group-hover:text-zinc-400 ${isVertical ? 'rotate-90' : ''}`}
       />

package/src/quantity-input/quantity-input.tsx

@@ -114,7 +114,7 @@ export const QuantityInput = ({
           },
         )}
       >
-        <MinusIcon className="size-3.5 text-white dark:text-zinc-100" />
+        <MinusIcon weight="bold" className="size-3.5 text-white dark:text-zinc-100" />
       </button>
       <input
         ref={ref}
@@ -151,7 +151,7 @@ export const QuantityInput = ({
           },
         )}
       >
-        <PlusIcon className="size-3.5 text-white dark:text-zinc-100" />
+        <PlusIcon weight="bold" className="size-3.5 text-white dark:text-zinc-100" />
       </button>
     </div>
   )

package/src/table/group-header.tsx

@@ -51,6 +51,7 @@ export const GroupHeader = ({
       }}
     >
       <CaretRightIcon
+        weight="bold"
         className={cn(
           'pointer-events-none fill-current text-gray dark:text-zinc-100 size-3 -rotate-90',
           { 'rotate-90': isCollapsed },

package/src/table/tree-icon.tsx

@@ -137,10 +137,13 @@ export const TreeIcon = ({ item, type = 'IconDefault' }: TreeIconProps) => {
       <Indentation item={item} isExpanded={isExpanded} />
       {type === 'IconDefault' && <div className="w-5" />}
       {type === 'IconRight' && (
-        <CaretRightIcon className="size-5 text-gray-300 dark:text-zinc-100" />
+        <CaretRightIcon weight="bold" className="size-5 text-gray-300 dark:text-zinc-100" />
       )}
       {type === 'IconDown' && (
-        <CaretRightIcon className="size-5 text-gray-300 dark:text-zinc-100 rotate-90" />
+        <CaretRightIcon
+          weight="bold"
+          className="size-5 text-gray-300 dark:text-zinc-100 rotate-90"
+        />
       )}
     </div>
   )

package/src/toast/list.tsx

@@ -3,7 +3,7 @@ import { Toast } from '@base-ui/react'
 import { Button } from '../button'
 import { cn } from '../helpers'
 import { IconButton } from '../icon-button'
-import { SpinnerGapIcon, XIcon } from '@phosphor-icons/react'
+import { CircleNotchIcon, XIcon } from '@phosphor-icons/react'
 import { useToastManager } from './provider'
 
 export interface CustomToastData {
@@ -86,7 +86,10 @@ export const List = () => {
                     {/* Title row with optional spinner */}
                     <div className="flex items-center gap-2 px-2">
                       {isLoading && (
-                        <SpinnerGapIcon className="size-4 shrink-0 animate-spin text-gray-300 dark:text-zinc-200" />
+                        <CircleNotchIcon
+                          weight="bold"
+                          className="size-4 shrink-0 animate-spin text-gray-300 dark:text-zinc-200"
+                        />
                       )}
                       <Toast.Title className="flex-1 whitespace-pre-line break-words text-sm font-bold text-gray-500 dark:text-zinc-200" />
                     </div>
@@ -116,7 +119,7 @@ export const List = () => {
                       return (
                         <div className="absolute right-2 top-2">
                           <IconButton size="lg" {...renderProps}>
-                            <XIcon className="text-gray-300 dark:text-zinc-400" />
+                            <XIcon weight="bold" className="text-gray-300 dark:text-zinc-400" />
                           </IconButton>
                         </div>
                       )