origam 0.3.9 → 2.2.1

package/dist/src/components/Window/OrigamWindow.vue

@@ -58,16 +58,21 @@
 <script setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamBtn, OrigamSpacer } from "../../components";
-import { useGroup, useLocale, useProps } from "../../composables";
+import {
+  useGroup,
+  useLocale,
+  useProps,
+  useStyle
+} from "../../composables";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
 import { vTouch } from "../../directives";
 import { AXIS, DIRECTION, MDI_ICONS } from "../../enums";
 const props = defineProps({
   continuous: { type: Boolean, required: false },
-  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
-  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
   reverse: { type: Boolean, required: false },
-  showArrows: { type: [String, Boolean], required: false },
+  showArrows: { type: [String, Boolean], required: false, default: true },
   touch: { type: [Boolean, Object], required: false, default: void 0 },
   modelValue: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -101,7 +106,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  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 },
@@ -211,9 +216,15 @@ const windowContainerStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(windowStyles);
 defineExpose({
   filterProps,
-  group
+  group,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -221,27 +232,31 @@ defineExpose({
 	.origam-window {
 		$this: &;
 
-		overflow: hidden;
+		overflow: var(--origam-window---overflow, hidden);
 
 		&__container {
-			display: flex;
-			flex-direction: column;
+			display: var(--origam-window__container---display, flex);
+			flex-direction: var(--origam-window__container---flex-direction, column);
 			height: inherit;
-			position: relative;
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+			position: var(--origam-window__container---position, relative);
+			transition:
+				var(--origam-window---transition-duration, 0.3s)
+				var(--origam-window---transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
 		}
 
 		&__controls {
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
+			box-sizing: border-box;
+			position: var(--origam-window__controls---position, absolute);
+			left: var(--origam-window__controls---position-left, 0);
+			top: var(--origam-window__controls---position-top, 0);
+			width: var(--origam-window__controls---width, 100%);
+			height: var(--origam-window__controls---height, 100%);
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 0 16px;
+			padding: 0 var(--origam-window__controls---padding-inline, 16px);
 			pointer-events: none;
+			color: var(--origam-window__controls---color, inherit);
 
 			> * {
 				pointer-events: auto;
@@ -252,25 +267,19 @@ defineExpose({
 			overflow: hidden;
 
 			#{$this}__prev {
-				transform: translateX(-200%);
+				transform: var(--origam-window--show-arrows-on-hover---prev-transform, translateX(-200%));
 			}
 
 			#{$this}__next {
-				transform: translateX(200%);
+				transform: var(--origam-window--show-arrows-on-hover---next-transform, translateX(200%));
 			}
 
 			&:hover {
 				#{$this}__prev,
 				#{$this}__next {
-					transform: translateX(0);
+					transform: var(--origam-window--show-arrows-on-hover---hover-transform, translateX(0));
 				}
 			}
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Window/OrigamWindowItem.vue

@@ -20,7 +20,13 @@
 <script setup>
 import { computed, inject, nextTick, shallowRef, StyleValue } from "vue";
 import { OrigamTransition } from "../../components";
-import { useGroupItem, useLazy, useProps, useSsrBoot } from "../../composables";
+import {
+  useGroupItem,
+  useLazy,
+  useProps,
+  useSsrBoot,
+  useStyle
+} from "../../composables";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
 import { vTouch } from "../../directives";
 import { convertToUnit } from "../../utils";
@@ -115,13 +121,24 @@ const windowItemClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(windowItemStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss">
 	.origam-window-item {
+		flex: 1 1 auto;
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+
 		&--x-transition-enter-active,
 		&--x-transition-leave-active,
 		&--x-reverse-transition-enter-active,
@@ -130,7 +147,9 @@ defineExpose({
 		&--y-transition-leave-active,
 		&--y-reverse-transition-enter-active,
 		&--y-reverse-transition-leave-active {
-			transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+			transition:
+				var(--origam-window-item---x-transition-duration, 0.3s)
+				var(--origam-window-item---x-transition-easing, cubic-bezier(0.25, 0.8, 0.5, 1));
 		}
 
 		&--x-transition-leave-from,
@@ -144,6 +163,7 @@ defineExpose({
 			position: absolute !important;
 			top: 0;
 			width: 100%;
+			height: 100%;
 		}
 
 		&--x-transition-enter-from {
@@ -179,9 +199,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/index.cjs

@@ -91,6 +91,17 @@ Object.keys(_Btn).forEach(function (key) {
     }
   });
 });
+var _ItemGroup = require("./ItemGroup/index.cjs");
+Object.keys(_ItemGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ItemGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ItemGroup[key];
+    }
+  });
+});
 var _Card = require("./Card/index.cjs");
 Object.keys(_Card).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -157,6 +168,17 @@ Object.keys(_ColorPickerField).forEach(function (key) {
     }
   });
 });
+var _ConfirmWrapper = require("./ConfirmWrapper/index.cjs");
+Object.keys(_ConfirmWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ConfirmWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ConfirmWrapper[key];
+    }
+  });
+});
 var _ContextualMenu = require("./ContextualMenu/index.cjs");
 Object.keys(_ContextualMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -223,6 +245,17 @@ Object.keys(_DatePickerField).forEach(function (key) {
     }
   });
 });
