@clicktap/ui 0.35.0 → 0.35.2

package/components/PinInput/PinInput.js

@@ -1 +1 @@
-"use client";import{jsxs as y,jsx as m}from"react/jsx-runtime";import{useState as L,useRef as P,useEffect as $,useCallback as g}from"react";import{Group as R,Label as T}from"react-aria-components";import{cn as d}from"../../utils/cn.js";function Z({autoFocus:A=!1,description:k,errorMessage:b,isDisabled:j=!1,isInvalid:w=!1,isMasked:I=!1,isRequired:N=!0,label:V,length:n=6,name:_,onChange:c,value:v="",type:h="numeric",validationBehavior:S,className:z,classNames:p,...B}){const[r,D]=L(()=>Array(n).fill("")),l=P([]);$(()=>{l.current=l.current.slice(0,n)},[n]),$(()=>{A&&l.current[0]?.focus()},[A]);const J=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&l.current?.[u+1]?.focus();const o=r.map((s,f)=>f===u?e:s);D(o);const a=o.join("");c?.(a)},[r,n,c]),K=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],o={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(o[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((f,x)=>x===e-1?"":f);D(a),l.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((f,x)=>x===e+1?"":f);D(a),l.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}},[r,h,c]),E=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const o=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(o.length===0)return;const a=[...r];let s=e;for(let i=0;i<o.length&&e+i<n;i++)a[e+i]=o[i],s=e+i;D(a);const f=a.join("");c?.(f);const x=s+1<n?s+1:n-1;l.current[x]?.focus()},[r,h,n,c]);return y(R,{className:d("flex flex-wrap gap-2",z),"aria-label":V,...B,children:[V&&m(T,{className:d("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:V}),r.map((t,e)=>m("div",{className:d("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),children:m("input",{className:d("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",p?.input),onChange:J,onKeyDown:K,onPaste:E,type:I?"password":"text",autoComplete:"one-time-code",ref:u=>{l.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:j,required:N,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&y("div",{className:d("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[k&&m("p",{className:d("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:d("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{Z as PinInput,Z as default};
+"use client";import{jsxs as y,jsx as m}from"react/jsx-runtime";import{useState as E,useRef as L,useEffect as $,useCallback as g}from"react";import{Group as P,Label as R}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function Z({autoFocus:A=!1,description:k,errorMessage:b,isDisabled:j=!1,isInvalid:w=!1,isMasked:I=!1,isRequired:N=!0,label:V,length:n=6,name:T,onChange:c,value:_="",type:h="numeric",validationBehavior:S,className:z,classNames:p,...B}){const[r,D]=E(()=>Array(n).fill("")),l=L([]);$(()=>{l.current=l.current.slice(0,n)},[n]),$(()=>{A&&l.current[0]?.focus()},[A]);const J=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&l.current?.[u+1]?.focus();const o=r.map((s,d)=>d===u?e:s);D(o);const a=o.join("");c?.(a)},[r,n,c]),K=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],o={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(o[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((d,x)=>x===e-1?"":d);D(a),l.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((d,x)=>x===e+1?"":d);D(a),l.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");c?.(s)}},[r,h,c]),v=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const o=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(o.length===0)return;const a=[...r];let s=e;for(let i=0;i<o.length&&e+i<n;i++)a[e+i]=o[i],s=e+i;D(a);const d=a.join("");c?.(d);const x=s+1<n?s+1:n-1;l.current[x]?.focus()},[r,h,n,c]);return y(P,{className:f("flex flex-wrap gap-2",z),"aria-label":V,...B,children:[V&&m(R,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:V}),r.map((t,e)=>m("div",{className:f("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),children:m("input",{className:f("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","[&::-ms-reveal]:hidden [&::-ms-clear]:hidden","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",p?.input),onChange:J,onKeyDown:K,onPaste:v,type:I?"password":"text",autoComplete:"one-time-code",ref:u=>{l.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:j,required:N,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&y("div",{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[k&&m("p",{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{Z as PinInput,Z as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",

package/components/Avatar/Avatar.stories.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from './Avatar';
-import { AvatarGroup } from './AvatarGroup/AvatarGroup';
-declare function Layout({ children }: {
-    children: ReactNode;
-}): ReactNode;
-type Story = StoryObj<typeof Avatar>;
-type StoryGroup = StoryObj<typeof AvatarGroup>;
-declare const meta: Meta<typeof Layout>;
-export default meta;
-export declare const AvatarComponent: Story;
-export declare const AvatarGroupComponent: StoryGroup;

package/components/Badge/Badge.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Badge } from './Badge';
-import { BadgeProps } from './Badge.types';
-type Story = StoryObj<typeof Badge>;
-declare function Component(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
-declare const meta: Meta<typeof Component>;
-export default meta;
-export declare const Example: Story;

package/components/Divider/Divider.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Divider } from './Divider';
-type Story = StoryObj<typeof Divider>;
-declare const meta: Meta<typeof Divider>;
-export default meta;
-export declare const Example: Story;

package/components/Link/Link.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Link } from './Link';
-type Story = StoryObj<typeof Link>;
-declare const meta: Meta<typeof Link>;
-export default meta;
-export declare const Example: Story;

package/components/Meter/Meter.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Meter } from './Meter';
-type Story = StoryObj<typeof Meter>;
-declare const meta: Meta<typeof Meter>;
-export default meta;
-export declare const Base: Story;

package/components/Time/Time.stories.d.ts

@@ -1,20 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Time } from './Time';
-type Story = StoryObj<typeof Time>;
-/**
- * `<Time>` reads the configured ("server") timezone and the viewer's ("local")
- * timezone from `TimezoneProvider`. In the app the provider is fed by the
- * server-resolved `displayTimezone` (server) and the viewer's cookie (local).
- */
-declare const meta: Meta<typeof Time>;
-export default meta;
-/** Interactive playground — toggle `local`/`showZone` and the Intl format options. */
-export declare const Example: Story;
-/** Default: renders in the configured ("server") timezone — the hydration- & index-safe baseline. */
-export declare const ServerTime: Story;
-/** Opt-in: renders in the viewer's ("client") timezone via the `local` prop. */
-export declare const LocalTime: Story;
-/** Same instant, both modes side by side — the configured zone vs. the viewer's zone. */
-export declare const ServerVsLocal: Story;
-/** Invalid/empty input renders the `fallback` (default `-`). */
-export declare const Fallback: Story;

package/components/TimeInput/TimeInput.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { TimeInput } from './TimeInput';
-type Story = StoryObj<typeof TimeInput>;
-declare const meta: Meta<typeof TimeInput>;
-export default meta;
-export declare const Base: Story;

package/components/ToggleButton/ToggleButton.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ToggleButton } from './ToggleButton';
-type Story = StoryObj<typeof ToggleButton>;
-declare const meta: Meta<typeof ToggleButton>;
-export default meta;
-export declare const Example: Story;