@manafishrov/ui 1.0.5 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -239,9 +239,9 @@
   },
   "dependencies": {
     "@ark-ui/solid": "5.34.0",
+    "@fontsource-variable/google-sans-flex": "5.2.1",
     "@fontsource/chakra-petch": "5.2.7",
     "@fontsource/rajdhani": "5.2.7",
-    "@fontsource/roboto": "5.2.10",
     "tailwind-merge": "3.0.0",
     "tailwind-variants": "3.2.2",
     "tw-animate-css": "1.4.0"
@@ -257,7 +257,7 @@
     "unplugin-dts": "1.0.0-beta.6"
   },
   "peerDependencies": {
-    "@iconify-json/ic": "^1.2.4",
+    "@iconify-json/material-symbols": "^1.2.9",
     "@tanstack/solid-form": "^1.28.0",
     "@tanstack/solid-router": "^1.162.1",
     "solid-js": "^1.9.0",

package/src/components/Accordion.tsx

@@ -2,7 +2,7 @@ import type { Component } from 'solid-js';
 
 import { Accordion as AccordionPrimitive, useAccordion } from '@ark-ui/solid/accordion';
 import { cn } from 'tailwind-variants';
-import OutlineExpandMoreIcon from '~icons/ic/outline-expand-more';
+import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
 export { useAccordion };
 export const AccordionContext = AccordionPrimitive.Context;
@@ -58,7 +58,7 @@ export const AccordionIndicator: Component<AccordionPrimitive.ItemIndicatorProps
       )}
       {...others}
     >
-      <OutlineExpandMoreIcon aria-hidden='true' class='size-full' />
+      <ExpandMoreIcon aria-hidden='true' class='size-full' />
     </AccordionPrimitive.ItemIndicator>
   );
 };

package/src/components/Breadcrumb.tsx

@@ -1,14 +1,21 @@
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
-import OutlineMoreHorizIcon from '~icons/ic/outline-more-horiz';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
+import MoreHorizIcon from '~icons/material-symbols/more-horiz';
 
 import { Link, type LinkProps } from '@/components/Link';
 import * as messages from '@/paraglide/messages';
 
 export const Breadcrumb: Component<ComponentProps<'nav'>> = (props) => {
   const [local, others] = splitProps(props, ['class']);
-  return <nav aria-label='breadcrumb' data-slot='breadcrumb' class={cn(local.class)} {...others} />;
+  return (
+    <nav
+      aria-label={messages.ui_breadcrumb_label()}
+      data-slot='breadcrumb'
+      class={cn(local.class)}
+      {...others}
+    />
+  );
 };
 
 export const BreadcrumbList: Component<ComponentProps<'ol'>> = (props) => {
@@ -73,7 +80,7 @@ export const BreadcrumbSeparator: Component<ComponentProps<'li'>> = (props) => {
       class={cn('[&>svg]:size-4.5', local.class)}
       {...others}
     >
-      {local.children ?? <OutlineChevronRightIcon />}
+      {local.children ?? <ChevronRightIcon />}
     </li>
   );
 };
@@ -89,7 +96,7 @@ export const BreadcrumbEllipsis: Component<ComponentProps<'span'>> = (props) =>
       class={cn('size-6 relative flex items-center justify-center', local.class)}
       {...others}
     >
-      <OutlineMoreHorizIcon class='size-5' />
+      <MoreHorizIcon class='size-5' />
       <span class='sr-only'>{messages.ui_common_more()}</span>
     </span>
   );

package/src/components/Carousel.tsx

@@ -1,8 +1,8 @@
 import { Carousel as CarouselPrimitive } from '@ark-ui/solid/carousel';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineChevronLeftIcon from '~icons/ic/outline-chevron-left';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
+import ChevronLeftIcon from '~icons/material-symbols/chevron-left';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
 
 import { Button, type ButtonVariantProps } from '@/components/Button';
 import * as messages from '@/paraglide/messages';
@@ -65,7 +65,7 @@ export const CarouselPrevious: Component<
           )}
           {...triggerProps()}
         >
