flikkui 0.1.0-beta.6 → 0.1.0-beta.9

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

@@ -0,0 +1,10 @@
+import { RichTextEditorTheme, ColorOption } from './RichTextEditor.types';
+/**
+ * Color options for text color picker
+ */
+export declare const colorOptions: ColorOption[];
+/**
+ * Rich Text Editor theme following Flikkui optimal structure
+ */
+export declare const richTextEditorTheme: RichTextEditorTheme;
+export default richTextEditorTheme;

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

@@ -0,0 +1,37 @@
+/**
+ * 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 following Flikkui optimal structure
+ */
+var richTextEditorTheme = {
+    baseStyle: "relative w-full",
+    containerStyle: "relative min-h-[120px] border border-border rounded-[var(--form-rounded)] overflow-hidden bg-white transition-all duration-200 data-[state=focus]:border-primary-base data-[state=invalid]:border-error-base data-[state=disabled]:opacity-50 data-[state=disabled]:cursor-not-allowed",
+    editorStyle: "w-full min-h-[100px] px-3 py-2 bg-transparent text-sm text-text-primary placeholder:text-text-muted focus:outline-none 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-text-muted empty:before:pointer-events-none",
+    toolbarStyle: "flex items-center gap-1 p-1 border-b border-border bg-gray-50",
+    toolbarButtonStyle: "inline-flex items-center justify-center w-8 h-8 rounded-md text-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-primary)/10] data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:bg-gray-200 data-[state=active]:hover:bg-primary-base/15",
+    dropdownStyle: "absolute top-full left-0 mt-1 z-50 min-w-[120px] py-1 bg-background border border-border rounded-[var(--form-rounded)] shadow-lg backdrop-blur-sm",
+    dropdownItemStyle: "block w-full px-3 py-2 text-left text-sm text-text-primary hover:bg-background-hover transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed",
+    separatorStyle: "w-px h-6 bg-[var(--color-border)] mx-1",
+    colorPickerStyle: "grid grid-cols-5 gap-1 p-2 min-w-[140px]",
+    colorSwatchStyle: "size-6 rounded border border-border cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-primary-base focus:ring-offset-1",
+    sizes: {
+        sm: "min-h-[80px] text-xs",
+        md: "min-h-[120px] text-sm",
+        lg: "min-h-[160px] text-base",
+    },
+};
+
+export { colorOptions, richTextEditorTheme as default, richTextEditorTheme };

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

@@ -0,0 +1,122 @@
+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' | 'textColor' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'undo' | 'redo' | 'separator';
+/**
+ * Text formatting state
+ */
+export interface FormattingState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    textAlign: 'left' | 'center' | 'right' | 'justify';
+    fontSize: string;
+    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 */
+    baseStyle?: 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>>;
+}
+/**
+ * Complete theme structure for RichTextEditor component
+ */
+export interface RichTextEditorTheme {
+    baseStyle: string;
+    containerStyle: string;
+    editorStyle: string;
+    toolbarStyle: string;
+    toolbarButtonStyle: string;
+    dropdownStyle: string;
+    dropdownItemStyle: string;
+    separatorStyle: string;
+    colorPickerStyle: string;
+    colorSwatchStyle: string;
+    sizes: Record<RichTextEditorSize, string>;
+}

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

@@ -0,0 +1,3 @@
+export { RichTextEditor, default } 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/index.d.ts

@@ -9,4 +9,5 @@ export * from './Checkbox';
 export * from './Switch';
 export * from './TimePicker';
 export * from './Signature';
+export * from './RichTextEditor';
 export { default as formsBaseTheme } from './forms.theme';

package/dist/components/navigation/NavItem/NavItem.theme.d.ts

@@ -1,2 +1,2 @@
-import { NavItemTheme } from './NavItem.types';
+import { NavItemTheme } from "./NavItem.types";
 export declare const navItemTheme: NavItemTheme;

package/dist/components/navigation/NavItem/NavItem.theme.js

