@wherabouts/react-ui 0.1.1 → 0.3.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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +4 -4
  3. package/dist/index.cjs +4 -7
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +4 -7
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles.css +29 -14
  8. package/package.json +21 -21
package/dist/styles.css CHANGED
@@ -111,26 +111,32 @@
111
111
  box-shadow: 0 0 0 3px hsl(0 84.2% 60.2% / 0.1);
112
112
  }
113
113
 
114
- /* ── Dropdown Listbox ──────────────────────────────────────── */
115
- [data-slot="address-listbox"] {
116
- position: absolute;
117
- top: 100%;
118
- left: 0;
119
- right: 0;
120
- margin-top: var(--wherabouts-spacing-xs);
121
- max-height: 300px;
122
- overflow-y: auto;
114
+ /* ── Dropdown Container ────────────────────────────────────── */
115
+ /* The component positions this (position: fixed) inline and portals it to
116
+ <body>, so no ancestor overflow can clip it. This rule supplies the visual
117
+ chrome and clips the inner scroll area to the rounded corners. */
118
+ [data-slot="address-dropdown"] {
123
119
  z-index: var(--wherabouts-z-dropdown);
124
- list-style: none;
125
- padding: var(--wherabouts-spacing-sm);
126
- margin: var(--wherabouts-spacing-xs) 0 0 0;
120
+ overflow: hidden;
121
+ background-color: var(--wherabouts-color-dropdown-bg);
127
122
  border: var(--wherabouts-border-width) solid
128
123
  var(--wherabouts-color-dropdown-border);
129
124
  border-radius: var(--wherabouts-border-radius);
130
- background-color: var(--wherabouts-color-dropdown-bg);
131
125
  box-shadow: var(--wherabouts-color-dropdown-shadow);
132
126
  }
133
127
 
128
+ /* ── Dropdown Listbox ──────────────────────────────────────── */
129
+ /* The scroll area itself. It lives in normal flow inside the fixed container
130
+ above (NOT absolutely positioned), so a long suggestion list scrolls here at
131
+ max-height instead of extending past the container and the viewport. */
132
+ [data-slot="address-listbox"] {
133
+ max-height: 300px;
134
+ padding: var(--wherabouts-spacing-sm);
135
+ margin: 0;
136
+ overflow-y: auto;
137
+ list-style: none;
138
+ }
139
+
134
140
  [data-slot="address-listbox"]::-webkit-scrollbar {
135
141
  width: 8px;
136
142
  }
@@ -144,6 +150,15 @@
144
150
  border-radius: 4px;
145
151
  }
146
152
 
153
+ /* Branding footer — pinned below the scroll area, inside the dropdown border. */
154
+ [data-slot="address-powered-by"] {
155
+ padding: var(--wherabouts-spacing-sm) var(--wherabouts-spacing-md);
156
+ font-size: var(--wherabouts-font-size-sm);
157
+ color: var(--wherabouts-color-text-muted);
158
+ border-top: var(--wherabouts-border-width) solid
159
+ var(--wherabouts-color-dropdown-border);
160
+ }
161
+
147
162
  /* ── Suggestion Item ───────────────────────────────────────── */
148
163
  [data-slot="address-item"] {
149
164
  display: flex;
@@ -275,7 +290,7 @@
275
290
  /* High contrast mode support */
276
291
  @media (prefers-contrast: more) {
277
292
  [data-slot="address-input"],
278
- [data-slot="address-listbox"] {
293
+ [data-slot="address-dropdown"] {
279
294
  border-width: 2px;
280
295
  }
281
296
 
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@wherabouts/react-ui",
3
- "version": "0.1.1",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "description": "Production-ready React components for Wherabouts SDK — address autocomplete, geocoding, and form fields with accessibility and customization.",
6
- "license": "UNLICENSED",
6
+ "license": "MIT",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -19,21 +19,13 @@
19
19
  "dist",
20
20
  "docs",
21
21
  "README.md",
22
- "CHANGELOG.md"
22
+ "CHANGELOG.md",
23
+ "LICENSE"
23
24
  ],
24
- "scripts": {
25
- "build": "tsup && node scripts/build-css.mjs",
26
- "dev": "tsup --watch",
27
- "test": "vitest run",
28
- "test:watch": "vitest",
29
- "prepublishOnly": "pnpm build",
30
- "storybook": "storybook dev -p 6006 --no-open",
31
- "build-storybook": "storybook build"
32
- },
33
25
  "peerDependencies": {
34
26
  "react": ">=19.0.0",
35
27
  "react-dom": ">=19.0.0",
36
- "@wherabouts/sdk": ">=0.4.2",
28
+ "@wherabouts/sdk": ">=0.5.0",
37
29
  "@wherabouts/react": ">=0.2.0"
38
30
  },
39
31
  "devDependencies": {
@@ -42,20 +34,28 @@
42
34
  "@testing-library/jest-dom": "^6.1.5",
43
35
  "@testing-library/react": "^15.0.0",
44
36
  "@testing-library/user-event": "^14.5.1",
45
- "@types/react": "catalog:",
46
- "@types/react-dom": "catalog:",
47
- "@wherabouts/react": "workspace:*",
48
- "@wherabouts/sdk": "workspace:*",
37
+ "@types/react": "^19.2.10",
38
+ "@types/react-dom": "^19.2.3",
49
39
  "class-variance-authority": "^0.7.0",
50
40
  "clsx": "^2.1.1",
51
41
  "jsdom": "^23.0.1",
52
- "react": "catalog:",
53
- "react-dom": "catalog:",
42
+ "react": "^19.2.3",
43
+ "react-dom": "^19.2.3",
54
44
  "storybook": "^9.0.0",
55
45
  "tailwind-merge": "^2.3.0",
56
46
  "tsup": "^8.0.2",
57
47
  "typescript": "^5.4.4",
58
48
  "vite": "^7.0.2",
59
- "vitest": "^1.2.0"
49
+ "vitest": "^1.2.0",
50
+ "@wherabouts/sdk": "0.6.0",
51
+ "@wherabouts/react": "0.3.0"
52
+ },
53
+ "scripts": {
54
+ "build": "tsup && node scripts/build-css.mjs",
55
+ "dev": "tsup --watch",
56
+ "test": "vitest run",
57
+ "test:watch": "vitest",
58
+ "storybook": "storybook dev -p 6006 --no-open",
59
+ "build-storybook": "storybook build"
60
60
  }
61
- }
61
+ }