@lostgradient/cinder 0.1.1 → 0.2.0

package/dist/components/keyboard-shortcuts/index.js

@@ -0,0 +1,238 @@
+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 __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/keyboard-shortcuts/index.ts
+import"@lostgradient/cinder/keyboard-shortcuts/styles";
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.svelte
+import"svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+
+// 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"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+var root = $.from_html(`<kbd><!></kbd>`);
+function Kbd($$anchor, $$props) {
+  $.push($$props, true);
+  let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "size",
+    "label",
+    "children"
+  ]);
+  var kbd = root();
+  $.attribute_effect(kbd, ($0) => ({ class: $0, "data-cinder-size": size(), ...rest }), [() => classNames("cinder-kbd", $$props.class)]);
+  var node = $.child(kbd);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_1 = $.first_child(fragment);
+      $.snippet(node_1, () => $$props.children);
+      $.append($$anchor2, fragment);
+    };
+    var alternate = ($$anchor2) => {
+      var text2 = $.text();
+      $.template_effect(() => $.set_text(text2, $$props.label));
+      $.append($$anchor2, text2);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.children)
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $.reset(kbd);
+  $.append($$anchor, kbd);
+  $.pop();
+}
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.svelte
+var root_1 = $2.from_html(`<h2 class="cinder-keyboard-shortcuts__heading"> </h2>`);
+var root_2 = $2.from_html(`<div class="cinder-keyboard-shortcuts__intro"><!></div>`);
+var root_6 = $2.from_html(`<span class="cinder-keyboard-shortcuts__separator">+</span>`);
+var root_5 = $2.from_html(`<!> <!>`, 1);
+var root_4 = $2.from_html(`<div class="cinder-keyboard-shortcuts__row"><dt class="cinder-keyboard-shortcuts__action"> </dt> <dd class="cinder-keyboard-shortcuts__keys"><span class="cinder-sr-only"> </span> <span aria-hidden="true" class="cinder-keyboard-shortcuts__keys-visual"></span></dd></div>`);
+var root_3 = $2.from_html(`<section class="cinder-keyboard-shortcuts__group"><h3 class="cinder-keyboard-shortcuts__group-label"> </h3> <dl class="cinder-keyboard-shortcuts__list"></dl></section>`);
+var root2 = $2.from_html(`<div><!> <!> <!></div>`);
+function Keyboard_shortcuts($$anchor, $$props) {
+  const baseId = $2.props_id();
+  $2.push($$props, true);
+  let rest = $2.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "groups",
+    "heading",
+    "children",
+    "class"
+  ]);
+  const groupHeadingId = (index2) => `${baseId}-group-${index2}`;
+  function resolveKeysLabel(keys, keysLabel) {
+    if (keysLabel)
+      return keysLabel;
+    return keys.join(" plus ");
+  }
+  var div = root2();
+  $2.attribute_effect(div, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-keyboard-shortcuts", $$props.class)]);
+  var node = $2.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var h2 = root_1();
+      var text2 = $2.child(h2, true);
+      $2.reset(h2);
+      $2.template_effect(() => $2.set_text(text2, $$props.heading));
+      $2.append($$anchor2, h2);
+    };
+    $2.if(node, ($$render) => {
+      if ($$props.heading)
+        $$render(consequent);
+    });
+  }
+  var node_1 = $2.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_1 = root_2();
+      var node_2 = $2.child(div_1);
+      $2.snippet(node_2, () => $$props.children);
+      $2.reset(div_1);
+      $2.append($$anchor2, div_1);
+    };
+    $2.if(node_1, ($$render) => {
+      if ($$props.children)
+        $$render(consequent_1);
+    });
+  }
+  var node_3 = $2.sibling(node_1, 2);
+  $2.each(node_3, 17, () => $$props.groups, $2.index, ($$anchor2, group, groupIndex) => {
+    var section = root_3();
+    var h3 = $2.child(section);
+    var text_1 = $2.child(h3, true);
+    $2.reset(h3);
+    var dl = $2.sibling(h3, 2);
+    $2.each(dl, 21, () => $2.get(group).shortcuts, $2.index, ($$anchor3, shortcut) => {
+      var div_2 = root_4();
+      var dt = $2.child(div_2);
+      var text_2 = $2.child(dt, true);
+      $2.reset(dt);
+      var dd = $2.sibling(dt, 2);
+      var span = $2.child(dd);
+      var text_3 = $2.child(span, true);
+      $2.reset(span);
+      var span_1 = $2.sibling(span, 2);
+      $2.each(span_1, 23, () => $2.get(shortcut).keys, (key, index2) => key + index2, ($$anchor4, key, index2) => {
+        var fragment = root_5();
+        var node_4 = $2.first_child(fragment);
+        Kbd(node_4, {
+          get label() {
+            return $2.get(key);
+          },
+          size: "sm"
+        });
+        var node_5 = $2.sibling(node_4, 2);
+        {
+          var consequent_2 = ($$anchor5) => {
+            var span_2 = root_6();
+            $2.append($$anchor5, span_2);
+          };
+          $2.if(node_5, ($$render) => {
+            if ($2.get(index2) < $2.get(shortcut).keys.length - 1)
+              $$render(consequent_2);
+          });
+        }
+        $2.append($$anchor4, fragment);
+      });
+      $2.reset(span_1);
+      $2.reset(dd);
+      $2.reset(div_2);
+      $2.template_effect(($0) => {
+        $2.set_text(text_2, $2.get(shortcut).action);
+        $2.set_text(text_3, $0);
+      }, [
+        () => resolveKeysLabel($2.get(shortcut).keys, $2.get(shortcut).keysLabel)
+      ]);
+      $2.append($$anchor3, div_2);
+    });
+    $2.reset(dl);
+    $2.reset(section);
+    $2.template_effect(($0, $1) => {
+      $2.set_attribute(section, "aria-labelledby", $0);
+      $2.set_attribute(h3, "id", $1);
+      $2.set_text(text_1, $2.get(group).label);
+    }, [
+      () => groupHeadingId(groupIndex),
+      () => groupHeadingId(groupIndex)
+    ]);
+    $2.append($$anchor2, section);
+  });
+  $2.reset(div);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+
+// src/components/keyboard-shortcuts/index.ts
+var keyboard_shortcuts_default = Keyboard_shortcuts;
+export {
+  keyboard_shortcuts_default as default,
+  Keyboard_shortcuts as KeyboardShortcuts
+};
+
+//# debugId=1DEE3D8D15ACE1D864756E2164756E21

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.css

