@onereach/ui-components 10.4.5-beta.4384.0 → 10.4.5-beta.4387.0

package/dist/bundled/v2/components/OrRatingV3/OrRating.js

@@ -1,5 +1,5 @@
-import { defineComponent, inject, ref, computed, toRef, watch, reactive } from 'vue-demi';
-import { Rating, RatingStar } from './styles.js';
+import { defineComponent, ref, computed, inject, toRef, watch, reactive } from 'vue-demi';
+import { R as RatingVariant, a as Rating, b as RatingVariants, c as RatingStar } from '../../styles-df8f7e15.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -19,6 +19,14 @@ var script = defineComponent({
       type: Number,
       default: 0
     },
+    variant: {
+      type: String,
+      default: () => RatingVariant.Default
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -27,13 +35,12 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-rating-v3', ...Rating, ...RatingVariants[props.variant]]);
+    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : [])]);
     // Options
     const length = inject(RATING_LENGTH, 5);
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-rating-v3', ...Rating]);
-    const starStyles = computed(() => [...RatingStar]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
@@ -113,7 +120,7 @@ var __vue_render__ = function () {
       attrs: {
         "icon": _vm.draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star',
         "variant": value <= _vm.draftModelValue ? 'filled' : 'outlined',
-        "size": _vm.hoverIndex[value - 1] ? 'xl' : 'l'
+        "size": _vm.variant === 'fitted' ? 'inherit' : _vm.hoverIndex[value - 1] ? 'xl' : 'l'
       }
     })], 1);
   }), 0);

package/dist/bundled/v2/components/OrRatingV3/OrRating.vue.d.ts

@@ -1,3 +1,5 @@
+import { PropType } from 'vue-demi';
+import { RatingVariant } from './types';
 export declare const RATING_LENGTH: unique symbol;
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     length: number;
@@ -15,6 +17,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant.Default;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,12 +34,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant.Default;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -46,11 +66,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onMouseLeave: (event: MouseEvent, index: number) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrRatingV3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.vue';
+export * from './types';

package/dist/bundled/v2/components/OrRatingV3/index.js

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.js';
+export { R as RatingVariant } from '../../styles-df8f7e15.js';

package/dist/bundled/v2/components/OrRatingV3/styles.d.ts

@@ -1,2 +1,4 @@
+import { RatingVariant } from './types';
 export declare const Rating: string[];
+export declare const RatingVariants: Record<RatingVariant, string[]>;
 export declare const RatingStar: string[];

package/dist/bundled/v2/components/OrRatingV3/styles.js

@@ -1,18 +1 @@
-const Rating = [
-// Layout
-'layout-row',
-// Theme
-'theme-foreground-disabled', 'dark:theme-foreground-disabled-dark'];
-const RatingStar = [
-// Layout
-'layout-row justify-center',
-// Interactivity
-'interactivity-click',
-// Box
-'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
-// Theme (activated)
-'activated:text-warning-hover', 'dark:activated:text-warning-hover-dark',
-// Theme (disabled)
-'disabled:text-disabled', 'dark:disabled:text-disabled-dark'];
-
-export { Rating, RatingStar };
+export { a as Rating, c as RatingStar, b as RatingVariants } from '../../styles-df8f7e15.js';

package/dist/bundled/v2/components/OrRatingV3/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum RatingVariant {
+    Default = "default",
+    Fitted = "fitted"
+}

package/dist/bundled/v2/components/index.js

@@ -136,6 +136,7 @@ export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { default as OrRadioV3 } from './OrRadioV3/OrRadio.js';
 export { default as OrRangeSliderV3 } from './OrRangeSliderV3/OrRangeSlider.js';
 export { default as OrRatingV3 } from './OrRatingV3/OrRating.js';
+export { R as RatingVariant } from '../styles-df8f7e15.js';
 export { default as OrResizeablePanelV3 } from './OrResizeablePanelV3/OrResizeablePanel.js';
 export { ResizeablePanelPadding, ResizeablePanelPlacement } from './OrResizeablePanelV3/props.js';
 export { default as OrRichTextEditorV3 } from './OrRichTextEditorV3/OrRichTextEditor.js';

