morya-ui 0.1.1 → 0.2.2

package/dist/shared/nativeControlProps.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Common native control props promoted to the public component API (hybrid attrs pattern).
+ * Declare these on field/control components instead of relying on fallthrough.
+ */
+export interface MNativeInputProps {
+    /** Placeholder text shown when empty. */
+    placeholder?: string;
+    /** Native form field name. */
+    name?: string;
+    /** Autocomplete token (e.g. `email`, `username`). */
+    autocomplete?: string;
+    /** Focus the control when mounted. */
+    autofocus?: boolean;
+}
+export interface MNativeTextareaProps extends MNativeInputProps {
+    /** Visible row count when not autosizing. */
+    rows?: number;
+}
+/** Combobox-style fields (Select, TreeSelect, CascadeSelect). */
+export interface MNativeComboboxFieldProps {
+    /** Copy shown on the trigger when no value is selected. */
+    placeholder?: string;
+    /** Native form field name (bound to auxiliary native inputs when present). */
+    name?: string;
+}
+/** Decimal text inputs (InputNumber). */
+export type MNativeNumberInputProps = Pick<MNativeInputProps, 'name' | 'autofocus' | 'placeholder'>;
+/** Date picker readonly combobox input. */
+export type MNativeDateInputProps = Pick<MNativeInputProps, 'name' | 'autocomplete' | 'autofocus'>;
+/** Range slider thumb input(s). */
+export type MNativeRangeProps = Pick<MNativeInputProps, 'name' | 'autofocus'>;
+//# sourceMappingURL=nativeControlProps.d.ts.map

package/dist/shared/nativeControlProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeControlProps.d.ts","sourceRoot":"","sources":["../../src/shared/nativeControlProps.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iEAAiE;AACjE,MAAM,WAAW,yBAAyB;IACxC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,yCAAyC;AACzC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,CAAA;AAEnG,2CAA2C;AAC3C,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAA;AAElG,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,WAAW,CAAC,CAAA"}

package/dist/shared/passThrough.d.ts

@@ -0,0 +1,11 @@
+/** Attribute bag for a single DOM part (class/style/events/data-* / native attrs). */
+export type PassThroughPart = Record<string, unknown>;
+/** Generic pass-through map keyed by component DOM part name. */
+export type PassThroughOptions = Partial<Record<string, PassThroughPart>>;
+/** Field components: root field wrapper + native control. */
+export type FieldPassThrough = Partial<Record<'root' | 'label' | 'control' | 'input', PassThroughPart>>;
+/** Label-root controls: interactive root wraps a hidden native input. */
+export type ControlPassThrough = Partial<Record<'root' | 'input', PassThroughPart>>;
+/** Single-root containers and layout primitives. */
+export type RootPassThrough = Pick<ControlPassThrough, 'root'>;
+//# sourceMappingURL=passThrough.d.ts.map

package/dist/shared/passThrough.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passThrough.d.ts","sourceRoot":"","sources":["../../src/shared/passThrough.ts"],"names":[],"mappings":"AAAA,sFAAsF;AACtF,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAErD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAA;AAEzE,6DAA6D;AAC7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,EAAE,eAAe,CAAC,CAAC,CAAA;AAEvG,yEAAyE;AACzE,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,EAAE,eAAe,CAAC,CAAC,CAAA;AAEnF,oDAAoD;AACpD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA"}

package/dist/shared/styles/control-affix-icon.css