+var _DefaultsProvider = require("./DefaultsProvider/index.cjs");
+Object.keys(_DefaultsProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DefaultsProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DefaultsProvider[key];
+    }
+  });
+});
 var _Dialog = require("./Dialog/index.cjs");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -311,17 +344,6 @@ Object.keys(_Grids).forEach(function (key) {
     }
   });
 });
-var _Highlight = require("./Highlight/index.cjs");
-Object.keys(_Highlight).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Highlight[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Highlight[key];
-    }
-  });
-});
 var _Icon = require("./Icon/index.cjs");
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -707,6 +729,17 @@ Object.keys(_TextField).forEach(function (key) {
     }
   });
 });
+var _ThemeProvider = require("./ThemeProvider/index.cjs");
+Object.keys(_ThemeProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ThemeProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ThemeProvider[key];
+    }
+  });
+});
 var _Title = require("./Title/index.cjs");
 Object.keys(_Title).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -761,4 +794,59 @@ Object.keys(_Window).forEach(function (key) {
       return _Window[key];
     }
   });
+});
+var _Skeleton = require("./Skeleton/index.cjs");
+Object.keys(_Skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Skeleton[key];
+    }
+  });
+});
+var _Kbd = require("./Kbd/index.cjs");
+Object.keys(_Kbd).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Kbd[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Kbd[key];
+    }
+  });
+});
+var _Stepper = require("./Stepper/index.cjs");
+Object.keys(_Stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Stepper[key];
+    }
+  });
+});
+var _Timeline = require("./Timeline/index.cjs");
+Object.keys(_Timeline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Timeline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Timeline[key];
+    }
+  });
+});
+var _Treeview = require("./Treeview/index.cjs");
+Object.keys(_Treeview).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Treeview[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Treeview[key];
+    }
+  });
 });

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

@@ -6,18 +6,21 @@ export * from './Badge';
 export * from './BottomNav';
 export * from './Breadcrumb';
 export * from './Btn';
+export * from './ItemGroup';
 export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
 export * from './ColorPicker';
 export * from './ColorPickerField';
+export * from './ConfirmWrapper';
 export * from './ContextualMenu';
 export * from './Counter';
 export * from './DataList';
 export * from './DataTable';
 export * from './DatePicker';
 export * from './DatePickerField';
+export * from './DefaultsProvider';
 export * from './Dialog';
 export * from './Divider';
 export * from './Drawer';
@@ -26,7 +29,6 @@ export * from './Field';
 export * from './FileField';
 export * from './Form';
 export * from './Grids';
-export * from './Highlight';
 export * from './Icon';
 export * from './Img';
 export * from './InfiniteScroll';
@@ -62,8 +64,14 @@ export * from './SystemBar';
 export * from './Table';
 export * from './TextareaField';
 export * from './TextField';
+export * from './ThemeProvider';
 export * from './Title';
 export * from './Toolbar';
 export * from './Tooltip';
 export * from './VirtualScroll';
 export * from './Window';
