@youcan/celeste 0.6.37 → 0.6.39

package/dist/es/digit-input-group.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { A as At, f as O } from "./chunks/index.js";
+import { r as reactiveOmit } from "./chunks/index2.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "digit-input-group",
+  props: {
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwardedProps = At(delegatedProps);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(O), mergeProps(unref(forwardedProps), {
+        class: unref(clsx)("celeste-digit-input-group", props.class)
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const digitInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1a28428d"]]);
+export {
+  digitInputGroup as default
+};

package/dist/es/digit-input-slot.js

@@ -0,0 +1,29 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { A as At, a0 as $y } from "./chunks/index.js";
+import { r as reactiveOmit } from "./chunks/index2.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "digit-input-slot",
+  props: {
+    index: {},
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const delegatedProps = reactiveOmit(props, "class");
+    const forwardedProps = At(delegatedProps);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref($y), mergeProps(unref(forwardedProps), {
+        class: unref(clsx)("celeste-digit-input-slot", props.class)
+      }), null, 16, ["class"]);
+    };
+  }
+});
+const digitInputSlot = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5b5299e2"]]);
+export {
+  digitInputSlot as default
+};

package/dist/es/digit-input.js

@@ -0,0 +1,47 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { c as clsx } from "./chunks/clsx.js";
+import { x as xe, a1 as Dy } from "./chunks/index.js";
+import { r as reactiveOmit } from "./chunks/index2.js";
+import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "digit-input",
+  props: {
+    modelValue: { default: () => [] },
+    defaultValue: {},
+    placeholder: {},
+    mask: { type: Boolean },
+    otp: { type: Boolean },
+    type: {},
+    dir: {},
+    name: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    id: {},
+    asChild: { type: Boolean },
+    as: {},
+    class: {},
+    hasError: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const delegatedProps = reactiveOmit(props, "class", "hasError");
+    const forwarded = xe(delegatedProps, emits);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dy), mergeProps(unref(forwarded), {
+        class: unref(clsx)("celeste-digit-input", props.class),
+        "data-error": _ctx.hasError
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 16, ["class", "data-error"]);
+    };
+  }
+});
+const digitInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be93d7bf"]]);
+export {
+  digitInput as default
+};

package/dist/es/dropdown-menu-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a0 as ih, a1 as uh } from "./chunks/index.js";
+import { x as xe, a2 as ih, a3 as uh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-content",

package/dist/es/dropdown-menu-group.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { a2 as fh } from "./chunks/index.js";
+import { a4 as fh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-group",

package/dist/es/dropdown-menu-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, a3 as ch } from "./chunks/index.js";
+import { A as At, a5 as ch } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

package/dist/es/dropdown-menu-label.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, a4 as hh } from "./chunks/index.js";
+import { A as At, a6 as hh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-label",

package/dist/es/dropdown-menu-separator.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { a5 as ph } from "./chunks/index.js";
+import { a7 as ph } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-separator",

package/dist/es/dropdown-menu-sub-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, a0 as ih, a6 as Ch } from "./chunks/index.js";
+import { x as xe, a2 as ih, a8 as Ch } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-sub-content",

package/dist/es/dropdown-menu-sub-trigger.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { A as At, a7 as wh } from "./chunks/index.js";
+import { A as At, a9 as wh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
   key: 0,

package/dist/es/dropdown-menu-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { A as At, a8 as rh } from "./chunks/index.js";
+import { A as At, aa as rh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu-trigger",

package/dist/es/dropdown-menu.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
-import { a9 as sh } from "./chunks/index.js";
+import { ab as sh } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "dropdown-menu",

package/dist/es/index.js

@@ -19,6 +19,9 @@ import ComboboxSeparator from "./combobox-separator.js";
 import ComboboxTrigger from "./combobox-trigger.js";
 import combobox from "./combobox.js";
 import { _ as _sfc_main$2 } from "./chunks/content-divider.vue_vue_type_style_index_0_lang.js";
+import digitInputGroup from "./digit-input-group.js";
+import digitInputSlot from "./digit-input-slot.js";
+import digitInput from "./digit-input.js";
 import contextMenuItem from "./context-menu-item.js";
 import DropdownItem from "./dropdown-item.js";
 import dropdown from "./dropdown.js";
@@ -95,6 +98,9 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   CompactButton,
   ContentDivider: _sfc_main$2,
   ContextMenuItem: contextMenuItem,
+  DigitInput: digitInput,
+  DigitInputGroup: digitInputGroup,
+  DigitInputSlot: digitInputSlot,
   Dropdown: dropdown,
   DropdownItem,
   DropdownMenu: dropdownMenu,
@@ -230,6 +236,9 @@ export {
   _sfc_main$2 as ContentDivider,
   contextMenuItem as ContextMenuItem,
   DEFAULT_SWATCH,
+  digitInput as DigitInput,
+  digitInputGroup as DigitInputGroup,
+  digitInputSlot as DigitInputSlot,
   dropdown as Dropdown,
   DropdownItem,
   dropdownMenu as DropdownMenu,

package/dist/es/link-bubble.js

@@ -28,7 +28,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const BubbleMenu = defineAsyncComponent(
-      () => import("./chunks/index2.js").then((m) => m.BubbleMenu)
+      () => import("./chunks/index3.js").then((m) => m.BubbleMenu)
     );
     const href = ref("");
     const openInNewTab = ref(false);

package/dist/es/modal-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, Transition, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, aa as Dv, ab as Eu, ac as xu } from "./chunks/index.js";
+import { x as xe, ac as Dv, ad as Eu, ae as xu } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "modal-content",

package/dist/es/modal-header.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createCommentVNode, createBlock, withCtx, toDisplayString, createVNode } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ad as Pu, ae as Du, a as Gl } from "./chunks/index.js";
+import { af as Pu, ag as Du, a as Gl } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-dismissible", "data-alignment", "data-type"];
 const _hoisted_2 = {

package/dist/es/popover-content.js

@@ -2,7 +2,7 @@ import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, m
 import CompactButton from "./compact-button.js";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, af as bs, ag as ws, ah as _s, ai as xs } from "./chunks/index.js";
