origam 2.3.0 → 2.6.1

package/dist/src/components/FileField/OrigamFileField.vue

@@ -105,7 +105,6 @@
           <ul
               v-if="multiple && hasFiles"
               class="origam-file-field__list"
-              role="list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
               <slot
@@ -290,7 +289,6 @@
           <ul
               v-if="multiple && hasFiles && !hasChips && displayMode === 'list'"
               class="origam-file-field__list"
-              role="list"
           >
             <template v-for="(item, idx) in fileList" :key="idx">
               <slot
@@ -375,7 +373,7 @@
   </origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
 import { OrigamChip, OrigamCounter, OrigamField, OrigamIcon, OrigamInput } from "../../components";
 import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
@@ -425,7 +423,7 @@ const _props = defineProps({
   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, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -440,10 +438,12 @@ 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 },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -482,6 +482,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/FileField/OrigamFileFieldDragNDropItem.vue

@@ -9,7 +9,10 @@
           class="origam-file-field-dragndrop-item__icon"
       />
       <div class="origam-file-field-dragndrop-item__content">
-        <div class="origam-file-field-dragndrop-item__name">
+        <div
+            class="origam-file-field-dragndrop-item__name"
+            :style="typographyStyles"
+        >
           {{ file.name }}
         </div>
         <div class="origam-file-field-dragndrop-item__meta">
@@ -37,13 +40,14 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
 import {
   useDefaults,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 import { humanReadableFileSize } from "../../utils";
@@ -55,11 +59,16 @@ const _props = defineProps({
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
   showSize: { type: [Boolean, Number], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { 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 props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);
@@ -84,6 +93,7 @@ const dragNDropItemClasses = computed(() => {
     props.class
   ];
 });
+const { typographyStyles } = useTypography(props, "file-field-dragndrop-item__name");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(dragNDropItemStyles);
 defineExpose({

package/dist/src/components/FileField/OrigamFileFieldListItem.vue

@@ -9,7 +9,10 @@
           class="origam-file-field-list-item__icon"
       />
       <div class="origam-file-field-list-item__content">
-        <div class="origam-file-field-list-item__name">
+        <div
+            class="origam-file-field-list-item__name"
+            :style="typographyStyles"
+        >
           {{ file.name }}
         </div>
         <div class="origam-file-field-list-item__meta">
@@ -37,13 +40,14 @@
   </li>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamBtn, OrigamIcon, OrigamProgress } from "../../components";
 import {
   useDefaults,
   useProps,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 import { humanReadableFileSize } from "../../utils";
@@ -55,11 +59,16 @@ const _props = defineProps({
   removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
   showSize: { type: [Boolean, Number], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { 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 props = useDefaults(_props);
 const emits = defineEmits(["click:remove"]);
@@ -84,6 +93,7 @@ const listItemClasses = computed(() => {
     props.class
   ];
 });
+const { typographyStyles } = useTypography(props, "file-field-list-item__name");
 const { filterProps } = useProps(props);
 const { id, css, load, isLoaded, unload } = useStyle(listItemStyles);
 defineExpose({

package/dist/src/components/Form/OrigamForm.vue

@@ -17,6 +17,7 @@
 		<div
 				v-if="hasMessages"
 				class="origam-form__details"
+				:style="typographyStyles"
 		>
 			<slot
 					name="messages"
@@ -52,7 +53,7 @@
 	</form>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useSlots } from "vue";
 import { OrigamMessages } from "../../components";
 import {
@@ -61,6 +62,7 @@ import {
   useMessage,
   useProps,
   useStyle,
+  useTypography,
   useValidation
 } from "../../composables";
 import { forwardRefs, getUid } from "../../utils";
@@ -77,7 +79,12 @@ const _props = defineProps({
   scrollToError: { type: Boolean, 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 }
+  style: { type: [String, Array, 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 props = useDefaults(_props);
 const emits = defineEmits(["submit", "reset"]);
@@ -95,6 +102,7 @@ const {
 } = useValidation(props);
 const messagesId = `origam-form-messages-${getUid()}`;
 const { hasMessages, messages } = useMessage(props, errorMessages);
+const { typographyStyles } = useTypography(props, "form__details");
 const scrollToFirstError = async (options) => {
   await nextTick();
   const el = formRef.value?.querySelector(".origam-input--error");

package/dist/src/components/Grid/OrigamGrid.vue

@@ -0,0 +1,197 @@
+<template>
+	<component
+			:is="tag"
+			:class="gridClasses"
+			:style="gridStyles"
+	>
+		<slot/>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import { computed, StyleValue, toRef } from "vue";
+import {
+  useBorder,
+  useBothColor,
+  useDimension,
+  useElevation,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded
+} from "../../composables";
+import { GRID_GAP_SIZE_VAR } from "../../consts";
+const props = defineProps({
+  columns: { type: [Number, String, Array], required: false, default: "auto" },
+  rows: { type: [Number, String, Array], required: false, default: "auto" },
+  gap: { type: [String, Number], required: false, default: "md" },
+  columnGap: { type: [String, Number], required: false, default: void 0 },
+  rowGap: { type: [String, Number], required: false, default: void 0 },
+  areas: { type: [String, Array], required: false, default: void 0 },
+  autoFlow: { type: String, required: false, default: "row" },
+  autoColumns: { type: String, required: false, default: void 0 },
+  autoRows: { type: String, required: false, default: void 0 },
+  alignItems: { type: String, required: false, default: "stretch" },
+  justifyItems: { type: String, required: false, default: "stretch" },
+  alignContent: { type: String, required: false, default: void 0 },
+  justifyContent: { type: String, required: false, default: void 0 },
+  inline: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  color: { 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 },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
+});
+const { filterProps } = useProps(props);
+const serialiseTracks = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || value < 1) return void 0;
+    return `repeat(${Math.floor(value)}, 1fr)`;
+  }
+  if (Array.isArray(value)) return value.join(" ");
+  return String(value);
+};
+const columnsCss = computed(() => serialiseTracks(props.columns));
+const rowsCss = computed(() => serialiseTracks(props.rows));
+const areasCss = computed(() => {
+  const v = props.areas;
+  if (v == null) return void 0;
+  if (Array.isArray(v)) {
+    if (v.length === 0) return void 0;
+    return v.map((line) => `"${line}"`).join(" ");
+  }
+  return String(v);
+});
+const serialiseGap = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) return void 0;
+    return `${value}px`;
+  }
+  if (typeof value === "string") {
+    if (value in GRID_GAP_SIZE_VAR) return GRID_GAP_SIZE_VAR[value];
+    return value;
+  }
+  return void 0;
+};
+const gapCss = computed(() => serialiseGap(props.gap));
+const columnGapCss = computed(() => serialiseGap(props.columnGap));
+const rowGapCss = computed(() => serialiseGap(props.rowGap));
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { dimensionStyles } = useDimension(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const gridStyles = computed(() => {
+  const style = {};
+  if (columnsCss.value) style["--origam-grid---template-columns"] = columnsCss.value;
+  if (rowsCss.value) style["--origam-grid---template-rows"] = rowsCss.value;
+  if (areasCss.value) style["--origam-grid---template-areas"] = areasCss.value;
+  if (gapCss.value) style["--origam-grid---gap"] = gapCss.value;
+  if (columnGapCss.value) style["--origam-grid---column-gap"] = columnGapCss.value;
+  if (rowGapCss.value) style["--origam-grid---row-gap"] = rowGapCss.value;
+  if (props.autoFlow) style["--origam-grid---auto-flow"] = props.autoFlow;
+  if (props.autoColumns) style["--origam-grid---auto-columns"] = props.autoColumns;
+  if (props.autoRows) style["--origam-grid---auto-rows"] = props.autoRows;
+  if (props.alignItems) style["--origam-grid---align-items"] = props.alignItems;
+  if (props.justifyItems) style["--origam-grid---justify-items"] = props.justifyItems;
+  if (props.alignContent) style["--origam-grid---align-content"] = props.alignContent;
+  if (props.justifyContent) style["--origam-grid---justify-content"] = props.justifyContent;
+  return [
+    style,
+    colorStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    dimensionStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
+    props.style
+  ];
+});
+const gridClasses = computed(() => {
+  return [
+    "origam-grid",
+    {
+      "origam-grid--inline": props.inline
+    },
+    colorClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
+    props.class
+  ];
+});
+defineExpose({
+  filterProps,
+  columnsCss,
+  rowsCss,
+  areasCss,
+  gapCss,
+  columnGapCss,
+  rowGapCss
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-grid {
+		display: grid;
+		grid-template-columns: var(--origam-grid---template-columns, none);
+		grid-template-rows: var(--origam-grid---template-rows, none);
+		grid-template-areas: var(--origam-grid---template-areas, none);
+		grid-auto-flow: var(--origam-grid---auto-flow, row);
+		grid-auto-columns: var(--origam-grid---auto-columns, auto);
+		grid-auto-rows: var(--origam-grid---auto-rows, auto);
+		gap: var(--origam-grid---gap, var(--origam-grid---gap-md));
+		column-gap: var(--origam-grid---column-gap, var(--origam-grid---gap));
+		row-gap: var(--origam-grid---row-gap, var(--origam-grid---gap));
+		align-items: var(--origam-grid---align-items, stretch);
+		justify-items: var(--origam-grid---justify-items, stretch);
+		align-content: var(--origam-grid---align-content, normal);
+		justify-content: var(--origam-grid---justify-content, normal);
+
+		&--inline {
+			display: inline-grid;
+		}
+	}
+</style>

package/dist/src/components/Grid/OrigamGridItem.vue

@@ -0,0 +1,69 @@
+<template>
+	<component
+			:is="tag"
+			:class="itemClasses"
+			:style="itemStyles"
+	>
+		<slot/>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import { computed, StyleValue } from "vue";
+const props = defineProps({
+  column: { type: [Object, String, Number], required: false, default: void 0 },
+  row: { type: [Object, String, Number], required: false, default: void 0 },
+  area: { type: String, required: false, default: void 0 },
+  alignSelf: { type: String, required: false, default: void 0 },
+  justifySelf: { type: String, required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" }
+});
+const serialiseLineSpec = (value) => {
+  if (value == null) return void 0;
+  if (typeof value === "number") return String(value);
+  if (typeof value === "string") return value;
+  const { start, end, span } = value;
+  const startPart = start != null ? String(start) : null;
+  let endPart = null;
+  if (span != null) endPart = `span ${span}`;
+  else if (end != null) endPart = String(end);
+  if (startPart != null && endPart != null) return `${startPart} / ${endPart}`;
+  if (startPart != null) return startPart;
+  if (endPart != null) return endPart;
+  return void 0;
+};
+const columnCss = computed(() => serialiseLineSpec(props.column));
+const rowCss = computed(() => serialiseLineSpec(props.row));
+const itemStyles = computed(() => {
+  const style = {};
+  if (props.area) {
+    style.gridArea = props.area;
+  } else {
+    if (columnCss.value) style.gridColumn = columnCss.value;
+    if (rowCss.value) style.gridRow = rowCss.value;
+  }
+  if (props.alignSelf) style.alignSelf = props.alignSelf;
+  if (props.justifySelf) style.justifySelf = props.justifySelf;
+  return [style, props.style];
+});
+const itemClasses = computed(() => {
+  return [
+    "origam-grid-item",
+    props.class
+  ];
+});
+defineExpose({
+  columnCss,
+  rowCss
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-grid-item {
+		min-width: 0;
+		min-height: 0;
+	}
+</style>

package/dist/src/components/Grid/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamGrid", {
+  enumerable: true,
+  get: function () {
+    return _OrigamGrid.default;
+  }
+});
+Object.defineProperty(exports, "OrigamGridItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamGridItem.default;
+  }
+});
+var _OrigamGrid = _interopRequireDefault(require("./OrigamGrid.vue"));
+var _OrigamGridItem = _interopRequireDefault(require("./OrigamGridItem.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

package/dist/src/components/Grid/index.js

@@ -0,0 +1,2 @@
+export { default as OrigamGrid } from "./OrigamGrid.vue";
+export { default as OrigamGridItem } from "./OrigamGridItem.vue";

package/dist/src/components/Grids/OrigamCol.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useBorder,
   useBothColor,
@@ -38,8 +38,8 @@ const props = defineProps({
   orderLg: { type: Number, required: false },
   orderXl: { type: Number, required: false },
   orderXxl: { type: Number, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },

package/dist/src/components/Grids/OrigamContainer.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   useBorder,
   useMargin,

package/dist/src/components/Grids/OrigamRow.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,
@@ -51,7 +51,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, 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 },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   align: { type: null, required: false },
   alignSm: { type: null, required: false },
@@ -67,7 +68,10 @@ const props = defineProps({
   justifyXxl: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
-const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { colorClasses, colorStyles } = useBothColor(
+  toRef(props, "bgColor"),
+  toRef(props, "color")
+);
 const { densityClasses } = useDensity(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

package/dist/src/components/Grids/OrigamSpacer.vue

@@ -8,7 +8,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { useProps, useStyle } from "../../composables";
 const props = defineProps({

package/dist/src/components/Icon/OrigamClassIcon.vue

@@ -6,7 +6,7 @@
 	/>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { convertToUnit } from "../../utils";
@@ -14,7 +14,8 @@ import { computed, StyleValue } from "vue";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
-  color: { type: [String, 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -42,7 +43,18 @@ const props = defineProps({
   borderBlock: { type: [Boolean, Number, String], required: false },
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false }
+  borderStyle: { type: String, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
 const iconStyles = computed(() => {

package/dist/src/components/Icon/OrigamComponentIcon.vue

@@ -13,7 +13,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { useProps, useStyle } from "../../composables";
 import { SIZES_ARRAY } from "../../consts";
 import { computed, StyleValue } from "vue";
@@ -21,7 +21,8 @@ import { convertToUnit } from "../../utils";
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
-  color: { type: [String, 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 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -49,7 +50,18 @@ const props = defineProps({
   borderBlock: { type: [Boolean, Number, String], required: false },
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
-  borderStyle: { type: String, required: false }
+  borderStyle: { type: String, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false }
 });
 const { filterProps } = useProps(props);
 const hasIcon = computed(() => {