@primereact/styles 11.0.0-alpha.9 → 11.0.0-rc.2

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "@primereact/styles",
-  "version": "11.0.0-alpha.9",
+  "version": "11.0.0-rc.2",
   "author": "PrimeTek Informatics",
-  "description": "",
-  "homepage": "https://primereact.org/",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/primefaces/primereact.git",
-    "directory": "packages/styles"
-  },
+  "description": "Styles for PrimeReact components.",
+  "homepage": "https://primereact.dev",
+  "license": "SEE LICENSE IN LICENSE.md",
   "bugs": {
-    "url": "https://github.com/primefaces/primereact/issues"
+    "url": "https://support.primeui.dev"
   },
   "main": "./index.mjs",
   "module": "./index.mjs",
@@ -28,12 +23,16 @@
       "default": "./*/index.mjs"
     }
   },
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@primeuix/styled": "^0.7.4",
-    "@primeuix/utils": "^0.6.2",
-    "@primeuix/styles": "^1"
-  }
+    "@primeuix/styled": "^1.0.0-rc.3",
+    "@primeuix/utils": "^0.8.0-rc.2",
+    "@primeuix/styles": "^3.0.0-rc.1",
+    "@primereact/types": "11.0.0-rc.2"
+  },
+  "repository": {},
+  "type": "module"
 }

package/paginator/Paginator.style.d.ts

@@ -1,10 +1,10 @@
-import type { PaginatorInstance } from '@primereact/types/shared/paginator';
+import type { PaginatorRootInstance } from '@primereact/types/primitive/paginator';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<PaginatorInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<PaginatorInstance>;
+    classes: import("@primereact/types/styles").ClassesType<PaginatorRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<PaginatorRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/paginator/index.mjs

