@sakura-ui/sakura-ui 0.2.0 → 0.4.1

package/packages/helper/dist/index.cjs.js

@@ -0,0 +1,76 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=':not([tabindex^="-"])',n=":not(:disabled)",d=[`a[href]${o}`,`area[href]${o}`,`input:not([type="hidden"])${o}${n}`,`select${o}${n}`,`textarea${o}${n}`,`button${o}${n}`,`details > summary:first-of-type${o}`,`details:not(:has(> summary))${o}`,`iframe${o}`,`audio[controls]${o}`,`video[controls]${o}`,`[contenteditable]${o}`,`[tabindex]${o}`],f=d.join(","),a=(e,s)=>(e%s+s)%s,b=(...e)=>e.filter(Boolean).join(" "),h=e=>{const s=[],c=[];let t=-1,r=-1;for(const{children:v,...i}of e){if(t<i.depth&&i.depth<=r+1){const l=i.depth-t;r=i.depth;const u=c[l-1];u.children??=[],u.children.push(i),c[l]=i;continue}s.push(i),c[0]=i,t=r=i.depth}return s};exports.Style=void 0;(e=>{e.clickable=`
+    px-2
+    min-h-[calc(44/16*1rem)]
+    border
+    border-transparent
+    rounded-lg
+    hover:bg-solid-grey-50
+  `,e.selected=`
+    rounded-full
+    bg-yellow-50
+  `;const s=`
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  `;e.focusRectCondensed=`
+    ${s}
+    focus-visible:-outline-offset-4
+    focus-visible:ring-[calc(6/16*1rem)]
+    focus-visible:ring-inset
+  `,e.focusRectCondensedWithBg=`
+    ${e.focusRectCondensed}
+    focus-visible:bg-yellow-300
+  `,e.focusRect=`
+    ${s}
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  `,e.focusRounded=`
+    ${e.focusRect}
+    focus-visible:rounded-sm
+  `,e.focusCard=`
+    ${e.focusRect}
+    focus-visible:rounded-2xl
+    sm:focus-visible:rounded-3xl
+  `,e.focusRectWithBg=`
+    ${e.focusRect}
+    focus-visible:bg-yellow-300
+  `,e.focusRoundedWithBg=`
+    ${e.focusRectWithBg}
+    focus-visible:rounded-sm
+  `,e.hoverUnderline=`
+    hover:underline
+    hover:underline-offset-[calc(3/16*1rem)]
+  `,e.underline=`
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  `,e.underlineNoDeco=`
+    underline
+    underline-offset-[calc(3/16*1rem)]
+  `,e.popover=`
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `,e.popoverPositionBottomRight=`
+    absolute
+    top-11
+    right-0
+  `,e.popoverPositionBottomLeft=`
+    absolute
+    top-11
+    left-0
+  `,(c=>{c.focus=`
+      peer-focus-visible:outline-4
+      peer-focus-visible:outline-black
+      peer-focus-visible:ring-yellow-300
+    `,c.focusRect=`
+      ${c.focus}
+      peer-focus-visible:outline-offset-[calc(2/16*1rem)]
+      peer-focus-visible:ring-[calc(2/16*1rem)]
+    `})(e.Peer||(e.Peer={}))})(exports.Style||(exports.Style={}));exports.cx=b;exports.focusableSelector=f;exports.mod=a;exports.treefy=h;

package/packages/helper/dist/index.es.js

