ranui 0.1.10-alpha.9 → 0.2.0-alpha.0

package/dist/colorpicker-Ch67dWa_.js

@@ -0,0 +1,302 @@
+import { c as f, d as v, l as x, s as m, u as P, x as l } from "./utils-D4pPF77E.js";
+import { t as w } from "./events-C59wGdni.js";
+import { i as y, r as u } from "./signal-XHfNsQNW.js";
+import { _ as h, h as S, i as s } from "./factory-BdsO0dEW.js";
+import { a as A, n as $ } from "./ssr-DSGwPtEd.js";
+import "./input-DoraIb3x.js";
+import "./select-BmhCUTLb.js";
+import "./popover-BCvHwLZb.js";
+var _ = (e) => {
+  const { r, g: o, b: t } = C(e);
+  return g(r, o, t);
+}, C = (e) => (e[0] === "#" && (e = e.substr(1)), e.length === 3 ? {
+  r: parseInt(e[0] + e[0], 16),
+  g: parseInt(e[1] + e[1], 16),
+  b: parseInt(e[2] + e[2], 16)
+} : {
+  r: parseInt(e.substr(0, 2), 16),
+  g: parseInt(e.substr(2, 2), 16),
+  b: parseInt(e.substr(4, 2), 16)
+}), g = (e, r, o) => {
+  let t;
+  const i = Math.max(e, r, o), a = i - Math.min(e, r, o);
+  a === 0 ? t = 0 : e === i ? t = (r - o) / a % 6 : r === i ? t = (o - e) / a + 2 : t = (e - r) / a + 4, t = Math.round(t * 60), t < 0 && (t += 360);
+  const n = Math.round((i === 0 ? 0 : a / i) * 100), c = Math.round(i / 255 * 100);
+  return {
+    h: t,
+    s: n,
+    v: c
+  };
+}, d = (e, r, o) => {
+  r = r / 100, o = o / 100;
+  let t = [];
+  const i = o * r, a = e / 60, n = i * (1 - Math.abs(a % 2 - 1)), c = o - i;
+  return a >= 0 && a < 1 ? t = [
+    i,
+    n,
+    0
+  ] : a >= 1 && a < 2 ? t = [
+    n,
+    i,
+    0
+  ] : a >= 2 && a < 3 ? t = [
+    0,
+    i,
+    n
+  ] : e >= 3 && a < 4 ? t = [
+    0,
+    n,
+    i
+  ] : e >= 4 && a < 5 ? t = [
+    n,
+    0,
+    i
+  ] : e >= 5 && a <= 6 ? t = [
+    i,
+    0,
+    n
+  ] : t = [
+    0,
+    0,
+    0
+  ], {
+    r: Math.round(255 * (t[0] + c)),
+    g: Math.round(255 * (t[1] + c)),
+    b: Math.round(255 * (t[2] + c))
+  };
+}, b = (e) => {
+  const r = e.toString(16);
+  return r.length === 1 ? "0" + r : r;
+}, k = (e, r, o) => "#" + [
+  b(e),
+  b(r),
+  b(o)
+].join(""), I = /^#([\da-f]{6}|[\da-f]{3})$/i, E = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/, D = /^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),(\d{1,3}(\.\d+)?)\)$/, R = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-colorpicker{box-sizing:border-box;min-width:32px;height:32px;border-radius:var(--ran-colorpicker-border-radius, var(--ran-radius-md, 8px));border:var(--ran-colorpicker-border, 1px solid var(--ran-color-border, #d9d9d9));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:var(--ran-colorpicker-transition, border-color .2s, box-shadow .2s);background:var(--ran-colorpicker-background, var(--ran-color-bg-elevated, #ffffff));padding:3px}.ran-colorpicker:hover{border-color:var(--ran-colorpicker-border-hover, var(--ran-color-border-hover, var(--ran-gray-500)))}.ran-colorpicker-block{position:relative;border-radius:var(--ran-colorpicker-block-border-radius, var(--ran-radius-sm, 4px));width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:50% 50%}.ran-colorpicker-inner{width:100%;height:100%;border-radius:inherit}", V = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ran-color-picker-inner{box-sizing:border-box}.ran-color-picker-inner-content{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:224px;padding:12px;font-family:var(--ran-font-family, inherit)}.ran-color-picker-inner-content *,.ran-color-picker-inner-content *:before,.ran-color-picker-inner-content *:after{box-sizing:border-box}.ran-color-picker-palette{position:relative;width:100%;height:160px;border-radius:var(--ran-radius-sm, 6px);overflow:hidden;cursor:crosshair;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));touch-action:none}.ran-color-picker-saturation{position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.ran-color-picker-palette-dot{position:absolute;top:0;left:0;z-index:2;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003,0 1px 3px #00000059;pointer-events:none}.ran-color-picker-controls{display:flex;align-items:center;gap:12px}.ran-color-picker-preview{position:relative;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:12px 12px}.ran-color-picker-preview-inner{position:absolute;inset:0;border-radius:inherit}.ran-color-picker-sliders{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}.ran-color-picker-slider{position:relative;height:10px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--ran-gray-alpha-200, rgba(0, 0, 0, .09));touch-action:none}.ran-color-picker-slider-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ran-color-picker-slider-alpha{background-image:conic-gradient(var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 25%,transparent 0 50%,var(--ran-gray-alpha-100, rgba(0, 0, 0, .06)) 0 75%,transparent 0);background-size:8px 8px}.ran-color-picker-slider-alpha-track{position:absolute;inset:0;border-radius:inherit}.ran-color-picker-slider-thumb{position:absolute;top:50%;left:0;z-index:1;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0003,0 1px 3px #00000059;pointer-events:none}.ran-color-picker-input-container{display:flex;align-items:center;gap:8px}.ran-color-picker-format{flex:none;width:68px}.ran-color-picker-value{flex:1;min-width:0}", p = 360, H = class extends $ {
+  colorpicker;
+  colorpickerInner;
+  context;
+  _shadowDom;
+  _events = new w();
+  _effectDisposers = [];
+  popoverBlock;
+  popoverContent;
+  colorPickerInner;
+  colorPickerPalette;
+  colorPickerSaturation;
+  colorPickerPaletteDot;
+  colorPickerHueSlider;
+  colorPickerHueThumb;
+  colorPickerAlphaSlider;
+  colorPickerAlphaTrack;
+  colorPickerAlphaThumb;
+  colorPickerPreviewInner;
+  colorPickerValueInput;
+  colorPickerFormatSelect;
+  colorPickerPaletteSelect;
+  _activeSlider = null;
+  _format = "HEX";
+  _editingInput = !1;
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "value",
+      "sheet"
+    ];
+  }
+  constructor() {
+    super(), this._shadowDom = f(this, R);
+    const e = m(this._shadowDom, "r-popover", () => {
+      const r = s().class("ran-colorpicker-inner").part("swatch").build(), o = s().class("ran-colorpicker-block").part("block").children(r).build(), t = h("r-content").class("ran-content").build();
+      return h("r-popover").class("ran-popover").attr("trigger", "click").children(o, t).build();
+    });
+    this.popoverBlock = e, this.popoverContent = e.querySelector("r-content"), this.colorpicker = e.querySelector(".ran-colorpicker-block"), this.colorpickerInner = e.querySelector(".ran-colorpicker-inner"), this.colorpicker.setAttribute("role", "button"), this.colorpicker.setAttribute("tabindex", "0"), this.colorpicker.setAttribute("aria-haspopup", "dialog"), this.colorpicker.setAttribute("aria-label", "Choose color"), this.colorPickerPaletteSelect = !1, this.createContext();
+  }
+  get value() {
+    return this.context?.value.getter() || "";
+  }
+  set value(e) {
+    this.setAttribute("value", e);
+  }
+  get sheet() {
+    return x(this, "sheet");
+  }
+  set sheet(e) {
+    P(this, "sheet", e);
+  }
+  handlerExternalCss = () => {
+    v(this, this._shadowDom, "sheet", null, this.sheet);
+  };
+  createContext = () => {
+    const e = (r) => {
+      const [o, t] = y(r);
+      return {
+        getter: o,
+        setter: t
+      };
+    };
+    this.context = {
+      value: e(""),
+      disabled: e(!1),
+      hue: e(0),
+      saturation: e(0),
+      lightness: e(100),
+      transparency: e(100)
+    };
+  };
+  currentRgba = () => {
+    const { hue: e, saturation: r, lightness: o, transparency: t } = this.context, { r: i, g: a, b: n } = d(e.getter(), r.getter(), o.getter());
+    return {
+      r: i,
+      g: a,
+      b: n,
+      a: t.getter() / 100
+    };
+  };
+  currentValue = () => {
+    const { r: e, g: r, b: o, a: t } = this.currentRgba();
+    return t < 1 ? `rgba(${e}, ${r}, ${o}, ${Number(t.toFixed(2))})` : k(e, r, o);
+  };
+  currentDisplay = () => {
+    const { r: e, g: r, b: o, a: t } = this.currentRgba();
+    return this._format === "RGB" ? t < 1 ? `rgba(${e}, ${r}, ${o}, ${Number(t.toFixed(2))})` : `rgb(${e}, ${r}, ${o})` : k(e, r, o);
+  };
+  updateColorValue = (e) => {
+    if (e === this.context?.value.getter()) return;
+    const r = e.replace(/\s+/g, ""), o = I.exec(e), t = D.exec(r), i = E.exec(r);
+    if (o) {
+      const { h: a, s: n, v: c } = _(o[0]);
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(c), this.context.transparency.setter(100);
+    } else if (t) {
+      const { h: a, s: n, v: c } = g(Number(t[1]), Number(t[2]), Number(t[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(c), this.context.transparency.setter(Number(t[4]) * 100);
+    } else if (i) {
+      const { h: a, s: n, v: c } = g(Number(i[1]), Number(i[2]), Number(i[3]));
+      this.context.hue.setter(a), this.context.saturation.setter(n), this.context.lightness.setter(c), this.context.transparency.setter(100);
+    } else return;
+    this.setAttribute("value", e), this.context?.value.setter(e);
+  };
+  emitChange = () => {
+    const e = this.currentValue(), { r, g: o, b: t, a: i } = this.currentRgba();
+    this.context?.value.setter(e), this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        value: e,
+        hex: k(r, o, t),
+        rgb: `rgb(${r}, ${o}, ${t})`,
+        rgba: `rgba(${r}, ${o}, ${t}, ${Number(i.toFixed(2))})`,
+        alpha: Number(i.toFixed(2))
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  };
+  palettePointerDown = (e) => {
+    e.preventDefault(), this.colorPickerPaletteSelect = !0, this.updatePaletteFromEvent(e);
+  };
+  updatePaletteFromEvent = (e) => {
+    if (!this.colorPickerPalette) return;
+    const { left: r, top: o, width: t, height: i } = this.colorPickerPalette.getBoundingClientRect();
+    if (!t || !i) return;
+    const a = l(e.clientX - r, 0, t), n = l(e.clientY - o, 0, i);
+    this.context.saturation.setter(a / t * 100), this.context.lightness.setter((1 - n / i) * 100), this.emitChange();
+  };
+  sliderPointerDown = (e) => (r) => {
+    r.preventDefault(), this._activeSlider = e, this.updateSliderFromEvent(e, r);
+  };
+  updateSliderFromEvent = (e, r) => {
+    const o = e === "hue" ? this.colorPickerHueSlider : this.colorPickerAlphaSlider;
+    if (!o) return;
+    const { left: t, width: i } = o.getBoundingClientRect();
+    if (!i) return;
+    const a = l(r.clientX - t, 0, i) / i;
+    e === "hue" ? this.context.hue.setter(a * p) : this.context.transparency.setter(a * 100), this.emitChange();
+  };
+  onPointerMove = (e) => {
+    const r = e;
+    this.colorPickerPaletteSelect ? this.updatePaletteFromEvent(r) : this._activeSlider && this.updateSliderFromEvent(this._activeSlider, r);
+  };
+  initSliderA11y = (e, r, o) => {
+    e.setAttribute("role", "slider"), e.setAttribute("tabindex", "0"), e.setAttribute("aria-label", r), e.setAttribute("aria-orientation", "horizontal"), e.setAttribute("aria-valuemin", "0"), e.setAttribute("aria-valuemax", String(o));
+  };
+  sliderKeydown = (e) => (r) => {
+    const o = e === "hue" ? p : 100, t = e === "hue" ? this.context.hue : this.context.transparency, i = r.shiftKey ? 10 : 1, a = t.getter();
+    let n = a;
+    switch (r.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        n = a + i;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        n = a - i;
+        break;
+      case "Home":
+        n = 0;
+        break;
+      case "End":
+        n = o;
+        break;
+      default:
+        return;
+    }
+    r.preventDefault(), t.setter(l(n, 0, o)), this.emitChange();
+  };
+  onPointerUp = () => {
+    this.colorPickerPaletteSelect = !1, this._activeSlider = null;
+  };
+  onSwatchKeydown = (e) => {
+    (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), this.colorpicker?.click());
+  };
+  onValueInput = (e) => {
+    const r = e.target, o = e.detail?.value ?? r?.value;
+    typeof o == "string" && (this._editingInput = !0, this.updateColorValue(o.trim()), this._editingInput = !1, this.emitChange());
+  };
+  onFormatChange = (e) => {
+    const r = e.detail?.value;
+    this._format = r === "RGB" ? "RGB" : "HEX", this.syncValueInput();
+  };
+  syncValueInput = () => {
+    this._editingInput || !this.colorPickerValueInput || (this.colorPickerValueInput.value = this.currentDisplay());
+  };
+  setupEffects = () => {
+    this._effectDisposers.push(u(() => {
+      const { r: e, g: r, b: o } = d(this.context.hue.getter(), 100, 100);
+      this.colorPickerSaturation?.style.setProperty("background-color", `rgb(${e}, ${r}, ${o})`);
+    }), u(() => {
+      const e = l(this.context.saturation.getter(), 0, 100), r = l(this.context.lightness.getter(), 0, 100);
+      this.colorPickerPaletteDot?.style.setProperty("left", `${e}%`), this.colorPickerPaletteDot?.style.setProperty("top", `${100 - r}%`);
+    }), u(() => {
+      const e = this.context.hue.getter(), { r, g: o, b: t } = d(e, 100, 100);
+      this.colorPickerHueThumb?.style.setProperty("left", `${e / p * 100}%`), this.colorPickerHueThumb?.style.setProperty("background", `rgb(${r}, ${o}, ${t})`), this.colorPickerHueSlider?.setAttribute("aria-valuenow", String(Math.round(e)));
+    }), u(() => {
+      const { r: e, g: r, b: o, a: t } = this.currentRgba(), i = `rgb(${e}, ${r}, ${o})`, a = `rgba(${e}, ${r}, ${o}, ${Number(t.toFixed(3))})`;
+      this.colorPickerAlphaTrack?.style.setProperty("background", `linear-gradient(to right, rgba(${e}, ${r}, ${o}, 0), ${i})`), this.colorPickerAlphaThumb?.style.setProperty("left", `${t * 100}%`), this.colorPickerAlphaThumb?.style.setProperty("background", a), this.colorPickerPreviewInner?.style.setProperty("background", a), this.colorpickerInner?.style.setProperty("background", a), this.colorPickerAlphaSlider?.setAttribute("aria-valuenow", String(Math.round(t * 100))), this.colorPickerAlphaSlider?.setAttribute("aria-valuetext", `${Math.round(t * 100)}%`), this.syncValueInput();
+    }));
+  };
+  disposeEffects = () => {
+    for (const e of this._effectDisposers) e();
+    this._effectDisposers = [];
+  };
+  openColorPicker = () => {
+    if (this.colorPickerInner) return;
+    this.colorPickerSaturation = s().class("ran-color-picker-saturation").build(), this.colorPickerPaletteDot = s().class("ran-color-picker-palette-dot").build(), this.colorPickerPalette = s().class("ran-color-picker-palette").on("mousedown", this.palettePointerDown).children(this.colorPickerSaturation, this.colorPickerPaletteDot).build(), this.colorPickerPreviewInner = s().class("ran-color-picker-preview-inner").build();
+    const e = s().class("ran-color-picker-preview").children(this.colorPickerPreviewInner).build();
+    this.colorPickerHueThumb = s().class("ran-color-picker-slider-thumb").build(), this.colorPickerHueSlider = s().class("ran-color-picker-slider ran-color-picker-slider-hue").on("mousedown", this.sliderPointerDown("hue")).on("keydown", this.sliderKeydown("hue")).children(this.colorPickerHueThumb).build(), this.initSliderA11y(this.colorPickerHueSlider, "Hue", p), this.colorPickerAlphaTrack = s().class("ran-color-picker-slider-alpha-track").build(), this.colorPickerAlphaThumb = s().class("ran-color-picker-slider-thumb").build(), this.colorPickerAlphaSlider = s().class("ran-color-picker-slider ran-color-picker-slider-alpha").on("mousedown", this.sliderPointerDown("alpha")).on("keydown", this.sliderKeydown("alpha")).children(this.colorPickerAlphaTrack, this.colorPickerAlphaThumb).build(), this.initSliderA11y(this.colorPickerAlphaSlider, "Alpha opacity", 100);
+    const r = s().class("ran-color-picker-sliders").children(this.colorPickerHueSlider, this.colorPickerAlphaSlider).build(), o = s().class("ran-color-picker-controls").children(e, r).build();
+    this.colorPickerFormatSelect = h("r-select").class("ran-color-picker-format").attr("value", this._format).attr("defaultValue", this._format).attr("trigger", "click").children(...["HEX", "RGB"].map((a) => h("r-option").attr("value", a).text(a).build())).on("change", this.onFormatChange).build(), this.colorPickerValueInput = h("r-input").class("ran-color-picker-value").on("change", this.onValueInput).build();
+    const t = s().class("ran-color-picker-input-container").children(this.colorPickerFormatSelect, this.colorPickerValueInput).build(), i = s().class("ran-color-picker-inner-content").children(this.colorPickerPalette, o, t).build();
+    this.colorPickerInner = s().class("ran-color-picker-inner").children(S().text(V).build(), i).build(), this.popoverContent.appendChild(this.colorPickerInner), this.setupEffects(), this.syncValueInput();
+  };
+  connectedCallback() {
+    this.handlerExternalCss(), this.setAttribute("class", "ran-colorpicker"), this._events.on(this.popoverBlock, "click", this.openColorPicker), this._events.on(this.colorpicker, "keydown", this.onSwatchKeydown), this._events.on(document, "mousemove", this.onPointerMove), this._events.on(document, "mouseup", this.onPointerUp), this.value && this.updateColorValue(this.value);
+  }
+  disconnectedCallback() {
+    this._events.abort(), this.disposeEffects();
+  }
+  attributeChangedCallback(e, r, o) {
+    r !== o && (e === "value" && this.updateColorValue(o), e === "sheet" && this.handlerExternalCss());
+  }
+};
+A("r-colorpicker", H);
+export {
+  H as t
+};

package/dist/colorpicker.js

@@ -1,11 +1,5 @@
-import "./arrow-down-B_hCY3Wt.js";
-import "./index-DC5EA657.js";
-import { C, a } from "./index-CiWwvEMM.js";
-import "./index-D4y9c1Dj.js";
-import "./index-WfFw4LJT.js";
-import "./selectShadowless.js";
-import "./index-15M0olqa.js";
+import { t as r } from "./colorpicker-Ch67dWa_.js";
 export {
-  C as ColorPicker,
-  a as default
+  r as ColorPicker,
+  r as default
 };

package/dist/components/button/index.d.ts

@@ -0,0 +1,44 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+export declare class Button extends RanElement {
+    _btn: HTMLDivElement;
+    _btnContent: HTMLDivElement;
+    _iconElement?: HTMLElement;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    _events: EventManager;
+    debounceTimeId?: NodeJS.Timeout;
+    static get observedAttributes(): string[];
+    constructor();
+    get sheet(): string;
+    set sheet(value: string);
+    get disabled(): boolean | string;
+    set disabled(value: boolean | string | undefined | null);
+    get iconSize(): string;
+    set iconSize(value: string | undefined | null);
+    get icon(): string;
+    set icon(value: string | null);
+    get effect(): string;
+    set effect(value: string | null);
+    /** Visual variant: `''` (default) | `'primary'` | `'warning'` | `'text'`. Drives the `:host([type=...])` styles. */
+    get type(): string;
+    set type(value: string | null);
+    /**
+     * @description: 设置 button 的 icon
+     */
+    setIcon: () => void;
+    mousedown: (event: MouseEvent) => void;
+    mouseup: () => void;
+    keydown: (event: KeyboardEvent) => void;
+    debounceMouseEvent: () => void;
+    handlerExternalCss: () => void;
+    syncA11yState: () => void;
+    connectedCallback(): void;
+    /**
+     * @description: FIX: 修正拼写错误 disconnectCallback -> disconnectedCallback
+     * 确保组件销毁时正确移除事件监听，彻底杜绝内存泄漏。
+     */
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Button;

package/dist/components/card/index.d.ts

@@ -0,0 +1,21 @@
+import { RanElement } from '@/utils/index';
+export declare class Card extends RanElement {
+    _shadowDom: ShadowRoot;
+    _titleEl: HTMLElement;
+    _descriptionEl: HTMLElement;
+    _headerEl: HTMLElement;
+    _footerEl: HTMLElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get title(): string;
+    set title(value: string);
+    get description(): string;
+    set description(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    private _syncTitle;
+    private _syncDescription;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export default Card;

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,35 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+export interface Context {
+    checked: boolean;
+}
+export declare class Checkbox extends RanElement {
+    static formAssociated: boolean;
+    _events: EventManager;
+    _internals?: ElementInternals;
+    checkInput: HTMLInputElement;
+    checkInner: HTMLSpanElement;
+    context: Context;
+    container: HTMLElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get disabled(): boolean;
+    set disabled(value: boolean | string);
+    get value(): string;
+    set value(value: string);
+    get checked(): boolean;
+    set checked(value: boolean | string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    updateChecked: () => void;
+    syncA11yAndForm: () => void;
+    update: () => void;
+    onChange: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Checkbox;

package/dist/components/colorpicker/index.d.ts

@@ -0,0 +1,88 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+import '@/components/popover';
+import '@/components/input';
+import '@/components/select';
+export interface Context {
+    disabled: Signal<boolean>;
+    value: Signal<string>;
+    hue: Signal<number>;
+    saturation: Signal<number>;
+    lightness: Signal<number>;
+    transparency: Signal<number>;
+}
+export interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface Signal<T> {
+    getter: () => T;
+    setter: (newValue: T | ((prev: T) => T)) => void;
+}
+type ColorFormat = 'HEX' | 'RGB';
+export declare class ColorPicker extends RanElement {
+    colorpicker: HTMLDivElement;
+    colorpickerInner: HTMLDivElement;
+    context: Context;
+    _shadowDom: ShadowRoot;
+    _events: EventManager;
+    _effectDisposers: Array<() => void>;
+    popoverBlock: HTMLElement;
+    popoverContent: HTMLElement;
+    colorPickerInner?: HTMLDivElement;
+    colorPickerPalette?: HTMLElement;
+    colorPickerSaturation?: HTMLElement;
+    colorPickerPaletteDot?: HTMLElement;
+    colorPickerHueSlider?: HTMLElement;
+    colorPickerHueThumb?: HTMLElement;
+    colorPickerAlphaSlider?: HTMLElement;
+    colorPickerAlphaTrack?: HTMLElement;
+    colorPickerAlphaThumb?: HTMLElement;
+    colorPickerPreviewInner?: HTMLElement;
+    colorPickerValueInput?: HTMLElement;
+    colorPickerFormatSelect?: HTMLElement;
+    colorPickerPaletteSelect: boolean;
+    _activeSlider: 'hue' | 'alpha' | null;
+    _format: ColorFormat;
+    _editingInput: boolean;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string;
+    set value(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    createContext: () => void;
+    currentRgba: () => RGBA;
+    /** Canonical string used for the `value` attribute and `change` events. */
+    currentValue: () => string;
+    /** String shown in the value input, depending on the selected format. */
+    currentDisplay: () => string;
+    updateColorValue: (value: string) => void;
+    /** Sync the `value` attribute to the live color and emit a `change` event. */
+    emitChange: () => void;
+    palettePointerDown: (e: MouseEvent) => void;
+    updatePaletteFromEvent: (e: MouseEvent) => void;
+    sliderPointerDown: (kind: "hue" | "alpha") => (e: MouseEvent) => void;
+    updateSliderFromEvent: (kind: "hue" | "alpha", e: MouseEvent) => void;
+    onPointerMove: (e: Event) => void;
+    /** Make a slider a focusable, described `role="slider"`; valuenow is kept live in setupEffects. */
+    initSliderA11y: (el: HTMLElement, label: string, max: number) => void;
+    /** Arrow keys adjust the hue/alpha slider (Shift = coarse step, Home/End = ends). */
+    sliderKeydown: (kind: "hue" | "alpha") => (e: KeyboardEvent) => void;
+    onPointerUp: () => void;
+    /** Open the picker from the keyboard: Enter/Space act like a click on the swatch. */
+    onSwatchKeydown: (e: KeyboardEvent) => void;
+    onValueInput: (e: Event) => void;
+    onFormatChange: (e: Event) => void;
+    syncValueInput: () => void;
+    setupEffects: () => void;
+    disposeEffects: () => void;
+    openColorPicker: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string, next: string): void;
+}
+export default ColorPicker;

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,32 @@
+import { RanElement } from '@/utils/index';
+export declare enum ARROW_TYPE {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export declare class Dropdown extends RanElement {
+    dropdown: HTMLElement;
+    _slot: HTMLSlotElement;
+    _shadowDom: ShadowRoot;
+    arrowIcon?: HTMLElement;
+    container: HTMLElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get transit(): string;
+    set transit(value: string);
+    get arrow(): string;
+    set arrow(value: string);
+    get show(): string;
+    set show(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    handlerTransit: () => void;
+    handlerArrow: () => void;
+    stopPropagation: (e: Event) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export default Dropdown;

package/dist/components/form/index.d.ts

@@ -0,0 +1,15 @@
+import { RanElement } from '@/utils/index';
+export declare class Form extends RanElement {
+    _form: HTMLFormElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string | null;
+    set value(value: string | null);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Form;

package/dist/components/icon/index.d.ts

@@ -0,0 +1,58 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+/** Register one icon. Consumer controls what gets bundled by what it imports. */
+export declare const registerIcon: (name: string, source: unknown) => void;
+/** Batch register icons. */
+export declare const registerIcons: (icons: Record<string, unknown>) => void;
+export declare class Icon extends RanElement {
+    private readonly isDev;
+    _events: EventManager;
+    static get observedAttributes(): string[];
+    _icon?: SVGElement;
+    _div: HTMLElement;
+    _shadowDom: ShadowRoot;
+    _onIconRegistered: (event: Event) => void;
+    constructor();
+    get name(): string;
+    set name(value: string);
+    get size(): string;
+    set size(value: string);
+    get color(): string;
+    set color(value: string);
+    get spin(): boolean;
+    set spin(value: boolean);
+    get decorative(): boolean;
+    set decorative(value: boolean);
+    get ariaLabel(): string;
+    set ariaLabel(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    syncA11y: () => void;
+    /**
+     * @description: 设置 icon 的 svg
+     * @return {*}
+     */
+    setIcon: () => void;
+    isSvgText: (value: string) => boolean;
+    parseSvg: (svgContent: string) => SVGElement | undefined;
+    renderSvg: (svgContent: string, iconName: string) => void;
+    /**
+     * @description: 设置 icon 的大小
+     * @return {*}
+     */
+    setSize: () => void;
+    /**
+     * @description: 设置 icon 的颜色
+     * @return {*}
+     */
+    setColor: () => void;
+    /**
+     * @description: 设置 icon 是否旋转
+     * @return {*}
+     */
+    setSpin: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/image/index.d.ts

@@ -0,0 +1,25 @@
+import { RanElement } from '@/utils/index';
+export declare class ImageElement extends RanElement {
+    static get observedAttributes(): string[];
+    _image: HTMLImageElement | undefined;
+    _container: Element;
+    _shadowDom: ShadowRoot;
+    constructor();
+    get fallback(): string;
+    set fallback(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    /**
+     * Alternative text forwarded to the inner `<img>`. Defaults to `''` (empty),
+     * which marks the image decorative so screen readers skip it — better than a
+     * missing alt, where they announce the file name/URL. Set a description for
+     * meaningful images.
+     */
+    get alt(): string;
+    set alt(value: string);
+    handlerExternalCss: () => void;
+    listenFallback(name: string, value: string | null): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export default ImageElement;