@mohasinac/appkit 2.7.34 → 2.7.35

package/dist/ui/components/DateInput.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    label?: React.ReactNode;
+    error?: React.ReactNode;
+    helperText?: React.ReactNode;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface DateRangeInputProps {
+    label?: React.ReactNode;
+    startLabel?: string;
+    endLabel?: string;
+    startValue?: string;
+    endValue?: string;
+    onStartChange?: (value: string) => void;
+    onEndChange?: (value: string) => void;
+    error?: React.ReactNode;
+    helperText?: React.ReactNode;
+    disabled?: boolean;
+    required?: boolean;
+    startMin?: string;
+    startMax?: string;
+    endMin?: string;
+    endMax?: string;
+}
+export declare function DateRangeInput({ label, startLabel, endLabel, startValue, endValue, onStartChange, onEndChange, error, helperText, disabled, required, startMin, startMax, endMin, endMax, }: DateRangeInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DateInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Label, Text } from "./Typography";
+export const DateInput = React.forwardRef(function DateInput({ label, error, helperText, value, onChange, disabled, required, id, className = "", ...props }, ref) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: inputId, required: required, className: "appkit-form-field__label mb-1.5", children: label })), _jsx("input", { ...props, ref: ref, id: inputId, type: "date", value: value, disabled: disabled, required: required, "aria-invalid": error ? "true" : undefined, onChange: (e) => onChange?.(e.target.value), className: ["appkit-input", error ? "appkit-input--error" : "", className].filter(Boolean).join(" ") }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+});
+export function DateRangeInput({ label, startLabel = "From", endLabel = "To", startValue, endValue, onStartChange, onEndChange, error, helperText, disabled, required, startMin, startMax, endMin, endMax, }) {
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Text, { size: "sm", className: "appkit-form-field__label mb-1.5 block font-medium", children: label })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(DateInput, { label: startLabel, value: startValue, onChange: onStartChange, disabled: disabled, required: required, min: startMin, max: startMax ?? endValue }), _jsx("span", { className: "mb-2.5 shrink-0 text-sm text-[var(--appkit-color-text-muted)]", children: "\u2013" }), _jsx(DateInput, { label: endLabel, value: endValue, onChange: onEndChange, disabled: disabled, min: endMin ?? startValue, max: endMax })] }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+}

package/dist/ui/components/FormField.d.ts

