origam 2.5.0 → 2.6.2

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -11,6 +11,7 @@
 		<span
 				v-if="withInfo"
 				class="origam-pagination__info"
+				:style="typographyStyles"
 				data-cy="pagination-info"
 		>
 			<slot
@@ -59,7 +60,7 @@
 							:disabled="disabled"
 							type="number"
 							class="origam-pagination__compact-input"
-							aria-label="Page number"
+							:aria-label="t(pageNumberAriaLabel)"
 							data-cy="pagination-compact-input"
 							@change="handleCompactInput"
 							@keydown.enter.prevent="handleCompactInput"
@@ -173,10 +174,10 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ComponentPublicInstance, computed, nextTick, ref, shallowRef, StyleValue } from "vue";
 import { OrigamBtn } from "../../components";
-import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useVModel, useStyle } from "../../composables";
+import { useDensity, useDisplay, useLocale, useProps, useRefs, useResizeObserver, useSize, useTypography, useVModel, useStyle } from "../../composables";
 import { KEYBOARD_VALUES, MDI_ICONS } from "../../enums";
 import { createRange, int } from "../../utils";
 const props = defineProps({
@@ -207,6 +208,11 @@ const props = defineProps({
   infoText: { type: String, required: false, default: "origam.pagination.info" },
   previousText: { type: String, required: false },
   nextText: { type: String, required: false },
+  pageNumberAriaLabel: { type: String, required: false, default: "origam.pagination.ariaLabel.pageNumber" },
+  hoverColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hoverBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -238,7 +244,12 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   size: { type: null, required: false },
-  density: { type: null, required: false }
+  density: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
 const { filterProps } = useProps(props);
@@ -486,6 +497,7 @@ const infoEnd = computed(() => {
 const isColored = computed(() => !!(props.color || props.bgColor));
 const { sizeClasses } = useSize(props);
 const { densityClasses } = useDensity(props);
+const { typographyStyles } = useTypography(props, "pagination--info");
 const paginationClasses = computed(() => {
   return [
     "origam-pagination",

package/dist/src/components/Parallax/OrigamParallax.vue

@@ -20,7 +20,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, provide, ref, StyleValue, toRef, watch } from "vue";
 import {
   useAudio,
@@ -121,7 +121,14 @@ const props = defineProps({
   top: { type: [Number, String], required: false },
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
-  right: { type: [Number, String], required: false }
+  right: { type: [Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
+  audio: { type: String, required: false },
+  playAudio: { type: Boolean, required: false }
 });
 const emit = defineEmits(["enter", "leave", "scroll-progress"]);
 const { filterProps } = useProps(props);

package/dist/src/components/Parallax/OrigamParallaxElement.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, StyleValue } from "vue";
 import {
   useBorder,

package/dist/src/components/Parallax/OrigamParallaxLayer.vue

@@ -9,7 +9,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue } from "vue";
 import { useProps } from "../../composables";
 import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
@@ -29,7 +29,7 @@ if (!parallax) {
   throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");
 }
 const layerRef = ref();
-const id = Symbol("origam:parallax-layer");
+const id = /* @__PURE__ */ Symbol("origam:parallax-layer");
 onMounted(() => {
   if (!layerRef.value) return;
   const registry = {

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -82,7 +82,7 @@
 									ref="origamMenuRef"
 									:model-value="showRequirements"
 									persistent
-									:target="origamInputRef"
+									:target="(origamInputRef as any)"
 									content-class="origam-password-field__info"
 									v-bind="resolvedMenuProps"
 							>
@@ -295,7 +295,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import {
   OrigamChip,
@@ -383,6 +383,8 @@ const _props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -425,6 +427,11 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },

package/dist/src/components/Picker/OrigamPicker.vue

@@ -43,7 +43,7 @@
 	</origam-sheet>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, useSlots } from "vue";
 import { OrigamPickerTitle, OrigamSheet } from "../../components";
 import { useBackgroundColor, useProps, useStyle } from "../../composables";
@@ -76,6 +76,7 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -106,8 +107,12 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  title: { type: String, required: false }
+  title: { type: String, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const slots = useSlots();
 const { filterProps } = useProps(props);

package/dist/src/components/Picker/OrigamPickerTitle.vue

@@ -10,9 +10,9 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import { useBothColor, useProps, useStyle } from "../../composables";
+import { useBothColor, useProps, useStyle, useTypography } from "../../composables";
 const props = defineProps({
   title: { type: String, required: false },
   id: { type: String, required: false },
@@ -20,13 +20,20 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { typographyStyles } = useTypography(props, "picker-title");
 const pickerTitleStyles = computed(() => {
   return [
     colorStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/Progress/OrigamProgress.vue

@@ -2,9 +2,9 @@
 	<component
 			:is="progressComponent"
 			ref="origamProgressRef"
-			:aria-busy="props.indeterminate ? true : undefined"
+			:aria-busy="indeterminate ? true : undefined"
 			:aria-hidden="!active"
-			:aria-label="props.label ?? 'Loading'"
+			:aria-label="progressAriaLabel"
 			:aria-valuemax="max"
 			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
@@ -22,7 +22,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamProgressCircular, OrigamProgressLinear } from "../../components";
 import {
@@ -45,11 +45,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -77,6 +79,7 @@ const { filterProps } = useProps(props);
 const origamProgressRef = ref();
 const { sizeClasses, sizeStyles } = useSize(props);
 const { normalizedValue, hasContent } = useProgress(props);
+const progressAriaLabel = computed(() => props.label ?? "Loading");
 const isCircular = computed(() => {
   return props.type === PROGRESS_TYPE.CIRCULAR;
 });

package/dist/src/components/Progress/OrigamProgressCircular.vue

@@ -47,7 +47,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, watchEffect } from "vue";
 import {
   useIntersectionObserver,
@@ -70,11 +70,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Progress/OrigamProgressLinear.vue

@@ -49,7 +49,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import { OrigamFade, OrigamSlideX, OrigamTransition } from "../../components";
 import {
@@ -75,11 +75,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -106,8 +108,8 @@ const { locationStyles } = useLocation(props);
 const { progressClasses, progressStyles, normalizedValue, thickness, progress, max, hasContent } = useProgress(props);
 const { roundedClasses } = useRounded(props);
 const { intersectionRef } = useIntersectionObserver();
-const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"), void 0, "origam-progress__background");
-const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"), void 0, "origam-progress__loader");
+const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"));
+const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"));
 const { isRtl, rtlClasses } = useRtl();
 const normalizedBuffer = computed(() => {
   return parseFloat(props.bufferValue) / max.value * 100;
@@ -219,7 +221,6 @@ defineExpose({
 				opacity: var(--origam-progress-linear__background---opacity, 0.5);
 				position: absolute;
 				top: 0;
-				transition-property: width, left, right;
 				transition: inherit;
 			}
 
@@ -248,7 +249,6 @@ defineExpose({
 				left: 0;
 				position: absolute;
 				transition: inherit;
-				transition-property: width, left, right;
 			}
 
 			&#{$this}--indeterminate {
@@ -280,7 +280,6 @@ defineExpose({
 				pointer-events: none;
 				position: absolute;
 				transition: inherit;
-				transition-property: width, left, right;
 			}
 
 			&#{$this}--reverse {

package/dist/src/components/{QRCode → QrCode}/OrigamQrCode.vue

@@ -43,7 +43,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref,

package/dist/src/components/QrCode/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamQrCode } from './OrigamQrCode.vue';

package/dist/src/components/Radio/OrigamRadio.vue

@@ -42,11 +42,11 @@
 
 					<template
 							v-if="slots.input"
-							#input="{props, icon, textColorStyles, backgroundColorStyles, model}"
+							#input="{props, icon, model}"
 					>
 						<slot
 								name="input"
-								v-bind="{props, icon, textColorStyles, backgroundColorStyles, model}"
+								v-bind="{props, icon, model}"
 						/>
 					</template>
 
@@ -99,12 +99,14 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamInput, OrigamRadioBtn } from "../../components";
 import {
   useFocus,
   useHover,
+  useMargin,
+  usePadding,
   useProps,
   useStateEffect,
   useStyle,
@@ -162,7 +164,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -178,10 +180,17 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -215,14 +224,20 @@ const inputProps = computed(() => {
 const radioBtnProps = computed(() => {
   return origamRadioBtnRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "disabled", "readonly", "error"]);
 });
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const radioStyles = computed(() => {
   return [
+    paddingStyles.value,
+    marginStyles.value,
     props.style
   ];
 });
 const radioClasses = computed(() => {
   return [
     "origam-radio",
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -245,13 +260,7 @@ defineExpose({
 		}
 
 		.origam-selection-control {
-			min-height: calc(56px + 2 * var(--origam-input---density));
+			min-height: calc(56px + 2 * var(--origam-input---density, 0px));
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -36,7 +36,7 @@
 	</origam-selection-control>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots } from "vue";
 import { OrigamSelectionControl } from "../../components";
 import {
@@ -54,8 +54,10 @@ const props = defineProps({
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_BLANK },
   trueIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_MARKED },

package/dist/src/components/Radio/OrigamRadioGroup.vue

@@ -24,42 +24,43 @@
 					/>
 				</slot>
 
-				<origam-selection-control-group
-						:id="id"
-						ref="origamSelectionControlGroupRef"
-						v-model="model"
-						:aria-describedby="messagesId"
-						:aria-labelledby="label ? id : undefined"
-						:disabled="isDisabled"
-						:items="items"
-						:multiple="false"
-						:readonly="isReadonly"
-						v-bind="{ ...controlProps , ...controlAttrs}"
-				>
-					<template #item="{item}">
-						<slot
-								name="item"
-								v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
-						>
-							<origam-radio
-									ref="origamRadioRef"
-									v-model="model"
-									:aria-describedby="messagesId"
-									:disabled="isDisabled"
-									:readonly="isReadonly"
-									v-bind="item"
-							/>
-						</slot>
-					</template>
-				</origam-selection-control-group>
+				<origam-defaults-provider :defaults="radioDefaults">
+					<origam-selection-control-group
+							:id="id"
+							ref="origamSelectionControlGroupRef"
+							v-model="model"
+							:aria-describedby="messagesId"
+							:aria-labelledby="label ? id : undefined"
+							:disabled="isDisabled"
+							:items="items"
+							:multiple="false"
+							:readonly="isReadonly"
+							v-bind="{ ...controlProps , ...controlAttrs}"
+					>
+						<template #item="{item}">
+							<slot
+									name="item"
+									v-bind="{id, messagesId, isDisabled, isReadonly, isValid}"
+							>
+								<origam-radio
+										v-model="model"
+										:aria-describedby="messagesId"
+										:disabled="isDisabled"
+										:readonly="isReadonly"
+										v-bind="item"
+								/>
+							</slot>
+						</template>
+					</origam-selection-control-group>
+				</origam-defaults-provider>
 			</slot>
 		</template>
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs } from "vue";
-import { OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
+import { OrigamDefaultsProvider, OrigamInput, OrigamLabel, OrigamRadio, OrigamSelectionControlGroup } from "../../components";
 import {
   useProps,
   useStyle,
@@ -117,7 +118,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -133,8 +134,15 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   value: { type: null, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -150,7 +158,6 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 const origamSelectionControlGroupRef = ref();
 const origamInputRef = ref();
-const origamRadioRef = ref();
 const attrs = useAttrs();
 const uid = getUid();
 const id = computed(() => {
@@ -164,16 +171,16 @@ const inputProps = computed(() => {
 const controlProps = computed(() => {
   return origamSelectionControlGroupRef.value?.filterProps(props, ["modelValue", "id", "style", "class", "readonly", "disabled", "type", "multiple", "items"]);
 });
-const radioProps = computed(() => {
-  return origamRadioRef.value.filterProps(props);
-});
+const radioDefaults = computed(() => ({
+  "origam-radio": {
+    color: props.color,
+    bgColor: props.bgColor,
+    density: props.density,
+    size: props.size
+  }
+}));
 const items = computed(() => {
-  return props.items?.map((item) => {
-    return {
-      ...radioProps.value,
-      ...item
-    };
-  });
+  return props.items ?? [];
 });
 const radioGroupStyles = computed(() => {
   return [

package/dist/src/components/RatingField/OrigamRatingField.vue

@@ -59,7 +59,7 @@
 						<template v-if="hasLabels && labelOnTop && slots[`itemLabel.${index}`]">
 							<slot :name="`itemLabel.${index}`">
 								<slot name="itemLabel">
-									<span>{{ itemLabels[index] ?? '&nbsp;' }}</span>
+									<span>{{ itemLabels?.[index] ?? '&nbsp;' }}</span>
 								</slot>
 							</slot>
 						</template>
@@ -93,7 +93,7 @@
 						<template v-if="hasLabels && labelOnBottom && slots[`itemLabel.${index}`]">
 							<slot :name="`itemLabel.${index}`">
 								<slot name="itemLabel">
-									<span>{{ itemLabels[index] ?? '&nbsp;' }}</span>
+									<span>{{ itemLabels?.[index] ?? '&nbsp;' }}</span>
 								</slot>
 							</slot>
 						</template>
@@ -141,7 +141,7 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, shallowRef, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamBtn, OrigamInput, OrigamLabel, OrigamRatingFieldItem } from "../../components";
 import {
@@ -214,7 +214,7 @@ const props = defineProps({
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   label: { type: String, required: false },
@@ -227,6 +227,11 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, required: false, default: SIZES.DEFAULT },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   ripple: { type: [Boolean, Object], required: false },
   tag: { type: String, required: false, default: "div" },
   text: { type: String, required: false },
@@ -345,14 +350,5 @@ defineExpose({
 			pointer-events: none;
 		}
 
-		&--hover {
-
-		}
-	}
-</style>
-
-<style>
-	:root {
-
 	}
 </style>