@mhmo91/schmancy 0.4.76 → 0.4.78

package/package.json

@@ -1,8 +1,259 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.4.76",
+	"version": "0.4.78",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
+	"exports": {
+		".": {
+			"types": "./types/src/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./mixins": {
+			"types": "./types/mixins/index.d.ts",
+			"default": "./dist/mixins/index.js"
+		},
+		"./mixins/*": {
+			"types": "./types/mixins/*.d.ts",
+			"default": "./dist/mixins/*.js"
+		},
+		"./ai/*": "./ai/*",
+		"./animated-text": {
+			"types": "./types/src/animated-text/index.d.ts",
+			"default": "./dist/animated-text.js"
+		},
+		"./area": {
+			"types": "./types/src/area/index.d.ts",
+			"default": "./dist/area.js"
+		},
+		"./autocomplete": {
+			"types": "./types/src/autocomplete/index.d.ts",
+			"default": "./dist/autocomplete.js"
+		},
+		"./badge": {
+			"types": "./types/src/badge/index.d.ts",
+			"default": "./dist/badge.js"
+		},
+		"./boat": {
+			"types": "./types/src/boat/index.d.ts",
+			"default": "./dist/boat.js"
+		},
+		"./busy": {
+			"types": "./types/src/busy/index.d.ts",
+			"default": "./dist/busy.js"
+		},
+		"./button": {
+			"types": "./types/src/button/index.d.ts",
+			"default": "./dist/button.js"
+		},
+		"./card": {
+			"types": "./types/src/card/index.d.ts",
+			"default": "./dist/card.js"
+		},
+		"./checkbox": {
+			"types": "./types/src/checkbox/index.d.ts",
+			"default": "./dist/checkbox.js"
+		},
+		"./chips": {
+			"types": "./types/src/chips/index.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/assist-chip": {
+			"types": "./types/src/chips/assist-chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/filter-chip": {
+			"types": "./types/src/chips/filter-chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/input-chip": {
+			"types": "./types/src/chips/input-chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/suggestion-chip": {
+			"types": "./types/src/chips/suggestion-chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/chip": {
+			"types": "./types/src/chips/chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/chips": {
+			"types": "./types/src/chips/chips.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./chips/base-chip": {
+			"types": "./types/src/chips/base-chip.d.ts",
+			"default": "./dist/chips.js"
+		},
+		"./code-highlight": {
+			"types": "./types/src/code-highlight/index.d.ts",
+			"default": "./dist/code-highlight.js"
+		},
+		"./components": {
+			"types": "./types/src/components/index.d.ts",
+			"default": "./dist/components.js"
+		},
+		"./content-drawer": {
+			"types": "./types/src/content-drawer/index.d.ts",
+			"default": "./dist/content-drawer.js"
+		},
+		"./date-range": {
+			"types": "./types/src/date-range/index.d.ts",
+			"default": "./dist/date-range.js"
+		},
+		"./date-range-inline": {
+			"types": "./types/src/date-range-inline/index.d.ts",
+			"default": "./dist/date-range-inline.js"
+		},
+		"./delay": {
+			"types": "./types/src/delay/index.d.ts",
+			"default": "./dist/delay.js"
+		},
+		"./details": {
+			"types": "./types/src/details/index.d.ts",
+			"default": "./dist/details.js"
+		},
+		"./dialog": {
+			"types": "./types/src/dialog/index.d.ts",
+			"default": "./dist/dialog.js"
+		},
+		"./directives": {
+			"types": "./types/src/directives/index.d.ts",
+			"default": "./dist/directives.js"
+		},
+		"./divider": {
+			"types": "./types/src/divider/index.d.ts",
+			"default": "./dist/divider.js"
+		},
+		"./dropdown": {
+			"types": "./types/src/dropdown/index.d.ts",
+			"default": "./dist/dropdown.js"
+		},
+		"./extra": {
+			"types": "./types/src/extra/index.d.ts",
+			"default": "./dist/extra.js"
+		},
+		"./form": {
+			"types": "./types/src/form/index.d.ts",
+			"default": "./dist/form.js"
+		},
+		"./icons": {
+			"types": "./types/src/icons/index.d.ts",
+			"default": "./dist/icons.js"
+		},
+		"./input": {
+			"types": "./types/src/input/index.d.ts",
+			"default": "./dist/input.js"
+		},
+		"./layout": {
+			"types": "./types/src/layout/index.d.ts",
+			"default": "./dist/layout.js"
+		},
+		"./list": {
+			"types": "./types/src/list/index.d.ts",
+			"default": "./dist/list.js"
+		},
+		"./mailbox": {
+			"types": "./types/src/mailbox/index.d.ts",
+			"default": "./dist/mailbox.js"
+		},
+		"./map": {
+			"types": "./types/src/map/index.d.ts",
+			"default": "./dist/map.js"
+		},
+		"./menu": {
+			"types": "./types/src/menu/index.d.ts",
+			"default": "./dist/menu.js"
+		},
+		"./nav-drawer": {
+			"types": "./types/src/nav-drawer/index.d.ts",
+			"default": "./dist/nav-drawer.js"
+		},
+		"./notification": {
+			"types": "./types/src/notification/index.d.ts",
+			"default": "./dist/notification.js"
+		},
+		"./option": {
+			"types": "./types/src/option/index.d.ts",
+			"default": "./dist/option.js"
+		},
+		"./progress": {
+			"types": "./types/src/progress/index.d.ts",
+			"default": "./dist/progress.js"
+		},
+		"./radio-group": {
+			"types": "./types/src/radio-group/index.d.ts",
+			"default": "./dist/radio-group.js"
+		},
+		"./rxjs-utils": {
+			"types": "./types/src/rxjs-utils/index.d.ts",
+			"default": "./dist/rxjs-utils.js"
+		},
+		"./select": {
+			"types": "./types/src/select/index.d.ts",
+			"default": "./dist/select.js"
+		},
+		"./sheet": {
+			"types": "./types/src/sheet/index.d.ts",
+			"default": "./dist/sheet.js"
+		},
+		"./slider": {
+			"types": "./types/src/slider/index.d.ts",
+			"default": "./dist/slider.js"
+		},
+		"./steps": {
+			"types": "./types/src/steps/index.d.ts",
+			"default": "./dist/steps.js"
+		},
+		"./store": {
+			"types": "./types/src/store/index.d.ts",
+			"default": "./dist/store.js"
+		},
+		"./surface": {
+			"types": "./types/src/surface/index.d.ts",
+			"default": "./dist/surface.js"
+		},
+		"./table": {
+			"types": "./types/src/table/index.d.ts",
+			"default": "./dist/table.js"
+		},
+		"./tabs": {
+			"types": "./types/src/tabs/index.d.ts",
+			"default": "./dist/tabs.js"
+		},
+		"./teleport": {
+			"types": "./types/src/teleport/index.d.ts",
+			"default": "./dist/teleport.js"
+		},
+		"./textarea": {
+			"types": "./types/src/textarea/index.d.ts",
+			"default": "./dist/textarea.js"
+		},
+		"./theme": {
+			"types": "./types/src/theme/index.d.ts",
+			"default": "./dist/theme.js"
+		},
+		"./theme-button": {
+			"types": "./types/src/theme-button/index.d.ts",
+			"default": "./dist/theme-button.js"
+		},
+		"./tooltip": {
+			"types": "./types/src/tooltip/index.d.ts",
+			"default": "./dist/tooltip.js"
+		},
+		"./tree": {
+			"types": "./types/src/tree/index.d.ts",
+			"default": "./dist/tree.js"
+		},
+		"./types": {
+			"types": "./types/src/types/index.d.ts",
+			"default": "./dist/types.js"
+		},
+		"./typography": {
+			"types": "./types/src/typography/index.d.ts",
+			"default": "./dist/typography.js"
+		}
+	},
 	"packageManager": "yarn@4.9.2",
 	"repository": {
 		"type": "git",

package/types/mixins/index.d.ts

@@ -1,5 +1,5 @@
 export * from './baseElement';
 export * from './constructor';
+export * from './formField.mixin';
 export * from './litElement.mixin';
 export * from './tailwind.mixin';
-export * from './formField.mixin';

package/types/src/area/route.component.d.ts

@@ -1,9 +1,15 @@
+import { TemplateResult } from 'lit';
 export type GuardResult = boolean | string | {
     redirect: string;
 };
+export type RouteComponent = string | CustomElementConstructor | HTMLElement | TemplateResult<1> | (() => Promise<{
+    default: CustomElementConstructor;
+}>) | Promise<{
+    default: CustomElementConstructor;
+}>;
 export interface RouteConfig {
     when: string;
-    component: any;
+    component: RouteComponent;
     exact?: boolean;
     guard?: () => GuardResult | Promise<GuardResult>;
 }
@@ -26,14 +32,14 @@ declare const SchmancyRoute_base: CustomElementConstructor & import("@mixins/ind
  */
 export declare class SchmancyRoute extends SchmancyRoute_base {
     when: string;
-    component: any;
+    component: RouteComponent;
     exact?: boolean;
     guard?: () => GuardResult | Promise<GuardResult>;
     /**
      * Returns the route configuration object
      */
     getConfig(): RouteConfig;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/types/src/busy/spinner.d.ts

@@ -1,6 +1,6 @@
 declare const SchmnacySpinner_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmnacySpinner extends SchmnacySpinner_base {
-    color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' | 'surface' | 'surface-variant';
+    color?: 'primary' | 'on-primary' | 'secondary' | 'on-secondary' | 'tertiary' | 'on-tertiary' | 'error' | 'on-error' | 'success' | 'on-success' | 'surface' | 'on-surface' | 'surface-variant' | 'on-surface-variant';
     size: number;
     glass: boolean;
     protected render(): unknown;

package/types/src/checkbox/checkbox.d.ts

@@ -3,13 +3,13 @@ import { LitElement } from 'lit';
 export type schmancyCheckBoxChangeEvent = CustomEvent<{
     value: boolean;
 }>;
-declare const SchmancyCheckbox_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const SchmancyCheckboxElement_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 /**
  * @element schmancy-checkbox
  * @slot - The label for the checkbox.
  * @fires valueChange - Event fired when the checkbox value changes.
  **/
-export declare class SchmancyCheckbox extends SchmancyCheckbox_base {
+declare class SchmancyCheckboxElement extends SchmancyCheckboxElement_base {
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -48,15 +48,16 @@ export declare class SchmancyCheckbox extends SchmancyCheckbox_base {
      * @attr {string} label - The label text for the checkbox.
      */
     label?: string;
+    connectedCallback(): void;
     /**
      * @attr {sm | md | lg } size - The size of the checkbox.
      */
     size: 'sm' | 'md' | 'lg';
     render(): import("lit-html").TemplateResult<1>;
 }
+export { SchmancyCheckboxElement as SchmancyCheckbox };
 declare global {
     interface HTMLElementTagNameMap {
-        'schmancy-checkbox': SchmancyCheckbox;
+        'schmancy-checkbox': SchmancyCheckboxElement;
     }
 }
-export {};

package/types/src/chips/assist-chip.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+declare const SchmancyAssistChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+/**
+ * Assist chip component - prompts user actions like opening calendar events or sharing content
+ * Pure Schmancy implementation with Tailwind CSS and RxJS state management
+ */
+export declare class SchmancyAssistChip extends SchmancyAssistChip_base {
+    /** Value identifier for the chip */
+    value: string;
+    /** Optional icon name (Material Symbols) */
+    icon: string;
+    /** Optional href for navigation */
+    href: string;
+    /** Target for navigation (e.g., '_blank') */
+    target: string;
+    /** Disable the chip */
+    disabled: boolean;
+    /** Elevated style variant */
+    elevated: boolean;
+    private hover$;
+    private pressed$;
+    private focused$;
+    private ripples;
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private nextRippleId;
+    connectedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-assist-chip': SchmancyAssistChip;
+    }
+}
+export type AssistChipActionEvent = {
+    value: string;
+};
+export {};

package/types/src/chips/chip.d.ts

@@ -1,32 +1,3 @@
-import '@material/web/chips/chip-set.js';
-import '@material/web/chips/filter-chip.js';
-import { LitElement } from 'lit';
-declare const SchmancyChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
-export default class SchmancyChip extends SchmancyChip_base {
-    value: string;
-    selected: boolean;
-    icon: string;
-    readOnly: boolean;
-    disabled: boolean;
-    constructor();
-    protected static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static formAssociated: boolean;
-    internals: ElementInternals | undefined;
-    get form(): HTMLFormElement;
-    protected render(): unknown;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'schmancy-chip': SchmancyChip;
-    }
-}
-export type SchmancyChipChangeEvent = {
-    value: string;
-    selected: boolean;
-};
-export {};
+// This file re-exports types from filter-chip since schmancy-chip is now an alias
+export { SchmancyFilterChip as default, SchmancyFilterChip as SchmancyChip } from './filter-chip';
+export type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';

package/types/src/chips/chips.d.ts

@@ -1,20 +1,35 @@
-import '@material/web/chips/chip-set.js';
-import '@material/web/chips/filter-chip.js';
-import { ChipSet } from '@material/web/chips/internal/chip-set';
 import { PropertyValues } from 'lit';
-import SchmancyChip, { SchmancyChipChangeEvent } from './chip';
+import { SchmancyFilterChip as SchmancyChip } from './filter-chip';
+import type { FilterChipChangeEvent as SchmancyChipChangeEvent } from './filter-chip';
 declare const SchmancyChips_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export default class SchmancyChips extends SchmancyChips_base {
-    chipSet: ChipSet;
-    multi: boolean;
-    values: string[];
-    value: string;
-    chips: SchmancyChip[];
+    private value$;
+    private values$;
+    private _value;
+    private _values;
+    private _multi;
+    private _valueSet;
+    private _valuesSet;
+    /**
+     * @deprecated Use .values for multi-selection or .value for single-selection instead.
+     * The mode is now automatically determined based on which property is used.
+     */
+    get multi(): boolean;
+    set multi(value: boolean);
+    /**
+     * Automatically determines the selection mode based on which properties are in use
+     */
+    private get mode();
+    get values(): string[];
+    set values(value: string[]);
+    get value(): string;
+    set value(value: string);
+    chips: (SchmancyChip | HTMLElement)[];
     wrap: boolean;
+    connectedCallback(): void;
+    private updateChipStates;
     change(e: CustomEvent<SchmancyChipChangeEvent>): Promise<void>;
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, old: string, value: string): void;
-    hydrateTabs(): void;
     protected render(): unknown;
 }
 declare global {

package/types/src/chips/filter-chip.d.ts

@@ -0,0 +1,73 @@
+import { LitElement } from 'lit';
+declare const SchmancyFilterChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+/**
+ * Filter chip component for content filtering.
+ *
+ * Filter chips are the ONLY chip type that maintains persistent selected state.
+ * They are used for filtering content by toggling on/off different filter criteria.
+ *
+ * @fires change - Dispatched when selection state changes with {value, selected}
+ * @fires remove - Dispatched when remove button is clicked (if removable)
+ *
+ * @example
+ * ```html
+ * <schmancy-filter-chip value="category-1" selected>
+ *   Category 1
+ * </schmancy-filter-chip>
+ * ```
+ */
+export declare class SchmancyFilterChip extends SchmancyFilterChip_base {
+    /** Unique identifier for this filter chip */
+    value: string;
+    /** Whether the filter chip is selected (active filter) */
+    private _selected;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /** Optional icon to display (Material Symbols name) */
+    icon: string;
+    /** Whether to show a remove button */
+    removable: boolean;
+    /** Whether the chip is disabled */
+    disabled: boolean;
+    /** Whether to use elevated style with shadow */
+    elevated: boolean;
+    private hover$;
+    private pressed$;
+    private focused$;
+    constructor();
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static formAssociated: boolean;
+    internals: ElementInternals | undefined;
+    get form(): HTMLFormElement;
+    connectedCallback(): void;
+    private handleClick;
+    private handleRemove;
+    private handleKeyDown;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleMouseDown;
+    private handleMouseUp;
+    private handleFocus;
+    private handleBlur;
+    protected render(): unknown;
+}
+export { SchmancyFilterChip as SchmancyChip };
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-chip': SchmancyFilterChip;
+        'schmancy-filter-chip': SchmancyFilterChip;
+    }
+}
+export type FilterChipChangeEvent = {
+    value: string;
+    selected: boolean;
+};
+export type FilterChipRemoveEvent = {
+    value: string;
+};
+export type SchmancyChipChangeEvent = FilterChipChangeEvent;

package/types/src/chips/index.d.ts

@@ -1,2 +1,11 @@
-export * from './chip';
-export * from './chips';
+export { SchmancyChip } from './filter-chip';
+export type { SchmancyChipChangeEvent } from './filter-chip';
+export { SchmancyAssistChip } from './assist-chip';
+export type { AssistChipActionEvent } from './assist-chip';
+export { SchmancyFilterChip } from './filter-chip';
+export type { FilterChipChangeEvent, FilterChipRemoveEvent } from './filter-chip';
+export { SchmancyInputChip } from './input-chip';
+export type { InputChipClickEvent, InputChipRemoveEvent } from './input-chip';
+export { SchmancySuggestionChip } from './suggestion-chip';
+export type { SuggestionChipActionEvent } from './suggestion-chip';
+export { default as SchmancyChips } from './chips';

package/types/src/chips/input-chip.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+declare const SchmancyInputChip_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
+/**
+ * Input chip component - represents user-provided information that can be removed.
+ *
+ * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.
+ * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)
+ * that can only be removed, not toggled on/off.
+ *
+ * Use cases:
+ * - Displaying selected recipients in an email
+ * - Showing applied filters that can be removed
+ * - Tags or keywords entered by the user
+ * - Selected items from a multi-select dropdown
+ *
+ * @fires click - Optional click event on chip body (value)
+ * @fires remove - Dispatched when remove button is clicked (value)
+ *
+ * @example
+ * ```html
+ * <schmancy-input-chip value="john@example.com" avatar="/avatars/john.jpg">
+ *   John Doe
+ * </schmancy-input-chip>
+ * ```
+ */
+export declare class SchmancyInputChip extends SchmancyInputChip_base {
+    /** Value identifier for the chip */
+    value: string;
+    /** Optional icon name (Material Symbols) */
+    icon: string;
+    /** Optional avatar image URL */
+    avatar: string;
+    /** Whether to show remove button (default true for input chips) */
+    removable: boolean;
+    /** Disable the chip */
+    disabled: boolean;
+    /** Elevated style variant */
+    elevated: boolean;
+    private chipHover$;
+    private removeHover$;
+    private focused$;
+    private pressed$;
+    private uiState;
+    private ripples;
+    private nextRippleId;
+    constructor();
+    protected static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static formAssociated: boolean;
+    internals: ElementInternals | undefined;
+    get form(): HTMLFormElement;
+    connectedCallback(): void;
+    private handleChipClick;
+    private handleRemove;
+    private handleKeyDown;
+    private handleFocus;
+    private handleBlur;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-input-chip': SchmancyInputChip;
+    }
+}
+export type InputChipClickEvent = {
+    value: string;
+};
+export type InputChipRemoveEvent = {
+    value: string;
+};
+export {};