react-flick-keyboard 0.1.1

package/dist/index.umd.js

@@ -0,0 +1,48 @@
+(function(O,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react"),require("framer-motion")):typeof define=="function"&&define.amd?define(["exports","react","framer-motion"],p):(O=typeof globalThis<"u"?globalThis:O||self,p(O.ReactFlickKeyboard={},O.React,O.Motion))})(this,function(O,p,$){"use strict";const le={a:{center:"あ",left:"い",up:"う",right:"え",down:"お"},ka:{center:"か",left:"き",up:"く",right:"け",down:"こ"},sa:{center:"さ",left:"し",up:"す",right:"せ",down:"そ"},ta:{center:"た",left:"ち",up:"つ",right:"て",down:"と"},na:{center:"な",left:"に",up:"ぬ",right:"ね",down:"の"},ha:{center:"は",left:"ひ",up:"ふ",right:"へ",down:"ほ"},ma:{center:"ま",left:"み",up:"む",right:"め",down:"も"},ya:{center:"や",left:"「",up:"ゆ",right:"」",down:"よ"},ra:{center:"ら",left:"り",up:"る",right:"れ",down:"ろ"},wa:{center:"わ",left:"を",up:"ん",right:"ー"},symbols:{center:"、",left:"。",up:"？",right:"！"}},fe=[["a","ka","sa"],["ta","na","ha"],["ma","ya","ra"],["modifier","wa","symbols"]],B={a:["あ","い","う","え","お","ぁ","ぃ","ぅ","ぇ","ぉ"],ka:["か","き","く","け","こ"],sa:["さ","し","す","せ","そ"],ta:["た","ち","つ","て","と","っ"],na:["な","に","ぬ","ね","の"],ha:["は","ひ","ふ","へ","ほ"],ma:["ま","み","む","め","も"],ya:["や","ゆ","よ","ゃ","ゅ","ょ"],ra:["ら","り","る","れ","ろ"],wa:["わ","を","ん","ー"],symbols:["、","。","？","！"]},ee={は:"ば",ひ:"び",ふ:"ぶ",へ:"べ",ほ:"ぼ",ば:"ぱ",び:"ぴ",ぶ:"ぷ",べ:"ぺ",ぼ:"ぽ",ぱ:"は",ぴ:"ひ",ぷ:"ふ",ぺ:"へ",ぽ:"ほ",つ:"っ",っ:"づ",づ:"つ",か:"が",が:"か",き:"ぎ",ぎ:"き",く:"ぐ",ぐ:"く",け:"げ",げ:"け",こ:"ご",ご:"こ",さ:"ざ",ざ:"さ",し:"じ",じ:"し",す:"ず",ず:"す",せ:"ぜ",ぜ:"せ",そ:"ぞ",ぞ:"そ",た:"だ",だ:"た",ち:"ぢ",ぢ:"ち",て:"で",で:"て",と:"ど",ど:"と",あ:"ぁ",ぁ:"あ",い:"ぃ",ぃ:"い",う:"ぅ",ぅ:"う",え:"ぇ",ぇ:"え",お:"ぉ",ぉ:"お",や:"ゃ",ゃ:"や",ゆ:"ゅ",ゅ:"ゆ",よ:"ょ",ょ:"よ",わ:"ゎ",ゎ:"わ"};function de(s){return ee[s]||s}function ve(s){return s in ee}function he({onInput:s,onReplace:a,disabled:y=!1,currentInput:v=""}){const[n,u]=p.useState(""),[h,x]=p.useState(null),[i,_]=p.useState(null),c=p.useRef(null);p.useEffect(()=>{v!==n&&u(v)},[v,n]),p.useEffect(()=>(i&&(c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{_(null)},1200)),()=>{c.current&&clearTimeout(c.current)}),[i]);const T=p.useCallback((E,l,w)=>{if(!y){if(i&&i.keyName!==l&&_(null),w&&i&&i.keyName===l){const D=Date.now();if(D-i.timestamp<1200){const R=B[l];if(R){const W=R[i.index],J=(i.index+1)%R.length,K=R[J];a?a(W,K):s(K),u(K),_({keyName:l,index:J,timestamp:D});return}}}if(u(E),s(E),w&&B[l]){const k=B[l].indexOf(E);_({keyName:l,index:k>=0?k:0,timestamp:Date.now()})}else _(null)}},[y,s,a,i]),j=p.useCallback(()=>{if(!(y||!n)&&ve(n)){const E=de(n);E!==n&&(u(E),a?a(n,E):s(E),_(null))}},[y,s,a,n]);return{lastChar:n,activeGuide:h,setActiveGuide:x,toggleState:i,handleCharInput:T,handleModifier:j}}var re={exports:{}},N={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var pe;function He(){if(pe)return N;pe=1;var s=p,a=Symbol.for("react.element"),y=Symbol.for("react.fragment"),v=Object.prototype.hasOwnProperty,n=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function h(x,i,_){var c,T={},j=null,E=null;_!==void 0&&(j=""+_),i.key!==void 0&&(j=""+i.key),i.ref!==void 0&&(E=i.ref);for(c in i)v.call(i,c)&&!u.hasOwnProperty(c)&&(T[c]=i[c]);if(x&&x.defaultProps)for(c in i=x.defaultProps,i)T[c]===void 0&&(T[c]=i[c]);return{$$typeof:a,type:x,key:j,ref:E,props:T,_owner:n.current}}return N.Fragment=y,N.jsx=h,N.jsxs=h,N}var U={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var be;function Je(){return be||(be=1,process.env.NODE_ENV!=="production"&&function(){var s=p,a=Symbol.for("react.element"),y=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),n=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),h=Symbol.for("react.provider"),x=Symbol.for("react.context"),i=Symbol.for("react.forward_ref"),_=Symbol.for("react.suspense"),c=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),E=Symbol.for("react.offscreen"),l=Symbol.iterator,w="@@iterator";function D(e){if(e===null||typeof e!="object")return null;var r=l&&e[l]||e[w];return typeof r=="function"?r:null}var k=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function R(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),o=1;o<r;o++)t[o-1]=arguments[o];W("error",e,t)}}function W(e,r,t){{var o=k.ReactDebugCurrentFrame,b=o.getStackAddendum();b!==""&&(r+="%s",t=t.concat([b]));var g=t.map(function(d){return String(d)});g.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,g)}}var J=!1,K=!1,er=!1,rr=!1,tr=!1,_e;_e=Symbol.for("react.module.reference");function nr(e){return!!(typeof e=="string"||typeof e=="function"||e===v||e===u||tr||e===n||e===_||e===c||rr||e===E||J||K||er||typeof e=="object"&&e!==null&&(e.$$typeof===j||e.$$typeof===T||e.$$typeof===h||e.$$typeof===x||e.$$typeof===i||e.$$typeof===_e||e.getModuleId!==void 0))}function ar(e,r,t){var o=e.displayName;if(o)return o;var b=r.displayName||r.name||"";return b!==""?t+"("+b+")":t}function Re(e){return e.displayName||"Context"}function F(e){if(e==null)return null;if(typeof e.tag=="number"&&R("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case y:return"Portal";case u:return"Profiler";case n:return"StrictMode";case _:return"Suspense";case c:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case x:var r=e;return Re(r)+".Consumer";case h:var t=e;return Re(t._context)+".Provider";case i:return ar(e,e.render,"ForwardRef");case T:var o=e.displayName||null;return o!==null?o:F(e.type)||"Memo";case j:{var b=e,g=b._payload,d=b._init;try{return F(d(g))}catch{return null}}}return null}var Y=Object.assign,G=0,we,Te,Ce,Se,Oe,je,ke;function De(){}De.__reactDisabledLog=!0;function or(){{if(G===0){we=console.log,Te=console.info,Ce=console.warn,Se=console.error,Oe=console.group,je=console.groupCollapsed,ke=console.groupEnd;var e={configurable:!0,enumerable:!0,value:De,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}G++}}function ir(){{if(G--,G===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:Y({},e,{value:we}),info:Y({},e,{value:Te}),warn:Y({},e,{value:Ce}),error:Y({},e,{value:Se}),group:Y({},e,{value:Oe}),groupCollapsed:Y({},e,{value:je}),groupEnd:Y({},e,{value:ke})})}G<0&&R("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var te=k.ReactCurrentDispatcher,ne;function z(e,r,t){{if(ne===void 0)try{throw Error()}catch(b){var o=b.stack.trim().match(/\n( *(at )?)/);ne=o&&o[1]||""}return`
+`+ne+e}}var ae=!1,Q;{var sr=typeof WeakMap=="function"?WeakMap:Map;Q=new sr}function Pe(e,r){if(!e||ae)return"";{var t=Q.get(e);if(t!==void 0)return t}var o;ae=!0;var b=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var g;g=te.current,te.current=null,or();try{if(r){var d=function(){throw Error()};if(Object.defineProperty(d.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(d,[])}catch(M){o=M}Reflect.construct(e,[],d)}else{try{d.call()}catch(M){o=M}e.call(d.prototype)}}else{try{throw Error()}catch(M){o=M}e()}}catch(M){if(M&&o&&typeof M.stack=="string"){for(var f=M.stack.split(`
+`),P=o.stack.split(`
+`),C=f.length-1,S=P.length-1;C>=1&&S>=0&&f[C]!==P[S];)S--;for(;C>=1&&S>=0;C--,S--)if(f[C]!==P[S]){if(C!==1||S!==1)do if(C--,S--,S<0||f[C]!==P[S]){var A=`
+`+f[C].replace(" at new "," at ");return e.displayName&&A.includes("<anonymous>")&&(A=A.replace("<anonymous>",e.displayName)),typeof e=="function"&&Q.set(e,A),A}while(C>=1&&S>=0);break}}}finally{ae=!1,te.current=g,ir(),Error.prepareStackTrace=b}var X=e?e.displayName||e.name:"",I=X?z(X):"";return typeof e=="function"&&Q.set(e,I),I}function ur(e,r,t){return Pe(e,!1)}function cr(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function Z(e,r,t){if(e==null)return"";if(typeof e=="function")return Pe(e,cr(e));if(typeof e=="string")return z(e);switch(e){case _:return z("Suspense");case c:return z("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case i:return ur(e.render);case T:return Z(e.type,r,t);case j:{var o=e,b=o._payload,g=o._init;try{return Z(g(b),r,t)}catch{}}}return""}var V=Object.prototype.hasOwnProperty,Me={},Ae=k.ReactDebugCurrentFrame;function q(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);Ae.setExtraStackFrame(t)}else Ae.setExtraStackFrame(null)}function lr(e,r,t,o,b){{var g=Function.call.bind(V);for(var d in e)if(g(e,d)){var f=void 0;try{if(typeof e[d]!="function"){var P=Error((o||"React class")+": "+t+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw P.name="Invariant Violation",P}f=e[d](r,d,o,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(C){f=C}f&&!(f instanceof Error)&&(q(b),R("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",t,d,typeof f),q(null)),f instanceof Error&&!(f.message in Me)&&(Me[f.message]=!0,q(b),R("Failed %s type: %s",t,f.message),q(null))}}}var fr=Array.isArray;function oe(e){return fr(e)}function dr(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function vr(e){try{return Fe(e),!1}catch{return!0}}function Fe(e){return""+e}function Ye(e){if(vr(e))return R("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",dr(e)),Fe(e)}var Ie=k.ReactCurrentOwner,hr={key:!0,ref:!0,__self:!0,__source:!0},Le,Xe;function pr(e){if(V.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function br(e){if(V.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function mr(e,r){typeof e.ref=="string"&&Ie.current}function gr(e,r){{var t=function(){Le||(Le=!0,R("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function yr(e,r){{var t=function(){Xe||(Xe=!0,R("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var Er=function(e,r,t,o,b,g,d){var f={$$typeof:a,type:e,key:r,ref:t,props:d,_owner:g};return f._store={},Object.defineProperty(f._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(f,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(f,"_source",{configurable:!1,enumerable:!1,writable:!1,value:b}),Object.freeze&&(Object.freeze(f.props),Object.freeze(f)),f};function xr(e,r,t,o,b){{var g,d={},f=null,P=null;t!==void 0&&(Ye(t),f=""+t),br(r)&&(Ye(r.key),f=""+r.key),pr(r)&&(P=r.ref,mr(r,b));for(g in r)V.call(r,g)&&!hr.hasOwnProperty(g)&&(d[g]=r[g]);if(e&&e.defaultProps){var C=e.defaultProps;for(g in C)d[g]===void 0&&(d[g]=C[g])}if(f||P){var S=typeof e=="function"?e.displayName||e.name||"Unknown":e;f&&gr(d,S),P&&yr(d,S)}return Er(e,f,P,b,o,Ie.current,d)}}var ie=k.ReactCurrentOwner,Ne=k.ReactDebugCurrentFrame;function L(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);Ne.setExtraStackFrame(t)}else Ne.setExtraStackFrame(null)}var se;se=!1;function ue(e){return typeof e=="object"&&e!==null&&e.$$typeof===a}function Ue(){{if(ie.current){var e=F(ie.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function _r(e){return""}var We={};function Rr(e){{var r=Ue();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+
+Check the top-level render call using <`+t+">.")}return r}}function Ke(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=Rr(r);if(We[t])return;We[t]=!0;var o="";e&&e._owner&&e._owner!==ie.current&&(o=" It was passed a child from "+F(e._owner.type)+"."),L(e),R('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,o),L(null)}}function Ge(e,r){{if(typeof e!="object")return;if(oe(e))for(var t=0;t<e.length;t++){var o=e[t];ue(o)&&Ke(o,r)}else if(ue(e))e._store&&(e._store.validated=!0);else if(e){var b=D(e);if(typeof b=="function"&&b!==e.entries)for(var g=b.call(e),d;!(d=g.next()).done;)ue(d.value)&&Ke(d.value,r)}}}function wr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===i||r.$$typeof===T))t=r.propTypes;else return;if(t){var o=F(r);lr(t,e.props,"prop",o,e)}else if(r.PropTypes!==void 0&&!se){se=!0;var b=F(r);R("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",b||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&R("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Tr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var o=r[t];if(o!=="children"&&o!=="key"){L(e),R("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",o),L(null);break}}e.ref!==null&&(L(e),R("Invalid attribute `ref` supplied to `React.Fragment`."),L(null))}}var Ve={};function Be(e,r,t,o,b,g){{var d=nr(e);if(!d){var f="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(f+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var P=_r();P?f+=P:f+=Ue();var C;e===null?C="null":oe(e)?C="array":e!==void 0&&e.$$typeof===a?(C="<"+(F(e.type)||"Unknown")+" />",f=" Did you accidentally export a JSX literal instead of a component?"):C=typeof e,R("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",C,f)}var S=xr(e,r,t,b,g);if(S==null)return S;if(d){var A=r.children;if(A!==void 0)if(o)if(oe(A)){for(var X=0;X<A.length;X++)Ge(A[X],e);Object.freeze&&Object.freeze(A)}else R("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ge(A,e)}if(V.call(r,"key")){var I=F(e),M=Object.keys(r).filter(function(Dr){return Dr!=="key"}),ce=M.length>0?"{key: someKey, "+M.join(": ..., ")+": ...}":"{key: someKey}";if(!Ve[I+ce]){var kr=M.length>0?"{"+M.join(": ..., ")+": ...}":"{}";R(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,ce,I,kr,I),Ve[I+ce]=!0}}return e===v?Tr(S):wr(S),S}}function Cr(e,r,t){return Be(e,r,t,!0)}function Sr(e,r,t){return Be(e,r,t,!1)}var Or=Sr,jr=Cr;U.Fragment=v,U.jsx=Or,U.jsxs=jr}()),U}process.env.NODE_ENV==="production"?re.exports=He():re.exports=Je();var m=re.exports;function me({onModifier:s,disabled:a,lastChar:y,isHint:v=!1}){const[n,u]=p.useState(!1),h=()=>{a||(s(),"vibrate"in navigator&&navigator.vibrate(50))};return m.jsx("div",{className:"relative",children:m.jsx($.motion.button,{"aria-label":"Modifier key: dakuten, handakuten, small kana","aria-pressed":n,className:`
+          relative w-16 h-16 sm:w-18 sm:h-18 rounded-lg font-bold text-sm
+          bg-orange-100 dark:bg-orange-900 shadow-md
+          border-2 border-orange-300 dark:border-orange-600
+          ${a?"opacity-50 cursor-not-allowed":""}
+          ${n?"bg-orange-200 dark:bg-orange-800 border-orange-500":""}
+          ${v&&!n?"border-amber-500 dark:border-amber-400":""}
+        `,animate:v&&!n?{boxShadow:["0 0 0 0 rgba(251, 191, 36, 0.7)","0 0 0 4px rgba(251, 191, 36, 0)","0 0 0 0 rgba(251, 191, 36, 0)"]}:{boxShadow:"0 0 0 0 rgba(251, 191, 36, 0)"},transition:v&&!n?{duration:2,repeat:1/0,ease:"easeInOut"}:{duration:0},disabled:a,onClick:h,onTouchStart:()=>u(!0),onTouchEnd:()=>u(!1),onMouseDown:()=>u(!0),onMouseUp:()=>u(!1),onMouseLeave:()=>u(!1),whileTap:{scale:.95},children:m.jsxs("div",{className:"text-gray-800 dark:text-gray-100 flex flex-col items-center justify-center",children:[m.jsx("span",{className:"text-xl opacity-60 -translate-y-[-0.4em] self-end",children:"゛゜"}),m.jsx("span",{className:"text-md font-bold -translate-y-[0.4em]",children:"小"})]})})})}const ze=5,Qe=300,ge=20,Ze=1e3;function ye(){const[s,a]=p.useState(!1),[y,v]=p.useState("center"),n=p.useRef(null),u=p.useRef(null),h=p.useRef(!1);p.useEffect(()=>{const l=D=>{if(!n.current||u.current===null)return;const k=Array.from(D.touches).find(W=>W.identifier===u.current);if(!k)return;D.preventDefault(),n.current.endX=k.clientX,n.current.endY=k.clientY,n.current.endTime=Date.now();const R=H(n.current);v(R)},w=D=>{u.current===null||!Array.from(D.changedTouches).find(R=>R.identifier===u.current)||(u.current=null)};return document.addEventListener("touchmove",l,{passive:!1}),document.addEventListener("touchend",w),()=>{document.removeEventListener("touchmove",l),document.removeEventListener("touchend",w)}},[]);const x=p.useCallback(l=>{h.current=!0,l.preventDefault();const w=l.touches[0];u.current=w.identifier,a(!0),v("center"),n.current={startX:w.clientX,startY:w.clientY,endX:w.clientX,endY:w.clientY,startTime:Date.now(),endTime:Date.now()}},[]),i=p.useCallback(l=>{l.preventDefault()},[]),_=p.useCallback(l=>w=>{if(a(!1),n.current){const D=w.changedTouches[0];n.current.endX=D.clientX,n.current.endY=D.clientY,n.current.endTime=Date.now();const k=H(n.current);v("center"),l&&l(k),n.current=null}},[]),c=p.useRef(null),T=p.useCallback(l=>{h.current||(a(!0),v("center"),c.current={startX:l.clientX,startY:l.clientY,startTime:Date.now()})},[]),j=p.useCallback(l=>{if(h.current||!c.current||!s)return;const w={startX:c.current.startX,startY:c.current.startY,endX:l.clientX,endY:l.clientY,startTime:c.current.startTime,endTime:Date.now()},D=H(w);v(D)},[s]),E=p.useCallback(l=>w=>{if(!h.current&&(a(!1),c.current)){const D={startX:c.current.startX,startY:c.current.startY,endX:w.clientX,endY:w.clientY,startTime:c.current.startTime,endTime:Date.now()},k=H(D);v("center"),l&&l(k),c.current=null}},[]);return{isPressed:s,currentDirection:y,touchHandlers:{onTouchStart:x,onTouchMove:i,onTouchEnd:_},mouseHandlers:{onMouseDown:T,onMouseMove:j,onMouseUp:E}}}function H(s){const a=s.endX-s.startX,y=s.endY-s.startY,v=s.endTime-s.startTime,n=Math.sqrt(a*a+y*y);if(v<Qe&&n<ze||v>Ze&&n<ge||n<ge)return"center";const u=Math.abs(a),h=Math.abs(y);return u>h*.8?a>0?"right":"left":h>u*.8?y>0?"down":"up":u>h?a>0?"right":"left":y>0?"down":"up"}function qe(s,a=40){switch(s){case"up":return{x:0,y:-a};case"down":return{x:0,y:a};case"left":return{x:-a,y:0};case"right":return{x:a,y:0};default:return{x:0,y:0}}}function Ee({keyName:s,hiraganaKey:a,onInput:y,disabled:v,onGuideUpdate:n,hintTarget:u=null}){const{isPressed:h,currentDirection:x,touchHandlers:i,mouseHandlers:_}=ye(),c=p.useRef(null);p.useEffect(()=>{if(h&&c.current){const l=c.current.getBoundingClientRect();n({keyName:s,hiraganaKey:a,position:{x:l.left+l.width/2,y:l.top+l.height/2},direction:x})}else n(null)},[h,x,s,a,n]);const T=l=>{if(v)return;const w=a[l];w&&(y(w,s,l==="center"),"vibrate"in navigator&&navigator.vibrate(50))},j=s==="symbols",E=(u==null?void 0:u.key)===s;return m.jsx("div",{className:"relative",children:m.jsx($.motion.button,{ref:c,"aria-label":`${a.center} key`,"aria-pressed":h,className:`
+          relative w-16 h-16 sm:w-18 sm:h-18 rounded-lg font-bold
+          bg-white dark:bg-gray-800 shadow-md
+          border-2 border-gray-300 dark:border-gray-600
+          ${v?"opacity-50 cursor-not-allowed":""}
+          ${h?"bg-blue-100 dark:bg-blue-900 border-blue-500":""}
+          ${E&&!h?"border-amber-500 dark:border-amber-400":""}
+        `,animate:E&&!h?{boxShadow:["0 0 0 0 rgba(251, 191, 36, 0.7)","0 0 0 4px rgba(251, 191, 36, 0)","0 0 0 0 rgba(251, 191, 36, 0)"]}:{boxShadow:"0 0 0 0 rgba(251, 191, 36, 0)"},transition:E&&!h?{duration:2,repeat:1/0,ease:"easeInOut"}:{duration:0},disabled:v,...i,onTouchEnd:i.onTouchEnd(T),..._,onMouseUp:_.onMouseUp(T),children:j?m.jsxs("div",{className:"flex flex-col items-center justify-center text-gray-800 dark:text-gray-100 text-sm leading-tight",children:[m.jsxs("div",{className:"flex gap-0.5",children:[m.jsx("span",{children:a.left}),m.jsx("span",{children:a.center})]}),m.jsxs("div",{className:"flex gap-0.5",children:[m.jsx("span",{children:a.up}),m.jsx("span",{children:a.right})]})]}):m.jsx("span",{className:"text-gray-800 dark:text-gray-100 text-xl",children:a.center})})})}function xe({keyName:s,hiraganaKey:a,position:y,direction:v,isModifier:n=!1,hintTarget:u=null}){const h=n?["center","right","down"]:["center","up","down","left","right"],x={center:"゛",right:"゜",down:"小",up:"",left:""};return m.jsx("div",{className:"fixed inset-0 pointer-events-none",style:{zIndex:99999},children:h.map(i=>{const _=a[i];if(!_)return null;const c=qe(i,60),T=v===i,j=(u==null?void 0:u.key)===s&&(u==null?void 0:u.direction)===i;return m.jsx("div",{className:"absolute",style:{left:y.x+c.x,top:y.y+c.y,transform:"translate(-50%, -50%)"},children:m.jsx($.motion.div,{className:`
+                text-xl font-bold
+                px-3 py-2 rounded-lg shadow-lg
+                ${T?n?"bg-orange-500 text-white ring-4 ring-orange-300":"bg-blue-500 text-white ring-4 ring-blue-300":j?"bg-amber-400 text-white border-2 border-amber-500":"bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 border-2 border-gray-300 dark:border-gray-500"}
+              `,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:T?1.25:1,boxShadow:j?["0 0 0 0 rgba(251, 191, 36, 0.7)","0 0 0 4px rgba(251, 191, 36, 0)","0 0 0 0 rgba(251, 191, 36, 0)"]:void 0},transition:j?{boxShadow:{duration:2,repeat:1/0,ease:"easeInOut"},scale:{duration:.15,ease:"easeOut"}}:{duration:.15,ease:"easeOut"},children:n?m.jsxs("div",{className:"flex flex-col items-center",children:[m.jsx("span",{className:"text-xs opacity-70",children:x[i]}),m.jsx("span",{className:"text-xl",children:_})]}):_})},i)})})}function $e({onInput:s,onReplace:a,disabled:y=!1,hintTarget:v=null,hintModifier:n=!1,currentInput:u=""}){const{lastChar:h,activeGuide:x,setActiveGuide:i,handleCharInput:_,handleModifier:c}=he({onInput:s,onReplace:a,disabled:y,currentInput:u});return m.jsxs("div",{className:"w-full max-w-sm relative",style:{touchAction:"none"},role:"group","aria-label":"Japanese Flick Keyboard",children:[m.jsx("div",{className:"space-y-2 relative",children:fe.map((T,j)=>m.jsx("div",{className:"flex justify-center gap-2 relative",children:T.map(E=>E==="modifier"?m.jsx(me,{onModifier:c,disabled:y||!h,lastChar:h,isHint:n},E):m.jsx(Ee,{keyName:E,hiraganaKey:le[E],onInput:_,disabled:y,onGuideUpdate:i,hintTarget:v},E))},j))}),x&&m.jsx(xe,{keyName:x.keyName,hiraganaKey:x.hiraganaKey,position:x.position,direction:x.direction,isModifier:x.isModifier,lastChar:x.lastChar,hintTarget:v})]})}O.FLICK_KEYBOARD_LAYOUT=le,O.FlickKeyboard=$e,O.GlobalFlickGuide=xe,O.KEYBOARD_GRID=fe,O.KeyButton=Ee,O.MODIFIER_CYCLE_MAP=ee,O.ModifierKey=me,O.TOGGLE_SEQUENCES=B,O.applyModifierCycle=de,O.canApplyModifierCycle=ve,O.useFlickDetection=ye,O.useFlickKeyboard=he,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.flex{display:flex}.h-16{height:4rem}.w-16{width:4rem}.w-full{width:100%}.max-w-sm{max-width:24rem}.-translate-y-\[-0\.4em\]{--tw-translate-y: .4em;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-\[0\.4em\]{--tw-translate-y: -.4em;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:.125rem}.gap-2{gap:.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.self-end{align-self:flex-end}.rounded-lg{border-radius:.5rem}.border-2{border-width:2px}.border-amber-500{--tw-border-opacity: 1;border-color:rgb(245 158 11 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-orange-300{--tw-border-opacity: 1;border-color:rgb(253 186 116 / var(--tw-border-opacity, 1))}.border-orange-500{--tw-border-opacity: 1;border-color:rgb(249 115 22 / var(--tw-border-opacity, 1))}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}.bg-orange-200{--tw-bg-opacity: 1;background-color:rgb(254 215 170 / var(--tw-bg-opacity, 1))}.bg-orange-500{--tw-bg-opacity: 1;background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.leading-tight{line-height:1.25}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.ring-4{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-blue-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}.ring-orange-300{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity, 1))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (prefers-color-scheme: dark){.dark\:border-amber-400{--tw-border-opacity: 1;border-color:rgb(251 191 36 / var(--tw-border-opacity, 1))}.dark\:border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.dark\:border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:border-orange-600{--tw-border-opacity: 1;border-color:rgb(234 88 12 / var(--tw-border-opacity, 1))}.dark\:bg-blue-900{--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:bg-orange-800{--tw-bg-opacity: 1;background-color:rgb(154 52 18 / var(--tw-bg-opacity, 1))}.dark\:bg-orange-900{--tw-bg-opacity: 1;background-color:rgb(124 45 18 / var(--tw-bg-opacity, 1))}.dark\:text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}

package/dist/types/index.d.ts

@@ -0,0 +1,19 @@
+export type FlickDirection = 'center' | 'up' | 'down' | 'left' | 'right';
+export interface HiraganaKey {
+    center: string;
+    up?: string;
+    down?: string;
+    left?: string;
+    right?: string;
+}
+export interface KeyboardLayout {
+    [key: string]: HiraganaKey;
+}
+export interface TouchInfo {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+    startTime: number;
+    endTime: number;
+}

package/dist/utils/hiragana-data.d.ts

@@ -0,0 +1,8 @@
+import { KeyboardLayout } from '../types';
+
+export declare const FLICK_KEYBOARD_LAYOUT: KeyboardLayout;
+export declare const KEYBOARD_GRID: string[][];
+export declare const TOGGLE_SEQUENCES: Record<string, string[]>;
+export declare const MODIFIER_CYCLE_MAP: Record<string, string>;
+export declare function applyModifierCycle(char: string): string;
+export declare function canApplyModifierCycle(char: string): boolean;

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "react-flick-keyboard",
+  "version": "0.1.1",
+  "description": "A reusable Japanese Flick Keyboard component for React",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite -c vite.config.example.ts",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "release": "npm version patch && git push --follow-tags",
+    "release:minor": "npm version minor && git push --follow-tags",
+    "release:major": "npm version major && git push --follow-tags"
+  },
+  "peerDependencies": {
+    "framer-motion": "^11.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "framer-motion": "^11.0.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/coverage-v8": "^1.6.1",
+    "autoprefixer": "^10.4.19",
+    "jsdom": "^23.0.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "react",
+    "keyboard",
+    "japanese",
+    "flick",
+    "hiragana",
+    "input"
+  ],
+  "author": "jarry3369",
+  "license": "MIT"
+}