@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/server/components/share-card/index.css

@@ -0,0 +1,113 @@
+/* src/components/share-card/share-card.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-share-card {
+    display: flex;
+    gap: var(--cinder-space-2);
+    padding: var(--cinder-space-3);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    flex-direction: column;
+  }
+
+  .cinder-share-card__preview {
+    border-radius: var(--cinder-radius-sm);
+    overflow: hidden;
+    border: 1px solid var(--cinder-border);
+  }
+
+  .cinder-share-card__meta {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-direction: column;
+  }
+
+  .cinder-share-card__title {
+    font-weight: 600;
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    margin: 0;
+  }
+
+  .cinder-share-card__description {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-share-card__value {
+    display: flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface-inset);
+    font-size: var(--cinder-text-xs);
+    font-family: var(--cinder-font-mono, monospace);
+    min-width: 0;
+  }
+
+  .cinder-share-card__value-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--cinder-text-muted);
+    user-select: all;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cinder-share-card__actions {
+    display: flex;
+    gap: var(--cinder-space-1);
+    flex-wrap: wrap;
+  }
+
+  .cinder-share-card__action {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    background-color: var(--cinder-surface);
+    color: var(--cinder-text);
+    cursor: pointer;
+    font-size: var(--cinder-text-sm);
+    white-space: nowrap;
+    transition: background-color .15s, border-color .15s;
+    font-weight: 500;
+  }
+
+  @media (hover: hover) {
+    .cinder-share-card__action:hover {
+      background-color: var(--cinder-surface-raised);
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-share-card__action:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: 0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color), 0 0 0 calc(var(--cinder-ring-offset)  + var(--cinder-ring-width)) var(--cinder-ring-color);
+  }
+
+  .cinder-share-card__action[data-cinder-copied] {
+    color: var(--cinder-color-success-fg);
+    border-color: var(--cinder-color-success-border);
+  }
+
+  .cinder-share-card__action-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items:  center;
+  }
+
+  .cinder-share-card__icon {
+    width: 1em;
+    height: 1em;
+  }
+}

package/dist/server/components/share-card/index.js

@@ -0,0 +1,270 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/share-card/share-card.svelte
+import * as $2 from "svelte/internal/server";
+import { onDestroy } from "svelte";
+
+// ../../node_modules/esm-env/false.js
+var false_default = false;
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/utilities/clipboard.ts
+async function copyToClipboard(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  return legacyCopy(text);
+}
+function legacyCopy(text) {
+  if (typeof document === "undefined")
+    return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "absolute";
+  textarea.style.left = "-9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  let succeeded = false;
+  try {
+    succeeded = document.execCommand("copy");
+  } catch {
+    succeeded = false;
+  }
+  textarea.remove();
+  return succeeded;
+}
+
+// src/components/_visually-hidden-live-region.svelte
+import * as $ from "svelte/internal/server";
+function _visually_hidden_live_region($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { message = "", priority = "polite", class: className } = $$props;
+    let rendered = "";
+    let setTimeoutId = null;
+    let version = 0;
+    let isDestroyed = false;
+    $$renderer2.push(`<div${$.attr("role", priority === "assertive" ? "alert" : "status")}${$.attr("aria-live", priority === "assertive" ? "assertive" : "polite")} aria-atomic="true"${$.attr_class($.clsx(classNames("cinder-sr-only", className)))}>${$.escape(rendered)}</div>`);
+  });
+}
+
+// src/components/share-card/share-card.svelte
+function Share_card($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value,
+      title,
+      description,
+      actions,
+      copyLinkLabel = "Copy link",
+      copiedLabel = "Copied!",
+      shareLabel = "Share",
+      confirmDuration = 2000,
+      preview,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let copiedKey = null;
+    let resetTimer;
+    let announcement = "";
+    const canNativeShare = $2.derived(() => false_default && typeof navigator !== "undefined" && typeof navigator.share === "function");
+    let announceTimer;
+    function clearTimer() {
+      if (resetTimer !== undefined) {
+        clearTimeout(resetTimer);
+        resetTimer = undefined;
+      }
+      if (announceTimer !== undefined) {
+        clearTimeout(announceTimer);
+        announceTimer = undefined;
+      }
+    }
+    function announce(message) {
+      if (announceTimer !== undefined)
+        clearTimeout(announceTimer);
+      announcement = message;
+      announceTimer = setTimeout(() => {
+        announcement = "";
+      }, confirmDuration);
+    }
+    async function handleCopy(key, text, successMessage = copiedLabel) {
+      let succeeded = false;
+      try {
+        succeeded = await copyToClipboard(text);
+      } catch {
+        succeeded = false;
+      }
+      if (!succeeded) {
+        clearTimer();
+        copiedKey = null;
+        announce("Copy failed");
+        return;
+      }
+      clearTimer();
+      copiedKey = key;
+      announce(successMessage);
+      resetTimer = setTimeout(() => {
+        copiedKey = null;
+      }, confirmDuration);
+    }
+    function looksLikeUrl(candidate) {
+      return /^https?:\/\//i.test(candidate.trim());
+    }
+    function buildShareData() {
+      const shareData = looksLikeUrl(value) ? { url: value } : { text: value };
+      if (title)
+        shareData.title = title;
+      return shareData;
+    }
+    async function handleNativeShare() {
+      if (!canNativeShare()) {
+        await handleCopy("share-fallback", value);
+        return;
+      }
+      const shareData = buildShareData();
+      if (typeof navigator.canShare === "function" && !navigator.canShare(shareData)) {
+        await handleCopy("share-fallback", value);
+        return;
+      }
+      try {
+        await navigator.share(shareData);
+        announce("Shared successfully");
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError")
+          return;
+        await handleCopy("share-fallback", value, "Share failed. Copied to clipboard instead.");
+      }
+    }
+    const valueRegionLabel = $2.derived(() => looksLikeUrl(value) ? "Link to share" : "Text to share");
+    onDestroy(() => {
+      clearTimer();
+    });
+    const resolvedActions = $2.derived(() => {
+      if (actions)
+        return actions;
+      const defaultActions = [{ key: "copy-link", label: copyLinkLabel, copyValue: value }];
+      if (canNativeShare()) {
+        defaultActions.push({ key: "native-share", label: shareLabel, useNativeShare: true });
+      }
+      return defaultActions;
+    });
+    $$renderer2.push(`<div${$2.attributes({
+      ...rest,
+      class: $2.clsx(classNames("cinder-share-card", customClassName))
+    })}>`);
+    if (preview) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-share-card__preview">`);
+      preview($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (title || description) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-share-card__meta">`);
+      if (title) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="cinder-share-card__title">${$2.escape(title)}</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (description) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<p class="cinder-share-card__description">${$2.escape(description)}</p>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-share-card__value"${$2.attr("aria-label", valueRegionLabel())}><span class="cinder-share-card__value-text"${$2.attr("title", value)}>${$2.escape(value)}</span></div> <div class="cinder-share-card__actions" role="group" aria-label="Share actions"><!--[-->`);
+    const each_array = $2.ensure_array_like(resolvedActions());
+    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+      let action = each_array[$$index];
+      if (action.key === "native-share" || action.useNativeShare) {
+        $$renderer2.push("<!--[0-->");
+        const shareCopied = copiedKey === "share-fallback";
+        $$renderer2.push(`<button type="button" class="cinder-share-card__action"${$2.attr("data-cinder-action", action.key)}${$2.attr("data-cinder-copied", shareCopied ? "" : undefined)}${$2.attr("aria-label", shareCopied ? copiedLabel : action.label)}>`);
+        if (shareCopied) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<span class="cinder-share-card__action-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-share-card__icon"><polyline points="20,6 9,17 4,12"></polyline></svg></span> ${$2.escape(copiedLabel)}`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+          $$renderer2.push(`<span class="cinder-share-card__action-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-share-card__icon"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg></span> ${$2.escape(action.label)}`);
+        }
+        $$renderer2.push(`<!--]--></button>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<button type="button" class="cinder-share-card__action"${$2.attr("data-cinder-action", action.key)}${$2.attr("data-cinder-copied", copiedKey === action.key ? "" : undefined)}${$2.attr("aria-label", copiedKey === action.key ? copiedLabel : action.label)}>`);
+        if (copiedKey === action.key) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<span class="cinder-share-card__action-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-share-card__icon"><polyline points="20,6 9,17 4,12"></polyline></svg></span> ${$2.escape(copiedLabel)}`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+          $$renderer2.push(`<span class="cinder-share-card__action-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cinder-share-card__icon"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></span> ${$2.escape(action.label)}`);
+        }
+        $$renderer2.push(`<!--]--></button>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></div></div> `);
+    _visually_hidden_live_region($$renderer2, { message: announcement });
+    $$renderer2.push(`<!---->`);
+  });
+}
+
+// src/components/share-card/index.ts
+var share_card_default = Share_card;
+export {
+  share_card_default as default,
+  Share_card as ShareCard
+};
+
+//# debugId=C8026A490865A88464756E2164756E21

package/dist/server/components/share-card/share-card.schema.js

@@ -0,0 +1,95 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/share-card/share-card.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    value: {
+      type: "string",
+      description: "The URL or text to share/copy."
+    },
+    title: {
+      type: "string",
+      description: "Human-readable title for the share card."
+    },
+    description: {
+      type: "string",
+      description: "Additional descriptive text."
+    },
+    copyLinkLabel: {
+      type: "string",
+      description: "Label for the copy-link button."
+    },
+    copiedLabel: {
+      type: "string",
+      description: "Label shown after a successful copy."
+    },
+    shareLabel: {
+      type: "string",
+      description: "Label for the native-share button."
+    },
+    confirmDuration: {
+      type: "number",
+      description: "Duration in ms to show the copied confirmation state.",
+      default: 2000
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-share-card`."
+    }
+  },
+  additionalProperties: false,
+  required: ["value"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "actions",
+        reason: "unknown-shape"
+      },
+      {
+        name: "preview",
+        reason: "function-or-snippet"
+      }
+    ]
+  }
+};
+var share_card_schema_default = schema;
+export {
+  share_card_schema_default as default
+};
+
+//# debugId=18B2E98DE4158BBF64756E2164756E21

package/dist/server/components/share-card/share-card.variables.js

@@ -0,0 +1,43 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/share-card/share-card.variables.ts
+var variables = [];
+var share_card_variables_default = variables;
+export {
+  share_card_variables_default as default
+};
+
+//# debugId=A58E724E52F74EFF64756E2164756E21

package/dist/server/components/shortcut-hint/index.css

@@ -0,0 +1,28 @@
+/* src/components/shortcut-hint/shortcut-hint.css */
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  .cinder-shortcut-hint {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-shortcut-hint__label {
+    color: var(--cinder-text);
+  }
+
+  .cinder-shortcut-hint__keys {
+    display: inline-flex;
+    align-items:  center;
+    gap: var(--cinder-space-1);
+    flex-shrink: 0;
+  }
+
+  .cinder-shortcut-hint__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    user-select: none;
+    line-height: 1;
+  }
+}