@@ -0,0 +1,119 @@
+const o = ':not([tabindex^="-"])', n = ":not(:disabled)", f = [
+  `a[href]${o}`,
+  `area[href]${o}`,
+  `input:not([type="hidden"])${o}${n}`,
+  `select${o}${n}`,
+  `textarea${o}${n}`,
+  `button${o}${n}`,
+  `details > summary:first-of-type${o}`,
+  `details:not(:has(> summary))${o}`,
+  `iframe${o}`,
+  `audio[controls]${o}`,
+  `video[controls]${o}`,
+  `[contenteditable]${o}`,
+  `[tabindex]${o}`
+], b = f.join(","), h = (e, s) => (e % s + s) % s, p = (...e) => e.filter(Boolean).join(" "), v = (e) => {
+  const s = [], c = [];
+  let t = -1, r = -1;
+  for (const { children: a, ...i } of e) {
+    if (t < i.depth && i.depth <= r + 1) {
+      const u = i.depth - t;
+      r = i.depth;
+      const l = c[u - 1];
+      l.children ??= [], l.children.push(i), c[u] = i;
+      continue;
+    }
+    s.push(i), c[0] = i, t = r = i.depth;
+  }
+  return s;
+};
+var d;
+((e) => {
+  e.clickable = `
+    px-2
+    min-h-[calc(44/16*1rem)]
+    border
+    border-transparent
+    rounded-lg
+    hover:bg-solid-grey-50
+  `, e.selected = `
+    rounded-full
+    bg-yellow-50
+  `;
+  const s = `
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  `;
+  e.focusRectCondensed = `
+    ${s}
+    focus-visible:-outline-offset-4
+    focus-visible:ring-[calc(6/16*1rem)]
+    focus-visible:ring-inset
+  `, e.focusRectCondensedWithBg = `
+    ${e.focusRectCondensed}
+    focus-visible:bg-yellow-300
+  `, e.focusRect = `
+    ${s}
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  `, e.focusRounded = `
+    ${e.focusRect}
+    focus-visible:rounded-sm
+  `, e.focusCard = `
+    ${e.focusRect}
+    focus-visible:rounded-2xl
+    sm:focus-visible:rounded-3xl
+  `, e.focusRectWithBg = `
+    ${e.focusRect}
+    focus-visible:bg-yellow-300
+  `, e.focusRoundedWithBg = `
+    ${e.focusRectWithBg}
+    focus-visible:rounded-sm
+  `, e.hoverUnderline = `
+    hover:underline
+    hover:underline-offset-[calc(3/16*1rem)]
+  `, e.underline = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  `, e.underlineNoDeco = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+  `, e.popover = `
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `, e.popoverPositionBottomRight = `
+    absolute
+    top-11
+    right-0
+  `, e.popoverPositionBottomLeft = `
+    absolute
+    top-11
+    left-0
+  `, ((c) => {
+    c.focus = `
+      peer-focus-visible:outline-4
+      peer-focus-visible:outline-black
+      peer-focus-visible:ring-yellow-300
+    `, c.focusRect = `
+      ${c.focus}
+      peer-focus-visible:outline-offset-[calc(2/16*1rem)]
+      peer-focus-visible:ring-[calc(2/16*1rem)]
+    `;
+  })(e.Peer || (e.Peer = {}));
+})(d || (d = {}));
+export {
+  d as Style,
+  p as cx,
+  b as focusableSelector,
+  h as mod,
+  v as treefy
+};

package/packages/helper/dist/types/calc.d.ts

@@ -0,0 +1,2 @@
+export declare const mod: (n: number, m: number) => number;
+//# sourceMappingURL=calc.d.ts.map

package/packages/helper/dist/types/calc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc.d.ts","sourceRoot":"","sources":["../../src/calc.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,MAA2B,CAAA"}

package/packages/{forms/dist/types/utils/class.d.ts → helper/dist/types/cx.d.ts}

@@ -1,2 +1,2 @@
 export declare const cx: (...classNames: any[]) => string;
-//# sourceMappingURL=class.d.ts.map
+//# sourceMappingURL=cx.d.ts.map

package/packages/helper/dist/types/cx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,EAAE,GAAI,GAAG,YAAY,GAAG,EAAE,WAAyC,CAAA"}

package/packages/helper/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { focusableSelector } from './querySelector';
+export { mod } from './calc';
+export { cx } from './cx';
+export { treefy } from './treefy';
+export { Style } from './styles';
+//# sourceMappingURL=index.d.ts.map

package/packages/helper/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA"}

package/packages/helper/dist/types/querySelector.d.ts

@@ -0,0 +1,2 @@
+export declare const focusableSelector: string;
+//# sourceMappingURL=querySelector.d.ts.map

package/packages/helper/dist/types/querySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"querySelector.d.ts","sourceRoot":"","sources":["../../src/querySelector.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,iBAAiB,QAAsB,CAAA"}

package/packages/helper/dist/types/styles.d.ts

