nuance-ui 0.1.1

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

@@ -0,0 +1,161 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import { useCheckboxCardState } from "./lib/card.context";
+const {
+  size = "sm",
+  radius,
+  variant = "filled",
+  color,
+  iconColor,
+  indeterminate
+} = defineProps({
+  color: { type: null, required: false },
+  iconColor: { type: null, required: false },
+  variant: { type: String, required: false },
+  radius: { type: String, required: false },
+  size: { type: String, required: false },
+  indeterminate: { type: Boolean, required: false }
+});
+const ctx = useCheckboxCardState();
+const modelValue = defineModel({ type: Boolean });
+const checked = computed(() => {
+  if (ctx?.value)
+    return ctx?.value.value;
+  return modelValue.value;
+});
+const style = computed(() => useStyleResolver((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
+  };
+}));
+</script>
+
+<template>
+	<Box :style :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 }' />
+		</slot>
+	</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>

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

@@ -0,0 +1,37 @@
+import type { UiKitColor, UiKitSize } from '@nui/types';
+export interface CheckboxIndicatorProps {
+    color?: UiKitColor;
+    iconColor?: UiKitColor;
+    variant?: 'filled' | 'outline';
+    radius?: UiKitSize;
+    size?: UiKitSize;
+    indeterminate?: boolean;
+}
+type __VLS_Props = CheckboxIndicatorProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {
+    mod: {
+        checked: any;
+    };
+    class: any;
+    indeterminate: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | 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/checkbox/checkbox.d.vue.ts

@@ -0,0 +1,36 @@
+import type { UiKitColor, UiKitSize } from '@nui/types';
+import type { InlineInputProps } from '../input/index.js';
+export interface CheckboxProps extends /* @vue-ignore */ Omit<InlineInputProps, 'id'> {
+    color?: UiKitColor;
+    iconColor?: UiKitColor;
+    variant?: 'filled' | 'outline';
+    radius?: UiKitSize;
+    size?: UiKitSize;
+    indeterminate?: boolean;
+    value?: string;
+}
+type __VLS_Props = CheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {
+    class: any;
+    indeterminate: boolean;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | 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/checkbox/checkbox.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
+import { computed, useId } from "vue";
+import Box from "../box.vue";
+import InputInline from "../input/ui/input-inline.vue";
+import { useCheckboxGroupState } from "./lib/group.context";
+const {
+  size: _size = "sm",
+  radius,
+  variant = "filled",
+  color,
+  iconColor,
+  indeterminate,
+  value,
+  ...rest
+} = defineProps({
+  color: { type: null, required: false },
+  iconColor: { type: null, required: false },
+  variant: { type: String, required: false },
+  radius: { type: String, required: false },
+  size: { type: String, required: false },
+  indeterminate: { type: Boolean, required: false },
+  value: { type: String, required: false }
+});
+const id = useId();
+const modelValue = defineModel({ type: Boolean });
+const ctx = useCheckboxGroupState();
+const checked = computed(() => {
+  if (ctx?.value && value)
+    return ctx?.value.value.includes(value);
+  return modelValue.value;
+});
+const size = ctx?.size ?? _size;
+const toggle = () => modelValue.value = !modelValue.value;
+const style = computed(() => useStyleResolver((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
+  };
+}));
+</script>
+
+<template>
+	<InputInline v-bind='rest' :id :class='$style.root' :style :size>
+		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
+			<input
+				:id
+				:checked
+				type='checkbox'
+				:class='$style.input'
+				:disabled='rest.disabled'
+				@click='value ? ctx?.onUpdate?.(value) ?? toggle() : toggle()'
+			>
+
+			<slot name='icon' :indeterminate='indeterminate' :class='$style.icon'>
+				<Icon v-if='!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 {
+	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>

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

@@ -0,0 +1,36 @@
+import type { UiKitColor, UiKitSize } from '@nui/types';
+import type { InlineInputProps } from '../input/index.js';
+export interface CheckboxProps extends /* @vue-ignore */ Omit<InlineInputProps, 'id'> {
+    color?: UiKitColor;
+    iconColor?: UiKitColor;
+    variant?: 'filled' | 'outline';
+    radius?: UiKitSize;
+    size?: UiKitSize;
+    indeterminate?: boolean;
+    value?: string;
+}
+type __VLS_Props = CheckboxProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {
+    class: any;
+    indeterminate: boolean;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | 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/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+export type * from './checkbox-card.vue';
+export type * from './checkbox-group.vue';
+export type * from './checkbox-indicator.vue';
+export type * from './checkbox.vue';
+export { useCheckboxCardState } from './lib/card.context.js';
+export { useCheckboxGroupState } from './lib/group.context.js';

package/dist/runtime/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export { useCheckboxCardState } from "./lib/card.context.js";
+export { useCheckboxGroupState } from "./lib/group.context.js";

package/dist/runtime/components/checkbox/lib/card.context.d.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef } from 'vue';
+export interface CheckboxCardState {
+    value: ComputedRef<boolean>;
+    onUpdate: () => void;
+}
+export declare const useProvideCheckboxCard: (props: CheckboxCardState) => CheckboxCardState;
+export declare const useCheckboxCardState: () => CheckboxCardState;

package/dist/runtime/components/checkbox/lib/card.context.js

@@ -0,0 +1,8 @@
+import { createStrictInjection } from "@nui/helpers";
+const injectionKey = Symbol("CheckboxCard");
+const [useProvide, useState] = createStrictInjection((props) => props, {
+  injectionKey,
+  name: "CheckboxCard"
+});
+export const useProvideCheckboxCard = useProvide;
+export const useCheckboxCardState = useState;

package/dist/runtime/components/checkbox/lib/group.context.d.ts

@@ -0,0 +1,16 @@
+import type { UiKitSize } from '@nui/types';
+import type { ModelRef } from 'vue';
+export interface CheckboxGroupState {
+    value: ModelRef<string[]>;
+    size?: UiKitSize;
+}
+export declare const useProvideCheckboxGroup: (args_0: CheckboxGroupState) => {
+    value: ModelRef<string[]>;
+    size: UiKitSize | undefined;
+    onUpdate: (newValue: string) => number | string[];
+};
+export declare const useCheckboxGroupState: () => {
+    value: ModelRef<string[]>;
+    size: UiKitSize | undefined;
+    onUpdate: (newValue: string) => number | string[];
+};

package/dist/runtime/components/checkbox/lib/group.context.js

@@ -0,0 +1,15 @@
+import { createStrictInjection } from "@nui/helpers";
+const injectionKey = Symbol("CheckboxGroup");
+const [useProvide, useState] = createStrictInjection(({ value, size }) => {
+  const onUpdate = (newValue) => {
+    if (value.value.includes(newValue))
+      return value.value = value.value.filter((i) => i !== newValue);
+    return value.value.push(newValue);
+  };
+  return { value, size, onUpdate };
+}, {
+  injectionKey,
+  name: "CheckboxGroup"
+});
+export const useProvideCheckboxGroup = useProvide;
+export const useCheckboxGroupState = useState;

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

@@ -0,0 +1,24 @@
+import type { ChipGroupValue } from './lib.js';
+export interface ChipGroupProps<T extends boolean = false> {
+    name: string;
+    multiple?: T;
+    disabled?: boolean;
+}
+declare const __VLS_export: <T extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(ChipGroupProps<T> & {
+        modelValue?: ChipGroupValue<T>;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: ChipGroupValue<T>) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (evt: "update:modelValue", value: ChipGroupValue<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,20 @@
+<script setup>
+import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
+import { useProvideChipGroupState } from "./lib";
+const {
+  multiple = false,
+  disabled,
+  name
+} = defineProps({
+  name: { type: String, required: true },
+  multiple: { type: null, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const value = defineModel({ type: null, ...{ default: null } });
+useProvideChipGroupState({ multiple, value, disabled });
+</script>
+
+<template>
+	<slot />
+	<VisuallyHiddenInput v-model='value' :name />
+</template>

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

@@ -0,0 +1,24 @@
+import type { ChipGroupValue } from './lib.js';
+export interface ChipGroupProps<T extends boolean = false> {
+    name: string;
+    multiple?: T;
+    disabled?: boolean;
+}
+declare const __VLS_export: <T extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(ChipGroupProps<T> & {
+        modelValue?: ChipGroupValue<T>;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: ChipGroupValue<T>) => void>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: (evt: "update:modelValue", value: ChipGroupValue<T>) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,35 @@
+import type { UiKitColor, UiKitRadius, UiKitSize } from '@nui/types';
+export interface ChipProps {
+    radius?: UiKitRadius;
+    size?: UiKitSize;
+    type?: 'radio' | 'checkbox';
+    color?: UiKitColor;
+    id?: string;
+    variant?: 'filled' | 'outline' | 'light';
+    value?: string;
+    icon?: string;
+    hideIcon?: boolean;
+    disabled?: boolean;
+}
+type __VLS_Props = ChipProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => 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;
+    };
+};