+export * from './Skeleton';
+export * from './Kbd';
+export * from './Stepper';
+export * from './Timeline';
+export * from './Treeview';

package/dist/src/components/index.js

@@ -6,18 +6,21 @@ export * from "./Badge/index.js";
 export * from "./BottomNav/index.js";
 export * from "./Breadcrumb/index.js";
 export * from "./Btn/index.js";
+export * from "./ItemGroup/index.js";
 export * from "./Card/index.js";
 export * from "./Carousel/index.js";
 export * from "./Checkbox/index.js";
 export * from "./Chip/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./ColorPickerField/index.js";
+export * from "./ConfirmWrapper/index.js";
 export * from "./ContextualMenu/index.js";
 export * from "./Counter/index.js";
 export * from "./DataList/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DatePickerField/index.js";
+export * from "./DefaultsProvider/index.js";
 export * from "./Dialog/index.js";
 export * from "./Divider/index.js";
 export * from "./Drawer/index.js";
@@ -26,7 +29,6 @@ export * from "./Field/index.js";
 export * from "./FileField/index.js";
 export * from "./Form/index.js";
 export * from "./Grids/index.js";
-export * from "./Highlight/index.js";
 export * from "./Icon/index.js";
 export * from "./Img/index.js";
 export * from "./InfiniteScroll/index.js";
@@ -62,8 +64,14 @@ export * from "./SystemBar/index.js";
 export * from "./Table/index.js";
 export * from "./TextareaField/index.js";
 export * from "./TextField/index.js";
+export * from "./ThemeProvider/index.js";
 export * from "./Title/index.js";
 export * from "./Toolbar/index.js";
 export * from "./Tooltip/index.js";
 export * from "./VirtualScroll/index.js";
 export * from "./Window/index.js";
+export * from "./Skeleton/index.js";
+export * from "./Kbd/index.js";
+export * from "./Stepper/index.js";
+export * from "./Timeline/index.js";
+export * from "./Treeview/index.js";

package/dist/src/composables/Commons/activator.composable.d.ts

@@ -1,5 +1,8 @@
 import { Ref } from 'vue';
 import type { IActivatorProps } from '../../interfaces';
