@rafal.lemieszewski/tide-ui 0.7.2 → 0.8.0

package/dist/components/index.d.ts

@@ -25,8 +25,8 @@ export { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCard, SkeletonTable,
 export { Switch } from './ui/switch';
 export { Textarea } from './ui/textarea';
 export type { TextareaProps } from './ui/textarea';
-export { Editable, EditablePreview, EditableInput, EditableTextarea, useEditable } from './ui/editable';
-export type { EditableProps, EditableContextValue, EditablePreviewProps, EditableInputProps, EditableTextareaProps } from './ui/editable';
+export { Editable, EditablePreview, EditableInput, EditableDisplay, EditableField } from './ui/editable';
+export type { EditableProps, EditablePreviewProps, EditableInputProps } from './ui/editable';
 export { FormField, FormLabel, FormControl, FormHelperText, FormErrorMessage } from './ui/form-field';
 export type { FormFieldProps, FormLabelProps, FormControlProps, FormHelperTextProps, FormErrorMessageProps } from './ui/form-field';
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsGroupLabel } from './ui/tabs';

package/dist/components/ui/editable.d.ts

@@ -1,53 +1,70 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const editableVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface EditableContextValue {
-    isEditing: boolean;
-    value: string;
-    originalValue: string;
-    onEdit: () => void;
-    onCancel: () => void;
-    onSubmit: () => void;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    invalid?: boolean;
-    required?: boolean;
-    maxLength?: number;
-    disabled?: boolean;
-    triggerMode: "click" | "dblclick" | "focus";
-    previewFontSize?: string;
-    setPreviewFontSize: (fontSize: string | undefined) => void;
-}
-declare const useEditable: () => EditableContextValue;
-export interface EditableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSubmit">, VariantProps<typeof editableVariants> {
+import { default as React } from 'react';
+export interface EditableProps {
+    /** The current value of the editable field */
     value?: string;
+    /** Default value for uncontrolled usage */
     defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    onEdit?: () => void;
-    onCancel?: () => void;
+    /** Called when the value is submitted (Enter key or blur) */
     onSubmit?: (value: string) => void;
-    placeholder?: string;
-    invalid?: boolean;
-    required?: boolean;
-    maxLength?: number;
+    /** Called when the value changes during editing */
+    onChange?: (value: string) => void;
+    /** Whether the field is disabled from editing */
     disabled?: boolean;
-    triggerMode?: "click" | "dblclick" | "focus";
-    controlled?: boolean;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Whether to auto-focus when editing starts */
+    autoFocus?: boolean;
+    /** Whether to select all text when editing starts */
+    selectAllOnFocus?: boolean;
+    /** Children components (EditablePreview, EditableInput) */
+    children: React.ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
 }
-declare const Editable: React.ForwardRefExoticComponent<EditableProps & React.RefAttributes<HTMLDivElement>>;
-export interface EditablePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface EditablePreviewProps {
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Custom render function */
     children?: React.ReactNode;
 }
-declare const EditablePreview: React.ForwardRefExoticComponent<EditablePreviewProps & React.RefAttributes<HTMLDivElement>>;
-export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    autoFocus?: boolean;
-}
-declare const EditableInput: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLDivElement>>;
-export interface EditableTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
-    autoFocus?: boolean;
+export interface EditableInputProps {
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Input type */
+    type?: string;
+    /** Auto-sizing behavior */
     autoResize?: boolean;
+    /** Minimum width for auto-resize */
+    minWidth?: number;
+    /** Character width multiplier for auto-resize */
+    charWidth?: number;
 }
-declare const EditableTextarea: React.ForwardRefExoticComponent<EditableTextareaProps & React.RefAttributes<HTMLDivElement>>;
-export { Editable, EditablePreview, EditableInput, EditableTextarea, useEditable };
+/**
+ * Editable - A compound component for inline editing
+ *
+ * @example
+ * ```tsx
+ * <Editable defaultValue="Click to edit" onSubmit={handleSubmit}>
+ *   <EditablePreview className="cursor-pointer hover:bg-gray-100 p-2" />
+ *   <EditableInput className="border-2 border-blue-500 p-2" autoResize />
+ * </Editable>
+ * ```
+ */
+export declare const Editable: React.FC<EditableProps>;
+/**
+ * EditablePreview - Shows the value when not editing
+ */
+export declare const EditablePreview: React.FC<EditablePreviewProps>;
+/**
+ * EditableInput - Shows the input field when editing
+ */
+export declare const EditableInput: React.FC<EditableInputProps>;
+export { EditablePreview as EditableDisplay };
+export { EditableInput as EditableField };
+export default Editable;