origam 0.3.10 → 2.3.0

package/dist/src/components/Sheet/OrigamSheet.vue

@@ -1,28 +1,51 @@
 <template>
 	<component
 			:is="tag"
+			:ref="rootEl"
 			:class="sheetClasses"
 			:style="sheetStyles"
+			@click="onActive"
+			@mouseenter="onMouseenter"
+			@mouseleave="onMouseleave"
 	>
+		<div
+				v-if="showHandle"
+				ref="handleEl"
+				class="origam-sheet__handle"
+				role="separator"
+				aria-orientation="horizontal"
+				aria-label="Drag handle"
+				data-cy="sheet-bottom-handle"
+		>
+			<span class="origam-sheet__handle-pill"/>
+		</div>
+
 		<slot name="default"/>
 	</component>
 </template>
 
 <script setup>
-import { computed, StyleValue, toRef } from "vue";
+import { computed, ref, StyleValue, toRef, watch } from "vue";
 import {
-  useBorder,
+  useActive,
   useBothColor,
   useDimension,
-  useElevation,
+  useHover,
   useLocation,
-  useMargin,
-  usePadding,
   usePosition,
   useProps,
-  useRounded
+  useSheetSwipe,
+  useStateEffect,
+  useStyle
 } from "../../composables";
 const props = defineProps({
+  side: { type: null, required: false, default: void 0 },
+  swipeable: { type: Boolean, required: false, default: false },
+  snapPoints: { type: Array, required: false },
+  defaultSnap: { type: [String, Object], required: false, default: "half" },
+  open: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  persistent: { type: Boolean, required: false, default: false },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -42,11 +65,6 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, 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 },
@@ -56,7 +74,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: 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 },
@@ -73,44 +91,141 @@ 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 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
+const emit = defineEmits(["update:snap", "update:open"]);
 const { filterProps } = useProps(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { borderClasses, borderStyles } = useBorder(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { isHover, hoverState, hoverClasses, onMouseenter, onMouseleave } = useHover(props);
+const { isActive, activeState, activeClasses, onActive } = useActive(props);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const { dimensionStyles } = useDimension(props);
-const { elevationClasses } = useElevation(props);
 const { locationStyles } = useLocation(props);
 const { positionClasses } = usePosition(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
+const rootEl = ref(null);
+const handleEl = ref(null);
+const DEFAULT_SNAP_POINTS = [
+  { id: "closed", height: 0 },
+  { id: "peek", height: "120px" },
+  { id: "half", height: "50vh" },
+  { id: "full", height: "90vh" }
+];
+const swipeEnabled = computed(() => props.swipeable && props.side === "bottom");
+const showHandle = computed(() => swipeEnabled.value);
+const snapPointsRef = computed(() => props.snapPoints ?? DEFAULT_SNAP_POINTS);
+const defaultSnapRef = computed(() => props.defaultSnap ?? "half");
+const disabledRef = computed(() => props.disabled || !swipeEnabled.value);
+const persistentRef = computed(() => !!props.persistent);
+const {
+  currentSnap,
+  dragOffset,
+  isDragging,
+  currentSnapHeight,
+  snapTo
+} = useSheetSwipe({
+  el: rootEl,
+  handle: handleEl,
+  snapPoints: snapPointsRef,
+  defaultSnap: defaultSnapRef,
+  disabled: disabledRef,
+  persistent: persistentRef
+});
+watch(() => props.open, (next) => {
+  if (next === void 0 || !swipeEnabled.value) return;
+  if (next === false && currentSnap.value !== "closed") {
+    snapTo("closed");
+  } else if (next === true && currentSnap.value === "closed") {
+    snapTo(defaultSnapRef.value);
+  }
+}, { immediate: true });
+watch(currentSnap, (next, prev) => {
+  emit("update:snap", next);
+  const wasClosed = prev === "closed";
+  const isClosed = next === "closed";
+  if (wasClosed !== isClosed) {
+    emit("update:open", !isClosed);
+  }
+});
+const swipeStyles = computed(() => {
+  if (!swipeEnabled.value) return {};
+  const maxHeight = Math.max(...snapPointsRef.value.map((s) => {
+    const h = s.height;
+    if (typeof h === "number") return h;
+    const m = String(h).match(/^([\d.]+)(px|vh|vw|%|rem|em)?$/i);
+    if (!m) return 0;
+    const num = parseFloat(m[1]);
+    const unit = (m[2] ?? "px").toLowerCase();
+    if (typeof window === "undefined") return num;
+    if (unit === "vh" || unit === "%") return window.innerHeight * num / 100;
+    if (unit === "vw") return window.innerWidth * num / 100;
+    return num;
+  }));
+  const liveHeight = isDragging.value ? Math.min(maxHeight, Math.max(0, currentSnapHeight.value + dragOffset.value)) : currentSnapHeight.value;
+  return {
+    "--origam-sheet---swipe-height": `${liveHeight}px`,
+    "transition": isDragging.value ? "none" : "height 200ms ease"
+  };
+});
 const sheetStyles = computed(() => {
   return [
     dimensionStyles.value,
     locationStyles.value,
     roundedStyles.value,
+    elevationStyles.value,
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
     colorStyles.value,
+    swipeStyles.value,
     props.style
   ];
 });
 const sheetClasses = computed(() => {
   return [
     "origam-sheet",
+    colorClasses.value,
     elevationClasses.value,
     positionClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
     roundedClasses.value,
+    hoverClasses.value,
+    activeClasses.value,
+    swipeEnabled.value && "origam-sheet--swipeable",
+    swipeEnabled.value && `origam-sheet--side-${props.side}`,
+    swipeEnabled.value && `origam-sheet--snap-${currentSnap.value}`,
+    isDragging.value && "origam-sheet--dragging",
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(sheetStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  // Imperative gesture handles for advanced consumers (test hooks,
+  // programmatic open/close from Dialog wrappers, …).
+  snapTo,
+  currentSnap,
+  isDragging,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -122,7 +237,10 @@ defineExpose({
 
 		border-color: var(--origam-sheet---border-color);
 		border-style: var(--origam-sheet---border-style);
-		border-width: var(--origam-sheet---border-width);
+		border-top-width: var(--origam-sheet---border-top-width, var(--origam-sheet---border-width, 0));
+		border-right-width: var(--origam-sheet---border-right-width, var(--origam-sheet---border-width, 0));
+		border-bottom-width: var(--origam-sheet---border-bottom-width, var(--origam-sheet---border-width, 0));
+		border-left-width: var(--origam-sheet---border-left-width, var(--origam-sheet---border-width, 0));
 		border-radius: var(--origam-sheet---border-radius);
 
 		width: var(--origam-sheet---width);
@@ -147,12 +265,53 @@ defineExpose({
 		color: var(--origam-sheet---color);
 
 		&--border {
-			border-width: var(--origam-sheet--border---border-width);
+			--origam-sheet---border-top-width: var(--origam-border__width---thin, 1px);
+			--origam-sheet---border-right-width: var(--origam-border__width---thin, 1px);
+			--origam-sheet---border-bottom-width: var(--origam-border__width---thin, 1px);
+			--origam-sheet---border-left-width: var(--origam-border__width---thin, 1px);
 			box-shadow: var(--origam-sheet--border---box-shadow);
 		}
 
 		&--rounded {
-			border-radius: var(--origam-sheet--rounded---border-radius);
+			--origam-sheet---border-radius: var(--origam-sheet--rounded---border-radius, var(--origam-radius---2xl, 24px));
+		}
+
+		&--rounded-x-small {
+			--origam-sheet---border-radius: var(--origam-radius---xs, 2px);
+		}
+
+		&--rounded-small {
+			--origam-sheet---border-radius: var(--origam-radius---sm, 4px);
+		}
+
+		&--rounded-default {
+			--origam-sheet---border-radius: var(--origam-radius---md, 8px);
+		}
+
+		&--rounded-medium {
+			--origam-sheet---border-radius: var(--origam-radius---lg, 12px);
+		}
+
+		&--rounded-large {
+			--origam-sheet---border-radius: var(--origam-radius---xl, 16px);
+		}
+
+		&--rounded-x-large {
+			--origam-sheet---border-radius: var(--origam-radius---2xl, 24px);
+		}
+
+		&--rounded-shaped {
+			border-start-start-radius: var(--origam-sheet---border-radius-rounded, 16px);
+			border-start-end-radius: 0;
+			border-end-start-radius: 0;
+			border-end-end-radius: var(--origam-sheet---border-radius-rounded, 16px);
+		}
+
+		&--rounded-shaped-invert {
+			border-start-start-radius: 0;
+			border-start-end-radius: var(--origam-sheet---border-radius-rounded, 16px);
+			border-end-start-radius: var(--origam-sheet---border-radius-rounded, 16px);
+			border-end-end-radius: 0;
 		}
 
 		&--absolute {
@@ -170,57 +329,50 @@ defineExpose({
 		&--sticky {
 			--origam-sheet---position: sticky;
 		}
-	}
-</style>
 
-<style>
-	:root {
-		--origam-sheet---position: relative;
-		--origam-sheet---display: block;
-		--origam-sheet---box-sizing: border-box;
-
-		--origam-sheet---border-top-width: 0;
-		--origam-sheet---border-left-width: 0;
-		--origam-sheet---border-bottom-width: 0;
-		--origam-sheet---border-right-width: 0;
-		--origam-sheet---border-width: var(--origam-sheet---border-top-width) var(--origam-sheet---border-left-width) var(--origam-sheet---border-bottom-width) var(--origam-sheet---border-right-width);
-		--origam-sheet---border-color: rgba(0, 0, 0, 0.87);
-		--origam-sheet---border-style: solid;
-
-		--origam-sheet---border-start-start-radius: 0;
-		--origam-sheet---border-start-end-radius: 0;
-		--origam-sheet---border-end-start-radius: 0;
-		--origam-sheet---border-end-end-radius: 0;
-		--origam-sheet---border-radius: var(--origam-sheet---border-start-start-radius) var(--origam-sheet---border-start-end-radius) var(--origam-sheet---border-end-start-radius) var(--origam-sheet---border-end-end-radius);
-
-		--origam-sheet---color: rgba(0, 0, 0, 0.87);
-		--origam-sheet---box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-		--origam-sheet---background: rgb(255, 255, 255);
-
-		--origam-sheet---width: 100%;
-		--origam-sheet---max-width: 100%;
-		--origam-sheet---min-width: 0;
-		--origam-sheet---height: 100%;
-		--origam-sheet---max-height: 100%;
-		--origam-sheet---min-height: 0;
-
-		--origam-sheet---padding-block-start: 0;
-		--origam-sheet---padding-block-end: 0;
-		--origam-sheet---padding-inline-start: 0;
-		--origam-sheet---padding-inline-end: 0;
-
-		--origam-sheet---margin-block-start: 0;
-		--origam-sheet---margin-block-end: 0;
-		--origam-sheet---margin-inline-end: 0;
-		--origam-sheet---margin-inline-start: 0;
-
-		--origam-sheet--border---border-top-width: thin;
-		--origam-sheet--border---border-left-width: thin;
-		--origam-sheet--border---border-bottom-width: thin;
-		--origam-sheet--border---border-right-width: thin;
-		--origam-sheet--border---border-width: var(--origam-sheet---border-top-width) var(--origam-sheet---border-left-width) var(--origam-sheet---border-bottom-width) var(--origam-sheet---border-right-width);
-		--origam-sheet--border---box-shadow: none;
-
-		--origam-sheet--rounded---border-radius: 4px;
+		&--swipeable {
+			--origam-sheet---position: absolute;
+			--origam-sheet---width: 100%;
+			--origam-sheet---max-width: 100%;
+			--origam-sheet---height: var(--origam-sheet---swipe-height, 0px);
+			--origam-sheet---max-height: 100%;
+			--origam-sheet---border-radius: var(--origam-sheet__swipeable---border-radius, var(--origam-radius---2xl, 24px));
+			border-end-start-radius: 0;
+			border-end-end-radius: 0;
+			overflow: hidden;
+		}
+
+		&--side-bottom {
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+
+		&--dragging {
+			transition: none !important;
+		}
+
+		&__handle {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			padding-block: var(--origam-sheet__handle---margin-block, 8px);
+			cursor: grab;
+			touch-action: none;
+			user-select: none;
+		}
+
+		&--dragging &__handle {
+			cursor: grabbing;
+		}
+
+		&__handle-pill {
+			display: block;
+			width: var(--origam-sheet__handle---width, 32px);
+			height: var(--origam-sheet__handle---height, 4px);
+			background-color: var(--origam-sheet__handle---color, var(--origam-color__border---subtle));
+			border-radius: var(--origam-sheet__handle---border-radius, var(--origam-radius---full, 9999px));
+		}
 	}
 </style>

package/dist/src/components/Skeleton/OrigamSkeleton.vue

@@ -0,0 +1,269 @@
+<template>
+	<template v-if="!loading">
+		<slot/>
+	</template>
+
+	<div
+			v-else-if="variant === 'list-item'"
+			:class="skeletonContainerClasses"
+			:style="skeletonContainerStyles"
+			aria-busy="true"
+			aria-label="Loading"
+			role="status"
+	>
+		<div
+				:class="skeletonCircularClasses"
+				:style="circularStyle"
+		/>
+		<div class="origam-skeleton__lines">
+			<div :class="skeletonTextClasses"/>
+			<div :class="skeletonTextClasses"/>
+		</div>
+	</div>
+
+	<div
+			v-else-if="variant === 'card'"
+			:class="skeletonContainerClasses"
+			:style="skeletonContainerStyles"
+			aria-busy="true"
+			aria-label="Loading"
+			role="status"
+	>
+		<div :class="skeletonRectangularClasses"/>
+		<div :class="skeletonTextClasses"/>
+		<div :class="skeletonTextClasses"/>
+		<div :class="skeletonTextClasses"/>
+	</div>
+
+	<div
+			v-else
+			:class="skeletonClasses"
+			:style="skeletonStyles"
+			aria-busy="true"
+			aria-label="Loading"
+			role="status"
+	/>
+</template>
+
+<script setup>
+import {
+  useBothColor,
+  useProps,
+  useRounded,
+  useSize,
+  useStyle
+} from "../../composables";
+import { convertToUnit } from "../../utils";
+import { computed, toRef } from "vue";
+const props = defineProps({
+  variant: { type: String, required: false, default: "rectangular" },
+  width: { type: [String, Number], required: false },
+  height: { type: [String, Number], required: false },
+  loading: { type: Boolean, required: false, default: true },
+  pulse: { type: Boolean, required: false, default: true },
+  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 },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  size: { type: null, 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 { roundedClasses, roundedStyles } = useRounded(props);
+const { sizeClasses, sizeStyles } = useSize(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const resolvedWidth = computed(() => {
+  if (props.variant === "text" && props.width == null) return "100%";
+  return props.width != null ? convertToUnit(props.width) : void 0;
+});
+const resolvedHeight = computed(() => {
+  if (props.variant === "text") {
+    return props.height != null ? convertToUnit(props.height) : "var(--origam-skeleton---text-height)";
+  }
+  if (props.variant === "circular") {
+    return props.width != null ? convertToUnit(props.width) : void 0;
+  }
+  return props.height != null ? convertToUnit(props.height) : void 0;
+});
+const circularSize = computed(() => props.width != null ? convertToUnit(props.width) : "36px");
+const circularStyle = computed(() => ({
+  width: circularSize.value,
+  height: circularSize.value
+}));
+const skeletonCircularClasses = computed(() => [
+  "origam-skeleton",
+  { "origam-skeleton--pulse": props.pulse },
+  "origam-skeleton--circular"
+]);
+const skeletonTextClasses = computed(() => [
+  "origam-skeleton",
+  { "origam-skeleton--pulse": props.pulse },
+  "origam-skeleton--text"
+]);
+const skeletonRectangularClasses = computed(() => [
+  "origam-skeleton",
+  { "origam-skeleton--pulse": props.pulse },
+  "origam-skeleton--rectangular"
+]);
+const skeletonContainerClasses = computed(() => [
+  "origam-skeleton-wrapper",
+  `origam-skeleton-wrapper--${props.variant}`,
+  props.class
+]);
+const skeletonContainerStyles = computed(() => [
+  props.style
+]);
+const skeletonClasses = computed(() => [
+  "origam-skeleton",
+  `origam-skeleton--${props.variant}`,
+  { "origam-skeleton--pulse": props.pulse },
+  colorClasses.value,
+  roundedClasses.value,
+  sizeClasses.value,
+  props.class
+]);
+const skeletonStyles = computed(() => {
+  const styles = {};
+  if (resolvedWidth.value) styles["width"] = resolvedWidth.value;
+  if (resolvedHeight.value) styles["height"] = resolvedHeight.value;
+  return [styles, colorStyles.value, roundedStyles.value, sizeStyles.value, props.style];
+});
+const { id, css, load, isLoaded, unload } = useStyle(skeletonStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	@keyframes origam-skeleton-wave {
+		0%   { background-position: -200% 0 }
+		100% { background-position: 200% 0 }
+	}
+
+	@keyframes origam-skeleton-spin {
+		from { transform: rotate(0deg) }
+		to   { transform: rotate(360deg) }
+	}
+
+	.origam-skeleton {
+		display: block;
+		background-color: var(--origam-skeleton---background-color);
+		border-radius: var(--origam-skeleton---border-radius);
+		width: 100%;
+		height: var(--origam-skeleton---text-height);
+
+		&--text {
+			height: var(--origam-skeleton---text-height);
+			border-radius: var(--origam-skeleton---border-radius);
+		}
+
+		&--rectangular {
+			border-radius: var(--origam-skeleton---border-radius);
+			height: 100%;
+		}
+
+		&--circular {
+			border-radius: var(--origam-skeleton---border-radius-circular, 50%);
+			flex-shrink: 0;
+		}
+
+		&--card,
+		&--list-item {
+			display: none;
+		}
+
+		&--text.origam-skeleton--pulse,
+		&--rectangular.origam-skeleton--pulse {
+			background-image: linear-gradient(
+				90deg,
+				transparent 0%,
+				var(
+					--origam-skeleton---wave-color,
+					color-mix(in srgb, var(--origam-skeleton---background-color) 50%, white)
+				) 50%,
+				transparent 100%
+			);
+			background-repeat: no-repeat;
+			background-size: 200% 100%;
+			animation: origam-skeleton-wave var(--origam-skeleton---animation-duration, 1500ms) linear infinite;
+		}
+
+		&--circular.origam-skeleton--pulse {
+			background:
+				conic-gradient(
+					from 0deg,
+					transparent 0deg,
+					var(
+						--origam-skeleton---wave-color,
+						color-mix(in srgb, var(--origam-skeleton---background-color) 50%, white)
+					) 90deg,
+					var(--origam-skeleton---background-color) 270deg
+				);
+			animation: origam-skeleton-spin var(--origam-skeleton---animation-duration, 1500ms) linear infinite;
+		}
+	}
+
+	.origam-skeleton-wrapper {
+		&--list-item {
+			display: flex;
+			gap: var(--origam-skeleton---gap, 12px);
+			align-items: center;
+
+			> .origam-skeleton--circular {
+				flex-shrink: 0;
+			}
+
+			> .origam-skeleton__lines {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				gap: 6px;
+
+				> .origam-skeleton:nth-child(1) {
+					width: 60%;
+				}
+
+				> .origam-skeleton:nth-child(2) {
+					width: 40%;
+					opacity: 0.7;
+				}
+			}
+		}
+
+		&--card {
+			display: flex;
+			flex-direction: column;
+
+			> .origam-skeleton:nth-child(1) {
+				height: 80px;
+				margin-bottom: 10px;
+			}
+
+			> .origam-skeleton:nth-child(2) {
+				width: 70%;
+				margin-bottom: 6px;
+			}
+
+			> .origam-skeleton:nth-child(3) {
+				width: 90%;
+				margin-bottom: 4px;
+				opacity: 0.7;
+			}
+
+			> .origam-skeleton:nth-child(4) {
+				width: 50%;
+				opacity: 0.7;
+			}
+		}
+	}
+</style>

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

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

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

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

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

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