@@ -0,0 +1,22 @@
+export declare namespace Style {
+    const clickable = "\n    px-2\n    min-h-[calc(44/16*1rem)]\n    border\n    border-transparent\n    rounded-lg\n    hover:bg-solid-grey-50\n  ";
+    const selected = "\n    rounded-full\n    bg-yellow-50\n  ";
+    const focusRectCondensed = "\n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:-outline-offset-4\n    focus-visible:ring-[calc(6/16*1rem)]\n    focus-visible:ring-inset\n  ";
+    const focusRectCondensedWithBg = "\n    \n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:-outline-offset-4\n    focus-visible:ring-[calc(6/16*1rem)]\n    focus-visible:ring-inset\n  \n    focus-visible:bg-yellow-300\n  ";
+    const focusRect = "\n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:outline-offset-[calc(2/16*1rem)]\n    focus-visible:ring-[calc(2/16*1rem)]\n  ";
+    const focusRounded = "\n    \n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:outline-offset-[calc(2/16*1rem)]\n    focus-visible:ring-[calc(2/16*1rem)]\n  \n    focus-visible:rounded-sm\n  ";
+    const focusCard = "\n    \n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:outline-offset-[calc(2/16*1rem)]\n    focus-visible:ring-[calc(2/16*1rem)]\n  \n    focus-visible:rounded-2xl\n    sm:focus-visible:rounded-3xl\n  ";
+    const focusRectWithBg = "\n    \n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:outline-offset-[calc(2/16*1rem)]\n    focus-visible:ring-[calc(2/16*1rem)]\n  \n    focus-visible:bg-yellow-300\n  ";
+    const focusRoundedWithBg = "\n    \n    \n    \n    focus-visible:outline-4\n    focus-visible:outline-black\n    focus-visible:ring-yellow-300\n  \n    focus-visible:outline-offset-[calc(2/16*1rem)]\n    focus-visible:ring-[calc(2/16*1rem)]\n  \n    focus-visible:bg-yellow-300\n  \n    focus-visible:rounded-sm\n  ";
+    const hoverUnderline = "\n    hover:underline\n    hover:underline-offset-[calc(3/16*1rem)]\n  ";
+    const underline = "\n    underline\n    underline-offset-[calc(3/16*1rem)]\n    hover:decoration-[calc(3/16*1rem)]\n  ";
+    const underlineNoDeco = "\n    underline\n    underline-offset-[calc(3/16*1rem)]\n  ";
+    const popover = "\n    min-w-fit\n    w-auto\n    py-2\n    bg-white\n    shadow-1\n    rounded-lg\n    border\n    border-solid-grey-420\n    has-[>:nth-child(7)]:rounded-r-none\n  ";
+    const popoverPositionBottomRight = "\n    absolute\n    top-11\n    right-0\n  ";
+    const popoverPositionBottomLeft = "\n    absolute\n    top-11\n    left-0\n  ";
+    namespace Peer {
+        const focus = "\n      peer-focus-visible:outline-4\n      peer-focus-visible:outline-black\n      peer-focus-visible:ring-yellow-300\n    ";
+        const focusRect = "\n      \n      peer-focus-visible:outline-4\n      peer-focus-visible:outline-black\n      peer-focus-visible:ring-yellow-300\n    \n      peer-focus-visible:outline-offset-[calc(2/16*1rem)]\n      peer-focus-visible:ring-[calc(2/16*1rem)]\n    ";
+    }
+}
+//# sourceMappingURL=styles.d.ts.map

package/packages/helper/dist/types/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,yBAAiB,KAAK,CAAC;IACd,MAAM,SAAS,iIAOrB,CAAA;IAEM,MAAM,QAAQ,6CAGpB,CAAA;IAQM,MAAM,kBAAkB,iOAK9B,CAAA;IAEM,MAAM,wBAAwB,4QAGpC,CAAA;IAEM,MAAM,SAAS,kNAIrB,CAAA;IAEM,MAAM,YAAY,0PAGxB,CAAA;IAEM,MAAM,SAAS,6RAIrB,CAAA;IAEM,MAAM,eAAe,6PAG3B,CAAA;IAEM,MAAM,kBAAkB,qSAG9B,CAAA;IAEM,MAAM,cAAc,4EAG1B,CAAA;IAEM,MAAM,SAAS,wGAIrB,CAAA;IAEM,MAAM,eAAe,gEAG3B,CAAA;IAEM,MAAM,OAAO,0KAUnB,CAAA;IAEM,MAAM,0BAA0B,gDAItC,CAAA;IAEM,MAAM,yBAAyB,+CAIrC,CAAA;IAED,UAAiB,IAAI,CAAC;QACb,MAAM,KAAK,iIAIjB,CAAA;QAEM,MAAM,SAAS,2PAIrB,CAAA;KACF;CACF"}

