snice 4.20.1 → 4.22.0

package/adapters/react/icon.d.ts

@@ -1,29 +0,0 @@
-import type { SniceBaseProps } from './types';
-/**
- * Props for the Icon component
- */
-export interface IconProps extends SniceBaseProps {
-    name?: any;
-    src?: any;
-    size?: any;
-    color?: any;
-    label?: any;
-}
-/**
- * Icon - React adapter for snice-icon
- *
- * This is an auto-generated React wrapper for the Snice icon component.
- * Make sure to import the Snice component before using this wrapper:
- *
- * @example
- * ```tsx
- * import 'snice/components/icon';
- * import { Icon } from 'snice/react';
- *
- * function MyComponent() {
- *   return <Icon />;
- * }
- * ```
- */
-export declare const Icon: import("react").ForwardRefExoticComponent<Omit<IconProps, "ref"> & import("react").RefAttributes<any>>;
-//# sourceMappingURL=icon.d.ts.map

package/adapters/react/icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAC/C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,CAAC,EAAE,GAAG,CAAC;CAEb;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,wGAKf,CAAC"}

package/adapters/react/icon.js

@@ -1,24 +0,0 @@
-import { createReactAdapter } from './wrapper';
-/**
- * Icon - React adapter for snice-icon
- *
- * This is an auto-generated React wrapper for the Snice icon component.
- * Make sure to import the Snice component before using this wrapper:
- *
- * @example
- * ```tsx
- * import 'snice/components/icon';
- * import { Icon } from 'snice/react';
- *
- * function MyComponent() {
- *   return <Icon />;
- * }
- * ```
- */
-export const Icon = createReactAdapter({
-    tagName: 'snice-icon',
-    properties: ["name", "src", "size", "color", "label"],
-    events: {},
-    formAssociated: false
-});
-//# sourceMappingURL=icon.js.map

package/adapters/react/icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAe/C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAY;IAChD,OAAO,EAAE,YAAY;IACrB,UAAU,EAAE,CAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,OAAO,CAAC;IACjD,MAAM,EAAE,EAAE;IACV,cAAc,EAAE,KAAK;CACtB,CAAC,CAAC"}

package/adapters/react/icon.tsx

@@ -1,37 +0,0 @@
-import { createReactAdapter } from './wrapper';
-import type { SniceBaseProps } from './types';
-
-/**
- * Props for the Icon component
- */
-export interface IconProps extends SniceBaseProps {
-  name?: any;
-  src?: any;
-  size?: any;
-  color?: any;
-  label?: any;
-
-}
-
-/**
- * Icon - React adapter for snice-icon
- *
- * This is an auto-generated React wrapper for the Snice icon component.
- * Make sure to import the Snice component before using this wrapper:
- *
- * @example
- * ```tsx
- * import 'snice/components/icon';
- * import { Icon } from 'snice/react';
- *
- * function MyComponent() {
- *   return <Icon />;
- * }
- * ```
- */
-export const Icon = createReactAdapter<IconProps>({
-  tagName: 'snice-icon',
-  properties: ["name","src","size","color","label"],
-  events: {},
-  formAssociated: false
-});

package/dist/components/icon/snice-icon.d.ts

@@ -1,18 +0,0 @@
-import type { IconSize, SniceIconElement } from './snice-icon.types';
-export declare class SniceIcon extends HTMLElement implements SniceIconElement {
-    name: string;
-    src: string;
-    size: IconSize | number;
-    color: string;
-    label: string;
-    static registerIcon(name: string, svg: string): void;
-    static registerIcons(icons: Record<string, string>): void;
-    static getIcon(name: string): string | undefined;
-    static getRegisteredNames(): string[];
-    renderContent(): import("snice").TemplateResult;
-    componentStyles(): import("snice").CSSResult;
-    init(): void;
-    updateCustomSize(): void;
-    updateColor(): void;
-    private getSvgContent;
-}

package/dist/components/icon/snice-icon.types.d.ts

@@ -1,11 +0,0 @@
-export type IconSize = 'small' | 'medium' | 'large';
-export interface SniceIconElement extends HTMLElement {
-    name: string;
-    src: string;
-    size: IconSize | number;
-    color: string;
-    label: string;
-}
-export interface IconRegistry {
-    [name: string]: string;
-}

