nuance-ui 0.1.1

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

@@ -0,0 +1,343 @@
+<script setup>
+import Box from "@nui/components/box.vue";
+import { getFontSize, getRadius, getSize } from "@nui/utils";
+import { computed, useTemplateRef } from "vue";
+import { useInputWrapperState } from "../lib/input-wrapper.context";
+const {
+  is = "input",
+  modelValue = "",
+  readonly,
+  disabled,
+  ..._props
+} = defineProps({
+  is: { type: null, required: false },
+  modelValue: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  radius: { type: String, required: false },
+  size: { type: String, required: false },
+  variant: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  resize: { type: null, required: false },
+  leftSectionPE: { type: null, required: false },
+  rightSectionPE: { type: null, required: false },
+  id: { type: [String, null], required: true }
+});
+defineEmits(["update:modelValue"]);
+const props = computed(() => _props);
+const api = useInputWrapperState() ?? props;
+const style = computed(() => ({
+  "--input-height": getSize(api.value.size, "input-height"),
+  "--input-fz": getFontSize(api.value.size),
+  "--input-radius": api.value.radius === void 0 ? void 0 : getRadius(api.value.radius),
+  "--input-padding-y": api.value.multiline ? getSize(api.value.size, "input-padding-y") : void 0,
+  "--input-left-section-pointer-events": api.value.leftSectionPE,
+  "--input-right-section-pointer-events": api.value.rightSectionPE,
+  "--input-resize": api.value.resize
+}));
+const ref = useTemplateRef("input");
+defineExpose({ ref });
+</script>
+
+<template>
+	<Box
+		:style
+		:class='[$style.root, $attrs?.class]'
+		:mod='[{
+  "with-left-section": !!$slots?.leftSection,
+  "with-right-section": !!$slots?.rightSection,
+  "variant": api.variant
+}]'
+	>
+		<span
+			v-if='$slots.leftSection'
+			:class='$style.section'
+			data-position='left'
+		>
+			<slot name='leftSection' />
+		</span>
+
+		<component
+			:is
+			:id='api.id'
+			v-bind='{ ...$attrs, class: void 0 }'
+			ref='input'
+			:class='$style.input'
+			:value='modelValue'
+			:readonly
+			:disabled
+			@input="$emit('update:modelValue', $event.target.value)"
+		/>
+
+		<span
+			v-if='$slots.rightSection'
+			:class='$style.section'
+			data-position='right'
+		>
+			<slot name='rightSection' />
+		</span>
+	</Box>
+</template>
+
+<style lang="postcss" module>
+.root {
+	--input-height-xs: rem(30px);
+	--input-height-sm: rem(36px);
+	--input-height-md: rem(42px);
+	--input-height-lg: rem(50px);
+	--input-height-xl: rem(60px);
+
+	--input-padding-y-xs: rem(5px);
+	--input-padding-y-sm: rem(6px);
+	--input-padding-y-md: rem(8px);
+	--input-padding-y-lg: rem(10px);
+	--input-padding-y-xl: rem(13px);
+
+	--input-height: var(--input-height-sm);
+	--input-radius: var(--radius-default);
+
+	--input-cursor: text;
+	--input-text-align: left;
+	--input-line-height: calc(var(--input-height) - rem(2px));
+	--input-padding: calc(var(--input-height) / 3);
+	--input-padding-inline-start: var(--input-padding);
+	--input-padding-inline-end: var(--input-padding);
+	--input-placeholder-color: var(--color-placeholder);
+	--input-color: var(--color-text);
+
+	--input-left-section-width: calc(var(--input-height) - rem(2px));
+	--input-right-section-width: calc(var(--input-height) - rem(2px));
+	--input-left-section-pointer-events: none;
+	--input-right-section-pointer-events: none;
+	--input-left-section-size: var(--input-left-section-width);
+	--input-right-section-size: var(--input-right-section-width);
+
+	--input-fz: var(--font-size-sm);
+	--input-size: var(--input-height);
+	--input-resize: none;
+
+	--section-y: 1px;
+	--left-section-start: 1px;
+	--left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+
+	--right-section-end: 1px;
+	--right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+
+	position: relative;
+
+	&[data-variant='unstyled'] {
+		--input-padding: 0;
+		--input-padding-y: 0;
+		--input-padding-inline-start: 0;
+		--input-padding-inline-end: 0;
+	}
+
+	&[data-pointer] {
+		--input-cursor: pointer;
+	}
+
+	&[data-multiline] {
+		--input-padding-y-xs: 4.5px;
+		--input-padding-y-sm: 5.5px;
+		--input-padding-y-md: 7px;
+		--input-padding-y-lg: 9.5px;
+		--input-padding-y-xl: 13px;
+
+		--input-size: auto;
+		--input-line-height: var(--line-height);
+		--input-padding-y: var(--input-padding-y-sm);
+	}
+
+	&[data-with-left-section] {
+		--input-padding-inline-start: var(--input-left-section-size);
+	}
+
+	&[data-with-right-section] {
+		--input-padding-inline-end: var(--input-right-section-size);
+	}
+
+	[data-color-scheme] &[data-error] {
+		--input-color: var(--color-error);
+		--input-placeholder-color: var(--color-error);
+		--input-section-color: var(--color-error);
+
+		&:not([data-variant='unstyled']) {
+			--input-bd: var(--color-error);
+		}
+	}
+
+	@mixin light {
+		--input-disabled-bg: var(--color-gray-1);
+		--input-disabled-color: var(--color-gray-6);
+
+		&[data-variant='default'] {
+			--input-bd: var(--color-gray-4);
+			--input-bg: var(--color-white);
+			--input-bd-focus: var(--color-primary-filled);
+		}
+
+		&[data-variant='filled'] {
+			--input-bd: transparent;
+			--input-bg: var(--color-gray-1);
+			--input-bd-focus: var(--color-primary-filled);
+		}
+
+		&[data-variant='unstyled'] {
+			--input-bd: transparent;
+			--input-bg: transparent;
+			--input-bd-focus: transparent;
+		}
+	}
+
+	@mixin dark {
+		--input-disabled-bg: var(--color-dark-6);
+		--input-disabled-color: var(--color-dark-2);
+
+		&[data-variant='default'] {
+			--input-bd: var(--color-dark-4);
+			--input-bg: var(--color-dark-6);
+			--input-bd-focus: var(--color-primary-filled);
+		}
+
+		&[data-variant='filled'] {
+			--input-bd: transparent;
+			--input-bg: var(--color-dark-5);
+			--input-bd-focus: var(--color-primary-filled);
+		}
+
+		&[data-variant='unstyled'] {
+			--input-bd: transparent;
+			--input-bg: transparent;
+			--input-bd-focus: transparent;
+		}
+	}
+
+	@mixin where-rtl {
+		--input-text-align: right;
+		--left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
+		--right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
+	}
+}
+
+.input {
+	cursor: var(--input-cursor);
+	resize: var(--input-resize, none);
+
+	overflow: var(--input-overflow);
+	display: block;
+
+	width: 100%;
+	height: var(--input-size);
+	min-height: var(--input-height);
+	padding-top: var(--input-padding-y, 0rem);
+	padding-bottom: var(--input-padding-y, 0rem);
+	padding-inline-start: var(--input-padding-inline-start);
+	padding-inline-end: var(--input-padding-inline-end);
+	border: rem(1px) solid var(--input-bd);
+	border-radius: var(--input-radius);
+
+	font-family: var(--font-family), serif;
+	font-size: var(--input-fz);
+	line-height: var(--input-line-height);
+	color: var(--input-color);
+
+	text-align: var(--input-text-align);
+
+	appearance: none;
+	background-color: var(--input-bg);
+
+	transition: border-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	/* Used as data attribute in Textarea component, does not have associated prop on the Input component */
+
+	&[data-no-overflow] {
+		--input-overflow: hidden;
+	}
+
+	&:focus,
+	&:focus-within {
+		--input-bd: var(--input-bd-focus);
+
+		outline: none;
+
+		[data-error] & {
+			--input-bd: var(--color-error);
+		}
+	}
+
+	&::placeholder {
+		color: var(--input-placeholder-color);
+
+		opacity: 1;
+	}
+
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button,
+	&::-webkit-search-decoration,
+	&::-webkit-search-cancel-button,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		appearance: none;
+	}
+
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	&:disabled,
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		color: var(--input-disabled-color);
+
+		opacity: 0.6;
+		background-color: var(--input-disabled-bg);
+	}
+
+	/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */
+
+	&:has(input:disabled) {
+		cursor: not-allowed;
+
+		color: var(--input-disabled-color);
+
+		opacity: .6;
+		background-color: var(--input-disabled-bg);
+	}
+}
+
+.section {
+	pointer-events: var(--section-pointer-events);
+
+	position: absolute;
+	z-index: 1;
+	top: var(--section-y);
+	bottom: var(--section-y);
+	inset-inline-start: var(--section-start);
+	inset-inline-end: var(--section-end);
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--section-size);
+
+	border-radius: var(--section-border-radius);
+
+	color: var(--input-section-color, var(--color-dimmed));
+
+	&[data-position='right'] {
+		--section-pointer-events: var(--input-right-section-pointer-events);
+		--section-end: var(--right-section-end);
+		--section-size: var(--input-right-section-size);
+		--section-border-radius: var(--right-section-border-radius);
+	}
+
+	&[data-position='left'] {
+		--section-pointer-events: var(--input-left-section-pointer-events);
+		--section-start: var(--left-section-start);
+		--section-size: var(--input-left-section-size);
+		--section-border-radius: var(--left-section-border-radius);
+	}
+}
+</style>