package/dist/bundled/v2/index.js

@@ -172,6 +172,7 @@ export { default as OrProgress } from './components/OrProgress/OrProgress.js';
 export { OrProgressColors, OrProgressTypes } from './components/OrProgress/constants.js';
 export { ProgressColor, ProgressType } from './components/OrProgressV3/props.js';
 export { default as OrRadioV3 } from './components/OrRadioV3/OrRadio.js';
+export { R as RatingVariant } from './styles-df8f7e15.js';
 export { default as OrResizeablePanelV3 } from './components/OrResizeablePanelV3/OrResizeablePanel.js';
 export { ResizeablePanelPadding, ResizeablePanelPlacement } from './components/OrResizeablePanelV3/props.js';
 export { Formats } from './components/OrRichTextEditorV3/props.js';

package/dist/bundled/v2/styles-df8f7e15.js

@@ -0,0 +1,30 @@
+var RatingVariant;
+(function (RatingVariant) {
+  RatingVariant["Default"] = "default";
+  RatingVariant["Fitted"] = "fitted";
+})(RatingVariant || (RatingVariant = {}));
+
+const Rating = [
+// Theme
+'theme-foreground-disabled', 'dark:theme-foreground-disabled-dark'];
+const RatingVariants = {
+  [RatingVariant.Default]: [
+  // Layout
+  'layout-row'],
+  [RatingVariant.Fitted]: [
+  // Layout
+  'layout-row justify-between']
+};
+const RatingStar = [
+// Layout
+'layout-row justify-center',
+// Interactivity
+'interactivity-click',
+// Box
+'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
+// Theme (activated)
+'activated:text-warning-hover', 'dark:activated:text-warning-hover-dark',
+// Theme (disabled)
+'disabled:text-disabled', 'dark:disabled:text-disabled-dark'];
+
+export { RatingVariant as R, Rating as a, RatingVariants as b, RatingStar as c };

package/dist/bundled/v3/components/OrRatingV3/OrRating.js

@@ -1 +1 @@
-export { b as RATING_LENGTH, s as default } from '../OrRatingV3-82a538ca.js';
+export { d as RATING_LENGTH, s as default } from '../OrRatingV3-7ee136ba.js';

package/dist/bundled/v3/components/OrRatingV3/OrRating.vue.d.ts

@@ -1,9 +1,19 @@
+import { PropType } from 'vue-demi';
+import { RatingVariant } from './types';
 export declare const RATING_LENGTH: unique symbol;
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,6 +34,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,6 +50,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrRatingV3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.vue';
+export * from './types';

package/dist/bundled/v3/components/OrRatingV3/index.js

@@ -1 +1 @@
-export { s as OrRatingV3 } from '../OrRatingV3-82a538ca.js';
+export { s as OrRatingV3, R as RatingVariant } from '../OrRatingV3-7ee136ba.js';

package/dist/bundled/v3/components/OrRatingV3/styles.d.ts

@@ -1,2 +1,4 @@
+import { RatingVariant } from './types';
 export declare const Rating: string[];
+export declare const RatingVariants: Record<RatingVariant, string[]>;
 export declare const RatingStar: string[];

package/dist/bundled/v3/components/OrRatingV3/styles.js

@@ -1 +1 @@
-export { R as Rating, a as RatingStar } from '../OrRatingV3-82a538ca.js';
+export { a as Rating, c as RatingStar, b as RatingVariants } from '../OrRatingV3-7ee136ba.js';

package/dist/bundled/v3/components/OrRatingV3/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum RatingVariant {
+    Default = "default",
+    Fitted = "fitted"
+}

package/dist/bundled/v3/components/{OrRatingV3-82a538ca.js → OrRatingV3-7ee136ba.js}

@@ -1,13 +1,25 @@
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode } from 'vue';
-import { defineComponent, inject, ref, computed, toRef, watch, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, inject, toRef, watch, reactive } from 'vue-demi';
 import { s as script$1 } from './OrIconV3-34670800.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 