-          {local.children ?? <OutlineChevronLeftIcon class='size-5' />}
+          {local.children ?? <ChevronLeftIcon class='size-5' />}
           <span class='sr-only'>{messages.ui_carousel_previous()}</span>
         </Button>
       )}
@@ -96,7 +96,7 @@ export const CarouselNext: Component<
           )}
           {...triggerProps()}
         >
-          {local.children ?? <OutlineChevronRightIcon class='size-5' />}
+          {local.children ?? <ChevronRightIcon class='size-5' />}
           <span class='sr-only'>{messages.ui_carousel_next()}</span>
         </Button>
       )}

package/src/components/Checkbox.tsx

@@ -1,7 +1,7 @@
 import { Checkbox as CheckboxPrimitive } from '@ark-ui/solid/checkbox';
 import { type Component, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCheckIcon from '~icons/ic/outline-check';
+import CheckIcon from '~icons/material-symbols/check';
 export const CheckboxGroup = CheckboxPrimitive.Group;
 export const CheckboxContext = CheckboxPrimitive.Context;
 
@@ -59,7 +59,7 @@ export const CheckboxIndicator: Component<CheckboxPrimitive.IndicatorProps> = (p
       )}
       {...others}
     >
-      {local.children ?? <OutlineCheckIcon />}
+      {local.children ?? <CheckIcon />}
     </CheckboxPrimitive.Indicator>
   );
 };

package/src/components/Combobox.tsx

@@ -1,9 +1,9 @@
 import { Combobox as ComboboxPrimitive, type CollectionItem } from '@ark-ui/solid/combobox';
 import { type Component, type ComponentProps, type JSXElement, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCheckIcon from '~icons/ic/outline-check';
-import OutlineCloseIcon from '~icons/ic/outline-close';
-import OutlineExpandMoreIcon from '~icons/ic/outline-expand-more';
+import CheckIcon from '~icons/material-symbols/check';
+import CloseIcon from '~icons/material-symbols/close';
+import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
 export const ComboboxContext = ComboboxPrimitive.Context;
 
@@ -80,7 +80,7 @@ export const ComboboxTrigger: Component<ComboboxPrimitive.TriggerProps> = (props
       class={cn('text-muted-foreground transition-colors hover:text-foreground', local.class)}
       {...others}
     >
-      {local.children ?? <OutlineExpandMoreIcon class='size-4' />}
+      {local.children ?? <ExpandMoreIcon class='size-4' />}
     </ComboboxPrimitive.Trigger>
   );
 };
@@ -90,13 +90,13 @@ export const ComboboxClearTrigger: Component<ComboboxPrimitive.ClearTriggerProps
     <ComboboxPrimitive.ClearTrigger
       data-slot='combobox-clear'
       class={cn(
-        'p-0.5 rounded-[4px] text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        'p-0.5 rounded-[4px] text-muted-foreground transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none',
         local.class,
       )}
       {...others}
       tabIndex={local.tabIndex ?? 0}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3.5' />}
+      {local.children ?? <CloseIcon class='size-3.5' />}
     </ComboboxPrimitive.ClearTrigger>
   );
 };
@@ -126,7 +126,7 @@ export const ComboboxItem: Component<ComboboxPrimitive.ItemProps> = (props) => {
     <ComboboxPrimitive.Item
       data-slot='combobox-item'
       class={cn(
-        "gap-1.5 py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center rounded-md outline-hidden select-none data-disabled:pointer-events-none data-[disabled=true]:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center",
+        "gap-1.5 py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:gap-2 relative flex w-full cursor-default items-center rounded-md outline-hidden select-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center",
         local.class,
       )}
       {...others}
@@ -135,7 +135,7 @@ export const ComboboxItem: Component<ComboboxPrimitive.ItemProps> = (props) => {
         {local.children}
       </ComboboxPrimitive.ItemText>
       <ComboboxPrimitive.ItemIndicator class='right-2 size-4 pointer-events-none absolute flex items-center justify-center'>
-        <OutlineCheckIcon class='pointer-events-none' />
+        <CheckIcon class='pointer-events-none' />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
   );

package/src/components/DatePicker.tsx

@@ -1,9 +1,9 @@
 import { DatePicker as DatePickerPrimitive } from '@ark-ui/solid/date-picker';
 import { type Component, For, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCalendarMonthIcon from '~icons/ic/outline-calendar-month';
-import OutlineChevronLeftIcon from '~icons/ic/outline-chevron-left';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import ChevronLeftIcon from '~icons/material-symbols/chevron-left';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
 
 import { buttonVariants } from '@/components/Button';
 export const DatePicker: Component<DatePickerPrimitive.RootProps> = (props) => {
@@ -95,7 +95,7 @@ export const DatePickerTrigger: Component<DatePickerPrimitive.TriggerProps> = (p
       )}
       {...others}
     >
-      {local.children ?? <OutlineCalendarMonthIcon class='size-4' />}
+      {local.children ?? <CalendarMonthIcon class='size-4' />}
     </DatePickerPrimitive.Trigger>
   );
 };
