@cruglobal/cornerstone-components 0.1.0 → 0.1.1

package/dist/bundled/chunks/chunk.QEGA7ZIF.js

@@ -0,0 +1,200 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.SIBGI35S.js";
+
+// src/components/otp-input/otp-input.styles.ts
+var otp_input_styles_default = i`
+  :host(:focus) {
+    outline: none;
+  }
+
+  /* Segments container */
+  .segments {
+    position: relative;
+    /* Codes read left-to-right regardless of locale — keep segment order and caret movement LTR
+       even when the surrounding page is RTL. */
+    direction: ltr;
+    display: inline-flex;
+    align-items: center;
+    align-self: start;
+    gap: var(--segment-gap, var(--cs-space-xs));
+    cursor: text;
+    /* Never grow past the host's available width — long values or large segment sizes scroll
+       horizontally instead of overflowing the page. */
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    /* Setting overflow-x forces overflow-y to also compute to non-visible, which would otherwise
+       clip the focus ring's bleed around the active segment — above/below for any segment, and
+       left/right for the first/last segment specifically. Reserve room for it with padding, then
+       cancel the layout impact with an equal negative margin on both axes. */
+    padding: calc(var(--cs-focus-ring-offset) + var(--cs-focus-ring-width));
+    margin: calc(-1 * (var(--cs-focus-ring-offset) + var(--cs-focus-ring-width)));
+  }
+
+  .segments::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  :host(:state(disabled)) .segments {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :host(:state(readonly)) .segments {
+    cursor: default;
+  }
+
+  /* Focus ring on the active segment, and on every segment in a multi-character selection */
+  .segments:focus-within .segment--active,
+  .segments:focus-within .segment--selected {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /* Readonly has no per-segment active/selected state (see render()), so every segment rings
+     at once to show the control as a whole has focus. */
+  :host(:state(readonly)) .segments:focus-within .segment {
+    outline-color: var(--cs-color-focus);
+  }
+
+  /* Hidden real input — off-screen but focusable.
+     Chromium mishandles typing over a full selection (drops the inserted character) when a
+     text input has zero layout size, so this stays a non-zero 1x1px box instead of 0x0. */
+  .hidden-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Individual visual segment */
+  .segment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--segment-size, 2.5em);
+    height: var(--segment-size, 2.5em);
+    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
+    font-size: 1em;
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    position: relative;
+    user-select: none;
+    outline: var(--cs-focus-ring-style) var(--cs-focus-ring-width) transparent;
+    outline-offset: var(--cs-focus-ring-offset);
+    transition:
+      background-color var(--cs-transition-normal),
+      border-color var(--cs-transition-normal),
+      outline-color var(--cs-transition-fast);
+    transition-timing-function: var(--cs-transition-easing);
+  }
+
+  /* Blinking caret in the active segment */
+  .caret {
+    position: absolute;
+    width: 1.5px;
+    height: 60%;
+    background-color: currentColor;
+    animation: cs-otp-caret-blink 1s step-end infinite;
+  }
+
+  @keyframes cs-otp-caret-blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* Literal separator character between segment groups */
+  .segment-literal {
+    display: inline-block;
+    flex-shrink: 0;
+    color: var(--cs-color-text-quiet);
+    white-space: pre;
+    user-select: none;
+  }
+
+  /* Appearance: outlined (default) */
+  :host(:not([appearance='filled'], [appearance='filled-outlined'], [appearance='contained'])) .segment {
+    background-color: var(--cs-form-control-background-color);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+  }
+
+  /* Appearance: filled */
+  :host([appearance='filled']) .segment {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) transparent;
+  }
+
+  /* Appearance: filled-outlined */
+  :host([appearance='filled-outlined']) .segment {
+    background-color: var(--cs-color-neutral-fill-quiet);
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+  }
+
+  /* Appearance: contained */
+  :host([appearance='contained']) .segments {
+    gap: 0;
+    border: var(--cs-form-control-border-width) var(--cs-form-control-border-style) var(--cs-form-control-border-color);
+    border-radius: var(--segment-border-radius, var(--cs-form-control-border-radius));
+    background-color: var(--cs-form-control-background-color);
+    overflow: hidden;
+    /* The focus ring is drawn inward here (see outline-offset below), so there's no outward bleed
+       to reserve room for. .segments is also the visible bordered box in this appearance, so the
+       padding/negative-margin bleed trick from the base rule would visibly shift and inflate it. */
+    padding: 0;
+    margin: 0;
+  }
+
+  :host([appearance='contained']) .segment {
+    border: none;
+    border-radius: 0;
+    /* Contained segments sit flush with zero gap and have no border of their own, so a ring drawn
+       outside the segment edge (the default, positive offset) bleeds into the neighboring segment.
+       Draw it inward instead so it stays within this segment's own box. */
+    outline-offset: calc(-1 * var(--cs-focus-ring-width));
+  }
+
+  /* Dividers between contained segments */
+  :host([appearance='contained']) .segment + .segment,
+  :host([appearance='contained']) .segment-literal + .segment {
+    border-left: var(--cs-form-control-border-width) var(--cs-form-control-border-style)
+      var(--cs-form-control-border-color);
+  }
+
+  /* ── Active segment (where next char will go), and every segment in a multi-character
+     selection (e.g. from Cmd/Ctrl+A) — same border + focus-ring treatment for both.
+     :host(...) wrapper matches the specificity of the appearance rules above so this
+     border-color isn't silently lost to the cascade. ── */
+  :host(:not(:state(readonly))) .segment--active,
+  :host(:not(:state(readonly))) .segment--selected {
+    border-color: var(--cs-color-focus);
+  }
+
+  /* Masked filled character, and the empty-segment hint shown when with-mask is set, both draw
+     --mask-char via a pseudo-element instead of real text, so a masked value never touches the
+     DOM as plain text (nothing to find via view-source or copy). */
+  .segment--masked::before,
+  .segment--mask-hint::before {
+    content: var(--mask-char, '•');
+  }
+
+  .segment--mask-hint::before {
+    opacity: 0.35;
+  }
+`;
+
+export {
+  otp_input_styles_default
+};

