@clubmed/trident-ui 2.0.0-alpha.2 → 2.0.0-alpha.20

package/README.md

@@ -27,78 +27,35 @@ React UI components is a library of reusable components for building web applica
 ## Requirements
 
 - React 18
-- Tailwind 3
+- Tailwind 4
 
 ## Installation
 
 ```sh
 npm install --save @clubmed/trident-icons @clubmed/trident-ui react react-dom
-npm install --save-dev tailwindcss postcss autoprefixer
+npm install --save-dev tailwindcss
 ```
 
 ```sh
 yarn add @clubmed/trident-icons @clubmed/trident-ui react react-dom
-yarn add -D tailwindcss postcss autoprefixer
+yarn add -D tailwindcss
 ```
 
 ```sh
 pnpm add @clubmed/trident-icons @clubmed/trident-ui react react-dom
-pnpm add -D tailwindcss postcss autoprefixer
+pnpm add -D tailwindcss
 ```
 
-## Tailwind configuration
+> If you use vite, you can install `@tailwindcss/vite` instead of using postcss. See [Tailwind vite documentation](https://tailwindcss.com/docs/installation/using-vite)
 
-This package exports a `tailwind.preset` file that you can use to extend your own configuration.
+## Configuration
 
-Edit your `tailwind.config.ts` file and add the following line:
-
-```ts
-import type { Config } from 'tailwindcss';
-import { tailwindPreset } from '@clubmed/trident-ui/tailwind'; // add this line
-
-const config = {
-  presets: [tailwindPreset as unknown as Config],
-  content: [
-    './doc/**/*.mdx',
-    './lib/**/*.{ts,tsx,mdx}', // adapt this line to your project
-    '**/node_modules/@clubmed/trident-ui/**/*.js',
-  ],
-} satisfies Config;
-
-export default config;
-```
-
-> Note: If you have a TypeScript issue when you import the `tailwind.preset` file, you can add the following line in your `tsconfig.json` file:
-
-```json
-{
-  "include": ["tailwind.config.ts"]
-}
-```
-
-Then you have to configure your `postcss.config.cts` file to use the `tailwind.config.ts` file:
-
-```ts
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-
-Then add the styles to your `index.css` file:
+Just add the styles to your `index.css` file:
 
 ```css
 @import '@clubmed/trident-ui/style.css';
 ```
 
-or in your `main.tsx` file:
-
-```tsx
-import '@clubmed/trident-ui/style.css';
-```
-
 ## Tailwind Merge configuration
 
 The design tokens shipped with Trident UI use custom `text-*` utilities (`text-b5`, `text-h2`, etc.) that behave like font-size helpers. When consumers rely on [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) to compose classes, these tokens must be registered as typography utilities; otherwise `tailwind-merge` may wrongly treat them as text-color classes and drop valid styles (for example `twMerge('text-b5', 'text-white')` would remove `text-white`).
@@ -268,15 +225,38 @@ function App() {
 }
 ```
 
-### Generate fonts from icons (dev)
+## Migrate from v1 to v2
 
-The project have a builder to compile svg to font. Just add Svg inside `atoms/Icons/svg` then
-run the following command:
+1. Update to the latest v1 release of Trident UI before starting the migration.
+2. Migrate your code base on Button v2 and Card v2.
+3. Replace any import paths containing `atoms` or `molecules` with the `ui` path segment.
+4. irectories in paths are now in to lower case. (e.g.: `molecules/Buttons/Button` -> `ui/buttons/button`).
+5. Use icons directly from `@clubmed/trident-icons`.
 
-```sh
-npm run build:fonts
+> At this point, check if you haven't any issue with paths and components before moving to the next step.
+
+Now, you can update to Tailwind 4 and Trident UI v2:
+
+- Tailwind 4 no longer reads `tailwind.config.ts` or presets shipped by Trident UI; rename your config to `tailwind.config.legacy.(js|ts)`.
+- Adopt the Tailwind 4 syntax updates (for example `@layer`, `@utility`).
+
+Add the styles to your `index.css` file:
+
+```css
+@import '@clubmed/trident-ui/style.css';
+```
+
+If your `custom.css` file uses Trident UI classes or variables, add this at the very top:
+
+```css
+@reference "@clubmed/trident-ui/style.css";
+
+.button {
+}
 ```
 
+It should be enough :)
+
 ### Know issues
 
 Currently, some icons in Font mode aren't correctly rendered because the SVG source aren't correctly

package/chunks/Backdrop.js

@@ -0,0 +1,119 @@
+import { jsx as h, jsxs as X } from "react/jsx-runtime";
+import { useState as v, useRef as j, useCallback as w, useEffect as B } from "react";
+import { c as D } from "./clsx.js";
+import { Portal as G } from "../ui/Portal.js";
+const R = 0, I = 1, T = 2, m = 3, p = 4, z = 5, P = 6, A = [
+  "preEnter",
+  "entering",
+  "entered",
+  "preExit",
+  "exiting",
+  "exited",
+  "unmounted"
+], U = (t) => ({
+  _s: t,
+  status: A[t],
+  isEnter: t < m,
+  isMounted: t !== P,
+  isResolved: t === T || t > p
+}), y = (t) => t ? P : z, O = (t, e) => {
+  switch (t) {
+    case I:
+    case R:
+      return T;
+    case p:
+    case m:
+      return y(e);
+  }
+}, q = (t) => typeof t == "object" ? [t.enter, t.exit] : [t, t], _ = (...t) => setTimeout(...t), F = (t, e) => _(() => {
+  isNaN(document.body.offsetTop) || t(e + 1);
+}, 0), M = (t, e, a, s, i) => {
+  clearTimeout(s.current);
+  const n = U(t);
+  e(n), a.current = n, i && i({ current: n });
+}, H = ({ enter: t = !0, exit: e = !0, preEnter: a, preExit: s, timeout: i, initialEntered: n, mountOnEnter: b, unmountOnExit: u, onStateChange: o } = {}) => {
+  const [r, f] = v(() => U(n ? T : y(b))), c = j(r), d = j(0), [x, S] = q(i), E = w(() => {
+    const l = O(c.current._s, u);
+    l && M(l, f, c, d, o);
+  }, [o, u]);
+  return [
+    r,
+    w((l) => {
+      const N = (k) => {
+        switch (M(k, f, c, d, o), k) {
+          case I:
+            x >= 0 && (d.current = _(E, x));
+            break;
+          case p:
+            S >= 0 && (d.current = _(E, S));
+            break;
+          case R:
+          case m:
+            d.current = F(N, k);
+            break;
+        }
+      }, g = c.current.isEnter;
+      typeof l != "boolean" && (l = !g), l ? !g && N(t ? a ? R : I : T) : g && N(e ? s ? m : p : y(u));
+    }, [
+      E,
+      o,
+      t,
+      e,
+      a,
+      s,
+      x,
+      S,
+      u
+    ]),
+    E
+  ];
+}, W = ({
+  children: t,
+  className: e = "flex justify-center",
+  onClose: a,
+  isVisible: s,
+  target: i = "backdrop",
+  sweep: n = !1,
+  ...b
+}) => {
+  const [u, o] = H({
+    timeout: { enter: 0, exit: 500 },
+    mountOnEnter: !0,
+    unmountOnExit: !0,
+    preEnter: !0
+  }), { status: r, isMounted: f } = u;
+  B(() => {
+    o(s);
+  }, [s, o]);
+  const c = r === "preEnter" || r === "exiting";
+  return /* @__PURE__ */ h(G, { target: i, children: f && /* @__PURE__ */ X(
+    "div",
+    {
+      ...b,
+      role: "presentation",
+      className: D(e, "fixed inset-0 isolate items-center"),
+      children: [
+        /* @__PURE__ */ h(
+          "button",
+          {
+            "aria-hidden": "true",
+            className: D("absolute inset-0 -z-1 transition-all duration-500", {
+              "bg-white/80 backdrop-blur": !c,
+              "bg-white/0 backdrop-blur-none": c,
+              "-translate-x-full": n && (r === "preEnter" || r === "entering"),
+              "translate-x-full": n && r === "exiting"
+            }),
+            onClick: a,
+            type: "button"
+          }
+        ),
+        t
+      ]
+    }
+  ) });
+};
+export {
+  W as B,
+  H as u
+};
+//# sourceMappingURL=Backdrop.js.map

package/chunks/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sources":["../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/utils.mjs","../../../../node_modules/.pnpm/react-transition-state@2.3.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-transition-state/dist/esm/useTransitionState.mjs","../../lib/ui/Backdrop.tsx"],"sourcesContent":["//#region src/utils.ts\nconst PRE_ENTER = 0;\nconst ENTERING = 1;\nconst ENTERED = 2;\nconst PRE_EXIT = 3;\nconst EXITING = 4;\nconst EXITED = 5;\nconst UNMOUNTED = 6;\nconst STATUS = [\n\t\"preEnter\",\n\t\"entering\",\n\t\"entered\",\n\t\"preExit\",\n\t\"exiting\",\n\t\"exited\",\n\t\"unmounted\"\n];\nconst getState = (status) => ({\n\t_s: status,\n\tstatus: STATUS[status],\n\tisEnter: status < PRE_EXIT,\n\tisMounted: status !== UNMOUNTED,\n\tisResolved: status === ENTERED || status > EXITING\n});\nconst startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;\nconst getEndStatus = (status, unmountOnExit) => {\n\tswitch (status) {\n\t\tcase ENTERING:\n\t\tcase PRE_ENTER: return ENTERED;\n\t\tcase EXITING:\n\t\tcase PRE_EXIT: return startOrEnd(unmountOnExit);\n\t}\n};\nconst getTimeout = (timeout) => typeof timeout === \"object\" ? [timeout.enter, timeout.exit] : [timeout, timeout];\nconst _setTimeout = (...args) => setTimeout(...args);\nconst nextTick = (transitState, status) => _setTimeout(() => {\n\tisNaN(document.body.offsetTop) || transitState(status + 1);\n}, 0);\n\n//#endregion\nexport { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };","import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from \"./utils.mjs\";\nimport { useCallback, useRef, useState } from \"react\";\n\n//#region src/useTransitionState.ts\nconst updateState = (status, setState, latestState, timeoutId, onChange) => {\n\tclearTimeout(timeoutId.current);\n\tconst state = getState(status);\n\tsetState(state);\n\tlatestState.current = state;\n\tonChange && onChange({ current: state });\n};\nconst useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {\n\tconst [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));\n\tconst latestState = useRef(state);\n\tconst timeoutId = useRef(0);\n\tconst [enterTimeout, exitTimeout] = getTimeout(timeout);\n\tconst endTransition = useCallback(() => {\n\t\tconst status = getEndStatus(latestState.current._s, unmountOnExit);\n\t\tstatus && updateState(status, setState, latestState, timeoutId, onChange);\n\t}, [onChange, unmountOnExit]);\n\treturn [\n\t\tstate,\n\t\tuseCallback((toEnter) => {\n\t\t\tconst transitState = (status) => {\n\t\t\t\tupdateState(status, setState, latestState, timeoutId, onChange);\n\t\t\t\tswitch (status) {\n\t\t\t\t\tcase ENTERING:\n\t\t\t\t\t\tif (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase EXITING:\n\t\t\t\t\t\tif (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase PRE_ENTER:\n\t\t\t\t\tcase PRE_EXIT:\n\t\t\t\t\t\ttimeoutId.current = nextTick(transitState, status);\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst enterStage = latestState.current.isEnter;\n\t\t\tif (typeof toEnter !== \"boolean\") toEnter = !enterStage;\n\t\t\tif (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);\n\t\t\telse enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));\n\t\t}, [\n\t\t\tendTransition,\n\t\t\tonChange,\n\t\t\tenter,\n\t\t\texit,\n\t\t\tpreEnter,\n\t\t\tpreExit,\n\t\t\tenterTimeout,\n\t\t\texitTimeout,\n\t\t\tunmountOnExit\n\t\t]),\n\t\tendTransition\n\t];\n};\n\n//#endregion\nexport { useTransitionState };","import {\n  type ComponentProps,\n  type FunctionComponent,\n  type MouseEvent,\n  type PropsWithChildren,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { useTransitionState } from 'react-transition-state';\nimport { Portal } from './Portal';\n\nexport interface BackdropProps extends ComponentProps<'div'> {\n  /**\n   * On close\n   * @param event\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Is visible\n   */\n  isVisible?: boolean;\n  /**\n   * Sweep Mode™\n   * (makes it appear from the sides instead of from everywhere)\n   */\n  sweep?: boolean;\n  /**\n   * Target ID for the Portal component\n   */\n  target?: ComponentProps<typeof Portal>['target'];\n}\n\nexport const Backdrop: FunctionComponent<PropsWithChildren<BackdropProps>> = ({\n  children,\n  className = 'flex justify-center',\n  onClose,\n  isVisible,\n  target = 'backdrop',\n  sweep = false,\n  ...attrs\n}) => {\n  const [state, toggle] = useTransitionState({\n    timeout: { enter: 0, exit: 500 },\n    mountOnEnter: true,\n    unmountOnExit: true,\n    preEnter: true,\n  });\n\n  const { status, isMounted } = state;\n\n  useEffect(() => {\n    toggle(isVisible);\n  }, [isVisible, toggle]);\n\n  const animated = status === 'preEnter' || status === 'exiting';\n\n  return (\n    <Portal target={target}>\n      {isMounted && (\n        <div\n          {...attrs}\n          role=\"presentation\"\n          className={clsx(className, 'fixed inset-0 isolate items-center')}\n        >\n          <button\n            aria-hidden=\"true\"\n            className={clsx('absolute inset-0 -z-1 transition-all duration-500', {\n              'bg-white/80 backdrop-blur': !animated,\n              'bg-white/0 backdrop-blur-none': animated,\n              '-translate-x-full': sweep && (status === 'preEnter' || status === 'entering'),\n              'translate-x-full': sweep && status === 'exiting',\n            })}\n            onClick={onClose}\n            type=\"button\"\n          />\n          {children}\n        </div>\n      )}\n    </Portal>\n  );\n};\n"],"names":["PRE_ENTER","ENTERING","ENTERED","PRE_EXIT","EXITING","EXITED","UNMOUNTED","STATUS","getState","status","startOrEnd","unmounted","getEndStatus","unmountOnExit","getTimeout","timeout","_setTimeout","args","nextTick","transitState","updateState","setState","latestState","timeoutId","onChange","state","useTransitionState","enter","exit","preEnter","preExit","initialEntered","mountOnEnter","useState","useRef","enterTimeout","exitTimeout","endTransition","useCallback","toEnter","enterStage","Backdrop","children","className","onClose","isVisible","target","sweep","attrs","toggle","isMounted","useEffect","animated","jsx","Portal","jsxs","clsx"],"mappings":"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","x_google_ignoreList":[0,1]}