flikkui 0.2.0-beta.2 → 0.2.0-beta.5

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

@@ -0,0 +1,126 @@
+import React from "react";
+/**
+ * Select option type for SelectExpand
+ * @template T The type of the option value
+ */
+export interface SelectExpandOption<T = string> {
+    /** Unique identifier for the option */
+    id: string | number;
+    /** Display label for the option */
+    label: string;
+    /** Option value */
+    value: T;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Optional description for the option */
+    description?: string;
+}
+/**
+ * Size variants for SelectExpand
+ */
+export type SelectExpandSize = "sm" | "md" | "lg";
+/**
+ * State variants for SelectExpand
+ */
+export type SelectExpandState = "default" | "disabled";
+/**
+ * SelectExpand component props
+ * @template T The type of the select value
+ */
+export interface SelectExpandProps<T = string> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Array of options to display */
+    options: SelectExpandOption<T>[];
+    /** Currently selected value(s) - single value or array for multi-select */
+    value?: T | T[];
+    /** Called when the selection changes */
+    onChange?: (value: T | T[]) => void;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Enable multi-select mode (default: false) */
+    multiple?: boolean;
+    /** Enable search/filter functionality (default: false) */
+    searchable?: boolean;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Size variant of the component */
+    size?: SelectExpandSize;
+    /** Maximum height of expanded options panel */
+    maxHeight?: string | number;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Current state of the component */
+    state?: SelectExpandState;
+    /** Label text displayed above the component */
+    label?: string;
+    /** Helper text displayed below the component */
+    helperText?: string;
+    /** Icon to display at the start of the trigger */
+    iconStart?: React.ReactNode;
+    /** Icon to display at the end of the trigger (default: chevron) */
+    iconEnd?: React.ReactNode;
+    /** ID for the component */
+    id?: string;
+    /** Name for form submission */
+    name?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional class name for the trigger button */
+    className?: string;
+    /** Additional class name for the outer wrapper */
+    wrapperClassName?: string;
+    /** Theme overrides */
+    theme?: SelectExpandThemeOverrides;
+}
+/**
+ * Theme configuration for SelectExpand component
+ */
+export interface SelectExpandTheme {
+    /** Wrapper style (outermost container) */
+    wrapperStyle: string;
+    /** Container style (animated container) */
+    containerStyle: string;
+    /** Container style when expanded */
+    containerExpandedStyle: string;
+    /** Trigger button base style */
+    triggerStyle: string;
+    /** Trigger size variants */
+    triggerSizes: Record<SelectExpandSize, string>;
+    /** Placeholder text style */
+    placeholderStyle: string;
+    /** Selected value text style */
+    valueStyle: string;
+    /** Options panel container style */
+    optionsPanelStyle: string;
+    /** Scrollable options list style */
+    optionsListStyle: string;
+    /** Individual option style */
+    optionStyle: string;
+    /** Selected option style */
+    optionSelectedStyle: string;
+    /** Disabled option style */
+    optionDisabledStyle: string;
+    /** Option hover style */
+    optionHoverStyle: string;
+    /** Checkbox style for multi-select */
+    checkboxStyle: string;
+    /** Checkbox checked style */
+    checkboxCheckedStyle: string;
+    /** Search input container style */
+    searchContainerStyle: string;
+    /** Search input style */
+    searchInputStyle: string;
+    /** Icon start style */
+    iconStartStyle: string;
+    /** Icon end style */
+    iconEndStyle: string;
+    /** Label style */
+    labelStyle: string;
+    /** Helper text style */
+    helperTextStyle: string;
+    /** Disabled state style */
+    disabledStyle: string;
+}
+/**
+ * Theme overrides for SelectExpand component
+ */
+export type SelectExpandThemeOverrides = Partial<SelectExpandTheme>;

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

@@ -0,0 +1,4 @@
+export { SelectExpand } from "./SelectExpand";
+export type { SelectExpandProps, SelectExpandOption, SelectExpandSize, SelectExpandState, SelectExpandTheme, SelectExpandThemeOverrides, } from "./SelectExpand.types";
+export { selectExpandTheme } from "./SelectExpand.theme";
+export { containerAnimations, optionsPanelAnimations, chevronAnimations, optionAnimations, } from "./SelectExpand.animations";

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

@@ -33,9 +33,9 @@ const Switch = ({ id, checked: controlledChecked, onChange, label, description,
         }
     };
     // Label and description content
-    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: cn(switchTheme.description, theme === null || theme === void 0 ? void 0 : theme.description) }, description))) : null;
+    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: 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"

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

@@ -1,4 +1,4 @@
-import { SwitchTheme } from './Switch.types';
+import { SwitchTheme } from "./Switch.types";
 /**
  * Default theme configuration for the Switch component
  */

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

@@ -3,8 +3,8 @@
  */
 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",
+    track: "w-12 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: "w-7 h-5 rounded-full shadow-md glass-effect !bg-white/80",
     description: "text-sm text-[var(--color-text-muted)] -mt-1.5",
 };
 /**

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

@@ -30,44 +30,6 @@ export declare const timePickerAnimations: {
             };
         };
     };
-    selectorItem: {
-        initial: {
-            opacity: number;
-            x: number;
-        };
-        animate: {
-            opacity: number;
-            x: number;
-            transition: {
-                duration: number;
-                ease: string;
-            };
-        };
-        hover: {
-            scale: number;
-            backgroundColor: string;
-            transition: {
-                duration: number;
-                ease: string;
-            };
-        };
-        tap: {
-            scale: number;
-            transition: {
-                duration: number;
-                ease: string;
-            };
-        };
-        selected: {
-            scale: number;
-            backgroundColor: string;
-            borderLeftColor: string;
-            transition: {
-                duration: number;
-                ease: string;
-            };
-        };
-    };
     clearButton: {
         initial: {
             opacity: number;
@@ -112,14 +74,6 @@ export declare const timePickerAnimations: {
             };
         };
     };
-    selectorColumns: {
-        animate: {
-            transition: {
-                staggerChildren: number;
-                delayChildren: number;
-            };
-        };
-    };
     inputField: {
         focus: {
             borderColor: string;

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

@@ -1,17 +1,26 @@
-import React from 'react';
-import { TimePickerProps } from './TimePicker.types';
+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>;
+    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';
+    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.FC<TimePickerProps>;
 export {};