@@ -1,26 +1,26 @@
 var navItemTheme = {
-    baseStyle: 'relative flex items-center cursor-pointer select-none transition-all duration-300 w-full rounded-lg px-3 py-2 text-base font-medium group',
-    icon: 'size-5 text-text-placeholder',
-    text: 'flex-1 min-w-0 truncate',
+    baseStyle: "relative flex items-center cursor-pointer select-none transition-all duration-300 w-full rounded-lg px-[var(--nav-item-px)] py-[var(--nav-item-py)] text-sm font-medium group",
+    icon: "size-5 text-text-placeholder",
+    text: "flex-1 min-w-0 truncate",
     states: {
-        default: 'text-text-primary/80 hover:bg-gray-100 hover:text-text-primary',
-        active: 'bg-[var(--color-primary-50)] text-[var(--color-primary)] font-semibold',
-        disabled: 'text-text-placeholder cursor-not-allowed hover:bg-transparent hover:text-text-placeholder',
-        hover: 'hover:bg-gray-50',
+        default: "text-[var(--color-text-primary)]/80 hover:bg-gray-100 hover:text-[var(--color-text-primary)]",
+        active: "bg-[var(--color-primary-50)] text-[var(--color-primary)]",
+        disabled: "text-[var(--color-text-placeholder)] cursor-not-allowed hover:bg-transparent hover:text-[var(--color-text-placeholder)]",
+        hover: "hover:bg-gray-50",
     },
     iconStates: {
-        default: 'text-text-placeholder group-hover:text-text-primary',
-        active: 'text-[var(--color-primary)]',
-        disabled: 'text-text-placeholder/50',
+        default: "text-[var(--color-text-placeholder)] group-hover:text-[var(--color-text-primary)]",
+        active: "text-[var(--color-primary)]",
+        disabled: "text-[var(--color-text-placeholder)]/50",
     },
     levels: {
-        0: '',
-        1: 'ml-4',
-        2: 'ml-8',
+        0: "",
+        1: "ml-4",
+        2: "ml-8",
     },
     collapsed: {
-        container: 'justify-center px-2',
-        icon: 'size-5',
+        container: "justify-center px-2",
+        icon: "size-5",
     },
 };
 

package/dist/index.js

@@ -96,6 +96,8 @@ export { TimePicker } from './components/forms/TimePicker/TimePicker.js';
 export { default as timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
 export { timePickerAnimations } from './components/forms/TimePicker/TimePicker.animations.js';
 export { Signature } from './components/forms/Signature/Signature.js';
+export { RichTextEditor } from './components/forms/RichTextEditor/RichTextEditor.js';
+export { colorOptions, richTextEditorTheme } from './components/forms/RichTextEditor/RichTextEditor.theme.js';
 export { formsBaseTheme } from './components/forms/forms.theme.js';
 export { TableActions } from './components/data-display/Table/components/TableActions/TableActions.js';
 export { TableActionsMenu } from './components/data-display/Table/components/TableActions/TableActionsMenu.js';

package/dist/node_modules/@heroicons/react/24/outline/esm/ArrowUturnLeftIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function ArrowUturnLeftIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowUturnLeftIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/ArrowUturnRightIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function ArrowUturnRightIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowUturnRightIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/Bars3BottomLeftIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function Bars3BottomLeftIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(Bars3BottomLeftIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/Bars3BottomRightIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function Bars3BottomRightIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(Bars3BottomRightIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/BoldIcon.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+function BoldIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinejoin: "round",
+    d: "M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(BoldIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/ItalicIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function ItalicIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(ItalicIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/outline/esm/UnderlineIcon.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function UnderlineIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(UnderlineIcon);
+
+export { ForwardRef as default };

package/dist/node_modules/@heroicons/react/24/solid/esm/PaintBrushIcon.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+function PaintBrushIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React.forwardRef(PaintBrushIcon);
+
+export { ForwardRef as default };