@streamscloud/kit 0.0.1-1770364570820 → 0.0.1-1770761450561

package/dist/styles/_reset.scss

@@ -0,0 +1,194 @@
+@use 'mixins';
+
+/*
+ * Modern CSS Reset
+ * Based on Josh W. Comeau's reset with custom additions
+ */
+
+$input-placeholder-color: var(--input--placeholder--color, #c1c1c1);
+
+/* 1. Use a more-intuitive box-sizing model */
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  border-width: 0;
+  border-style: solid;
+}
+
+/* 2. Remove default margin */
+*:not(dialog) {
+  margin: 0;
+}
+
+/* 3. Enable keyword animations */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+
+/* 4. Add accessible line-height and improve text rendering */
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 5. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+img {
+  border: none;
+  height: auto;
+}
+
+video {
+  outline: none;
+}
+
+/* 6. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+/* ========================================
+ * Custom additions
+ * ======================================== */
+
+/* Lists */
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  list-style: inherit;
+}
+
+/* Input & Textarea */
+input {
+  vertical-align: middle;
+  min-width: 0;
+
+  &::placeholder {
+    color: $input-placeholder-color !important;
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-background-clip: text;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
+
+textarea {
+  vertical-align: top;
+  resize: vertical;
+  @include mixins.scrollbar;
+
+  &::placeholder {
+    color: $input-placeholder-color !important;
+  }
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+/* Button */
+button,
+input[type='submit'] {
+  cursor: pointer;
+  -webkit-appearance: none;
+  background-color: transparent;
+  padding: 0;
+  text-align: left;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+/* Details/Summary */
+details {
+  summary {
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  > * {
+    box-sizing: border-box;
+  }
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: color linear 0.2s;
+}
+
+/* Table */
+table {
+  border-collapse: collapse;
+}

package/dist/styles/_responsive.scss

@@ -0,0 +1,70 @@
+@use 'sass:map';
+
+$layout-breakpoints: (
+  xs: 480px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  fhd: 1920px,
+  fhd-p: 2200px
+);
+
+@mixin container($breakpoint) {
+  /* Set 'container-type: inline-size;' to reference container*/
+
+  $val: map.get($layout-breakpoints, $breakpoint);
+  @container (width < #{$val}) {
+    @content;
+  }
+}
+
+@mixin container-custom($width) {
+  /* Set 'container-type: inline-size;' to reference container*/
+  @container (width < #{$width}) {
+    @content;
+  }
+}
+
+@mixin container-mobile() {
+  @include container(sm) {
+    @content;
+  }
+}
+
+@mixin container-tablet() {
+  @include container(md) {
+    @content;
+  }
+}
+
+@mixin container-laptop() {
+  @include container(lg) {
+    @content;
+  }
+}
+
+@mixin container-narrow-desktop() {
+  @include container(xl) {
+    @content;
+  }
+}
+
+@mixin container-desktop() {
+  @include container(xxl) {
+    @content;
+  }
+}
+
+@mixin container-fhd() {
+  @include container(fhd) {
+    @content;
+  }
+}
+
+@mixin container-fhd-p() {
+  @include container(fhd-p) {
+    @content;
+  }
+}

package/dist/styles/_row.scss

@@ -0,0 +1,81 @@
+$_desktop: 960px;
+$_tablet: 768px;
+$_grid-cols: 12;
+
+.g-row {
+  display: flex !important;
+  flex-wrap: wrap;
+}
+
+.g-row-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+[class*='g-col-'] {
+  flex: 0 1 auto;
+  max-width: 100%;
+}
+
+@for $i from 1 through $_grid-cols {
+  .g-col-#{$i} {
+    flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+    max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+  }
+}
+
+@for $i from 0 through ($_grid-cols - 1) {
+  .g-col-offset-#{$i} {
+    margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+  }
+}
+
+/* Tablets */
+@media only screen and (min-width: $_tablet) and (max-width: $_desktop - 1) {
+  [class*='g-col-'] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  [class*='g-col-offset-'] {
+    margin-left: 0;
+  }
+
+  @for $i from 1 through $_grid-cols {
+    .g-tablet-col-#{$i} {
+      flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+      max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+    }
+  }
+
+  @for $i from 0 through ($_grid-cols - 1) {
+    .g-tablet-col-offset-#{$i} {
+      margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+    }
+  }
+}
+
+/* Mobile portrait and landscape modes */
+@media only screen and (max-width: $_tablet - 1) {
+  [class*='g-tablet-col-'] {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  [class*='g-tablet-col-offset-'] {
+    margin-left: 0;
+  }
+
+  @for $i from 1 through $_grid-cols {
+    .g-mobile-col-#{$i} {
+      flex-basis: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+      max-width: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+    }
+  }
+
+  @for $i from 0 through ($_grid-cols - 1) {
+    .g-mobile-col-offset-#{$i} {
+      margin-left: calc((100 / (#{$_grid-cols} / #{$i})) * 1%);
+    }
+  }
+}

package/dist/styles/_theme.scss

@@ -0,0 +1,68 @@
+@use 'colors';
+
+:root {
+  /* Backgrounds */
+  --sc-color--bg-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
+  --sc-color--bg-button: light-dark(#{colors.$color-white}, #{colors.$color-dark-800});
+  --sc-color--bg-element: light-dark(#{colors.$color-neutral-50}, #{colors.$color-dark-800});
+  --sc-color--bg-header: light-dark(#{colors.$color-neutral-50}, #{colors.$color-black});
+  --sc-color--bg-images: #{colors.$color-neutral-300};
+  --sc-color--bg-images-secondary: #{colors.$color-neutral-400};
+  --sc-color--bg-inactive: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-100});
+  --sc-color--bg-menu-active: light-dark(#{colors.$color-primary-50}, #{colors.$color-primary-800});
+  --sc-color--bg-menu-hover: light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800});
+  --sc-color--bg-page: light-dark(#{colors.$color-white}, #{colors.$color-black});
+  --sc-color--bg-primary: light-dark(#{colors.$color-white}, #{colors.$color-dark-900});
+  --sc-color--bg-screen: light-dark(#{colors.$color-neutral-50}, #{colors.$color-black});
+  --sc-color--bg-secondary: light-dark(#{colors.$color-neutral-50}, #{colors.$color-dark-800});
+  --sc-color--bg-section: #f3f4f6;
+
+  /* Borders */
+  --sc-color--border-active: #{colors.$color-primary-400};
+  --sc-color--border-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
+  --sc-color--border-error: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
+  --sc-color--border-gray: light-dark(#{colors.$color-neutral-200}, #{colors.$color-dark-200});
+  --sc-color--border-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-700});
+  --sc-color--border-input: light-dark(#{colors.$color-neutral-300}, #{colors.$color-dark-800});
+  --sc-color--border-input-dark: light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-500});
+  --sc-color--border-light: light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-300});
+  --sc-color--border-primary: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-800});
+  --sc-color--border-secondary: light-dark(#{colors.$color-neutral-100}, #{colors.$color-dark-100});
+  --sc-color--border-white: light-dark(#{colors.$color-white}, #{colors.$color-dark-900});
+
+  /* Buttons */
+  --sc-color--button-blue: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-800});
+  --sc-color--button-blue-bg: light-dark(#{colors.$color-primary-50}, #{colors.$color-dark-300});
+  --sc-color--button-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-700});
+  --sc-color--button-green-bg: light-dark(#{colors.$color-success-50}, #{colors.$color-success-900});
+  --sc-color--button-red: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-700});
+
+  /* Badges */
+  --sc-color--badge-blue: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
+  --sc-color--badge-blue-bg: light-dark(#{colors.$color-primary-50}, #{colors.$color-primary-900});
+  --sc-color--badge-green: light-dark(#{colors.$color-success-500}, #{colors.$color-success-400});
+  --sc-color--badge-green-bg: light-dark(#{colors.$color-success-50}, #{colors.$color-success-900});
+  --sc-color--badge-red: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-400});
+  --sc-color--badge-red-bg: light-dark(#{colors.$color-destructive-50}, #{colors.$color-destructive-900});
+  --sc-color--badge-gray: light-dark(#{colors.$color-neutral-500}, #{colors.$color-neutral-400});
+  --sc-color--badge-gray-bg: light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-900});
+
+  /* Icons */
+  --sc-color--icon-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-white});
+  --sc-color--icon-menu: light-dark(#{colors.$color-neutral-800}, #{colors.$color-white});
+  --sc-color--icon-overlay: #{colors.$color-white};
+  --sc-color--icon-primary: light-dark(#{colors.$color-black}, #{colors.$color-white});
+  --sc-color--icon-secondary: #{colors.$color-neutral-400};
+  --sc-color--icon-warning: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
+
+  /* Text */
+  --sc-color--text-brand: light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400});
+  --sc-color--text-error: light-dark(#{colors.$color-destructive-500}, #{colors.$color-destructive-600});
+  --sc-color--text-inverted: #{colors.$color-white};
+  --sc-color--text-paragraph: #{colors.$color-neutral-400};
+  --sc-color--text-primary: light-dark(#{colors.$color-black}, #{colors.$color-white});
+  --sc-color--text-secondary: #{colors.$color-neutral-400};
+
+  /* Shadows */
+  --sc-color--box-shadow: light-dark(#2f2b431a, #ffffff1a);
+}

package/dist/ui/button/cmp.button.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { default as ButtonBase } from './resources/button-base.svelte';
+import { default as ButtonTheme } from './resources/button-theme.svelte';
+let { type = 'button', disabled = false, autofocus = false, variant = null, size = null, on, children } = $props();
+</script>
+
+<ButtonTheme variant={variant} size={size}>
+  <ButtonBase disabled={disabled} type={type} autofocus={autofocus} on={on}>
+    {@render children()}
+  </ButtonBase>
+</ButtonTheme>

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

@@ -0,0 +1,16 @@
+import type { ButtonSize, ButtonVariant } from './resources/types';
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/button/cmp.options-button.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">import { Icon } from '../icon';
+import { default as ButtonBase } from './resources/button-base.svelte';
+import { default as ButtonTheme } from './resources/button-theme.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { createPopper } from '@popperjs/core';
+let { type = 'button', disabled = false, autofocus = false, variant = null, size = null, optionsPosition = 'bottom-start', optionsOffset = 4, on, children, options, rightOptions } = $props();
+let leftOpened = $state(false);
+let rightOpened = $state(false);
+let leftTriggerRef = $state(null);
+let rightTriggerRef = $state(null);
+const initPopper = (node, triggerEl) => {
+    const popper = createPopper(triggerEl, node, {
+        placement: optionsPosition,
+        modifiers: [
+            {
+                name: 'offset',
+                options: { offset: [0, optionsOffset] }
+            },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: { boundary: document.body, padding: 8 }
+            }
+        ]
+    });
+    return {
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+const close = () => {
+    leftOpened = false;
+    rightOpened = false;
+};
+$effect(() => {
+    if (leftOpened || rightOpened) {
+        window.addEventListener(/*@wc-ignore*/ 'click', close);
+        return () => {
+            window.removeEventListener(/*@wc-ignore*/ 'click', close);
+        };
+    }
+});
+const toggleLeft = (e) => {
+    e.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    rightOpened = false;
+    leftOpened = !leftOpened;
+};
+const toggleRight = (e) => {
+    e.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    leftOpened = false;
+    rightOpened = !rightOpened;
+};
+</script>
+
+<ButtonTheme variant={variant} size={size}>
+  <div class="options-button" class:options-button--disabled={disabled}>
+    {#if options}
+      <div class="options-button__options">
+        <button
+          class="options-button__options-trigger"
+          type="button"
+          disabled={disabled}
+          aria-label="Options"
+          aria-expanded={leftOpened}
+          bind:this={leftTriggerRef}
+          onclick={toggleLeft}>
+          <span class="options-button__options-trigger-icon"><Icon src={IconChevronDown} /></span>
+        </button>
+        {#if leftOpened && leftTriggerRef}
+          <div class="options-button__dropdown" use:initPopper={leftTriggerRef} role="menu" tabindex="-1">
+            {@render options()}
+          </div>
+        {/if}
+      </div>
+      <span class="options-button__options-separator">&zwj;</span>
+    {/if}
+
+    <div class="options-button__trigger">
+      <ButtonBase type={type} disabled={disabled} autofocus={autofocus} on={on}>
+        {@render children()}
+      </ButtonBase>
+    </div>
+
+    {#if rightOptions}
+      <span class="options-button__options-separator">&zwj;</span>
+      <div class="options-button__options">
+        <button
+          class="options-button__options-trigger"
+          type="button"
+          disabled={disabled}
+          aria-label="Options"
+          aria-expanded={rightOpened}
+          bind:this={rightTriggerRef}
+          onclick={toggleRight}>
+          <span class="options-button__options-trigger-icon"><Icon src={IconChevronDown} /></span>
+        </button>
+        {#if rightOpened && rightTriggerRef}
+          <div class="options-button__dropdown" use:initPopper={rightTriggerRef} role="menu" tabindex="-1">
+            {@render rightOptions()}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</ButtonTheme>
+
+<style>.options-button {
+  --_options-button--font--color: var(--button--font--color, black);
+  --_options-button--font-weight: var(--button--font-weight, 400);
+  --_options-button--text--font-size: var(--button--text--font-size, 0.875em);
+  --_options-button--background: var(--button--background, white);
+  --_options-button--background--hover: var(--button--background--hover, var(--_options-button--background));
+  --_options-button--background--active: var(--button--background--active, var(--_options-button--background));
+  --_options-button--background--disabled: var(--button--background--disabled, var(--_options-button--background));
+  --_options-button--border: var(--button--border, none);
+  --_options-button--border-radius: var(--button--border-radius, 0.25em);
+  --_options-button--box-shadow: var(--button--box-shadow, none);
+  --_options-button--padding--vertical: var(--button--padding--vertical, 0);
+  --_options-button--min-width: var(--button--min-width, 0);
+  --_options-button--height: var(--button--height, 2em);
+  --_options-button--separator--border: 1px solid var(--_options-button--font--color);
+  --_options-button--dropdown--min-width: var(--options-button--dropdown--min-width, 10em);
+  font-weight: var(--_options-button--font-weight);
+  color: var(--_options-button--font--color);
+  background: var(--_options-button--background);
+  border: var(--_options-button--border);
+  border-radius: var(--_options-button--border-radius);
+  min-width: var(--_options-button--min-width);
+  height: var(--_options-button--height);
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  box-shadow: var(--_options-button--box-shadow);
+}
+.options-button--disabled {
+  background: var(--_options-button--background--disabled);
+}
+.options-button:not(.options-button--disabled):hover {
+  background: var(--_options-button--background--hover);
+}
+.options-button:not(.options-button--disabled):active {
+  background: var(--_options-button--background--active);
+}
+.options-button__trigger {
+  display: inline-flex;
+  height: 100%;
+  flex: 1;
+  --button--min-width: 100%;
+  --button--box-shadow: none;
+  --button--border: none;
+  --button--border--disabled: none;
+  --button--height: 100%;
+  --button--background: transparent;
+  --button--background--hover: transparent;
+  --button--background--active: transparent;
+  --button--background--disabled: transparent;
+}
+.options-button__options {
+  position: relative;
+  height: 100%;
+  --dropdown-item--min-width: var(--_options-button--dropdown--min-width);
+  --button--min-width: 100%;
+  --button--justify-content: flex-start;
+}
+.options-button__options-trigger {
+  height: 100%;
+  font-size: var(--_options-button--text--font-size);
+  border-radius: var(--_options-button--border-radius);
+  padding: var(--_options-button--padding--vertical) 0.5em;
+  color: inherit;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.options-button__options-trigger:disabled {
+  cursor: default;
+}
+.options-button__options-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  --icon--size: var(--_options-button--text--font-size);
+}
+.options-button__options-separator {
+  border-right: var(--_options-button--separator--border);
+  height: var(--_options-button--text--font-size);
+}
+.options-button__dropdown {
+  position: absolute;
+  z-index: 999;
+  min-width: var(--_options-button--dropdown--min-width);
+  background: light-dark(#ffffff, #000000);
+  box-shadow: 0 2px 10px light-dark(#d9d9d9, hsl(0, 0%, 50%));
+  border-radius: 0.25em;
+}</style>

package/dist/ui/button/cmp.options-button.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonSize, ButtonVariant } from './resources/types';
+import { type Placement } from '@popperjs/core';
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    optionsPosition?: Placement;
+    optionsOffset?: number;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+    options?: Snippet;
+    rightOptions?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,3 @@
+export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';
+export type { ButtonSize, ButtonVariant } from './resources/types';

package/dist/ui/button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';