@well-insight/ui 0.1.9 → 0.1.11

package/dist/components/Input/styles.css

@@ -1,191 +1,196 @@
-.wi-input:focus {
-    outline: none;
-}
-
-.wi-input:hover:not(:disabled):not(:focus) {
-    border-color: var(--wi-color-primary-hover);
-}
-
-.wi-input:focus-visible {
-    border-color: var(--wi-color-primary-hover);
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
-}
-
-.wi-input--invalid:focus-visible,
-.wi-input--error:focus-visible {
-    border-color: var(--wi-color-danger);
-    box-shadow: var(--wi-focus-shadow-danger);
-}
-
-.wi-input-field {
-    display: grid;
-    gap: var(--wi-space-2);
-}
-
-.wi-input-field--fluid {
-    width: 100%;
-}
-
-.wi-input-field__label {
-    color: var(--wi-color-text);
-    font-size: var(--wi-font-size-md);
-    font-weight: 600;
-}
-
-.wi-input-field__help {
-    color: var(--wi-color-text-muted);
-    font-size: var(--wi-font-size-xs);
-}
-
-.wi-input-field__help--error {
-    color: var(--wi-color-danger);
-}
-
-.wi-input-field__control {
-    position: relative;
-}
-
-.wi-input-field__control--prefixed,
-.wi-input-field__control--suffixed {
-    align-items: center;
-    display: flex;
-}
-
-.wi-input-field__control--prefixed .wi-input,
-.wi-input-field__control--suffixed .wi-input {
-    flex: 1 1 auto;
-    min-width: 0;
-}
-
-.wi-input__prefix,
-.wi-input__suffix {
-    align-items: center;
-    color: var(--wi-color-text-muted);
-    display: inline-flex;
-    flex: 0 0 auto;
-    font-size: var(--wi-font-size-md);
-    gap: var(--wi-space-1);
-    line-height: 1;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.wi-input__prefix {
-    left: var(--wi-control-padding-x-medium);
-}
-
-.wi-input__suffix {
-    right: var(--wi-control-padding-x-medium);
-}
-
-.wi-input-field__control--clearable .wi-input__suffix {
-    right: var(--wi-control-affix-gap);
-}
-
-.wi-input--has-prefix {
-    padding-left: var(--wi-control-affix-gap);
-}
-
-.wi-input--has-suffix {
-    padding-right: var(--wi-control-affix-gap);
-}
-
-.wi-input-field__control--clearable.wi-input-field__control--suffixed .wi-input--has-suffix {
-    padding-right: 4.25rem;
-}
-
-.wi-input__prefix button,
-.wi-input__suffix button,
-.wi-input__prefix a,
-.wi-input__suffix a {
-    pointer-events: auto;
-}
-
-.wi-input {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-control);
-    color: var(--wi-color-text);
-    font-size: var(--wi-control-font-medium);
-    min-height: var(--wi-control-height-medium);
-    padding: 0 var(--wi-control-padding-x-medium);
-    transition:
-        border-color var(--wi-motion-fast) var(--wi-motion-ease),
-        box-shadow var(--wi-motion-fast) var(--wi-motion-ease),
-        background-color var(--wi-motion-fast) var(--wi-motion-ease);
-}
-
-.wi-input--filled {
-    background: color-mix(in srgb, var(--wi-color-text-muted) 12%, var(--wi-color-surface));
-    border-color: transparent;
-}
-
-.wi-input--fluid {
-    width: 100%;
-}
-
-.wi-input--invalid,
-.wi-input--error {
-    border-color: var(--wi-color-danger);
-}
-
-.wi-input--small,
-.wi-input--sm {
-    font-size: var(--wi-control-font-small);
-    min-height: var(--wi-control-height-small);
-    padding: 0 var(--wi-control-padding-x-small);
-}
-
-.wi-input--normal {
-    font-size: var(--wi-control-font-medium);
-    min-height: var(--wi-control-height-medium);
-    padding: 0 var(--wi-control-padding-x-medium);
-}
-
-.wi-input--large,
-.wi-input--lg {
-    font-size: var(--wi-control-font-large);
-    min-height: var(--wi-control-height-large);
-    padding: 0 var(--wi-control-padding-x-large);
-}
-
-.wi-input-field__control .wi-input {
-    width: 100%;
-}
-
-.wi-input-field__control:has(.wi-input__clear) .wi-input {
-    padding-right: var(--wi-control-affix-padding);
-}
-
-.wi-input__clear {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--wi-radius-sm);
-    color: var(--wi-color-text-muted);
-    cursor: pointer;
-    display: flex;
-    font-size: var(--wi-font-size-lg);
-    height: var(--wi-control-affix-size);
-    justify-content: center;
-    padding: 0;
-    position: absolute;
-    right: var(--wi-space-1);
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--wi-control-affix-size);
-}
-
-.wi-input__clear:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
-}
-
-.wi-input__clear:disabled {
-    cursor: not-allowed;
-    opacity: var(--wi-opacity-disabled);
-}
+.wi-input:focus {
+    outline: none;
+}
+
+.wi-input:hover:not(:disabled):not(:focus) {
+    border-color: var(--wi-color-primary-hover);
+}
+
+.wi-input:focus-visible {
+    border-color: var(--wi-color-primary-hover);
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-input--invalid:focus-visible {
+    border-color: var(--wi-color-danger);
+    box-shadow: var(--wi-focus-shadow-danger);
+}
+
+.wi-input-field {
+    display: grid;
+    gap: var(--wi-space-2);
+}
+
+.wi-input-field--fluid {
+    width: 100%;
+}
+
+.wi-input-field__label {
+    color: var(--wi-color-text);
+    font-size: var(--wi-font-size-md);
+    font-weight: 600;
+}
+
+.wi-input-field__help {
+    color: var(--wi-color-text-muted);
+    font-size: var(--wi-font-size-xs);
+}
+
+.wi-input-field__help--invalid {
+    color: var(--wi-color-danger);
+}
+
+.wi-input-field__control {
+    position: relative;
+}
+
+.wi-input-field__control--prefixed,
+.wi-input-field__control--suffixed {
+    align-items: center;
+    display: flex;
+}
+
+.wi-input-field__control--prefixed .wi-input,
+.wi-input-field__control--suffixed .wi-input {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.wi-input__prefix,
+.wi-input__suffix {
+    align-items: center;
+    color: var(--wi-color-text-muted);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--wi-font-size-md);
+    gap: var(--wi-space-1);
+    line-height: 1;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+
+.wi-input__prefix {
+    left: var(--wi-control-padding-x-medium);
+}
+
+.wi-input__suffix {
+    right: var(--wi-control-padding-x-medium);
+}
+
+.wi-input-field__control--clearable .wi-input__suffix {
+    right: var(--wi-control-affix-gap);
+}
+
+.wi-input--has-prefix {
+    padding-left: var(--wi-control-affix-gap);
+}
+
+.wi-input--has-suffix {
+    padding-right: var(--wi-control-affix-gap);
+}
+
+.wi-input-field__control--clearable.wi-input-field__control--suffixed
+    .wi-input--has-suffix {
+    padding-right: calc(
+        var(--wi-control-affix-padding) + var(--wi-control-affix-gap)
+    );
+}
+
+.wi-input__prefix button,
+.wi-input__suffix button,
+.wi-input__prefix a,
+.wi-input__suffix a {
+    pointer-events: auto;
+}
+
+.wi-input {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-control);
+    color: var(--wi-color-text);
+    font-size: var(--wi-control-font-medium);
+    min-height: var(--wi-control-height-medium);
+    padding: 0 var(--wi-control-padding-x-medium);
+    transition:
+        border-color var(--wi-motion-fast) var(--wi-motion-ease),
+        box-shadow var(--wi-motion-fast) var(--wi-motion-ease),
+        background-color var(--wi-motion-fast) var(--wi-motion-ease);
+}
+
+.wi-input--filled {
+    background: color-mix(
+        in srgb,
+        var(--wi-color-text-muted) 12%,
+        var(--wi-color-surface)
+    );
+    border-color: transparent;
+}
+
+.wi-input--fluid {
+    width: 100%;
+}
+
+.wi-input--invalid {
+    border-color: var(--wi-color-danger);
+}
+
+.wi-input--small,
+.wi-input--sm {
+    font-size: var(--wi-control-font-small);
+    min-height: var(--wi-control-height-small);
+    padding: 0 var(--wi-control-padding-x-small);
+}
+
+.wi-input--normal {
+    font-size: var(--wi-control-font-medium);
+    min-height: var(--wi-control-height-medium);
+    padding: 0 var(--wi-control-padding-x-medium);
+}
+
+.wi-input--large,
+.wi-input--lg {
+    font-size: var(--wi-control-font-large);
+    min-height: var(--wi-control-height-large);
+    padding: 0 var(--wi-control-padding-x-large);
+}
+
+.wi-input-field__control .wi-input {
+    width: 100%;
+}
+
+.wi-input-field__control:has(.wi-input__clear) .wi-input {
+    padding-right: var(--wi-control-affix-padding);
+}
+
+.wi-input__clear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wi-radius-sm);
+    color: var(--wi-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    font-size: var(--wi-font-size-lg);
+    height: var(--wi-control-affix-size);
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: var(--wi-space-1);
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--wi-control-affix-size);
+}
+
+.wi-input__clear:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-input__clear:disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}

