flikkui 0.1.0-beta.11

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

@@ -0,0 +1,9 @@
+import { RichTextEditorTheme, ColorOption } from './RichTextEditor.types';
+/**
+ * Color options for text color picker
+ */
+export declare const colorOptions: ColorOption[];
+/**
+ * Rich Text Editor theme - extends common forms base theme for consistency
+ */
+export declare const richTextEditorTheme: RichTextEditorTheme;

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

@@ -0,0 +1,54 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Color options for text color picker
+ */
+var colorOptions = [
+    { label: 'Black', value: '#000000', className: 'text-black' },
+    { label: 'Gray', value: '#6B7280', className: 'text-gray-500' },
+    { label: 'Red', value: '#EF4444', className: 'text-red-500' },
+    { label: 'Orange', value: '#F97316', className: 'text-orange-500' },
+    { label: 'Yellow', value: '#EAB308', className: 'text-yellow-500' },
+    { label: 'Green', value: '#22C55E', className: 'text-green-500' },
+    { label: 'Blue', value: '#3B82F6', className: 'text-blue-500' },
+    { label: 'Indigo', value: '#6366F1', className: 'text-indigo-500' },
+    { label: 'Purple', value: '#A855F7', className: 'text-purple-500' },
+    { label: 'Pink', value: '#EC4899', className: 'text-pink-500' },
+];
+/**
+ * Rich Text Editor theme - extends common forms base theme for consistency
+ */
+var richTextEditorTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Container with common input group style + RTE-specific overrides
+    containerStyle: "".concat(formsBaseTheme.inputGroupBaseStyle, " flex-col min-h-[120px] overflow-hidden"),
+    // Editor content area - extends common control base style
+    editorStyle: "".concat(formsBaseTheme.controlBaseStyle, " min-h-[100px] px-3 py-2 resize-none overflow-y-auto [&_p]:my-1 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic [&_u]:underline data-[state=disabled]:cursor-not-allowed empty:before:content-[attr(data-placeholder)] empty:before:text-[var(--color-text-placeholder)] empty:before:pointer-events-none"),
+    // Toolbar styling (RTE-specific)
+    toolbarStyle: "flex items-center gap-1 p-2 border-b border-[var(--color-border)] bg-white",
+    // Toolbar button styling
+    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-white active:bg-gray-200 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-[var(--color-background-tertiary)] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:hover:bg-[var(--color-primary-50)] border border-transparent data-[pressed=true]:bg-[var(--color-primary-50)] data-[pressed=true]:text-[var(--color-primary-900)] data-[pressed=true]:shadow-inner data-[pressed=true]:border-[var(--color-primary-200)]",
+    // Dropdown styling (font size, color picker)
+    dropdownStyle: "fixed z-[1000] min-w-[120px] py-1 bg-white/90 backdrop-blur-md rounded-[var(--form-rounded)] shadow-xl ring-1 ring-slate-200 focus:outline-none",
+    // Dropdown item styling
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
+    // Separator between toolbar sections
+    separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
+    // Color picker grid layout
+    colorPickerStyle: "flex flex-wrap gap-1 w-[152px]",
+    // Color swatch button
+    colorSwatchStyle: "size-6 rounded-md cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-1",
+    // Size variants - use common form sizes for consistency
+    sizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " min-h-[80px]"),
+        md: "".concat(formsBaseTheme.sizes.md.text, " min-h-[120px]"),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " min-h-[160px]"),
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { colorOptions, richTextEditorTheme };

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