@@ -1,110 +1,110 @@
-/* Normalize inline icons inside compact control affordances (clear, toggle, chevrons). */
-.m-input__clear,
-.m-password__clear,
-.m-password__toggle,
-.m-textarea__clear,
-.m-select__clear,
-.m-select__indicator,
-.m-autocomplete__clear,
-.m-autocomplete__dropdown,
-.m-datepicker__clear,
-.m-datepicker__nav,
-.m-inputnumber__clear,
-.m-inputnumber__button,
-.m-inputtags__remove,
-.m-treeselect__clear,
-.m-treeselect__indicator,
-.m-cascadeselect__clear,
-.m-cascadeselect__indicator {
-    --m-affix-icon-size: 1rem;
-}
-
-.m-input-field__control:has(.m-input--small) .m-input__clear,
-.m-password--small .m-password__clear,
-.m-password--small .m-password__toggle,
-.m-textarea-field__control:has(.m-textarea--small) .m-textarea__clear,
-.m-select__control:has(.m-select--small) .m-select__clear,
-.m-select__control:has(.m-select--small) .m-select__indicator,
-.m-autocomplete--small .m-autocomplete__clear,
-.m-autocomplete--small .m-autocomplete__dropdown,
-.m-datepicker--small .m-datepicker__clear,
-.m-datepicker--small .m-datepicker__nav,
-.m-inputnumber--small .m-inputnumber__clear,
-.m-inputnumber--small .m-inputnumber__button,
-.m-select__control:has(.m-treeselect--small) .m-treeselect__clear,
-.m-select__control:has(.m-treeselect--small) .m-treeselect__indicator,
-.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__clear,
-.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__indicator {
-    --m-affix-icon-size: 0.875rem;
-}
-
-.m-input-field__control:has(.m-input--large) .m-input__clear,
-.m-password--large .m-password__clear,
-.m-password--large .m-password__toggle,
-.m-textarea-field__control:has(.m-textarea--large) .m-textarea__clear,
-.m-select__control:has(.m-select--large) .m-select__clear,
-.m-select__control:has(.m-select--large) .m-select__indicator,
-.m-autocomplete--large .m-autocomplete__clear,
-.m-autocomplete--large .m-autocomplete__dropdown,
-.m-datepicker--large .m-datepicker__clear,
-.m-datepicker--large .m-datepicker__nav,
-.m-inputnumber--large .m-inputnumber__clear,
-.m-inputnumber--large .m-inputnumber__button,
-.m-select__control:has(.m-treeselect--large) .m-treeselect__clear,
-.m-select__control:has(.m-treeselect--large) .m-treeselect__indicator,
-.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__clear,
-.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__indicator {
-    --m-affix-icon-size: 1.125rem;
-}
-
-.m-control-affix-icon,
-.m-input__clear,
-.m-password__clear,
-.m-password__toggle,
-.m-textarea__clear,
-.m-autocomplete__clear,
-.m-autocomplete__dropdown,
-.m-datepicker__clear,
-.m-datepicker__nav,
-.m-inputnumber__clear,
-.m-inputnumber__button,
-.m-inputtags__remove,
-.m-treeselect__clear,
-.m-treeselect__indicator,
-.m-cascadeselect__clear,
-.m-cascadeselect__indicator {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    line-height: 0;
-}
-
-.m-control-affix-icon {
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size, 1rem);
-    width: var(--m-affix-icon-size, 1rem);
-}
-
-.m-input__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-password__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-password__toggle :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-textarea__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-select__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-select__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-autocomplete__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-autocomplete__dropdown :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-datepicker__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-datepicker__nav :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputnumber__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputnumber__button :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputtags__remove :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-treeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-treeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-cascadeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-cascadeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-control-affix-icon :is(.m-icon, .m-control-affix-icon__graphic, svg) {
-    display: block;
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size, 1rem);
-    width: var(--m-affix-icon-size, 1rem);
-}
+/* Normalize inline icons inside compact control affordances (clear, toggle, chevrons). */
+.m-input__clear,
+.m-password__clear,
+.m-password__toggle,
+.m-textarea__clear,
+.m-select__clear,
+.m-select__indicator,
+.m-autocomplete__clear,
+.m-autocomplete__dropdown,
+.m-datepicker__clear,
+.m-datepicker__nav,
+.m-inputnumber__clear,
+.m-inputnumber__button,
+.m-inputtags__remove,
+.m-treeselect__clear,
+.m-treeselect__indicator,
+.m-cascadeselect__clear,
+.m-cascadeselect__indicator {
+    --m-affix-icon-size: 1rem;
+}
+
+.m-input-field__control:has(.m-input--small) .m-input__clear,
+.m-password--small .m-password__clear,
+.m-password--small .m-password__toggle,
+.m-textarea-field__control:has(.m-textarea--small) .m-textarea__clear,
+.m-select__control:has(.m-select--small) .m-select__clear,
+.m-select__control:has(.m-select--small) .m-select__indicator,
+.m-autocomplete--small .m-autocomplete__clear,
+.m-autocomplete--small .m-autocomplete__dropdown,
+.m-datepicker--small .m-datepicker__clear,
+.m-datepicker--small .m-datepicker__nav,
+.m-inputnumber--small .m-inputnumber__clear,
+.m-inputnumber--small .m-inputnumber__button,
+.m-select__control:has(.m-treeselect--small) .m-treeselect__clear,
+.m-select__control:has(.m-treeselect--small) .m-treeselect__indicator,
+.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__clear,
+.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__indicator {
+    --m-affix-icon-size: 0.875rem;
+}
+
+.m-input-field__control:has(.m-input--large) .m-input__clear,
+.m-password--large .m-password__clear,
+.m-password--large .m-password__toggle,
+.m-textarea-field__control:has(.m-textarea--large) .m-textarea__clear,
+.m-select__control:has(.m-select--large) .m-select__clear,
+.m-select__control:has(.m-select--large) .m-select__indicator,
+.m-autocomplete--large .m-autocomplete__clear,
+.m-autocomplete--large .m-autocomplete__dropdown,
+.m-datepicker--large .m-datepicker__clear,
+.m-datepicker--large .m-datepicker__nav,
+.m-inputnumber--large .m-inputnumber__clear,
+.m-inputnumber--large .m-inputnumber__button,
+.m-select__control:has(.m-treeselect--large) .m-treeselect__clear,
+.m-select__control:has(.m-treeselect--large) .m-treeselect__indicator,
+.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__clear,
+.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__indicator {
+    --m-affix-icon-size: 1.125rem;
+}
+
+.m-control-affix-icon,
+.m-input__clear,
+.m-password__clear,
+.m-password__toggle,
+.m-textarea__clear,
+.m-autocomplete__clear,
+.m-autocomplete__dropdown,
+.m-datepicker__clear,
+.m-datepicker__nav,
+.m-inputnumber__clear,
+.m-inputnumber__button,
+.m-inputtags__remove,
+.m-treeselect__clear,
+.m-treeselect__indicator,
+.m-cascadeselect__clear,
+.m-cascadeselect__indicator {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+}
+
+.m-control-affix-icon {
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size, 1rem);
+    width: var(--m-affix-icon-size, 1rem);
+}
+
+.m-input__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-password__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-password__toggle :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-textarea__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-select__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-select__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-autocomplete__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-autocomplete__dropdown :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-datepicker__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-datepicker__nav :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputnumber__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputnumber__button :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputtags__remove :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-treeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-treeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-cascadeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-cascadeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-control-affix-icon :is(.m-icon, .m-control-affix-icon__graphic, svg) {
+    display: block;
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size, 1rem);
+    width: var(--m-affix-icon-size, 1rem);
+}