package/docs/ai/components/icon.md

@@ -1,63 +0,0 @@
-# snice-icon
-
-SVG icon element with built-in icon set and custom icon registry.
-
-## Properties
-
-```typescript
-name: string = '';           // Icon name from registry
-src: string = '';            // URL to SVG file (alternative to name)
-size: 'small'|'medium'|'large'|number = 'medium'; // 16/24/32px or custom px
-color: string = '';          // Icon color (default: currentColor)
-label: string = '';          // Accessibility label (sets role="img")
-```
-
-## Slots
-
-- `(none)` - No slots
-
-## Events
-
-- `(none)` - No events
-
-## Methods
-
-- `static registerIcon(name, svg)` - Register a custom SVG icon
-- `static registerIcons(icons)` - Register multiple icons `{ name: svgString }`
-- `static getIcon(name)` - Get SVG string by name
-- `static getRegisteredNames()` - List all available icon names
-
-## Built-in Icons
-
-arrow-left, arrow-right, arrow-up, arrow-down, check, close, search, menu, plus, minus, info, warning, error, success, home, settings, user, edit, delete, star, heart, mail, notification, chevron-left, chevron-right, chevron-up, chevron-down, copy, download, upload, link, eye, eye-off, filter, sort, refresh, more-vertical, more-horizontal, calendar, clock, lock, unlock, external-link
-
-## Usage
-
-```html
-<!-- Built-in icon -->
-<snice-icon name="check"></snice-icon>
-
-<!-- Sizes -->
-<snice-icon name="star" size="small"></snice-icon>
-<snice-icon name="star" size="large"></snice-icon>
-<snice-icon name="star" size="48"></snice-icon>
-
-<!-- Color -->
-<snice-icon name="heart" color="rgb(220 38 38)"></snice-icon>
-
-<!-- External SVG -->
-<snice-icon src="/icons/custom.svg"></snice-icon>
-
-<!-- With label for accessibility -->
-<snice-icon name="close" label="Close dialog"></snice-icon>
-```
-
-```typescript
-// Register custom icons
-import { SniceIcon } from 'snice/components/icon/snice-icon';
-SniceIcon.registerIcon('custom', '<svg viewBox="0 0 24 24">...</svg>');
-SniceIcon.registerIcons({ icon1: '...', icon2: '...' });
-```
-
-**CSS Parts:**
-- `base` - The icon container div

package/docs/components/icon.md