@@ -0,0 +1,137 @@
+import React from 'react';
+/**
+ * Rich Text Editor component props
+ * @property {RichTextEditorSize} size - The size of the editor
+ * @property {RichTextEditorState} state - The state of the editor (default, disabled, invalid)
+ * @property {string} label - Optional label text for the editor
+ * @property {string} helperText - Optional helper text displayed below the editor
+ * @property {string} value - The HTML content value
+ * @property {function} onChange - Callback when content changes
+ * @property {string} placeholder - Placeholder text when editor is empty
+ * @property {boolean} required - Whether the editor is required
+ * @property {number} minHeight - Minimum height of the editor in pixels
+ * @property {number} maxHeight - Maximum height of the editor in pixels
+ * @property {ToolbarConfig} toolbar - Toolbar configuration
+ */
+export interface RichTextEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> {
+    /** The size of the editor */
+    size?: RichTextEditorSize;
+    /** The state of the editor (default, disabled, invalid) */
+    state?: RichTextEditorState;
+    /** Optional label text for the editor */
+    label?: string;
+    /** Optional helper text displayed below the editor */
+    helperText?: string;
+    /** The HTML content value */
+    value?: string;
+    /** Callback when content changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text when editor is empty */
+    placeholder?: string;
+    /** Additional class name for the editor */
+    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 editor container */
+    editorClassName?: string;
+    /** Whether the editor is required */
+    required?: boolean;
+    /** Minimum height of the editor in pixels */
+    minHeight?: number;
+    /** Maximum height of the editor in pixels */
+    maxHeight?: number;
+    /** Toolbar configuration */
+    toolbar?: ToolbarConfig;
+    /** Component-level theme overrides */
+    theme?: RichTextEditorThemeOverrides;
+}
+export type RichTextEditorSize = 'sm' | 'md' | 'lg';
+export type RichTextEditorState = 'default' | 'disabled' | 'invalid';
+/**
+ * Toolbar configuration
+ */
+export interface ToolbarConfig {
+    /** Whether to show the toolbar */
+    show?: boolean;
+    /** Position of the toolbar */
+    position?: 'top' | 'floating';
+    /** Which tools to show in the toolbar */
+    tools?: ToolbarTool[];
+    /** Custom toolbar className */
+    className?: string;
+}
+/**
+ * Available toolbar tools
+ */
+export type ToolbarTool = 'bold' | 'italic' | 'underline' | 'fontSize' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
+export type RichTextFontSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+/**
+ * Text formatting state
+ */
+export interface FormattingState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    textAlign: 'left' | 'center' | 'right' | 'justify';
+    fontSize: RichTextFontSizeKey;
+    textColor: string;
+}
+/**
+ * Color palette for text color picker
+ */
+export interface ColorOption {
+    label: string;
+    value: string;
+    className: string;
+}
+/**
+ * Theme overrides for the RichTextEditor component
+ */
+export interface RichTextEditorThemeOverrides {
+    /** Base wrapper style */
+    wrapperStyle?: string;
+    /** Editor container style */
+    containerStyle?: string;
+    /** ContentEditable element style */
+    editorStyle?: string;
+    /** Toolbar container style */
+    toolbarStyle?: string;
+    /** Toolbar button style */
+    toolbarButtonStyle?: string;
+    /** Size variants */
+    sizes?: Partial<Record<RichTextEditorSize, string>>;
+    /** State variants */
+    states?: {
+        default?: string;
+        disabled?: string;
+        invalid?: string;
+    };
+    /** Helper text style */
+    helperText?: string;
+}
+/**
+ * Complete theme structure for RichTextEditor component
+ */
+export interface RichTextEditorTheme {
+    wrapperStyle: string;
+    containerStyle: string;
+    editorStyle: string;
+    toolbarStyle: string;
+    toolbarButtonStyle: string;
+    dropdownStyle: string;
+    dropdownItemStyle: string;
+    separatorStyle: string;
+    colorPickerStyle: string;
+    colorSwatchStyle: string;
+    sizes: Record<RichTextEditorSize, string>;
+    states: {
+        default: string;
+        disabled: string;
+        invalid: string;
+    };
+    helperText: string;
+}

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

@@ -0,0 +1,3 @@
+export { RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorSize, RichTextEditorState, ToolbarConfig, ToolbarTool, FormattingState, ColorOption, RichTextEditorTheme, RichTextEditorThemeOverrides, } from './RichTextEditor.types';
+export { richTextEditorTheme, colorOptions } from './RichTextEditor.theme';

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

@@ -0,0 +1,12 @@
+import { Variants } from 'motion/react';
+/**
+ * Creates direction-aware dropdown animation variants for the Select component
+ * @param isFlipped - Whether the dropdown is positioned above (flipped) or below the trigger
+ * @returns Animation variants that match the positioning direction
+ */
+export declare const createDropdownAnimations: (isFlipped: boolean) => Variants;
+/**
+ * Default dropdown animation variants for backward compatibility
+ * @deprecated Use createDropdownAnimations() for better UX with direction awareness
+ */
+export declare const dropdownAnimations: Variants;

package/dist/components/forms/Select/Select.animations.js

@@ -0,0 +1,32 @@
+/**
+ * Creates direction-aware dropdown animation variants for the Select component
+ * @param isFlipped - Whether the dropdown is positioned above (flipped) or below the trigger
+ * @returns Animation variants that match the positioning direction
+ */
+var createDropdownAnimations = function (isFlipped) { return ({
+    initial: {
+        opacity: 0,
+        y: isFlipped ? 10 : -10, // Animate from opposite direction when flipped
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut'
+        }
+    },
+    exit: {
+        opacity: 0,
+        y: isFlipped ? 10 : -10, // Exit in same direction as entry
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn'
+        }
+    }
+}); };
+
+export { createDropdownAnimations };

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { SelectProps, SelectButtonProps, SelectOptionsProps, SelectOptionProps } from "./Select.types";
+/**
+ * Select Button Component
+ */
+export declare const SelectButton: React.FC<SelectButtonProps>;
+/**
+ * Select Options Component
+ */
+export declare const SelectOptions: React.FC<SelectOptionsProps>;
+/**
+ * Select Option Component
+ */
+export declare const SelectOption: <T extends any>({ value, isSelected, disabled, className, onSelect, children, }: SelectOptionProps<T>) => React.JSX.Element;
+/**
+ * Main Select Component
+ */
+export declare const Select: <T extends any>({ id, name, size, state, value, displayValue, placeholder, disabled, required, options, label, helperText, onChange, onFocus, onBlur, iconStart, iconEnd, theme: themeOverrides, className, wrapperClassName, searchable, searchPlaceholder, portal, placement, offset, enableTypeahead, creatable, onCreateOption, createLabel, children, }: SelectProps<T>) => React.JSX.Element;