@noxlovette/material 0.1.22 → 0.1.24

package/dist/components/containers/list/ListItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Layer } from '../../../utils/index.js';
+  import clsx from 'clsx';
   import { listiem } from './theme.js';
   import type { ListitemProps } from './types.js';
 
@@ -17,6 +18,7 @@
   }: ListitemProps = $props();
 
   const cls = $derived(listiem({ lines, selected }));
+  const baseCls = $derived(cls.base({ class: clsx(className) }));
 </script>
 
 {#snippet content()}
@@ -44,12 +46,12 @@
 {#snippet action()}
   {#if 'label' in restProps}
     {@const { label: _, ...extra } = restProps}
-    <label class={cls.base()} {...extra}>
+    <label class={baseCls} {...extra}>
       <Layer />
       {@render content()}
     </label>
   {:else if 'onclick' in restProps}
-    <button type="button" class={cls.base()} {...restProps}>
+    <button type="button" class={baseCls} {...restProps}>
       <Layer />
       {@render content()}
     </button>
@@ -57,13 +59,13 @@
     {@const { href, ...extra } = restProps as typeof restProps & {
       href?: string | null;
     }}
-    <a class={cls.base()} {href} {...extra}>
+    <a class={baseCls} {href} {...extra}>
       <Layer />
       {@render content()}
     </a>
   {:else}
     {@const { href: _, ...extra } = restProps as Record<string, unknown>}
-    <div class={cls.base()} {...extra}>
+    <div class={baseCls} {...extra}>
       <Layer />
       {@render content()}
     </div>

package/dist/utils/icon/Icon.svelte

@@ -1,24 +1,35 @@
 <script lang="ts">
   import clsx from 'clsx';
-  import type { IconProps } from './types.js';
+  import type { IconProps, IconSize } from './types.js';
+
+  const sizeMap: Record<IconSize, { cls: string; opsz: number }> = {
+    xs: { cls: 'size-4 text-[16px]', opsz: 20 },
+    sm: { cls: 'size-5 text-[20px]', opsz: 20 },
+    md: { cls: 'size-6 text-[24px]', opsz: 24 },
+    lg: { cls: 'size-10 text-[40px]', opsz: 40 },
+    xl: { cls: 'size-12 text-[48px]', opsz: 48 }
+  };
 
   const {
     name,
+    size = 'md',
     variant = 'rounded',
     fill = 0,
     wght = 400,
     grad = 0,
-    opsz = 24,
-    class: className = 'size-6 text-[24px]'
+    opsz,
+    class: className
   }: IconProps = $props();
 
+  const resolved = $derived(sizeMap[size]);
+  const resolvedOpsz = $derived(opsz ?? resolved.opsz);
   const wrapperClass = 'inline-flex items-center justify-center leading-none';
 </script>
 
-<div class={clsx(className, wrapperClass)}>
+<div class={clsx(resolved.cls, className, wrapperClass)}>
   <span
     class="material-symbols-{variant}"
-    style="font-size: 1em; font-variation-settings: 'FILL' {fill}, 'wght' {wght}, 'GRAD' {grad}, 'opsz' {opsz};"
+    style="font-size: 1em; font-variation-settings: 'FILL' {fill}, 'wght' {wght}, 'GRAD' {grad}, 'opsz' {resolvedOpsz};"
     >{name}</span
   >
 </div>

package/dist/utils/icon/types.d.ts

@@ -3,8 +3,10 @@ import Icon from './Icon.svelte';
 import type { LoadingIndicatorVariants } from './theme.js';
 export type IconMD = typeof Icon;
 export type IconVariant = 'outlined' | 'rounded' | 'sharp';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconProps = HTMLAttributes<HTMLSpanElement> & {
     name: string;
+    size?: IconSize;
     variant?: IconVariant;
     fill?: 0 | 1;
     wght?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "type": "module",
   "license": "MIT",
   "repository": {