geez-input 1.0.5 → 1.0.6

package/README.md

@@ -166,7 +166,7 @@ Type a consonant followed by a vowel:
 ### Double Vowels
 Type the same vowel twice for alternate forms:
 - `ha` → ሃ
-- `lie` → ሌ
+- `lee` → ሌ
 
 ### Punctuation
 - `:` → ፡ (word separator)

package/dist/components/geez-input.d.ts

@@ -23,21 +23,16 @@ export interface GeezInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * This is an alias for inputClassName for consistency with standard HTML inputs
      */
     className?: string;
-    /**
-     * Additional CSS classes to apply to the toggle button
-     */
-    buttonClassName?: string;
 }
 /**
- * Styled input component with built-in Geez phonetic keyboard support
+ * Input component with built-in Geez phonetic keyboard support
  *
  * Features:
- * - Toggle button to switch between Geez and English input modes
+ * - Press Cmd+Shift+S (or Ctrl+Shift+S) to toggle between Geez and English input modes
  * - Phonetic transformation (type 'hello' → 'ሀልሎ')
  * - Full support for controlled and uncontrolled component patterns
  * - Forward ref support for form libraries
- * - Styled with CSS classes that can be customized via className props
- * - Supports Tailwind CSS, CSS modules, or any CSS framework
+ * - Supports any CSS framework via className props
  *
  * @example
  * \`\`\`tsx
@@ -68,27 +63,5 @@ export interface GeezInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
  *   return <GeezInput {...register('name')} />
  * }
  * \`\`\`
- *
- * @example
- * \`\`\`tsx
- * // Custom styling with Tailwind CSS
- * <GeezInput
- *   wrapperClassName="mb-4"
- *   inputClassName="rounded-lg shadow-md"
- *   buttonClassName="hover:opacity-80"
- *   placeholder="Type here..."
- * />
- * \`\`\`
- *
- * @example
- * \`\`\`tsx
- * // Custom styling with CSS classes
- * <GeezInput
- *   wrapperClassName="my-custom-wrapper"
- *   inputClassName="my-custom-input"
- *   buttonClassName="my-custom-button"
- *   placeholder="Type here..."
- * />
- * \`\`\`
  */
 export declare const GeezInput: React.ForwardRefExoticComponent<GeezInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/geez-textarea.d.ts

@@ -23,22 +23,16 @@ export interface GeezTextAreaProps extends Omit<React.TextareaHTMLAttributes<HTM
      * This is an alias for textareaClassName for consistency with standard HTML textareas
      */
     className?: string;
-    /**
-     * Additional CSS classes to apply to the toggle button
-     */
-    buttonClassName?: string;
 }
 /**
- * Styled textarea component with built-in Geez phonetic keyboard support
+ * Textarea component with built-in Geez phonetic keyboard support
  *
  * Features:
- * - Toggle button to switch between Geez and English input modes
+ * - Press Cmd+Shift+S (or Ctrl+Shift+S) to toggle between Geez and English input modes
  * - Phonetic transformation for longer text
  * - Full support for controlled and uncontrolled component patterns
  * - Forward ref support for form libraries
- * - Styled with CSS classes that can be customized via className props
- * - Supports Tailwind CSS, CSS modules, or any CSS framework
- * - Minimum height of 150px for comfortable writing
+ * - Supports any CSS framework via className props
  *
  * @example
  * \`\`\`tsx
@@ -66,27 +60,5 @@ export interface GeezTextAreaProps extends Omit<React.TextareaHTMLAttributes<HTM
  * // Start with English mode
  * <GeezTextArea defaultGeez={false} placeholder="Type here..." />
  * \`\`\`
- *
- * @example
- * \`\`\`tsx
- * // Custom styling with Tailwind CSS
- * <GeezTextArea
- *   wrapperClassName="mb-4"
- *   textareaClassName="rounded-lg shadow-md resize-none"
- *   buttonClassName="hover:opacity-80"
- *   placeholder="Write here..."
- * />
- * \`\`\`
- *
- * @example
- * \`\`\`tsx
- * // Custom styling with CSS classes
- * <GeezTextArea
- *   wrapperClassName="my-custom-wrapper"
- *   textareaClassName="my-custom-textarea"
- *   buttonClassName="my-custom-button"
- *   placeholder="Write here..."
- * />
- * \`\`\`
  */
 export declare const GeezTextArea: React.ForwardRefExoticComponent<GeezTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/main.js