@@ -2,6 +2,7 @@ import { type SelectOption } from "./Select";
 export interface FormFieldProps {
     label?: string;
     name: string;
+    card?: boolean;
     type?: "text" | "email" | "password" | "tel" | "number" | "datetime-local" | "textarea" | "select" | "image" | "media";
     value?: string;
     onChange?: (value: string) => void;
@@ -22,5 +23,5 @@ export interface FormFieldProps {
     accept?: string;
     maxSizeMB?: number;
 }
-export declare function FormField({ label, name, type, value, onChange, onBlur, error, touched, placeholder, required, disabled, autoComplete, rows, hint, helpText, options, onUpload, captureSource, captureMode, accept, maxSizeMB, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormField({ label, name, card, type, value, onChange, onBlur, error, touched, placeholder, required, disabled, autoComplete, rows, hint, helpText, options, onUpload, captureSource, captureMode, accept, maxSizeMB, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 export default FormField;

package/dist/ui/components/FormField.js

@@ -4,7 +4,9 @@ import { Select } from "./Select";
 import { Textarea } from "./Textarea";
 import { Label, Text, Span } from "./Typography";
 import { ImageUpload, MediaUploadField } from "../../features/media";
-export function FormField({ label, name, type = "text", value = "", onChange, onBlur, error, touched, placeholder, required = false, disabled = false, autoComplete, rows, hint, helpText, options = [], onUpload, captureSource, captureMode, accept, maxSizeMB, }) {
+const CARD_CLASS = "appkit-form-field appkit-form-field--card";
+const BASE_CLASS = "appkit-form-field";
+export function FormField({ label, name, card = false, type = "text", value = "", onChange, onBlur, error, touched, placeholder, required = false, disabled = false, autoComplete, rows, hint, helpText, options = [], onUpload, captureSource, captureMode, accept, maxSizeMB, }) {
     const showError = error
         ? touched != null
             ? touched && !!error
@@ -14,11 +16,11 @@ export function FormField({ label, name, type = "text", value = "", onChange, on
     const errorId = `${inputId}-error`;
     const describedBy = showError ? errorId : undefined;
     if (type === "image" && onUpload) {
-        return (_jsxs("div", { className: "appkit-form-field", "data-section": "formfield-div-505", children: [_jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => onChange?.(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
     if (type === "media" && onUpload) {
-        return (_jsxs("div", { className: "appkit-form-field", "data-section": "formfield-div-506", children: [_jsx(MediaUploadField, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => onChange?.(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506", children: [_jsx(MediaUploadField, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => onChange?.(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
-    return (_jsxs("div", { className: "appkit-form-field", "data-section": "formfield-div-507", children: [label ? (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required ? (_jsx(Span, { className: "appkit-form-field__required", children: "*" })) : null] })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+    return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-507", children: [label ? (_jsxs(Label, { htmlFor: inputId, className: "appkit-form-field__label", children: [label, required ? (_jsx(Span, { className: "appkit-form-field__required", children: "*" })) : null] })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, onChange: (event) => onChange?.(event.target.value), onBlur: onBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
 }
 export default FormField;

package/dist/ui/components/FormField.style.css

@@ -28,3 +28,16 @@
 .appkit-form-field__error {
   margin-top: 0.375rem;
 }
+
+/* Card variant — adds a contained panel treatment around label + field */
+.appkit-form-field--card {
+  background: var(--appkit-color-zinc-50, #fafafa);
+  border: 1px solid var(--appkit-color-zinc-200, #e4e4e7);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.dark .appkit-form-field--card {
+  background: rgba(30, 41, 59, 0.4);
+  border-color: rgba(71, 85, 105, 0.6);
+}

package/dist/ui/components/HorizontalScroller.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback, cloneElement, } from "react";
+import { useRef, useState, useEffect, useCallback, } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 const BREAKPOINTS = [
     ["2xl", 1536],
@@ -23,6 +23,7 @@ function resolvePerView(perView, containerWidth) {
 }
 export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
+    const [colCount, setColCount] = useState(typeof perView === "number" ? perView : 3);
     const [isPaused, setIsPaused] = useState(false);
     const [atStart, setAtStart] = useState(true);
     const [atEnd, setAtEnd] = useState(true);
@@ -144,6 +145,7 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             const w = entry.contentRect.width;
             const count = resolvePerView(perView, w);
             if (count > 0) {
+                setColCount(count);
                 setItemWidth((w - (count - 1) * gap) / count);
             }
             updateExtents();
@@ -156,35 +158,28 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         updateExtents();
     }, [updateExtents, itemWidth, itemCount]);
     const content = itemsMode ? (rows > 1 ? (
-    // Grid mode: group items into slides with rows x cols
-    normalizedItems.reduce((slides, item, i) => {
-        const cardsPerSlide = 6;
-        const slideIndex = Math.floor(i / cardsPerSlide);
-        const itemInSlide = i % cardsPerSlide;
-        const rowIndex = Math.floor(itemInSlide / 3);
-        const colIndex = itemInSlide % 3;
-        if (!slides[slideIndex]) {
-            slides[slideIndex] = (_jsx("div", { className: "appkit-hscroller__slide grid grid-cols-1 sm:grid-cols-3 gap-4 place-items-center sm:place-items-start", style: { gap: `${gap}px`, width: "100%", flexShrink: 0 }, children: Array.from({ length: 6 }, (_, idx) => (_jsx("div", { className: "appkit-hscroller__item-placeholder w-full sm:w-auto" }, `placeholder-${idx}`))) }, `slide-${slideIndex}`));
-        }
-        const slideElement = slides[slideIndex];
-        const gridIndex = rowIndex * 3 + colIndex;
-        const childrenArr = slideElement.props.children ?? [];
-        if (childrenArr[gridIndex]) {
-            const newChildren = [...childrenArr];
-            newChildren[gridIndex] = (_jsx("div", { className: [
-                    "appkit-hscroller__item",
-                    snapToItems ? "appkit-hscroller__item--snap" : "",
-                    itemClassName,
-                    "w-full sm:w-auto",
-                ]
-                    .filter(Boolean)
-                    .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i));
-            slides[slideIndex] = cloneElement(slideElement, {
-                children: newChildren,
-            });
-        }
-        return slides;
-    }, [])) : loop && itemCount > 0 ? (
+    // Grid mode: group items into slides of (rows × colCount) cards
+    (() => {
+        const cols = colCount > 0 ? colCount : 3;
+        const cardsPerSlide = rows * cols;
+        const slideCount = Math.ceil(normalizedItems.length / cardsPerSlide);
+        return Array.from({ length: slideCount }, (_, slideIndex) => {
+            const slideItems = normalizedItems.slice(slideIndex * cardsPerSlide, (slideIndex + 1) * cardsPerSlide);
+            return (_jsx("div", { className: "appkit-hscroller__slide", style: {
+                    display: "grid",
+                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                    gap: `${gap}px`,
+                    width: "100%",
+                    flexShrink: 0,
+                }, children: slideItems.map((item, idx) => (_jsx("div", { className: [
+                        "appkit-hscroller__item",
+                        snapToItems ? "appkit-hscroller__item--snap" : "",
+                        itemClassName,
+                    ]
+                        .filter(Boolean)
+                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * cardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * cardsPerSlide + idx) : slideIndex * cardsPerSlide + idx))) }, `slide-${slideIndex}`));
+        });
+    })()) : loop && itemCount > 0 ? (
     // Circular loop: fixed (itemCount + 2×loopCloneCount) DOM slots.
     // Each slot maps to a real item via modulo — no array cloning, no list growth.
     // Left slots  [0 .. loopCloneCount-1]              → tail of real list (left buffer)

package/dist/ui/components/OtpInput.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    label?: React.ReactNode;
+    error?: React.ReactNode;
+    helperText?: React.ReactNode;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    inputMode?: "numeric" | "text";
+    id?: string;
+}
+export declare function OtpInput({ length, value, onChange, label, error, helperText, disabled, autoFocus, inputMode, id, }: OtpInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/OtpInput.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useId } from "react";
+import { Label, Text } from "./Typography";
+export function OtpInput({ length = 6, value, onChange, label, error, helperText, disabled = false, autoFocus = false, inputMode = "numeric", id, }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const inputsRef = useRef([]);
+    const digits = value.split("").concat(Array(length).fill("")).slice(0, length);
+    function focusAt(index) {
+        inputsRef.current[index]?.focus();
+    }
+    function handleChange(index, char) {
+        const sanitized = inputMode === "numeric" ? char.replace(/\D/g, "") : char;
+        const next = digits.slice();
+        next[index] = sanitized.slice(-1);
+        onChange(next.join(""));
+        if (sanitized && index < length - 1)
+            focusAt(index + 1);
+    }
+    function handleKeyDown(index, e) {
+        if (e.key === "ArrowLeft" && index > 0) {
+            focusAt(index - 1);
+            return;
+        }
+        if (e.key === "ArrowRight" && index < length - 1) {
+            focusAt(index + 1);
+            return;
+        }
+        if (e.key !== "Backspace")
+            return;
+        if (digits[index]) {
+            const next = digits.slice();
+            next[index] = "";
+            onChange(next.join(""));
+        }
+        else if (index > 0) {
+            focusAt(index - 1);
+        }
+    }
+    function handlePaste(e) {
+        e.preventDefault();
+        const pasted = e.clipboardData.getData("text");
+        const sanitized = inputMode === "numeric" ? pasted.replace(/\D/g, "") : pasted;
+        const next = sanitized.slice(0, length).split("").concat(Array(length).fill("")).slice(0, length);
+        onChange(next.join(""));
+        const lastFilled = Math.min(sanitized.length, length - 1);
+        focusAt(lastFilled);
+    }
+    return (_jsxs("div", { className: "w-full", children: [label && (_jsx(Label, { htmlFor: `${inputId}-0`, className: "appkit-form-field__label mb-2", children: label })), _jsx("div", { className: "flex gap-2", role: "group", "aria-labelledby": label ? `${inputId}-label` : undefined, children: digits.map((digit, i) => (_jsx("input", { ref: (el) => { inputsRef.current[i] = el; }, id: i === 0 ? `${inputId}-0` : undefined, type: "text", inputMode: inputMode, maxLength: 1, value: digit, disabled: disabled, autoFocus: autoFocus && i === 0, autoComplete: "one-time-code", "aria-label": `Digit ${i + 1} of ${length}`, className: [
+                        "appkit-input",
+                        "appkit-otp-input",
+                        error ? "appkit-input--error" : "",
+                    ].filter(Boolean).join(" "), onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onPaste: handlePaste, onFocus: (e) => e.target.select() }, i))) }), error ? (_jsx(Text, { size: "sm", variant: "error", role: "alert", className: "mt-1.5", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "mt-1.5", children: helperText })) : null] }));
+}

package/dist/ui/components/OtpInput.style.css

@@ -0,0 +1,13 @@
+.appkit-otp-input {
+  width: 2.75rem;
+  height: 2.75rem;
+  flex-shrink: 0;
+  padding: 0;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  letter-spacing: 0;
+  border-radius: 0.5rem;
+  caret-color: transparent;
+}

package/dist/ui/components/Select.style.css

@@ -23,36 +23,53 @@
   color: var(--appkit-color-text);
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
 }
 
 .dark .appkit-select__trigger {
   border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.6);
+  background: rgba(30, 41, 59, 0.7);
   color: var(--appkit-color-text);
 }
 
+.appkit-select__trigger--enabled:hover:not(:focus-visible) {
+  border-color: var(--appkit-color-zinc-400);
+}
+
+.dark .appkit-select__trigger--enabled:hover:not(:focus-visible) {
+  border-color: var(--appkit-color-slate-500);
+}
+
 .appkit-select__trigger--default:focus-visible {
+  outline: none;
   border-color: var(--appkit-color-secondary);
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+  box-shadow: 0 0 0 3px rgba(101, 196, 8, 0.25), inset 0 0 0 1px rgba(101, 196, 8, 0.15);
 }
 
 .dark .appkit-select__trigger--default:focus-visible {
   border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25), inset 0 0 0 1px rgba(233, 30, 140, 0.15);
 }
 
 .appkit-select__trigger--error {
   border-color: var(--appkit-color-error);
+  background: rgba(254, 202, 202, 0.06);
 }
 
 .appkit-select__trigger--error:focus-visible {
-  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
+  outline: none;
+  border-color: var(--appkit-color-error);
+  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25), inset 0 0 0 1px rgba(248, 113, 113, 0.15);
 }
 
 .appkit-select__trigger--disabled {
-  opacity: 0.5;
+  opacity: 0.55;
   cursor: not-allowed;
+  background: var(--appkit-color-bg);
+}
+
+.dark .appkit-select__trigger--disabled {
+  background: rgba(30, 41, 59, 0.4);
 }
 
 .appkit-select__trigger--enabled {

package/dist/ui/components/Textarea.style.css

@@ -9,22 +9,49 @@
   line-height: var(--appkit-leading-normal);
   min-height: 5rem;
   resize: vertical;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.appkit-textarea::placeholder {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-textarea:hover:not(:disabled):not(:focus-visible) {
+  border-color: var(--appkit-color-zinc-400);
 }
 
 .appkit-textarea:focus-visible {
   outline: none;
   border-color: var(--appkit-color-secondary);
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+  box-shadow: 0 0 0 3px rgba(101, 196, 8, 0.25), inset 0 0 0 1px rgba(101, 196, 8, 0.15);
+}
+
+.appkit-textarea:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: var(--appkit-color-bg);
+  resize: none;
 }
 
 .dark .appkit-textarea {
   border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.6);
+  background: rgba(30, 41, 59, 0.7);
   color: var(--appkit-color-text);
 }
 
+.dark .appkit-textarea::placeholder {
+  color: var(--appkit-color-text-muted);
+}
+
+.dark .appkit-textarea:hover:not(:disabled):not(:focus-visible) {
+  border-color: var(--appkit-color-slate-500);
+}
+
 .dark .appkit-textarea:focus-visible {
   border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25), inset 0 0 0 1px rgba(233, 30, 140, 0.15);
+}
+
+.dark .appkit-textarea:disabled {
+  background: rgba(30, 41, 59, 0.4);
 }

package/dist/ui/components/index.style.css

@@ -1,6 +1,7 @@
 @import "./Typography.style.css";
 @import "./Button.style.css";
 @import "./Input.style.css";
+@import "./OtpInput.style.css";
 @import "./Textarea.style.css";
 @import "./Select.style.css";
 @import "./Accordion.style.css";

package/dist/ui/index.d.ts

@@ -55,6 +55,10 @@ export type { SelectProps, SelectOption } from "./components/Select";
 export { Select } from "./components/Select";
 export type { InputProps } from "./components/Input";
 export { Input } from "./components/Input";
+export type { OtpInputProps } from "./components/OtpInput";
+export { OtpInput } from "./components/OtpInput";
+export type { DateInputProps, DateRangeInputProps } from "./components/DateInput";
+export { DateInput, DateRangeInput } from "./components/DateInput";
 export type { TextareaProps } from "./components/Textarea";
 export { Textarea } from "./components/Textarea";
 export type { SliderProps } from "./components/Slider";

package/dist/ui/index.js

@@ -31,6 +31,8 @@ export { BackgroundRenderer } from "./components/BackgroundRenderer";
 export { ResponsiveView } from "./components/ResponsiveView";
 export { Select } from "./components/Select";
 export { Input } from "./components/Input";
+export { OtpInput } from "./components/OtpInput";
+export { DateInput, DateRangeInput } from "./components/DateInput";
 export { Textarea } from "./components/Textarea";
 export { Slider } from "./components/Slider";
 export { Checkbox } from "./components/Checkbox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.34",
+  "version": "2.7.35",
   "license": "MIT",
   "publishConfig": {
     "access": "public"