@opensite/ui 3.0.8 → 3.0.9
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.
- package/README.md +80 -0
- package/dist/components.cjs +1 -1
- package/dist/components.js +1 -1
- package/dist/hero-digital-agency-fullscreen.cjs +1 -1
- package/dist/hero-digital-agency-fullscreen.js +1 -1
- package/dist/hero-image-slider.cjs +1 -1
- package/dist/hero-image-slider.js +1 -1
- package/dist/image-slider.cjs +1 -1
- package/dist/image-slider.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/registry.cjs +2 -2
- package/dist/registry.js +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -53,6 +53,86 @@ This library requires React 16.8.0 or higher:
|
|
|
53
53
|
pnpm add react react-dom
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
+
## Setup Requirements
|
|
57
|
+
|
|
58
|
+
### 1. Tailwind CSS Configuration
|
|
59
|
+
|
|
60
|
+
**CRITICAL**: Add both `@opensite/ui` and `@page-speed/pressable` to your Tailwind content paths:
|
|
61
|
+
|
|
62
|
+
```ts
|
|
63
|
+
// tailwind.config.ts
|
|
64
|
+
import type { Config } from "tailwindcss";
|
|
65
|
+
|
|
66
|
+
const config: Config = {
|
|
67
|
+
content: [
|
|
68
|
+
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
69
|
+
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
70
|
+
// Add these lines to scan component classes:
|
|
71
|
+
"./node_modules/@opensite/ui/dist/**/*.{js,mjs}",
|
|
72
|
+
"./node_modules/@page-speed/pressable/dist/**/*.{js,mjs}",
|
|
73
|
+
],
|
|
74
|
+
// ...rest of config
|
|
75
|
+
};
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Without this, button styles from Pressable and other components won't be applied.
|
|
79
|
+
|
|
80
|
+
### 2. Router Setup (For Pressable Navigation)
|
|
81
|
+
|
|
82
|
+
The `Pressable` component (used for links/buttons) requires `RouterProvider` from `@page-speed/router`.
|
|
83
|
+
|
|
84
|
+
**For Next.js App Router** (requires client component wrapper):
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
// components/providers/RouterWrapper.tsx
|
|
88
|
+
"use client";
|
|
89
|
+
|
|
90
|
+
import { RouterProvider } from "@page-speed/router";
|
|
91
|
+
import { ReactNode } from "react";
|
|
92
|
+
|
|
93
|
+
export function RouterWrapper({ children }: { children: ReactNode }) {
|
|
94
|
+
return <RouterProvider>{children}</RouterProvider>;
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
// app/layout.tsx
|
|
100
|
+
import { RouterWrapper } from "@/components/providers/RouterWrapper";
|
|
101
|
+
|
|
102
|
+
export default function RootLayout({ children }) {
|
|
103
|
+
return (
|
|
104
|
+
<html>
|
|
105
|
+
<body>
|
|
106
|
+
<RouterWrapper>
|
|
107
|
+
{children}
|
|
108
|
+
</RouterWrapper>
|
|
109
|
+
</body>
|
|
110
|
+
</html>
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
**For standard React apps** (Create React App, Vite, etc.):
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
// App.tsx
|
|
119
|
+
import { RouterProvider } from "@page-speed/router";
|
|
120
|
+
|
|
121
|
+
function App() {
|
|
122
|
+
return (
|
|
123
|
+
<RouterProvider>
|
|
124
|
+
{/* your app */}
|
|
125
|
+
</RouterProvider>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Install the router package:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
pnpm add @page-speed/router
|
|
134
|
+
```
|
|
135
|
+
|
|
56
136
|
## Usage
|
|
57
137
|
|
|
58
138
|
### Tree-Shakable Imports (Recommended)
|
package/dist/components.cjs
CHANGED
package/dist/components.js
CHANGED
package/dist/image-slider.cjs
CHANGED
package/dist/image-slider.js
CHANGED
package/dist/index.cjs
CHANGED
package/dist/index.js
CHANGED
package/dist/registry.cjs
CHANGED
|
@@ -849,7 +849,7 @@ var ImageSlider = ({
|
|
|
849
849
|
activeImage.className
|
|
850
850
|
),
|
|
851
851
|
optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
|
|
852
|
-
|
|
852
|
+
loading: "eager"
|
|
853
853
|
}
|
|
854
854
|
)
|
|
855
855
|
},
|
|
@@ -59097,7 +59097,7 @@ function HeroDigitalAgencyFullscreen({
|
|
|
59097
59097
|
src: backgroundImage,
|
|
59098
59098
|
alt: "Hero Background Image",
|
|
59099
59099
|
className: "h-full w-full brightness-50 object-cover object-center",
|
|
59100
|
-
|
|
59100
|
+
loading: "eager",
|
|
59101
59101
|
optixFlowConfig
|
|
59102
59102
|
}
|
|
59103
59103
|
)
|
package/dist/registry.js
CHANGED
|
@@ -809,7 +809,7 @@ var ImageSlider = ({
|
|
|
809
809
|
activeImage.className
|
|
810
810
|
),
|
|
811
811
|
optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
|
|
812
|
-
|
|
812
|
+
loading: "eager"
|
|
813
813
|
}
|
|
814
814
|
)
|
|
815
815
|
},
|
|
@@ -59057,7 +59057,7 @@ function HeroDigitalAgencyFullscreen({
|
|
|
59057
59057
|
src: backgroundImage,
|
|
59058
59058
|
alt: "Hero Background Image",
|
|
59059
59059
|
className: "h-full w-full brightness-50 object-cover object-center",
|
|
59060
|
-
|
|
59060
|
+
loading: "eager",
|
|
59061
59061
|
optixFlowConfig
|
|
59062
59062
|
}
|
|
59063
59063
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opensite/ui",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.9",
|
|
4
4
|
"description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -3421,12 +3421,12 @@
|
|
|
3421
3421
|
"@opensite/hooks": "2.1.0",
|
|
3422
3422
|
"@page-speed/forms": "0.8.2",
|
|
3423
3423
|
"@page-speed/icon": "0.1.2",
|
|
3424
|
-
"@page-speed/img": "0.4.
|
|
3424
|
+
"@page-speed/img": "0.4.9",
|
|
3425
3425
|
"@page-speed/lightbox": "0.2.1",
|
|
3426
3426
|
"@page-speed/maps": "0.2.4",
|
|
3427
3427
|
"@page-speed/markdown-to-jsx": "0.0.5",
|
|
3428
3428
|
"@page-speed/pdf-viewer": "0.1.9",
|
|
3429
|
-
"@page-speed/pressable": "0.0.
|
|
3429
|
+
"@page-speed/pressable": "0.0.6",
|
|
3430
3430
|
"@page-speed/router": "1.0.2",
|
|
3431
3431
|
"@page-speed/social-share": "0.1.7",
|
|
3432
3432
|
"@radix-ui/react-accordion": "^1.2.12",
|