@@ -1,6 +1,6 @@
-import { jsxs as v, jsx as f } from "react/jsx-runtime";
-import { useCallback as T, forwardRef as N, useState as S } from "react";
-import './assets/main.css';const E = {
+import { jsx as y } from "react/jsx-runtime";
+import { useCallback as N, forwardRef as v, useState as D } from "react";
+const g = {
   h: "ህ",
   l: "ል",
   m: "ም",
@@ -40,7 +40,7 @@ import './assets/main.css';const E = {
   A: "ኣ",
   E: "ኤ",
   O: "ዖ"
-}, z = {
+}, p = {
   አ: {
     e: "አ",
     u: "ኡ",
@@ -321,13 +321,13 @@ import './assets/main.css';const E = {
     o: "ቮ",
     ua: "ቯ"
   }
-}, y = {
+}, K = {
   ስh: "ሽ",
   ችh: "ች",
   ንy: "ኝ",
   ዝh: "ዥ",
   ጽh: "ፁ"
-}, h = {
+}, b = {
   ":": "፡",
   "፡:": "።",
   "።:": "፡",
@@ -335,7 +335,7 @@ import './assets/main.css';const E = {
   "፣,": "፤",
   ";": "፤"
 };
-class G {
+class z {
   /**
    * Transform input text based on a new key press
    *
@@ -367,54 +367,66 @@ class G {
    * // → { transformedValue: 'ሽ', newCursorPosition: 1, isReplacement: true }
    * \`\`\`
    */
-  static transform(e, n, a) {
-    const i = e.slice(-1), s = i + a;
-    if (h[s])
+  static transform(e, t, i) {
+    const a = e.slice(-1), l = a + i;
+    if (b[l])
       return {
-        transformedValue: e.slice(0, -1) + h[s] + n,
+        transformedValue: e.slice(0, -1) + b[l] + t,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    if (h[a])
+    if (b[i])
       return {
-        transformedValue: e + h[a] + n,
+        transformedValue: e + b[i] + t,
         newCursorPosition: e.length + 1,
         isReplacement: !1
       };
-    if (y[s])
+    if (K[l])
       return {
-        transformedValue: e.slice(0, -1) + y[s] + n,
+        transformedValue: e.slice(0, -1) + K[l] + t,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    const t = z[i];
-    if (t && t[a])
+    const s = p[a];
+    if (s && s[i])
       return {
-        transformedValue: e.slice(0, -1) + t[a] + n,
+        transformedValue: e.slice(0, -1) + s[i] + t,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    if (["a", "e", "i"].includes(a)) {
-      const l = this.findSadisBase(i);
-      if (l) {
-        const w = z[l];
-        if (w) {
-          const d = a + a, o = w[d];
-          if (o)
+    if (i === "e" && a) {
+      const o = this.findSadisBase(a);
+      if (o && o !== a) {
+        const u = p[o];
+        if (u && u.ee)
+          return {
+            transformedValue: e.slice(0, -1) + u.ee + t,
+            newCursorPosition: e.length,
+            isReplacement: !0
+          };
+      }
+    }
+    if (["a", "i"].includes(i)) {
+      const o = this.findSadisBase(a);
+      if (o) {
+        const u = p[o];
+        if (u) {
+          const c = i + i, r = u[c];
+          if (r)
             return {
-              transformedValue: e.slice(0, -1) + o + n,
+              transformedValue: e.slice(0, -1) + r + t,
               newCursorPosition: e.length,
               isReplacement: !0
             };
         }
       }
     }
-    return E[a] ? {
-      transformedValue: e + E[a] + n,
+    return g[i] ? {
+      transformedValue: e + g[i] + t,
       newCursorPosition: e.length + 1,
       isReplacement: !1
     } : {
-      transformedValue: e + a + n,
+      transformedValue: e + i + t,
       newCursorPosition: e.length + 1,
       isReplacement: !1
     };
@@ -437,15 +449,15 @@ class G {
    * \`\`\`
    */
   static findSadisBase(e) {
-    for (const [n, a] of Object.entries(z))
-      if (n === e || Object.values(a).includes(e)) return n;
+    for (const [t, i] of Object.entries(p))
+      if (t === e || Object.values(i).includes(e)) return t;
     return null;
   }
 }
-const D = (r = {}) => {
-  const { enabled: e = !0, onTransform: n } = r;
-  return { onKeyDown: T(
-    (i) => {
+const E = (w = {}) => {
+  const { enabled: e = !0, onTransform: t } = w;
+  return { onKeyDown: N(
+    (a) => {
       if (!e || [
         "Backspace",
         "Delete",
@@ -460,112 +472,82 @@ const D = (r = {}) => {
         "Escape",
         "PageUp",
         "PageDown"
-      ].includes(i.key) || i.ctrlKey || i.metaKey || i.key.length !== 1 || i.altKey) return;
-      i.preventDefault();
-      const t = i.currentTarget, { selectionStart: l, selectionEnd: w, value: d } = t, o = d.substring(0, l || 0), b = d.substring(w || 0), c = G.transform(o, b, i.key), g = Object.getOwnPropertyDescriptor(t.constructor.prototype, "value");
-      g && g.set ? g.set.bind(t)(c.transformedValue) : t.value = c.transformedValue;
-      let p;
-      typeof InputEvent < "u" ? p = new InputEvent("input", {
+      ].includes(a.key) || a.ctrlKey || a.metaKey || a.key.length !== 1 || a.altKey) return;
+      a.preventDefault();
+      const s = a.currentTarget, { selectionStart: o, selectionEnd: u, value: c } = s, r = c.substring(0, o || 0), m = c.substring(u || 0), d = z.transform(r, m, a.key), f = Object.getOwnPropertyDescriptor(s.constructor.prototype, "value");
+      f && f.set ? f.set.bind(s)(d.transformedValue) : s.value = d.transformedValue;
+      let n;
+      typeof InputEvent < "u" ? n = new InputEvent("input", {
         bubbles: !0,
         cancelable: !0,
         inputType: "insertText",
-        data: i.key
-      }) : p = new Event("input", { bubbles: !0, cancelable: !0 }), t.dispatchEvent(p);
-      const u = new Event("change", {
+        data: a.key
+      }) : n = new Event("input", { bubbles: !0, cancelable: !0 }), s.dispatchEvent(n);
+      const h = new Event("change", {
         bubbles: !0,
         cancelable: !0
       });
-      t.dispatchEvent(u), requestAnimationFrame(() => {
-        if (document.activeElement === t)
+      s.dispatchEvent(h), requestAnimationFrame(() => {
+        if (document.activeElement === s)
           try {
-            t.setSelectionRange(c.newCursorPosition, c.newCursorPosition);
+            s.setSelectionRange(d.newCursorPosition, d.newCursorPosition);
           } catch {
           }
-      }), n && n(c);
+      }), t && t(d);
     },
-    [e, n]
+    [e, t]
   ) };
-};
-function m(...r) {
-  return r.filter(Boolean).join(" ");
-}
-const P = N(
-  ({ defaultGeez: r = !0, wrapperClassName: e, inputClassName: n, buttonClassName: a, className: i, onChange: s, onKeyDown: t, value: l, ...w }, d) => {
-    const [o, b] = S(r), { onKeyDown: c } = D({ enabled: o }), g = (u) => {
-      c(u), t && t(u);
-    }, p = (u) => {
-      s && s(u);
-    };
-    return /* @__PURE__ */ v("div", { className: m("geez-input-wrapper", e), children: [
-      /* @__PURE__ */ f(
-        "input",
-        {
-          ...w,
-          ...l !== void 0 && { value: l },
-          ref: d,
-          onKeyDown: g,
-          onChange: p,
-          className: m("geez-input-field", i, n)
-        }
-      ),
-      /* @__PURE__ */ f(
-        "button",
-        {
-          type: "button",
-          onClick: () => b(!o),
-          className: m(
-            "geez-input-toggle",
-            o ? "geez-input-toggle--active" : "geez-input-toggle--inactive",
-            a
-          ),
-          title: o ? "Switch to English" : "Switch to Ge'ez",
-          tabIndex: -1,
-          children: o ? "አማ" : "EN"
-        }
-      )
-    ] });
+}, P = v(
+  ({ defaultGeez: w = !0, wrapperClassName: e, inputClassName: t, className: i, onChange: a, onKeyDown: l, value: s, ...o }, u) => {
+    const [c, r] = D(w), { onKeyDown: m } = E({ enabled: c });
+    return /* @__PURE__ */ y("div", { className: e, children: /* @__PURE__ */ y(
+      "input",
+      {
+        ...o,
+        ...s !== void 0 && { value: s },
+        ref: u,
+        onKeyDown: (n) => {
+          if ((n.metaKey || n.ctrlKey) && n.shiftKey && n.key === "S") {
+            n.preventDefault(), r((h) => !h);
+            return;
+          }
+          m(n), l && l(n);
+        },
+        onChange: (n) => {
+          a && a(n);
+        },
+        className: i || t
+      }
+    ) });
   }
 );
 P.displayName = "GeezInput";
-const R = N(
-  ({ defaultGeez: r = !0, wrapperClassName: e, textareaClassName: n, buttonClassName: a, className: i, onChange: s, onKeyDown: t, value: l, ...w }, d) => {
-    const [o, b] = S(r), { onKeyDown: c } = D({ enabled: o }), g = (u) => {
-      c(u), t && t(u);
-    }, p = (u) => {
-      s && s(u);
-    };
-    return /* @__PURE__ */ v("div", { className: m("geez-textarea-wrapper", e), children: [
-      /* @__PURE__ */ f(
-        "textarea",
-        {
-          ...w,
-          ...l !== void 0 && { value: l },
-          ref: d,
-          onKeyDown: g,
-          onChange: p,
-          className: m("geez-textarea-field", i, n)
-        }
-      ),
-      /* @__PURE__ */ f(
-        "button",
-        {
-          type: "button",
-          onClick: () => b(!o),
-          className: m(
-            "geez-textarea-toggle",
-            o ? "geez-textarea-toggle--active" : "geez-textarea-toggle--inactive",
-            a
-          ),
-          title: o ? "Switch to English" : "Switch to Ge'ez",
-          tabIndex: -1,
-          children: o ? "አማ" : "EN"
-        }
-      )
-    ] });
+const T = v(
+  ({ defaultGeez: w = !0, wrapperClassName: e, textareaClassName: t, className: i, onChange: a, onKeyDown: l, value: s, ...o }, u) => {
+    const [c, r] = D(w), { onKeyDown: m } = E({ enabled: c });
+    return /* @__PURE__ */ y("div", { className: e, children: /* @__PURE__ */ y(
+      "textarea",
+      {
+        ...o,
+        ...s !== void 0 && { value: s },
+        ref: u,
+        onKeyDown: (n) => {
+          if ((n.metaKey || n.ctrlKey) && n.shiftKey && n.key === "S") {
+            n.preventDefault(), r((h) => !h);
+            return;
+          }
+          m(n), l && l(n);
+        },
+        onChange: (n) => {
+          a && a(n);
+        },
+        className: i || t
+      }
+    ) });
   }
 );
-R.displayName = "GeezTextArea";
+T.displayName = "GeezTextArea";
 export {
   P as GeezInput,
-  R as GeezTextArea
+  T as GeezTextArea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geez-input",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Type-safe React library for Geez (Ethiopic) script input with phonetic keyboard support",
   "keywords": [
     "geez",

package/dist/assets/main.css

@@ -1 +0,0 @@
-.geez-input-wrapper{position:relative;width:100%}.geez-input-field{width:100%;background-color:var(--geez-bg-paper, #fefefe);border:2px solid var(--geez-border-gold, rgba(212, 175, 55, .2));outline:none;padding:1rem;font-family:var(--geez-font-serif, Georgia, serif);font-size:1.125rem;transition:all .2s ease}.geez-input-field:focus{border-color:var(--geez-border-crimson, #dc143c)}.geez-input-toggle{position:absolute;right:1rem;top:50%;transform:translateY(-50%);padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;z-index:10;font-weight:600;font-size:.875rem;border:none;cursor:pointer}.geez-input-toggle--active{background-color:var(--geez-bg-crimson, #dc143c);color:var(--geez-text-white, #ffffff)}.geez-input-toggle--inactive{background-color:var(--geez-bg-gold-light, rgba(212, 175, 55, .1));color:var(--geez-text-gold, #d4af37)}.geez-textarea-wrapper{position:relative;width:100%}.geez-textarea-field{width:100%;background-color:var(--geez-bg-paper, #fefefe);border:2px solid var(--geez-border-gold, rgba(212, 175, 55, .2));outline:none;padding:1.5rem;font-family:var(--geez-font-serif, Georgia, serif);font-size:1.125rem;line-height:1.75;transition:all .2s ease;min-height:150px}.geez-textarea-field:focus{border-color:var(--geez-border-crimson, #dc143c)}.geez-textarea-toggle{position:absolute;right:1rem;top:1rem;padding:.375rem .75rem;border-radius:.375rem;transition:all .2s ease;z-index:10;font-weight:600;font-size:.875rem;border:none;cursor:pointer}.geez-textarea-toggle--active{background-color:var(--geez-bg-crimson, #dc143c);color:var(--geez-text-white, #ffffff)}.geez-textarea-toggle--inactive{background-color:var(--geez-bg-gold-light, rgba(212, 175, 55, .1));color:var(--geez-text-gold, #d4af37)}