@@ -23,4 +23,3 @@ ${n}
     margin: 0;
 }
 `,r=a({name:"paginator",style:o,classes:{paginator:()=>["p-paginator p-component"],content:"p-paginator-content",contentStart:"p-paginator-content-start",contentEnd:"p-paginator-content-end",first:({context:t})=>["p-paginator-first",{"p-disabled":t.disabled}],firstIcon:"p-paginator-first-icon",prev:({context:t})=>["p-paginator-prev",{"p-disabled":t.disabled}],prevIcon:"p-paginator-prev-icon",next:({context:t})=>["p-paginator-next",{"p-disabled":t.disabled}],nextIcon:"p-paginator-next-icon",last:({context:t})=>["p-paginator-last",{"p-disabled":t.disabled}],lastIcon:"p-paginator-last-icon",pages:"p-paginator-pages",page:({context:t})=>["p-paginator-page",{"p-paginator-page-selected":t.selected===!0,"p-disabled":t.disabled}],ellipsis:"p-paginator-ellipsis",current:"p-paginator-current",pcRowPerPageDropdown:"p-paginator-rpp-dropdown",pcJumpToPageDropdown:"p-paginator-jtp-dropdown",pcJumpToPageInputText:"p-paginator-jtp-input"}});export{r as styles};
-//# sourceMappingURL=index.mjs.map

package/panel/Panel.style.d.ts

@@ -1,10 +1,10 @@
-import type { PanelInstance } from '@primereact/types/shared/panel';
+import type { PanelRootInstance } from '@primereact/types/primitive/panel';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<PanelInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<PanelInstance>;
+    classes: import("@primereact/types/styles").ClassesType<PanelRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<PanelRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/panel/index.mjs

@@ -1,2 +1,8 @@
-import{createStyles as t}from"@primereact/styles/utils";import{style as p}from"@primeuix/styles/panel";var o=t({name:"panel",style:p,classes:{root:({props:e})=>["p-panel p-component",{"p-panel-toggleable":e.toggleable}],header:"p-panel-header",title:"p-panel-title",headerActions:"p-panel-header-actions",collapse:"p-panel-toggle-button",content:"p-panel-content",footer:"p-panel-footer"}});export{o as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as e}from"@primereact/styles/utils";import{style as t}from"@primeuix/styles/panel";var n=`
+${t}
+
+/* @todo review styles */
+.p-panel-trigger {
+    cursor: pointer;
+}
+`,r=e({name:"panel",style:n,classes:{root:"p-panel p-component",header:"p-panel-header",title:"p-panel-title",trigger:"p-panel-trigger",indicator:"p-panel-indicator",content:"p-panel-content-container",contentOuter:"p-panel-content-wrapper",contentInner:"p-panel-content",footer:"p-panel-footer"}});export{r as styles};

package/password/Password.style.d.ts

@@ -1,10 +1,10 @@
-import type { PasswordInstance } from '@primereact/types/shared/password';
+import type { InputPasswordInstance } from '@primereact/types/primitive/inputpassword';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<PasswordInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<PasswordInstance>;
+    classes: import("@primereact/types/styles").ClassesType<InputPasswordInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<InputPasswordInstance>;
     baseStyles: {
         name: string;
         css: string;

package/password/index.mjs

@@ -1,31 +1 @@
-import{createStyles as p}from"@primereact/styles/utils";import{style as t}from"@primeuix/styles/password";import{isNotEmpty as r}from"@primeuix/utils";var o=`
-${t}
-
-.p-password:has(.p-password-strength) {
-    flex-direction: column;
-}
-
-.p-password-strength {
-    display: flex;
-    flex-direction: row;
-    padding-block: 1rem;
-    gap: 0.5rem;
-    width: 100%;
-}
-
-.p-password-meter {
-    flex: 1;
-    transition: all 0.3s;
-}
-
-.p-password-strength .p-password-meter {
-    height: 0.5rem;
-    min-width: 2rem;
-}
-
-.p-password:has(.p-password-strength) .p-password-meter {
-    width: 100%;
-    height: 0.5rem;
-}
-`,i=p({name:"password",style:o,classes:{root:({props:s,instance:e})=>["p-password p-component p-inputwrapper",{"p-inputwrapper-filled":r(s.value)||r(s.defaultValue),"p-inputwrapper-focus":e.state.focused,"p-password-fluid":s.fluid}],input:"p-password-input",strength:"p-password-strength",meter:"p-password-meter",panel:"p-password-overlay",clearIcon:"p-password-clear-icon"}});export{i as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as s}from"@primereact/styles/utils";import{style as t}from"@primeuix/styles/password";var p=s({name:"password",style:t,classes:{root:"p-password p-component"}});export{p as styles};

package/popover/Popover.style.d.ts

@@ -1,10 +1,10 @@
-import type { PopoverInstance } from '@primereact/types/shared/popover';
+import type { PopoverRootInstance } from '@primereact/types/primitive/popover';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<PopoverInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<PopoverInstance>;
+    classes: import("@primereact/types/styles").ClassesType<PopoverRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<PopoverRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/popover/index.mjs

@@ -1,2 +1,76 @@
-import{createStyles as o}from"@primereact/styles/utils";import{style as e}from"@primeuix/styles/popover";var t=o({name:"popover",style:e,classes:{overlay:"p-popover p-component",content:"p-popover-content"}});export{t as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as r}from"@primereact/styles/utils";var e=`
+.p-popover-popup {
+    position: relative;
+    background: light-dark(var(--p-surface-0), var(--p-surface-900));
+    border-radius: 0.5rem;
+    border: 1px solid var(--p-content-border-color);
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.05);
+    transform-origin: var(--px-transform-origin);
+    will-change: transform, opacity;
+}
+
+.p-popover-content {
+    padding: 0.5rem 1rem 1rem 1rem;
+}
+
+.p-popover-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1rem 0 1rem;
+}
+
+.p-popover-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 1rem 1rem 1rem;
+}
+
+.p-popover-title {
+    color: light-dark(var(--p-surface-900), var(--p-surface-0));
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.p-popover-description {
+    color: light-dark(var(--p-surface-500), var(--p-surface-400));
+    font-size: 0.875rem;
+}
+
+.p-popover-arrow {
+    position: absolute;
+    border: 1px solid var(--p-content-border-color);
+    background: light-dark(var(--p-surface-0), var(--p-surface-900));
+    width:0.75rem;
+    height:0.75rem;
+    border-bottom-left-radius: 3px;
+    clip-path: polygon(0 100%, 0 0, 100% 100%);
+
+    &[data-side='top']{
+        left: var(--px-placer-arrow-x);
+        bottom: -0.375rem;
+        transform: translateX(-50%) rotate(-45deg);
+    }
+
+    &[data-side='bottom']{
+        left: var(--px-placer-arrow-x);
+        top: -0.375rem;
+        transform: translateX(-50%) rotate(135deg);
+    }
+
+    &[data-side='left']{
+        top: var(--px-placer-arrow-y);
+        right: -0.375rem;
+        transform: translateY(-50%) rotate(-135deg);
+    }
+
+    &[data-side='right']{
+        top: var(--px-placer-arrow-y);
+        left: -0.375rem;
+        transform: translateY(-50%) rotate(45deg);
+    }
+}
+`,p=r({name:"popover",style:e,classes:{overlay:"p-popover p-component",popup:"p-popover-popup",content:"p-popover-content",positioner:"p-popover-positioner",arrow:"p-popover-arrow",title:"p-popover-title",description:"p-popover-description",footer:"p-popover-footer",header:"p-popover-header"}});export{p as styles};

package/progressbar/ProgressBar.style.d.ts

@@ -1,10 +1,10 @@
-import type { ProgressBarInstance } from '@primereact/types/shared/progressbar';
+import type { ProgressBarRootInstance } from '@primereact/types/primitive/progressbar';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<ProgressBarInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<ProgressBarInstance>;
+    classes: import("@primereact/types/styles").ClassesType<ProgressBarRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<ProgressBarRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/progressbar/index.mjs

@@ -1,2 +1 @@
-import{createStyles as s}from"@primereact/styles/utils";import{style as t}from"@primeuix/styles/progressbar";var p=s({name:"progressbar",style:t,classes:{root:({props:e})=>["p-progressbar p-component",{"p-progressbar-determinate":e.mode==="determinate","p-progressbar-indeterminate":e.mode==="indeterminate"}],value:"p-progressbar-value",label:"p-progressbar-label"},inlineStyles:{value:({props:e,state:r})=>e.mode==="determinate"?{width:r.computedValue+"%",display:"flex"}:void 0}});export{p as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as r}from"@primereact/styles/utils";import{style as o}from"@primeuix/styles/progressbar";var a=r({name:"progressbar",style:o,classes:{root:({props:e})=>["p-progressbar p-component",{"p-progressbar-determinate":e.mode==="determinate","p-progressbar-indeterminate":e.mode==="indeterminate"}],value:"p-progressbar-value",label:"p-progressbar-label"}});export{a as styles};

package/progressspinner/ProgressSpinner.style.d.ts

@@ -1,10 +1,11 @@
-import type { ProgressSpinnerInstance } from '@primereact/types/shared/progressspinner';
+import type { ProgressSpinnerRootInstance } from '@primereact/types/primitive/progressspinner';
+export declare const style = "\n    .p-progressspinner {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 100px;\n        height: 100px;\n    }\n\n    .p-progressspinner-circle {\n        width: 100%;\n        height: 100%;\n    }\n\n    .p-progressspinner-circle-track {\n        stroke: var(--p-content-border-color);\n    }\n\n    .p-progressspinner-circle-range {\n        stroke: dt('progressspinner.colorOne');\n        stroke-linecap: round;\n        transition: stroke-dashoffset 0.3s;\n    }\n\n    [data-state=\"indeterminate\"] .p-progressspinner-circle {\n        animation: p-progressspinner-rotate 2s linear infinite;\n        transform-origin: center;\n    }\n\n    [data-state=\"indeterminate\"] .p-progressspinner-circle-range {\n        stroke-dasharray: 1, 302;\n        stroke-dashoffset: 0;\n        animation:\n            p-progressspinner-dash 1.5s ease-in-out infinite,\n            p-progressspinner-color 6s ease-in-out infinite;\n    }\n\n    .p-progressspinner-value {\n        fill: var(--p-text-muted-color);\n    }\n\n    @keyframes p-progressspinner-rotate {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    @keyframes p-progressspinner-dash {\n        0% {\n            stroke-dasharray: 1, 302;\n            stroke-dashoffset: 0;\n        }\n        50% {\n            stroke-dasharray: 136, 302;\n            stroke-dashoffset: -54px;\n        }\n        100% {\n            stroke-dasharray: 1, 302;\n            stroke-dashoffset: -302px;\n        }\n    }\n\n    @keyframes p-progressspinner-color {\n        100%,\n        0% {\n            stroke: dt('progressspinner.color.one');\n        }\n        40% {\n            stroke: dt('progressspinner.color.two');\n        }\n        66% {\n            stroke: dt('progressspinner.color.three');\n        }\n        80%,\n        90% {\n            stroke: dt('progressspinner.color.four');\n        }\n    }\n";
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<ProgressSpinnerInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<ProgressSpinnerInstance>;
+    classes: import("@primereact/types/styles").ClassesType<ProgressSpinnerRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<ProgressSpinnerRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/progressspinner/index.mjs

@@ -1,2 +1,80 @@
-import{createStyles as r}from"@primereact/styles/utils";import{style as s}from"@primeuix/styles/progressspinner";var n=r({name:"progressspinner",style:s,classes:{root:"p-progressspinner",spin:"p-progressspinner-spin",circle:"p-progressspinner-circle"}});export{n as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as e}from"@primereact/styles/utils";var s=`
+    .p-progressspinner {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 100px;
+    }
+
+    .p-progressspinner-circle {
+        width: 100%;
+        height: 100%;
+    }
+
+    .p-progressspinner-circle-track {
+        stroke: var(--p-content-border-color);
+    }
+
+    .p-progressspinner-circle-range {
+        stroke: dt('progressspinner.colorOne');
+        stroke-linecap: round;
+        transition: stroke-dashoffset 0.3s;
+    }
+
+    [data-state="indeterminate"] .p-progressspinner-circle {
+        animation: p-progressspinner-rotate 2s linear infinite;
+        transform-origin: center;
+    }
+
+    [data-state="indeterminate"] .p-progressspinner-circle-range {
+        stroke-dasharray: 1, 302;
+        stroke-dashoffset: 0;
+        animation:
+            p-progressspinner-dash 1.5s ease-in-out infinite,
+            p-progressspinner-color 6s ease-in-out infinite;
+    }
+
+    .p-progressspinner-value {
+        fill: var(--p-text-muted-color);
+    }
+
+    @keyframes p-progressspinner-rotate {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes p-progressspinner-dash {
+        0% {
+            stroke-dasharray: 1, 302;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 136, 302;
+            stroke-dashoffset: -54px;
+        }
+        100% {
+            stroke-dasharray: 1, 302;
+            stroke-dashoffset: -302px;
+        }
+    }
+
+    @keyframes p-progressspinner-color {
+        100%,
+        0% {
+            stroke: dt('progressspinner.color.one');
+        }
+        40% {
+            stroke: dt('progressspinner.color.two');
+        }
+        66% {
+            stroke: dt('progressspinner.color.three');
+        }
+        80%,
+        90% {
+            stroke: dt('progressspinner.color.four');
+        }
+    }
+`,o=e({name:"progressspinner",style:s,classes:{root:({props:r})=>["p-progressspinner",{"p-disabled":r.disabled}],circle:"p-progressspinner-circle",circleTrack:"p-progressspinner-circle-track",circleRange:"p-progressspinner-circle-range",value:"p-progressspinner-value"}});export{s as style,o as styles};

package/radiobutton/RadioButton.style.d.ts

@@ -1,10 +1,10 @@
-import type { RadioButtonInstance } from '@primereact/types/shared/radiobutton';
+import type { RadioButtonRootInstance } from '@primereact/types/primitive/radiobutton';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<RadioButtonInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<RadioButtonInstance>;
+    classes: import("@primereact/types/styles").ClassesType<RadioButtonRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<RadioButtonRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/radiobutton/index.d.ts

@@ -1,2 +1 @@
 export * from './RadioButton.style';
-export * from './RadioButtonGroup.style';

package/radiobutton/index.mjs

@@ -1,2 +1 @@
-import{createStyles as i}from"@primereact/styles/utils";import{style as a}from"@primeuix/styles/radiobutton";var l=i({name:"radiobutton",style:a,classes:{root:({instance:o,props:t})=>{var r,e,p;return["p-radiobutton p-component",{"p-radiobutton-checked":o.state.checked===!0,"p-disabled":((r=o.group)==null?void 0:r.props.disabled)===!0||t.disabled===!0,"p-invalid":(e=o.group)!=null&&e.props.invalid?((p=o.group)==null?void 0:p.props.invalid)===!0:t.invalid===!0,"p-variant-filled":t.variant==="filled","p-radiobutton-sm p-inputfield-sm":t.size==="small","p-radiobutton-lg p-inputfield-lg":t.size==="large"}]},box:"p-radiobutton-box",input:"p-radiobutton-input",icon:"p-radiobutton-icon",group:"p-radiobutton-group p-component"}});import{createStyles as n}from"@primereact/styles/utils";import{style as u}from"@primeuix/styles/radiobuttongroup";var f=n({name:"radiobuttongroup",style:u,classes:{root:"p-radiobutton-group p-component"}});export{f as groupStyles,l as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as i}from"@primereact/styles/utils";import{style as r}from"@primeuix/styles/radiobutton";var a=i({name:"radiobutton",style:r,classes:{root:({instance:o,props:t})=>["p-radiobutton p-component",{"p-radiobutton-checked":o.state.checked===!0,"p-disabled":o.group?.props.disabled===!0||t.disabled===!0,"p-invalid":o.group?.props.invalid?o.group?.props.invalid===!0:t.invalid===!0,"p-variant-filled":t.variant==="filled","p-radiobutton-sm p-inputfield-sm":t.size==="small","p-radiobutton-lg p-inputfield-lg":t.size==="large"}],box:"p-radiobutton-box",input:"p-radiobutton-input",indicator:"p-radiobutton-icon",group:"p-radiobutton-group p-component"}});export{a as styles};

package/{radiobutton → radiobuttongroup}/RadioButtonGroup.style.d.ts

@@ -1,5 +1,5 @@
-import type { RadioButtonGroupInstance } from '@primereact/types/shared/radiobutton';
-export declare const groupStyles: {
+import type { RadioButtonGroupInstance } from '@primereact/types/primitive/radiobuttongroup';
+export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;

package/radiobuttongroup/index.d.ts

@@ -0,0 +1 @@
+export * from './RadioButtonGroup.style';

package/radiobuttongroup/index.mjs

@@ -0,0 +1 @@
+import{createStyles as o}from"@primereact/styles/utils";import{style as t}from"@primeuix/styles/radiobuttongroup";var p=o({name:"radiobuttongroup",style:t,classes:{root:"p-radiobutton-group p-component"}});export{p as styles};

package/rating/Rating.style.d.ts

@@ -1,10 +1,10 @@
-import type { RatingInstance } from '@primereact/types/shared/rating';
+import type { RatingRootInstance } from '@primereact/types/primitive/rating';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<RatingInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<RatingInstance>;
+    classes: import("@primereact/types/styles").ClassesType<RatingRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<RatingRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/rating/index.mjs

@@ -1,67 +1,7 @@
-import{createStyles as n}from"@primereact/styles/utils";import{style as i}from"@primeuix/styles/rating";var o=`
-        ${i}
-        .p-rating-option {
-            position: relative; /* new added */
-            transition:
-                background dt('rating.transition.duration'),
-                color dt('rating.transition.duration'),
-                border-color dt('rating.transition.duration'),
-                outline-color dt('rating.transition.duration'),
-                box-shadow dt('rating.transition.duration'),
-                transform 0.1s ease-in-out; /* new added */;
-        }
+import{createStyles as n}from"@primereact/styles/utils";import{style as o}from"@primeuix/styles/rating";var i=`
+    ${o}
 
-        .p-rating-option:hover{
-            transform: scale(1.2);
-        }
-        .p-rating-option:active{
-            transform: scale(0.95);
-        }
-        .p-rating.p-readonly .p-rating-option {
-            cursor: not-allowed;
-        }
-
-        .p-rating-option-star{
-            width: dt('rating.icon.size');
-            height: dt('rating.icon.size');
-            color: dt('rating.icon.hover.color');
-        }
-        .p-rating-option-star.p-invalid{
-            stroke: dt('rating.invalid.icon.color');
-        }
-
-        .p-rating-option-on{
-            display: inline-flex;
-            position: absolute;
-            width: 50%;
-            height: 100%;
-        }
-        .p-rating-option-on-element{
-            pointer-events: none;
-            display: inline-flex;
-        }
-        .p-rating-option-on-element-filled{
-            opacity:1;
-        }
-        .p-rating-option-on-element-half{
-            clip-path: inset(0 50% 0 0);
-        }
-        .p-rating-option-on-element-empty{
-            opacity:0;
-        }
-
-        .p-rating-option-off{
-            display: inline-flex;
-        }
-        .p-rating-option-off-element{
-            pointer-events: none;
-            display: inline-flex;
-        }
-        .p-rating-option-off-element-filled{
-            opacity:0;
-        }
-        .p-rating-option-off-element-half{
-            clip-path: inset(0 0 0 50%);
-        }
-`,r=n({name:"rating",style:o,classes:{root:({props:t})=>["p-rating",{"p-readonly":t.readOnly,"p-disabled":t.disabled}],option:({context:t})=>["p-rating-option",{"p-rating-option-active":t.active,"p-focus-visible":t.focused}],optionOn:"p-rating-option-on",optionOnElement:({context:t})=>["p-rating-option-on-element",`p-rating-option-on-element-${t.state}`],optionOff:"p-rating-option-off",optionOffElement:({context:t})=>["p-rating-option-off-element",`p-rating-option-off-element-${t.state}`],optionStar:({props:t})=>["p-rating-option-star",{"p-invalid":t.invalid}]}});export{r as styles};
-//# sourceMappingURL=index.mjs.map
+    [dir="rtl"] .p-rating-option[data-half] .p-rating-on-icon[data-orientation="horizontal"] {
+        clip-path: inset(0 0 0 50%);
+    }
+`,e=n({name:"rating",style:i,classes:{root:({props:t})=>["p-rating p-component",{"p-disabled":t.disabled,"p-readonly":t.readOnly,"p-invalid":t.invalid}],option:"p-rating-option",onIcon:"p-rating-on-icon",offIcon:"p-rating-off-icon"}});export{e as styles};

package/scrollarea/ScrollArea.style.d.ts

@@ -1,10 +1,10 @@
-import type { ScrollAreaInstance } from '@primereact/types/shared/scrollarea';
+import type { ScrollAreaRootInstance } from '@primereact/types/primitive/scrollarea';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<ScrollAreaInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<ScrollAreaInstance>;
+    classes: import("@primereact/types/styles").ClassesType<ScrollAreaRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<ScrollAreaRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/scrollarea/index.mjs

@@ -1,2 +1 @@
-import{createStyles as l}from"@primereact/styles/utils";import{style as r}from"@primeuix/styles/scrollpanel";var t=l({name:"scrollpanel",style:r,classes:{root:"p-scrollpanel p-component",viewport:"p-scrollpanel-content-container",content:"p-scrollpanel-content",thumbX:"p-scrollpanel-bar p-scrollpanel-bar-x",thumbY:"p-scrollpanel-bar p-scrollpanel-bar-y"}});export{t as styles};
-//# sourceMappingURL=index.mjs.map
+import{createStyles as o}from"@primereact/styles/utils";import{style as e}from"@primeuix/styles/scrollarea";var t=o({name:"scrollarea",style:e,classes:{root:({props:r})=>["p-scrollarea p-component",{"p-scrollarea-mask":r.mask}],viewport:"p-scrollarea-viewport",content:"p-scrollarea-content",scrollbar:"p-scrollarea-scrollbar",handle:"p-scrollarea-handle",corner:"p-scrollarea-corner"}});export{t as styles};

package/{switch/Switch.style.d.ts → select/Select.style.d.ts}

@@ -1,10 +1,10 @@
-import type { SwitchInstance } from '@primereact/types/shared/switch';
+import type { SelectRootInstance } from '@primereact/types/primitive/select';
 export declare const styles: {
     name: string | undefined;
     css: import("@primeuix/styled").StyleType | undefined;
     style: import("@primeuix/styled").StyleType | undefined;
-    classes: import("@primereact/types/styles").ClassesType<SwitchInstance> | undefined;
-    inlineStyles: import("@primereact/types/styles").InlineStylesType<SwitchInstance>;
+    classes: import("@primereact/types/styles").ClassesType<SelectRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<SelectRootInstance>;
     baseStyles: {
         name: string;
         css: string;

package/select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select.style';

package/select/index.mjs

@@ -0,0 +1,78 @@
+import{createStyles as l}from"@primereact/styles/utils";import{style as a}from"@primeuix/styles/select";var p=`
+${a}
+
+/* For PrimeReact */
+.p-select-popup {
+    position: relative;
+    background: dt('select.overlay.background');
+    color: dt('select.overlay.color');
+    border: 1px solid dt('select.overlay.border.color');
+    border-radius: dt('select.overlay.border.radius');
+    box-shadow: dt('select.overlay.shadow');
+    width: var(--px-positioner-anchor-width, max-content);
+    transform-origin: var(--px-transform-origin);
+    will-change: transform, opacity;
+}
+
+.p-select-trigger {
+    display: inline-flex;
+    width: 100%;
+    outline: 0 none;
+    cursor: pointer;
+}
+
+.p-select-value {
+    text-align: left;
+}
+
+.p-select-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    cursor: pointer;
+}
+
+.p-select-list {
+    border: unset;
+    overflow: auto;
+}
+
+.p-select-option {
+    flex-shrink: 0;
+}
+
+.p-select-arrow {
+    position: absolute;
+    border: 1px solid dt('select.overlay.border.color');
+    background: dt('select.overlay.background');
+    width: 0.75rem;
+    height: 0.75rem;
+    border-bottom-left-radius: 3px;
+    clip-path: polygon(0 100%, 0 0, 100% 100%);
+
+    &[data-side='top'] {
+        left: var(--px-placer-arrow-x);
+        bottom: -0.375rem;
+        transform: translateX(-50%) rotate(-45deg);
+    }
+
+    &[data-side='bottom'] {
+        left: var(--px-placer-arrow-x);
+        top: -0.375rem;
+        transform: translateX(-50%) rotate(135deg);
+    }
+
+    &[data-side='left'] {
+        top: var(--px-placer-arrow-y);
+        right: -0.375rem;
+        transform: translateY(-50%) rotate(-135deg);
+    }
+
+    &[data-side='right'] {
+        top: var(--px-placer-arrow-y);
+        left: -0.375rem;
+        transform: translateY(-50%) rotate(45deg);
+    }
+}
+`,c=l({name:"select",style:p,classes:{root:({instance:e,props:t,context:o,state:r})=>["p-select p-component p-inputwrapper",{"p-invalid":t.invalid,"p-focus":r.focused,"p-variant-filled":t.variant==="filled","p-inputwrapper-filled":e?.hasValue(),"p-inputwrapper-focus":r.focused||r.opened,"p-select-fluid":t.fluid??o.$fluid,"p-disabled":t.disabled,"p-select-sm p-inputfield-sm":t.size==="small","p-select-lg p-inputfield-lg":t.size==="large"}],clear:"p-select-clear",indicator:"p-select-indicator p-select-dropdown",trigger:"p-select-trigger",value:({context:e})=>["p-select-value p-select-label",{"p-select-value-empty p-select-label-empty":e?.empty,"p-placeholder":e?.showPlaceholder}],positioner:"p-select-positioner",popup:"p-select-popup",header:"p-select-header",filter:"p-select-filter",list:"p-select-list",options:"p-select-options",option:({context:e})=>["p-select-option",{"p-focus":e?.focused,"p-disabled":e?.disabled,"p-select-option-selected":e?.selected}],optionGroup:"p-select-option-group",optionIndicator:"p-select-option-indicator",arrow:"p-select-arrow",empty:"p-select-empty-message"}});export{c as styles};

package/sidebar/Sidebar.style.d.ts

@@ -0,0 +1,15 @@
+import type { SidebarRootInstance } from '@primereact/types/primitive/sidebar';
+export declare const styles: {
+    name: string | undefined;
+    css: import("@primeuix/styled").StyleType | undefined;
+    style: import("@primeuix/styled").StyleType | undefined;
+    classes: import("@primereact/types/styles").ClassesType<SidebarRootInstance> | undefined;
+    inlineStyles: import("@primereact/types/styles").InlineStylesType<SidebarRootInstance>;
+    baseStyles: {
+        name: string;
+        css: string;
+        style: import("@primeuix/styled").StyleType;
+        classes: {};
+        inlineStyles: {};
+    };
+};