+var RatingVariant;
+(function (RatingVariant) {
+  RatingVariant["Default"] = "default";
+  RatingVariant["Fitted"] = "fitted";
+})(RatingVariant || (RatingVariant = {}));
+
 const Rating = [
-// Layout
-'layout-row',
 // Theme
 'theme-foreground-disabled', 'dark:theme-foreground-disabled-dark'];
+const RatingVariants = {
+  [RatingVariant.Default]: [
+  // Layout
+  'layout-row'],
+  [RatingVariant.Fitted]: [
+  // Layout
+  'layout-row justify-between']
+};
 const RatingStar = [
 // Layout
 'layout-row justify-center',
@@ -35,6 +47,14 @@ var script = defineComponent({
       type: Number,
       default: 0
     },
+    variant: {
+      type: String,
+      default: () => RatingVariant.Default
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -43,13 +63,12 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-rating-v3', ...Rating, ...RatingVariants[props.variant]]);
+    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : [])]);
     // Options
     const length = inject(RATING_LENGTH, 5);
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-rating-v3', ...Rating]);
-    const starStyles = computed(() => [...RatingStar]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
@@ -112,7 +131,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_OrIcon, {
       icon: _ctx.draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star',
       variant: value <= _ctx.draftModelValue ? 'filled' : 'outlined',
-      size: _ctx.hoverIndex[value - 1] ? 'xl' : 'l'
+      size: _ctx.variant === 'fitted' ? 'inherit' : _ctx.hoverIndex[value - 1] ? 'xl' : 'l'
     }, null, 8 /* PROPS */, ["icon", "variant", "size"])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2);
   }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_1);
 }
@@ -120,4 +139,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-rating-v3/OrRating.vue";
 
-export { Rating as R, RatingStar as a, RATING_LENGTH as b, script as s };
+export { RatingVariant as R, Rating as a, RatingVariants as b, RatingStar as c, RATING_LENGTH as d, script as s };

package/dist/bundled/v3/components/index.js

@@ -81,7 +81,7 @@ export { default as OrRadioGroup } from './OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRadioV3 } from './OrRadioV3-6c7ebd3d.js';
 export { s as OrRangeSliderV3 } from './OrRangeSliderV3-e498c9db.js';
-export { s as OrRatingV3 } from './OrRatingV3-82a538ca.js';
+export { s as OrRatingV3, R as RatingVariant } from './OrRatingV3-7ee136ba.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanelV3-8f104a35.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditorV3-5c205c36.js';
 export { default as OrSearch } from './OrSearch/OrSearch.js';

package/dist/bundled/v3/index.js

@@ -44,7 +44,7 @@ export { s as OrRadio } from './components/OrRadio-29377a46.js';
 export { default as OrRadioGroup } from './components/OrRadioGroup/OrRadioGroup.js';
 export { default as OrRadioGroupV3 } from './components/OrRadioGroupV3/OrRadioGroup.js';
 export { s as OrRangeSliderV3 } from './components/OrRangeSliderV3-e498c9db.js';
-export { s as OrRatingV3 } from './components/OrRatingV3-82a538ca.js';
+export { s as OrRatingV3, R as RatingVariant } from './components/OrRatingV3-7ee136ba.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './components/OrRichTextEditorV3-5c205c36.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './components/OrSegmentedControlV3-bedef411.js';
 export { s as OrSelect } from './components/OrSelect-f6c1a560.js';

package/dist/esm/v2/{OrRating-aa2365e9.js → OrRating-41ca0941.js}

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, toRef, watch, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, inject, toRef, watch, reactive } from 'vue-demi';
 import './dom-53c9635b.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
@@ -8,11 +8,23 @@ import './TimeFormat-a7f5565b.js';
 import { _ as __vue_component__$1 } from './OrIcon-03e3c802.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
+var RatingVariant;
+(function (RatingVariant) {
+  RatingVariant["Default"] = "default";
+  RatingVariant["Fitted"] = "fitted";
+})(RatingVariant || (RatingVariant = {}));
+
 const Rating = [
-// Layout
-'layout-row',
 // Theme
 'theme-foreground-disabled', 'dark:theme-foreground-disabled-dark'];
