@meetreeve/ui 0.2.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +139 -6
  3. package/dist/index.d.ts +139 -6
  4. package/dist/index.js +376 -106
  5. package/dist/index.mjs +375 -109
  6. package/dist/tokens/index.d.mts +15 -1
  7. package/dist/tokens/index.d.ts +15 -1
  8. package/dist/tokens/index.js +8 -2
  9. package/dist/tokens/index.mjs +6 -1
  10. package/package.json +5 -1
package/dist/tokens/index.d.mts CHANGED
@@ -27,5 +27,19 @@ declare const BREAKPOINTS: {
27
27
  };
28
28
  type MinSizeToken = keyof typeof MIN_SIZES;
29
29
  type Breakpoint = keyof typeof BREAKPOINTS;
30
+ /**
31
+ * Ready-made inline-style object for `MIN_SIZES.touchTarget` — the WCAG
32
+ * 2.5.5 interactive-target floor, which (unlike `searchInput`) always
33
+ * constrains BOTH width and height. A single source of truth so every
34
+ * touch-target-floored control (header menu button, brand link, sidebar
35
+ * hamburger/close, flyout panel items, …) spells the same contract the same
36
+ * way instead of hand-rolling `{ minWidth: MIN_SIZES.touchTarget, minHeight:
37
+ * MIN_SIZES.touchTarget }` at each call site. `src/test/expect-floor.ts`
38
+ * asserts against exactly this shape.
39
+ */
40
+ declare const TOUCH_TARGET_STYLE: {
41
+ readonly minWidth: 44;
42
+ readonly minHeight: 44;
43
+ };
30
44
 
31
- export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken };
45
+ export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, TOUCH_TARGET_STYLE };
package/dist/tokens/index.d.ts CHANGED
@@ -27,5 +27,19 @@ declare const BREAKPOINTS: {
27
27
  };
28
28
  type MinSizeToken = keyof typeof MIN_SIZES;
29
29
  type Breakpoint = keyof typeof BREAKPOINTS;
30
+ /**
31
+ * Ready-made inline-style object for `MIN_SIZES.touchTarget` — the WCAG
32
+ * 2.5.5 interactive-target floor, which (unlike `searchInput`) always
33
+ * constrains BOTH width and height. A single source of truth so every
34
+ * touch-target-floored control (header menu button, brand link, sidebar
35
+ * hamburger/close, flyout panel items, …) spells the same contract the same
36
+ * way instead of hand-rolling `{ minWidth: MIN_SIZES.touchTarget, minHeight:
37
+ * MIN_SIZES.touchTarget }` at each call site. `src/test/expect-floor.ts`
38
+ * asserts against exactly this shape.
39
+ */
40
+ declare const TOUCH_TARGET_STYLE: {
41
+ readonly minWidth: 44;
42
+ readonly minHeight: 44;
43
+ };
30
44
 
31
- export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken };
45
+ export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken, TOUCH_TARGET_STYLE };
package/dist/tokens/index.js CHANGED
@@ -21,7 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
21
21
  var tokens_exports = {};
22
22
  __export(tokens_exports, {
23
23
  BREAKPOINTS: () => BREAKPOINTS,
24
- MIN_SIZES: () => MIN_SIZES
24
+ MIN_SIZES: () => MIN_SIZES,
25
+ TOUCH_TARGET_STYLE: () => TOUCH_TARGET_STYLE
25
26
  });
26
27
  module.exports = __toCommonJS(tokens_exports);
27
28
  var MIN_SIZES = {
@@ -40,8 +41,13 @@ var BREAKPOINTS = {
40
41
  /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
41
42
  md: 768
42
43
  };
44
+ var TOUCH_TARGET_STYLE = {
45
+ minWidth: MIN_SIZES.touchTarget,
46
+ minHeight: MIN_SIZES.touchTarget
47
+ };
43
48
  // Annotate the CommonJS export names for ESM import in node:
44
49
  0 && (module.exports = {
45
50
  BREAKPOINTS,
46
- MIN_SIZES
51
+ MIN_SIZES,
52
+ TOUCH_TARGET_STYLE
47
53
  });
package/dist/tokens/index.mjs CHANGED
@@ -15,7 +15,12 @@ var BREAKPOINTS = {
15
15
  /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
16
16
  md: 768
17
17
  };
18
+ var TOUCH_TARGET_STYLE = {
19
+ minWidth: MIN_SIZES.touchTarget,
20
+ minHeight: MIN_SIZES.touchTarget
21
+ };
18
22
  export {
19
23
  BREAKPOINTS,
20
- MIN_SIZES
24
+ MIN_SIZES,
25
+ TOUCH_TARGET_STYLE
21
26
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meetreeve/ui",
3
- "version": "0.2.0",
3
+ "version": "0.5.0",
4
4
  "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./dist/index.js",
@@ -35,6 +35,9 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
+ "dependencies": {
39
+ "@radix-ui/react-dropdown-menu": "^2.1.16"
40
+ },
38
41
  "peerDependencies": {
39
42
  "lucide-react": ">=0.400.0",
40
43
  "next": ">=14",
@@ -45,6 +48,7 @@
45
48
  "devDependencies": {
46
49
  "@testing-library/dom": "^10.4.1",
47
50
  "@testing-library/react": "^16.3.2",
51
+ "@testing-library/user-event": "^14.6.1",
48
52
  "@types/react": "^19",
49
53
  "@types/react-dom": "^19",
50
54
  "@vitejs/plugin-react": "^5.1.3",