@hina-ui/vue 1.7.10 → 1.7.12

package/dist/shared/styles/typography.css

@@ -6,10 +6,25 @@
   letter-spacing: var(--hn-tracking-tight);
 }
 
+@layer base {
+  :where(
+    .text-accent-on,
+    .text-neutral-solid-on,
+    .text-success-on,
+    .text-warning-on,
+    .text-danger-on,
+    .text-info-on
+  ) {
+    --hn-on-solid-fill: transparent;
+    --hn-on-solid-border: color-mix(in oklab, currentColor 40%, transparent);
+  }
+}
+
 @utility hn-code {
   font-family: var(--hn-font-mono);
   font-size: 0.875em;
-  background-color: var(--hn-bg-inset);
+  background-color: var(--hn-on-solid-fill, var(--hn-bg-inset));
+  box-shadow: inset 0 0 0 1px var(--hn-on-solid-border, transparent);
   border-radius: var(--hn-radius-sm);
   padding: 0.125em 0.375em;
 }
@@ -144,8 +159,8 @@
 @utility hn-kbd {
   font-family: var(--hn-font-mono);
   font-size: 0.8125em;
-  background-color: var(--hn-surface);
-  border: 1px solid var(--hn-border);
+  background-color: var(--hn-on-solid-fill, var(--hn-surface));
+  border: 1px solid var(--hn-on-solid-border, var(--hn-border));
   border-block-end-width: 2px;
   border-radius: var(--hn-radius-sm);
   padding: 0.0625em 0.375em;

package/dist/shared/variants/pin-input.ts

@@ -1,14 +1,25 @@
 import { tv, type VariantProps } from '../lib/tv'
 
 export const pinInput = tv({
-  base: 'inline-flex max-w-full gap-2',
+  base: 'relative inline-flex max-w-full gap-2',
+  variants: {
+    size: {
+      sm: '[--hn-pin-size:var(--hn-control-h-sm)]',
+      md: '[--hn-pin-size:var(--hn-control-h-md)]',
+      lg: '[--hn-pin-size:var(--hn-control-h-lg)]',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
 })
 
 export const pinInputCell = tv({
   base: [
-    'hn-field text-fg shrink-0 rounded-md border text-center font-medium tabular-nums outline-none [font-family:inherit]',
-    'placeholder:text-faint placeholder:font-normal',
-    'disabled:cursor-not-allowed disabled:opacity-50',
+    'hn-field text-fg inline-flex size-[var(--hn-pin-size)] shrink-0 items-center justify-center rounded-md border font-medium tabular-nums select-none',
+    'not-data-filled:text-faint not-data-filled:font-normal',
+    'data-active:[--hn-field-ring-w:2px] data-invalid:data-active:[--hn-field-ring-w:1px]',
+    'data-disabled:opacity-50',
   ],
   variants: {
     variant: {
@@ -17,9 +28,9 @@ export const pinInputCell = tv({
       secondary: 'border-transparent [--hn-field-bg:var(--hn-bg-inset)]',
     },
     size: {
-      sm: 'size-[var(--hn-control-h-sm)] text-sm',
-      md: 'size-[var(--hn-control-h-md)] text-base',
-      lg: 'size-[var(--hn-control-h-lg)] text-md',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-md',
     },
   },
   defaultVariants: {
@@ -28,4 +39,12 @@ export const pinInputCell = tv({
   },
 })
 
+export const pinInputNative = tv({
+  base: 'hn-pin-native',
+})
+
+export const pinInputCaret = tv({
+  base: 'hn-pin-caret',
+})
+
 export type PinInputVariants = VariantProps<typeof pinInputCell>

package/dist/types/shared/src/behavior/spoiler/painter.d.ts

@@ -7,29 +7,30 @@ export interface SpoilerPainterOptions {
     mimicWords?: boolean;
     accent?: string;
 }
+export declare const SPOILER_WORKLET_INPUTS: readonly ["--hn-nz-t", "--hn-nz-stop", "--hn-nz-fade", "--hn-nz-gap", "--hn-nz-accent", "--hn-nz-words", "--hn-nz-density"];
 export declare class SpoilerPainter {
     readonly el: HTMLElement;
     maxFPS: number;
-    private t;
-    private t0;
-    private tstop;
-    private raf;
-    private fadeS;
+    private clock;
+    private settle;
+    private running;
+    private inView;
     private hidden;
     private destroyed;
     constructor(el: HTMLElement, options?: SpoilerPainterOptions);
     get isHidden(): boolean;
     update({ fps, gap, density, mimicWords, accent, }?: SpoilerPainterOptions): void;
     private useBackgroundStyle;
+    private easing;
+    private time;
     private setFade;
-    private setT;
     private setTstop;
     private parseFade;
+    private sync;
+    private stopClock;
+    setInView(value: boolean): void;
     hide(animate?: number | boolean): void;
     reveal(animate?: number | boolean): void;
-    private frame;
-    private startAnimation;
-    private stopAnimation;
     destroy(): void;
 }
 //# sourceMappingURL=painter.d.ts.map

package/dist/types/shared/src/behavior/spoiler/painter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/painter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,SAC0D,CAAA;AAI9F,wBAAgB,sBAAsB,SAQrC;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAeD,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,CAAe;IAE7B,OAAO,CAAC,CAAC,CAAI;IACb,OAAO,CAAC,EAAE,CAAI;IACd,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,GAAG,CAAsB;IACjC,OAAO,CAAC,KAAK,CAAI;IACjB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;gBAEb,EAAE,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B;IAMhE,IAAI,QAAQ,YAEX;IAED,MAAM,CAAC,EACL,GAAkB,EAClB,GAAkB,EAClB,OAA0B,EAC1B,UAAgC,EAChC,MAAwB,GACzB,GAAE,qBAA0B;IAqC7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,SAAS;IAKjB,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAS/B,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IASjC,OAAO,CAAC,KAAK,CAaZ;IAED,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,aAAa;IAOrB,OAAO;CAgBR"}
+{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/painter.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,SAC0D,CAAA;AAI9F,wBAAgB,sBAAsB,SAQrC;AAED,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAUD,eAAO,MAAM,sBAAsB,6HAQzB,CAAA;AAkBV,qBAAa,cAAc;IACzB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,CAAe;IAE7B,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,MAAM,CAA2C;IACzD,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;gBAEb,EAAE,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B;IAUhE,IAAI,QAAQ,YAEX;IAED,MAAM,CAAC,EACL,GAAkB,EAClB,GAAkB,EAClB,OAA0B,EAC1B,UAAgC,EAChC,MAAwB,GACzB,GAAE,qBAA0B;IA2C7B,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,SAAS;IAQjB,SAAS,CAAC,KAAK,EAAE,OAAO;IAMxB,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAgB/B,MAAM,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO;IAgBjC,OAAO;CAQR"}

package/dist/types/shared/src/behavior/spoiler/worklet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"worklet.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/worklet.ts"],"names":[],"mappings":"AAsMA,eAAO,MAAM,aAAa,QAAkC,CAAA"}
+{"version":3,"file":"worklet.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/behavior/spoiler/worklet.ts"],"names":[],"mappings":"AAoMA,eAAO,MAAM,aAAa,QAAkC,CAAA"}

package/dist/types/shared/src/lib/css-time.d.ts

@@ -0,0 +1,2 @@
+export declare function cssTimeToMs(value: string): number;
+//# sourceMappingURL=css-time.d.ts.map

package/dist/types/shared/src/lib/css-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-time.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/lib/css-time.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAKxC"}

package/dist/types/shared/src/lib/line-clamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-clamp.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/lib/line-clamp.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,IAAI,CAAA;AAEnC,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,UAGvD;AAUD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,kBAIpD;AAUD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,cA0CzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,QAEvD"}
+{"version":3,"file":"line-clamp.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/lib/line-clamp.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,IAAI,CAAA;AAEnC,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,UAGvD;AASD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,kBAIpD;AAUD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,cA2CzF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,QAEvD"}

package/dist/types/shared/src/primitives/pin-input/index.d.ts

@@ -1,31 +1,39 @@
-export type PinInputValue = Array<string | number | undefined>;
-export declare function pinInputValues(value: unknown): PinInputValue;
-export declare function isPinInputComplete(values: PinInputValue, count: number, numeric: boolean): boolean;
-export declare function stripPinNonNumbers(value: string): string;
-export declare function setPinValueAt(current: PinInputValue, index: number, value: string, numeric: boolean): PinInputValue;
-export declare function spreadPinValue(current: PinInputValue, characters: string, index: number, count: number, numeric: boolean): {
-    values: (string | number | undefined)[];
-    filled: number[];
+export interface PinRange {
+    start: number;
     end: number;
-};
-export type PinTextAction = {
-    kind: 'clear';
-} | {
-    kind: 'filter';
+}
+export interface PinInputSelection extends PinRange {
+    focused: boolean;
+}
+export interface PinEdit extends PinRange {
     value: string;
-} | {
-    kind: 'spread';
-    characters: string;
-} | {
-    kind: 'single';
-    character: string;
+}
+export interface PinCell {
+    char: string;
+    active: boolean;
+    caret: boolean;
+}
+export interface PinInputOptions {
+    length: () => number;
+    numeric: () => boolean;
+    value: () => string;
+    rtl: () => boolean;
+    cells: () => ArrayLike<Element>;
+    change: (value: string) => void;
+    select: (selection: PinInputSelection) => void;
+}
+export interface PinInputController {
+    sync: () => void;
+    dispose: () => void;
+}
+export declare function cleanPinText(text: string, numeric: boolean): string;
+export declare function pinInputValue(value: string, length: number): string;
+export declare function pinSelectionAt(caret: number, size: number, length: number, backward?: boolean): [number, number];
+export declare function editPinValue(base: string, raw: string, selection: PinRange | null, length: number, numeric: boolean, type?: string): PinEdit;
+export declare function movePinSelection(selection: PinRange, backward: boolean, size: number, length: number, target: number | 'previous' | 'next', extend: boolean): PinRange & {
+    backward: boolean;
 };
-export declare function resolvePinComposition(value: string, numeric: boolean): PinTextAction;
-export declare function resolvePinInput(data: string | null | undefined, value: string, numeric: boolean): PinTextAction;
-export declare function resolvePinPaste(text: string, numeric: boolean): string;
-export declare function pinFocusRedirect(values: PinInputValue, count: number, index: number): number;
-export declare function isPinNavigationKey(key: string): boolean;
-export declare function navigatePin(event: KeyboardEvent, current: HTMLElement | null, inputs: HTMLElement[], dir: 'ltr' | 'rtl'): void;
-export declare function pinPlaceholder(element: HTMLInputElement, active: Element | null, placeholder: string): void;
-export declare function pinInputLabel(index: number, count: number): string;
+export declare function pinCells(value: string, length: number, selection: PinInputSelection): PinCell[];
+export declare function pinCellAt(cells: ArrayLike<Element>, x: number): number;
+export declare function createPinInput(input: HTMLInputElement, options: PinInputOptions): PinInputController;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/shared/src/primitives/pin-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/primitives/pin-input/index.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAA;AAM9D,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,CAE5D;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,WAExF;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,UAE/C;AAOD,wBAAgB,aAAa,CAC3B,OAAO,EAAE,aAAa,EACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,iBASjB;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO;;;;EAgBjB;AAED,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACjC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAA;AAEzC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,aAAa,CAKpF;AAED,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,GACf,aAAa,CAIf;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,UAE7D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAInF;AAED,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,WAE7C;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,MAAM,EAAE,WAAW,EAAE,EACrB,GAAG,EAAE,KAAK,GAAG,KAAK,QASnB;AAED,wBAAgB,cAAc,CAC5B,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,OAAO,GAAG,IAAI,EACtB,WAAW,EAAE,MAAM,QAGpB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAEzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../shared/src/primitives/pin-input/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,OAAQ,SAAQ,QAAQ;IACvC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB,KAAK,EAAE,MAAM,MAAM,CAAA;IACnB,GAAG,EAAE,MAAM,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,SAAS,CAAC,OAAO,CAAC,CAAA;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,MAAM,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;CAC/C;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAOD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,UAK1D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAE1D;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,UAAQ,GACf,CAAC,MAAM,EAAE,MAAM,CAAC,CAIlB;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,QAAQ,GAAG,IAAI,EAC1B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,SAAK,GACR,OAAO,CAiCT;AAED,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,QAAQ,EACnB,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACpC,MAAM,EAAE,OAAO,GACd,QAAQ,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAwBlC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,GAAG,OAAO,EAAE,CAS/F;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,MAAM,UAY7D;AAQD,wBAAgB,cAAc,CAC5B,KAAK,EAAE,gBAAgB,EACvB,OAAO,EAAE,eAAe,GACvB,kBAAkB,CA4PpB"}

package/dist/types/shared/src/variants/pin-input.d.ts

@@ -1,14 +1,32 @@
 import { type VariantProps } from '../lib/tv';
-export declare const pinInput: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex max-w-full gap-2", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const pinInput: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "[--hn-pin-size:var(--hn-control-h-sm)]";
+        md: "[--hn-pin-size:var(--hn-control-h-md)]";
+        lg: "[--hn-pin-size:var(--hn-control-h-lg)]";
+    };
+}, undefined, "relative inline-flex max-w-full gap-2", {
+    size: {
+        sm: "[--hn-pin-size:var(--hn-control-h-sm)]";
+        md: "[--hn-pin-size:var(--hn-control-h-md)]";
+        lg: "[--hn-pin-size:var(--hn-control-h-lg)]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "[--hn-pin-size:var(--hn-control-h-sm)]";
+        md: "[--hn-pin-size:var(--hn-control-h-md)]";
+        lg: "[--hn-pin-size:var(--hn-control-h-lg)]";
+    };
+}, undefined>>;
 export declare const pinInputCell: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
         secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
-        sm: "size-[var(--hn-control-h-sm)] text-sm";
-        md: "size-[var(--hn-control-h-md)] text-base";
-        lg: "size-[var(--hn-control-h-lg)] text-md";
+        sm: "text-sm";
+        md: "text-base";
+        lg: "text-md";
     };
 }, undefined, string[], {
     variant: {
@@ -16,9 +34,9 @@ export declare const pinInputCell: import("tailwind-variants").TVReturnType<{
         secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
-        sm: "size-[var(--hn-control-h-sm)] text-sm";
-        md: "size-[var(--hn-control-h-md)] text-base";
-        lg: "size-[var(--hn-control-h-lg)] text-md";
+        sm: "text-sm";
+        md: "text-base";
+        lg: "text-md";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
@@ -26,10 +44,12 @@ export declare const pinInputCell: import("tailwind-variants").TVReturnType<{
         secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
-        sm: "size-[var(--hn-control-h-sm)] text-sm";
-        md: "size-[var(--hn-control-h-md)] text-base";
-        lg: "size-[var(--hn-control-h-lg)] text-md";
+        sm: "text-sm";
+        md: "text-base";
+        lg: "text-md";
     };
 }, undefined>>;
+export declare const pinInputNative: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "hn-pin-native", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const pinInputCaret: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "hn-pin-caret", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export type PinInputVariants = VariantProps<typeof pinInputCell>;
 //# sourceMappingURL=pin-input.d.ts.map

package/dist/types/shared/src/variants/pin-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/variants/pin-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAEjD,eAAO,MAAM,QAAQ,yLAEnB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsBvB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}
+{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../../../../../shared/src/variants/pin-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AAEjD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;cAYnB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuBvB,CAAA;AAEF,eAAO,MAAM,cAAc,0KAEzB,CAAA;AAEF,eAAO,MAAM,aAAa,yKAExB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA"}

package/dist/types/vue/src/components/image/composables/useImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImage.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/image/composables/useImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,uBAAuB,EAAE,MAAM,KAAK,CAAA;AAepG,wBAAgB,QAAQ,CACtB,KAAK,EAAE;IACL,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,EACD,IAAI,EAAE;IACJ,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC1D,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACnB;;;;;;;;;EAiIF"}
+{"version":3,"file":"useImage.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/image/composables/useImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,uBAAuB,EAAE,MAAM,KAAK,CAAA;AAgBpG,wBAAgB,QAAQ,CACtB,KAAK,EAAE;IACL,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,EACD,IAAI,EAAE;IACJ,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC1D,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CACnB;;;;;;;;;EAiIF"}

package/dist/types/vue/src/components/pin-input/PinInput.vue.d.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     size?: PinInputVariants['size'];
     disabled?: boolean;
     invalid?: boolean;
+    required?: boolean;
+    dir?: 'ltr' | 'rtl';
     class?: string;
 };
 type __VLS_ModelProps = {

package/dist/types/vue/src/components/pin-input/PinInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pin-input/PinInput.vue"],"names":[],"mappings":"AAmFE,OAAO,EAA0B,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAIpF,KAAK,WAAW,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA6BN,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA+GxD,QAAA,MAAM,YAAY;;;;;;;iBA3JE,MAAM;YAJX,MAAM;UACR,MAAM,GAAG,QAAQ;6EAkK5B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PinInput.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/pin-input/PinInput.vue"],"names":[],"mappings":"AA+JE,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAI7B,KAAK,WAAW,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA+DN,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA6FxD,QAAA,MAAM,YAAY;;;;;;;iBA7KE,MAAM;YAJX,MAAM;UACR,MAAM,GAAG,QAAQ;6EAoL5B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "description": "The design system behind Hikarinagi: Vue 3 components built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/image/composables/useImage.ts

@@ -1,5 +1,6 @@
 import { computed, nextTick, onMounted, shallowRef, watch, type ComponentPublicInstance } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
+import { cssTimeToMs } from '../../../../../shared/src/lib/css-time'
 import { useImageResolver } from '../resolver'
 
 function ready(img: HTMLImageElement): Promise<void> {
@@ -75,7 +76,7 @@ export function useImage(
     const style = getComputedStyle(el)
     try {
       return el.animate(frames, {
-        duration: Number.parseFloat(style.getPropertyValue('--hn-duration-fast')) || 0,
+        duration: cssTimeToMs(style.getPropertyValue('--hn-duration-fast')),
         easing: style.getPropertyValue('--hn-ease-enter').trim() || 'linear',
         fill: 'forwards',
       })

package/src/components/pin-input/PinInput.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-  import { PinInputInput, PinInputRoot } from '../../primitives/pin-input'
-  import { computed } from 'vue'
+  import { computed, onBeforeUnmount, onMounted, shallowRef, toRef, useAttrs, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'
-  import { useUiLocale } from '../../locale'
-  import { pinInput, pinInputCell, type PinInputVariants } from './pin-input.variants'
+  import { useDirection } from '../../primitives/utils/useDirection'
+  import {
+    createPinInput,
+    pinCells,
+    pinInputValue,
+    type PinInputController,
+    type PinInputSelection,
+  } from '../../../../shared/src/primitives/pin-input'
+  import {
+    pinInput,
+    pinInputCaret,
+    pinInputCell,
+    pinInputNative,
+    type PinInputVariants,
+  } from './pin-input.variants'
 
-  defineOptions({ name: 'HnPinInput' })
+  defineOptions({ name: 'HnPinInput', inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
@@ -20,6 +32,8 @@
       size?: PinInputVariants['size']
       disabled?: boolean
       invalid?: boolean
+      required?: boolean
+      dir?: 'ltr' | 'rtl'
       class?: string
     }>(),
     { length: 6, type: 'text', placeholder: '' },
@@ -29,47 +43,103 @@
 
   const model = defineModel<string>({ default: '' })
 
-  const t = useUiLocale()
-
-  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+  const attrs = useAttrs()
+  const dir = useDirection(toRef(props, 'dir'))
+  const { id, labelledBy, invalid, disabled, describedBy } = useFieldControl({
     invalid: () => props.invalid,
     disabled: () => props.disabled,
   })
 
-  const cells = computed(() => Array.from({ length: props.length }, (_, i) => model.value[i] ?? ''))
+  const root = shallowRef<HTMLElement | null>(null)
+  const input = shallowRef<HTMLInputElement | null>(null)
+  const selection = shallowRef<PinInputSelection>({ focused: false, start: 0, end: 0 })
+  const shown = computed(() => pinInputValue(model.value ?? '', props.length))
+  const cells = computed(() => pinCells(shown.value, props.length, selection.value))
+  const rest = computed(() => {
+    const {
+      id: _id,
+      autofocus: _autofocus,
+      'aria-label': _label,
+      'aria-labelledby': _labelledBy,
+      'aria-describedby': _describedBy,
+      ...other
+    } = attrs
+    return other
+  })
+
+  let controller: PinInputController | undefined
+
+  onMounted(() => {
+    controller = createPinInput(input.value!, {
+      length: () => props.length,
+      numeric: () => props.type === 'number',
+      value: () => model.value ?? '',
+      rtl: () => dir.value === 'rtl',
+      cells: () => root.value!.querySelectorAll('[data-hn-pin-cell]'),
+      change: value => {
+        model.value = value
+      },
+      select: value => {
+        selection.value = value
+      },
+    })
+  })
+  onBeforeUnmount(() => controller?.dispose())
 
-  function update(value: (string | number)[] | undefined) {
-    const next = (value ?? []).map(cell => (cell === undefined ? '' : String(cell))).join('')
-    if (next !== model.value) model.value = next
-  }
+  watch([shown, () => props.type], () => controller?.sync(), { flush: 'post' })
+  watch(model, value => {
+    if ((value ?? '').length >= props.length) emit('complete', pinInputValue(value, props.length))
+  })
 </script>
 
 <template>
-  <PinInputRoot
-    role="group"
-    :aria-labelledby="labelledBy"
-    :aria-describedby="describedBy"
-    :model-value="cells"
-    :type="props.type"
-    :mask="props.mask"
-    :otp="props.otp"
-    :placeholder="props.placeholder"
-    :name="props.name"
-    :disabled="disabled"
+  <div
+    v-bind="rest"
+    ref="root"
+    :dir="dir"
     data-hn-pin-input
+    data-hn-field-group
+    :data-complete="shown.length >= props.length ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
     :data-invalid="invalid ? '' : undefined"
-    :class="cn(pinInput(), props.class)"
-    @update:model-value="update"
-    @complete="value => emit('complete', value.map(String).join(''))"
+    :class="cn(pinInput({ size: props.size }), props.class)"
   >
-    <PinInputInput
-      v-for="index in props.length"
+    <div
+      v-for="(cell, index) in cells"
       :key="index"
-      :index="index - 1"
-      :aria-label="t.pinInput.cellLabel(index, props.length)"
-      :aria-invalid="invalid || undefined"
+      data-hn-pin-cell
+      aria-hidden="true"
+      :data-filled="cell.char ? '' : undefined"
+      :data-state="cell.active ? 'active' : undefined"
+      :data-disabled="disabled ? '' : undefined"
       :data-invalid="invalid ? '' : undefined"
       :class="pinInputCell({ variant: props.variant, size: props.size })"
+    >
+      <span v-if="cell.caret" :class="pinInputCaret()" />
+      <template v-else>
+        {{ cell.char ? (props.mask ? '•' : cell.char) : props.placeholder }}
+      </template>
+    </div>
+    <input
+      :id="id"
+      ref="input"
+      :type="props.mask ? 'password' : 'text'"
+      :name="props.name"
+      :value.attr="shown"
+      :inputmode="props.type === 'number' ? 'numeric' : 'text'"
+      :pattern="props.type === 'number' ? '[0-9]*' : undefined"
+      :autocomplete="props.otp ? 'one-time-code' : 'off'"
+      autocapitalize="none"
+      autocorrect="off"
+      spellcheck="false"
+      :autofocus="(attrs.autofocus as boolean | undefined) || undefined"
+      :disabled="disabled"
+      :required="props.required || undefined"
+      :aria-label="attrs['aria-label'] as string | undefined"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="describedBy"
+      :aria-invalid="invalid || undefined"
+      :class="pinInputNative()"
     />
-  </PinInputRoot>
+  </div>
 </template>

package/dist/shared/primitives/pin-input/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 UnoVue <https://github.com/unovue>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/types/vue/src/primitives/pin-input/PinInputInput.d.ts

@@ -1,52 +0,0 @@
-import { type PropType } from 'vue';
-import { type PrimitiveProps } from '../primitive';
-export interface PinInputInputProps {
-    index: number;
-    disabled?: boolean;
-    asChild?: boolean;
-    as?: PrimitiveProps['as'];
-}
-export declare const PinInputInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    asChild: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    as: {
-        type: PropType<PrimitiveProps["as"]>;
-        required: false;
-        default: string;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    index: {
-        type: NumberConstructor;
-        required: true;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    asChild: {
-        type: BooleanConstructor;
-        required: false;
-    };
-    as: {
-        type: PropType<PrimitiveProps["as"]>;
-        required: false;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    as: import("../primitive").AsTag | import("vue").Component | undefined;
-    disabled: boolean;
-    asChild: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=PinInputInput.d.ts.map

package/dist/types/vue/src/primitives/pin-input/PinInputInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinInputInput.d.ts","sourceRoot":"","sources":["../../../../../../src/primitives/pin-input/PinInputInput.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAA;AAcZ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAK7D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;CAC1B;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;cAOK,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;cAA9B,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;;;;;;;;4EA4K3D,CAAA"}