+const RatingVariants = {
+  [RatingVariant.Default]: [
+  // Layout
+  'layout-row'],
+  [RatingVariant.Fitted]: [
+  // Layout
+  'layout-row justify-between']
+};
 const RatingStar = [
 // Layout
 'layout-row justify-center',
@@ -40,6 +52,14 @@ var script = defineComponent({
       type: Number,
       default: 0
     },
+    variant: {
+      type: String,
+      default: () => RatingVariant.Default
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -48,13 +68,12 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-rating-v3', ...Rating, ...RatingVariants[props.variant]]);
+    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : [])]);
     // Options
     const length = inject(RATING_LENGTH, 5);
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-rating-v3', ...Rating]);
-    const starStyles = computed(() => [...RatingStar]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
@@ -134,7 +153,7 @@ var __vue_render__ = function () {
       attrs: {
         "icon": _vm.draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star',
         "variant": value <= _vm.draftModelValue ? 'filled' : 'outlined',
-        "size": _vm.hoverIndex[value - 1] ? 'xl' : 'l'
+        "size": _vm.variant === 'fitted' ? 'inherit' : _vm.hoverIndex[value - 1] ? 'xl' : 'l'
       }
     })], 1);
   }), 0);
@@ -160,4 +179,4 @@ const __vue_component__ = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__
 }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
 
-export { __vue_component__ as _ };
+export { RatingVariant as R, __vue_component__ as _ };

package/dist/esm/v2/components/index.js

@@ -100,7 +100,7 @@ export { _ as OrRadioGroup } from '../OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from '../OrRadioGroup-8bb28757.js';
 export { _ as OrRadioV3 } from '../OrRadio-d6e78d8b.js';
 export { _ as OrRangeSliderV3 } from '../OrRangeSlider-95670fdf.js';
-export { _ as OrRatingV3 } from '../OrRating-aa2365e9.js';
+export { _ as OrRatingV3, R as RatingVariant } from '../OrRating-41ca0941.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanel-b0cc4d2b.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from '../OrRichTextEditor-8c51a0ae.js';
 export { _ as OrSearch } from '../OrSearch-3f55fbee.js';

package/dist/esm/v2/components/or-rating-v3/OrRating.vue.d.ts

@@ -1,3 +1,5 @@
+import { PropType } from 'vue-demi';
+import { RatingVariant } from './types';
 export declare const RATING_LENGTH: unique symbol;
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     length: number;
@@ -15,6 +17,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant.Default;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,12 +34,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant.Default;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -46,11 +66,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onMouseLeave: (event: MouseEvent, index: number) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-rating-v3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.vue';
+export * from './types';

package/dist/esm/v2/components/or-rating-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrRatingV3 } from '../../OrRating-aa2365e9.js';
+export { _ as OrRatingV3, R as RatingVariant } from '../../OrRating-41ca0941.js';
 import 'vue-demi';
 import '../../dom-53c9635b.js';
 import 'lodash/get';

package/dist/esm/v2/components/or-rating-v3/styles.d.ts

@@ -1,2 +1,4 @@
+import { RatingVariant } from './types';
 export declare const Rating: string[];
+export declare const RatingVariants: Record<RatingVariant, string[]>;
 export declare const RatingStar: string[];

package/dist/esm/v2/components/or-rating-v3/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum RatingVariant {
+    Default = "default",
+    Fitted = "fitted"
+}

package/dist/esm/v2/index.js

@@ -100,7 +100,7 @@ export { _ as OrRadioGroup } from './OrRadioGroup-11424644.js';
 export { _ as OrRadioGroupV3 } from './OrRadioGroup-8bb28757.js';
 export { _ as OrRadioV3 } from './OrRadio-d6e78d8b.js';
 export { _ as OrRangeSliderV3 } from './OrRangeSlider-95670fdf.js';