package/dist/runtime/components/input/ui/input-base.vue.d.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'vue';
+import type { WrapperContext } from '../lib/input-wrapper.context.js';
+import type { InputBaseProps } from '../types/index.js';
+export interface BaseInputProps extends /* @vue-ignore */ InputBaseProps, Omit<WrapperContext, 'id'>, Required<Pick<WrapperContext, 'id'>> {
+    is?: 'input' | 'textarea' | Component;
+    modelValue?: string;
+}
+declare var __VLS_6: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_6) => any;
+} & {
+    rightSection?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BaseInputProps, {
+    ref: Readonly<import("vue").ShallowRef<any>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<BaseInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/ui/input-inline.d.vue.ts

@@ -0,0 +1,30 @@
+import type { UiKitSize } from '@nui/types';
+import type { BoxProps } from '../../box.vue.js';
+export interface InlineInputProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+    id: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled?: boolean | undefined;
+    size?: UiKitSize | string;
+    labelPosition?: 'left' | 'right';
+}
+declare var __VLS_6: {}, __VLS_12: {}, __VLS_18: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    label?: (props: typeof __VLS_12) => any;
+} & {
+    error?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,138 @@
+<script setup>
+import { getFontSize, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../../box.vue";
+const {
+  size,
+  id,
+  labelPosition = "right",
+  disabled,
+  description,
+  error,
+  label,
+  mod: _mod
+} = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  error: { type: String, required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
+  size: { type: String, required: false },
+  labelPosition: { type: String, required: false }
+});
+const style = computed(() => ({
+  "--label-fz": getFontSize(size),
+  "--label-lh": getSize(size)
+}));
+const mod = computed(() => [
+  { "label-position": labelPosition },
+  _mod
+]);
+</script>
+
+<template>
+	<Box :style :class='$style.root' :mod>
+		<div :class='$style.body'>
+			<slot />
+
+			<div :class='$style.wrapper'>
+				<Box is='label' :class='$style.label' :for='id' :mod='{ disabled }'>
+					<slot name='label'>
+						{{ label }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
+					<slot name='error'>
+						{{ error }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</div>
+		</div>
+	</Box>
+</template>
+
+<style lang="postcss" module>
+.root {
+	--label-lh-xs: rem(16px);
+	--label-lh-sm: rem(20px);
+	--label-lh-md: rem(24px);
+	--label-lh-lg: rem(30px);
+	--label-lh-xl: rem(36px);
+	--label-lh: var(--label-lh-sm);
+
+	--label-fz: var(--font-size-sm);
+
+	&[data-label-position='left'] {
+		--label-order: 0;
+	}
+
+	&[data-label-position='right'] {
+		--label-order: 1;
+	}
+}
+
+.body {
+	display: flex;
+	gap: var(--spacing-sm);
+}
+
+.wrapper {
+	--label-cursor: default;
+
+	cursor: var(--label-cursor);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: .25rem;
+	order: var(--label-order);
+
+	font-size: var(--label-fz);
+	line-height: var(--label-lh);
+
+	-webkit-tap-highlight-color: transparent;
+
+	fieldset:disabled &,
+	&[data-disabled] {
+		--label-cursor: not-allowed;
+	}
+}
+
+.label {
+	cursor: var(--label-cursor);
+
+	color: inherit;
+
+	fieldset:disabled &,
+	&:where([data-disabled]) {
+		color: var(--color-gray-5);
+	}
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
+</style>

package/dist/runtime/components/input/ui/input-inline.vue.d.ts

@@ -0,0 +1,30 @@
+import type { UiKitSize } from '@nui/types';
+import type { BoxProps } from '../../box.vue.js';
+export interface InlineInputProps extends /* @vue-ignore */ Omit<BoxProps, 'is'> {
+    id: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    disabled?: boolean | undefined;
+    size?: UiKitSize | string;
+    labelPosition?: 'left' | 'right';
+}
+declare var __VLS_6: {}, __VLS_12: {}, __VLS_18: {}, __VLS_24: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    label?: (props: typeof __VLS_12) => any;
+} & {
+    error?: (props: typeof __VLS_18) => any;
+} & {
+    description?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InlineInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/ui/input-label.d.vue.ts

@@ -0,0 +1,18 @@
+import type { UiKitSize } from '@nui/types';
+export interface InputLabelProps {
+    required?: boolean;
+    size?: UiKitSize | string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,26 @@
+<script setup>
+import { getFontSize } from "@nui/utils";
+import { computed } from "vue";
+const {
+  required = false,
+  size = "sm"
+} = defineProps({
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false }
+});
+const style = computed(() => ({
+  "--input-label-size": getFontSize(size),
+  "--input-asterisk-color": void 0
+}));
+</script>
+
+<template>
+	<label :style :class='$style.root'>
+		<slot />
+		<span v-if='required' :class='$style.required'> *</span>
+	</label>
+</template>
+
+<style module>
+.root{--input-label-size:var(--font-size-sm);--input-asterisk-color:var(--color-error);cursor:default;display:inline-block;font-size:var(--input-label-size);font-weight:500;overflow-wrap:anywhere;word-break:normal;-webkit-tap-highlight-color:transparent}.required{color:var(--input-asterisk-color)}
+</style>

package/dist/runtime/components/input/ui/input-label.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiKitSize } from '@nui/types';
+export interface InputLabelProps {
+    required?: boolean;
+    size?: UiKitSize | string;
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/input/ui/input-wrapper.d.vue.ts

@@ -0,0 +1,26 @@
+import type { WrapperContext } from '../lib/input-wrapper.context.js';
+import type { InputLabelProps } from './input-label.vue.js';
+export interface InputWrapperProps extends /* @vue-ignore */ WrapperContext, InputLabelProps {
+    error?: string;
+    description?: string;
+    label?: string;
+}
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+} & {
+    error?: (props: typeof __VLS_9) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputWrapperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputWrapperProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};