package/dist/shared/styles/control-suffix.css

@@ -1,107 +1,107 @@
-/* Shared picker suffix slot: clear + dropdown indicator (Select, TreeSelect). */
-.m-select__control {
-    --m-control-end-padding: var(--m-control-affix-padding);
-    position: relative;
-    width: 100%;
-}
-
-.m-select__suffix {
-    align-items: center;
-    display: block;
-    height: var(--m-control-affix-size);
-    pointer-events: none;
-    position: absolute;
-    right: var(--m-space-1);
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--m-control-affix-size);
-}
-
-.m-select__clear {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text-muted);
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    inset: 0;
-    justify-content: center;
-    opacity: 0;
-    padding: 0;
-    pointer-events: none;
-    position: absolute;
-    transition: opacity var(--m-motion-fast) var(--m-motion-ease);
-    width: 100%;
-    z-index: 1;
-}
-
-.m-select__control--clearable:not(.m-select__control--open):hover .m-select__clear,
-.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.m-select__clear:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-select__indicator {
-    align-items: center;
-    color: var(--m-color-text-muted);
-    display: flex;
-    height: 100%;
-    inset: 0;
-    justify-content: center;
-    pointer-events: none;
-    position: absolute;
-    transition:
-        opacity var(--m-motion-fast) var(--m-motion-ease),
-        transform var(--m-motion-fast) var(--m-motion-ease);
-    width: 100%;
-}
-
-.m-select__control--clearable:not(.m-select__control--open):hover .m-select__indicator,
-.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible ~ .m-select__indicator {
-    opacity: 0;
-}
-
-.m-select__indicator--open {
-    transform: rotate(180deg);
-}
-
-.m-select__suffix {
-    --m-affix-icon-size: 1rem;
-}
-
-.m-select__control:has(.m-select--small) .m-select__suffix,
-.m-select__control:has(.m-select--sm) .m-select__suffix,
-.m-select__control:has(.m-treeselect--small) .m-select__suffix,
-.m-select__control:has(.m-cascadeselect--small) .m-select__suffix {
-    --m-affix-icon-size: 0.875rem;
-}
-
-.m-select__control:has(.m-select--large) .m-select__suffix,
-.m-select__control:has(.m-select--lg) .m-select__suffix,
-.m-select__control:has(.m-treeselect--large) .m-select__suffix,
-.m-select__control:has(.m-cascadeselect--large) .m-select__suffix {
-    --m-affix-icon-size: 1.125rem;
-}
-
-.m-select__suffix .m-select__clear .m-icon,
-.m-select__suffix .m-select__indicator .m-icon,
-.m-select__suffix .m-control-affix-icon {
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size);
-    width: var(--m-affix-icon-size);
-}
-
-.m-select__suffix .m-select__clear .m-icon svg,
-.m-select__suffix .m-select__indicator .m-icon svg,
-.m-select__suffix .m-control-affix-icon svg {
-    display: block;
-    height: 100%;
-    width: 100%;
-}
+/* Shared picker suffix slot: clear + dropdown indicator (Select, TreeSelect). */
+.m-select__control {
+    --m-control-end-padding: var(--m-control-affix-padding);
+    position: relative;
+    width: 100%;
+}
+
+.m-select__suffix {
+    align-items: center;
+    display: block;
+    height: var(--m-control-affix-size);
+    pointer-events: none;
+    position: absolute;
+    right: var(--m-space-1);
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--m-control-affix-size);
+}
+
+.m-select__clear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    inset: 0;
+    justify-content: center;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity var(--m-motion-fast) var(--m-motion-ease);
+    width: 100%;
+    z-index: 1;
+}
+
+.m-select__control--clearable:not(.m-select__control--open):hover .m-select__clear,
+.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.m-select__clear:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-select__indicator {
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: flex;
+    height: 100%;
+    inset: 0;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    transition:
+        opacity var(--m-motion-fast) var(--m-motion-ease),
+        transform var(--m-motion-fast) var(--m-motion-ease);
+    width: 100%;
+}
+
+.m-select__control--clearable:not(.m-select__control--open):hover .m-select__indicator,
+.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible ~ .m-select__indicator {
+    opacity: 0;
+}
+
+.m-select__indicator--open {
+    transform: rotate(180deg);
+}
+
+.m-select__suffix {
+    --m-affix-icon-size: 1rem;
+}
+
+.m-select__control:has(.m-select--small) .m-select__suffix,
+.m-select__control:has(.m-select--sm) .m-select__suffix,
+.m-select__control:has(.m-treeselect--small) .m-select__suffix,
+.m-select__control:has(.m-cascadeselect--small) .m-select__suffix {
+    --m-affix-icon-size: 0.875rem;
+}
+
+.m-select__control:has(.m-select--large) .m-select__suffix,
+.m-select__control:has(.m-select--lg) .m-select__suffix,
+.m-select__control:has(.m-treeselect--large) .m-select__suffix,
+.m-select__control:has(.m-cascadeselect--large) .m-select__suffix {
+    --m-affix-icon-size: 1.125rem;
+}
+
+.m-select__suffix .m-select__clear .m-icon,
+.m-select__suffix .m-select__indicator .m-icon,
+.m-select__suffix .m-control-affix-icon {
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size);
+    width: var(--m-affix-icon-size);
+}
+
+.m-select__suffix .m-select__clear .m-icon svg,
+.m-select__suffix .m-select__indicator .m-icon svg,
+.m-select__suffix .m-control-affix-icon svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}