-export { _ as OrRatingV3 } from './OrRating-aa2365e9.js';
+export { _ as OrRatingV3, R as RatingVariant } from './OrRating-41ca0941.js';
 export { _ as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-b0cc4d2b.js';
 export { F as Formats, _ as OrRichTextEditorV3 } from './OrRichTextEditor-8c51a0ae.js';
 export { _ as OrSearch } from './OrSearch-3f55fbee.js';

package/dist/esm/v3/{OrRating-2abf71bd.js → OrRating-b9118e0e.js}

@@ -1,4 +1,4 @@
-import { defineComponent, inject, ref, computed, toRef, watch, reactive } from 'vue-demi';
+import { defineComponent, ref, computed, inject, toRef, watch, reactive } from 'vue-demi';
 import './dom-53c9635b.js';
 import '@vueuse/core';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
@@ -8,11 +8,23 @@ import './TimeFormat-a7f5565b.js';
 import { s as script$1 } from './OrIcon-c446d072.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createVNode } from 'vue';
 
+var RatingVariant;
+(function (RatingVariant) {
+  RatingVariant["Default"] = "default";
+  RatingVariant["Fitted"] = "fitted";
+})(RatingVariant || (RatingVariant = {}));
+
 const Rating = [
-// Layout
-'layout-row',
 // Theme
 'theme-foreground-disabled', 'dark:theme-foreground-disabled-dark'];
+const RatingVariants = {
+  [RatingVariant.Default]: [
+  // Layout
+  'layout-row'],
+  [RatingVariant.Fitted]: [
+  // Layout
+  'layout-row justify-between']
+};
 const RatingStar = [
 // Layout
 'layout-row justify-center',
@@ -40,6 +52,14 @@ var script = defineComponent({
       type: Number,
       default: 0
     },
+    variant: {
+      type: String,
+      default: () => RatingVariant.Default
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -48,13 +68,12 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-rating-v3', ...Rating, ...RatingVariants[props.variant]]);
+    const starStyles = computed(() => [...RatingStar, ...(props.readonly ? ['interactivity-none'] : [])]);
     // Options
     const length = inject(RATING_LENGTH, 5);
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-rating-v3', ...Rating]);
-    const starStyles = computed(() => [...RatingStar]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
@@ -117,7 +136,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createVNode(_component_OrIcon, {
       icon: _ctx.draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star',
       variant: value <= _ctx.draftModelValue ? 'filled' : 'outlined',
-      size: _ctx.hoverIndex[value - 1] ? 'xl' : 'l'
+      size: _ctx.variant === 'fitted' ? 'inherit' : _ctx.hoverIndex[value - 1] ? 'xl' : 'l'
     }, null, 8 /* PROPS */, ["icon", "variant", "size"])], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_2);
   }), 128 /* KEYED_FRAGMENT */))], 10 /* CLASS, PROPS */, _hoisted_1);
 }
@@ -125,4 +144,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-rating-v3/OrRating.vue";
 
-export { script as s };
+export { RatingVariant as R, script as s };

package/dist/esm/v3/components/index.js

@@ -97,7 +97,7 @@ export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from '../OrRadioGroup-7e7b9d4c.js';
 export { s as OrRadioV3 } from '../OrRadio-a4109ee7.js';
 export { s as OrRangeSliderV3 } from '../OrRangeSlider-f3b389e0.js';
-export { s as OrRatingV3 } from '../OrRating-2abf71bd.js';
+export { s as OrRatingV3, R as RatingVariant } from '../OrRating-b9118e0e.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from '../OrResizeablePanel-5000543d.js';
 export { F as Formats, s as OrRichTextEditorV3 } from '../OrRichTextEditor-2ef14c64.js';
 export { s as OrSearch } from '../OrSearch-740f931b.js';

package/dist/esm/v3/components/or-rating-v3/OrRating.vue.d.ts

@@ -1,9 +1,19 @@
+import { PropType } from 'vue-demi';
+import { RatingVariant } from './types';
 export declare const RATING_LENGTH: unique symbol;
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -24,6 +34,14 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    variant: {
+        type: PropType<"default" | "fitted">;
+        default: () => RatingVariant;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,6 +50,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: number;
+    variant: "default" | "fitted";
+    readonly: boolean;
     disabled: boolean;
 }>;
 export default _default;

package/dist/esm/v3/components/or-rating-v3/index.d.ts

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.vue';
+export * from './types';