package/dist/server/components/shortcut-hint/index.js

@@ -0,0 +1,134 @@
+import { createRequire } from "node:module";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+// src/components/shortcut-hint/shortcut-hint.svelte
+import * as $2 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/kbd/kbd.svelte
+import * as $ from "svelte/internal/server";
+function Kbd($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: customClassName,
+      size = "md",
+      label,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<kbd${$.attributes({
+      class: $.clsx(classNames("cinder-kbd", customClassName)),
+      "data-cinder-size": size,
+      ...rest
+    })}>`);
+    if (children) {
+      $$renderer2.push("<!--[0-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`${$.escape(label)}`);
+    }
+    $$renderer2.push(`<!--]--></kbd>`);
+  });
+}
+
+// src/components/shortcut-hint/shortcut-hint.svelte
+function Shortcut_hint($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      keys,
+      keysLabel,
+      children,
+      keysPosition = "after",
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const resolvedKeysLabel = $2.derived(() => keysLabel ?? keys.join(" plus "));
+    $$renderer2.push(`<span${$2.attributes({
+      ...rest,
+      class: $2.clsx(classNames("cinder-shortcut-hint", customClassName))
+    })}>`);
+    if (children && keysPosition === "after") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-shortcut-hint__label">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <span class="cinder-shortcut-hint__keys" aria-hidden="true"><!--[-->`);
+    const each_array = $2.ensure_array_like(keys);
+    for (let index = 0, $$length = each_array.length;index < $$length; index++) {
+      let key = each_array[index];
+      Kbd($$renderer2, { label: key, size: "sm" });
+      $$renderer2.push(`<!----> `);
+      if (index < keys.length - 1) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<span class="cinder-shortcut-hint__separator">+</span>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></span> <span class="cinder-sr-only">${$2.escape(resolvedKeysLabel())}</span> `);
+    if (children && keysPosition === "before") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="cinder-shortcut-hint__label">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></span>`);
+  });
+}
+
+// src/components/shortcut-hint/index.ts
+var shortcut_hint_default = Shortcut_hint;
+export {
+  shortcut_hint_default as default,
+  Shortcut_hint as ShortcutHint
+};
+
+//# debugId=C7CE2A13FEF3017364756E2164756E21