@proj-airi/ui 0.5.0 → 0.6.1

package/README.md

@@ -0,0 +1,41 @@
+# @proj-airi/ui
+
+A stylized UI component library built with [Reka UI](https://reka-ui.com/).
+
+To preview the components, refer to the [`stage-ui`](../stage-ui) package for instructions for running the Histoire UI storyboard.
+
+## Usage
+
+```shell
+ni @proj-airi/ui -D # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
+pnpm i @proj-airi/ui -D
+yarn i @proj-airi/ui -D
+npm i @proj-airi/ui -D
+```
+
+```vue
+<script setup lang="ts">
+import { Button } from '@proj-airi/ui'
+</script>
+
+<template>
+  <Button>Click me</Button>
+</template>
+```
+
+## Components
+
+* [Animations](src/components/Animations)
+    * [TransitionVertical](src/components/Animations/TransitionVertical.vue)
+* [Form](src/components/Form)
+    * [Checkbox](src/components/Form/Checkbox)
+    * [Field](src/components/Form/Field)
+    * [Input](src/components/Form/Input)
+    * [Radio](src/components/Form/Radio)
+    * [Range](src/components/Form/Range)
+    * [Select](src/components/Form/Select)
+    * [Textarea](src/components/Form/Textarea)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/Animations-DeJoVt_I.mjs

@@ -0,0 +1,153 @@
+import { export_helper_default } from "./export-helper-WDd986Km.mjs";
+import { Transition, createBlock, defineComponent, openBlock, renderSlot, withCtx } from "vue";
+
+//#region src/components/Animations/TransitionVertical.vue?vue&type=script&setup=true&lang.ts
+const closed = "0px";
+var TransitionVertical_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TransitionVertical",
+	props: {
+		duration: {
+			type: Number,
+			required: false,
+			default: 250
+		},
+		easingEnter: {
+			type: String,
+			required: false,
+			default: "ease-in-out"
+		},
+		easingLeave: {
+			type: String,
+			required: false,
+			default: "ease-in-out"
+		},
+		opacityClosed: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		opacityOpened: {
+			type: Number,
+			required: false,
+			default: 1
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		function getElementStyle(element) {
+			return {
+				height: element.style.height,
+				width: element.style.width,
+				position: element.style.position,
+				visibility: element.style.visibility,
+				overflow: element.style.overflow,
+				paddingTop: element.style.paddingTop,
+				paddingBottom: element.style.paddingBottom,
+				borderTopWidth: element.style.borderTopWidth,
+				borderBottomWidth: element.style.borderBottomWidth,
+				marginTop: element.style.marginTop,
+				marginBottom: element.style.marginBottom
+			};
+		}
+		function prepareElement(element, initialStyle) {
+			const { width } = getComputedStyle(element);
+			element.style.width = width;
+			element.style.position = "absolute";
+			element.style.visibility = "hidden";
+			element.style.height = "";
+			const { height } = getComputedStyle(element);
+			element.style.width = initialStyle.width;
+			element.style.position = initialStyle.position;
+			element.style.visibility = initialStyle.visibility;
+			element.style.height = closed;
+			element.style.overflow = "hidden";
+			return initialStyle.height && initialStyle.height !== closed ? initialStyle.height : height;
+		}
+		function animateTransition(element, initialStyle, done, keyframes, options) {
+			const animation = element.animate(keyframes, options);
+			element.style.height = initialStyle.height;
+			animation.onfinish = () => {
+				element.style.overflow = initialStyle.overflow;
+				done();
+			};
+		}
+		function getEnterKeyframes(height, initialStyle) {
+			return [{
+				height: closed,
+				opacity: props.opacityClosed,
+				paddingTop: closed,
+				paddingBottom: closed,
+				borderTopWidth: closed,
+				borderBottomWidth: closed,
+				marginTop: closed,
+				marginBottom: closed
+			}, {
+				height,
+				opacity: props.opacityOpened,
+				paddingTop: initialStyle.paddingTop,
+				paddingBottom: initialStyle.paddingBottom,
+				borderTopWidth: initialStyle.borderTopWidth,
+				borderBottomWidth: initialStyle.borderBottomWidth,
+				marginTop: initialStyle.marginTop,
+				marginBottom: initialStyle.marginBottom
+			}];
+		}
+		function enterTransition(element, done) {
+			const HTMLElement = element;
+			const initialStyle = getElementStyle(HTMLElement);
+			const height = prepareElement(HTMLElement, initialStyle);
+			const keyframes = getEnterKeyframes(height, initialStyle);
+			const options = {
+				duration: props.duration,
+				easing: props.easingEnter
+			};
+			animateTransition(HTMLElement, initialStyle, done, keyframes, options);
+		}
+		function leaveTransition(element, done) {
+			const HTMLElement = element;
+			const initialStyle = getElementStyle(HTMLElement);
+			const { height } = getComputedStyle(HTMLElement);
+			HTMLElement.style.height = height;
+			HTMLElement.style.overflow = "hidden";
+			const keyframes = getEnterKeyframes(height, initialStyle).reverse();
+			const options = {
+				duration: props.duration,
+				easing: props.easingLeave
+			};
+			animateTransition(HTMLElement, initialStyle, done, keyframes, options);
+		}
+		const __returned__ = {
+			props,
+			closed,
+			getElementStyle,
+			prepareElement,
+			animateTransition,
+			getEnterKeyframes,
+			enterTransition,
+			leaveTransition
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+
+//#endregion
+//#region src/components/Animations/TransitionVertical.vue
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createBlock(Transition, {
+		css: false,
+		onEnter: $setup.enterTransition,
+		onLeave: $setup.leaveTransition
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	});
+}
+var TransitionVertical_default = /* @__PURE__ */ export_helper_default(TransitionVertical_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/runner/work/airi/airi/packages/ui/src/components/Animations/TransitionVertical.vue"]]);
+
+//#endregion
+export { TransitionVertical_default };

package/dist/{components/Form/Range/Range.vue → Form-BXVt-kFc.css}

@@ -1,59 +1,7 @@
-<script setup>
-import { computed, onMounted, ref } from "vue";
-const props = defineProps({
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  step: { type: Number, required: false, default: 1 },
-  disabled: { type: Boolean, required: false, default: false },
-  thumbColor: { type: String, required: false, default: "#9090906e" },
-  trackColor: { type: String, required: false, default: "gray" },
-  trackValueColor: { type: String, required: false, default: "red" }
-});
-const modelValue = defineModel("modelValue", { type: Number, ...{ required: true } });
-const scaledMin = computed(() => props.min * 1e4);
-const scaledMax = computed(() => props.max * 1e4);
-const scaledStep = computed(() => props.step * 1e4);
-const sliderRef = ref();
-const sliderValue = computed({
-  get: () => modelValue.value * 1e4,
-  set: (value) => {
-    modelValue.value = value / 1e4;
-    updateTrackColor();
-  }
-});
-onMounted(() => {
-  updateTrackColor();
-});
-function updateTrackColor() {
-  if (!sliderRef.value)
-    return;
-  sliderRef.value.style.setProperty("--value", sliderRef.value.value);
-  sliderRef.value.style.setProperty("--min", !sliderRef.value.min ? props.min.toString() : sliderRef.value.min);
-  sliderRef.value.style.setProperty("--max", !sliderRef.value.max ? props.max.toString() : sliderRef.value.max);
-}
-function handleInput(e) {
-  const target = e.target;
-  target.style.setProperty("--value", target.value);
-}
-</script>
 
-<template>
-  <input
-    ref="sliderRef"
-    v-model.number="sliderValue"
-    type="range"
-    :min="scaledMin"
-    :max="scaledMax"
-    :step="scaledStep"
-    class="slider-progress form_input-range"
-    @input="handleInput"
-  >
-</template>
-
-<style scoped>
 /*generated with Input range slider CSS style generator (version 20211225)
 https://toughengineer.github.io/demo/slider-styler*/
-.form_input-range {
+.form_input-range[data-v-251c0c52] {
   --height: 2em;
 
   min-height: var(--height);
@@ -84,8 +32,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   --track-value-background-active: rgb(255, 255, 255);
   --track-value-padding: 2px;
 }
-
-.dark .form_input-range {
+.dark .form_input-range[data-v-251c0c52] {
   --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
   --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
   --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
@@ -101,18 +48,17 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 /*progress support*/
-.form_input-range.slider-progress {
+.form_input-range.slider-progress[data-v-251c0c52] {
   --range: calc(var(--max) - var(--min));
   --ratio: calc((var(--value) - var(--min)) / var(--range));
   --sx: calc(0.5 * 0em + var(--ratio) * (100% - 0em));
 }
-
-.form_input-range:focus {
+.form_input-range[data-v-251c0c52]:focus {
   outline: none;
 }
 
 /*webkit*/
-.form_input-range::-webkit-slider-thumb {
+.form_input-range[data-v-251c0c52]::-webkit-slider-thumb {
   appearance: none;
   width: var(--thumb-width);
   height: var(--thumb-height);
@@ -129,8 +75,7 @@ https://toughengineer.github.io/demo/slider-styler*/
     border-color 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-
-.form_input-range::-webkit-slider-runnable-track {
+.form_input-range[data-v-251c0c52]::-webkit-slider-runnable-track {
   height: var(--track-height);
   border: var(--track-border);
   border-radius: var(--track-border-radius);
@@ -142,39 +87,32 @@ https://toughengineer.github.io/demo/slider-styler*/
     box-shadow 0.2s ease-in-out,
     border-color 0.2s ease-in-out;
 }
-
-.form_input-range::-webkit-slider-thumb:hover {
+.form_input-range[data-v-251c0c52]::-webkit-slider-thumb:hover {
   background: var(--thumb-background-hover);
 }
-
-.form_input-range:hover::-webkit-slider-runnable-track {
+.form_input-range[data-v-251c0c52]:hover::-webkit-slider-runnable-track {
   background: var(--track-background-hover);
 }
-
-.form_input-range::-webkit-slider-thumb:active {
+.form_input-range[data-v-251c0c52]::-webkit-slider-thumb:active {
   background: var(--thumb-background-active);
 }
-
-.form_input-range:active::-webkit-slider-runnable-track {
+.form_input-range[data-v-251c0c52]:active::-webkit-slider-runnable-track {
   background: var(--track-background-active);
 }
-
-.form_input-range.slider-progress::-webkit-slider-runnable-track {
+.form_input-range.slider-progress[data-v-251c0c52]::-webkit-slider-runnable-track {
   /* margin-left: var(--track-value-padding); */
   margin-right: calc(0 - var(--track-value-padding));
   background:
     linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
     var(--track-background);
 }
-
-.form_input-range.slider-progress:hover::-webkit-slider-runnable-track {
+.form_input-range.slider-progress[data-v-251c0c52]:hover::-webkit-slider-runnable-track {
   background:
     linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
       no-repeat,
     var(--track-background-hover);
 }
-
-.form_input-range.slider-progress:active::-webkit-slider-runnable-track {
+.form_input-range.slider-progress[data-v-251c0c52]:active::-webkit-slider-runnable-track {
   background:
     linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
       no-repeat,
@@ -182,7 +120,7 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 /*mozilla*/
-.form_input-range::-moz-range-thumb {
+.form_input-range[data-v-251c0c52]::-moz-range-thumb {
   width: var(--thumb-width);
   height: var(--thumb-height);
   border-radius: var(--thumb-border-radius);
@@ -192,8 +130,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   cursor: col-resize;
   margin-left: calc(0 - var(--track-value-padding));
 }
-
-.form_input-range::-moz-range-track {
+.form_input-range[data-v-251c0c52]::-moz-range-track {
   height: var(--track-height);
   border: var(--track-border);
   border-radius: var(--track-border-radius);
@@ -203,37 +140,30 @@ https://toughengineer.github.io/demo/slider-styler*/
   /* Trim left and right paddings of track */
   width: calc(100% - var(--track-value-padding) * 2);
 }
-
-.form_input-range::-moz-range-thumb:hover {
+.form_input-range[data-v-251c0c52]::-moz-range-thumb:hover {
   background: var(--thumb-background-hover);
 }
-
-.form_input-range:hover::-moz-range-track {
+.form_input-range[data-v-251c0c52]:hover::-moz-range-track {
   background: var(--track-background-hover);
 }
-
-.form_input-range::-moz-range-thumb:active {
+.form_input-range[data-v-251c0c52]::-moz-range-thumb:active {
   background: var(--thumb-background-active);
 }
-
-.form_input-range:active::-moz-range-track {
+.form_input-range[data-v-251c0c52]:active::-moz-range-track {
   background: var(--track-background-active);
 }
-
-.form_input-range.slider-progress::-moz-range-track {
+.form_input-range.slider-progress[data-v-251c0c52]::-moz-range-track {
   background:
     linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
     var(--track-background);
 }
-
-.form_input-range.slider-progress:hover::-moz-range-track {
+.form_input-range.slider-progress[data-v-251c0c52]:hover::-moz-range-track {
   background:
     linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
       no-repeat,
     var(--track-background-hover);
 }
-
-.form_input-range.slider-progress:active::-moz-range-track {
+.form_input-range.slider-progress[data-v-251c0c52]:active::-moz-range-track {
   background:
     linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
       no-repeat,
@@ -241,17 +171,15 @@ https://toughengineer.github.io/demo/slider-styler*/
 }
 
 /*ms*/
-.form_input-range::-ms-fill-upper {
+.form_input-range[data-v-251c0c52]::-ms-fill-upper {
   background: transparent;
   border-color: transparent;
 }
-
-.form_input-range::-ms-fill-lower {
+.form_input-range[data-v-251c0c52]::-ms-fill-lower {
   background: transparent;
   border-color: transparent;
 }
-
-.form_input-range::-ms-thumb {
+.form_input-range[data-v-251c0c52]::-ms-thumb {
   width: var(--thumb-width);
   height: var(--thumb-height);
   border-radius: var(--thumb-border-radius);
@@ -265,8 +193,7 @@ https://toughengineer.github.io/demo/slider-styler*/
   box-sizing: border-box;
   cursor: col-resize;
 }
-
-.form_input-range::-ms-track {
+.form_input-range[data-v-251c0c52]::-ms-track {
   height: var(--track-height);
   border-radius: var(--track-border-radius);
   background: var(--track-background);
@@ -275,24 +202,19 @@ https://toughengineer.github.io/demo/slider-styler*/
   box-sizing: border-box;
   cursor: col-resize;
 }
-
-.form_input-range::-ms-thumb:hover {
+.form_input-range[data-v-251c0c52]::-ms-thumb:hover {
   background: var(--thumb-background-hover);
 }
-
-.form_input-range:hover::-ms-track {
+.form_input-range[data-v-251c0c52]:hover::-ms-track {
   background: var(--track-background-hover);
 }
-
-.form_input-range::-ms-thumb:active {
+.form_input-range[data-v-251c0c52]::-ms-thumb:active {
   background: var(--thumb-background-active);
 }
-
-.form_input-range:active::-ms-track {
+.form_input-range[data-v-251c0c52]:active::-ms-track {
   background: var(--track-background-active);
 }
-
-.form_input-range.slider-progress::-ms-fill-lower {
+.form_input-range.slider-progress[data-v-251c0c52]::-ms-fill-lower {
   height: var(--track-height);
   border-radius: var(--track-border-radius) 0 0 var(--track-border-radius);
   margin: 0;
@@ -304,12 +226,111 @@ https://toughengineer.github.io/demo/slider-styler*/
   /** Shift right thumb */
   margin-right: calc(0 - var(--track-value-padding));
 }
-
-.form_input-range.slider-progress:hover::-ms-fill-lower {
+.form_input-range.slider-progress[data-v-251c0c52]:hover::-ms-fill-lower {
   background: var(--track-value-background-hover);
 }
-
-.form_input-range.slider-progress:active::-ms-fill-lower {
+.form_input-range.slider-progress[data-v-251c0c52]:active::-ms-fill-lower {
   background: var(--track-value-background-active);
 }
-</style>
+
+
+.form_radio[data-v-fc242fb2] {
+  position: relative;
+  overflow: hidden;
+}
+.form_radio[data-v-fc242fb2]::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+.form_radio[data-v-fc242fb2]:hover::before,
+.form_radio._hover[data-v-fc242fb2]::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+.form_radio-active[data-v-fc242fb2]::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+
+
+.color-hue-range {
+&[data-v-ab824765] {
+  --at-apply: appearance-none h-10 rounded-lg;
+  background: linear-gradient(
+    to right,
+    oklch(85% 0.2 0),
+    oklch(85% 0.2 60),
+    oklch(85% 0.2 120),
+    oklch(85% 0.2 180),
+    oklch(85% 0.2 240),
+    oklch(85% 0.2 300),
+    oklch(85% 0.2 360)
+  );
+}
+&[data-v-ab824765]::-webkit-slider-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors duration-200;
+}
+.dark &[data-v-ab824765]::-webkit-slider-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors duration-200;
+}
+&[data-v-ab824765]::-moz-range-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+      hover: bg-neutral-800 transition-colors duration-200;
+}
+.dark &[data-v-ab824765]::-moz-range-thumb {
+    --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
+      hover: bg-neutral-300 transition-colors duration-200;
+}
+}
+
+
+.resize-observer[data-v-b329ee4c] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+}
+.resize-observer[data-v-b329ee4c] object {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+}
+.v-popper__arrow-container {
+  display: none;
+}
+.v-popper__inner {
+  border: none !important;
+}
+