@noxlovette/material 0.6.0 → 0.7.0

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

@@ -1,25 +1,77 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import Icon from './Icon.svelte';
+import type { MaterialSymbolName } from './icon-names.js';
 import type { LoadingIndicatorVariants } from './theme.js';
+export type { MaterialSymbolName };
 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;
+/** `inline` follows the surrounding text size; the rest are 16, 20, 24, 40 and 48dp. */
+export type IconSize = 'inline' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** Material Symbols name, e.g. `favorite`. A typo is a type error. Browse them in the Icons guide. */
+    name: MaterialSymbolName;
+    /**
+     * Rendered size. Also picks the optical size (20, 24, 40, 48) unless `opsz` is set.
+     * @default 'md'
+     */
     size?: IconSize;
+    /**
+     * Outlined suits dense UIs and light type; rounded pairs with round shapes and heavier type;
+     * sharp with rectangular, 0dp-corner designs. Use one style per product.
+     * @default 'rounded'
+     */
     variant?: IconVariant;
-    fill?: 0 | 1;
+    /**
+     * 0 (outlined) to 1 (filled). Use it for state, e.g. 1 on a selected navigation item; changes
+     * animate.
+     * @default 0
+     */
+    fill?: number;
+    /**
+     * Stroke weight, 100 to 700. Match the weight of adjacent text, keep it consistent across a
+     * screen, and don't go below 200 at 24dp.
+     * @default 400
+     */
     wght?: number;
-    grad?: number;
+    /**
+     * Fine thickness adjustment, -50 to 200. `'auto'` is 0 on light schemes and -25 on dark ones,
+     * which offsets the glow of light-on-dark icons. Use a positive grade for emphasis, or match a
+     * text font's grade.
+     * @default 'auto'
+     */
+    grad?: number | 'auto';
+    /** Optical size, 20 to 48. Defaults to the one matching `size`. */
     opsz?: number;
+    /**
+     * How a change of `name` plays. `'none'` swaps the glyph at once. `'fade'` crossfades: the old
+     * glyph shrinks and fades out while the new one grows in on a spring. `'rotate'` adds a
+     * quarter turn, for a toggle between two states of one control (menu ↔ menu_open,
+     * add ↔ close). Under reduced motion both are a plain crossfade. Leave it off for icons that
+     * change with data, such as rows in a list.
+     * @default 'none'
+     */
+    transition?: IconTransition;
 };
+export type IconTransition = 'none' | 'fade' | 'rotate';
 export type LoadingIndicatorProps = HTMLAttributes<SVGAElement> & LoadingIndicatorVariants & {
     size?: number;
     container?: boolean;
     center?: boolean;
 };
 export type MaterialSymbolsProviderProps = {
-    icons?: string[];
-    extraIcons?: string[];
+    icons?: MaterialSymbolName[];
+    /** Icon names to load on top of `baseIcons`. Ignored when `subset` is false. */
+    extraIcons?: MaterialSymbolName[];
+    /**
+     * Load only the named icons (small, fast) or the whole set of several MB per family, which a
+     * page choosing icons at runtime, like an icon picker, needs.
+     * @default true
+     */
+    subset?: boolean;
+    /**
+     * Which styles to load. Loading only the one your product uses saves a request per style.
+     * @default ['rounded', 'outlined', 'sharp']
+     */
+    families?: IconVariant[];
     display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
 };

package/dist/utils/tv.d.ts

@@ -0,0 +1,5 @@
+export type { VariantProps } from 'tailwind-variants';
+/** The library's `tv`, with {@link twMergeConfig}. */
+export declare const tv: import("tailwind-variants").TV;
+/** tailwind-merge with the same config, for class lists built outside `tv()`. */
+export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;

package/dist/utils/tv.js

@@ -0,0 +1,20 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
+/** The layer names from `styles/layers.css`. Keep the two in sync. */
+const LAYERS = ['bar', 'rail', 'sheet', 'fab', 'pane', 'modal', 'snackbar', 'popup'];
+/**
+ * What tailwind-merge doesn't know about this library's classes:
+ * - `z-layer-*` sets z-index, so a consumer's `class="z-40"` replaces a component's layer.
+ * - `*-spacing-<N>` (styles/spacing.css) is a spacing value, so `size-[18px]` or `p-4` replaces
+ *   `size-spacing-250` or `p-spacing-200` instead of both classes shipping and CSS order deciding.
+ */
+const twMergeConfig = {
+    extend: {
+        theme: { spacing: [(value) => /^spacing-\d+$/.test(value)] },
+        classGroups: { z: [{ 'z-layer': LAYERS }] }
+    }
+};
+/** The library's `tv`, with {@link twMergeConfig}. */
+export const tv = createTV({ twMergeConfig });
+/** tailwind-merge with the same config, for class lists built outside `tv()`. */
+export const twMerge = extendTailwindMerge(twMergeConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [
@@ -24,6 +24,7 @@
   },
   "scripts": {
     "build": "bun run generate:springs && svelte-package && bun scripts/copy-skill.ts",
+    "generate:icons": "bun scripts/generate-icon-catalog.ts",
     "generate:springs": "bun scripts/generate-motion-springs.ts && prettier --write src/lib/styles/motion.css",
     "build:site": "vite build",
     "watch": "svelte-package --watch",