@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Text/src/Text.js

@@ -0,0 +1,327 @@
+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/Text/src/Text.ts
+import { html as html2 } 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/Text/src/Text.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';
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --leading-relaxed: 1.625;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --color-text-tertiary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  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-leading: initial;
+      --tw-font-weight: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Text_default = styles2;
+
+// components/Text/src/Text.props.ts
+var textSizeValues = {
+  SM: "sm",
+  BASE: "base",
+  LG: "lg",
+  XL: "xl"
+};
+var textSizeProps = enumCreator(Object.values(textSizeValues), "size", String, { reflect: true });
+var textWeightValues = {
+  NORMAL: "normal",
+  MEDIUM: "medium",
+  SEMIBOLD: "semibold",
+  BOLD: "bold"
+};
+var textWeightProps = enumCreator(Object.values(textWeightValues), "weight", String, { reflect: true });
+var textColorValues = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  TERTIARY: "tertiary"
+};
+var textColorProps = enumCreator(Object.values(textColorValues), "color", 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/Text/src/Text.styles.ts
+var sizeClasses = {
+  [textSizeValues.SM]: "text-sm",
+  [textSizeValues.BASE]: "text-base",
+  [textSizeValues.LG]: "text-lg",
+  [textSizeValues.XL]: "text-xl"
+};
+var weightClasses = {
+  [textWeightValues.NORMAL]: "font-normal",
+  [textWeightValues.MEDIUM]: "font-medium",
+  [textWeightValues.SEMIBOLD]: "font-semibold",
+  [textWeightValues.BOLD]: "font-bold"
+};
+var colorClasses = {
+  [textColorValues.PRIMARY]: "text-text-primary",
+  [textColorValues.SECONDARY]: "text-text-secondary",
+  [textColorValues.TERTIARY]: "text-text-tertiary"
+};
+var classNames = (size, weight, color) => clsx_default("font-sans", "leading-relaxed", sizeClasses[size], weightClasses[weight], colorClasses[color]);
+
+// components/Text/src/Text.ts
+class Text extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.size = textSizeValues.BASE;
+    this.weight = textWeightValues.NORMAL;
+    this.color = textColorValues.PRIMARY;
+  }
+  static styles = [Base.styles, Text_default];
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    return html2`<p class="${classNames(this.size, this.weight, this.color)}">
+      <slot></slot>
+    </p>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Text.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...textSizeProps })
+], Text.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ ...textWeightProps })
+], Text.prototype, "weight", undefined);
+__legacyDecorateClassTS([
+  property({ ...textColorProps })
+], Text.prototype, "color", undefined);
+defineElement("dsgn-text", Text);
+export {
+  Text
+};

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

@@ -0,0 +1,23 @@
+export declare const textSizeValues: {
+    readonly SM: "sm";
+    readonly BASE: "base";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type TextSizeType = (typeof textSizeValues)[keyof typeof textSizeValues];
+export declare const textSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const textWeightValues: {
+    readonly NORMAL: "normal";
+    readonly MEDIUM: "medium";
+    readonly SEMIBOLD: "semibold";
+    readonly BOLD: "bold";
+};
+export type TextWeightType = (typeof textWeightValues)[keyof typeof textWeightValues];
+export declare const textWeightProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const textColorValues: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+};
+export type TextColorType = (typeof textColorValues)[keyof typeof textColorValues];
+export declare const textColorProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,52 @@
+// 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/Text/src/Text.props.ts
+var textSizeValues = {
+  SM: "sm",
+  BASE: "base",
+  LG: "lg",
+  XL: "xl"
+};
+var textSizeProps = enumCreator(Object.values(textSizeValues), "size", String, { reflect: true });
+var textWeightValues = {
+  NORMAL: "normal",
+  MEDIUM: "medium",
+  SEMIBOLD: "semibold",
+  BOLD: "bold"
+};
+var textWeightProps = enumCreator(Object.values(textWeightValues), "weight", String, { reflect: true });
+var textColorValues = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  TERTIARY: "tertiary"
+};
+var textColorProps = enumCreator(Object.values(textColorValues), "color", String, { reflect: true });
+export {
+  textColorProps,
+  textColorValues,
+  textSizeProps,
+  textSizeValues,
+  textWeightProps,
+  textWeightValues
+};

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

@@ -0,0 +1,2 @@
+import { type TextColorType, type TextSizeType, type TextWeightType } from './Text.props.js';
+export declare const classNames: (size: TextSizeType, weight: TextWeightType, color: TextColorType) => string;

package/dist/playground/types.d.ts

@@ -0,0 +1,29 @@
+/** Public metadata used by documentation renderers to build live component controls. */
+export type PlaygroundControl = 'boolean' | 'select' | 'text';
+export interface PlaygroundProp {
+    name: string;
+    attribute: string;
+    control: PlaygroundControl;
+    default: boolean | string;
+    label: string;
+    options?: readonly string[];
+    includeDefault?: boolean;
+}
+export interface PlaygroundSlot {
+    name?: string;
+    default: string;
+    label: string;
+}
+/** A real component composed into a parent playground slot. */
+export interface PlaygroundNestedComponent {
+    tag: string;
+    slot: string;
+    label: string;
+}
+export interface PlaygroundDefinition {
+    tag: string;
+    module: string;
+    props: readonly PlaygroundProp[];
+    slots: readonly PlaygroundSlot[];
+    nested?: readonly PlaygroundNestedComponent[];
+}

package/dist/playground-manifest.d.ts

@@ -0,0 +1,6 @@
+export interface PlaygroundProp { name: string; attribute: string; control: 'boolean' | 'select' | 'text'; default: boolean | string; label: string; options?: readonly string[]; includeDefault?: boolean; }
+export interface PlaygroundSlot { name?: string; default: string; label: string; }
+export interface PlaygroundNestedComponent { tag: string; slot: string; label: string; }
+export interface PlaygroundDefinition { tag: string; module: string; props: readonly PlaygroundProp[]; slots: readonly PlaygroundSlot[]; nested?: readonly PlaygroundNestedComponent[]; }
+export declare const playgroundManifest: PlaygroundDefinition[];
+export default playgroundManifest;