package/dist/bundled/chunks/chunk.QHRHMOKB.js

@@ -0,0 +1,29 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.WI5RWL65.js";
+import {
+  CsRadioGroup
+} from "./chunk.JO4XEGPV.js";
+import {
+  __toESM
+} from "./chunk.A5EHX6OY.js";
+
+// src/react/radio-group/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-radio-group";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsRadioGroup,
+  react: React,
+  events: {
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/dist/bundled/chunks/chunk.QIJAJLV3.js

@@ -0,0 +1,12 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/events/collapse.ts
+var CsCollapseEvent = class extends Event {
+  constructor() {
+    super("cs-collapse", { bubbles: true, cancelable: false, composed: true });
+  }
+};
+
+export {
+  CsCollapseEvent
+};

package/dist/bundled/chunks/chunk.QOL7KZCB.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+
+// src/internal/dismissible-stack.ts
+var dismissibleStack = [];
+function registerDismissible(key) {
+  dismissibleStack.push(key);
+}
+function unregisterDismissible(key) {
+  for (let i = dismissibleStack.length - 1; i >= 0; i--) {
+    if (dismissibleStack[i] === key) {
+      dismissibleStack.splice(i, 1);
+      break;
+    }
+  }
+}
+function isTopDismissible(key) {
+  return dismissibleStack.length > 0 && dismissibleStack[dismissibleStack.length - 1] === key;
+}
+
+export {
+  registerDismissible,
+  unregisterDismissible,
+  isTopDismissible
+};

package/dist/bundled/chunks/chunk.QT72QHUK.js

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.WI5RWL65.js";
+import {
+  CsCard
+} from "./chunk.JHMQOTEZ.js";
+import {
+  __toESM
+} from "./chunk.A5EHX6OY.js";
+
+// src/react/card/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-card";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsCard,
+  react: React,
+  events: {},
+  displayName: "CsCard"
+});
+var card_default = reactWrapper;
+
+export {
+  card_default
+};