@@ -126,7 +126,7 @@ export const DatePickerPrevTrigger: Component<DatePickerPrimitive.PrevTriggerPro
       )}
       {...others}
     >
-      {local.children ?? <OutlineChevronLeftIcon class='size-4' />}
+      {local.children ?? <ChevronLeftIcon class='size-4' />}
     </DatePickerPrimitive.PrevTrigger>
   );
 };
@@ -141,7 +141,7 @@ export const DatePickerNextTrigger: Component<DatePickerPrimitive.NextTriggerPro
       )}
       {...others}
     >
-      {local.children ?? <OutlineChevronRightIcon class='size-4' />}
+      {local.children ?? <ChevronRightIcon class='size-4' />}
     </DatePickerPrimitive.NextTrigger>
   );
 };

package/src/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import { Dialog as DialogPrimitive } from '@ark-ui/solid/dialog';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCloseIcon from '~icons/ic/outline-close';
+import CloseIcon from '~icons/material-symbols/close';
 
 import { Button } from '@/components/Button';
 import * as messages from '@/paraglide/messages';
@@ -69,7 +69,7 @@ export const DialogCloseButton: Component<DialogPrimitive.CloseTriggerProps> = (
           {...triggerProps()}
           {...others}
         >
-          <OutlineCloseIcon aria-hidden='true' />
+          <CloseIcon aria-hidden='true' />
         </Button>
       )}
     />

package/src/components/Menu.tsx

@@ -1,8 +1,8 @@
 import { Menu as MenuPrimitive } from '@ark-ui/solid/menu';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCheckIcon from '~icons/ic/outline-check';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
+import CheckIcon from '~icons/material-symbols/check';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
 
 export const Menu = MenuPrimitive.Root;
 export const MenuTrigger = MenuPrimitive.Trigger;
@@ -41,7 +41,7 @@ export const MenuItem: Component<MenuPrimitive.ItemProps> = (props) => {
     <MenuPrimitive.Item
       data-slot='menu-item'
       class={cn(
-        'px-2 py-1.5 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-[disabled=true]:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+        'px-2 py-1.5 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled=true]:opacity-50',
         local.class,
       )}
       {...others}
@@ -61,7 +61,7 @@ export const MenuTriggerItem: Component<MenuPrimitive.TriggerItemProps> = (props
       {...others}
     >
       {local.children}
-      <OutlineChevronRightIcon class='size-4 ml-auto' />
+      <ChevronRightIcon class='size-4 ml-auto' />
     </MenuPrimitive.TriggerItem>
   );
 };
@@ -96,7 +96,7 @@ export const MenuItemIndicator: Component<MenuPrimitive.ItemIndicatorProps> = (p
       class={cn('right-2 size-3.5 absolute flex items-center justify-center', local.class)}
       {...others}
     >
-      {local.children ?? <OutlineCheckIcon class='size-4' />}
+      {local.children ?? <CheckIcon class='size-4' />}
     </MenuPrimitive.ItemIndicator>
   );
 };
