refactor(accordion) - remove accordion dependency (#782)

* remove label && slot

* remove react-label dependency

* remove dependency

* format

* adapt plan

* chore(button) - remove react-slog

* updates

* update plan

* edit plan

* refactor(accordion) - remove radix accordion dependency

* edit plan

* format

* fix test

* fix accordion

* add improvements

* fix animation

* fix

* fix

Author: gabrielseco

package-lock.json

@@ -87,7 +87,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^4.1.3",
-    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",

package.json

@@ -8,41 +8,19 @@ Decouple all Radix UI (and other visual) dependencies from the library core, mak
 
 ### Radix packages in use (11 total)
 
-- `@radix-ui/react-accordion` — `ui/accordion.tsx`
 - `@radix-ui/react-checkbox` — `ui/checkbox.tsx`
 - `@radix-ui/react-collapsible` — `ui/collapsible.tsx`
 - `@radix-ui/react-dialog` — `ui/dialog.tsx`
-- `@radix-ui/react-label` — `ui/label.tsx`, `ui/form.tsx`
 - `@radix-ui/react-popover` — `ui/popover.tsx`
 - `@radix-ui/react-radio-group` — `ui/radio-group.tsx`
 - `@radix-ui/react-scroll-area` — `ui/scroll-area.tsx`
 - `@radix-ui/react-select` — `ui/select.tsx`
-- `@radix-ui/react-slot` — `ui/form.tsx` (`FormControl`)
 - `@radix-ui/react-tabs` — `ui/tabs.tsx`
 
-### Visual components embedded in flows/shared (must be made overridable or moved)
-
-- `EstimationResults` — uses `Accordion`
-- `SummaryResults` — uses `Accordion`
-
 ---
 
 ## Phases
 
-### Phase 1 — Simplify `src/components/ui/form.tsx`
-
-Remove the two Radix dependencies while keeping the helper pattern intact.
-
-**Changes:**
-
-- `FormLabel`: replace `@radix-ui/react-label` + `Label` with a plain `<label>` element.
-- `FormControl`: replace `@radix-ui/react-slot` `Slot` with a lightweight wrapper that clones the child and merges `id` + `aria-*` props using `React.cloneElement`, keeping accessibility intact.
-- Remove imports: `@radix-ui/react-label`, `@radix-ui/react-slot`, `Label`.
-
-`FormField`, `FormItem`, `FormDescription`, `FormMessage` require no changes (no Radix).
-
----
-
 ### Phase 2 — Move all Default components to `examples/`
 
 All files in `src/components/form/fields/default/` are reference implementations that depend on Radix-backed `ui/` components. Move them to `examples/fields/`.
@@ -139,45 +117,6 @@ These pure-HTML components have no Radix dependency but are still visual. Move t
 
 ---
 
-### Phase 4 — Make flows with embedded visual components headless
-
-For each flow component that directly renders visual elements (Card, Button, Alert, Accordion), replace the hardcoded component with either:
-
-- **Component override slot** via a `components` prop (preferred for public-facing output components).
-- **Native HTML equivalent** where the component is simple enough (e.g., `Button` → `<button>`, `Card` → `<div>`).
-
-#### 4a. `EstimationResults`
-
-Currently accepts a partial `components` prop. Extend it to cover all internal visual dependencies:
-
-```ts
-type EstimationResultsComponents = {
-  Accordion?: React.ComponentType<...>;
-  Tooltip?: React.ComponentType<{ content: React.ReactNode; children: React.ReactNode }>;
-  ActionsDropdown?: React.ComponentType<ActionsDropdownProps>;
-  HiringSection?: React.ComponentType<...>;     // already exists
-  OnboardingTimeline?: React.ComponentType<...>; // already exists
-  Header?: React.ComponentType<...>;             // already exists
-  Footer?: React.ComponentType;                  // already exists
-};
-```
-
-The default for each slot is a plain HTML fallback (no Radix).
-
-#### 4b. `SummaryResults`
-
-Same approach — accept `Card` and `Accordion` overrides. Provide plain HTML defaults.
-
-#### 4d. `Termination/PaidTimeOff`
-
-Replace `Button` import with a `components?.button` override or a plain `<button>`.
-
-#### 4f. `ActionsDropdown`
-
-Replace `Button` from `ui/button` with a native `<button>` element directly. `ActionsDropdown` is already a plain dropdown with no Radix — only the `Button` wrapper is Radix-backed.
-
----
-
 ### Phase 5 — Remove all `@radix-ui/*` from `package.json`
 
 After phases 1–4, verify no file in `src/` imports from `@radix-ui/*`. Then remove all 11 Radix entries from `package.json` dependencies.
@@ -246,8 +185,4 @@ examples/
 
 ## Open questions before starting
 
-1. **`form.tsx` `FormControl` replacement**: Use `React.cloneElement` or remove entirely? Since Default components move to examples and those are the only `FormControl` consumers, we could remove `FormControl` from the core export and let examples bring their own version.
-
-2. **`EstimationResults` plain HTML defaults**: When no `Card`/`Accordion` override is given, should the component render plain `<div>` fallbacks (keeping it functional but unstyled), or should it throw (forcing the consumer to provide all slots)? Recommendation: plain `<div>` fallbacks so the component works out-of-the-box without any Radix.
-
-3. **Naming the examples folder**: `examples/` vs `packages/ui/` vs keeping it in the repo as a separate package. TBD with team.
+1. **Naming the examples folder**: `examples/` vs `packages/ui/` vs keeping it in the repo as a separate package. TBD with team.