package/dist/esm/v3/components/or-rating-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrRatingV3 } from '../../OrRating-2abf71bd.js';
+export { s as OrRatingV3, R as RatingVariant } from '../../OrRating-b9118e0e.js';
 import 'vue-demi';
 import '../../dom-53c9635b.js';
 import 'lodash/get';

package/dist/esm/v3/components/or-rating-v3/styles.d.ts

@@ -1,2 +1,4 @@
+import { RatingVariant } from './types';
 export declare const Rating: string[];
+export declare const RatingVariants: Record<RatingVariant, string[]>;
 export declare const RatingStar: string[];

package/dist/esm/v3/components/or-rating-v3/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum RatingVariant {
+    Default = "default",
+    Fitted = "fitted"
+}

package/dist/esm/v3/index.js

@@ -97,7 +97,7 @@ export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
 export { s as OrRadioGroupV3 } from './OrRadioGroup-7e7b9d4c.js';
 export { s as OrRadioV3 } from './OrRadio-a4109ee7.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-f3b389e0.js';
-export { s as OrRatingV3 } from './OrRating-2abf71bd.js';
+export { s as OrRatingV3, R as RatingVariant } from './OrRating-b9118e0e.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-5000543d.js';
 export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-2ef14c64.js';
 export { s as OrSearch } from './OrSearch-740f931b.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.4.5-beta.4384.0",
+  "version": "10.4.5-beta.4387.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -40,7 +40,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^6.9.2-beta.4384.0",
+    "@onereach/styles": "^6.9.2-beta.4387.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",

package/src/components/or-rating-v3/OrRating.vue

@@ -19,17 +19,18 @@
       <OrIcon
         :icon="draftModelValue - value + 1 === 0.5 ? 'star_half' : 'star'"
         :variant="value <= draftModelValue ? 'filled' : 'outlined'"
-        :size="hoverIndex[value - 1] ? 'xl' : 'l'"
+        :size="variant === 'fitted' ? 'inherit' : hoverIndex[value - 1] ? 'xl' : 'l'"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, reactive, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, reactive, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../hooks';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { Rating, RatingStar } from './styles';
+import * as Styles from './styles';
+import { RatingVariant } from './types';
 
 export const RATING_LENGTH = Symbol();
 
@@ -51,6 +52,16 @@ export default defineComponent({
       default: 0,
     },
 
+    variant: {
+      type: String as PropType<`${RatingVariant}`>,
+      default: () => RatingVariant.Default,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+
     disabled: {
       type: Boolean,
       default: false,
@@ -66,22 +77,23 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Options
-    const length = inject(RATING_LENGTH, 5);
-
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-rating-v3',
-      ...Rating,
+      ...Styles.Rating,
+      ...Styles.RatingVariants[props.variant],
     ]);
 
     const starStyles = computed(() => [
-      ...RatingStar,
+      ...Styles.RatingStar,
+      ...props.readonly ? ['interactivity-none'] : [],
     ]);
 
+    // Options
+    const length = inject(RATING_LENGTH, 5);
+
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);

package/src/components/or-rating-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrRatingV3 } from './OrRating.vue';
+export * from './types';

package/src/components/or-rating-v3/styles.ts

@@ -1,12 +1,23 @@
-export const Rating: string[] = [
-  // Layout
-  'layout-row',
+import { RatingVariant } from './types';
 
+export const Rating: string[] = [
   // Theme
   'theme-foreground-disabled',
   'dark:theme-foreground-disabled-dark',
 ];
 
+export const RatingVariants: Record<RatingVariant, string[]> = {
+  [RatingVariant.Default]: [
+    // Layout
+    'layout-row',
+  ],
+
+  [RatingVariant.Fitted]: [
+    // Layout
+    'layout-row justify-between',
+  ],
+};
+
 export const RatingStar: string[] = [
   // Layout
   'layout-row justify-center',

package/src/components/or-rating-v3/types.ts

@@ -0,0 +1,4 @@
+export enum RatingVariant {
+  Default = 'default',
+  Fitted = 'fitted',
+}