@logosphere-ui/core 0.0.0-alpha.2

package/dist/formfield-d8fp9FTV.js

@@ -0,0 +1,118 @@
+import { LitElement as u, html as n, unsafeCSS as p, css as h } from "lit";
+import { property as s, state as c, customElement as m } from "lit/decorators.js";
+const _ = ":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-body-text);margin-bottom:var(--spacing-2)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:flex-start;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--focused{border-color:var(--color-primary);background-color:var(--color-body-bg)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--error{border-color:var(--color-danger);background-color:var(--color-danger-bg-subtle)}.formfield__container--disabled{background-color:var(--color-tertiary-bg);opacity:.4;cursor:not-allowed}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent}.formfield__input-area{flex:1;min-width:0}.formfield__suffix{display:flex;align-items:center;flex-shrink:0;margin-left:var(--spacing-2)}.formfield__suffix:empty{display:none}.formfield__helper{font-size:var(--font-size-sm);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:var(--font-size-sm);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-size:14px;line-height:1.5}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (e, o, l, a) => {
+  for (var i = a > 1 ? void 0 : a ? b(o, l) : o, d = e.length - 1, f; d >= 0; d--)
+    (f = e[d]) && (i = (a ? f(o, l, i) : f(i)) || i);
+  return a && i && v(o, l, i), i;
+};
+let r = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.helper = "", this.error = "", this.placeholder = "", this.size = "default", this.variant = "default", this.required = !1, this.disabled = !1, this.readonly = !1, this._focused = !1, this._hovered = !1, this.handleSlotFocus = (e) => {
+      const o = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(o.tagName) && (this._focused = !0, this.dispatchEvent(new CustomEvent("field-focus", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleSlotBlur = (e) => {
+      const o = e.target;
+      ["INPUT", "TEXTAREA", "SELECT"].includes(o.tagName) && (this._focused = !1, this.dispatchEvent(new CustomEvent("field-blur", {
+        bubbles: !0,
+        composed: !0,
+        detail: { originalEvent: e }
+      })));
+    }, this.handleMouseEnter = () => {
+      this._hovered = !0;
+    }, this.handleMouseLeave = () => {
+      this._hovered = !1;
+    }, this.handleContainerClick = (e) => {
+      const o = e.target;
+      if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(o.tagName)) return;
+      this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({ flatten: !0 }).find((i) => ["INPUT", "TEXTAREA", "SELECT"].includes(i.tagName))?.focus();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("focus", this.handleSlotFocus, !0), this.addEventListener("blur", this.handleSlotBlur, !0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", this.handleSlotFocus, !0), this.removeEventListener("blur", this.handleSlotBlur, !0);
+  }
+  render() {
+    const e = !!this.error, o = !e && !!this.helper, l = [
+      "formfield__container",
+      e ? "formfield__container--error" : "",
+      this._focused ? "formfield__container--focused" : "",
+      this._hovered ? "formfield__container--hovered" : "",
+      this.disabled ? "formfield__container--disabled" : "",
+      this.variant === "subtle" ? "formfield__container--subtle" : ""
+    ].filter(Boolean).join(" ");
+    return n`
+      <div class="formfield">
+        ${this.label ? n`
+          <label class="formfield__label">
+            ${this.label}
+            ${this.required ? n`<span class="formfield__required">*</span>` : ""}
+          </label>
+        ` : ""}
+
+        <div
+          class="${l}"
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @click=${this.handleContainerClick}
+        >
+          <div class="formfield__input-area">
+            <slot></slot>
+          </div>
+          <div class="formfield__suffix">
+            <slot name="suffix"></slot>
+          </div>
+        </div>
+
+        ${o ? n`<div class="formfield__helper">${this.helper}</div>` : ""}
+        ${e ? n`<div class="formfield__error">${this.error}</div>` : ""}
+      </div>
+    `;
+  }
+};
+r.styles = [h`${p(_)}`];
+t([
+  s({ type: String })
+], r.prototype, "label", 2);
+t([
+  s({ type: String })
+], r.prototype, "helper", 2);
+t([
+  s({ type: String })
+], r.prototype, "error", 2);
+t([
+  s({ type: String })
+], r.prototype, "placeholder", 2);
+t([
+  s({ type: String })
+], r.prototype, "size", 2);
+t([
+  s({ type: String })
+], r.prototype, "variant", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "required", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "disabled", 2);
+t([
+  s({ type: Boolean })
+], r.prototype, "readonly", 2);
+t([
+  c()
+], r.prototype, "_focused", 2);
+t([
+  c()
+], r.prototype, "_hovered", 2);
+r = t([
+  m("logosphere-formfield")
+], r);
+export {
+  r as F
+};

package/dist/formfield.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-D_7NFFoe.cjs");Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>e.FormField});

package/dist/formfield.js

@@ -0,0 +1,4 @@
+import { F } from "./formfield-d8fp9FTV.js";
+export {
+  F as FormField
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./button-CDRccsk9.cjs"),r=require("./badge-BbhaO73N.cjs"),t=require("./checkbox-CdDTRdKV.cjs"),o=require("./formfield-D_7NFFoe.cjs"),n=require("./switch-Rnnn10bn.cjs"),u=require("./breadcrumb-Cop-B1J7.cjs"),b=require("./card-n8ka8Zk-.cjs"),a=require("./input-DsIOQPGV.cjs"),c=require("./popover-C_Ob86CJ.cjs"),i=require("./text-area-DFDF5oos.cjs"),d=require("./chatbot-oRwt64d8.cjs"),p=require("./combobox-pmE7bgEL.cjs"),g=require("./datepicker-b9JGTTMx.cjs"),s=require("./download-manager-BSIMTGaK.cjs"),l=require("./modal-DQ8VFL-P.cjs"),m=require("./tab-DcjAlXzU.cjs");Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>e.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>r.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>t.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>o.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>n.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>u.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>b.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>a.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>c.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>i.TextArea});Object.defineProperty(exports,"LedsUiChatbot",{enumerable:!0,get:()=>d.LedsUiChatbot});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>p.Combobox});Object.defineProperty(exports,"LedsDatePicker",{enumerable:!0,get:()=>g.LedsDatePicker});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>s.DownloadManager});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>l.Modal});Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>m.LogosphereTab});

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./atoms/Button/index.js";
+export * from "./atoms/Badge/index.js";
+export * from "./atoms/Checkbox/index.js";
+export * from "./atoms/FormField/index.js";
+export * from "./atoms/Switch/index.js";
+export * from "./molecules/Breadcrumb/index.js";
+export * from "./molecules/Card/index.js";
+export * from "./molecules/Input/index.js";
+export * from "./molecules/Popover/index.js";
+export * from "./molecules/Textarea/index.js";
+export * from "./organisms/Chatbot/index.js";
+export * from "./organisms/Combobox/index.js";
+export * from "./organisms/DatePicker/index.js";
+export * from "./organisms/DownloadManager/index.js";
+export * from "./organisms/Modal/index.js";
+export * from "./organisms/Tab/index.js";

package/dist/index.js

@@ -0,0 +1,34 @@
+import { B as e } from "./button-C1EwOosO.js";
+import { L as t } from "./badge-DE7Tgd8Z.js";
+import { C as s } from "./checkbox-7Rb3WKGx.js";
+import { F as x } from "./formfield-d8fp9FTV.js";
+import { S as L } from "./switch-Cpl53nRW.js";
+import { B as C } from "./breadcrumb-B-4yqoJZ.js";
+import { C as h } from "./card-CUhlTJyJ.js";
+import { L as B } from "./input-ByllRq9M.js";
+import { P as i } from "./popover-D-FXdEdS.js";
+import { T as l } from "./text-area-CtZY3yLA.js";
+import { L as D } from "./chatbot-Ces7Xveb.js";
+import { C as M } from "./combobox-BJbI-Tgi.js";
+import { L as T } from "./datepicker-DFJx45C-.js";
+import { D as w } from "./download-manager-A4fOxGWJ.js";
+import { M as v } from "./modal-Bfc6WQSL.js";
+import { L as I } from "./tab-BKdN4xAz.js";
+export {
+  C as Breadcrumb,
+  e as Button,
+  h as Card,
+  s as Checkbox,
+  M as Combobox,
+  w as DownloadManager,
+  x as FormField,
+  T as LedsDatePicker,
+  D as LedsUiChatbot,
+  t as LogosphereBadge,
+  B as LogosphereInput,
+  I as LogosphereTab,
+  v as Modal,
+  i as Popover,
+  L as Switch,
+  l as TextArea
+};