package/dist/components/Input/types.d.ts

@@ -3,10 +3,8 @@ export interface InputProps {
     modelValue?: string;
     label?: string;
     helpText?: string;
-    /** Prefer over `error`. Marks the field invalid. */
+    /** Marks the field invalid. */
     invalid?: boolean;
-    /** @deprecated Prefer `invalid`. */
-    error?: boolean;
     /** Error copy under the field; implies invalid when set. */
     errorMessage?: string;
     id?: string;

package/dist/components/Input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErE,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;IAC/D,iEAAiE;IACjE,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACjD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAErE,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;IAC/D,iEAAiE;IACjE,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,wBAAwB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACjD,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB"}

package/dist/components/InputColor/InputColor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputColor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/InputColor.vue"],"names":[],"mappings":";AA6EA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAwH9C,QAAA,MAAM,YAAY;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InputColor.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputColor/InputColor.vue"],"names":[],"mappings":";AA2EA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA0H9C,QAAA,MAAM,YAAY;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/InputColor/styles.css

@@ -1,65 +1,67 @@
-/* —— Form: InputColor —— */
-.wi-inputcolor {
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--wi-space-2);
+/* —— Form: InputColor —— */
+.wi-inputcolor {
+    --wi-inputcolor-text-min-width: 7rem;
+    --wi-inputcolor-preset-size: 1.25rem;
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--wi-space-2);
 }
 
