flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/forms/Switch/Switch.js

@@ -1,23 +1,21 @@
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
-import { useSwitchTheme } from './Switch.theme.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { motion } from 'motion/react';
+import { switchTheme, thumbPositions } from './Switch.theme.js';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Switch component for toggling between two states
  */
-var Switch = function (_a) {
-    var id = _a.id, controlledChecked = _a.checked, onChange = _a.onChange, label = _a.label, description = _a.description, _b = _a.state, state = _b === void 0 ? "default" : _b, _c = _a.labelPosition, labelPosition = _c === void 0 ? "end" : _c, // Default to end position (label after switch)
-    themeOverrides = _a.theme;
-    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
-    var theme = useSwitchTheme(themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseStyle);
+const Switch = ({ id, checked: controlledChecked, onChange, label, description, state = "default", labelPosition = "end", theme, className, ...rest }) => {
+    const [internalChecked, setInternalChecked] = useState(false);
     // Determine if component is controlled or uncontrolled
-    var isControlled = controlledChecked !== undefined;
-    var isChecked = isControlled ? controlledChecked : internalChecked;
+    const isControlled = controlledChecked !== undefined;
+    const isChecked = isControlled ? controlledChecked : internalChecked;
     // Derive state flags
-    var isDisabled = state === "disabled";
-    var isInvalid = state === "invalid";
-    var handleChange = function (e) {
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    const handleChange = (e) => {
         if (isDisabled)
             return;
         if (!isControlled) {
@@ -25,37 +23,35 @@ var Switch = function (_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
+    const handleTrackClick = () => {
+        if (!isDisabled) {
+            const newValue = !isChecked;
+            if (!isControlled) {
+                setInternalChecked(newValue);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+    };
     // Label and description content
-    var labelContent = (label || description) ? (React__default.createElement("div", { className: "flex grow flex-col" },
+    const labelContent = (label || description) ? (React__default.createElement("div", { className: "flex grow flex-col" },
         label && React__default.createElement(FormLabel, { htmlFor: id, state: state }, label),
-        description && React__default.createElement("div", { className: theme.description }, description))) : null;
+        description && React__default.createElement("div", { className: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description) }, description))) : null;
+    // Build data attributes for state-based styling
+    const trackDataState = isDisabled
+        ? "disabled"
+        : isInvalid
+            ? "invalid"
+            : isChecked
+                ? "checked"
+                : "unchecked";
     // Switch toggle component
-    var switchToggle = (React__default.createElement("div", { className: "relative flex items-center h-6" },
+    const switchToggle = (React__default.createElement("div", { className: "relative flex items-center h-6" },
         React__default.createElement("input", { type: "checkbox", id: id, checked: isChecked, onChange: handleChange, disabled: isDisabled, className: "sr-only", "aria-checked": isChecked, "aria-invalid": isInvalid }),
-        React__default.createElement("div", { className: "".concat(theme.track.base, " ").concat(isChecked
-                ? theme.track.checked
-                : theme.track.unchecked, " ").concat(isDisabled ? theme.track.disabled : "", " ").concat(isInvalid ? theme.track.invalid || "" : ""), onClick: function () {
-                if (!isDisabled) {
-                    var newValue = !isChecked;
-                    if (!isControlled) {
-                        setInternalChecked(newValue);
-                    }
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                }
-            } },
-            React__default.createElement(motion.div, { className: theme.thumb.base, initial: false, animate: {
-                    x: isChecked ? theme.thumb.checked.x : theme.thumb.unchecked.x,
-                    y: isChecked ? theme.thumb.checked.y : theme.thumb.unchecked.y
-                }, transition: { type: "spring", stiffness: 500, damping: 30 } }))));
-    // Create state class for CSS selectors (like other components)
-    var stateClass = isInvalid
-        ? "state-invalid"
-        : isDisabled
-            ? "state-disabled"
-            : "state-default";
-    return (React__default.createElement("div", { className: "flex w-full justify-between items-center gap-3 ".concat(labelPosition === "start" ? "flex-row-reverse" : "flex-row", " ").concat(theme.container, " ").concat(stateClass) },
+        React__default.createElement("div", { className: cn(switchTheme.track, theme === null || theme === void 0 ? void 0 : theme.track), "data-state": trackDataState, onClick: handleTrackClick },
+            React__default.createElement(motion.div, { className: cn(switchTheme.thumb, theme === null || theme === void 0 ? void 0 : theme.thumb), initial: false, animate: isChecked ? thumbPositions.checked : thumbPositions.unchecked, transition: { type: "spring", stiffness: 500, damping: 30 } }))));
+    return (React__default.createElement("div", { className: cn(switchTheme.container, labelPosition === "start" ? "flex-row-reverse" : "flex-row", theme === null || theme === void 0 ? void 0 : theme.container, className), ...rest },
         labelContent,
         switchToggle));
 };
 
-export { Switch, Switch as default };
+export { Switch };

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

@@ -1,34 +1,18 @@
-import { SwitchThemeConfig } from './Switch.types';
+import { SwitchTheme } from './Switch.types';
 /**
  * Default theme configuration for the Switch component
  */
-export declare const switchTheme: SwitchThemeConfig;
+export declare const switchTheme: SwitchTheme;
 /**
- * Utility function to merge default theme with overrides
+ * Thumb position values for animation
  */
-export declare const useSwitchTheme: (overrides?: Partial<SwitchThemeConfig["baseStyle"]>) => {
-    container: string;
-    track: {
-        base: string;
-        checked: string;
-        unchecked: string;
-        disabled: string;
-        invalid?: string;
+export declare const thumbPositions: {
+    checked: {
+        x: number;
+        y: number;
     };
-    thumb: {
-        base: string;
-        checked: Record<string, any>;
-        unchecked: Record<string, any>;
-    };
-    label: string;
-    description: string;
-    labelContainer: {
-        start: string;
-        end: string;
-    };
-    states?: {
-        default: string;
-        disabled: string;
-        invalid: string;
+    unchecked: {
+        x: number;
+        y: number;
     };
 };

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

@@ -1,43 +1,18 @@
-import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
-
 /**
  * Default theme configuration for the Switch component
  */
-var switchTheme = {
-    baseStyle: {
-        container: "items-start",
-        track: {
-            base: "w-10 h-6 rounded-full transition-colors cursor-pointer shadow-inner",
-            checked: "bg-[var(--color-primary-600)]",
-            unchecked: "bg-slate-200",
-            disabled: "opacity-50 cursor-not-allowed"
-        },
-        thumb: {
-            base: "size-5 bg-white rounded-full shadow-md",
-            checked: {
-                x: 18,
-                y: 2
-            },
-            unchecked: {
-                x: 2,
-                y: 2
-            }
-        },
-        label: "",
-        description: "text-sm text-gray-500 -mt-1",
-        labelContainer: {
-            start: "mr-3",
-            end: "ml-3"
-        }
-    }
+const switchTheme = {
+    container: "flex w-full justify-between items-center gap-4",
+    track: "w-10 h-6 rounded-full transition-colors cursor-pointer shadow-inner bg-[var(--color-border)] data-[state=checked]:bg-[var(--color-primary)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed data-[state=invalid]:border-2 data-[state=invalid]:border-[var(--color-danger)]",
+    thumb: "size-5 bg-white rounded-full shadow-md",
+    description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
 };
 /**
- * Utility function to merge default theme with overrides
+ * Thumb position values for animation
  */
-var useSwitchTheme = function (overrides) {
-    if (!overrides)
-        return switchTheme.baseStyle;
-    return __assign(__assign(__assign({}, switchTheme.baseStyle), overrides), { track: __assign(__assign({}, switchTheme.baseStyle.track), (overrides.track || {})), thumb: __assign(__assign({}, switchTheme.baseStyle.thumb), (overrides.thumb || {})), labelContainer: __assign(__assign({}, switchTheme.baseStyle.labelContainer), (overrides.labelContainer || {})) });
+const thumbPositions = {
+    checked: { x: 18, y: 2 },
+    unchecked: { x: 2, y: 2 },
 };
 
-export { switchTheme, useSwitchTheme };
+export { switchTheme, thumbPositions };

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

@@ -8,59 +8,40 @@ export type SwitchLabelPosition = "start" | "end";
 export type SwitchState = 'default' | 'disabled' | 'invalid';
 /**
  * Switch component props
- * @property {string} id - Unique identifier for the switch input
- * @property {boolean} checked - Whether the switch is checked
- * @property {(checked: boolean) => void} onChange - Function called when the switch state changes
- * @property {string} label - Label text for the switch
- * @property {string} description - Optional description text
- * @property {SwitchState} state - The state of the switch (default, disabled, invalid)
- * @property {SwitchLabelPosition} labelPosition - Position of the label relative to the switch ("start" | "end")
- * @property {SwitchThemeOverrides} theme - Optional theme overrides
  */
-export interface SwitchProps {
+export interface SwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Unique identifier for the switch input */
     id: string;
+    /** Whether the switch is checked (controlled mode) */
     checked?: boolean;
+    /** Function called when the switch state changes */
     onChange?: (checked: boolean) => void;
+    /** Label text for the switch */
     label?: string;
+    /** Optional description text */
     description?: string;
+    /** The state of the switch (default, disabled, invalid) */
     state?: SwitchState;
+    /** Position of the label relative to the switch */
     labelPosition?: SwitchLabelPosition;
+    /** Optional theme overrides */
     theme?: SwitchThemeOverrides;
 }
 /**
  * Switch theme configuration
  */
-export interface SwitchThemeConfig {
-    baseStyle: {
-        container: string;
-        track: {
-            base: string;
-            checked: string;
-            unchecked: string;
-            disabled: string;
-            invalid?: string;
-        };
-        thumb: {
-            base: string;
-            checked: Record<string, any>;
-            unchecked: Record<string, any>;
-        };
-        label: string;
-        description: string;
-        labelContainer: {
-            start: string;
-            end: string;
-        };
-        states?: {
-            default: string;
-            disabled: string;
-            invalid: string;
-        };
-    };
+export interface SwitchTheme {
+    container: string;
+    track: string;
+    thumb: string;
+    description: string;
 }
 /**
  * Switch theme overrides
  */
 export interface SwitchThemeOverrides {
-    baseStyle?: Partial<SwitchThemeConfig['baseStyle']>;
+    container?: string;
+    track?: string;
+    thumb?: string;
+    description?: string;
 }

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

@@ -1,3 +1,3 @@
-export { default, Switch } from './Switch';
-export * from './Switch.types';
-export * from './Switch.theme';
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchThemeOverrides } from './Switch.types';
+export { switchTheme } from './Switch.theme';

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

@@ -1,4 +1,3 @@
 import React from "react";
 import { TextareaProps } from "./Textarea.types";
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default Textarea;

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

@@ -1,46 +1,60 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useState } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { textareaTheme } from './Textarea.theme.js';
 
-var Textarea = React__default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.state, state = _g === void 0 ? "default" : _g, _h = _a.className, className = _h === void 0 ? "" : _h, label = _a.label, _j = _a.labelClassName, labelClassName = _j === void 0 ? "" : _j, helperText = _a.helperText, _k = _a.helperTextClassName, helperTextClassName = _k === void 0 ? "" : _k, _l = _a.wrapperClassName, wrapperClassName = _l === void 0 ? "" : _l, _m = _a.inputGroupClassName, inputGroupClassName = _m === void 0 ? "" : _m, id = _a.id, _o = _a.theme, theme = _o === void 0 ? {} : _o, required = _a.required, _p = _a.rows, rows = _p === void 0 ? 3 : _p, cols = _a.cols, props = __rest(_a, ["size", "state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "inputGroupClassName", "id", "theme", "required", "rows", "cols"]);
-    var _q = useState(false); _q[0]; var setIsFocused = _q[1];
-    var inputId = id || "textarea-".concat(Math.random().toString(36).substring(2, 9));
+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 inputId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
     // Derived state flags for internal use
-    var isDisabled = state === "disabled";
-    var isInvalid = state === "invalid";
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // If unstyled, render only the textarea element
+    if (unstyled) {
+        return (React__default.createElement("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
-    var stateClass = isInvalid
+    const stateClass = isInvalid
         ? "state-invalid"
         : isDisabled
             ? "state-disabled"
             : "state-default";
     // Get theme classes
-    var wrapperClasses = theme.wrapperStyle || textareaTheme.wrapperStyle || "";
-    var inputGroupClasses = theme.inputGroupStyle || textareaTheme.inputGroupStyle || "";
-    var baseClasses = theme.baseStyle || textareaTheme.baseStyle || "";
-    var sizeClasses = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || ((_c = textareaTheme.sizes) === null || _c === void 0 ? void 0 : _c[size]) || "";
-    var stateClasses = ((_d = theme.states) === null || _d === void 0 ? void 0 : _d[state]) || ((_e = textareaTheme.states) === null || _e === void 0 ? void 0 : _e[state]) || "";
-    var helperTextClasses = theme.helperText || textareaTheme.helperText || "";
-    return (React__default.createElement("div", { className: "".concat(wrapperClasses, " ").concat(stateClass, " ").concat(wrapperClassName) },
+    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 (React__default.createElement("div", { className: `${wrapperClasses} ${stateClass} ${wrapperClassName}` },
         label && (React__default.createElement("div", { className: "mb-1" },
             React__default.createElement(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required }, label))),
         React__default.createElement("div", null,
-            React__default.createElement("div", { className: "".concat(inputGroupClasses, " ").concat(stateClasses, " ").concat(inputGroupClassName) },
+            React__default.createElement("div", { className: `${inputGroupClasses} ${stateClasses} ${inputGroupClassName}` },
                 React__default.createElement("div", { className: "relative flex-1" },
-                    React__default.createElement("textarea", __assign({ ref: ref, id: inputId, className: "\n                  ".concat(baseClasses, " \n                  ").concat(sizeClasses, " \n                  ").concat(className, "\n                "), disabled: isDisabled, "aria-invalid": isInvalid, required: required, rows: rows, cols: cols, onFocus: function (e) {
+                    React__default.createElement("textarea", { ref: ref, id: inputId, className: `
+                  ${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: function (e) {
+                        }, onBlur: (e) => {
                             var _a;
                             setIsFocused(false);
                             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                        } }, props))))),
-        helperText && (React__default.createElement("div", { className: "".concat(helperTextClasses, " ").concat(helperTextClassName) }, helperText))));
+                        }, ...props })))),
+        helperText && (React__default.createElement("div", { className: `${helperTextClasses} ${helperTextClassName}` }, helperText))));
 });
 Textarea.displayName = "Textarea";
 
-export { Textarea, Textarea as default };
+export { Textarea };

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

@@ -4,4 +4,3 @@ import { TextareaThemeOverrides } from "./Textarea.types";
  * Extends the common forms base theme
  */
 export declare const textareaTheme: TextareaThemeOverrides;
-export default textareaTheme;

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

@@ -4,18 +4,18 @@ import { formsBaseTheme } from '../forms.theme.js';
  * Default theme for the Textarea component
  * Extends the common forms base theme
  */
-var textareaTheme = {
+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: "".concat(formsBaseTheme.controlBaseStyle, " resize-y"),
-    // Size variants - uses the textarea-specific sizes from the common theme
+    baseStyle: `${formsBaseTheme.controlBaseStyle} resize-y`,
+    // Size variants - composed from atomic tokens
     sizes: {
-        sm: formsBaseTheme.sizes.sm.textarea,
-        md: formsBaseTheme.sizes.md.textarea,
-        lg: formsBaseTheme.sizes.lg.textarea,
+        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,
@@ -23,4 +23,4 @@ var textareaTheme = {
     helperText: formsBaseTheme.helperText,
 };
 
-export { textareaTheme as default, textareaTheme };
+export { textareaTheme };

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

@@ -33,6 +33,8 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     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';

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

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

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

@@ -175,4 +175,3 @@ export declare const timePickerAnimations: {
         ease: string;
     };
 };
-export default timePickerAnimations;

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

@@ -1,7 +1,17 @@
 import React from 'react';
 import { TimePickerProps } from './TimePicker.types';
+interface TimePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    theme: any;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    hasValue: boolean;
+    size: 'sm' | 'md' | 'lg';
+    state: 'default' | 'disabled' | 'invalid';
+}
+export declare const TimePickerContext: React.Context<TimePickerContextType | undefined>;
 /**
  * Main TimePicker Component
  */
 export declare const TimePicker: React.FC<TimePickerProps>;
-export default TimePicker;
+export {};