@flikk/ui 1.0.0-beta.1

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
+ */
+const 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
+ */
+const richTextEditorTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Container with common input group style + RTE-specific overrides
+    containerStyle: `${formsBaseTheme.inputGroupBaseStyle} flex-col min-h-[120px] overflow-hidden`,
+    // Editor content area - extends common control base style
+    editorStyle: `${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 dark:bg-[var(--color-background-secondary)]",
+    // Toolbar button styling
+    toolbarButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] 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-radius)] 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-[calc(var(--radius-base)*0.75)] 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: `${formsBaseTheme.sizes.sm.text} min-h-[80px]`,
+        md: `${formsBaseTheme.sizes.md.text} min-h-[120px]`,
+        lg: `${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
+ */
+const createDropdownAnimations = (isFlipped) => ({
+    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,93 @@
+import React from "react";
+import type { SelectProps, SelectButtonProps, SelectOptionsProps, SelectOptionProps, SelectState, SelectSize, SelectThemeOverrides } from "./Select.types";
+import { useSelectState, type UseSelectStateReturn, type UseSelectStateProps } from "./useSelectState";
+/**
+ * Context value type for Select components
+ * Extends UseSelectStateReturn with additional component-specific properties
+ */
+export interface SelectContextValue<T = any> extends UseSelectStateReturn<T> {
+    /** Size variant */
+    size: SelectSize;
+    /** Component state (default, disabled) */
+    state: SelectState;
+    /** Theme configuration */
+    theme: SelectThemeOverrides;
+    /** Whether search is enabled */
+    searchable: boolean;
+    /** Whether typeahead is enabled */
+    enableTypeahead: boolean;
+    /** Button ref (alias for triggerRef for backward compatibility) */
+    buttonRef: React.MutableRefObject<HTMLButtonElement | null>;
+}
+/**
+ * SelectContext - exported for external consumption
+ */
+export declare const SelectContext: React.Context<SelectContextValue<any> | undefined>;
+/**
+ * useSelectContext - Hook to consume SelectContext
+ * Throws if used outside of SelectProvider
+ */
+export declare const useSelectContext: <T = any>() => SelectContextValue<T>;
+/**
+ * Props for the SelectProvider component
+ */
+export interface SelectProviderProps<T = any> {
+    /** Child components */
+    children: React.ReactNode;
+    /** State from useSelectState hook */
+    selectState: UseSelectStateReturn<T>;
+    /** Size variant */
+    size?: SelectSize;
+    /** Component state */
+    componentState?: SelectState;
+    /** Theme overrides */
+    theme?: SelectThemeOverrides;
+    /** Whether search is enabled */
+    searchable?: boolean;
+    /** Whether typeahead is enabled */
+    enableTypeahead?: boolean;
+}
+/**
+ * SelectProvider - Provides select context to children
+ *
+ * This component allows building custom dropdown components using Select primitives.
+ *
+ * @example
+ * ```tsx
+ * const selectState = useSelectState({ options, value, onChange });
+ *
+ * <SelectProvider selectState={selectState} size="md">
+ *   <MyCustomTrigger />
+ *   <SelectOptions isOpen={selectState.isOpen}>
+ *     {selectState.filteredOptions.map(option => (
+ *       <SelectOption key={option.id} value={option.value}>
+ *         {option.label}
+ *       </SelectOption>
+ *     ))}
+ *   </SelectOptions>
+ * </SelectProvider>
+ * ```
+ */
+export declare function SelectProvider<T = any>({ children, selectState, size, componentState, theme: themeOverrides, searchable, enableTypeahead, }: SelectProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Select Button Component
+ */
+export declare const SelectButton: React.FC<SelectButtonProps>;
+/**
+ * Extended props for SelectOptions to support custom triggers
+ */
+export interface SelectOptionsExtendedProps extends SelectOptionsProps {
+    /** Custom trigger ref - if provided, uses this instead of buttonRef from context */
+    triggerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * Select Options Component
+ */
+export declare const SelectOptions: React.FC<SelectOptionsExtendedProps>;
+/**
+ * Select Option Component
+ */
+export declare const SelectOption: <T extends any>({ value, isSelected, disabled, className, onSelect, children, }: SelectOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends any>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export { useSelectState };
+export type { UseSelectStateProps, UseSelectStateReturn };