@streamscloud/kit 0.0.1-1770823200886 → 0.0.1-1770839905472

package/dist/ui/loading/cmp.loading.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">import { onMount } from 'svelte';
+let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
+let visible = $state(false);
+onMount(() => {
+    setTimeout(() => (visible = true), timeout);
+});
+</script>
+
+{#if visible && blocking}
+  <div class="loading-ring-overlay" class:loading-ring-overlay--fixed={positionFixedCenter}></div>
+{/if}
+
+<div
+  class="la-ball-clip-rotate"
+  class:la-ball-clip-rotate--absolute-center={positionAbsoluteCenter}
+  class:la-ball-clip-rotate--fixed-center={positionFixedCenter}
+  class:la-ball-clip-rotate--visible={visible}>
+  <div class="la-ball-clip-rotate__spin"></div>
+</div>
+
+<style>.loading-ring-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+.loading-ring-overlay--fixed {
+  position: fixed;
+}
+
+.la-ball-clip-rotate {
+  --_loading--font-size: var(--loading--font-size, 1rem);
+  --_loading--spinner-color: var(--loading--spinner-color, light-dark(#144ab0, #5a8dec));
+  font-size: var(--_loading--font-size);
+  color: var(--_loading--spinner-color);
+  display: block;
+  opacity: 0;
+  width: 2em;
+  height: 2em;
+  z-index: 10;
+}
+.la-ball-clip-rotate--visible {
+  opacity: 1;
+}
+.la-ball-clip-rotate--absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.la-ball-clip-rotate--fixed-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.la-ball-clip-rotate__spin {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  float: none;
+  border: 0.125em solid currentColor;
+  width: 2em;
+  height: 2em;
+  background: transparent;
+  border-bottom-color: transparent;
+  border-radius: 100%;
+  animation: ball-clip-rotate 0.75s linear infinite;
+}
+
+@keyframes ball-clip-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}</style>

package/dist/ui/loading/cmp.loading.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    positionFixedCenter?: boolean;
+    positionAbsoluteCenter?: boolean;
+    blocking?: boolean;
+    timeout?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/loading/index.d.ts

@@ -0,0 +1 @@
+export { default as Loading } from './cmp.loading.svelte';

package/dist/ui/loading/index.js

@@ -0,0 +1 @@
+export { default as Loading } from './cmp.loading.svelte';

package/dist/ui/proportional-container/cmp.proportional-container.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">let { ratio, children } = $props();
+export {};
+</script>
+
+<div class="proportional-container" style:--proportional-container--ratio={ratio}>
+  <div class="proportional-container__placer">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>.proportional-container {
+  --_proportional-container--ratio: var(--proportional-container--ratio, 1);
+  --_proportional-container--height: var(--proportional-container--height, auto);
+  --_proportional-container--width: var(--proportional-container--width, 100%);
+  width: var(--_proportional-container--width);
+  max-width: 100%;
+  height: var(--_proportional-container--height);
+  max-height: 100%;
+  aspect-ratio: var(--_proportional-container--ratio);
+  position: relative;
+}
+.proportional-container__placer {
+  position: absolute;
+  inset: 0;
+}</style>

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ratio?: number | undefined;
+    children?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/proportional-container/index.d.ts

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/proportional-container/index.js

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770823200886",
+  "version": "0.0.1-1770839905472",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -88,6 +88,14 @@
       "types": "./dist/ui/image/index.d.ts",
       "svelte": "./dist/ui/image/index.js"
     },
+    "./loading": {
+      "types": "./dist/ui/loading/index.d.ts",
+      "svelte": "./dist/ui/loading/index.js"
+    },
+    "./proportional-container": {
+      "types": "./dist/ui/proportional-container/index.d.ts",
+      "svelte": "./dist/ui/proportional-container/index.js"
+    },
     "./core/media": {
       "types": "./dist/core/media/index.d.ts",
       "svelte": "./dist/core/media/index.js"