@@ -107,13 +107,13 @@ export const MenuCheckboxItem: Component<MenuPrimitive.CheckboxItemProps> = (pro
     <MenuPrimitive.CheckboxItem
       data-slot='menu-checkbox-item'
       class={cn(
-        'py-1.5 pr-2 pl-8 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-[disabled=true]:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+        'py-1.5 pr-2 pl-8 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled=true]:opacity-50',
         local.class,
       )}
       {...others}
     >
       <MenuPrimitive.ItemIndicator class='left-2 size-3.5 absolute flex items-center justify-center'>
-        <OutlineCheckIcon class='size-4' />
+        <CheckIcon class='size-4' />
       </MenuPrimitive.ItemIndicator>
       <MenuPrimitive.ItemText>{local.children}</MenuPrimitive.ItemText>
     </MenuPrimitive.CheckboxItem>
@@ -126,7 +126,7 @@ export const MenuRadioItem: Component<MenuPrimitive.RadioItemProps> = (props) =>
     <MenuPrimitive.RadioItem
       data-slot='menu-radio-item'
       class={cn(
-        'py-1.5 pr-2 pl-8 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-[disabled=true]:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground',
+        'py-1.5 pr-2 pl-8 text-sm relative flex cursor-default items-center rounded-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled=true]:opacity-50',
         local.class,
       )}
       {...others}

package/src/components/MenuCombobox.tsx

@@ -1,9 +1,9 @@
 import { Menu as MenuPrimitive } from '@ark-ui/solid/menu';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCheckIcon from '~icons/ic/outline-check';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
-import OutlineSearchIcon from '~icons/ic/outline-search';
+import CheckIcon from '~icons/material-symbols/check';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
+import SearchIcon from '~icons/material-symbols/search';
 
 export const MenuCombobox = MenuPrimitive.Root;
 export const MenuComboboxTrigger = MenuPrimitive.Trigger;
@@ -48,7 +48,7 @@ export const MenuComboboxSearchInput: Component<MenuComboboxSearchInputProps> =
   };
   return (
     <div data-slot='menu-combobox-search' class='gap-2 px-3 py-2 flex items-center border-b'>
-      <OutlineSearchIcon class='size-4 shrink-0 text-muted-foreground' />
+      <SearchIcon class='size-4 shrink-0 text-muted-foreground' />
       <input
         type='text'
         class={cn(
@@ -87,7 +87,7 @@ export const MenuComboboxTriggerItem: Component<MenuPrimitive.TriggerItemProps>
       {...others}
     >
       {local.children}
-      <OutlineChevronRightIcon class='size-4 ml-auto' />
+      <ChevronRightIcon class='size-4 ml-auto' />
     </MenuPrimitive.TriggerItem>
   );
 };
@@ -119,7 +119,7 @@ export const MenuComboboxItemIndicator: Component<MenuPrimitive.ItemIndicatorPro
       class={cn('right-3 size-3.5 absolute flex items-center justify-center', local.class)}
       {...others}
     >
-      {local.children ?? <OutlineCheckIcon class='size-4' />}
+      {local.children ?? <CheckIcon class='size-4' />}
     </MenuPrimitive.ItemIndicator>
   );
 };
@@ -135,7 +135,7 @@ export const MenuComboboxCheckboxItem: Component<MenuPrimitive.CheckboxItemProps
       {...others}
     >
       <MenuPrimitive.ItemIndicator class='left-3 size-3.5 absolute flex items-center justify-center'>
-        <OutlineCheckIcon class='size-4' />
+        <CheckIcon class='size-4' />
       </MenuPrimitive.ItemIndicator>
       <MenuPrimitive.ItemText>{local.children}</MenuPrimitive.ItemText>
     </MenuPrimitive.CheckboxItem>

package/src/components/NavigationMenu.tsx

