@primereact/styles 11.0.0-rc.4 → 11.1.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.
- package/README.md +28 -9
- package/package.json +5 -5
- package/sidebar/index.mjs +7 -1
package/README.md
CHANGED
|
@@ -1,20 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
[](https://primereact.dev)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# @primereact/styles
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The style layer behind `@primereact/ui`. One module per component, mapping props and state to `.p-` class names and to the CSS the active PrimeUIX preset resolves at runtime.
|
|
6
|
+
|
|
7
|
+
Direct installation is rarely needed, since `@primereact/ui` already includes it. Install it to apply PrimeReact styling to a custom component, or to build a styled layer on top of the `primereact` primitives.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @primereact/styles
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
6
14
|
|
|
7
|
-
|
|
15
|
+
Each component's style module is exported from its own subpath, and every primitive accepts a `styles` prop. Passing the module in produces the same result `@primereact/ui` gives.
|
|
8
16
|
|
|
9
|
-
```
|
|
10
|
-
import {
|
|
17
|
+
```tsx
|
|
18
|
+
import { styles } from '@primereact/styles/button';
|
|
19
|
+
import { Button } from 'primereact/button';
|
|
11
20
|
|
|
12
|
-
|
|
21
|
+
<Button styles={styles} severity="danger" variant="outlined">
|
|
22
|
+
Delete
|
|
23
|
+
</Button>;
|
|
13
24
|
```
|
|
14
25
|
|
|
15
|
-
|
|
26
|
+
## How it works
|
|
27
|
+
|
|
28
|
+
Styles are JavaScript objects rather than static CSS. Class names are computed from props and state through `createStyles`, then resolved at render time by `cx()`. A button with `severity="danger"` and `variant="outlined"` picks up the right combination without manual toggling. Its counterpart `sx()` does the same for inline styles. In unstyled mode `cx()` returns `undefined`, which is how a single flag strips every PrimeReact class.
|
|
29
|
+
|
|
30
|
+
The CSS itself carries `dt('token.path')` references that the `@primeuix/styled` runtime resolves against the active preset. Swapping the preset therefore re-themes every component at once. Pass Through hooks into the same layer: classes and attributes can be overridden per element without touching a style module.
|
|
31
|
+
|
|
32
|
+
## Documentation
|
|
16
33
|
|
|
17
|
-
|
|
34
|
+
- [Theming](https://primereact.dev/docs/styled/guides/theming/styled)
|
|
35
|
+
- [Unstyled mode & Pass Through](https://primereact.dev/docs/styled/guides/theming/unstyled)
|
|
36
|
+
- [MCP server](https://www.npmjs.com/package/@primereact/mcp)
|
|
18
37
|
|
|
19
38
|
## License
|
|
20
39
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primereact/styles",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.1.0",
|
|
4
4
|
"author": "PrimeTek Informatics",
|
|
5
5
|
"description": "Styles for PrimeReact components.",
|
|
6
6
|
"homepage": "https://primereact.dev",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@primeuix/styled": "^1.0.0
|
|
32
|
-
"@primeuix/utils": "^0.8.0
|
|
33
|
-
"@primeuix/styles": "^3.0.0
|
|
34
|
-
"@primereact/types": "11.
|
|
31
|
+
"@primeuix/styled": "^1.0.0",
|
|
32
|
+
"@primeuix/utils": "^0.8.0",
|
|
33
|
+
"@primeuix/styles": "^3.0.0",
|
|
34
|
+
"@primereact/types": "11.1.0"
|
|
35
35
|
},
|
|
36
36
|
"repository": {},
|
|
37
37
|
"type": "module"
|
package/sidebar/index.mjs
CHANGED
|
@@ -6,6 +6,12 @@ ${a}
|
|
|
6
6
|
height: var(--px-sidebar-menu-sub-height, auto);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
/* Keyboard navigation focus: a flush outline on the focused menu item (no background change). */
|
|
10
|
+
.p-sidebar-menu-button:focus-visible,
|
|
11
|
+
.p-sidebar-menu-sub-button:focus-visible {
|
|
12
|
+
outline-offset: 0px;
|
|
13
|
+
}
|
|
14
|
+
|
|
9
15
|
.p-sidebar-menu-sub-enter-from,
|
|
10
16
|
.p-sidebar-menu-sub-leave-to {
|
|
11
17
|
opacity: 0;
|
|
@@ -51,4 +57,4 @@ ${a}
|
|
|
51
57
|
pointer-events: none;
|
|
52
58
|
transition: opacity 100ms cubic-bezier(.4, 0, .2, 1), color 150ms, background 150ms;
|
|
53
59
|
}
|
|
54
|
-
`,
|
|
60
|
+
`,r=e({name:"sidebar",style:i,classes:{root:"p-sidebar p-component",spacer:"p-sidebar-spacer",aside:"p-sidebar-aside",panel:"p-sidebar-panel",header:"p-sidebar-header",content:"p-sidebar-content",footer:"p-sidebar-footer",group:"p-sidebar-group",groupLabel:"p-sidebar-group-label",groupAction:"p-sidebar-group-action",groupContent:"p-sidebar-group-content",menu:"p-sidebar-menu",menuItem:"p-sidebar-menu-item",menuButton:"p-sidebar-menu-button",menuAction:"p-sidebar-menu-action",menuBadge:"p-sidebar-menu-badge",menuSub:"p-sidebar-menu-sub",menuSubItem:"p-sidebar-menu-sub-item",menuSubButton:"p-sidebar-menu-sub-button",trigger:"p-sidebar-trigger",rail:"p-sidebar-rail"}});import{createStyles as t}from"@primereact/styles/utils";var b=t({name:"sidebarlayout",classes:{layout:"p-sidebar-layout",main:"p-sidebar-main",backdrop:"p-sidebar-backdrop p-overlay-mask"}});export{b as layoutStyles,r as styles};
|