nuance-ui 0.2.9 → 0.2.11

package/dist/runtime/components/calendar/ui/core/calendar-header.vue

@@ -57,71 +57,6 @@ defineEmits(["prev", "level", "next"]);
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.header {
-	--dch-control-size-xs: rem(30px);
-	--dch-control-size-sm: rem(36px);
-	--dch-control-size-md: rem(42px);
-	--dch-control-size-lg: rem(48px);
-	--dch-control-size-xl: rem(54px);
-	--dch-control-size: var(--dch-control-size-sm);
-
-	--dch-control-radius: var(--radius-default);
-
-	display: flex;
-}
-
-.level,
-.control {
-	cursor: pointer;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
-
-	opacity: 1;
-
-	&:where([data-static]) {
-		cursor: default;
-	}
-
-	&:hover {
-		&:where(:not([data-static], :disabled)) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		opacity: 0.2;
-	}
-}
-
-.level {
-	flex: 1;
-
-	font-size: var(--dch-fz, var(--font-size-sm));
-	font-weight: 500;
-	text-transform: capitalize;
-}
-
-.control {
-	width: var(--dch-control-size);
-}
-
-.icon {
-	width: 60%;
-	height: 60%;
-}
+<style module>
+.header{--dch-control-size-xs:rem(30px);--dch-control-size-sm:rem(36px);--dch-control-size-md:rem(42px);--dch-control-size-lg:rem(48px);--dch-control-size-xl:rem(54px);--dch-control-size:var(--dch-control-size-sm);--dch-control-radius:var(--radius-default);display:flex}.control,.level{align-items:center;border-radius:var(--dch-control-radius);cursor:pointer;display:flex;height:var(--dch-control-size);justify-content:center;opacity:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.control:where([data-static]),.level:where([data-static]){cursor:default}.control:hover:where(:not([data-static],:disabled)),.level:hover:where(:not([data-static],:disabled)){@mixin light{background-color:var(--color-gray-0)}@mixin dark{background-color:var(--color-dark-5)}}.control:where(:disabled),.level:where(:disabled){cursor:not-allowed;opacity:.2}.level{flex:1;font-size:var(--dch-fz,var(--font-size-sm));font-weight:500;text-transform:capitalize}.control{width:var(--dch-control-size)}.icon{height:60%;width:60%}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-decade.d.vue.ts

@@ -1,11 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarDecadeProps extends CalendarCellProps {
     /** Start date of the decade */
     date: DateInput;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Allows selecting a year as the final value without drilling down */
     selectable?: boolean;
 }

package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue

@@ -8,7 +8,7 @@ import { useCalendarSelectionState } from "../../lib/use-calendar-selection";
 import { CalendarCell } from "../core";
 const { date, size, selectable } = defineProps({
   date: { type: [Date, String], required: true },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   selectable: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
@@ -78,28 +78,6 @@ function handleSelect(year) {
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+<style module>
+.table{table-layout:fixed}.year{--day-size-xs:1.875rem;--day-size-sm:2.25rem;--day-size-md:2.625rem;--day-size-lg:3rem;--day-size-xl:3.375rem;align-items:center;cursor:pointer;display:flex;height:var(--day-size);justify-content:center;text-transform:capitalize;width:calc((var(--day-size)*7)/3 + .09375rem)}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue.d.ts

@@ -1,11 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarDecadeProps extends CalendarCellProps {
     /** Start date of the decade */
     date: DateInput;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Allows selecting a year as the final value without drilling down */
     selectable?: boolean;
 }

package/dist/runtime/components/calendar/ui/levels/calendar-month.d.vue.ts

@@ -1,12 +1,12 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 export interface CalendarMonthProps {
     /** ISO string of the month to render */
     month: string;
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
 }

package/dist/runtime/components/calendar/ui/levels/calendar-month.vue

@@ -6,10 +6,15 @@ import Box from "../../../box.vue";
 import { useCalendarState } from "../../lib/context";
 import { useCalendarSelectionState } from "../../lib/use-calendar-selection";
 import { CalendarCell } from "../core";
-const { month, size, withWeekNumbers, withCellSpacing = true } = defineProps({
+const {
+  month,
+  size,
+  withWeekNumbers,
+  withCellSpacing = true
+} = defineProps({
   month: { type: String, required: true },
   withCellSpacing: { type: Boolean, required: false },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   withWeekNumbers: { type: Boolean, required: false }
 });
 const emit = defineEmits(["select"]);
@@ -104,36 +109,6 @@ function handleSelect(event) {
 	</table>
 </template>
 
-<style lang="postcss" module>
-.table {
-	table-layout: fixed;
-	border-collapse: collapse;
-}
-
-.row:where([data-selectable]):hover {
-	@mixin light {
-		background-color: var(--color-gray-0);
-	}
-
-	@mixin dark {
-		background-color: var(--color-dark-5);
-	}
-}
-
-.cell {
-	padding: 0;
-
-	&:where(&[data-with-spacing]) {
-		padding: var(--calendar-cell-spacing);
-	}
-}
-
-.weekday {
-	padding-bottom: calc(var(--wr-spacing, var(--spacing-sm)) / 2);
-
-	font-size: var(--wr-fz, var(--font-size-sm));
-	font-weight: normal;
-	color: var(--color-dimmed);
-	text-transform: capitalize;
-}
+<style module>
+.table{border-collapse:collapse;table-layout:fixed}.row:where([data-selectable]):hover{@mixin light{background-color:var(--color-gray-0)}@mixin dark{background-color:var(--color-dark-5)}}.cell{padding:0}.cell:where(.cell[data-with-spacing]){padding:var(--calendar-cell-spacing)}.weekday{color:var(--color-dimmed);font-size:var(--wr-fz,var(--font-size-sm));font-weight:400;padding-bottom:calc(var(--wr-spacing, var(--spacing-sm))/2);text-transform:capitalize}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-month.vue.d.ts

@@ -1,12 +1,12 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 export interface CalendarMonthProps {
     /** ISO string of the month to render */
     month: string;
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;
 }

package/dist/runtime/components/calendar/ui/levels/calendar-year.d.vue.ts

@@ -1,11 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarYearProps extends CalendarCellProps {
     /** Year date used to generate the month grid */
     year: DateInput;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Allows selecting a month as the final value without drilling down */
     selectable?: boolean;
 }

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue

@@ -9,7 +9,7 @@ import { useCalendarSelectionState } from "../../lib/use-calendar-selection";
 import { CalendarCell } from "../core";
 const { year, size, selectable } = defineProps({
   year: { type: [Date, String], required: true },
-  size: { type: String, required: false },
+  size: { type: [String, Object], required: false },
   selectable: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
@@ -73,28 +73,6 @@ function handleSelect(month) {
 	</Box>
 </template>
 
-<style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+<style module>
+.table{table-layout:fixed}.year{--day-size-xs:1.875rem;--day-size-sm:2.25rem;--day-size-md:2.625rem;--day-size-lg:3rem;--day-size-xl:3.375rem;align-items:center;cursor:pointer;display:flex;height:var(--day-size);justify-content:center;text-transform:capitalize;width:calc((var(--day-size)*7)/3 + .09375rem)}
 </style>

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue.d.ts

@@ -1,11 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
-import type { NuanceSize } from '@nui/types';
+import type { AnyString, NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarYearProps extends CalendarCellProps {
     /** Year date used to generate the month grid */
     year: DateInput;
     /** Component size */
-    size?: NuanceSize | string;
+    size?: NuanceSize | AnyString;
     /** Allows selecting a month as the final value without drilling down */
     selectable?: boolean;
 }

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

@@ -60,32 +60,6 @@ const style = computed(() => ({
 	</UnstyledButton>
 </template>
 
-<style module lang="postcss">
-.root {
-	--card-radius: var(--radius-default);
-
-	cursor: pointer;
-
-	display: block;
-
-	width: 100%;
-
-	border-radius: var(--card-radius);
-
-	& :where(*) {
-		cursor: inherit;
-	}
-
-	&:where([data-with-border]) {
-		border: 1px solid transparent;
-
-		@mixin where-light {
-			border-color: var(--color-gray-3);
-		}
-
-		@mixin where-dark {
-			border-color: var(--color-dark-4);
-		}
-	}
-}
+<style module>
+.root{--card-radius:var(--radius-default);border-radius:var(--card-radius);cursor:pointer;display:block;width:100%}.root :where(*){cursor:inherit}.root:where([data-with-border]){border:1px solid transparent;@mixin where-light{border-color:var(--color-gray-3)}@mixin where-dark{border-color:var(--color-dark-4)}}
 </style>

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

@@ -20,10 +20,10 @@ const {
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
-  radius: { type: String, required: false },
+  radius: { type: [String, Number, 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 value = defineModel({ type: Array, ...{ default: [] } });
 const id = useId();

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

@@ -1,17 +1,18 @@
-import type { NuanceColor, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+type CheckboxIndicatorVariant = 'filled' | 'outline';
 export interface CheckboxIndicatorProps {
     /** Color from theme */
     color?: NuanceColor;
     /** Icon color */
     iconColor?: NuanceColor;
-    /** Visual variant */
-    variant?: 'filled' | 'outline';
     /** Border radius */
-    radius?: NuanceSize;
+    radius?: NuanceRadius | AnyString;
     /** Component size */
     size?: NuanceSize;
     /** Displays indeterminate icon */
     indeterminate?: boolean;
+    /** Visual variant */
+    variant?: CheckboxIndicatorVariant;
 }
 type __VLS_Props = CheckboxIndicatorProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/checkbox/checkbox-indicator.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 } from "vue";
 import Box from "../box.vue";
@@ -14,10 +14,10 @@ const {
 } = defineProps({
   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 },
-  indeterminate: { type: Boolean, required: false }
+  indeterminate: { type: Boolean, required: false },
+  variant: { type: String, required: false }
 });
 const ctx = useCheckboxCardState();
 const modelValue = defineModel({ type: Boolean });
@@ -26,20 +26,22 @@ const checked = computed(() => {
     return ctx?.value.value;
   return modelValue.value;
 });
-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 && 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 ? getRadius(radius) : void 0,
+      "--checkbox-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
+      "--checkbox-icon-color": iconColor ? getThemeColor(iconColor, theme) : void 0
+    }
   };
-}));
+});
 </script>
 
 <template>
-	<Box :style :class='$style.indicator' :mod='{ checked }'>
+	<Box :style='style.root' :class='$style.indicator' :mod='{ checked }'>
 		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
 			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
 			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
@@ -47,116 +49,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	</Box>
 </template>
 
-<style module lang="postcss">
-.indicator {
-	--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);
-
-	--checkbox-radius: var(--radius-default);
-
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--checkbox-size);
-	min-width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	min-height: var(--checkbox-size);
-
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius);
-
-	transition: border-color 100ms ease,
-		background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&[data-indeterminate],
-	&[data-checked] {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-icon-color);
-
-			opacity: 1;
-		}
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&[data-checked]>.icon {
-			@mixin light {
-				color: var(--color-gray-5);
-			}
-
-			@mixin dark {
-				color: var(--color-dark-3);
-			}
-		}
-	}
-
-	@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);
-	}
-}
-
-.indicator[data-variant='outline'] {
-
-	&[data-indeterminate]:not([data-disabled]),
-	&[data-checked]:not([data-disabled]) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		&>.icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	transform: translateY(.25rem) scale(0.5);
-
-	display: block;
-
-	width: 80%;
-
-	color: transparent;
-
-	opacity: 1;
-
-	transition: transform 100ms ease,
-		opacity 100ms ease;
-}
+<style module>
+.indicator{--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);--checkbox-radius:var(--radius-default);align-items:center;border:1px solid transparent;border-radius:var(--checkbox-radius);display:flex;height:var(--checkbox-size);justify-content:center;min-height:var(--checkbox-size);min-width:var(--checkbox-size);position:relative;transition:border-color .1s ease,background-color .1s ease;width:var(--checkbox-size);-webkit-tap-highlight-color:transparent}.indicator[data-checked],.indicator[data-indeterminate]{background-color:var(--checkbox-color);border-color:var(--checkbox-color)}.indicator[data-checked]>.icon,.indicator[data-indeterminate]>.icon{color:var(--checkbox-icon-color);opacity:1;transform:none}.indicator[data-disabled]{background-color:var(--color-disabled);border-color:var(--color-disabled-border);cursor:not-allowed}.indicator[data-disabled][data-checked]>.icon{@mixin light{color:var(--color-gray-5)}@mixin dark{color:var(--color-dark-3)}}.indicator{@mixin where-light{background-color:var(--color-white);border-color:var(--color-gray-4)}}.indicator{@mixin where-dark{background-color:var(--color-dark-6);border-color:var(--color-dark-4)}}.indicator[data-variant=outline][data-checked]:not([data-disabled]),.indicator[data-variant=outline][data-indeterminate]:not([data-disabled]){background-color:transparent;border-color:var(--checkbox-color)}.indicator[data-variant=outline][data-checked]:not([data-disabled])>.icon,.indicator[data-variant=outline][data-indeterminate]:not([data-disabled])>.icon{color:var(--checkbox-color);opacity:1;transform:none}.icon{color:transparent;display:block;opacity:1;pointer-events:none;transform:translateY(.25rem) scale(.5);transition:transform .1s ease,opacity .1s ease;width:80%}
 </style>

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

@@ -1,17 +1,18 @@
-import type { NuanceColor, NuanceSize } from '@nui/types';
+import type { AnyString, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+type CheckboxIndicatorVariant = 'filled' | 'outline';
 export interface CheckboxIndicatorProps {
     /** Color from theme */
     color?: NuanceColor;
     /** Icon color */
     iconColor?: NuanceColor;
-    /** Visual variant */
-    variant?: 'filled' | 'outline';
     /** Border radius */
-    radius?: NuanceSize;
+    radius?: NuanceRadius | AnyString;
     /** Component size */
     size?: NuanceSize;
     /** Displays indeterminate icon */
     indeterminate?: boolean;
+    /** Visual variant */
+    variant?: CheckboxIndicatorVariant;
 }
 type __VLS_Props = CheckboxIndicatorProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/checkbox/checkbox.d.vue.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 = {