@@ -1,7 +1,7 @@
 import { NavigationMenu as NavigationMenuPrimitive } from '@ark-ui/solid/navigation-menu';
 import { type Component, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineExpandMoreIcon from '~icons/ic/outline-expand-more';
+import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
 export const NavigationMenu: Component<NavigationMenuPrimitive.RootProps> = (props) => {
   const [local, others] = splitProps(props, ['class', 'children']);
@@ -55,7 +55,7 @@ export const NavigationMenuTrigger: Component<NavigationMenuPrimitive.TriggerPro
       {...others}
     >
       {local.children}{' '}
-      <OutlineExpandMoreIcon
+      <ExpandMoreIcon
         class='ml-1 size-3 relative top-px transition duration-300 group-data-[state=open]:rotate-180'
         aria-hidden='true'
       />
@@ -70,7 +70,7 @@ export const NavigationMenuContent: Component<NavigationMenuPrimitive.ContentPro
       data-slot='navigation-menu-content'
       class={cn(
         'p-4 shadow-md h-auto w-auto origin-top-left rounded-md bg-popover text-popover-foreground ring-1 ring-foreground/10 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-        'absolute top-full left-0 mt-1.5 min-w-[12rem]',
+        'left-0 mt-1.5 absolute top-full min-w-[12rem]',
         local.class,
       )}
       {...others}
@@ -86,7 +86,7 @@ export const NavigationMenuIndicator: Component<NavigationMenuPrimitive.Indicato
     <NavigationMenuPrimitive.Indicator
       data-slot='navigation-menu-indicator'
       class={cn(
-        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+        'h-1.5 top-full z-[1] flex items-end justify-center overflow-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:animate-in data-[state=open]:fade-in',
         local.class,
       )}
       {...others}
@@ -100,7 +100,7 @@ export const NavigationMenuArrow: Component<NavigationMenuPrimitive.ArrowProps>
     <NavigationMenuPrimitive.Arrow
       data-slot='navigation-menu-arrow'
       class={cn(
-        'relative top-[70%] h-2 w-2 rotate-45 rounded-tl-sm border-l border-t bg-border shadow-md',
+        'h-2 w-2 shadow-md relative top-[70%] rotate-45 rounded-tl-sm border-t border-l bg-border',
         local.class,
       )}
       {...others}
@@ -114,7 +114,7 @@ export const NavigationMenuViewport: Component<NavigationMenuPrimitive.ViewportP
     <NavigationMenuPrimitive.Viewport
       data-slot='navigation-menu-viewport'
       class={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+        'origin-top-center mt-1.5 shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)] relative h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90',
         local.class,
       )}
       {...others}

package/src/components/NumberInput.tsx

@@ -1,8 +1,8 @@
 import { NumberInput as PrimitiveNumberInput } from '@ark-ui/solid/number-input';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineExpandLessIcon from '~icons/ic/outline-expand-less';
-import OutlineExpandMoreIcon from '~icons/ic/outline-expand-more';
+import ExpandLessIcon from '~icons/material-symbols/expand-less';
+import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
 export const NumberInputContext = PrimitiveNumberInput.Context;
 
@@ -76,7 +76,7 @@ export const NumberInputIncrementTrigger: Component<PrimitiveNumberInput.Increme
       )}
       {...others}
     >
-      {local.children ?? <OutlineExpandLessIcon class='size-3.5' />}
+      {local.children ?? <ExpandLessIcon class='size-3.5' />}
     </PrimitiveNumberInput.IncrementTrigger>
   );
 };
@@ -94,7 +94,7 @@ export const NumberInputDecrementTrigger: Component<PrimitiveNumberInput.Decreme
       )}
       {...others}
     >
-      {local.children ?? <OutlineExpandMoreIcon class='size-3.5' />}
+      {local.children ?? <ExpandMoreIcon class='size-3.5' />}
     </PrimitiveNumberInput.DecrementTrigger>
   );
 };

package/src/components/Pagination.tsx

@@ -1,9 +1,9 @@
 import { Pagination as PaginationPrimitive } from '@ark-ui/solid/pagination';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineChevronLeftIcon from '~icons/ic/outline-chevron-left';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
-import OutlineMoreHorizIcon from '~icons/ic/outline-more-horiz';
+import ChevronLeftIcon from '~icons/material-symbols/chevron-left';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
+import MoreHorizIcon from '~icons/material-symbols/more-horiz';
 
 import { buttonVariants } from '@/components/Button';
 import * as messages from '@/paraglide/messages';
@@ -77,7 +77,7 @@ export const PaginationPrevious: Component<PaginationPrimitive.PrevTriggerProps>
     >
       {local.children ?? (
         <>
-          <OutlineChevronLeftIcon />
+          <ChevronLeftIcon />
           <span>{messages.ui_pagination_previous()}</span>
         </>
       )}