package/packages/helper/dist/types/treefy.d.ts

@@ -0,0 +1,8 @@
+type TreeNode<I> = Omit<I, 'children'> & {
+    children?: TreeNode<I>[];
+};
+export declare const treefy: <I extends {
+    depth: number;
+}>(input: I[]) => TreeNode<I>[];
+export {};
+//# sourceMappingURL=treefy.d.ts.map

package/packages/helper/dist/types/treefy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treefy.d.ts","sourceRoot":"","sources":["../../src/treefy.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;CAAE,CAAA;AAGrE,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,kBAoB7D,CAAA"}

package/packages/helper/node_modules/.bin/vitest

@@ -0,0 +1,55 @@
+#!/bin/sh
+# Resolve $0 through symlinks so basedir is the shim's real directory.
+# Cap hops at the kernel's ELOOP limit so a cycle cannot hang the shim.
+link="$0"
+hops=0
+while [ -L "$link" ] && [ "$hops" -lt 40 ]; do
+  hops=$((hops+1))
+  target=$(readlink "$link")
+  case "$target" in
+    /*) link="$target" ;;
+    *)  link="$(dirname "$link")/$target" ;;
+  esac
+done
+basedir=$(dirname "$(echo "$link" | sed -e 's,\\,/,g')")
+basedir_win="$basedir"
+exe=""
+msys=""
+
+case `uname -a` in
+  *CYGWIN*|*MINGW*|*MSYS*)
+    if command -v cygpath > /dev/null 2>&1; then
+      basedir_win=`cygpath -w "$basedir"`
+    fi
+    exe=".exe"
+    msys="true"
+  ;;
+  *WSL2*)
+    if command -v wslpath > /dev/null 2>&1; then
+      basedir_win="$(wslpath -w "$basedir" 2> /dev/null)"
+      if [ $? -ne 0 ] || [ -z "$basedir_win" ]; then
+        basedir_win="$basedir"
+      else
+        exe=".exe"
+      fi
+    fi
+  ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/vitest@4.1.11_@types+node@24.13.3_happy-dom@20.11.6_vite@7.3.6_@types+node@24.13.3_jiti@2.7.0_lightningcss@1.32.0_/node_modules/vitest/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/vitest@4.1.11_@types+node@24.13.3_happy-dom@20.11.6_vite@7.3.6_@types+node@24.13.3_jiti@2.7.0_lightningcss@1.32.0_/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/vitest@4.1.11_@types+node@24.13.3_happy-dom@20.11.6_vite@7.3.6_@types+node@24.13.3_jiti@2.7.0_lightningcss@1.32.0_/node_modules/vitest/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/vitest@4.1.11_@types+node@24.13.3_happy-dom@20.11.6_vite@7.3.6_@types+node@24.13.3_jiti@2.7.0_lightningcss@1.32.0_/node_modules:/home/runner/work/sakura-ui/sakura-ui/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -n "$exe" ] && [ -x "$basedir/node.exe" ]; then
+  exec "$basedir/node.exe"  "$basedir_win/../vitest/vitest.mjs" "$@"
+elif [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"
+elif command -v node >/dev/null 2>&1; then
+  exec node  "$basedir/../vitest/vitest.mjs" "$@"
+elif [ -n "$exe" ] && command -v node.exe >/dev/null 2>&1; then
+  exec node.exe  "$basedir_win/../vitest/vitest.mjs" "$@"
+else
+  exec node  "$basedir/../vitest/vitest.mjs" "$@"
+fi
+# cmd-shim-target=/home/runner/work/sakura-ui/sakura-ui/packages/helper/node_modules/vitest/vitest.mjs

package/packages/helper/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sakura-ui/helper",
+  "version": "0.0.9",
+  "author": "glassonion1",
+  "homepage": "https://github.com/glassonion1/sakura-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/glassonion1/sakura-ui.git",
+    "directory": "packages/helper"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "run-s lint:*",
+    "lint:lint": "biome lint ./",
+    "lint:prettier": "prettier --write --ignore-path .gitignore './src/*.ts'",
+    "prebuild": "rimraf dist",
+    "build": "run-p build:*",
+    "build:scripts": "vite build",
+    "build:types": "tsc && tsc-alias",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "happy-dom": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "vitest": "catalog:"
+  }
+}

package/packages/helper/src/calc.ts

@@ -0,0 +1 @@
+export const mod = (n: number, m: number): number => ((n % m) + m) % m

package/packages/helper/src/cx.ts

@@ -0,0 +1,2 @@
+// biome-ignore lint/suspicious/noExplicitAny: callers mix strings, booleans and undefined
+export const cx = (...classNames: any[]) => classNames.filter(Boolean).join(' ')

package/packages/helper/src/index.ts

@@ -0,0 +1,5 @@
+export { focusableSelector } from './querySelector'
+export { mod } from './calc'
+export { cx } from './cx'
+export { treefy } from './treefy'
+export { Style } from './styles'

package/packages/helper/src/querySelector.ts

@@ -0,0 +1,20 @@
+const notNegTabIndex = ':not([tabindex^="-"])'
+const notDisabled = ':not(:disabled)'
+
+const selectors = [
+  `a[href]${notNegTabIndex}`,
+  `area[href]${notNegTabIndex}`,
+  `input:not([type="hidden"])${notNegTabIndex}${notDisabled}`,
+  `select${notNegTabIndex}${notDisabled}`,
+  `textarea${notNegTabIndex}${notDisabled}`,
+  `button${notNegTabIndex}${notDisabled}`,
+  `details > summary:first-of-type${notNegTabIndex}`,
+  `details:not(:has(> summary))${notNegTabIndex}`,
+  `iframe${notNegTabIndex}`,
+  `audio[controls]${notNegTabIndex}`,
+  `video[controls]${notNegTabIndex}`,
+  `[contenteditable]${notNegTabIndex}`,
+  `[tabindex]${notNegTabIndex}`
+]
+
+export const focusableSelector = selectors.join(',')

package/packages/helper/src/styles.ts

@@ -0,0 +1,114 @@
+export namespace Style {
+  export const clickable = `
+    px-2
+    min-h-[calc(44/16*1rem)]
+    border
+    border-transparent
+    rounded-lg
+    hover:bg-solid-grey-50
+  `
+
+  export const selected = `
+    rounded-full
+    bg-yellow-50
+  `
+
+  const focus = `
+    focus-visible:outline-4
+    focus-visible:outline-black
+    focus-visible:ring-yellow-300
+  `
+
+  export const focusRectCondensed = `
+    ${focus}
+    focus-visible:-outline-offset-4
+    focus-visible:ring-[calc(6/16*1rem)]
+    focus-visible:ring-inset
+  `
+
+  export const focusRectCondensedWithBg = `
+    ${focusRectCondensed}
+    focus-visible:bg-yellow-300
+  `
+
+  export const focusRect = `
+    ${focus}
+    focus-visible:outline-offset-[calc(2/16*1rem)]
+    focus-visible:ring-[calc(2/16*1rem)]
+  `
+
+  export const focusRounded = `
+    ${focusRect}
+    focus-visible:rounded-sm
+  `
+
+  export const focusCard = `
+    ${focusRect}
+    focus-visible:rounded-2xl
+    sm:focus-visible:rounded-3xl
+  `
+
+  export const focusRectWithBg = `
+    ${focusRect}
+    focus-visible:bg-yellow-300
+  `
+
+  export const focusRoundedWithBg = `
+    ${focusRectWithBg}
+    focus-visible:rounded-sm
+  `
+
+  export const hoverUnderline = `
+    hover:underline
+    hover:underline-offset-[calc(3/16*1rem)]
+  `
+
+  export const underline = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+    hover:decoration-[calc(3/16*1rem)]
+  `
+
+  export const underlineNoDeco = `
+    underline
+    underline-offset-[calc(3/16*1rem)]
+  `
+
+  export const popover = `
+    min-w-fit
+    w-auto
+    py-2
+    bg-white
+    shadow-1
+    rounded-lg
+    border
+    border-solid-grey-420
+    has-[>:nth-child(7)]:rounded-r-none
+  `
+
+  export const popoverPositionBottomRight = `
+    absolute
+    top-11
+    right-0
+  `
+
+  export const popoverPositionBottomLeft = `
+    absolute
+    top-11
+    left-0
+  `
+
+  export namespace Peer {
+    export const focus = `
+      peer-focus-visible:outline-4
+      peer-focus-visible:outline-black
+      peer-focus-visible:ring-yellow-300
+    `
+
+    export const focusRect = `
+      ${focus}
+      peer-focus-visible:outline-offset-[calc(2/16*1rem)]
+      peer-focus-visible:ring-[calc(2/16*1rem)]
+    `
+  }
+}

package/packages/helper/src/treefy.ts

@@ -0,0 +1,24 @@
+type TreeNode<I> = Omit<I, 'children'> & { children?: TreeNode<I>[] }
+type Input<I> = (I & { children: unknown })[]
+
+export const treefy = <I extends { depth: number }>(input: I[]) => {
+  const tree: TreeNode<I>[] = []
+  const last: TreeNode<I>[] = []
+  let top = -1
+  let bottom = -1
+  for (const { children: _, ...item } of input as Input<I>) {
+    if (top < item.depth && item.depth <= bottom + 1) {
+      const idx = item.depth - top
+      bottom = item.depth
+      const parent = last[idx - 1]
+      parent.children ??= []
+      parent.children.push(item)
+      last[idx] = item
+      continue
+    }
+    tree.push(item)
+    last[0] = item
+    top = bottom = item.depth
+  }
+  return tree
+}

package/packages/helper/tests/calc.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { mod } from '../src/calc'
+
+describe('mod', () => {
+  it('should return the remainder for positive numbers', () => {
+    expect(mod(5, 3)).toBe(2)
+  })
+
+  it('should return a positive result for negative dividend', () => {
+    expect(mod(-1, 3)).toBe(2)
+    expect(mod(-5, 3)).toBe(1)
+  })
+
+  it('should return 0 when evenly divisible', () => {
+    expect(mod(6, 3)).toBe(0)
+    expect(mod(7, 7)).toBe(0)
+  })
+
+  it('should return 0 when dividend is 0', () => {
+    expect(mod(0, 5)).toBe(0)
+  })
+})

package/packages/helper/tests/cx.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { cx } from '../src/cx'
+
+describe('cx', () => {
+  it('should join multiple class names with a space', () => {
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('should filter out falsy values', () => {
+    expect(cx('foo', false, 'bar', null, undefined, 0, '', 'baz')).toBe(
+      'foo bar baz'
+    )
+  })
+
+  it('should handle conditional class names', () => {
+    const isActive = true
+    const isDisabled = false
+    expect(cx('base', isActive && 'active', isDisabled && 'disabled')).toBe(
+      'base active'
+    )
+  })
+
+  it('should return an empty string when no arguments', () => {
+    expect(cx()).toBe('')
+  })
+
+  it('should handle a single class name', () => {
+    expect(cx('only')).toBe('only')
+  })
+})

package/packages/helper/tests/querySelector.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { focusableSelector } from '../src/querySelector'
+
+describe('focusableSelector', () => {
+  it('should be a string', () => {
+    expect(typeof focusableSelector).toBe('string')
+  })
+
+  it('should include common focusable element selectors', () => {
+    expect(focusableSelector).toContain('a[href]')
+    expect(focusableSelector).toContain('button')
+    expect(focusableSelector).toContain('input')
+    expect(focusableSelector).toContain('select')
+    expect(focusableSelector).toContain('textarea')
+  })
+
+  it('should exclude elements with negative tabindex', () => {
+    expect(focusableSelector).toContain(':not([tabindex^="-"])')
+  })
+
+  it('should exclude disabled elements for interactive elements', () => {
+    expect(focusableSelector).toContain(':not(:disabled)')
+  })
+})