@primereact/styles 11.0.0 → 11.2.0

package/README.md

@@ -1,20 +1,39 @@
-# PrimeReact Styles
+[![Cover](https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/npm/primereact-npm.jpg)](https://primereact.dev)
 
-Component styles for PrimeReact. Each component's style module maps props and state to CSS class names using design tokens from the active preset, resolved at runtime by `@primeuix/styled`.
+# @primereact/styles
 
-## How it works
+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.
+
+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.
+
+```bash
+npm install @primereact/styles
+```
+
+## Usage
 
-Styles are defined as JavaScript objects rather than static CSS. Class names are computed from component state, so a button with `severity="danger"` and `outlined` gets the right combination of classes without any manual toggling:
+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.
 
-```ts
-import { ButtonStyle } from '@primereact/styles/button';
+```tsx
+import { styles } from '@primereact/styles/button';
+import { Button } from 'primereact/button';
 
-// ButtonStyle.root({ instance, props }) → 'p-button p-button-danger p-button-outlined'
+<Button styles={styles} severity="danger" variant="outlined">
+    Delete
+</Button>;
 ```
 
-All class names follow the `.p-` prefix convention (`p-button`, `p-datatable`, `p-dialog-header`). The `@primeuix/styled` runtime resolves `dt('token.path')` references inside the token values, so swapping the active preset re-themes every component automatically.
+## How it works
+
+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.
+
+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.
+
+## Documentation
 
-Pass Through (PT) hooks into the same style layer — a consumer can override classes or attributes on any element without editing the style module.
+- [Theming](https://primereact.dev/docs/styled/guides/theming/styled)
+- [Unstyled mode & Pass Through](https://primereact.dev/docs/styled/guides/theming/unstyled)
+- [MCP server](https://www.npmjs.com/package/@primereact/mcp)
 
 ## License
 

package/accordion/Accordion.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<AccordionRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<AccordionRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/animateonscroll/AnimateOnScroll.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<AnimateOnScrollInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<AnimateOnScrollInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/autocomplete/AutoComplete.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<AutoCompleteRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<AutoCompleteRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/avatar/Avatar.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<AvatarRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<AvatarRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/avatargroup/AvatarGroup.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<AvatarGroupInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<AvatarGroupInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/badge/Badge.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<BadgeInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<BadgeInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/base/Base.style.d.ts

@@ -2,6 +2,7 @@ export declare const styles: {
     name: string;
     css: string;
     style: string;
+    preflight: string;
     classes: {};
     inlineStyles: {};
 };

package/base/index.mjs

@@ -1,4 +1,179 @@
 import{style as e}from"@primeuix/styles/base";var t=`
+@layer primeui.base {
+    :where([data-scope]),
+    :where([data-scope])::before,
+    :where([data-scope])::after {
+        box-sizing: border-box;
+    }
+
+    button:where([data-scope]),
+    :where([data-scope])[type='button'],
+    :where([data-scope])[type='reset'],
+    :where([data-scope])[type='submit'] {
+        appearance: button;
+        background-color: transparent;
+        background-image: none;
+        border: 0 solid;
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        text-align: inherit;
+        text-transform: none;
+        cursor: pointer;
+    }
+
+    button:where([data-scope]):disabled {
+        cursor: default;
+    }
+
+    input:where([data-scope]),
+    select:where([data-scope]),
+    textarea:where([data-scope]),
+    optgroup:where([data-scope]) {
+        appearance: none;
+        background-color: transparent;
+        background-image: none;
+        border: 0 solid;
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        font: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+        opacity: 1;
+    }
+
+    textarea:where([data-scope]) {
+        resize: vertical;
+    }
+
+    :where([data-scope])::placeholder {
+        opacity: 1;
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+
+    :where([data-scope])::-webkit-inner-spin-button,
+    :where([data-scope])::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    :where([data-scope])::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    :where([data-scope])::-webkit-datetime-edit {
+        display: inline-flex;
+    }
+
+    :where([data-scope])::-webkit-datetime-edit-fields-wrapper {
+        padding: 0;
+    }
+
+    :where([data-scope]):-moz-ui-invalid {
+        box-shadow: none;
+    }
+
+    ul:where([data-scope]),
+    ol:where([data-scope]),
+    menu:where([data-scope]) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    table:where([data-scope]) {
+        border-collapse: collapse;
+        border-color: inherit;
+        text-indent: 0;
+    }
+
+    caption:where([data-scope]),
+    th:where([data-scope]),
+    td:where([data-scope]) {
+        text-align: inherit;
+        font-weight: inherit;
+        padding: 0;
+    }
+
+    h1:where([data-scope]),
+    h2:where([data-scope]),
+    h3:where([data-scope]),
+    h4:where([data-scope]),
+    h5:where([data-scope]),
+    h6:where([data-scope]),
+    p:where([data-scope]),
+    figure:where([data-scope]),
+    blockquote:where([data-scope]),
+    dl:where([data-scope]),
+    dd:where([data-scope]) {
+        font-size: inherit;
+        font-weight: inherit;
+        margin: 0;
+    }
+
+    a:where([data-scope]) {
+        color: inherit;
+        -webkit-text-decoration: inherit;
+        text-decoration: inherit;
+    }
+
+    fieldset:where([data-scope]),
+    legend:where([data-scope]) {
+        border: 0 solid;
+        margin: 0;
+        padding: 0;
+    }
+
+    img:where([data-scope]),
+    svg:where([data-scope]),
+    video:where([data-scope]),
+    canvas:where([data-scope]),
+    iframe:where([data-scope]),
+    embed:where([data-scope]),
+    object:where([data-scope]) {
+        display: block;
+        vertical-align: middle;
+    }
+
+    img:where([data-scope]),
+    video:where([data-scope]) {
+        max-width: 100%;
+        height: auto;
+    }
+
+    hr:where([data-scope]) {
+        height: 0;
+        color: inherit;
+        border-top-width: 1px;
+    }
+
+    summary:where([data-scope]) {
+        display: list-item;
+    }
+
+    dialog:where([data-scope]) {
+        border: 0 solid;
+        padding: 0;
+        margin: 0;
+        max-width: none;
+        max-height: none;
+        background-color: transparent;
+        color: inherit;
+    }
+
+    :where([data-scope]):-moz-focusring {
+        outline: auto;
+    }
+}
+
+`,a=`
 .p-hidden-accessible {
     border: 0;
     clip: rect(0 0 0 0);
@@ -38,4 +213,4 @@ import{style as e}from"@primeuix/styles/base";var t=`
     overflow: hidden;
     transition: max-height 200ms ease-out;
 }
-`,i={name:"base",css:t,style:e,classes:{},inlineStyles:{}};export{i as styles};
+`,r={name:"base",css:a,style:e,preflight:t,classes:{},inlineStyles:{}};export{r as styles};

package/breadcrumb/Breadcrumb.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<BreadcrumbRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<BreadcrumbRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/button/Button.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<ButtonInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<ButtonInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/buttongroup/ButtonGroup.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<ButtonGroupInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<ButtonGroupInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/card/Card.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<CardRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<CardRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/carousel/Carousel.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<CarouselRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<CarouselRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/checkbox/Checkbox.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<CheckboxRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<CheckboxRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/checkboxgroup/CheckboxGroup.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<CheckboxGroupInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<CheckboxGroupInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/chip/Chip.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<ChipRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<ChipRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/compare/Compare.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<CompareRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<CompareRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/contextmenu/ContextMenu.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<ContextMenuRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<ContextMenuRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/datatable/DataTable.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DataTableRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DataTableRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/dataview/DataView.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DataViewRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DataViewRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/datepicker/DatePicker.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DatePickerRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DatePickerRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/dialog/Dialog.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DialogRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DialogRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/divider/Divider.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DividerInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DividerInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/drawer/Drawer.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<DrawerRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<DrawerRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/fieldset/Fieldset.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<FieldsetRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<FieldsetRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/fileupload/FileUpload.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<FileUploadRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<FileUploadRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/floatlabel/FloatLabel.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<FloatLabelInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<FloatLabelInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/fluid/Fluid.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<FluidInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<FluidInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/focustrap/FocusTrap.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<FocusTrapInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<FocusTrapInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/gallery/Gallery.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<GalleryRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<GalleryRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };

package/iconfield/IconField.style.d.ts

@@ -5,10 +5,12 @@ export declare const styles: {
     style: import("@primeuix/styled").StyleType | undefined;
     classes: import("@primereact/types/styles").ClassesType<IconFieldRootInstance> | undefined;
     inlineStyles: import("@primereact/types/styles").InlineStylesType<IconFieldRootInstance>;
+    preflight: import("@primeuix/styled").StyleType | undefined;
     baseStyles: {
         name: string;
         css: string;
         style: string;
+        preflight: string;
         classes: {};
         inlineStyles: {};
     };