package/dist/shared/useComponentAttrs.d.ts

@@ -0,0 +1,61 @@
+import { MaybeRefOrGetter, ComputedRef } from 'vue';
+import { PassThroughOptions, PassThroughPart } from './passThrough';
+type ClassValue = string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+type StyleValue = string | Record<string, string | number>;
+/** Merge class values the same way Vue merges `:class` bindings. */
+export declare function mergeClasses(...values: unknown[]): ClassValue | undefined;
+/** Shallow-merge style objects; later values win per key. */
+export declare function mergeStyles(...values: unknown[]): StyleValue | undefined;
+/** Merge pass-through parts; `class` and `style` are combined, other keys are overwritten. */
+export declare function mergePtPart(...parts: (PassThroughPart | undefined)[]): PassThroughPart;
+/** Layout-oriented keys that always merge onto the field root. */
+export declare function isRootLayoutKey(key: string): boolean;
+/** @deprecated Use {@link isRootLayoutKey}. */
+export declare function isRootFallthroughKey(key: string): boolean;
+/** Whether a fallthrough key is an event listener for the native control. */
+export declare function isControlEventKey(key: string, value: unknown): boolean;
+/**
+ * Hybrid field attrs split:
+ * - root: all fallthrough attrs except listeners bound to the native control
+ * - control: event listeners (`onXxx`) only
+ * - props / `pt.<part>`: attrs explicitly declared or targeted on inner DOM
+ */
+export declare function splitHybridFieldAttrs(attrs: Record<string, unknown>): {
+    rootPart: PassThroughPart;
+    controlPart: PassThroughPart;
+};
+/** @deprecated Use {@link splitHybridFieldAttrs} for field components. */
+export declare function splitRootControlAttrs(attrs: Record<string, unknown>): {
+    rootClass: unknown;
+    rootStyle: unknown;
+    controlAttrs: PassThroughPart;
+};
+export interface FieldPartsOptions {
+    /** Pass-through key for the native control (default: `input`). */
+    controlKey?: string;
+}
+/**
+ * Compound field components (hybrid pattern):
+ * - fallthrough attrs (except control events) → root
+ * - event listeners → native control
+ * - common native semantics → explicit props on the control
+ * - attrs for a specific inner part → `pt.<part>`
+ */
+export declare function useFieldParts<T extends PassThroughOptions = PassThroughOptions>(attrs: MaybeRefOrGetter<Record<string, unknown>>, pt?: MaybeRefOrGetter<T | undefined>, options?: FieldPartsOptions): {
+    rootAttrs: ComputedRef<PassThroughPart>;
+    controlAttrs: ComputedRef<PassThroughPart>;
+};
+/**
+ * Label-root controls (Checkbox, Radio, Switch): hybrid split with control key `input`.
+ * Promote `name` / `value` to props; use `pt.input` for other native attrs.
+ */
+export declare function useControlRootParts<T extends PassThroughOptions = PassThroughOptions>(attrs: MaybeRefOrGetter<Record<string, unknown>>, pt?: MaybeRefOrGetter<T | undefined>): {
+    rootAttrs: ComputedRef<PassThroughPart>;
+    controlAttrs: ComputedRef<PassThroughPart>;
+};
+/** Single-root components: all fallthrough attrs bind to the root element. */
+export declare function useRootParts<T extends PassThroughOptions = PassThroughOptions>(attrs: MaybeRefOrGetter<Record<string, unknown>>, pt?: MaybeRefOrGetter<T | undefined>): {
+    rootAttrs: ComputedRef<PassThroughPart>;
+};
+export {};
+//# sourceMappingURL=useComponentAttrs.d.ts.map

package/dist/shared/useComponentAttrs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentAttrs.d.ts","sourceRoot":"","sources":["../../src/shared/useComponentAttrs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAGxE,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAC5F,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAE1D,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,GAAG,SAAS,CAoBzE;AAED,6DAA6D;AAC7D,wBAAgB,WAAW,CAAC,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,GAAG,SAAS,CAaxE;AAED,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,GAAG,KAAK,EAAE,CAAC,eAAe,GAAG,SAAS,CAAC,EAAE,GAAG,eAAe,CAetF;AAED,kEAAkE;AAClE,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED,+CAA+C;AAC/C,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAEtE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;EAiBnE;AAED,0EAA0E;AAC1E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;EAOnE;AAED,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC7E,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAChD,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC,EACpC,OAAO,CAAC,EAAE,iBAAiB;;;EAgB5B;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EACnF,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAChD,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC;;;EAGrC;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAC5E,KAAK,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAChD,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC;;EAKrC"}