@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Container/src/Container.js

@@ -0,0 +1,354 @@
+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/Container/src/Container.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);
+
+// components/Container/src/Container.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 {
+    --spacing: 0.25rem;
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-screen-2xl {
+    max-width: var(--breakpoint-2xl);
+  }
+  .max-w-screen-lg {
+    max-width: var(--breakpoint-lg);
+  }
+  .max-w-screen-md {
+    max-width: var(--breakpoint-md);
+  }
+  .max-w-screen-sm {
+    max-width: var(--breakpoint-sm);
+  }
+  .max-w-screen-xl {
+    max-width: var(--breakpoint-xl);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+  .sm\\:px-3 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\\:px-8 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\\:px-10 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+  }
+  .lg\\:px-4 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .lg\\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+  .lg\\:px-12 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 12);
+    }
+  }
+  .lg\\:px-16 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 16);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@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 {
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Container_default = styles2;
+
+// 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/Container/src/Container.props.ts
+var containerSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "2xl",
+  FULL: "full"
+};
+var containerSizeProps = enumCreator(Object.values(containerSizeValues), "size", String, { reflect: true });
+var containerPaddingValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var containerPaddingXProps = enumCreator(Object.values(containerPaddingValues), "padding-x", String, { reflect: true, attribute: "padding-x" });
+var containerPaddingYProps = enumCreator(Object.values(containerPaddingValues), "padding-y", String, { reflect: true, attribute: "padding-y" });
+
+// ../../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/Container/src/Container.styles.ts
+var baseClasses = ["mx-auto", "w-full"];
+var sizeClasses = {
+  sm: ["max-w-screen-sm"],
+  md: ["max-w-screen-md"],
+  lg: ["max-w-screen-lg"],
+  xl: ["max-w-screen-xl"],
+  "2xl": ["max-w-screen-2xl"],
+  full: ["max-w-full"]
+};
+var paddingXClasses = {
+  none: [],
+  sm: ["px-2", "sm:px-3", "lg:px-4"],
+  md: ["px-4", "sm:px-6", "lg:px-8"],
+  lg: ["px-6", "sm:px-8", "lg:px-12"],
+  xl: ["px-8", "sm:px-10", "lg:px-16"]
+};
+var paddingYClasses = {
+  none: [],
+  sm: ["py-4"],
+  md: ["py-8"],
+  lg: ["py-12"],
+  xl: ["py-16"]
+};
+var classNames = (size, paddingX, paddingY) => clsx_default(baseClasses, sizeClasses[size], paddingXClasses[paddingX], paddingYClasses[paddingY]);
+
+// components/Container/src/Container.ts
+class Container extends Base {
+  constructor() {
+    super(...arguments);
+    this.size = containerSizeValues.LG;
+    this.paddingX = containerPaddingValues.MD;
+    this.paddingY = containerPaddingValues.NONE;
+  }
+  static styles = [Base.styles, Container_default];
+  render() {
+    return html2`<div
+      class="${classNames(this.size, this.paddingX, this.paddingY)}"
+    >
+      <slot></slot>
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...containerSizeProps })
+], Container.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ ...containerPaddingXProps })
+], Container.prototype, "paddingX", undefined);
+__legacyDecorateClassTS([
+  property({ ...containerPaddingYProps })
+], Container.prototype, "paddingY", undefined);
+defineElement("dsgn-container", Container);
+export {
+  Container
+};

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

@@ -0,0 +1,20 @@
+export declare const containerSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly XXL: "2xl";
+    readonly FULL: "full";
+};
+export type ContainerSizeType = (typeof containerSizeValues)[keyof typeof containerSizeValues];
+export declare const containerSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const containerPaddingValues: {
+    readonly NONE: "none";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type ContainerPaddingType = (typeof containerPaddingValues)[keyof typeof containerPaddingValues];
+export declare const containerPaddingXProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const containerPaddingYProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,49 @@
+// 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/Container/src/Container.props.ts
+var containerSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  XXL: "2xl",
+  FULL: "full"
+};
+var containerSizeProps = enumCreator(Object.values(containerSizeValues), "size", String, { reflect: true });
+var containerPaddingValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var containerPaddingXProps = enumCreator(Object.values(containerPaddingValues), "padding-x", String, { reflect: true, attribute: "padding-x" });
+var containerPaddingYProps = enumCreator(Object.values(containerPaddingValues), "padding-y", String, { reflect: true, attribute: "padding-y" });
+export {
+  containerPaddingValues,
+  containerPaddingXProps,
+  containerPaddingYProps,
+  containerSizeProps,
+  containerSizeValues
+};

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

@@ -0,0 +1,2 @@
+import type { ContainerPaddingType, ContainerSizeType } from './Container.props.js';
+export declare const classNames: (size: ContainerSizeType, paddingX: ContainerPaddingType, paddingY: ContainerPaddingType) => string;

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

@@ -0,0 +1,23 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type DividerSpacingType } from './Divider.props.js';
+export declare class Divider extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Vertical spacing above and below the divider
+     */
+    spacing: DividerSpacingType;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-divider': Divider;
+    }
+}

package/dist/components/Divider/src/Divider.js

@@ -0,0 +1,250 @@
+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/Divider/src/Divider.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/Divider/src/Divider.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 {
+    --spacing: 0.25rem;
+    --color-outline: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+  .my-12 {
+    margin-block: calc(var(--spacing) * 12);
+  }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-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;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Divider_default = styles2;
+
+// components/Divider/src/Divider.props.ts
+var dividerSpacingValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var dividerSpacingProps = enumCreator(Object.values(dividerSpacingValues), "spacing", 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/Divider/src/Divider.styles.ts
+var baseClasses = ["border-0", "border-t", "border-outline", "h-0", "w-full"];
+var spacingClasses = {
+  [dividerSpacingValues.SM]: ["my-4"],
+  [dividerSpacingValues.MD]: ["my-8"],
+  [dividerSpacingValues.LG]: ["my-12"]
+};
+var classNames = (spacing) => clsx_default(baseClasses, spacingClasses[spacing]);
+
+// components/Divider/src/Divider.ts
+class Divider extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.spacing = dividerSpacingValues.MD;
+  }
+  static styles = [Base.styles, Divider_default];
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    return html2`<hr class="${classNames(this.spacing)}" />`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Divider.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...dividerSpacingProps })
+], Divider.prototype, "spacing", undefined);
+defineElement("dsgn-divider", Divider);
+export {
+  Divider
+};

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

@@ -0,0 +1,7 @@
+export declare const dividerSpacingValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type DividerSpacingType = (typeof dividerSpacingValues)[keyof typeof dividerSpacingValues];
+export declare const dividerSpacingProps: import("lit").PropertyDeclaration<unknown, unknown>;