@ds-gn/ui 0.5.3 → 0.6.0

package/dist/components/Callout/src/Callout.props.js

@@ -0,0 +1,35 @@
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// components/Callout/src/Callout.props.ts
+var calloutToneValues = {
+  NOTE: "note",
+  TIP: "tip",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+var calloutToneProps = enumCreator(Object.values(calloutToneValues), "tone", String, { reflect: true });
+export {
+  calloutToneProps,
+  calloutToneValues
+};

package/dist/components/Callout/src/Callout.styles.d.ts

@@ -0,0 +1,5 @@
+import { type CalloutToneType } from './Callout.props.js';
+export declare const classNames: (tone: CalloutToneType) => string;
+export declare const iconClassNames: (tone: CalloutToneType) => string;
+export declare const contentClassNames: () => string;
+export declare const titleClassNames: () => string;

package/dist/components/CodeSnippet/src/CodeSnippet.d.ts

@@ -0,0 +1,44 @@
+import '../../../types/global.d.ts';
+import '../../Icon/src/Icon.js';
+import { Base } from '../../../common/Base/Base.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * A framed code sample with an optional filename, language label, and a copy
+ * button. Slot in a `<pre>` — plain or pre-highlighted (for example, Shiki
+ * output). The copy button copies the slotted text exactly as displayed.
+ *
+ * @slot - The code, typically a `<pre>` element.
+ * @fires dsgn-copy - Fired after the code is copied; `detail` is `{ text }`.
+ */
+export declare class CodeSnippet extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * File name shown in the header
+     */
+    filename: string;
+    /**
+     * Language label shown in the header
+     */
+    language: string;
+    /**
+     * Copy button label. The button is only rendered when a label is supplied.
+     */
+    copyLabel: string;
+    /**
+     * Label shown and announced after a successful copy
+     */
+    copiedLabel: string;
+    private _copied;
+    private _resetTimer;
+    disconnectedCallback(): void;
+    /** The text of the slotted code, as displayed. */
+    private _codeText;
+    private _handleCopy;
+    private _renderButton;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-code-snippet': CodeSnippet;
+    }
+}

package/dist/components/CodeSnippet/src/CodeSnippet.js