@@ -0,0 +1,84 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-keyboard-shortcuts {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-4);
+  }
+
+  .cinder-keyboard-shortcuts__heading {
+    font-size: var(--cinder-text-lg);
+    font-weight: 600;
+    color: var(--cinder-text);
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__intro {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-keyboard-shortcuts__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-keyboard-shortcuts__group-label {
+    font-size: var(--cinder-text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    overflow: hidden;
+  }
+
+  .cinder-keyboard-shortcuts__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cinder-space-1) var(--cinder-space-2);
+    gap: var(--cinder-space-3);
+  }
+
+  .cinder-keyboard-shortcuts__row + .cinder-keyboard-shortcuts__row {
+    border-top: 1px solid var(--cinder-border);
+  }
+
+  .cinder-keyboard-shortcuts__action {
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text);
+    flex: 1;
+  }
+
+  .cinder-keyboard-shortcuts__keys {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin: 0;
+  }
+
+  .cinder-keyboard-shortcuts__keys-visual {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  .cinder-keyboard-shortcuts__separator {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-text-muted);
+    line-height: 1;
+    user-select: none;
+  }
+}

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.schema.js

@@ -0,0 +1,87 @@
+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 __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    heading: {
+      type: "string",
+      description: "Optional heading for the entire shortcuts panel."
+    },
+    class: {
+      type: "string",
+      description: "Additional class names merged with `.cinder-keyboard-shortcuts`."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "children",
+        reason: "function-or-snippet"
+      },
+      {
+        name: "groups",
+        reason: "unknown-shape"
+      }
+    ]
+  }
+};
+var keyboard_shortcuts_schema_default = schema;
+export {
+  keyboard_shortcuts_schema_default as default
+};
+
+//# debugId=35C917E9E4E39F3B64756E2164756E21

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @cinder
+ * @category typography
+ * @status alpha
+ * @purpose Grouped keyboard-shortcut reference that renders key combos via Kbd with accessible labels not reliant only on visual keycaps.
+ * @tag shortcut
+ * @tag keyboard
+ * @useWhen Displaying a reference panel of keyboard shortcuts grouped by feature area.
+ * @useWhen Embedding a shortcut table inside a modal, sheet, popover, or help page.
+ * @avoidWhen Showing a single inline shortcut hint — use shortcut-hint instead.
+ * @related kbd, shortcut-hint, modal, sheet, popover
+ */
+export type { KeyboardShortcutEntry, KeyboardShortcutGroup, KeyboardShortcutsProps, } from './keyboard-shortcuts.types.ts';
+import type { KeyboardShortcutsProps } from './keyboard-shortcuts.types.ts';
+declare const KeyboardShortcuts: import("svelte").Component<KeyboardShortcutsProps, {}, "">;
+type KeyboardShortcuts = ReturnType<typeof KeyboardShortcuts>;
+export default KeyboardShortcuts;

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.types.d.ts

@@ -0,0 +1,42 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** A single keyboard shortcut entry. */
+export type KeyboardShortcutEntry = {
+    /** Human-readable action description (e.g. "Save document"). */
+    action: string;
+    /** The key sequence, rendered via Kbd (e.g. ["Ctrl", "S"] or ["Space"]). */
+    keys: string[];
+    /** Optional accessible label for the key combo, e.g. "Control plus S". Defaults to joining keys with plus. */
+    keysLabel?: string;
+};
+/** A group of related shortcuts under a heading. */
+export type KeyboardShortcutGroup = {
+    /** Group heading label. */
+    label: string;
+    /** Shortcuts in this group. */
+    shortcuts: KeyboardShortcutEntry[];
+};
+/** Props for the KeyboardShortcuts component. */
+export type KeyboardShortcutsProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    /** Groups of shortcuts to display. */
+    groups: KeyboardShortcutGroup[];
+    /** Optional heading for the entire shortcuts panel. */
+    heading?: string;
+    /** Snippet rendered above all groups. */
+    children?: Snippet;
+    /** Additional class names merged with `.cinder-keyboard-shortcuts`. */
+    class?: string;
+};
+/**
+ * Cinder-specific props for KeyboardShortcuts, used by the schema generator.
+ */
+export interface KeyboardShortcutsSchemaProps {
+    /** Groups of shortcuts to display. */
+    groups: KeyboardShortcutGroup[];
+    /** Optional heading for the entire shortcuts panel. */
+    heading?: string;
+    /** Additional class names merged with `.cinder-keyboard-shortcuts`. */
+    class?: string;
+    /** Intro content rendered above the groups. */
+    children?: Snippet;
+}

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/keyboard-shortcuts/keyboard-shortcuts.variables.js

@@ -0,0 +1,61 @@
+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 __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/keyboard-shortcuts/keyboard-shortcuts.variables.ts
+var variables = [];
+var keyboard_shortcuts_variables_default = variables;
+export {
+  keyboard_shortcuts_variables_default as default
+};
+
+//# debugId=DDEBF5577846FEFB64756E2164756E21