+/*********************************************************
+ * useActivator
+ ********************************************************/
 export declare function useActivator(props: IActivatorProps, { isActive, isTop }: {
     isActive: Ref<boolean>;
     isTop: Ref<boolean>;

package/dist/src/composables/Commons/active.composable.cjs

@@ -8,7 +8,24 @@ var _vue = require("vue");
 var _composables = require("../../composables/index.cjs");
 var _utils = require("../../utils/index.cjs");
 function useActive(props, prop = "active", name = (0, _utils.getCurrentInstanceName)()) {
-  const isActive = (0, _composables.useVModel)(props, prop);
+  const vmodel = (0, _composables.useVModel)(props, prop);
+  const activeState = (0, _vue.computed)(() => {
+    const v = props[prop];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = (0, _vue.computed)(() => {
+    const v = props[prop];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = (0, _vue.ref)(false);
+  const isActive = (0, _vue.computed)(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
   const activeClasses = (0, _vue.computed)(() => {
     const classes = [];
     if (isActive.value) {
@@ -20,10 +37,16 @@ function useActive(props, prop = "active", name = (0, _utils.getCurrentInstanceN
     return classes;
   });
   const onActive = () => {
-    isActive.value = !isActive.value;
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isActive.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
   };
   return {
     isActive,
+    activeState,
     activeClasses,
     onActive
   };

package/dist/src/composables/Commons/active.composable.d.ts

@@ -1,6 +1,41 @@
+import type { ComputedRef } from "vue";
 import { IActiveProps } from "../../interfaces";
+/**
+ * Track the active (pressed / selected) state of the host element AND
+ * expose any style override the consumer attached to the `active` prop.
+ *
+ * `props.active` (or `props[prop]` when the caller binds a different
+ * key like `modelValue`) accepts three shapes — mirrors `useHover`:
+ *
+ *   • `undefined` / `false` →
+ *       isActive    : driven by `onActive()` toggle / v-model.
+ *       activeState : undefined.
+ *
+ *   • `true` →
+ *       isActive    : FORCED to `true`. (vmodel sync still works for
+ *                     downstream emits, but `isActive` won't drop below
+ *                     true while the prop is `true`.)
+ *       activeState : undefined.
+ *
+ *   • `IActiveState` (object: `{ color?, bgColor?, border?, rounded?,
+ *     elevation?, padding?, margin?, gap?, enabled? }`) →
+ *       isActive    : reactive to `onActive()` (UNLESS `enabled: true`
+ *                     is set, which forces it on).
+ *       activeState : the object itself — consumed by `useStateEffect`.
+ *
+ * The `prop` argument lets callers bind a non-`active` key (e.g. Badge
+ * and BottomNav use `'modelValue'`); the legacy v-model contract is
+ * preserved on that key when it's a plain boolean.
+ *
+ * `activeClass` (legacy prop) still appends an extra class name when
+ * the state is engaged — kept for compat with parent customisation.
+ */
+/*********************************************************
+ * useActive
+ ********************************************************/
 export declare function useActive(props: IActiveProps & Record<string, any>, prop?: string, name?: string): {
-    isActive: import("../../types").TVModel<IActiveProps & Record<string, any>, string, any>;
-    activeClasses: import("vue").ComputedRef<string[]>;
+    isActive: ComputedRef<boolean>;
+    activeState: ComputedRef<import("../../interfaces").IStateEffectConfig | undefined>;
+    activeClasses: ComputedRef<string[]>;
     onActive: () => void;
 };

package/dist/src/composables/Commons/active.composable.js

@@ -1,8 +1,25 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useVModel } from "../../composables/index.js";
 import { getCurrentInstanceName } from "../../utils/index.js";
 export function useActive(props, prop = "active", name = getCurrentInstanceName()) {
-  const isActive = useVModel(props, prop);
+  const vmodel = useVModel(props, prop);
+  const activeState = computed(() => {
+    const v = props[prop];
+    return v && typeof v === "object" ? v : void 0;
+  });
+  const forced = computed(() => {
+    const v = props[prop];
+    if (v === true) return true;
+    if (v && typeof v === "object") return v.enabled === true;
+    return false;
+  });
+  const internalToggle = ref(false);
+  const isActive = computed(() => {
+    if (forced.value) return true;
+    const v = vmodel.value;
+    if (typeof v === "boolean") return v;
+    return internalToggle.value;
+  });
   const activeClasses = computed(() => {
     const classes = [];
     if (isActive.value) {
@@ -14,10 +31,16 @@ export function useActive(props, prop = "active", name = getCurrentInstanceName(
     return classes;
   });
   const onActive = () => {
-    isActive.value = !isActive.value;
+    const v = vmodel.value;
+    if (typeof v === "boolean" || v === void 0) {
+      vmodel.value = !isActive.value;
+    } else {
+      internalToggle.value = !internalToggle.value;
+    }
   };
   return {
     isActive,
+    activeState,
     activeClasses,
     onActive
   };

package/dist/src/composables/Commons/adjacent.composable.cjs

@@ -11,13 +11,15 @@ function useAdjacent(props, prependIcon, appendIcon) {
   const vm = (0, _utils.getCurrentInstance)("OrigamAdjacent");
   const slots = (0, _vue.useSlots)();
   const hasPrependMedia = (0, _vue.computed)(() => {
-    return !!(props.prependAvatar || prependIcon.value);
+    const icon = prependIcon ? prependIcon.value : props.prependIcon;
+    return !!(props.prependAvatar || icon);
   });
   const hasPrepend = (0, _vue.computed)(() => {
     return !!slots.prepend || hasPrependMedia.value;
   });
   const hasAppendMedia = (0, _vue.computed)(() => {
-    return !!(props.appendAvatar || appendIcon.value);
+    const icon = appendIcon ? appendIcon.value : props.appendIcon;
+    return !!(props.appendAvatar || icon);
   });
   const hasAppend = (0, _vue.computed)(() => {
     return !!slots.append || hasAppendMedia.value;

package/dist/src/composables/Commons/adjacent.composable.d.ts

@@ -1,6 +1,9 @@
 import { ComputedRef, Ref } from 'vue';
 import type { IAdjacentInnerProps, IAdjacentProps } from '../../interfaces';
-export declare function useAdjacent(props: IAdjacentProps, prependIcon: Ref | ComputedRef, appendIcon: Ref | ComputedRef): {
+/*********************************************************
+ * useAdjacent
+ ********************************************************/
+export declare function useAdjacent(props: IAdjacentProps, prependIcon?: Ref | ComputedRef, appendIcon?: Ref | ComputedRef): {
     hasPrependMedia: ComputedRef<boolean>;
     hasPrepend: ComputedRef<boolean>;
     hasAppendMedia: ComputedRef<boolean>;
@@ -8,6 +11,9 @@ export declare function useAdjacent(props: IAdjacentProps, prependIcon: Ref | Co
     onClickPrepend: (e: Event) => void;
     onClickAppend: (e: Event) => void;
 };
+/*********************************************************
+ * useAdjacentInner
+ ********************************************************/
 export declare function useAdjacentInner(props: IAdjacentInnerProps): {
     hasPrependInnerMedia: ComputedRef<boolean>;
     hasPrependInner: ComputedRef<boolean | import("vue").Slot<any>>;

package/dist/src/composables/Commons/adjacent.composable.js

@@ -4,13 +4,15 @@ export function useAdjacent(props, prependIcon, appendIcon) {
   const vm = getCurrentInstance("OrigamAdjacent");
   const slots = useSlots();
   const hasPrependMedia = computed(() => {
-    return !!(props.prependAvatar || prependIcon.value);
+    const icon = prependIcon ? prependIcon.value : props.prependIcon;
+    return !!(props.prependAvatar || icon);
   });
   const hasPrepend = computed(() => {
     return !!slots.prepend || hasPrependMedia.value;
   });
   const hasAppendMedia = computed(() => {
-    return !!(props.appendAvatar || appendIcon.value);
+    const icon = appendIcon ? appendIcon.value : props.appendIcon;
+    return !!(props.appendAvatar || icon);
   });
   const hasAppend = computed(() => {
     return !!slots.append || hasAppendMedia.value;

package/dist/src/composables/Commons/audio.composable.d.ts

@@ -1,4 +1,7 @@
 import type { IAudioProps } from '../../interfaces';
+/*********************************************************
+ * useAudio
+ ********************************************************/
 export declare function useAudio(props: IAudioProps): {
     audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
     analyser: import("vue").Ref<{

package/dist/src/composables/Commons/border.composable.cjs

@@ -7,6 +7,10 @@ exports.useBorder = useBorder;
 var _vue = require("vue");
 var _consts = require("../../consts/index.cjs");
 var _utils = require("../../utils/index.cjs");
+const UTILITY_BORDER = /* @__PURE__ */new Set(["none", "thin", "thick"]);
+function isUtilityBorder(value) {
+  return typeof value === "string" && UTILITY_BORDER.has(value);
+}
 function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
   const borderClasses = (0, _vue.computed)(() => {
     const border = (0, _vue.isRef)(props) ? props.value : props.border;
@@ -16,6 +20,11 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       if (_consts.DIRECTION_ARRAY.includes(border) || Array.isArray(border) && border.some(bord => _consts.DIRECTION_ARRAY.includes(bord))) {
         classes.push(`${name}--border-${border}`);
       }
+      if (isUtilityBorder(border)) {
+        classes.push(`origam--border-${border}`);
+      } else if (border === true) {
+        classes.push("origam--border-thin");
+      }
     }
     return classes;
   });

package/dist/src/composables/Commons/border.composable.d.ts

@@ -1,6 +1,9 @@
 import { Ref } from 'vue';
 import type { IBorderProps } from '../../interfaces';
 import { TDirectionBoth } from "../../types";
+/*********************************************************
+ * useBorder
+ ********************************************************/
 export declare function useBorder(props: IBorderProps | Ref<boolean | number | string | TDirectionBoth | Array<TDirectionBoth> | null | undefined>, name?: string): {
     borderClasses: import("vue").ComputedRef<string[]>;
     borderStyles: import("vue").ComputedRef<string[]>;