@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Card/src/Card.js

@@ -0,0 +1,564 @@
+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/Card/src/Card.ts
+import"../../FeatureItem/src/FeatureItem.js";
+import { html as html2, nothing } from "lit";
+import { property } from "lit/decorators.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);
+
+// 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
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Card/src/Card.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';
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --radius-xl: 0.75rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --color-card-bg: inherit;
+    --color-card-border: inherit;
+    --color-surface-default: inherit;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --shadow-card: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .-mx-\\[1\\.5rem\\] {
+    margin-inline: calc(1.5rem * -1);
+  }
+  .-mx-\\[1rem\\] {
+    margin-inline: calc(1rem * -1);
+  }
+  .-mx-\\[2rem\\] {
+    margin-inline: calc(2rem * -1);
+  }
+  .-mt-\\[1\\.5rem\\] {
+    margin-top: calc(1.5rem * -1);
+  }
+  .-mt-\\[1rem\\] {
+    margin-top: calc(1rem * -1);
+  }
+  .-mt-\\[2rem\\] {
+    margin-top: calc(2rem * -1);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .ml-16 {
+    margin-left: calc(var(--spacing) * 16);
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .w-\\[calc\\(100\\%\\+2\\*1\\.5rem\\)\\] {
+    width: calc(100% + 2 * 1.5rem);
+  }
+  .w-\\[calc\\(100\\%\\+2\\*1rem\\)\\] {
+    width: calc(100% + 2 * 1rem);
+  }
+  .w-\\[calc\\(100\\%\\+2\\*2rem\\)\\] {
+    width: calc(100% + 2 * 2rem);
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-card-border {
+    border-color: var(--color-card-border);
+  }
+  .bg-card-bg {
+    background-color: var(--color-card-bg);
+  }
+  .bg-surface-default {
+    background-color: var(--color-surface-default);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .shadow-card {
+    --tw-shadow: inherit;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\\[box-shadow\\:var\\(--shadow-card\\)\\] {
+    box-shadow: var(--shadow-card);
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .hover\\:shadow-card {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: inherit;
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\\:\\[box-shadow\\:var\\(--shadow-card\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        box-shadow: var(--shadow-card);
+      }
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@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-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Card_default = styles2;
+
+// components/Card/src/Card.props.ts
+var cardVariantValues = {
+  ELEVATED: "elevated",
+  OUTLINED: "outlined"
+};
+var cardVariantProps = enumCreator(Object.values(cardVariantValues), "variant", String, { reflect: true });
+var cardPaddingValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var cardPaddingProps = enumCreator(Object.values(cardPaddingValues), "padding", String, { reflect: true });
+
+// ../../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/Card/src/Card.styles.ts
+var baseClasses = [
+  "box-border",
+  "bg-card-bg",
+  "rounded-xl",
+  "text-text-primary",
+  "overflow-hidden",
+  "font-sans",
+  "transition-shadow",
+  "duration-300",
+  "bg-surface-default"
+];
+var variantClasses = {
+  [cardVariantValues.ELEVATED]: ["[box-shadow:var(--shadow-card)]"],
+  [cardVariantValues.OUTLINED]: [
+    "bg-transparent",
+    "border",
+    "border-card-border",
+    "hover:[box-shadow:var(--shadow-card)]"
+  ]
+};
+var paddingClasses = {
+  [cardPaddingValues.NONE]: ["p-0"],
+  [cardPaddingValues.SM]: ["p-4"],
+  [cardPaddingValues.MD]: ["p-6"],
+  [cardPaddingValues.LG]: ["p-8"]
+};
+var mediaBleedClasses = {
+  [cardPaddingValues.NONE]: [],
+  [cardPaddingValues.SM]: ["-mt-[1rem]", "-mx-[1rem]", "w-[calc(100%+2*1rem)]"],
+  [cardPaddingValues.MD]: [
+    "-mt-[1.5rem]",
+    "-mx-[1.5rem]",
+    "w-[calc(100%+2*1.5rem)]"
+  ],
+  [cardPaddingValues.LG]: ["-mt-[2rem]", "-mx-[2rem]", "w-[calc(100%+2*2rem)]"]
+};
+var classNames = (variant, padding) => clsx_default(baseClasses, variantClasses[variant], paddingClasses[padding]);
+var mediaWrapperClasses = (padding) => clsx_default("block", "mb-4", "overflow-hidden", mediaBleedClasses[padding]);
+var badgeClasses = () => clsx_default("block", "pb-4");
+var headerClasses = () => clsx_default("block", "mb-4");
+var bodyWrapperClasses = () => clsx_default("block");
+var featuresClasses = () => clsx_default("flex", "flex-col", "gap-5", "mb-4");
+var featureRowClasses = () => clsx_default("flex", "flex-col", "gap-1");
+var bulletsClasses = () => clsx_default("flex", "flex-col", "gap-1", "mt-1", "ml-16");
+var bulletItemClasses = () => clsx_default("text-sm", "text-text-secondary", "list-disc");
+var footerWrapperClasses = () => clsx_default("block", "mt-6", "pt-4", "border-t", "border-card-border");
+
+// components/Card/src/Card.ts
+class Card extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.variant = cardVariantValues.OUTLINED;
+    this.padding = cardPaddingValues.MD;
+    this.features = [];
+  }
+  static styles = [Base.styles, Card_default];
+  get #hasBadge() {
+    return !!this.querySelector('[slot="badge"]');
+  }
+  get #hasHeading() {
+    return !!this.querySelector('[slot="heading"]');
+  }
+  #renderBadge() {
+    return this.#hasBadge ? html2`<div class="${badgeClasses()}"><slot name="badge"></slot></div>` : nothing;
+  }
+  #renderHeading() {
+    return this.#hasHeading ? html2`<div class="${headerClasses()}">
+          <slot name="heading"></slot>
+        </div>` : nothing;
+  }
+  #renderFeatures() {
+    return this.features.length > 0 ? html2`<div class="${featuresClasses()}">
+          ${this.features.map((feature) => html2`<div class="${featureRowClasses()}">
+                <dsgn-feature-item
+                  .variant=${feature.variant}
+                  .icon=${feature.icon}
+                  .surface=${this.surface}
+                  >${feature.label}</dsgn-feature-item
+                >
+                ${feature.bullets?.length ? html2`<ul class="${bulletsClasses()}">
+                      ${feature.bullets.map((bullet) => html2`<li class="${bulletItemClasses()}">
+                            ${bullet}
+                          </li>`)}
+                    </ul>` : nothing}
+              </div>`)}
+        </div>` : nothing;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    return html2`
+      <article class="${classNames(this.variant, this.padding)}">
+        <div class="${mediaWrapperClasses(this.padding)}">
+          <slot name="media"></slot>
+        </div>
+        ${this.#renderBadge()} ${this.#renderHeading()}
+        <div class="${bodyWrapperClasses()}">${this.#renderFeatures()}</div>
+        <div class="${footerWrapperClasses()}">
+          <slot name="footer"></slot>
+        </div>
+      </article>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Card.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...cardVariantProps })
+], Card.prototype, "variant", undefined);
+__legacyDecorateClassTS([
+  property({ ...cardPaddingProps })
+], Card.prototype, "padding", undefined);
+__legacyDecorateClassTS([
+  property({ attribute: false })
+], Card.prototype, "features", undefined);
+defineElement("dsgn-card", Card);
+export {
+  Card
+};

package/dist/components/Card/src/Card.playground.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundDefinition } from '../../../playground/types.js';
+export declare const playground: PlaygroundDefinition;

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

@@ -0,0 +1,22 @@
+import type { SVGTemplateResult } from 'lit';
+import type { FeatureItemVariantType } from '../../FeatureItem/src/FeatureItem.props.js';
+export interface CardFeature {
+    label: string;
+    variant: FeatureItemVariantType;
+    icon?: SVGTemplateResult;
+    bullets?: string[];
+}
+export declare const cardVariantValues: {
+    readonly ELEVATED: "elevated";
+    readonly OUTLINED: "outlined";
+};
+export type CardVariantType = (typeof cardVariantValues)[keyof typeof cardVariantValues];
+export declare const cardVariantProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const cardPaddingValues: {
+    readonly NONE: "none";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type CardPaddingType = (typeof cardPaddingValues)[keyof typeof cardPaddingValues];
+export declare const cardPaddingProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,42 @@
+// 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/Card/src/Card.props.ts
+var cardVariantValues = {
+  ELEVATED: "elevated",
+  OUTLINED: "outlined"
+};
+var cardVariantProps = enumCreator(Object.values(cardVariantValues), "variant", String, { reflect: true });
+var cardPaddingValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var cardPaddingProps = enumCreator(Object.values(cardPaddingValues), "padding", String, { reflect: true });
+export {
+  cardPaddingProps,
+  cardPaddingValues,
+  cardVariantProps,
+  cardVariantValues
+};

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

@@ -0,0 +1,11 @@
+import { type CardPaddingType, type CardVariantType } from './Card.props.js';
+export declare const classNames: (variant: CardVariantType, padding: CardPaddingType) => string;
+export declare const mediaWrapperClasses: (padding: CardPaddingType) => string;
+export declare const badgeClasses: () => string;
+export declare const headerClasses: () => string;
+export declare const bodyWrapperClasses: () => string;
+export declare const featuresClasses: () => string;
+export declare const featureRowClasses: () => string;
+export declare const bulletsClasses: () => string;
+export declare const bulletItemClasses: () => string;
+export declare const footerWrapperClasses: () => string;

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

@@ -0,0 +1,18 @@
+import '../../../types/global.d.ts';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type CSSResultGroup } from 'lit';
+export declare class CodeBlock extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    command: string;
+    output: string;
+    path: string;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-code-block': CodeBlock;
+    }
+}