nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/checkbox/checkbox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
+import { useVarsResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
@@ -19,10 +19,10 @@ const {
   id: { type: String, required: false },
   color: { type: null, required: false },
   iconColor: { type: null, required: false },
-  variant: { type: String, required: false },
-  radius: { type: String, required: false },
+  radius: { type: [String, Number, Object], required: false },
   size: { type: String, required: false },
   value: { type: String, required: false },
+  variant: { type: String, required: false },
   label: { type: String, required: false },
   description: { type: String, required: false },
   error: { type: String, required: false },
@@ -56,20 +56,28 @@ const disabled = computed(() => {
 });
 const uuid = computed(() => id ?? useId());
 const size = computed(() => _size ?? ctx?.size);
-const style = computed(() => useStyleResolver((theme) => {
+const style = useVarsResolver((theme) => {
   const parsed = parseThemeColor({ color, theme });
   const outlineColor = parsed.isThemeColor && parsed.shade === void 0 ? `var(--color-${parsed.color}-outline)` : parsed.color;
   return {
-    "--checkbox-size": getSize(size, "checkbox-size"),
-    "--checkbox-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--checkbox-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
-    "--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : void 0
+    root: {
+      "--checkbox-size": getSize(size, "checkbox-size"),
+      "--checkbox-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--checkbox-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
+      "--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
+	<InputInline
+		v-bind='rest'
+		:id='uuid'
+		:class='$style.root'
+		:style='style.root'
+		:size
+	>
 		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
 			<input
 				:id
@@ -79,136 +87,22 @@ const style = computed(() => useStyleResolver((theme) => {
 				:disabled
 			>
 
-			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
-				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
+			<slot
+				name='icon'
+				:indeterminate='modelValue === "indeterminate"'
+				:class='$style.icon'
+			>
+				<Icon
+					v-if='modelValue !== "indeterminate"'
+					name='gravity-ui:check'
+					:class='$style.icon'
+				/>
 				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
 			</slot>
 		</Box>
 	</InputInline>
 </template>
 
-<style module lang="postcss">
-.root {
-	--checkbox-size-xs: rem(16px);
-	--checkbox-size-sm: rem(20px);
-	--checkbox-size-md: rem(24px);
-	--checkbox-size-lg: rem(30px);
-	--checkbox-size-xl: rem(36px);
-
-	--checkbox-size: var(--checkbox-size-sm);
-	--checkbox-color: var(--color-primary-filled);
-	--checkbox-icon-color: var(--color-white);
-}
-
-.inner {
-	position: relative;
-
-	order: 1;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-
-	&:where([data-label-position='right']) {
-		order: 2;
-	}
-}
-
-.input {
-	cursor: pointer;
-
-	display: block;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	margin: 0;
-	padding: 0;
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius, var(--radius-default));
-
-	appearance: none;
-
-	transition: border-color 100ms ease,
-		background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-error]) {
-		border-color: var(--color-error);
-	}
-
-	&[data-indeterminate],
-	&:checked {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		&+.icon {
-			transform: none;
-
-			opacity: 1;
-		}
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&+.icon {
-			color: var(--color-disabled);
-		}
-	}
-
-	@mixin where-light {
-		border-color: var(--color-gray-4);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.input[data-variant='outline'] {
-	&+.icon {
-		color: var(--checkbox-color);
-	}
-
-	&[data-indeterminate]:not(:disabled),
-	&:checked:not(:disabled) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		&+.icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	position: absolute;
-	inset: 0;
-	transform: translateY(.25rem) scale(0.5);
-
-	width: 80%;
-	margin: auto;
-
-	color: var(--checkbox-icon-color);
-
-	opacity: 0;
-
-	transition: transform 100ms ease,
-		opacity 100ms ease;
-}
+<style module>
+.root{--checkbox-size-xs:rem(16px);--checkbox-size-sm:rem(20px);--checkbox-size-md:rem(24px);--checkbox-size-lg:rem(30px);--checkbox-size-xl:rem(36px);--checkbox-size:var(--checkbox-size-sm);--checkbox-color:var(--color-primary-filled);--checkbox-icon-color:var(--color-white)}.inner{height:var(--checkbox-size);order:1;position:relative;width:var(--checkbox-size)}.inner:where([data-label-position=right]){order:2}.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:var(--checkbox-radius,var(--radius-default));cursor:pointer;display:block;height:var(--checkbox-size);margin:0;padding:0;transition:border-color .1s ease,background-color .1s ease;width:var(--checkbox-size);-webkit-tap-highlight-color:transparent}.input:where([data-error]){border-color:var(--color-error)}.input:checked,.input[data-indeterminate]{background-color:var(--checkbox-color);border-color:var(--checkbox-color)}.input:checked+.icon,.input[data-indeterminate]+.icon{opacity:1;transform:none}.input:disabled{background-color:var(--color-disabled);border-color:var(--color-disabled-border);cursor:not-allowed}.input:disabled+.icon{color:var(--color-disabled)}.input{@mixin where-light{background-color:var(--color-white);border-color:var(--color-gray-4)}}.input{@mixin where-dark{background-color:var(--color-dark-6);border-color:var(--color-dark-4)}}.input[data-variant=outline]+.icon{color:var(--checkbox-color)}.input[data-variant=outline]:checked:not(:disabled),.input[data-variant=outline][data-indeterminate]:not(:disabled){background-color:transparent;border-color:var(--checkbox-color)}.input[data-variant=outline]:checked:not(:disabled)+.icon,.input[data-variant=outline][data-indeterminate]:not(:disabled)+.icon{color:var(--checkbox-color);opacity:1;transform:none}.icon{color:var(--checkbox-icon-color);inset:0;margin:auto;opacity:0;pointer-events:none;position:absolute;transform:translateY(.25rem) scale(.5);transition:transform .1s ease,opacity .1s ease;width:80%}
 </style>

package/dist/runtime/components/checkbox/checkbox.vue.d.ts

@@ -1,5 +1,6 @@
-import type { NuanceColor, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
+export type CheckboxVariant = 'filled' | 'outline';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
@@ -7,13 +8,8 @@ export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     color?: NuanceColor;
     /** Icon color */
     iconColor?: NuanceColor;
-    /**
-     * Visual variant
-     * @default `'filled'`
-     */
-    variant?: 'filled' | 'outline';
     /** Border radius */
-    radius?: NuanceSize;
+    radius?: NuanceRadius | AnyString;
     /**
      * Component size
      * @default `'sm'`
@@ -21,6 +17,8 @@ export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
     size?: NuanceSize;
     /** Value used in checkbox group context */
     value?: string;
+    /** Visual variant */
+    variant?: CheckboxVariant;
 }
 type __VLS_Props = CheckboxProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/chip/chip.d.vue.ts

@@ -1,4 +1,5 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+export type ChipVariant = 'filled' | 'outline' | 'light';
 export interface ChipProps {
     /** Border radius */
     radius?: NuanceRadius;
@@ -10,8 +11,6 @@ export interface ChipProps {
     color?: NuanceColor;
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
-    /** Visual variant */
-    variant?: 'filled' | 'outline' | 'light';
     /** Value used in chip group context */
     value?: string;
     /** Check icon name */
@@ -20,6 +19,8 @@ export interface ChipProps {
     hideIcon?: boolean;
     /** Disables the component */
     disabled?: boolean;
+    /** Visual variant */
+    variant?: ChipVariant;
 }
 type __VLS_Props = ChipProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/chip/chip.vue

@@ -1,7 +1,12 @@
 <script setup>
-import { useStyleResolver } from "@nui/composables";
-import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
-import { computed, useId } from "vue";
+import { useVarsResolver } from "@nui/composables";
+import {
+  createVariantColorResolver,
+  getFontSize,
+  getRadius,
+  getSize
+} from "@nui/utils";
+import { useId } from "vue";
 import Box from "../box.vue";
 import { useChipGroupState, useChipState } from "./lib";
 const {
@@ -21,11 +26,11 @@ const {
   type: { type: String, required: false },
   color: { type: null, required: false },
   id: { type: String, required: false },
-  variant: { type: String, required: false },
   value: { type: String, required: false },
   icon: { type: String, required: false },
   hideIcon: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false }
+  disabled: { type: Boolean, required: false },
+  variant: { type: String, required: false }
 });
 const id = uid || useId();
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
@@ -33,30 +38,28 @@ const ctx = useChipGroupState();
 const { checked, onUpdate } = useChipState(ctx, modelValue, value);
 const disabled = ctx?.disabled || _disabled;
 const type = ctx ? ctx.multiple ? "checkbox" : "radio" : _type;
-const style = computed(() => useStyleResolver((theme) => {
-  const colors = createVariantColorResolver({
-    color,
-    theme,
-    variant
-  });
+const style = useVarsResolver((theme) => {
+  const colors = createVariantColorResolver({ color, theme, variant });
   return {
-    "--chip-fz": getFontSize(size),
-    "--chip-size": getSize(size, "chip-size"),
-    "--chip-radius": radius === void 0 ? void 0 : getRadius(radius),
-    "--chip-checked-padding": getSize(size, "chip-checked-padding"),
-    "--chip-padding": getSize(size, "chip-padding"),
-    "--chip-icon-size": getSize(size, "chip-icon-size"),
-    "--chip-bg": color || variant ? colors.background : void 0,
-    "--chip-hover": color || variant ? colors.hover : void 0,
-    "--chip-color": color || variant ? colors.text : void 0,
-    "--chip-bd": color || variant ? colors.border : void 0,
-    "--chip-spacing": getSize(size, "chip-spacing")
+    root: {
+      "--chip-fz": getFontSize(size),
+      "--chip-size": getSize(size, "chip-size"),
+      "--chip-radius": radius === void 0 ? void 0 : getRadius(radius),
+      "--chip-checked-padding": getSize(size, "chip-checked-padding"),
+      "--chip-padding": getSize(size, "chip-padding"),
+      "--chip-icon-size": getSize(size, "chip-icon-size"),
+      "--chip-bg": color || variant ? colors.background : void 0,
+      "--chip-hover": color || variant ? colors.hover : void 0,
+      "--chip-color": color || variant ? colors.text : void 0,
+      "--chip-bd": color || variant ? colors.border : void 0,
+      "--chip-spacing": getSize(size, "chip-spacing")
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<Box :style :class='[$style.root, $attrs?.style]'>
+	<Box :style='style.root' :class='[$style.root, $attrs?.style]'>
 		<input
 			v-bind='{
   ...$attrs,
@@ -79,192 +82,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.root {
-	--chip-size-xs: rem(23px);
-	--chip-size-sm: rem(28px);
-	--chip-size-md: rem(32px);
-	--chip-size-lg: rem(36px);
-	--chip-size-xl: rem(40px);
-
-	--chip-icon-size-xs: rem(12px);
-	--chip-icon-size-sm: rem(14px);
-	--chip-icon-size-md: rem(16px);
-	--chip-icon-size-lg: rem(18px);
-	--chip-icon-size-xl: rem(20px);
-
-	--chip-padding-xs: rem(16px);
-	--chip-padding-sm: rem(20px);
-	--chip-padding-md: rem(24px);
-	--chip-padding-lg: rem(28px);
-	--chip-padding-xl: rem(32px);
-
-	--chip-checked-padding-xs: rem(7.5px);
-	--chip-checked-padding-sm: rem(10px);
-	--chip-checked-padding-md: rem(11.7px);
-	--chip-checked-padding-lg: rem(13.5px);
-	--chip-checked-padding-xl: rem(15.7px);
-
-	--chip-spacing-xs: rem(10px);
-	--chip-spacing-sm: rem(12px);
-	--chip-spacing-md: rem(16px);
-	--chip-spacing-lg: rem(20px);
-	--chip-spacing-xl: rem(22px);
-
-	--chip-size: var(--chip-size-sm);
-	--chip-icon-size: var(--chip-icon-size-sm);
-	--chip-padding: var(--chip-padding-sm);
-	--chip-spacing: var(--chip-spacing-sm);
-	--chip-checked-padding: var(--chip-checked-padding-sm);
-	--chip-bg: var(--color-primary-filled);
-	--chip-hover: var(--color-primary-filled-hover);
-	--chip-color: var(--color-white);
-	--chip-bd: 1px solid transparent;
-
-	--chip-fz: var(--font-size-sm);
-	--chip-radius: var(--radius-xl);
-}
-
-.label {
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-
-	height: var(--chip-size);
-	padding-inline: var(--chip-padding);
-
-	border: 1px solid transparent;
-	border-radius: var(--chip-radius);
-
-	font-size: var(--chip-fz);
-	line-height: calc(var(--chip-size) - rem(2px));
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-}
-
-.iconWrapper {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	height: var(--chip-icon-size);
-}
-
-.icon {
-	display: block;
-
-	width: var(--chip-icon-size);
-	height: var(--chip-icon-size);
-
-	color: var(--chip-icon-color, inherit);
-}
-
-.input {
-	width: 0;
-	height: 0;
-	margin: 0;
-	padding: 0;
-
-	opacity: 0;
-
-	&:focus-visible+.label {
-		outline: 2px solid var(--color-primary-filled);
-		outline-offset: 2px;
-	}
-}
-
-.input:disabled {
-	&+.label {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		background-color: var(--color-disabled);
-	}
-}
-
-.input:not(:disabled) {
-	&+.label[data-variant='outline'] {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-3);
-
-			background-color: var(--color-white);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-
-			background-color: var(--color-dark-6);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&+.label[data-variant='filled'],
-	&+.label[data-variant='light'] {
-		border: 1px solid transparent;
-
-		color: var(--color-text);
-
-		@mixin where-light {
-			background-color: var(--color-gray-1);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-5);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-2);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-4);
-			}
-		}
-	}
-}
-
-.input:not(:disabled):checked {
-	&+.label {
-		padding: var(--chip-checked-padding);
-	}
-
-	&+.label[data-variant='outline'] {
-		--chip-icon-color: var(--chip-color);
-
-		border: var(--chip-bd);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-
-	&+.label[data-variant='filled'],
-	&+.label[data-variant='light'] {
-		--chip-icon-color: var(--chip-color);
-
-		color: var(--chip-color);
-
-		background-color: var(--chip-bg);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-}
+<style module>
+.root{--chip-size-xs:rem(23px);--chip-size-sm:rem(28px);--chip-size-md:rem(32px);--chip-size-lg:rem(36px);--chip-size-xl:rem(40px);--chip-icon-size-xs:rem(12px);--chip-icon-size-sm:rem(14px);--chip-icon-size-md:rem(16px);--chip-icon-size-lg:rem(18px);--chip-icon-size-xl:rem(20px);--chip-padding-xs:rem(16px);--chip-padding-sm:rem(20px);--chip-padding-md:rem(24px);--chip-padding-lg:rem(28px);--chip-padding-xl:rem(32px);--chip-checked-padding-xs:rem(7.5px);--chip-checked-padding-sm:rem(10px);--chip-checked-padding-md:rem(11.7px);--chip-checked-padding-lg:rem(13.5px);--chip-checked-padding-xl:rem(15.7px);--chip-spacing-xs:rem(10px);--chip-spacing-sm:rem(12px);--chip-spacing-md:rem(16px);--chip-spacing-lg:rem(20px);--chip-spacing-xl:rem(22px);--chip-size:var(--chip-size-sm);--chip-icon-size:var(--chip-icon-size-sm);--chip-padding:var(--chip-padding-sm);--chip-spacing:var(--chip-spacing-sm);--chip-checked-padding:var(--chip-checked-padding-sm);--chip-bg:var(--color-primary-filled);--chip-hover:var(--color-primary-filled-hover);--chip-color:var(--color-white);--chip-bd:1px solid transparent;--chip-fz:var(--font-size-sm);--chip-radius:var(--radius-xl)}.label{align-items:center;border:1px solid transparent;border-radius:var(--chip-radius);color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--chip-fz);height:var(--chip-size);line-height:calc(var(--chip-size) - rem(2px));padding-inline:var(--chip-padding);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}.iconWrapper{align-items:center;display:flex;max-width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5);overflow:hidden;width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5)}.icon,.iconWrapper{height:var(--chip-icon-size)}.icon{color:var(--chip-icon-color,inherit);display:block;width:var(--chip-icon-size)}.input{height:0;margin:0;opacity:0;padding:0;width:0}.input:focus-visible+.label{outline:2px solid var(--color-primary-filled);outline-offset:2px}.input:disabled+.label{background-color:var(--color-disabled);color:var(--color-disabled-text);cursor:not-allowed}.input:not(:disabled)+.label[data-variant=outline]{@mixin where-light{background-color:var(--color-white);border-bottom-color:var(--color-gray-3);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-gray-3);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-gray-3);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-gray-3);border-top-style:solid;border-top-width:1px}@mixin where-dark{background-color:var(--color-dark-6);border-bottom-color:var(--color-dark-4);border-bottom-style:solid;border-bottom-width:1px;border-left-color:var(--color-dark-4);border-left-style:solid;border-left-width:1px;border-right-color:var(--color-dark-4);border-right-style:solid;border-right-width:1px;border-top-color:var(--color-dark-4);border-top-style:solid;border-top-width:1px}@mixin hover{@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-5)}}}.input:not(:disabled)+.label[data-variant=filled],.input:not(:disabled)+.label[data-variant=light]{border:1px solid transparent;color:var(--color-text);@mixin where-light{background-color:var(--color-gray-1)}@mixin where-dark{background-color:var(--color-dark-5)}@mixin hover{@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}}.input:not(:disabled):checked+.label{padding:var(--chip-checked-padding)}.input:not(:disabled):checked+.label[data-variant=outline]{--chip-icon-color:var(--chip-color);border:var(--chip-bd);@mixin hover{background-color:var(--chip-hover)}}.input:not(:disabled):checked+.label[data-variant=filled],.input:not(:disabled):checked+.label[data-variant=light]{--chip-icon-color:var(--chip-color);background-color:var(--chip-bg);color:var(--chip-color);@mixin hover{background-color:var(--chip-hover)}}
 </style>

package/dist/runtime/components/chip/chip.vue.d.ts

@@ -1,4 +1,5 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+export type ChipVariant = 'filled' | 'outline' | 'light';
 export interface ChipProps {
     /** Border radius */
     radius?: NuanceRadius;
@@ -10,8 +11,6 @@ export interface ChipProps {
     color?: NuanceColor;
     /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
-    /** Visual variant */
-    variant?: 'filled' | 'outline' | 'light';
     /** Value used in chip group context */
     value?: string;
     /** Check icon name */
@@ -20,6 +19,8 @@ export interface ChipProps {
     hideIcon?: boolean;
     /** Disables the component */
     disabled?: boolean;
+    /** Visual variant */
+    variant?: ChipVariant;
 }
 type __VLS_Props = ChipProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/combobox/combobox-dropdown.vue

@@ -26,8 +26,6 @@ const style = computed(() => ({
 	</PopoverDropdown>
 </template>
 
-<style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+<style module>
+.dropdown{padding:0}
 </style>

package/dist/runtime/components/container.d.vue.ts

@@ -1,8 +1,8 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface ContainerProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | string | number;
+    size?: NuanceSize | AnyString;
     /** Removes max-width constraint */
     fluid?: boolean;
 }

package/dist/runtime/components/container.vue

@@ -8,7 +8,7 @@ const {
   fluid,
   size
 } = defineProps({
-  size: { type: [String, Number], required: false },
+  size: { type: [String, Object], required: false },
   fluid: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }

package/dist/runtime/components/container.vue.d.ts

@@ -1,8 +1,8 @@
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface ContainerProps extends BoxProps {
     /** Component size */
-    size?: NuanceSize | string | number;
+    size?: NuanceSize | AnyString;
     /** Removes max-width constraint */
     fluid?: boolean;
 }

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

@@ -31,12 +31,12 @@ const {
   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 },
   withSeconds: { type: Boolean, required: false }
@@ -152,10 +152,6 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 	</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/dialog/ui/dialog-close-button.vue

@@ -1,17 +1,21 @@
 <script setup>
 import ActionIcon from "../../action-icon/action-icon.vue";
 import { useDialogState } from "../lib";
-const { variant = "subtle", icon = "gravity-ui:xmark", ...props } = defineProps({
+const {
+  variant = "subtle",
+  icon = "gravity-ui:xmark",
+  ...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 }
 });
 const close = useDialogState();
 </script>