+import { x as xe, ah as bs, ai as ws, aj as _s, ak as xs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-icon-size"];
 const _hoisted_2 = { class: "celeste-popover-title" };

package/dist/es/popover-trigger.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
-import { aj as gs } from "./chunks/index.js";
+import { al as gs } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover-trigger",

package/dist/es/progress-bar.js

@@ -1,7 +1,7 @@
 import { defineComponent, useCssVars, computed, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, renderSlot, createTextVNode, createVNode, unref, mergeProps, withCtx } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ak as By, al as Iy } from "./chunks/index.js";
+import { am as By, an as Iy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["data-layout"];
 const _hoisted_2 = {

package/dist/es/progress-circle.js

@@ -1,7 +1,7 @@
 import { defineComponent, useCssVars, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ak as By, al as Iy } from "./chunks/index.js";
+import { am as By, an as Iy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = ["cx", "cy", "r"];

package/dist/es/rich-editor.js

@@ -7,7 +7,7 @@ import SelectTrigger from "./select-trigger.js";
 import SelectValue from "./select-value.js";
 import { _ as _sfc_main$1 } from "./chunks/select.js";
 import Tooltip from "./tooltip.js";
-import { M as Mark, m as mergeAttributes, e as markPasteRule, c as Plugin, P as PluginKey, f as combineTransactionSteps, h as getChangedRanges, j as findChildrenInRange, l as getMarksBetween, n as getAttributes, E as Extension, o as dropPoint, S as Selection, k as keydownHandler, N as NodeSelection, F as Fragment, b as Slice, T as TextSelection, D as DecorationSet, q as Decoration, r as Mapping, s as callOrReturn, t as getExtensionField, u as isNodeEmpty, v as isNodeSelection, w as Node3, x as wrappingInputRule, y as markInputRule, z as textblockTypeInputRule, A as canInsertNode, B as nodeInputRule, C as getNodeType, G as getNodeAtPosition, H as isNodeActive, I as isAtStartOfNode, J as isAtEndOfNode, K as Editor$1 } from "./chunks/index3.js";
+import { M as Mark, m as mergeAttributes, e as markPasteRule, c as Plugin, P as PluginKey, f as combineTransactionSteps, h as getChangedRanges, j as findChildrenInRange, l as getMarksBetween, n as getAttributes, E as Extension, o as dropPoint, S as Selection, k as keydownHandler, N as NodeSelection, F as Fragment, b as Slice, T as TextSelection, D as DecorationSet, q as Decoration, r as Mapping, s as callOrReturn, t as getExtensionField, u as isNodeEmpty, v as isNodeSelection, w as Node3, x as wrappingInputRule, y as markInputRule, z as textblockTypeInputRule, A as canInsertNode, B as nodeInputRule, C as getNodeType, G as getNodeAtPosition, H as isNodeActive, I as isAtStartOfNode, J as isAtEndOfNode, K as Editor$1 } from "./chunks/index4.js";
 import { fullToolbar, onActionClick, selectedOption } from "./config.js";
 import ExtraSettings from "./extra-settings.js";
 import LinkBubble from "./link-bubble.js";

package/dist/es/select-content.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, am as zy, an as Ky, ao as Xy } from "./chunks/index.js";
+import { x as xe, ao as zy, ap as Ky, aq as Xy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-content",

package/dist/es/select-item.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { ap as jy, aq as Yy, ar as Uy } from "./chunks/index.js";
+import { ar as jy, as as Yy, at as Uy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-item",

package/dist/es/select-trigger.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createVNode, createElementVNode } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { as as Ly, at as eg } from "./chunks/index.js";
+import { au as Ly, av as eg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-trigger",

package/dist/es/select-value.js

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { useDelegatedProps } from "./use-delegated-props.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { au as Qy } from "./chunks/index.js";
+import { aw as Qy } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select-value",

package/dist/es/text-input-button.js

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const delegatedProps = useDelegatedProps(props, "class");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(Button, mergeProps(unref(delegatedProps), {
+      return openBlock(), createBlock(Button, mergeProps({ tabindex: "-1" }, unref(delegatedProps), {
         size: "sm",
         intent: "neutral",
         variant: "stroke",
@@ -26,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInputButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7d21364e"]]);
+const TextInputButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-00ed5aef"]]);
 export {
   TextInputButton as default
 };

package/dist/es/tooltip.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import CompactButton from "./compact-button.js";
 import { c as clsx } from "./chunks/clsx.js";
-import { x as xe, av as Lg, aw as zg, ax as Kg, ay as jg, az as Hg, aA as Wg } from "./chunks/index.js";
+import { x as xe, ax as Lg, ay as zg, az as Kg, aA as jg, aB as Hg, aC as Wg } from "./chunks/index.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "celeste-tooltip-content-box" };
 const _hoisted_2 = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/celeste",
   "type": "module",
-  "version": "0.6.37",
+  "version": "0.6.39",
   "author": "YouCan <tech@youcan.shop>",
   "keywords": [
     "youcan",
@@ -39,13 +39,14 @@
     "@tiptap/pm": "^3.0.7",
     "@tiptap/starter-kit": "^3.0.7",
     "@tiptap/vue-3": "^3.0.7",
+    "@vueuse/core": "^13.6.0",
     "clsx": "^2.1.1",
     "radix-vue": "^1.9.12",
     "storybook-rtl-addon": "^0.3.3",
     "tinycolor2": "^1.6.0",
     "vue-sonner": "^2.0.2",
-    "@youcan/celeste-tokens": "0.6.37",
-    "@youcan/celeste-icons": "0.6.37"
+    "@youcan/celeste-icons": "0.6.39",
+    "@youcan/celeste-tokens": "0.6.39"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",

package/src/components/digit-input/digit-input-group.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>();
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps" :class="clsx('celeste-digit-input-group', props.class)">
+    <slot />
+  </Primitive>
+</template>
+
+<style scoped lang="scss">
+.celeste-digit-input-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-10);
+}
+</style>

package/src/components/digit-input/digit-input-slot.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue';
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="clsx('celeste-digit-input-slot', props.class)" />
+</template>
+
+<style scoped lang="scss">
+.celeste-digit-input-slot {
+  --celeste-digit-input-border-color: var(--color-stroke-soft-200);
+  --celeste-digit-input-drop-shadow: var(--shadow-regular-xs);
+  --celeste-digit-input-placeholder-color: var(--color-text-soft-400);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  transition: all var(--animation-fast) ease-out;
+  border: 1px solid var(--celeste-digit-input-border-color);
+  border-radius: var(--radius-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  background-color: var(--color-bg-white-0);
+  box-shadow: var(--celeste-digit-input-drop-shadow);
+  color: var(--color-text-strong-950);
+  font: var(--paragraph-sm);
+  text-align: center;
+
+  &::placeholder {
+    transition: color var(--animation-fast) ease-out;
+    color: var(--celeste-digit-input-placeholder-color);
+  }
+
+  &:focus {
+    --celeste-digit-input-border-color: var(--color-stroke-strong-950);
+    --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
+
+    outline-color: var(--color-stroke-soft-200);
+  }
+
+  &:disabled {
+    --celeste-digit-input-border-color: transparent;
+    --celeste-digit-input-drop-shadow: none;
+    --celeste-digit-input-placeholder-color: var(--color-text-disabled-300);
+
+    background-color: var(--color-bg-weak-50);
+    box-shadow: none;
+    color: var(--color-text-disabled-300);
+    pointer-events: none;
+
+    &::placeholder {
+      color: currentcolor;
+    }
+  }
+
+  [data-error='true'] & {
+    --celeste-digit-input-border-color: var(--color-state-error-base);
+
+    &:focus {
+      --celeste-digit-input-border-color: var(--color-state-error-base);
+
+      outline-color: var(--color-state-error-lighter);
+    }
+  }
+
+  &:hover:not(:focus, :disabled) {
+    --celeste-digit-input-border-color: transparent;
+    --celeste-digit-input-placeholder-color: var(--color-text-sub-600);
+
+    background-color: var(--color-bg-weak-50);
+  }
+}
+</style>

package/src/components/digit-input/digit-input.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import clsx from 'clsx';
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = withDefaults(defineProps<PinInputRootProps & {
+  class?: HTMLAttributes['class'];
+  hasError?: boolean;
+}>(), {
+  modelValue: () => [],
+  hasError: false,
+});
+const emits = defineEmits<PinInputRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'hasError');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    :class="clsx('celeste-digit-input', props.class)"
+    :data-error="hasError"
+  >
+    <slot />
+  </PinInputRoot>
+</template>
+
+<style scoped lang="scss">
+.celeste-digit-input {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-10);
+}
+</style>

package/src/components/digit-input/index.ts

@@ -0,0 +1,8 @@
+export * from './digit-input-group.vue';
+export { default as DigitInputGroup } from './digit-input-group.vue';
+
+export * from './digit-input-slot.vue';
+export { default as DigitInputSlot } from './digit-input-slot.vue';
+
+export * from './digit-input.vue';
+export { default as DigitInput } from './digit-input.vue';