@@ -0,0 +1,452 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/CodeSnippet/src/CodeSnippet.ts
+import"../../Icon/src/Icon.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// components/CodeSnippet/src/CodeSnippet.ts
+import { html as html2, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+// components/Icon/src/icons/check.ts
+import { svg } from "lit";
+var check = svg`<path d="M20 6 9 17l-5-5" />`;
+// components/Icon/src/icons/copy.ts
+import { svg as svg2 } from "lit";
+var copy = svg2`<rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />`;
+// components/CodeSnippet/src/CodeSnippet.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --radius-md: 0.375rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --color-terminal-bg: var(--terminal-bg, #09090b);
+    --color-terminal-border: var(--terminal-border, #1a1a1a);
+    --color-terminal-muted: var(--terminal-muted, #a1a1aa);
+    --color-terminal-text: var(--terminal-text, #e4e4e7);
+    --color-terminal-titlebar: var(--terminal-titlebar, #0d0d0f);
+    --color-focus: inherit;
+  }
+}
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .static {
+    position: static;
+  }
+  .-m-px {
+    margin: -1px;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-px {
+    height: 1px;
+  }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .w-px {
+    width: 1px;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-\\[10px\\] {
+    border-radius: 10px;
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-terminal-border {
+    border-color: var(--color-terminal-border);
+  }
+  .bg-terminal-bg {
+    background-color: var(--color-terminal-bg);
+  }
+  .bg-terminal-titlebar {
+    background-color: var(--color-terminal-titlebar);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-\\[14px\\] {
+    padding-inline: 14px;
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-\\[12px\\] {
+    font-size: 12px;
+  }
+  .tracking-\\[0\\.02em\\] {
+    --tw-tracking: 0.02em;
+    letter-spacing: 0.02em;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-terminal-muted {
+    color: var(--color-terminal-muted);
+  }
+  .text-terminal-text {
+    color: var(--color-terminal-text);
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .\\[clip\\:rect\\(0\\,0\\,0\\,0\\)\\] {
+    clip: rect(0,0,0,0);
+  }
+  .hover\\:bg-terminal-bg {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-terminal-bg);
+      }
+    }
+  }
+  .focus-visible\\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\\:outline-focus {
+    &:focus-visible {
+      outline-color: var(--color-focus);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-tracking: initial;
+      --tw-outline-style: solid;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var CodeSnippet_default = styles2;
+
+// components/CodeSnippet/src/CodeSnippet.props.ts
+var codeSnippetCopiedResetMs = 2000;
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/CodeSnippet/src/CodeSnippet.styles.ts
+import { css as css3 } from "lit";
+var slottedStyles = css3`
+  ::slotted(pre) {
+    margin: 0 !important;
+    padding: 1rem 1.25rem !important;
+    overflow-x: auto;
+    background: transparent !important;
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: 13px;
+    line-height: 1.7;
+    tab-size: 2;
+  }
+`;
+var classNames = () => clsx_default("overflow-hidden", "rounded-[10px]", "border", "border-terminal-border", "bg-terminal-bg", "font-mono", "text-terminal-text");
+var headerClassNames = () => clsx_default("flex", "items-center", "justify-between", "gap-3", "min-h-10", "px-[14px]", "py-1.5", "border-b", "border-terminal-border", "bg-terminal-titlebar");
+var metaClassNames = () => clsx_default("flex", "min-w-0", "items-center", "gap-2", "text-[12px]", "text-terminal-muted", "tracking-[0.02em]");
+var filenameClassNames = () => clsx_default("truncate", "text-terminal-text");
+var buttonClassNames = () => clsx_default("inline-flex", "shrink-0", "items-center", "gap-1.5", "rounded-md", "border", "border-terminal-border", "bg-transparent", "px-2", "py-1", "font-sans", "text-[12px]", "text-terminal-text", "cursor-pointer", "transition-colors", "hover:bg-terminal-bg", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-focus");
+var liveRegionClassNames = () => clsx_default("absolute", "w-px", "h-px", "p-0", "-m-px", "overflow-hidden", "whitespace-nowrap", "border-0", "[clip:rect(0,0,0,0)]");
+
+// components/CodeSnippet/src/CodeSnippet.ts
+class CodeSnippet extends Base {
+  constructor() {
+    super(...arguments);
+    this.filename = "";
+    this.language = "";
+    this.copyLabel = "";
+    this.copiedLabel = "";
+    this._copied = false;
+  }
+  static styles = [Base.styles, CodeSnippet_default, slottedStyles];
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._resetTimer);
+  }
+  _codeText() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const nodes = slot?.assignedNodes({ flatten: true }) ?? [];
+    return nodes.map((node) => node.textContent ?? "").join("").replace(/^\n+|\s+$/g, "");
+  }
+  async _handleCopy() {
+    const text = this._codeText();
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+    this._copied = true;
+    this.emit("dsgn-copy", { text });
+    clearTimeout(this._resetTimer);
+    this._resetTimer = setTimeout(() => {
+      this._copied = false;
+    }, codeSnippetCopiedResetMs);
+  }
+  _renderButton() {
+    if (!this.copyLabel)
+      return nothing;
+    const label = this._copied && this.copiedLabel ? this.copiedLabel : this.copyLabel;
+    return html2`<button
+      type="button"
+      class="${buttonClassNames()}"
+      @click=${this._handleCopy}
+    >
+      <dsgn-icon
+        .icon=${this._copied ? check : copy}
+        size="sm"
+        aria-hidden="true"
+      ></dsgn-icon
+      ><span>${label}</span>
+    </button>`;
+  }
+  render() {
+    const hasHeader = this.filename || this.language || this.copyLabel;
+    return html2`<div class="${classNames()}">
+      ${hasHeader ? html2`<div class="${headerClassNames()}">
+            <span class="${metaClassNames()}">
+              ${this.filename ? html2`<span class="${filenameClassNames()}"
+                    >${this.filename}</span
+                  >` : nothing}
+              ${this.language ? html2`<span>${this.language}</span>` : nothing}
+            </span>
+            ${this._renderButton()}
+          </div>` : nothing}
+      <slot></slot>
+      <span class="${liveRegionClassNames()}" role="status" aria-live="polite"
+        >${this._copied ? this.copiedLabel : ""}</span
+      >
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ type: String })
+], CodeSnippet.prototype, "filename", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], CodeSnippet.prototype, "language", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "copy-label" })
+], CodeSnippet.prototype, "copyLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "copied-label" })
+], CodeSnippet.prototype, "copiedLabel", undefined);
+__legacyDecorateClassTS([
+  state()
+], CodeSnippet.prototype, "_copied", undefined);
+defineElement("dsgn-code-snippet", CodeSnippet);
+export {
+  CodeSnippet
+};

package/dist/components/CodeSnippet/src/CodeSnippet.props.d.ts

@@ -0,0 +1,2 @@
+/** How long the copied state stays visible before the button resets, in ms. */
+export declare const codeSnippetCopiedResetMs = 2000;

package/dist/components/CodeSnippet/src/CodeSnippet.props.js

@@ -0,0 +1,5 @@
+// components/CodeSnippet/src/CodeSnippet.props.ts
+var codeSnippetCopiedResetMs = 2000;
+export {
+  codeSnippetCopiedResetMs
+};

package/dist/components/CodeSnippet/src/CodeSnippet.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The code is consumer-owned light DOM (typically a pre-highlighted `<pre>`),
+ * so it can only be reached with `::slotted`, which has no utility equivalent.
+ * Highlighters such as Shiki paint their own background; the snippet frame
+ * owns the surface, so the slotted block is made transparent.
+ */
+export declare const slottedStyles: import("lit").CSSResult;
+export declare const classNames: () => string;
+export declare const headerClassNames: () => string;
+export declare const metaClassNames: () => string;
+export declare const filenameClassNames: () => string;
+export declare const buttonClassNames: () => string;
+export declare const liveRegionClassNames: () => string;

package/dist/react/Callout.d.ts

@@ -0,0 +1,6 @@
+import { Callout as CalloutElement } from '@ds-gn/ui/callout';
+/**
+ * React wrapper for the `<dsgn-callout>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-callout>` tag on the server and upgrades on the client.
+ */
+export declare const Callout: import("@lit/react").ReactWebComponent<CalloutElement, {}>;

package/dist/react/Callout.js

@@ -0,0 +1,13 @@
+// frameworks/react/Callout.ts
+import { Callout as CalloutElement } from "@ds-gn/ui/callout";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Callout = createComponent({
+  react: React,
+  tagName: "dsgn-callout",
+  elementClass: CalloutElement,
+  events: {}
+});
+export {
+  Callout
+};

package/dist/react/CodeSnippet.d.ts

@@ -0,0 +1,8 @@
+import { CodeSnippet as CodeSnippetElement } from '@ds-gn/ui/code-snippet';
+/**
+ * React wrapper for the `<dsgn-code-snippet>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-code-snippet>` tag on the server and upgrades on the client.
+ */
+export declare const CodeSnippet: import("@lit/react").ReactWebComponent<CodeSnippetElement, {
+    onDsgnCopy: string;
+}>;

package/dist/react/CodeSnippet.js

@@ -0,0 +1,13 @@
+// frameworks/react/CodeSnippet.ts
+import { CodeSnippet as CodeSnippetElement } from "@ds-gn/ui/code-snippet";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var CodeSnippet = createComponent({
+  react: React,
+  tagName: "dsgn-code-snippet",
+  elementClass: CodeSnippetElement,
+  events: { onDsgnCopy: "dsgn-copy" }
+});
+export {
+  CodeSnippet
+};

package/dist/react/index.d.ts

@@ -1,8 +1,10 @@
 export { Background } from './Background.js';
 export { Badge } from './Badge.js';
 export { Button } from './Button.js';
+export { Callout } from './Callout.js';
 export { Card } from './Card.js';
 export { CodeBlock } from './CodeBlock.js';
+export { CodeSnippet } from './CodeSnippet.js';
 export { Container } from './Container.js';
 export { Divider } from './Divider.js';
 export { FeatureItem } from './FeatureItem.js';

package/dist/react/index.js

@@ -2,8 +2,10 @@
 export { Background } from './Background.js';
 export { Badge } from './Badge.js';
 export { Button } from './Button.js';
+export { Callout } from './Callout.js';
 export { Card } from './Card.js';
 export { CodeBlock } from './CodeBlock.js';
+export { CodeSnippet } from './CodeSnippet.js';
 export { Container } from './Container.js';
 export { Divider } from './Divider.js';
 export { FeatureItem } from './FeatureItem.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-gn/ui",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "UI components for the DS-GN Design System",
   "type": "module",
   "exports": {
@@ -134,6 +134,16 @@
       "import": "./dist/components/Card/src/Card.props.js",
       "default": "./dist/components/Card/src/Card.props.js"
     },
+    "./callout": {
+      "types": "./dist/components/Callout/src/Callout.d.ts",
+      "import": "./dist/components/Callout/src/Callout.js",
+      "default": "./dist/components/Callout/src/Callout.js"
+    },
+    "./callout/props": {
+      "types": "./dist/components/Callout/src/Callout.props.d.ts",
+      "import": "./dist/components/Callout/src/Callout.props.js",
+      "default": "./dist/components/Callout/src/Callout.props.js"
+    },
     "./feature-item": {
       "types": "./dist/components/FeatureItem/src/FeatureItem.d.ts",
       "import": "./dist/components/FeatureItem/src/FeatureItem.js",
@@ -149,6 +159,11 @@
       "import": "./dist/components/CodeBlock/src/CodeBlock.js",
       "default": "./dist/components/CodeBlock/src/CodeBlock.js"
     },
+    "./code-snippet": {
+      "types": "./dist/components/CodeSnippet/src/CodeSnippet.d.ts",
+      "import": "./dist/components/CodeSnippet/src/CodeSnippet.js",
+      "default": "./dist/components/CodeSnippet/src/CodeSnippet.js"
+    },
     "./feature-tabs": {
       "types": "./dist/components/FeatureTabs/src/FeatureTabs.d.ts",
       "import": "./dist/components/FeatureTabs/src/FeatureTabs.js",