@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/UiPopover/UiPopover.vue

@@ -0,0 +1,16 @@
+<!-- UiPopover.vue -->
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="{ ...forwarded, ...$attrs }">
+    <slot />
+  </PopoverRoot>
+</template>

package/src/components/UiPopover/UiPopoverAnchor.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor v-bind="props">
+    <slot />
+  </PopoverAnchor>
+</template>

package/src/components/UiPopover/UiPopoverContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverContentProps>()
+const emits = defineEmits<PopoverContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      class="rounded-lg shadow-shadows-drop-shadow-lg border ui-popover-content animate-scale-in z-50"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
+
+<style>
+.ui-popover-content {
+  transform-origin: var(--reka-popover-content-transform-origin, center);
+}
+</style>

package/src/components/UiPopover/UiPopoverTrigger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger, useForwardProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+
+// Forward declared props (e.g. `as`/`asChild`) to reka — otherwise they'd be
+// consumed here and never reach PopoverTrigger, so `as-child` would be ignored
+// and reka would wrap the slot in its own <button>.
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <PopoverTrigger
+    v-bind="{ ...forwarded, ...$attrs }"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/UiProgress/UiProgress.vue

@@ -0,0 +1,92 @@
+<template>
+  <ProgressRoot
+    :model-value="progressValue"
+    :max="100"
+    class="ui-progress-root"
+    :class="[sizeClass]"
+  >
+    <ProgressIndicator
+      class="ui-progress-indicator"
+      :class="[
+        variantClass,
+        { 'ui-progress-indeterminate': isIndeterminate }
+      ]"
+      :style="{ transform: `translateX(-${100 - (progressValue || 0)}%)` }"
+    />
+  </ProgressRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ProgressRoot, ProgressIndicator } from 'reka-ui'
+import type { ProgressVariant, ProgressSize } from './types'
+
+interface Props {
+  value?: number | null
+  indeterminate?: boolean
+  variant?: ProgressVariant
+  size?: ProgressSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: null,
+  indeterminate: false,
+  variant: 'primary',
+  size: 'md',
+})
+
+const isIndeterminate = computed(() => props.indeterminate || props.value === null)
+
+const progressValue = computed(() => {
+  if (isIndeterminate.value) return null
+  return Math.min(Math.max(props.value || 0, 0), 100)
+})
+
+const variantClass = computed(() => {
+  const variantMap: Record<ProgressVariant, string> = {
+    primary: 'bg-actions-primary-idle',
+    success: 'bg-actions-success-idle',
+    warning: 'bg-actions-warning-idle',
+    danger: 'bg-actions-danger-idle',
+  }
+  return variantMap[props.variant]
+})
+
+const sizeClass = computed(() => {
+  const sizeMap: Record<ProgressSize, string> = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-4',
+  }
+  return sizeMap[props.size]
+})
+</script>
+
+<style scoped>
+@reference '@livestorm/ui-tokens/output/supernova/index.css';
+
+.ui-progress-root {
+  @apply relative w-full bg-actions-neutral-active-overlay overflow-hidden rounded-lg;
+}
+
+.ui-progress-indicator {
+  @apply h-full w-full rounded-lg transition-transform duration-[660ms];
+  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.ui-progress-indeterminate {
+  animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/components/UiProgress/index.ts

@@ -0,0 +1,2 @@
+export { default as UiProgress } from './UiProgress.vue'
+export * from './types'

package/src/components/UiProgress/types.ts

@@ -0,0 +1,5 @@
+export const PROGRESS_VARIANTS = ['primary', 'success', 'warning', 'danger'] as const
+export type ProgressVariant = typeof PROGRESS_VARIANTS[number]
+
+export const PROGRESS_SIZES = ['sm', 'md', 'lg'] as const
+export type ProgressSize = typeof PROGRESS_SIZES[number]

package/src/components/UiRoomButton/UiRoomButton.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import UiTooltipProvider from "../UiTooltip/UiTooltipProvider.vue";
+import UiTooltip from "../UiTooltip/UiTooltip.vue";
+import UiTooltipTrigger from "../UiTooltip/UiTooltipTrigger.vue";
+import UiTooltipContent from "../UiTooltip/UiTooltipContent.vue";
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+    defineProps<{
+        variant?: "ghost" | "glass" | "solid";
+        color?: "neutral" | "danger" | "primary" | "success";
+        icon?: string;
+        tooltip?: string;
+        tooltipSide?: "top" | "bottom" | "left" | "right";
+        disabled?: boolean;
+        active?: boolean;
+        loading?: boolean;
+    }>(),
+    {
+        variant: "ghost",
+        color: "neutral",
+        tooltipSide: "top",
+    },
+);
+
+const slots = useSlots();
+const isIconOnly = computed(() => !slots.default);
+</script>
+
+<template>
+  <UiTooltipProvider v-if="tooltip">
+    <UiTooltip>
+      <UiTooltipTrigger as-child>
+        <button
+          v-bind="$attrs"
+          type="button"
+          class="ui-room-button flex shrink-0 items-center justify-center rounded-xl outline-none transition-colors duration-150 text-action-button-md"
+          :class="[
+            `ui-room-button--${variant}`,
+            `ui-room-button--${color}`,
+            active && 'ui-room-button--active',
+            (icon || loading) && !isIconOnly ? 'gap-1.5' : '',
+            isIconOnly
+              ? 'size-10'
+              : variant === 'glass'
+                ? 'h-10 px-4'
+                : 'h-10 px-3',
+            disabled
+              ? 'cursor-not-allowed opacity-40'
+              : loading
+                ? 'cursor-wait'
+                : 'cursor-pointer',
+          ]"
+          :disabled="disabled || loading"
+        >
+          <svg
+            v-if="loading"
+            class="h-4 w-4 shrink-0 animate-spin"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              class="opacity-20"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <path
+              class="opacity-100"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+          <div
+            v-else-if="icon"
+            class="h-4 w-4 shrink-0"
+            :class="icon"
+          />
+          <slot />
+        </button>
+      </UiTooltipTrigger>
+      <UiTooltipContent :side="tooltipSide">
+        {{
+          tooltip
+        }}
+      </UiTooltipContent>
+    </UiTooltip>
+  </UiTooltipProvider>
+
+  <button
+    v-else
+    v-bind="$attrs"
+    type="button"
+    class="ui-room-button flex shrink-0 items-center justify-center rounded-xl outline-none transition-colors duration-150 text-action-button-md"
+    :class="[
+      `ui-room-button--${variant}`,
+      `ui-room-button--${color}`,
+      active && 'ui-room-button--active',
+      (icon || loading) && !isIconOnly ? 'gap-1.5' : '',
+      isIconOnly
+        ? 'size-10'
+        : variant === 'glass'
+          ? 'h-10 px-4'
+          : 'h-10 px-3',
+      disabled
+        ? 'cursor-not-allowed opacity-40'
+        : loading
+          ? 'cursor-wait'
+          : 'cursor-pointer',
+    ]"
+    :disabled="disabled || loading"
+  >
+    <svg
+      v-if="loading"
+      class="h-4 w-4 shrink-0 animate-spin"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-20"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-100"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <div
+      v-else-if="icon"
+      class="h-4 w-4 shrink-0"
+      :class="icon"
+    />
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.ui-room-button {
+    border: none;
+}
+
+.ui-room-button--ghost.ui-room-button--neutral {
+    background: transparent;
+    color: var(--color-actions-neutral-idle, rgb(245, 247, 252));
+}
+
+.ui-room-button--ghost.ui-room-button--neutral:not(:disabled):hover {
+    background: rgba(245, 247, 252, 0.1);
+}
+
+.ui-room-button--ghost.ui-room-button--danger {
+    background: var(
+        --color-actions-danger-idle-alpha-light,
+        rgba(252, 127, 130, 0.08)
+    );
+    color: var(--color-actions-danger-idle, rgb(252, 127, 130));
+}
+
+.ui-room-button--ghost.ui-room-button--danger:not(:disabled):hover {
+    background: rgba(252, 127, 130, 0.14);
+}
+
+.ui-room-button--glass.ui-room-button--neutral {
+    background: var(
+        --color-actions-neutral-idle-alpha-light,
+        rgba(245, 247, 252, 0.08)
+    );
+    color: var(--color-actions-neutral-idle, rgb(245, 247, 252));
+    backdrop-filter: blur(70px);
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+}
+
+.ui-room-button--glass.ui-room-button--neutral:not(:disabled):hover {
+    background: rgba(245, 247, 252, 0.1);
+}
+
+.ui-room-button--ghost.ui-room-button--primary {
+    background: var(
+        --color-actions-primary-idle-alpha-light,
+        rgba(118, 164, 255, 0.08)
+    );
+    color: var(--color-actions-primary-idle, rgb(118, 164, 255));
+}
+
+.ui-room-button--ghost.ui-room-button--primary:not(:disabled):hover {
+    background: rgba(118, 164, 255, 0.14);
+}
+
+.ui-room-button--ghost.ui-room-button--success {
+    background: var(
+        --color-actions-success-idle-alpha-light,
+        rgba(46, 184, 154, 0.08)
+    );
+    color: var(--color-actions-success-idle, rgb(46, 184, 154));
+}
+
+.ui-room-button--ghost.ui-room-button--success:not(:disabled):hover {
+    background: rgba(46, 184, 154, 0.14);
+}
+
+/* Solid variant: filled background with on-color text */
+.ui-room-button--solid {
+    color: #fff;
+}
+
+.ui-room-button--solid.ui-room-button--primary {
+    background: var(--color-actions-primary-idle, rgb(118, 164, 255));
+}
+
+.ui-room-button--solid.ui-room-button--danger {
+    background: var(--color-red-500, rgb(224, 62, 65));
+}
+
+.ui-room-button--solid.ui-room-button--success {
+    background: var(--color-green-500, rgb(22, 140, 115));
+}
+
+.ui-room-button--solid:not(:disabled):hover {
+    filter: brightness(0.95);
+}
+
+.ui-room-button--ghost.ui-room-button--active {
+    background: var(
+        --color-actions-primary-idle-alpha-light,
+        rgba(118, 164, 255, 0.08)
+    );
+    color: var(--color-actions-primary-idle, rgb(118, 164, 255));
+}
+</style>