@@ -1,186 +0,0 @@
-[//]: # (AI: For a low-token version of this doc, use docs/ai/components/icon.md instead)
-
-# Icon Component
-`<snice-icon>`
-
-Renders SVG icons from a built-in registry, custom registry, or external URL. Includes 40+ common icons out of the box.
-
-## Basic Usage
-
-```typescript
-import 'snice/components/icon/snice-icon';
-```
-
-```html
-<snice-icon name="check"></snice-icon>
-```
-
-## Importing
-
-**ESM (bundler)**
-```typescript
-import 'snice/components/icon/snice-icon';
-```
-
-**CDN**
-```html
-<script src="snice-runtime.min.js"></script>
-<script src="snice-icon.min.js"></script>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `name` | `string` | `''` | Icon name from registry |
-| `src` | `string` | `''` | URL to external SVG file |
-| `size` | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Icon size (16/24/32px or custom) |
-| `color` | `string` | `''` | Icon color (defaults to currentColor) |
-| `label` | `string` | `''` | Accessibility label |
-
-## Methods
-
-#### `static registerIcon(name: string, svg: string): void`
-Register a single custom icon.
-
-```typescript
-import { SniceIcon } from 'snice/components/icon/snice-icon';
-SniceIcon.registerIcon('custom', '<svg viewBox="0 0 24 24"><path d="..."/></svg>');
-```
-
-#### `static registerIcons(icons: Record<string, string>): void`
-Register multiple custom icons at once.
-
-```typescript
-SniceIcon.registerIcons({
-  'icon-a': '<svg viewBox="0 0 24 24">...</svg>',
-  'icon-b': '<svg viewBox="0 0 24 24">...</svg>'
-});
-```
-
-#### `static getIcon(name: string): string | undefined`
-Get the SVG string for a registered icon.
-
-#### `static getRegisteredNames(): string[]`
-Get an array of all available icon names.
-
-## Examples
-
-### Built-in Icons
-
-Use the `name` attribute to display any built-in icon.
-
-```html
-<snice-icon name="check"></snice-icon>
-<snice-icon name="close"></snice-icon>
-<snice-icon name="search"></snice-icon>
-<snice-icon name="menu"></snice-icon>
-<snice-icon name="home"></snice-icon>
-<snice-icon name="settings"></snice-icon>
-```
-
-### Sizes
-
-Use the `size` attribute to change the icon size. Accepts preset names or pixel values.
-
-```html
-<snice-icon name="star" size="small"></snice-icon>
-<snice-icon name="star" size="medium"></snice-icon>
-<snice-icon name="star" size="large"></snice-icon>
-<snice-icon name="star" size="48"></snice-icon>
-```
-
-### Colors
-
-Use the `color` attribute to set the icon color.
-
-```html
-<snice-icon name="heart" color="rgb(220 38 38)"></snice-icon>
-<snice-icon name="check" color="rgb(22 163 74)"></snice-icon>
-<snice-icon name="star" color="rgb(234 179 8)"></snice-icon>
-```
-
-### External SVG
-
-Use the `src` attribute to load an SVG from a URL.
-
-```html
-<snice-icon src="/icons/custom.svg"></snice-icon>
-<snice-icon src="https://example.com/icon.svg"></snice-icon>
-```
-
-### Accessibility
-
-Set the `label` attribute for meaningful icons. Decorative icons are automatically hidden from screen readers.
-
-```html
-<!-- Meaningful icon with label -->
-<snice-icon name="close" label="Close dialog"></snice-icon>
-
-<!-- Decorative icon (aria-hidden by default) -->
-<snice-icon name="star"></snice-icon>
-```
-
-### Custom Icon Registration
-
-```typescript
-import { SniceIcon } from 'snice/components/icon/snice-icon';
-
-// Register single icon
-SniceIcon.registerIcon('thumbs-up', '<svg viewBox="0 0 24 24"><path d="..."/></svg>');
-
-// Register multiple icons
-SniceIcon.registerIcons({
-  'brand-logo': '<svg viewBox="0 0 24 24">...</svg>',
-  'custom-arrow': '<svg viewBox="0 0 24 24">...</svg>'
-});
-
-// Use in HTML
-// <snice-icon name="thumbs-up"></snice-icon>
-```
-
-## Built-in Icon Reference
-
-| Name | Description |
-|------|-------------|
-| `arrow-left`, `arrow-right`, `arrow-up`, `arrow-down` | Directional arrows |
-| `chevron-left`, `chevron-right`, `chevron-up`, `chevron-down` | Chevron arrows |
-| `check` | Checkmark |
-| `close` | X / close |
-| `search` | Magnifying glass |
-| `menu` | Hamburger menu |
-| `plus`, `minus` | Add / remove |
-| `info`, `warning`, `error`, `success` | Status indicators |
-| `home` | Home |
-| `settings` | Gear / settings |
-| `user` | User profile |
-| `edit` | Pencil / edit |
-| `delete` | Trash / delete |
-| `star`, `heart` | Favorites |
-| `mail`, `notification` | Communication |
-| `copy`, `download`, `upload` | Actions |
-| `link`, `external-link` | Links |
-| `eye`, `eye-off` | Visibility |
-| `filter`, `sort` | Data operations |
-| `refresh` | Refresh / reload |
-| `more-vertical`, `more-horizontal` | More options |
-| `calendar`, `clock` | Date / time |
-| `lock`, `unlock` | Security |
-
-## CSS Parts
-
-| Part | Description |
-|------|-------------|
-| `base` | The icon container div |
-
-```css
-snice-icon::part(base) {
-  padding: 4px;
-}
-```
-
-## Accessibility
-
-- Decorative icons (no `label`) have `aria-hidden="true"` and `role="presentation"`
-- Meaningful icons (with `label`) have `role="img"` and the label as `aria-label`
-- Use `label` for icons that convey meaning not available from surrounding text