@heyramzi/ui 1.54.1 → 2.0.0

package/src/shadcn/sheet/sheet-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sheet/sheet-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-group-action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 

package/src/shadcn/sidebar/sidebar-group-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-group-label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 

package/src/shadcn/sidebar/sidebar-group.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from "svelte";
 	import { Input } from "../input/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/sidebar/sidebar-inset.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-menu-action.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 

package/src/shadcn/sidebar/sidebar-menu-badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-menu-button.svelte

@@ -29,7 +29,7 @@
 
 <script lang="ts">
 	import * as Tooltip from "../tooltip/index.js";
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import { mergeProps } from "bits-ui";
 	import type { ComponentProps, Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";

package/src/shadcn/sidebar/sidebar-menu-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-menu-skeleton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import { Skeleton } from "../skeleton/index.js";
 	import type { HTMLAttributes } from "svelte/elements";
 

package/src/shadcn/sidebar/sidebar-menu-sub-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 

package/src/shadcn/sidebar/sidebar-menu-sub-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-menu-sub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/sidebar/sidebar-provider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Tooltip from "../tooltip/index.js";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import {
 		SIDEBAR_COOKIE_MAX_AGE,

package/src/shadcn/sidebar/sidebar-rail.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { useSidebar } from "./context.svelte.js";
 

package/src/shadcn/sidebar/sidebar-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Separator } from "../separator/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { ComponentProps } from "svelte";
 
 	let {

package/src/shadcn/sidebar/sidebar-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button } from "../button/index.js";
 	import { SidebarSimple } from "phosphor-svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { ComponentProps } from "svelte";
 	import { useSidebar } from "./context.svelte.js";
 

package/src/shadcn/sidebar/sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Sheet from "../sheet/index.js";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
 	import { useSidebar } from "./context.svelte.js";

package/src/shadcn/skeleton/skeleton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "@heyramzi/utils";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/slider/slider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Slider as SliderPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/spinner/spinner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { CircleNotch as SpinnerIcon } from "phosphor-svelte";
 	import type { SVGAttributes } from "svelte/elements";
 

package/src/shadcn/switch/switch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/table/table-body.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-caption.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLTdAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-head.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLThAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table-row.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/table/table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTableAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/tabs/tabs-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/tabs/tabs-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { slidingPill } from "../../lib/sliding-pill.js";
 
 	let {

package/src/shadcn/tabs/tabs-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/tabs/tabs.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/textarea/textarea.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "@heyramzi/utils";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/toggle/toggle.svelte

@@ -29,7 +29,7 @@
 
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/toggle-group/toggle-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
 
 	let {

package/src/shadcn/toggle-group/toggle-group.svelte

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/tooltip/tooltip-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import TooltipPortal from "./tooltip-portal.svelte";
 	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "@heyramzi/utils";
+	import type { WithoutChildrenOrChild } from "../../lib/utils.js";
 
 	let {
 		ref = $bindable(null),

package/src/shadcn/trace/trace-collapsible-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Collapsible from "../collapsible/index.js";
-	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { cn, type WithoutChild } from "../../lib/utils.js";
 	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
 	let {

package/src/shadcn/trace/trace-collapsible-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Collapsible from "../collapsible/index.js";
 	import { CaretRight } from "phosphor-svelte";
-	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import { cn, type WithoutChild } from "../../lib/utils.js";
 	import TraceIcon from "./trace-icon.svelte";
 	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
 

package/src/shadcn/trace/trace-collapsible.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Collapsible from "../collapsible/index.js";
-	import { cn } from "@heyramzi/utils";
+	import { cn } from "../../lib/utils.js";
 	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
 
 	let {

package/src/shadcn/trace/trace-description.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/trace/trace-icon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/trace/trace-line.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/trace/trace-title.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/shadcn/trace/trace.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import { cn, type WithElementRef } from "../../lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {

package/src/slides/Controls.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { DeckController } from './deck-controller.svelte.js';
+
+  interface Props {
+    deck: DeckController;
+    /** Shown only when the deck has somewhere to open the presenter view. */
+    onpresenter?: () => void;
+    onfullscreen: () => void;
+  };
+
+  let { deck, onpresenter, onfullscreen }: Props = $props();
+
+  const icons = {
+    prev: 'M15 5 8 12l7 7',
+    next: 'm9 5 7 7-7 7',
+    overview: 'M4 5h6v6H4zM14 5h6v6h-6zM4 15h6v4H4zM14 15h6v4h-6z',
+    presenter: 'M4 5h16v10H4zM8 19h8M12 15v4',
+    fullscreen: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
+  };
+</script>
+
+{#snippet button(icon: keyof typeof icons, label: string, onclick: () => void, disabled = false, pressed?: boolean)}
+  <button type="button" class="deck__button" {onclick} {disabled} aria-label={label} aria-pressed={pressed}>
+    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+      <path d={icons[icon]} fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </button>
+{/snippet}
+
+<div class="deck__controls deck__chrome">
+  {@render button('prev', deck.labels.previous, () => deck.prev(), deck.atStart)}
+  <span class="deck__counter" aria-hidden="true">{deck.ordinal.n} / {deck.ordinal.of}</span>
+  {@render button('next', deck.labels.next, () => deck.next(), deck.atEnd)}
+  <span class="deck__divider" aria-hidden="true"></span>
+  {@render button('overview', deck.labels.overview, () => deck.toggleOverview(), false, deck.overview)}
+  {#if onpresenter}
+    {@render button('presenter', deck.labels.presenter, onpresenter)}
+  {/if}
+  {@render button('fullscreen', deck.labels.fullscreen, onfullscreen)}
+</div>
+
+<style>
+  .deck__controls {
+    position: absolute;
+    right: 12px;
+    bottom: 14px;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    color: var(--deck-fg);
+    background: color-mix(in srgb, var(--deck-bg) 72%, transparent);
+    border: 1px solid var(--deck-line);
+    border-radius: 12px;
+    backdrop-filter: blur(var(--blur-large, 8px));
+    opacity: 0.55;
+    transition: opacity var(--deck-t-quick) var(--deck-ease);
+  }
+  .deck__controls:focus-within {
+    opacity: 1;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .deck__controls:hover {
+      opacity: 1;
+    }
+  }
+  .deck__button {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+    cursor: pointer;
+    transition:
+      background-color var(--deck-t-quick) var(--deck-ease),
+      transform var(--deck-t-quick) var(--deck-ease);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .deck__button:hover:not(:disabled) {
+      background: var(--deck-line);
+    }
+  }
+  .deck__button:active:not(:disabled) {
+    transform: scale(var(--scale-medium, 0.97));
+  }
+  .deck__button[aria-pressed='true'] {
+    color: var(--deck-on-accent);
+    background: var(--deck-accent);
+  }
+  .deck__button:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+  .deck__button:focus-visible {
+    outline: 2px solid var(--deck-accent);
+    outline-offset: 1px;
+  }
+  .deck__counter {
+    min-width: 52px;
+    font: 500 12px/1 var(--deck-font);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    color: var(--deck-muted);
+  }
+  .deck__divider {
+    width: 1px;
+    height: 16px;
+    margin: 0 4px;
+    background: var(--deck-line);
+  }
+
+  @media (hover: none) {
+    .deck__controls {
+      opacity: 0.9;
+    }
+  }
+  /* On a small deck the controls shrink and drop the extras, so they don't cover the slide. */
+  @container (max-width: 520px) {
+    .deck__controls {
+      right: 6px;
+      bottom: 10px;
+      padding: 2px;
+    }
+    .deck__button {
+      width: 28px;
+      height: 28px;
+    }
+    .deck__counter,
+    .deck__divider {
+      display: none;
+    }
+  }
+</style>