@cofhe/react 0.0.0-alpha-20260413110630 → 0.0.0-alpha-20260518122951

package/README.md

@@ -1,6 +1,6 @@
 # @cofhe/react
 
-React component and hook for the CoFHE SDK - featuring the advanced FnxEncryptInput component.
+React component and hook for the CoFHE SDK - featuring the advanced CofheEncryptInput component.
 
 ## Installation
 
@@ -16,7 +16,6 @@ pnpm add @cofhe/react @cofhe/sdk
 
 ```tsx
 import { CofheProvider } from '@cofhe/react';
-import '@cofhe/react/styles.css'; // Import component styles
 import { createCofheClient } from '@cofhe/sdk/web';
 
 const client = createCofheClient(config);
@@ -30,14 +29,49 @@ function App() {
 }
 ```
 
-### 2. Use the FnxEncryptInput component
+### Hooks-only usage
+
+If you only want hooks/providers and do not want package CSS or UI components, import from the root package only:
+
+```tsx
+import { CofheProvider, useCofheClient } from '@cofhe/react';
+
+function App() {
+  return (
+    <CofheProvider config={config}>
+      <YourHookDrivenApp />
+    </CofheProvider>
+  );
+}
+```
+
+If you do want the styled React UI components, import them from `@cofhe/react/ui`:
 
 ```tsx
-import { FnxEncryptInput, FheTypesList } from '@cofhe/react';
+import { CofheProvider } from '@cofhe/react';
+import { CofheFloatingButtonWithProvider } from '@cofhe/react/ui';
+
+function App() {
+  return (
+    <CofheProvider config={config}>
+      <YourApp />
+      <CofheFloatingButtonWithProvider />
+    </CofheProvider>
+  );
+}
+```
+
+The `@cofhe/react/ui` entrypoint includes the package styles automatically.
+
+### 2. Use the CofheEncryptInput component
+
+```tsx
+import { FheTypesList } from '@cofhe/react';
+import { CofheEncryptInput } from '@cofhe/react/ui';
 
 function MyComponent() {
   return (
-    <FnxEncryptInput
+    <CofheEncryptInput
       placeholder="Enter value to encrypt..."
       options={FheTypesList} // Pre-defined FHE types
       showProgressBar={true}
@@ -75,7 +109,7 @@ function CustomComponent() {
 }
 ```
 
-## FnxEncryptInput Component
+## CofheEncryptInput Component
 
 Advanced input component with integrated features:
 
@@ -85,7 +119,7 @@ Advanced input component with integrated features:
 - ✅ **Real-time Input Validation** - Validates input against selected FHE type
 - ✅ **Progress Tracking** - Shows encryption steps with progress bar
 - ✅ **Copy to Clipboard** - Copy encrypted results with one click
-- ✅ **Material-UI Icons** - Beautiful, consistent iconography
+- ✅ **Bundled Iconography** - Consistent icons with no extra consumer install
 - ✅ **Responsive Design** - Works on desktop and mobile
 - ✅ **Dark Mode Support** - Automatic dark/light theme support
 - ✅ **TypeScript Support** - Full type safety
@@ -93,7 +127,7 @@ Advanced input component with integrated features:
 ### Props
 
 ```tsx
-interface FnxEncryptInputProps {
+interface CofheEncryptInputProps {
   placeholder?: string;
   initialValue?: string;
   options?: FheTypeOption[]; // Use FheTypesList or custom options
@@ -131,20 +165,16 @@ const {
 
 ## Styling
 
-The package includes Tailwind CSS styles. Import them in your app:
-
-```tsx
-import '@cofhe/react/styles.css';
-```
+The root `@cofhe/react` entrypoint is headless and does not load package styles.
 
-If you're using Tailwind CSS in your project, the component classes will work automatically.
+If you import components from `@cofhe/react/ui`, the package styles are loaded automatically.
 
 ## Dependencies
 
 ### Required Peer Dependencies
 
-- `react` ^16.8.0 || ^17.0.0 || ^18.0.0
-- `react-dom` ^16.8.0 || ^17.0.0 || ^18.0.0
+- `react` ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+- `react-dom` ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 - `viem` ^2.38.6
 
 ### CoFHE SDK Dependencies