@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Icon/src/Icon.js

@@ -0,0 +1,303 @@
+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;
+};
+
+// 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/Icon/src/Icon.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+
+// components/Icon/src/Icon.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;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-2 {
+    stroke-width: 2;
+  }
+}
+@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 Icon_default = styles2;
+
+// components/Icon/src/Icon.props.ts
+var iconSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var iconSizeProps = enumCreator(Object.values(iconSizeValues), "size", 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/Icon/src/Icon.styles.ts
+import { css as css3 } from "lit";
+var hostStyles = css3`
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    line-height: 0;
+  }
+`;
+var baseClasses = [
+  "inline-flex",
+  "shrink-0",
+  "fill-none",
+  "stroke-current",
+  "stroke-2"
+];
+var sizeClasses = {
+  sm: ["size-4"],
+  md: ["size-5"],
+  lg: ["size-6"],
+  xl: ["size-8"]
+};
+var classNames = (size) => clsx_default(baseClasses, sizeClasses[size]);
+
+// components/Icon/src/Icon.ts
+class Icon extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.size = iconSizeValues.LG;
+    this.iconName = "";
+    this.label = "";
+  }
+  static styles = [Base.styles, hostStyles, Icon_default];
+  static _registry = {};
+  static registerIcons(registry) {
+    Icon._registry = { ...Icon._registry, ...registry };
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("iconName") && !changedProperties.has("icon")) {
+      this.icon = this.iconName ? Icon._registry[this.iconName] : undefined;
+    }
+  }
+  firstUpdated() {
+    if (this.iconName && !this.icon) {
+      this.icon = Icon._registry[this.iconName];
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    const hasLabel = !!this.label;
+    return html2`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class=${classNames(this.size)}
+        role=${hasLabel ? "img" : "presentation"}
+        aria-label=${hasLabel ? this.label : ""}
+        aria-hidden=${hasLabel ? "false" : "true"}
+      >
+        ${this.icon}
+      </svg>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Icon.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...iconSizeProps })
+], Icon.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ attribute: false })
+], Icon.prototype, "icon", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "icon-name" })
+], Icon.prototype, "iconName", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Icon.prototype, "label", undefined);
+defineElement("dsgn-icon", Icon);
+export {
+  Icon
+};

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

@@ -0,0 +1,8 @@
+export declare const iconSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type IconSizeType = (typeof iconSizeValues)[keyof typeof iconSizeValues];
+export declare const iconSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/components/Icon/src/Icon.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/Icon/src/Icon.props.ts
+var iconSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var iconSizeProps = enumCreator(Object.values(iconSizeValues), "size", String, { reflect: true });
+export {
+  iconSizeProps,
+  iconSizeValues
+};

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

@@ -0,0 +1,3 @@
+import type { IconSizeType } from './Icon.props.js';
+export declare const hostStyles: import("lit").CSSResult;
+export declare const classNames: (size: IconSizeType) => string;

package/dist/components/Icon/src/icons/arrow-left.d.ts

@@ -0,0 +1 @@
+export declare const arrowLeft: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/arrow-left.js

@@ -0,0 +1,6 @@
+// arrow-left.ts
+import { svg } from "lit";
+var arrowLeft = svg`<path d="m12 19-7-7 7-7" /><path d="M19 12H5" />`;
+export {
+  arrowLeft
+};

package/dist/components/Icon/src/icons/arrow-right.d.ts

@@ -0,0 +1 @@
+export declare const arrowRight: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/arrow-right.js

@@ -0,0 +1,6 @@
+// arrow-right.ts
+import { svg } from "lit";
+var arrowRight = svg`<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />`;
+export {
+  arrowRight
+};

package/dist/components/Icon/src/icons/calendar.d.ts

@@ -0,0 +1 @@
+export declare const calendar: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/calendar.js

@@ -0,0 +1,6 @@
+// calendar.ts
+import { svg } from "lit";
+var calendar = svg`<path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />`;
+export {
+  calendar
+};

package/dist/components/Icon/src/icons/check.d.ts

@@ -0,0 +1 @@
+export declare const check: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/check.js

@@ -0,0 +1,6 @@
+// check.ts
+import { svg } from "lit";
+var check = svg`<path d="M20 6 9 17l-5-5" />`;
+export {
+  check
+};

package/dist/components/Icon/src/icons/chevron-down.d.ts

@@ -0,0 +1 @@
+export declare const chevronDown: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/chevron-down.js

@@ -0,0 +1,6 @@
+// chevron-down.ts
+import { svg } from "lit";
+var chevronDown = svg`<path d="m6 9 6 6 6-6" />`;
+export {
+  chevronDown
+};

package/dist/components/Icon/src/icons/chevron-left.d.ts

@@ -0,0 +1 @@
+export declare const chevronLeft: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/chevron-left.js

@@ -0,0 +1,6 @@
+// chevron-left.ts
+import { svg } from "lit";
+var chevronLeft = svg`<path d="m15 18-6-6 6-6" />`;
+export {
+  chevronLeft
+};

package/dist/components/Icon/src/icons/chevron-right.d.ts

@@ -0,0 +1 @@
+export declare const chevronRight: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/chevron-right.js

@@ -0,0 +1,6 @@
+// chevron-right.ts
+import { svg } from "lit";
+var chevronRight = svg`<path d="m9 18 6-6-6-6" />`;
+export {
+  chevronRight
+};

package/dist/components/Icon/src/icons/chevron-up.d.ts

@@ -0,0 +1 @@
+export declare const chevronUp: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/chevron-up.js

@@ -0,0 +1,6 @@
+// chevron-up.ts
+import { svg } from "lit";
+var chevronUp = svg`<path d="m18 15-6-6-6 6" />`;
+export {
+  chevronUp
+};

package/dist/components/Icon/src/icons/circle-alert.d.ts

@@ -0,0 +1 @@
+export declare const circleAlert: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/circle-alert.js

@@ -0,0 +1,6 @@
+// circle-alert.ts
+import { svg } from "lit";
+var circleAlert = svg`<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`;
+export {
+  circleAlert
+};

package/dist/components/Icon/src/icons/circle-check.d.ts

@@ -0,0 +1 @@
+export declare const circleCheck: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/circle-check.js

@@ -0,0 +1,6 @@
+// circle-check.ts
+import { svg } from "lit";
+var circleCheck = svg`<circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />`;
+export {
+  circleCheck
+};

package/dist/components/Icon/src/icons/circle-x.d.ts

@@ -0,0 +1 @@
+export declare const circleX: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/circle-x.js

@@ -0,0 +1,6 @@
+// circle-x.ts
+import { svg } from "lit";
+var circleX = svg`<circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />`;
+export {
+  circleX
+};

package/dist/components/Icon/src/icons/copy.d.ts

@@ -0,0 +1 @@
+export declare const copy: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/copy.js

@@ -0,0 +1,6 @@
+// copy.ts
+import { svg } from "lit";
+var copy = svg`<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" />`;
+export {
+  copy
+};

package/dist/components/Icon/src/icons/download.d.ts

@@ -0,0 +1 @@
+export declare const download: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/download.js

@@ -0,0 +1,6 @@
+// download.ts
+import { svg } from "lit";
+var download = svg`<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" x2="12" y1="15" y2="3" />`;
+export {
+  download
+};

package/dist/components/Icon/src/icons/ellipsis-vertical.d.ts

@@ -0,0 +1 @@
+export declare const ellipsisVertical: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/ellipsis-vertical.js

@@ -0,0 +1,6 @@
+// ellipsis-vertical.ts
+import { svg } from "lit";
+var ellipsisVertical = svg`<circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" />`;
+export {
+  ellipsisVertical
+};

package/dist/components/Icon/src/icons/ellipsis.d.ts

@@ -0,0 +1 @@
+export declare const ellipsis: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/ellipsis.js

@@ -0,0 +1,6 @@
+// ellipsis.ts
+import { svg } from "lit";
+var ellipsis = svg`<circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" />`;
+export {
+  ellipsis
+};

package/dist/components/Icon/src/icons/external-link.d.ts

@@ -0,0 +1 @@
+export declare const externalLink: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/external-link.js

@@ -0,0 +1,6 @@
+// external-link.ts
+import { svg } from "lit";
+var externalLink = svg`<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />`;
+export {
+  externalLink
+};

package/dist/components/Icon/src/icons/eye-off.d.ts

@@ -0,0 +1 @@
+export declare const eyeOff: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/eye-off.js

@@ -0,0 +1,6 @@
+// eye-off.ts
+import { svg } from "lit";
+var eyeOff = svg`<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" /><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" /><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" /><path d="m2 2 20 20" />`;
+export {
+  eyeOff
+};

package/dist/components/Icon/src/icons/eye.d.ts

@@ -0,0 +1 @@
+export declare const eye: import("lit").TemplateResult<2>;

package/dist/components/Icon/src/icons/eye.js

@@ -0,0 +1,6 @@
+// eye.ts
+import { svg } from "lit";
+var eye = svg`<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" />`;
+export {
+  eye
+};

package/dist/components/Icon/src/icons/icon-names.d.ts

@@ -0,0 +1,2 @@
+export type IconName = 'arrowLeft' | 'arrowRight' | 'calendar' | 'check' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUp' | 'circleAlert' | 'circleCheck' | 'circleX' | 'copy' | 'download' | 'ellipsis' | 'ellipsisVertical' | 'externalLink' | 'eye' | 'eyeOff' | 'info' | 'loader' | 'mail' | 'menu' | 'minus' | 'pencil' | 'plus' | 'search' | 'settings' | 'trash2' | 'triangleAlert' | 'upload' | 'user' | 'x';
+export declare const iconNames: IconName[];

package/dist/components/Icon/src/icons/icon-names.js

@@ -0,0 +1,36 @@
+// Auto-generated by build/generate-icons.ts — do not edit manually
+
+export const iconNames = [
+  'arrowLeft',
+  'arrowRight',
+  'calendar',
+  'check',
+  'chevronDown',
+  'chevronLeft',
+  'chevronRight',
+  'chevronUp',
+  'circleAlert',
+  'circleCheck',
+  'circleX',
+  'copy',
+  'download',
+  'ellipsis',
+  'ellipsisVertical',
+  'externalLink',
+  'eye',
+  'eyeOff',
+  'info',
+  'loader',
+  'mail',
+  'menu',
+  'minus',
+  'pencil',
+  'plus',
+  'search',
+  'settings',
+  'trash2',
+  'triangleAlert',
+  'upload',
+  'user',
+  'x',
+];

package/dist/components/Icon/src/icons/index.d.ts

@@ -0,0 +1,34 @@
+export { arrowLeft } from './arrow-left';
+export { arrowRight } from './arrow-right';
+export { calendar } from './calendar';
+export { check } from './check';
+export { chevronDown } from './chevron-down';
+export { chevronLeft } from './chevron-left';
+export { chevronRight } from './chevron-right';
+export { chevronUp } from './chevron-up';
+export { circleAlert } from './circle-alert';
+export { circleCheck } from './circle-check';
+export { circleX } from './circle-x';
+export { copy } from './copy';
+export { download } from './download';
+export { ellipsis } from './ellipsis';
+export { ellipsisVertical } from './ellipsis-vertical';
+export { externalLink } from './external-link';
+export { eye } from './eye';
+export { eyeOff } from './eye-off';
+export type { IconName } from './icon-names';
+export { iconNames } from './icon-names';
+export { info } from './info';
+export { loader } from './loader';
+export { mail } from './mail';
+export { menu } from './menu';
+export { minus } from './minus';
+export { pencil } from './pencil';
+export { plus } from './plus';
+export { search } from './search';
+export { settings } from './settings';
+export { trash2 } from './trash-2';
+export { triangleAlert } from './triangle-alert';
+export { upload } from './upload';
+export { user } from './user';
+export { x } from './x';