package/src/components/UiShell/UiShell.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { Slot } from 'vue'
+import { useMobileMenu } from '../../composables/useMobileMenu'
+import UiButton from '../UiButton/UiButton.vue'
+
+const props = withDefaults(defineProps<{
+  openMenuLabel?: string
+}>(), {
+  openMenuLabel: 'Menu',
+})
+
+const slots = useSlots() as {
+  default: Slot | undefined
+  sidemenu: Slot | undefined
+  banners: Slot | undefined
+}
+
+const { isOpen, toggle, hasTrigger, menuLabel } = useMobileMenu()
+
+// Per-page label (set via useMobileMenu().setMenuLabel) wins over the prop
+// default, so a page like Home can title its fallback topbar "Home".
+const fallbackLabel = computed(() => menuLabel.value ?? props.openMenuLabel)
+
+</script>
+
+<template>
+  <div
+    class="ui-shell h-dvh flex flex-col relative"
+    data-sizes-primitives="Mode-1"
+  >
+    <div class="ui-shell-backgrounds absolute inset-0 grid grid-cols-1 grid-rows-1 z-0">
+      <div class="ui-shell-background col-span-full row-span-full bg-gradient-to-tl from-surface-primary-100 to-surface-primary-300" />
+      <div class="ui-shell-background col-span-full row-span-full bg-surface-neutral-invert-alpha-600" />
+      <div class="ui-shell-background col-span-full row-span-full bg-surface-primary-alpha-100" />
+    </div>
+
+    <!-- Banners -->
+    <div class="relative z-30">
+      <slot name="banners" />
+    </div>
+
+    <!-- Main -->
+    <div class="flex-1 flex w-full relative min-h-0">
+      <div
+        v-if="slots.sidemenu"
+        class="dashboard-sidebar md:flex shrink-0 text-text-neutral-base flex z-40"
+      >
+        <slot
+          name="sidemenu"
+          :is-open="isOpen"
+        />
+      </div>
+
+      <div class="dashboard-content flex-1 flex flex-col z-10 min-h-0">
+        <!--
+          Fallback mobile menu trigger. The hamburger normally lives in
+          UiPageHeader, but a page can render without a header — leaving no way
+          to open the side menu on mobile. This in-flow row mirrors the header:
+          an icon-only menu button next to the title text, using the header's
+          padding (UiPage's `page-header`) and title size so it lines up the
+          same as a real header. Shown on mobile only, and only while the menu
+          is closed (the open overlay carries its own close button).
+        -->
+        <div
+          v-if="slots.sidemenu && !isOpen && !hasTrigger"
+          class="md:hidden flex items-center gap-2 p-4"
+        >
+          <UiButton
+            color="neutral"
+            variant="tertiary"
+            icon="i-ls-menu"
+            :aria-label="fallbackLabel"
+            @click="toggle"
+          />
+          <span class="text-title-sm-bold md:text-title-md-bold text-text-neutral-base">
+            {{ fallbackLabel }}
+          </span>
+        </div>
+
+        <slot
+          v-if="slots.default"
+          name="default"
+        />
+      </div>
+    </div>
+  </div>
+</template>