@@ -104,7 +104,7 @@ export const PaginationNext: Component<PaginationPrimitive.NextTriggerProps> = (
       {local.children ?? (
         <>
           <span>{messages.ui_pagination_next()}</span>
-          <OutlineChevronRightIcon />
+          <ChevronRightIcon />
         </>
       )}
     </PaginationPrimitive.NextTrigger>
@@ -120,7 +120,7 @@ export const PaginationEllipsis: Component<PaginationPrimitive.EllipsisProps> =
       data-slot='pagination-ellipsis'
       class={cn('h-9 w-9 flex items-center justify-center', local.class)}
     >
-      <OutlineMoreHorizIcon class='size-4' />
+      <MoreHorizIcon class='size-4' />
       <span class='sr-only'>{messages.ui_pagination_more()}</span>
     </PaginationPrimitive.Ellipsis>
   );

package/src/components/PasswordInput.tsx

@@ -1,8 +1,8 @@
 import { PasswordInput as PrimitivePasswordInput } from '@ark-ui/solid/password-input';
 import { splitProps, type Component } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineVisibilityIcon from '~icons/ic/outline-visibility';
-import OutlineVisibilityOffIcon from '~icons/ic/outline-visibility-off';
+import VisibilityIcon from '~icons/material-symbols/visibility';
+import VisibilityOffIcon from '~icons/material-symbols/visibility-off';
 export const PasswordInput: Component<PrimitivePasswordInput.RootProps> = (props) => {
   const [local, others] = splitProps(props, ['class']);
   return (
@@ -86,10 +86,10 @@ export const PasswordInputIndicator: Component<PrimitivePasswordInput.IndicatorP
   return (
     <PrimitivePasswordInput.Indicator
       class={cn(local.class)}
-      fallback={local.children ?? <OutlineVisibilityOffIcon class='size-4' />}
+      fallback={local.children ?? <VisibilityOffIcon class='size-4' />}
       {...others}
     >
-      <OutlineVisibilityIcon class='size-4' />
+      <VisibilityIcon class='size-4' />
     </PrimitivePasswordInput.Indicator>
   );
 };

package/src/components/PinInput.tsx

@@ -1,7 +1,7 @@
 import { PinInput as PrimitivePinInput } from '@ark-ui/solid/pin-input';
 import { splitProps, type Component, type ComponentProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineRemoveIcon from '~icons/ic/outline-remove';
+import RemoveIcon from '~icons/material-symbols/close';
 
 export const PinInputHiddenInput = PrimitivePinInput.HiddenInput;
 export const PinInputContext = PrimitivePinInput.Context;
@@ -60,7 +60,7 @@ export const PinInputInput: Component<PrimitivePinInput.InputProps> = (props) =>
   return (
     <PrimitivePinInput.Input
       class={cn(
-        'relative flex h-10 w-10 items-center justify-center border-y border-r border-input bg-transparent text-sm text-center transition-colors outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground first:rounded-l-md first:border-l last:rounded-r-md dark:bg-input/30',
+        'h-10 w-10 text-sm relative flex items-center justify-center border-y border-r border-input bg-transparent text-center transition-colors outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground first:rounded-l-md first:border-l last:rounded-r-md dark:bg-input/30',
         'focus-visible:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
         'data-[invalid=true]:border-destructive data-[invalid=true]:ring-2 data-[invalid=true]:ring-destructive/20 dark:data-[invalid=true]:ring-destructive/40',
         'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[readonly=true]:cursor-default',
@@ -81,7 +81,7 @@ export const PinInputSeparator: Component<ComponentProps<'div'>> = (props) => {
       class={cn('flex items-center justify-center text-muted-foreground', local.class)}
       {...others}
     >
-      <OutlineRemoveIcon class='size-4' />
+      <RemoveIcon class='size-4' />
     </div>
   );
 };

package/src/components/Select.tsx

@@ -8,9 +8,9 @@ import {
   splitProps,
 } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCheckIcon from '~icons/ic/outline-check';
-import OutlineCloseIcon from '~icons/ic/outline-close';
-import OutlineExpandMoreIcon from '~icons/ic/outline-expand-more';
+import CheckIcon from '~icons/material-symbols/check';
+import CloseIcon from '~icons/material-symbols/close';
+import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
 export const SelectControl = SelectPrimitive.Control;
 export const SelectItemContext = SelectPrimitive.ItemContext;
@@ -181,7 +181,7 @@ export const SelectIndicator: Component<SelectPrimitive.IndicatorProps> = (props
       class={cn('opacity-50 transition-transform data-[state=open]:rotate-180', local.class)}
       {...others}
     >
-      {local.children ?? <OutlineExpandMoreIcon class='size-4' />}
+      {local.children ?? <ExpandMoreIcon class='size-4' />}
     </SelectPrimitive.Indicator>
   );
 };
@@ -231,7 +231,7 @@ export const SelectClearTrigger: Component<SelectPrimitive.ClearTriggerProps> =
       {...others}
       tabIndex={local.tabIndex ?? 0}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3.5' />}
+      {local.children ?? <CloseIcon class='size-3.5' />}
     </SelectPrimitive.ClearTrigger>
   );
 };
@@ -282,7 +282,7 @@ export const SelectItem: Component<SelectPrimitive.ItemProps> = (props) => {
         {local.children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator class='right-2 size-4 pointer-events-none absolute flex items-center justify-center'>
-        <OutlineCheckIcon class='pointer-events-none' />
+        <CheckIcon class='pointer-events-none' />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   );

package/src/components/Sheet.tsx

@@ -1,7 +1,7 @@
 import { Dialog as SheetPrimitive } from '@ark-ui/solid/dialog';
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCloseIcon from '~icons/ic/outline-close';
+import CloseIcon from '~icons/material-symbols/close';
 
 import { Button } from '@/components/Button';
 import * as messages from '@/paraglide/messages';
@@ -61,10 +61,10 @@ export const SheetContent: Component<
       class={cn(
         'gap-4 p-6 shadow-lg relative flex h-full w-full flex-col bg-background outline-none',
         'border-l border-border',
-        'data-[side=left]:border-l-0 data-[side=left]:border-r',
-        'data-[side=top]:border-l-0 data-[side=top]:border-b',
-        'data-[side=bottom]:border-l-0 data-[side=bottom]:border-t',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[side=left]:border-r data-[side=left]:border-l-0',
+        'data-[side=top]:border-b data-[side=top]:border-l-0',
+        'data-[side=bottom]:border-t data-[side=bottom]:border-l-0',
+        'data-[state=closed]:animate-out data-[state=open]:animate-in',
         'data-[state=closed]:duration-300 data-[state=open]:duration-300',
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
         'data-[side=right]:data-[state=closed]:slide-out-to-right-1/2 data-[side=right]:data-[state=open]:slide-in-from-right-1/2',
@@ -94,7 +94,7 @@ export const SheetCloseButton: Component<SheetPrimitive.CloseTriggerProps> = (pr
           {...triggerProps()}
           {...others}
         >
-          <OutlineCloseIcon aria-hidden='true' />
+          <CloseIcon aria-hidden='true' />
           <span class='sr-only'>{messages.ui_common_close()}</span>
         </Button>
       )}

package/src/components/Spinner.tsx

@@ -1,5 +1,6 @@
 import { type Component, type ComponentProps, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
+import ProgressActivityIcon from '~icons/material-symbols/progress-activity';
 
 import * as messages from '@/paraglide/messages';
 
@@ -13,15 +14,7 @@ export const Spinner: Component<ComponentProps<'span'>> = (props) => {
       class={cn('inline-flex items-center justify-center', local.class)}
       {...others}
     >
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        viewBox='0 -960 960 960'
-        fill='currentColor'
-        class='size-4 animate-spin'
-        aria-hidden='true'
-      >
-        <path d='M325-111.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480.5-80Q398-80 325-111.5Z' />
-      </svg>
+      <ProgressActivityIcon class='size-4 animate-spin' aria-hidden='true' />
     </span>
   );
 };