-.wi-inputcolor--disabled {
-    opacity: var(--wi-opacity-disabled);
+.wi-inputcolor--disabled {
+    opacity: var(--wi-opacity-disabled);
 }
 
-.wi-inputcolor__swatch {
-    background: transparent;
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-control);
-    cursor: pointer;
-    height: var(--wi-control-height-medium);
-    padding: 0;
-    width: var(--wi-control-height-medium);
+.wi-inputcolor__swatch {
+    background: transparent;
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-control);
+    cursor: pointer;
+    height: var(--wi-control-height-medium);
+    padding: 0;
+    width: var(--wi-control-height-medium);
 }
 
-.wi-inputcolor__text {
-    background: var(--wi-color-surface);
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-control);
-    color: var(--wi-color-text);
-    font: inherit;
-    font-size: var(--wi-control-font-medium);
-    min-height: var(--wi-control-height-medium);
-    min-width: 7rem;
-    padding: 0 var(--wi-control-padding-x-medium);
+.wi-inputcolor__text {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-control);
+    color: var(--wi-color-text);
+    font: inherit;
+    font-size: var(--wi-control-font-medium);
+    min-height: var(--wi-control-height-medium);
+    min-width: var(--wi-inputcolor-text-min-width);
+    padding: 0 var(--wi-control-padding-x-medium);
 }
 
-.wi-inputcolor__text:focus-visible,
-.wi-inputcolor__swatch:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
+.wi-inputcolor__text:focus-visible,
+.wi-inputcolor__swatch:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
 }
 
-.wi-inputcolor__row {
-    align-items: center;
-    display: flex;
-    gap: var(--wi-space-2);
+.wi-inputcolor__row {
+    align-items: center;
+    display: flex;
+    gap: var(--wi-space-2);
 }
 
-.wi-inputcolor__swatches {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--wi-space-1);
-    margin-top: var(--wi-space-2);
+.wi-inputcolor__swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wi-space-1);
+    margin-top: var(--wi-space-2);
 }
 
-.wi-inputcolor__preset {
-    border: 1px solid var(--wi-color-border);
-    border-radius: var(--wi-radius-sm);
-    cursor: pointer;
-    height: 1.25rem;
-    padding: 0;
-    width: 1.25rem;
+.wi-inputcolor__preset {
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-sm);
+    cursor: pointer;
+    height: var(--wi-inputcolor-preset-size);
+    padding: 0;
+    width: var(--wi-inputcolor-preset-size);
 }
 
-.wi-inputcolor__preset:focus-visible {
-    box-shadow: var(--wi-focus-shadow);
-    outline: none;
+.wi-inputcolor__preset:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
 }

package/dist/components/InputNumber/InputNumber.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.vue"],"names":[],"mappings":";AAuJA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AA4N/C,QAAA,MAAM,YAAY;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"InputNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.vue"],"names":[],"mappings":";AAoJA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAiR/C,QAAA,MAAM,YAAY;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}