@flikk/ui 1.0.0-beta.1

package/dist/components/forms/Textarea/Textarea.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { textareaTheme } from './Textarea.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Textarea = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", id, theme = {}, required, rows = 3, cols, unstyled = false, ...props }, ref) => {
+    var _a, _b, _c, _d;
+    const [isFocused, setIsFocused] = useState(false);
+    const generatedId = React__default.useId();
+    const inputId = id || generatedId;
+    // Derived state flags for internal use
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // If unstyled, render only the textarea element
+    if (unstyled) {
+        return (jsx("textarea", { ref: ref, id: inputId, className: className, disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+                var _a;
+                setIsFocused(true);
+                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, onBlur: (e) => {
+                var _a;
+                setIsFocused(false);
+                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }, ...props }));
+    }
+    // State class for CSS selectors
+    const stateClass = isInvalid
+        ? "state-invalid"
+        : isDisabled
+            ? "state-disabled"
+            : "state-default";
+    // Get theme classes
+    const wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
+    const inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
+    const baseClasses = theme.baseStyle || textareaTheme.baseStyle || "";
+    const sizeClasses = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || ((_b = textareaTheme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || "";
+    const stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || ((_d = textareaTheme.states) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const helperTextClasses = theme.helperText || textareaTheme.helperText || "";
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsx("div", { className: "mb-1", children: jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }) })), jsx("div", { children: jsx("div", { className: cn(inputGroupClasses, stateClasses, inputGroupClassName), children: jsx("div", { className: "relative flex-1", children: jsx("textarea", { ref: ref, id: inputId, className: cn(baseClasses, sizeClasses, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: (e) => {
+                                var _a;
+                                setIsFocused(true);
+                                (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                            }, onBlur: (e) => {
+                                var _a;
+                                setIsFocused(false);
+                                (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                            }, ...props }) }) }) }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/components/forms/Textarea/Textarea.theme.d.ts

@@ -0,0 +1,6 @@
+import { TextareaThemeOverrides } from "./Textarea.types";
+/**
+ * Default theme for the Textarea component
+ * Extends the common forms base theme
+ */
+export declare const textareaTheme: TextareaThemeOverrides;

package/dist/components/forms/Textarea/Textarea.theme.js

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Textarea component
+ * Extends the common forms base theme
+ */
+const textareaTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - extends the common input group style
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Base textarea styles - extends the common control base style
+    baseStyle: `${formsBaseTheme.controlBaseStyle} resize-y`,
+    // Size variants - composed from atomic tokens
+    sizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.textareaHeight}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.textareaHeight}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.textareaHeight}`,
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { textareaTheme };

package/dist/components/forms/Textarea/Textarea.types.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+/**
+ * Textarea component props
+ * @property {TextareaSize} size - The size of the textarea
+ * @property {TextareaState} state - The state of the textarea (default, disabled, invalid)
+ * @property {string} label - Optional label text for the textarea
+ * @property {string} helperText - Optional helper text displayed below the textarea
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** The size of the textarea */
+    size?: TextareaSize;
+    /** The state of the textarea (default, disabled, invalid) */
+    state?: TextareaState;
+    /** Optional label text for the textarea */
+    label?: string;
+    /** Optional helper text displayed below the textarea */
+    helperText?: string;
+    /** Additional class name for the textarea */
+    className?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Additional class name for the input group */
+    inputGroupClassName?: string;
+    /** Component-level theme overrides */
+    theme?: TextareaThemeOverrides;
+    /** Whether the textarea is required */
+    required?: boolean;
+    /** Number of rows */
+    rows?: number;
+    /** Number of columns */
+    cols?: number;
+    /** Render only the textarea element without wrapper, label, or helper text */
+    unstyled?: boolean;
+}
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaState = 'default' | 'disabled' | 'invalid';
+/**
+ * Theme overrides for the Textarea component
+ */
+export interface TextareaThemeOverrides {
+    /** Style for the outermost wrapper */
+    wrapperStyle?: string;
+    /** Style for the input group container (textarea + addons) */
+    inputGroupStyle?: string;
+    /** Base style for the textarea element */
+    baseStyle?: string;
+    /** Size variants for the textarea */
+    sizes?: Partial<Record<TextareaSize, string>>;
+    /** State variants for the textarea */
+    states?: Partial<Record<TextareaState, string>>;
+    /** Base style for the helper text */
+    helperText?: string;
+}

package/dist/components/forms/Textarea/index.d.ts

@@ -0,0 +1,3 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSize, TextareaState, TextareaThemeOverrides } from './Textarea.types';
+export { textareaTheme } from './Textarea.theme';

package/dist/components/forms/TimePicker/TimePicker.animations.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Animation variants for TimePicker component using Framer Motion
+ *
+ * These animations provide smooth transitions for the dropdown
+ * and interactive feedback for the time selectors.
+ */
+export declare const timePickerAnimations: {
+    dropdown: {
+        initial: {
+            opacity: number;
+            y: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: number[];
+            };
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    clearButton: {
+        initial: {
+            opacity: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        hover: {
+            scale: number;
+            backgroundColor: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        tap: {
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    columnHeader: {
+        initial: {
+            opacity: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+                ease: string;
+                delay: number;
+            };
+        };
+    };
+    inputField: {
+        focus: {
+            borderColor: string;
+            boxShadow: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        blur: {
+            borderColor: string;
+            boxShadow: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    errorMessage: {
+        initial: {
+            opacity: number;
+            y: number;
+            height: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            height: string;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            height: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    springSelection: {
+        type: string;
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+    scrollToSelected: {
+        type: string;
+        duration: number;
+        ease: string;
+    };
+};

package/dist/components/forms/TimePicker/TimePicker.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { TimePickerProps } from "./TimePicker.types";
+interface TimePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    theme: ReturnType<typeof Object.assign>;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    hasValue: boolean;
+    size: "sm" | "md" | "lg";
+    state: "default" | "disabled" | "invalid";
+}
+export declare const TimePickerContext: React.Context<TimePickerContextType | undefined>;
+/**
+ * Main TimePicker Component
+ *
+ * Features:
+ * - iOS-style scroll wheel picker
+ * - Combobox-style masked input trigger with direct keyboard entry
+ * - Live bidirectional sync between input and wheels
+ * - 12h and 24h format support with AM/PM toggle
+ * - Cancel/Save workflow for confirming selection
+ * - Validation with min/max time constraints
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};