geez-input 1.0.0 → 1.0.1

package/README.md

@@ -8,7 +8,6 @@ A type-safe React library for Geez (Ethiopic) script input with phonetic keyboar
 - **Phonetic Keyboard**: Intuitive Latin-to-Geez transformation following standard conventions
 - **Customizable Components**: Pre-styled input and textarea components with toggle support
 - **React Hook**: `useGeez` hook for custom implementations
-- **Tree-Shakeable**: Optimized bundle size with CSS code splitting
 - **Form Library Support**: Works with React Hook Form, Formik, and other form libraries
 - **Controlled & Uncontrolled**: Full support for both component patterns
 
@@ -194,15 +193,5 @@ Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for det
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) for details.
+MIT  [LICENSE](LICENSE)
 
-## Links
-
-- [GitHub Repository](https://github.com/yourusername/geez-library)
-- [NPM Package](https://www.npmjs.com/package/geez-input)
-- [Documentation Site](https://geez-library.vercel.app)
-- [Issue Tracker](https://github.com/yourusername/geez-library/issues)
-
-## Credits
-
-Built with TypeScript, React, and Vite.

package/dist/assets/main.css

@@ -0,0 +1 @@
+.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)}

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

@@ -12,7 +12,15 @@ export interface GeezInputProps extends React.InputHTMLAttributes<HTMLInputEleme
     /**
      * Additional CSS classes to apply to the input wrapper
      */
-    className?: string;
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes to apply to the input field
+     */
+    inputClassName?: string;
+    /**
+     * Additional CSS classes to apply to the toggle button
+     */
+    buttonClassName?: string;
 }
 /**
  * Styled input component with built-in Geez phonetic keyboard support
@@ -22,7 +30,8 @@ export interface GeezInputProps extends React.InputHTMLAttributes<HTMLInputEleme
  * - Phonetic transformation (type 'hello' → 'ሀልሎ')
  * - Full support for controlled and uncontrolled component patterns
  * - Forward ref support for form libraries
- * - Styled with a classic paper and ink aesthetic
+ * - Styled with CSS classes that can be customized via className props
+ * - Supports Tailwind CSS, CSS modules, or any CSS framework
  *
  * @example
  * \`\`\`tsx
@@ -53,5 +62,27 @@ export interface GeezInputProps extends React.InputHTMLAttributes<HTMLInputEleme
  *   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

@@ -12,7 +12,15 @@ export interface GeezTextAreaProps extends React.TextareaHTMLAttributes<HTMLText
     /**
      * Additional CSS classes to apply to the textarea wrapper
      */
-    className?: string;
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes to apply to the textarea field
+     */
+    textareaClassName?: string;
+    /**
+     * Additional CSS classes to apply to the toggle button
+     */
+    buttonClassName?: string;
 }
 /**
  * Styled textarea component with built-in Geez phonetic keyboard support
@@ -22,7 +30,8 @@ export interface GeezTextAreaProps extends React.TextareaHTMLAttributes<HTMLText
  * - Phonetic transformation for longer text
  * - Full support for controlled and uncontrolled component patterns
  * - Forward ref support for form libraries
- * - Styled with a classic paper and ink aesthetic
+ * - 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
  *
  * @example
@@ -51,5 +60,27 @@ export interface GeezTextAreaProps extends React.TextareaHTMLAttributes<HTMLText
  * // 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/components/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Utility function to merge CSS class names
+ * Filters out empty strings and undefined values
+ */
+export declare function cn(...classes: (string | undefined | null | false)[]): string;

package/dist/main.js

