@k3-universe/react-kit 0.0.36 → 0.0.39

package/src/kit/components/keyboard/index.ts

@@ -0,0 +1,4 @@
+export { Keyboard } from './Keyboard';
+export type { KeyboardProps, KeyboardLayout } from './Keyboard';
+export default void 0;
+

package/src/kit/components/numpad/Numpad.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import * as React from "react";
+import { Delete, ChevronLeft } from "lucide-react";
+import { cn } from "../../../shadcn/lib/utils";
+import { Button } from "../../../shadcn/ui/button";
+
+// Constants
+const NUMBER_BUTTON_BASE_CLASSES =
+  "rounded-xl border-2 border-teal-200 bg-white text-3xl font-semibold text-teal-600 hover:text-teal-900 transition-colors hover:bg-teal-50 h-auto";
+const CLEAR_BUTTON_CLASSES =
+  "rounded-xl border-2 border-teal-200 bg-white text-2xl font-semibold text-teal-600 hover:text-teal-900 transition-colors hover:bg-teal-50 h-auto";
+const BACKSPACE_BUTTON_CLASSES =
+  "rounded-xl bg-red-600 text-white transition-colors hover:bg-red-700 h-auto";
+const SUBMIT_BUTTON_CLASSES =
+  "row-span-3 rounded-xl bg-green-400 transition-colors hover:bg-green-500 h-auto";
+
+export interface NumpadProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  allowDecimal?: boolean;
+  allowDoubleZero?: boolean;
+  maxLength?: number;
+  className?: string;
+  buttonClassName?: string;
+  customKeyStyle?: React.CSSProperties;
+  customKeyClassName?: string;
+  customSubmitStyle?: React.CSSProperties;
+  customSubmitClassName?: string;
+  showBackspaceButton?: boolean;
+  showClearButton?: boolean;
+  showSubmitButton?: boolean;
+  onSubmit?: () => void;
+  inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
+}
+
+export function Numpad({
+  value: controlledValue,
+  onChange,
+  disabled = false,
+  allowDecimal = false,
+  allowDoubleZero = true,
+  maxLength,
+  className,
+  buttonClassName,
+  customKeyStyle,
+  customKeyClassName,
+  customSubmitStyle,
+  customSubmitClassName,
+  showBackspaceButton = true,
+  showClearButton = true,
+  showSubmitButton = false,
+  onSubmit,
+  inputRef,
+  ...props
+}: NumpadProps) {
+  const [internalValue, setInternalValue] = React.useState("");
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  // Helper function to update input value with cursor position handling
+  const updateInputValue = React.useCallback(
+    (
+      input: HTMLInputElement | HTMLTextAreaElement,
+      newValue: string,
+      cursorPos: number
+    ) => {
+      input.value = newValue;
+      input.setSelectionRange(cursorPos, cursorPos);
+      const event = new Event("input", { bubbles: true });
+      input.dispatchEvent(event);
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+
+  const handleValueChange = React.useCallback(
+    (newValue: string) => {
+      if (disabled) return;
+      if (maxLength && newValue.length > maxLength) return;
+
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [disabled, maxLength, isControlled, onChange]
+  );
+
+  const handleNumberClick = React.useCallback(
+    (num: string) => {
+      if (disabled) return;
+
+      if (inputRef?.current) {
+        const input = inputRef.current;
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        const newValue =
+          input.value.slice(0, start) + num + input.value.slice(end);
+        const newCursorPos = start + num.length;
+
+        if (maxLength && newValue.length > maxLength) return;
+
+        updateInputValue(input, newValue, newCursorPos);
+        return;
+      }
+
+      handleValueChange(value + num);
+    },
+    [disabled, value, handleValueChange, inputRef, maxLength, updateInputValue]
+  );
+
+  const handleDecimalClick = React.useCallback(() => {
+    if (disabled || !allowDecimal) return;
+
+    if (inputRef?.current) {
+      const input = inputRef.current;
+      if (input.value.includes(".")) return;
+
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+      const newValue = input.value.slice(0, start) + "." + input.value.slice(end);
+      const newCursorPos = start + 1;
+
+      if (maxLength && newValue.length > maxLength) return;
+
+      updateInputValue(input, newValue, newCursorPos);
+      return;
+    }
+
+    if (value.includes(".")) return;
+    handleValueChange(value + ".");
+  }, [
+    disabled,
+    allowDecimal,
+    value,
+    handleValueChange,
+    inputRef,
+    maxLength,
+    updateInputValue,
+  ]);
+
+  const handleBackspace = React.useCallback(() => {
+    if (disabled) return;
+
+    if (inputRef?.current) {
+      const input = inputRef.current;
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? 0;
+
+      if (start === end && start === 0) return;
+
+      const newValue =
+        start !== end
+          ? input.value.slice(0, start) + input.value.slice(end)
+          : input.value.slice(0, start - 1) + input.value.slice(start);
+      const newCursorPos = start !== end ? start : Math.max(0, start - 1);
+
+      updateInputValue(input, newValue, newCursorPos);
+      return;
+    }
+
+    if (value.length > 0) {
+      handleValueChange(value.slice(0, -1));
+    }
+  }, [disabled, value, handleValueChange, inputRef, updateInputValue]);
+
+  const handleClear = React.useCallback(() => {
+    handleValueChange("");
+  }, [handleValueChange]);
+
+  const handleSubmit = React.useCallback(() => {
+    if (disabled) return;
+
+    // If inputRef is provided, handle Enter like a real keyboard
+    if (inputRef?.current) {
+      const input = inputRef.current;
+      const isTextarea = input.tagName === 'TEXTAREA';
+      const isInput = input.tagName === 'INPUT';
+      
+      if (isTextarea) {
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        const newValue =
+          input.value.slice(0, start) + "\n" + input.value.slice(end);
+        const newCursorPos = start + 1;
+        updateInputValue(input, newValue, newCursorPos);
+      } else if (isInput) {
+        // For input: trigger Enter key events like real keyboard
+        // This will trigger form submission if inside a form
+        
+        // Create and dispatch keydown event
+        const keyDownEvent = new KeyboardEvent('keydown', {
+          key: 'Enter',
+          code: 'Enter',
+          keyCode: 13,
+          which: 13,
+          bubbles: true,
+          cancelable: true,
+        });
+        input.dispatchEvent(keyDownEvent);
+        
+        // Only trigger keypress and keyup if keydown wasn't prevented
+        if (!keyDownEvent.defaultPrevented) {
+          // Create and dispatch keypress event
+          const keyPressEvent = new KeyboardEvent('keypress', {
+            key: 'Enter',
+            code: 'Enter',
+            keyCode: 13,
+            which: 13,
+            bubbles: true,
+            cancelable: true,
+          });
+          input.dispatchEvent(keyPressEvent);
+          
+          // Create and dispatch keyup event
+          const keyUpEvent = new KeyboardEvent('keyup', {
+            key: 'Enter',
+            code: 'Enter',
+            keyCode: 13,
+            which: 13,
+            bubbles: true,
+            cancelable: true,
+          });
+          input.dispatchEvent(keyUpEvent);
+          
+          // If input is inside a form, trigger form submit
+          const form = input.closest('form');
+          if (form && !keyPressEvent.defaultPrevented) {
+            // Trigger form submit event
+            const submitEvent = new Event('submit', {
+              bubbles: true,
+              cancelable: true,
+            });
+            form.dispatchEvent(submitEvent);
+            
+            // If submit wasn't prevented, actually submit the form
+            if (!submitEvent.defaultPrevented) {
+              form.requestSubmit();
+            }
+          }
+        }
+      }
+    }
+
+    onSubmit?.();
+  }, [disabled, onSubmit, inputRef, updateInputValue]);
+
+  // Helper component for number buttons
+  const NumberButton = React.useCallback(
+    ({ num, onClick }: { num: string; onClick: () => void }) => (
+      <Button
+        type="button"
+        disabled={disabled}
+        onClick={onClick}
+        style={customKeyStyle}
+        className={cn(
+          NUMBER_BUTTON_BASE_CLASSES,
+          buttonClassName,
+          customKeyClassName
+        )}
+      >
+        {num}
+      </Button>
+    ),
+    [disabled, customKeyStyle, buttonClassName, customKeyClassName]
+  );
+
+  return (
+    <div className={cn("grid grid-cols-4 gap-3 w-fit", className)} {...props}>
+      {/* Layout: 1,2,3,Delete | 4,5,6,Submit | 7,8,9 | 0,00,000 */}
+      {/* Row 1: 1, 2, 3, Delete */}
+      <NumberButton num="1" onClick={() => handleNumberClick("1")} />
+      <NumberButton num="2" onClick={() => handleNumberClick("2")} />
+      <NumberButton num="3" onClick={() => handleNumberClick("3")} />
+      {showBackspaceButton && (
+        <button
+          type="button"
+          disabled={disabled || value.length === 0}
+          onClick={handleBackspace}
+          style={customKeyStyle}
+          className={cn(
+            BACKSPACE_BUTTON_CLASSES,
+            buttonClassName,
+            customKeyClassName
+          )}
+        >
+          <Delete className="mx-auto h-8 w-8" />
+        </button>
+      )}
+
+      {/* Row 2: 4, 5, 6, Clear */}
+      <NumberButton num="4" onClick={() => handleNumberClick("4")} />
+      <NumberButton num="5" onClick={() => handleNumberClick("5")} />
+      <NumberButton num="6" onClick={() => handleNumberClick("6")} />
+      {showClearButton && (
+        <Button
+          type="button"
+          disabled={disabled || value.length === 0}
+          onClick={handleClear}
+          style={customKeyStyle}
+          className={cn(
+            CLEAR_BUTTON_CLASSES,
+            buttonClassName,
+            customKeyClassName
+          )}
+        >
+          Clear
+        </Button>
+      )}
+      {showSubmitButton && (
+        <>
+          <div />
+          <div />
+          <div />
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={handleSubmit}
+            style={customSubmitStyle}
+            className={cn(
+              SUBMIT_BUTTON_CLASSES,
+              buttonClassName,
+              customSubmitClassName
+            )}
+          >
+            <ChevronLeft className="mx-auto h-12 w-12 rotate-180 text-gray-800" />
+          </button>
+        </>
+      )}
+
+      {/* Row 3: 7, 8, 9 */}
+      <NumberButton num="7" onClick={() => handleNumberClick("7")} />
+      <NumberButton num="8" onClick={() => handleNumberClick("8")} />
+      <NumberButton num="9" onClick={() => handleNumberClick("9")} />
+
+      {/* Row 4: 0, 00, 000 */}
+      <NumberButton num="0" onClick={() => handleNumberClick("0")} />
+      {allowDoubleZero ? (
+        <>
+          <NumberButton num="00" onClick={() => handleNumberClick("00")} />
+          <NumberButton num="000" onClick={() => handleNumberClick("000")} />
+        </>
+      ) : allowDecimal ? (
+        <Button
+          type="button"
+          disabled={disabled}
+          onClick={handleDecimalClick}
+          style={customKeyStyle}
+          className={cn(
+            NUMBER_BUTTON_BASE_CLASSES,
+            buttonClassName,
+            customKeyClassName
+          )}
+        >
+          .
+        </Button>
+      ) : (
+        <>
+          <div />
+          <div />
+        </>
+      )}
+      {showSubmitButton && <div />}
+    </div>
+  );
+}
+
+Numpad.displayName = "Numpad";
+
+export default Numpad;

package/src/kit/components/numpad/index.ts

@@ -0,0 +1,4 @@
+export { Numpad } from './Numpad';
+export type { NumpadProps } from './Numpad';
+export default void 0;
+

package/src/shadcn/ui/calendar.tsx

@@ -133,7 +133,7 @@ function Calendar({
           return (
             <div
               data-slot="calendar"
-              ref={rootRef}
+              ref={rootRef as React.Ref<HTMLDivElement>}
               className={cn(className)}
               {...props}
             />

package/src/stories/kit/components/Keyboard.stories.tsx

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import * as React from "react";
+import { Keyboard } from "../../../kit/components/keyboard/Keyboard";
+import { Input } from "../../../shadcn/ui/input";
+
+const meta: Meta<typeof Keyboard> = {
+  title: "Kit/Components/Keyboard",
+  component: Keyboard,
+  parameters: {
+    controls: { expanded: true },
+    backgrounds: { disable: true },
+  },
+  argTypes: {
+    layout: {
+      control: "select",
+      options: ["qwerty", "qwertz", "azerty"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Keyboard>;
+
+export const FullKeyboard: Story = {
+  name: "Full Keyboard",
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Text Input</div>
+          <Input
+            ref={inputRef}
+            type="text"
+            value={value}
+            onChange={(e) => {
+              setValue((e.target as any).value);
+            }}
+            placeholder="Type here..."
+            className="min-h-[60px]"
+          />
+        </div>
+        <Keyboard
+          {...args}
+          value={value}
+          onChange={setValue}
+          inputRef={inputRef}
+          showNumbers
+          showShift
+          showSpace
+          showBackspace
+          showEnter
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: "Disabled",
+  render: (args) => {
+    const [value, setValue] = React.useState("Hello World");
+
+    return (
+      <div className="p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Text Input</div>
+          <Input
+            type="text"
+            value={value}
+            onChange={(e) => setValue((e.target as any).value)}
+            placeholder="Type here..."
+            disabled
+            className="min-h-[60px]"
+          />
+        </div>
+        <Keyboard {...args} value={value} onChange={setValue} disabled />
+      </div>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  name: "Custom Styling",
+  render: (args) => {
+    const [value, setValue] = React.useState("");
+
+    return (
+      <div className="flex-1 p-6 space-y-4">
+        <div>
+          <div className="text-sm text-muted-foreground mb-2">Text Input</div>
+          <Input
+            type="text"
+            value={value}
+            onChange={(e) => {
+              setValue((e.target as any).value);
+            }}
+            placeholder="Type here..."
+            className="min-h-[60px]"
+          />
+        </div>
+        <Keyboard
+          {...args}
+          value={value}
+          onChange={setValue}
+          showNumbers
+          showShift
+          showSpace
+          showBackspace
+          showEnter
+          customKeyStyle={{ minWidth: "50px", height: "45px" }}
+          customKeyClassName="text-base font-bold"
+        />
+      </div>
+    );
+  },
+};
+
+export const MultipleInputs: Story = {
+  name: "Multiple Inputs (Focused)",
+  render: (args) => {
+    const [value1, setValue1] = React.useState("");
+    const [value2, setValue2] = React.useState("");
+    const [value3, setValue3] = React.useState("");
+    const [value4, setValue4] = React.useState("");
+    const [value5, setValue5] = React.useState("");
+    const [focusedInput, setFocusedInput] = React.useState<
+      "input1" | "input2" | "input3" | "input4" | "input5"
+    >("input1");
+
+    const input1Ref = React.useRef<HTMLInputElement>(null);
+    const input2Ref = React.useRef<HTMLInputElement>(null);
+    const input3Ref = React.useRef<HTMLInputElement>(null);
+    const input4Ref = React.useRef<HTMLInputElement>(null);
+    const input5Ref = React.useRef<HTMLInputElement>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    const values = {
+      input1: value1,
+      input2: value2,
+      input3: value3,
+      input4: value4,
+      input5: value5,
+    };
+    const setters = {
+      input1: setValue1,
+      input2: setValue2,
+      input3: setValue3,
+      input4: setValue4,
+      input5: setValue5,
+    };
+    const refs = {
+      input1: input1Ref,
+      input2: input2Ref,
+      input3: input3Ref,
+      input4: input4Ref,
+      input5: input5Ref,
+    };
+
+    const currentValue = values[focusedInput];
+    const setCurrentValue = setters[focusedInput];
+
+    const handleInputFocus = (
+      input: "input1" | "input2" | "input3" | "input4" | "input5"
+    ) => {
+      setFocusedInput(input);
+
+      // Scroll the focused input into view
+      setTimeout(() => {
+        const inputElement = refs[input].current;
+        if (inputElement && containerRef.current) {
+          (inputElement as any).scrollIntoView?.({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+          });
+        }
+      }, 100);
+    };
+
+    const inputs = [
+      {
+        id: "input1" as const,
+        label: "Text Input 1",
+        value: value1,
+        setValue: setValue1,
+        ref: input1Ref,
+      },
+      {
+        id: "input2" as const,
+        label: "Text Input 2",
+        value: value2,
+        setValue: setValue2,
+        ref: input2Ref,
+      },
+      {
+        id: "input3" as const,
+        label: "Text Input 3",
+        value: value3,
+        setValue: setValue3,
+        ref: input3Ref,
+      },
+      {
+        id: "input4" as const,
+        label: "Text Input 4",
+        value: value4,
+        setValue: setValue4,
+        ref: input4Ref,
+      },
+      {
+        id: "input5" as const,
+        label: "Text Input 5",
+        value: value5,
+        setValue: setValue5,
+        ref: input5Ref,
+      },
+    ];
+
+    return (
+      <div
+        ref={containerRef}
+        className="h-screen p-6 pt-40 pb-96 space-y-4 overflow-y-auto relative flex-1"
+      >
+        <div className="flex-1 w-full space-y-4 flex flex-col">
+          {inputs.map((input) => (
+            <div key={input.id}>
+              <div className="text-sm text-muted-foreground mb-2">
+                {input.label}
+              </div>
+              <Input
+                ref={input.ref}
+                type="text"
+                value={input.value}
+                onChange={(e) => input.setValue((e.target as any).value)}
+                placeholder="Type here..."
+                className="min-h-[60px]"
+                onFocus={() => handleInputFocus(input.id)}
+              />
+              {focusedInput === input.id && (
+                <div className="text-xs text-teal-600 mt-1">✓ Connected</div>
+              )}
+            </div>
+          ))}
+        </div>
+        <Keyboard
+          {...args}
+          value={currentValue}
+          onChange={setCurrentValue}
+          inputRef={refs[focusedInput]}
+          className="fixed bottom-0 left-0 right-0 z-10"
+          showNumbers
+          showShift
+          showSpace
+          showBackspace
+          showEnter
+        />
+      </div>
+    );
+  },
+};