nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -3,13 +3,7 @@ import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition.vue.js';
 import type { DialogModel } from '../types.js';
-export interface DialogRootProps extends BoxProps {
-    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
-    closeOnClickOutside?: boolean;
-    /** If set, the component is rendered inside `Portal` @default `true` */
-    withinPortal?: boolean;
-    /** If set, the component is rendered with `Overlay` @default `true` */
-    withoutOverlay?: boolean;
+interface StyleProps {
     /** Top/bottom modal offset @default `5dvh` */
     yOffset?: CSSProperties['marginTop'];
     /** Left/right modal offset @default `5vw` */
@@ -22,10 +16,18 @@ export interface DialogRootProps extends BoxProps {
     shadow?: NuanceShadow;
     /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default `'md'` */
     padding?: NuanceSpacing;
-    /** Passes a class to root element */
-    rootClass?: string;
     /** Animation on hide/show */
     transition?: TransitionName;
+}
+export interface DialogRootProps extends BoxProps, StyleProps {
+    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
+    closeOnClickOutside?: boolean;
+    /** If set, the component is rendered inside `Portal` @default `true` */
+    withinPortal?: boolean;
+    /** If set, the component is rendered with `Overlay` @default `true` */
+    withoutOverlay?: boolean;
+    /** Passes a class to root element */
+    rootClass?: string;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;
 }

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -25,17 +25,17 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  rootClass: { type: String, required: false },
+  portalTarget: { type: [String, Object, null], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   yOffset: { type: void 0, required: false },
   xOffset: { type: void 0, required: false },
   radius: { type: [String, Number], required: false },
   size: { type: String, required: false },
   shadow: { type: String, required: false },
   padding: { type: [String, Number], required: false },
-  rootClass: { type: String, required: false },
-  transition: { type: String, required: false },
-  portalTarget: { type: [String, Object, null], required: false },
-  is: { type: null, required: false },
-  mod: { type: [Object, Array, null], required: false }
+  transition: { type: String, required: false }
 });
 const emit = defineEmits(["open", "close"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -3,13 +3,7 @@ import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition.vue.js';
 import type { DialogModel } from '../types.js';
-export interface DialogRootProps extends BoxProps {
-    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
-    closeOnClickOutside?: boolean;
-    /** If set, the component is rendered inside `Portal` @default `true` */
-    withinPortal?: boolean;
-    /** If set, the component is rendered with `Overlay` @default `true` */
-    withoutOverlay?: boolean;
+interface StyleProps {
     /** Top/bottom modal offset @default `5dvh` */
     yOffset?: CSSProperties['marginTop'];
     /** Left/right modal offset @default `5vw` */
@@ -22,10 +16,18 @@ export interface DialogRootProps extends BoxProps {
     shadow?: NuanceShadow;
     /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default `'md'` */
     padding?: NuanceSpacing;
-    /** Passes a class to root element */
-    rootClass?: string;
     /** Animation on hide/show */
     transition?: TransitionName;
+}
+export interface DialogRootProps extends BoxProps, StyleProps {
+    /** If set, the dialog is closed when user clicks on the overlay @default `true` */
+    closeOnClickOutside?: boolean;
+    /** If set, the component is rendered inside `Portal` @default `true` */
+    withinPortal?: boolean;
+    /** If set, the component is rendered with `Overlay` @default `true` */
+    withoutOverlay?: boolean;
+    /** Passes a class to root element */
+    rootClass?: string;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;
 }

package/dist/runtime/components/dialog/ui/dialog-title.vue

@@ -10,11 +10,11 @@ const { size = "md", lh = "1", ...props } = defineProps({
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 </script>

package/dist/runtime/components/drawer/drawer-close-button.vue

@@ -2,15 +2,15 @@
 import DialogCloseButton from "../dialog/ui/dialog-close-button.vue";
 const props = defineProps({
   size: { type: null, required: false },
-  variant: { type: String, required: false },
   gradient: { type: Object, required: false },
-  loading: { type: Boolean, required: false },
   color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  mod: { type: [Object, Array, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  loading: { type: Boolean, required: false },
   icon: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false }
 });
 </script>
 

package/dist/runtime/components/drawer/drawer-root.vue

@@ -14,15 +14,15 @@ const {
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
+  portalTarget: { type: [String, Object, null], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false },
   yOffset: { type: void 0, required: false },
   xOffset: { type: void 0, required: false },
   radius: { type: [String, Number], required: false },
   size: { type: String, required: false },
   shadow: { type: String, required: false },
-  padding: { type: [String, Number], required: false },
-  portalTarget: { type: [String, Object, null], required: false },
-  is: { type: null, required: false },
-  mod: { type: [Object, Array, null], required: false }
+  padding: { type: [String, Number], required: false }
 });
 defineEmits(["open", "close"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });

package/dist/runtime/components/drawer/drawer-title.vue

@@ -9,11 +9,11 @@ const props = defineProps({
   inline: { type: Boolean, required: false },
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
-  variant: { type: String, required: false },
   fz: { type: null, required: false },
-  lh: { type: String, required: false },
+  lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
+  variant: { type: String, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 </script>

package/dist/runtime/components/files/file-upload-button.vue

@@ -15,18 +15,19 @@ const {
   accept: { type: null, required: false },
   reset: { type: null, required: false },
   directory: { type: null, required: false },
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  spacing: { type: String, required: false },
-  variant: { type: String, required: false },
+  spacing: { type: [String, Number, Object], required: false },
   gradient: { type: Object, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  justify: { type: void 0, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   loading: { type: Boolean, required: false },
-  color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
-  rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false },
   capture: { type: null, required: false },

package/dist/runtime/components/files/file-upload-icon.vue

@@ -15,15 +15,15 @@ const {
   reset: { type: null, required: false },
   directory: { type: null, required: false },
   size: { type: null, required: false },
-  variant: { type: String, required: false },
   gradient: { type: Object, required: false },
-  loading: { type: Boolean, required: false },
   color: { type: null, required: false },
-  radius: { type: [String, Number], required: false },
-  classes: { type: Object, required: false },
-  mod: { type: [Object, Array, null], required: false },
+  radius: { type: [String, Number, Object], required: false },
+  loading: { type: Boolean, required: false },
   icon: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  variant: { type: String, required: false },
+  classes: { type: Object, required: false },
   capture: { type: null, required: false },
   initialFiles: { type: null, required: false },
   input: { type: null, required: false },

package/dist/runtime/components/input/date-picker.vue

@@ -31,7 +31,7 @@ const {
   ...props
 } = defineProps({
   valueFormat: { type: [String, Object], required: false },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   withWeekNumbers: { type: Boolean, required: false },
   prevDisabled: { type: Function, required: false },
   nextDisabled: { type: Function, required: false },
@@ -58,11 +58,11 @@ const {
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
   variant: { type: String, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
 });
 defineEmits(["open", "close", "select", "prev", "level", "next"]);
 const model = defineModel({ type: null });
@@ -177,10 +177,6 @@ const visible = computed(() => {
 	</Popover>
 </template>
 
-<style lang="postcss" module>
-.list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: .25rem;
-}
+<style module>
+.list{display:flex;flex-wrap:wrap;gap:.25rem}
 </style>

package/dist/runtime/components/input/email-input.vue

@@ -10,12 +10,12 @@ const { icon = "gravity-ui:at", ...rest } = defineProps({
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });

package/dist/runtime/components/input/lib/input-wrapper.context.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceRadius, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { InputVariant } from '../types.js';
 export interface WrapperContext {
@@ -7,9 +7,9 @@ export interface WrapperContext {
     /** Marks the field as required */
     required?: boolean;
     /** Border radius */
-    radius?: NuanceSize | string;
+    radius?: NuanceRadius | AnyString;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Visual variant */
     variant?: InputVariant;
     /** Enables multiline (textarea) mode */
@@ -17,9 +17,9 @@ export interface WrapperContext {
     /** CSS resize behavior for multiline inputs */
     resize?: CSSProperties['resize'];
     /** `pointer-events` value for the left section */
-    leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    leftSectionPE?: CSSProperties['pointerEvents'];
     /** `pointer-events` value for the right section */
-    rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
+    rightSectionPE?: CSSProperties['pointerEvents'];
 }
 export declare const useProvideInputWrapper: (init: any) => any;
 export declare const useInputWrapperState: () => any;

package/dist/runtime/components/input/number-input.vue

@@ -24,11 +24,11 @@ const {
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false }
 });
 const focused = shallowRef(false);
 const value = defineModel({ type: Number, ...{ default: 0 } });
@@ -106,84 +106,6 @@ function handleBlur() {
 	</InputWrapper>
 </template>
 
-<style module lang="postcss">
-.root {
-	--ni-right-section-width-xs: rem(17px);
-	--ni-right-section-width-sm: rem(24px);
-	--ni-right-section-width-md: rem(27px);
-	--ni-right-section-width-lg: rem(31px);
-	--ni-right-section-width-xl: rem(34px);
-}
-
-.controls {
-	--ni-chevron-size-xs: rem(10px);
-	--ni-chevron-size-sm: rem(14px);
-	--ni-chevron-size-md: rem(16px);
-	--ni-chevron-size-lg: rem(18px);
-	--ni-chevron-size-xl: rem(20px);
-	--ni-chevron-size: var(--ni-chevron-size-sm);
-
-	display: flex;
-	flex-direction: column;
-
-	width: 100%;
-	max-width: calc(var(--ni-chevron-size) * 1.7);
-	height: calc(var(--input-height) - rem(2px));
-	margin-inline-start: auto;
-}
-
-.control {
-	--control-border: 1px solid var(--input-bd);
-	--control-radius: calc(var(--input-radius) - rem(1px));
-
-	cursor: pointer;
-
-	display: flex;
-
-	flex: 0 0 50%;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: calc(var(--input-height) / 2 - rem(1px));
-	padding: 0;
-	border-inline-start: var(--control-border);
-
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		opacity: 0.6;
-		background-color: transparent;
-	}
-
-	.root[data-error] :where(&) {
-		color: var(--color-error);
-	}
-
-	&:where(:first-of-type) {
-		border-radius: 0;
-		border-start-end-radius: var(--control-radius);
-	}
-
-	&:last-of-type {
-		border-radius: 0;
-		border-end-end-radius: var(--control-radius);
-	}
-
-	@mixin hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-4);
-		}
-	}
-}
+<style module>
+.root{--ni-right-section-width-xs:rem(17px);--ni-right-section-width-sm:rem(24px);--ni-right-section-width-md:rem(27px);--ni-right-section-width-lg:rem(31px);--ni-right-section-width-xl:rem(34px)}.controls{--ni-chevron-size-xs:rem(10px);--ni-chevron-size-sm:rem(14px);--ni-chevron-size-md:rem(16px);--ni-chevron-size-lg:rem(18px);--ni-chevron-size-xl:rem(20px);--ni-chevron-size:var(--ni-chevron-size-sm);flex-direction:column;height:calc(var(--input-height) - rem(2px));margin-inline-start:auto;max-width:calc(var(--ni-chevron-size)*1.7)}.control,.controls{display:flex;width:100%}.control{--control-border:1px solid var(--input-bd);--control-radius:calc(var(--input-radius) - rem(1px));align-items:center;background-color:transparent;border-inline-start:var(--control-border);color:var(--color-text);cursor:pointer;flex:0 0 50%;height:calc(var(--input-height)/2 - rem(1px));justify-content:center;padding:0}.control:where(:disabled){background-color:transparent;color:var(--color-disabled-text);cursor:not-allowed;opacity:.6}.root[data-error] :where(.control){color:var(--color-error)}.control:where(:first-of-type){border-radius:0;border-start-end-radius:var(--control-radius)}.control:last-of-type{border-radius:0;border-end-end-radius:var(--control-radius)}.control{@mixin hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-4)}}}
 </style>

package/dist/runtime/components/input/password-input.vue

@@ -12,12 +12,12 @@ const props = defineProps({
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });

package/dist/runtime/components/input/text-input.vue

@@ -13,12 +13,12 @@ const { classes, icon, ...props } = defineProps({
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });

package/dist/runtime/components/input/ui/button-input.vue

@@ -14,12 +14,12 @@ const { classes, ...props } = defineProps({
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   id: { type: [String, null], required: false },
-  radius: { type: String, required: false },
-  size: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
+  size: { type: [String, Object], required: false },
   variant: { type: String, required: false },
   resize: { type: void 0, required: false },
-  leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false },
+  leftSectionPE: { type: void 0, required: false },
+  rightSectionPE: { type: void 0, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
@@ -79,25 +79,6 @@ defineExpose({
 	</InputWrapper>
 </template>
 
-<style lang="postcss" module>
-.base {
-	--input-cursor: pointer;
-}
-
-.button {
-	width: 100%;
-	min-width: rem(100px);
-
-	font-weight: 400;
-
-	&:where([data-multiline]) {
-		height: auto;
-		padding-block: calc(var(--input-padding-inline-end) / 2);
-	}
-}
-
-.section {
-	font-size: var(--font-size-lg);
-	color: var(--color-dimmed);
-}
+<style module>
+.base{--input-cursor:pointer}.button{font-weight:400;min-width:rem(100px);width:100%}.button:where([data-multiline]){height:auto;padding-block:calc(var(--input-padding-inline-end)/2)}.section{color:var(--color-dimmed);font-size:var(--font-size-lg)}
 </style>