@@ -1,6 +1,6 @@
-import { useCallback as K, forwardRef as A, useState as y } from "react";
-import { jsxs as v, jsx as g } from "react/jsx-runtime";
-const f = {
+import { useCallback as S, forwardRef as y, useState as N } from "react";
+import { jsxs as D, jsx as A } from "react/jsx-runtime";
+import './assets/main.css';const z = {
   h: "ህ",
   l: "ል",
   m: "ም",
@@ -40,7 +40,7 @@ const f = {
   A: "ኣ",
   E: "ኤ",
   O: "ዖ"
-}, r = {
+}, g = {
   አ: {
     a: "አ",
     e: "አ",
@@ -384,13 +384,13 @@ const f = {
     o: "ቮ",
     ua: "ቯ"
   }
-}, w = {
+}, v = {
   ስh: "ሽ",
   ችh: "ች",
   ንy: "ኝ",
   ዝh: "ዥ",
   ጽh: "ፁ"
-}, m = {
+}, b = {
   ":": "፡",
   "፡:": "።",
   "።:": "፡",
@@ -398,7 +398,7 @@ const f = {
   "፣,": "፤",
   ";": "፤"
 };
-class S {
+class P {
   /**
    * Transform input text based on a new key press
    *
@@ -430,50 +430,50 @@ class S {
    * // → { transformedValue: 'ሽ', newCursorPosition: 1, isReplacement: true }
    * \`\`\`
    */
-  static transform(e, a, t) {
-    const n = e.slice(-1), l = n + t;
-    if (m[l])
+  static transform(e, a, i) {
+    const n = e.slice(-1), s = n + i;
+    if (b[s])
       return {
-        transformedValue: e.slice(0, -1) + m[l] + a,
+        transformedValue: e.slice(0, -1) + b[s] + a,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    if (m[t])
+    if (b[i])
       return {
-        transformedValue: e + m[t] + a,
+        transformedValue: e + b[i] + a,
         newCursorPosition: e.length + 1,
         isReplacement: !1
       };
-    if (w[l])
+    if (v[s])
       return {
-        transformedValue: e.slice(0, -1) + w[l] + a,
+        transformedValue: e.slice(0, -1) + v[s] + a,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    if (r[n] && r[n][t])
+    if (g[n] && g[n][i])
       return {
-        transformedValue: e.slice(0, -1) + r[n][t] + a,
+        transformedValue: e.slice(0, -1) + g[n][i] + a,
         newCursorPosition: e.length,
         isReplacement: !0
       };
-    if (["a", "e", "i"].includes(t)) {
-      const o = this.findSadisBase(n);
-      if (o && r[o]) {
-        const i = t + t;
-        if (r[o][i])
+    if (["a", "e", "i"].includes(i)) {
+      const t = this.findSadisBase(n);
+      if (t && g[t]) {
+        const l = i + i;
+        if (g[t][l])
           return {
-            transformedValue: e.slice(0, -1) + r[o][i] + a,
+            transformedValue: e.slice(0, -1) + g[t][l] + a,
             newCursorPosition: e.length,
             isReplacement: !0
           };
       }
     }
-    return f[t] ? {
-      transformedValue: e + f[t] + a,
+    return z[i] ? {
+      transformedValue: e + z[i] + a,
       newCursorPosition: e.length + 1,
       isReplacement: !1
     } : {
-      transformedValue: e + t + a,
+      transformedValue: e + i + a,
       newCursorPosition: e.length + 1,
       isReplacement: !1
     };
@@ -496,14 +496,14 @@ class S {
    * \`\`\`
    */
   static findSadisBase(e) {
-    for (const [a, t] of Object.entries(r))
-      if (a === e || Object.values(t).includes(e)) return a;
+    for (const [a, i] of Object.entries(g))
+      if (a === e || Object.values(i).includes(e)) return a;
     return null;
   }
 }
-const z = (c = {}) => {
-  const { enabled: e = !0, onTransform: a } = c;
-  return { onKeyDown: K(
+const K = (r = {}) => {
+  const { enabled: e = !0, onTransform: a } = r;
+  return { onKeyDown: S(
     (n) => {
       if (!e || [
         "Backspace",
@@ -521,108 +521,120 @@ const z = (c = {}) => {
         "PageDown"
       ].includes(n.key) || n.ctrlKey || n.metaKey || n.key.length !== 1 || n.altKey) return;
       n.preventDefault();
-      const o = n.currentTarget, { selectionStart: i, selectionEnd: p, value: d } = o, b = d.substring(0, i || 0), E = d.substring(p || 0), u = S.transform(b, E, n.key), s = Object.getOwnPropertyDescriptor(o.constructor.prototype, "value");
-      s && s.set ? s.set.bind(o)(u.transformedValue) : o.value = u.transformedValue;
-      let h;
-      typeof InputEvent < "u" ? h = new InputEvent("input", {
+      const t = n.currentTarget, { selectionStart: l, selectionEnd: f, value: p } = t, o = p.substring(0, l || 0), h = p.substring(f || 0), c = P.transform(o, h, n.key), d = Object.getOwnPropertyDescriptor(t.constructor.prototype, "value");
+      d && d.set ? d.set.bind(t)(c.transformedValue) : t.value = c.transformedValue;
+      let E;
+      typeof InputEvent < "u" ? E = new InputEvent("input", {
         bubbles: !0,
         cancelable: !0,
         inputType: "insertText",
         data: n.key
-      }) : h = new Event("input", { bubbles: !0, cancelable: !0 }), o.dispatchEvent(h);
-      const N = new Event("change", {
+      }) : E = new Event("input", { bubbles: !0, cancelable: !0 }), t.dispatchEvent(E);
+      const w = new Event("change", {
         bubbles: !0,
         cancelable: !0
       });
-      o.dispatchEvent(N), requestAnimationFrame(() => {
-        if (document.activeElement === o)
+      t.dispatchEvent(w), requestAnimationFrame(() => {
+        if (document.activeElement === t)
           try {
-            o.setSelectionRange(u.newCursorPosition, u.newCursorPosition);
+            t.setSelectionRange(c.newCursorPosition, c.newCursorPosition);
           } catch {
           }
-      }), a && a(u);
+      }), a && a(c);
     },
     [e, a]
   ) };
-}, P = A(
-  ({ defaultGeez: c = !0, className: e, onChange: a, onKeyDown: t, value: n, ...l }, o) => {
-    const [i, p] = y(c), d = {
-      ...l,
-      ...n !== void 0 && { value: n }
-    }, { onKeyDown: b } = z({ enabled: i });
-    return /* @__PURE__ */ v("div", { className: "relative group w-full", children: [
-      /* @__PURE__ */ g(
+};
+function m(...r) {
+  return r.filter(Boolean).join(" ");
+}
+const T = y(
+  ({ defaultGeez: r = !0, wrapperClassName: e, inputClassName: a, buttonClassName: i, className: n, onChange: s, onKeyDown: t, value: l, ...f }, p) => {
+    const [o, h] = N(r), c = {
+      ...f,
+      ...l !== void 0 && { value: l }
+    }, { onKeyDown: d } = K({ enabled: o }), E = (u) => {
+      d(u), t && t(u);
+    }, w = (u) => {
+      s && s(u);
+    };
+    return /* @__PURE__ */ D("div", { className: m("geez-input-wrapper", e), children: [
+      /* @__PURE__ */ A(
         "input",
         {
-          ...d,
-          ref: o,
-          onKeyDown: (s) => {
-            b(s), t && t(s);
-          },
-          onChange: (s) => {
-            a && a(s);
-          },
-          className: `w-full bg-paper border-2 border-gold/20 focus:border-crimson outline-none p-4 font-serif text-lg transition-all ${e || ""}`
+          ...c,
+          ref: p,
+          onKeyDown: E,
+          onChange: w,
+          className: m("geez-input-field", n, a)
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ A(
         "button",
         {
           type: "button",
-          onClick: () => p(!i),
-          className: `absolute right-4 top-1/2 -translate-y-1/2 px-3 py-1.5 rounded-md transition-all z-10 font-semibold text-sm ${i ? "bg-crimson text-white" : "bg-gold/10 text-gold"}`,
-          title: i ? "Switch to English" : "Switch to Ge'ez",
+          onClick: () => h(!o),
+          className: m(
+            "geez-input-toggle",
+            o ? "geez-input-toggle--active" : "geez-input-toggle--inactive",
+            i
+          ),
+          title: o ? "Switch to English" : "Switch to Ge'ez",
           tabIndex: -1,
-          children: i ? "አማ" : "EN"
+          children: o ? "አማ" : "EN"
         }
       )
     ] });
   }
 );
-P.displayName = "GeezInput";
-const T = A(
-  ({ defaultGeez: c = !0, className: e, onChange: a, onKeyDown: t, value: n, ...l }, o) => {
-    const [i, p] = y(c), d = {
-      ...l,
-      ...n !== void 0 && { value: n }
-    }, { onKeyDown: b } = z({ enabled: i }), E = (s) => {
-      b(s), t && t(s);
-    }, u = (s) => {
-      a && a(s);
+T.displayName = "GeezInput";
+const G = y(
+  ({ defaultGeez: r = !0, wrapperClassName: e, textareaClassName: a, buttonClassName: i, className: n, onChange: s, onKeyDown: t, value: l, ...f }, p) => {
+    const [o, h] = N(r), c = {
+      ...f,
+      ...l !== void 0 && { value: l }
+    }, { onKeyDown: d } = K({ enabled: o }), E = (u) => {
+      d(u), t && t(u);
+    }, w = (u) => {
+      s && s(u);
     };
-    return /* @__PURE__ */ v("div", { className: `relative group w-full ${e || ""}`, children: [
-      /* @__PURE__ */ g(
+    return /* @__PURE__ */ D("div", { className: m("geez-textarea-wrapper", e), children: [
+      /* @__PURE__ */ A(
         "textarea",
         {
-          ...d,
-          ref: o,
+          ...c,
+          ref: p,
           onKeyDown: E,
-          onChange: u,
-          className: `w-full bg-paper border-2 border-gold/20 focus:border-crimson outline-none p-6 font-serif text-lg leading-relaxed transition-all min-h-[150px] ${e || ""}`
+          onChange: w,
+          className: m("geez-textarea-field", n, a)
         }
       ),
-      /* @__PURE__ */ g(
+      /* @__PURE__ */ A(
         "button",
         {
           type: "button",
-          onClick: () => p(!i),
-          className: `absolute right-4 top-4 px-3 py-1.5 rounded-md transition-all z-10 font-semibold text-sm ${i ? "bg-crimson text-white" : "bg-gold/10 text-gold"}`,
-          title: i ? "Switch to English" : "Switch to Ge'ez",
+          onClick: () => h(!o),
+          className: m(
+            "geez-textarea-toggle",
+            o ? "geez-textarea-toggle--active" : "geez-textarea-toggle--inactive",
+            i
+          ),
+          title: o ? "Switch to English" : "Switch to Ge'ez",
           tabIndex: -1,
-          children: i ? "አማ" : "EN"
+          children: o ? "አማ" : "EN"
         }
       )
     ] });
   }
 );
-T.displayName = "GeezTextArea";
+G.displayName = "GeezTextArea";
 export {
-  f as CONSONANTS,
-  S as GeezEngine,
-  P as GeezInput,
-  T as GeezTextArea,
-  w as MULTI_CONSONANTS,
-  m as PUNCTUATION,
-  r as SYLLABLES,
-  z as useGeez
+  z as CONSONANTS,
+  P as GeezEngine,
+  T as GeezInput,
+  G as GeezTextArea,
+  v as MULTI_CONSONANTS,
+  b as PUNCTUATION,
+  g as SYLLABLES,
+  K as useGeez
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geez-input",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Type-safe React library for Geez (Ethiopic) script input with phonetic keyboard support",
   "keywords": [
     "geez",
@@ -13,16 +13,20 @@
     "input",
     "phonetic"
   ],
-  "homepage": "https://github.com/yourusername/geez-library#readme",
+  "homepage": "https://github.com/onesamket/geez-input#readme",
   "bugs": {
-    "url": "https://github.com/yourusername/geez-library/issues"
+    "url": "https://github.com/onesamket/geez-input/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/geez-library.git"
+    "url": "https://github.com/onesamket/geez-input.git"
   },
   "license": "MIT",
-  "author": "Your Name",
+  "author":{
+    "name": "Tewodros Birhanu",
+    "email": "onesamket@gmail.com",
+    "url": "https://github.com/onesamket"
+  },
   "sideEffects": [
     "**/*.css"
   ],