package/dist/bundled/chunks/chunk.QWLV33XH.js

@@ -0,0 +1,231 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  toast_item_styles_default
+} from "./chunk.T7EKZIDD.js";
+import {
+  CsShowEvent
+} from "./chunk.OHWXBE4I.js";
+import {
+  CsHideEvent
+} from "./chunk.G47LTZSQ.js";
+import {
+  CsAfterHideEvent
+} from "./chunk.VDB55CV4.js";
+import {
+  CsAfterShowEvent
+} from "./chunk.THHZUGMM.js";
+import {
+  HasSlotController
+} from "./chunk.YOR3JGWL.js";
+import {
+  size_styles_default
+} from "./chunk.SAR7EXUK.js";
+import {
+  variants_styles_default
+} from "./chunk.OFY4EL2M.js";
+import {
+  animateWithClass
+} from "./chunk.AGC46MZE.js";
+import {
+  e as e2
+} from "./chunk.TNGBYKYZ.js";
+import {
+  CornerstoneElement,
+  customElement,
+  e,
+  n,
+  r
+} from "./chunk.INTFG23Q.js";
+import {
+  LocalizeController
+} from "./chunk.MR5FUVOU.js";
+import {
+  b
+} from "./chunk.3LJH5JH3.js";
+import {
+  __decorateClass
+} from "./chunk.A5EHX6OY.js";
+
+// src/components/toast-item/toast-item.ts
+var CsToastItem = class extends CornerstoneElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "icon");
+    this.localize = new LocalizeController(this);
+    this.animationFrame = null;
+    this.startTime = null;
+    this.isHovering = false;
+    this.isFocused = false;
+    this.timeLeft = 100;
+    this.variant = "neutral";
+    this.size = "m";
+    this.duration = 5e3;
+    this.ssrIcon = false;
+    this.tick = () => {
+      if (!this.startTime) {
+        return;
+      }
+      const elapsed = performance.now() - this.startTime;
+      const progress = Math.min(elapsed / this.duration, 1);
+      this.timeLeft = 100 * (1 - progress);
+      if (progress < 1) {
+        this.animationFrame = requestAnimationFrame(this.tick);
+      } else {
+        this.hide();
+      }
+    };
+    this.handlePointerEnter = (event) => {
+      if (event.pointerType === "mouse" || event.pointerType === "pen") {
+        this.isHovering = true;
+        this.pauseTimer();
+      }
+    };
+    this.handlePointerLeave = () => {
+      if (this.isHovering) {
+        this.isHovering = false;
+        this.resumeTimer();
+      }
+    };
+    this.handleFocusIn = () => {
+      this.isFocused = true;
+      this.pauseTimer();
+    };
+    this.handleFocusOut = () => {
+      this.isFocused = false;
+      this.resumeTimer();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerenter", this.handlePointerEnter);
+    this.addEventListener("pointerleave", this.handlePointerLeave);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopTimer();
+    this.removeEventListener("pointerenter", this.handlePointerEnter);
+    this.removeEventListener("pointerleave", this.handlePointerLeave);
+  }
+  /** @internal Starts the toast item's timer and shows it. Called by the parent toast component. */
+  async startTimer() {
+    const showEvent = new CsShowEvent();
+    this.dispatchEvent(showEvent);
+    if (showEvent.defaultPrevented) {
+      return;
+    }
+    await this.updateComplete;
+    await animateWithClass(this.toastItemElement, "show");
+    this.dispatchEvent(new CsAfterShowEvent());
+    if (this.duration > 0 && Number.isFinite(this.duration)) {
+      this.startTime = performance.now();
+      this.timeLeft = 100;
+      this.tick();
+    }
+  }
+  /** @internal Stops the toast item's timer. */
+  stopTimer() {
+    if (this.animationFrame !== null) {
+      cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+  }
+  /** Hides the toast item with animation and removes it from the DOM. */
+  async hide() {
+    this.stopTimer();
+    const hideEvent = new CsHideEvent();
+    this.dispatchEvent(hideEvent);
+    if (hideEvent.defaultPrevented) {
+      return;
+    }
+    await animateWithClass(this.toastItemElement, "hide");
+    this.dispatchEvent(new CsAfterHideEvent());
+    this.remove();
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  pauseTimer() {
+    this.stopTimer();
+    this.timeLeft = 100;
+  }
+  resumeTimer() {
+    if (!this.isHovering && !this.isFocused && this.duration > 0) {
+      this.startTime = performance.now();
+      this.tick();
+    }
+  }
+  render() {
+    const hasIcon = this.hasSlotController.test("icon", "ssrIcon");
+    const hasDuration = this.duration > 0;
+    return b`
+      <div
+        part="toast-item"
+        class=${e2({
+      "toast-item": true,
+      "toast-item--has-icon": hasIcon,
+      "toast-item--has-duration": hasDuration
+    })}
+      >
+        <div part="accent" class="accent"></div>
+
+        <div part="icon" class="icon">
+          <slot name="icon"></slot>
+        </div>
+
+        <div part="content" class="content">
+          <slot></slot>
+        </div>
+
+        <button
+          part="close-button"
+          class="close-button"
+          type="button"
+          aria-label=${this.localize.term("close")}
+          @click=${this.handleCloseClick}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
+        >
+          <cs-progress-ring
+            part="progress-ring"
+            exportparts="
+              progress-ring:progress-ring__progress-ring,
+              label:progress-ring__label,
+              track:progress-ring__track,
+              indicator:progress-ring__indicator
+            "
+            value=${this.timeLeft}
+            aria-hidden="true"
+          >
+            <cs-icon part="close-icon" exportparts="svg:close-icon__svg" name="close" library="system"></cs-icon>
+          </cs-progress-ring>
+        </button>
+      </div>
+    `;
+  }
+};
+CsToastItem.css = [toast_item_styles_default, variants_styles_default, size_styles_default];
+__decorateClass([
+  e(".toast-item")
+], CsToastItem.prototype, "toastItemElement", 2);
+__decorateClass([
+  r()
+], CsToastItem.prototype, "timeLeft", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsToastItem.prototype, "variant", 2);
+__decorateClass([
+  n({ reflect: true })
+], CsToastItem.prototype, "size", 2);
+__decorateClass([
+  n({ type: Number })
+], CsToastItem.prototype, "duration", 2);
+__decorateClass([
+  n({ attribute: "ssr-icon", type: Boolean })
+], CsToastItem.prototype, "ssrIcon", 2);
+CsToastItem = __decorateClass([
+  customElement("cs-toast-item")
+], CsToastItem);
+
+export {
+  CsToastItem
+};

package/dist/bundled/chunks/chunk.QZZ5MJHP.js

@@ -0,0 +1,26 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  i
+} from "./chunk.SIBGI35S.js";
+
+// src/components/tab-panel/tab-panel.styles.ts
+var tab_panel_styles_default = i`
+  :host {
+    --padding: 0;
+
+    display: none;
+  }
+
+  :host([active]) {
+    display: block;
+  }
+
+  .tab-panel {
+    display: block;
+    padding: var(--padding);
+  }
+`;
+
+export {
+  tab_panel_styles_default
+};

package/dist/bundled/chunks/chunk.R3BPS6F6.js

@@ -0,0 +1,30 @@
+/*! Cornerstone Components 0.1.1 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  o,
+  require_react
+} from "./chunk.WI5RWL65.js";
+import {
+  CsInput
+} from "./chunk.VR66BPGK.js";
+import {
+  __toESM
+} from "./chunk.A5EHX6OY.js";
+
+// src/react/input/index.ts
+var React = __toESM(require_react(), 1);
+var tagName = "cs-input";
+var reactWrapper = o({
+  tagName,
+  elementClass: CsInput,
+  react: React,
+  events: {
+    onCsClear: "cs-clear",
+    onCsInvalid: "cs-invalid"
+  },
+  displayName: "CsInput"
+});
+var input_default = reactWrapper;
+
+export {
+  input_default
+};