neko-ui 2.8.21 → 2.8.23

package/es/tabs/examples/disabled-tab.md

@@ -0,0 +1,34 @@
+---
+title: 禁用某一项。
+description: 禁用某一项。
+order: 2
+---
+
+```html
+<n-tabs></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+      disabled: i === 1,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+      disabled: i === 1,
+    };
+  })}
+/>
+```

package/es/tabs/examples/disabled.md

@@ -0,0 +1,33 @@
+---
+title: 只读模式
+description: 禁止任何操作。
+order: 8
+---
+
+```html
+<n-tabs disabled="true"></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  });
+</script>
+```
+
+```jsx
+<n-tabs
+  disabled={true}
+  items={new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: `Content of Tab Pane ${i + 1}`,
+    };
+  })}
+/>
+```

package/es/tabs/examples/extra.md

@@ -0,0 +1,65 @@
+---
+title: 附加内容
+description: 可以在页签两边添加附加操作
+order: 4
+---
+
+```html
+<n-tabs></n-tabs>
+<script>
+  const el = container.querySelector('n-tabs');
+
+  el.extra = {
+    left: () => {
+      const btn = document.createElement('n-button');
+
+      btn.textContent = 'Left';
+      btn.size = 'small';
+      return btn;
+    },
+    right: () => {
+      const btn = document.createElement('n-button');
+
+      btn.textContent = 'Right';
+      btn.size = 'small';
+      return btn;
+    },
+  };
+  el.items = new Array(3).fill(0).map((_, i) => {
+    return {
+      value: i + 1,
+      label: `Tab ${i + 1}`,
+      content: () => {
+        const md = document.createElement('n-md');
+
+        md.textContent = `!> Content of Tab Pane ${i + 1}`;
+        return md;
+      },
+    };
+  });
+</script>
+```
+
+```jsx
+function Demo() {
+  const Content = (props) => {
+    return <n-md>!> Content of Tab Pane {props.idx}</n-md>;
+  };
+
+  return (
+    <n-tabs
+      extra={{
+        left: () => <n-button size="small">Left</n-button>,
+        right: () => <n-button size="small">Right</n-button>,
+      }}
+      items={new Array(3).fill(0).map((_, i) => {
+        return {
+          value: i + 1,
+          label: `Tab ${i + 1}`,
+          content: () => <Content idx={i + 1} />,
+        };
+      })}
+    />
+  );
+}
+```

package/es/tabs/index.js

@@ -1,4 +1,4 @@
-import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=t("<style> "),u=t("<style>"),c=t(`<n-button class="tab add">＋`,!0,!1),m=t('<div><div class="items">'),p=t('<div class="content">'),b=t(`<span class="remove">⛌`),g=t("<n-button>",!0,!1);import{For as h,Show as $,createEffect as _,createMemo as w,createSignal as L,mergeProps as x,onCleanup as y,onMount as j,untrack as k}from"solid-js";import C from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as W}from"@moneko/css";import{customElement as A}from"solid-element";import{addCss as N,btnCss as V,style as D}from"./style";import{FieldName as O}from"../basic-config";import"../button";import P from"../get-options";import X from"../theme";function F(t){let n,x,A;let{baseStyle:F,isDark:S}=X,[Y,q]=L(),[z,B]=L(""),[G,H]=L({left:!1,right:!1}),I=w(()=>S()?T`
+import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";import{setAttribute as i}from"solid-js/web";import{insert as l}from"solid-js/web";import{getOwner as o}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as n}from"solid-js/web";import{createComponent as s}from"solid-js/web";import{className as a}from"solid-js/web";import{classList as d}from"solid-js/web";import{addEventListener as v}from"solid-js/web";let f=t("<style> "),u=t("<style>"),c=t(`<n-button class="tab add">＋`,!0,!1),m=t('<div><div class="items">'),p=t('<div class="content">'),b=t(`<span class="remove">⛌`),g=t("<n-button>",!0,!1);import{createEffect as h,createMemo as $,createSignal as _,For as w,mergeProps as L,onCleanup as x,onMount as y,Show as j,untrack as k}from"solid-js";import C from"@moneko/common/lib/isFunction";import E from"@moneko/common/lib/passiveSupported";import{css as T,cx as W}from"@moneko/css";import{customElement as A}from"solid-element";import{FieldName as N}from"../basic-config";import V from"../get-options";import D from"../theme";import{addCss as O,btnCss as P,style as X}from"./style";import"../button";function F(t){let n,L,A;let{baseStyle:F,isDark:S}=D,[Y,q]=_(),[z,B]=_(""),[G,H]=_({left:!1,right:!1}),I=$(()=>S()?T`
         :host {
           --tab-current-bg: var(--component-bg);
           --tab-bg: rgb(255 255 255 / 4%);
@@ -8,5 +8,5 @@ import{use as e}from"solid-js/web";import{template as t}from"solid-js/web";impor
         --tab-bg: var(--primary-details-bg);
         --tab-current-bg: var(--component-bg);
       }
-    `),J=w(()=>Object.assign({},O,t.fieldNames)),K=w(()=>P(t.items,J())),M=w(()=>K().find(e=>e[J().value]===Y()));function Q(e,i){if(!t.disabled&&!e.disabled){let l=e[J().value];void 0===t.value&&q(l),C(t.onChange)&&t.onChange(l,e,i)}}function R(e,t){"Enter"===t.key&&Q(e,t)}function U(e,i,l){l.stopPropagation(),l.preventDefault(),C(t.onEdit)&&t.onEdit(e,i,l)}function Z(e){if(A){var t;let i=n.offsetWidth,l=(null==x?void 0:x.offsetWidth)||0,o=A.scrollWidth;if(o>i-l){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let i=A.scrollLeft+t;A.scrollTo({left:i}),H({left:i>0,right:o>i+A.offsetWidth})}else H({left:!1,right:!1});let r=null==(t=k(M))?void 0:t.ref;B(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-A.scrollLeft+A.offsetLeft}px;--s:${A.scrollLeft}px}`)}}_(()=>{let e=k(Y);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:K()[0]&&(e=K()[0][J().value]),e!==k(Y)&&q(e)}),_(()=>{var e;let t,i;let l=null==(e=M())?void 0:e.ref;l?t=setTimeout(()=>{clearTimeout(t),A&&(H({left:!1,right:!1}),A.scrollTo({left:l.offsetLeft-A.offsetLeft,behavior:"smooth"})),B(`.tabs {--w: ${l.offsetWidth}px;--left: ${l.offsetLeft-A.scrollLeft+A.offsetLeft}px;--s:${A.scrollLeft}px}`),i=setTimeout(()=>{clearTimeout(i),Z()},300)},0):B(""),y(()=>{clearTimeout(t),clearTimeout(i)})});let[ee,et]=L("slide-in");_(()=>{var e;return t.animated&&et("slide-in"),null==(e=M())?void 0:e.content});let ei=w(()=>{var e,i;return C(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(i=t.extra)?void 0:i.left}),el=w(()=>{var e,i;return C(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(i=t.extra)?void 0:i.right}),eo=w(()=>{var e;let t=null==(e=M())?void 0:e.content;return C(t)?t():t});function er(){t.animated&&et("")}return j(()=>{null==n||n.addEventListener("wheel",Z,{passive:E})}),y(()=>{null==n||n.removeEventListener("wheel",Z,!1)}),[(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=F()),e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=D,e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=z()),e})(),s($,{get when(){return t.css},get children(){let e=f(),i=e.firstChild;return r(()=>i.data=T(t.css)),e}}),(()=>{let d=m(),f=n,u=d.firstChild,p=A;return"function"==typeof f?e(f,d):n=d,l(d,s($,{get when(){return ei()},get children(){return ei()}}),u),"function"==typeof p?e(p,u):A=u,l(u,s(h,{get each(){return K()},children:(i,n)=>{let d=w(()=>t.disabled||i.disabled),{icon:f,value:u,label:c}=J(),m=w(()=>void 0!==Y()&&i[u]===Y());return(()=>{let t=g(),u=K()[n()].ref;return"function"==typeof u?e(u,t):K()[n()].ref=t,v(t,"click",Q.bind(null,i),!0),v(t,"keyup",R.bind(null,i),!0),t.link=!0,t.css=V,t._$owner=o(),l(t,()=>i[c],null),l(t,s($,{get when(){return i.closable},get children(){let e=b();return v(e,"click",U.bind(null,"remove",i),!0),e}}),null),r(e=>{let l=m()?"primary":"default",o=W("tab",i.class),r=!!m(),s=!!(m()&&0===n()),v=d()?-1:0,u=d(),c=i[f];return l!==e._v$6&&(t.type=e._v$6=l),o!==e._v$7&&a(t,e._v$7=o),r!==e._v$8&&t.classList.toggle("active",e._v$8=r),s!==e._v$9&&t.classList.toggle("first-active",e._v$9=s),v!==e._v$10&&(t.tabindex=e._v$10=v),u!==e._v$11&&(t.disabled=e._v$11=u),c!==e._v$12&&(t.icon=e._v$12=c),e},{_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0,_v$11:void 0,_v$12:void 0}),t})()}})),l(d,s($,{get when(){return t.add},get children(){let t=c(),i=x;return v(t,"click",U.bind(null,"add",void 0),!0),"function"==typeof i?e(i,t):x=t,t.link=!0,t.css=N,t._$owner=o(),t}}),null),l(d,s($,{get when(){return el()},get children(){return el()}}),null),r(e=>{let l=W("tabs",t.type,t.class),o=!!t.centered,r=t.disabled,n=!!G().left,s=!!G().right;return l!==e._v$&&a(d,e._v$=l),o!==e._v$2&&d.classList.toggle("centered",e._v$2=o),r!==e._v$3&&i(d,"aria-disabled",e._v$3=r),n!==e._v$4&&u.classList.toggle("warp-left",e._v$4=n),s!==e._v$5&&u.classList.toggle("warp-right",e._v$5=s),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),d})(),s($,{get when(){var en;return null==(en=M())?void 0:en.content},get children(){let e=p();return v(e,"animationend",er),l(e,eo),r(i=>d(e,{[ee()]:t.animated},i)),e}})]}A("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0,animated:void 0},(e,t)=>{let i=t.element,l=x({onChange(e,t,l){i.dispatchEvent(new CustomEvent("change",{detail:[e,t,l]}))},onEdit(e,t,l){i.dispatchEvent(new CustomEvent("edit",{detail:[e,t,l]}))}},e);return _(()=>{i.removeAttribute("items"),i.removeAttribute("field-names"),i.removeAttribute("css")}),s(F,l)});export default F;n(["click","keyup"]);
+    `),J=$(()=>Object.assign({},N,t.fieldNames)),K=$(()=>V(t.items,J())),M=$(()=>K().find(e=>e[J().value]===Y()));function Q(e,i){if(!t.disabled&&!e.disabled){let l=e[J().value];void 0===t.value&&q(l),C(t.onChange)&&t.onChange(l,e,i)}}function R(e,t){"Enter"===t.key&&Q(e,t)}function U(e,i,l){l.stopPropagation(),l.preventDefault(),C(t.onEdit)&&t.onEdit(e,i,l)}function Z(e){if(A){var t;let i=n.offsetWidth,l=(null==L?void 0:L.offsetWidth)||0,o=A.scrollWidth;if(o>i-l){let t=0;e&&(E||(e.stopPropagation(),e.preventDefault()),t=0!==e.deltaX?e.deltaX:e.deltaY);let i=A.scrollLeft+t;A.scrollTo({left:i}),H({left:i>0,right:o>i+A.offsetWidth})}else H({left:!1,right:!1});let r=null==(t=k(M))?void 0:t.ref;B(`.tabs {--w: ${r.offsetWidth}px;--left: ${r.offsetLeft-A.scrollLeft+A.offsetLeft}px;--s:${A.scrollLeft}px}`)}}h(()=>{let e=k(Y);void 0!==t.value?e=t.value:void 0!==t.defaultValue?e=t.defaultValue:K()[0]&&(e=K()[0][J().value]),e!==k(Y)&&q(e)}),h(()=>{var e;let t,i;let l=null==(e=M())?void 0:e.ref;l?t=setTimeout(()=>{clearTimeout(t),A&&(H({left:!1,right:!1}),A.scrollTo({left:l.offsetLeft-A.offsetLeft,behavior:"smooth"})),B(`.tabs {--w: ${l.offsetWidth}px;--left: ${l.offsetLeft-A.scrollLeft+A.offsetLeft}px;--s:${A.scrollLeft}px}`),i=setTimeout(()=>{clearTimeout(i),Z()},300)},0):B(""),x(()=>{clearTimeout(t),clearTimeout(i)})});let[ee,et]=_("slide-in");h(()=>{var e;return t.animated&&et("slide-in"),null==(e=M())?void 0:e.content});let ei=$(()=>{var e,i;return C(null==(e=t.extra)?void 0:e.left)?t.extra.left():null==(i=t.extra)?void 0:i.left}),el=$(()=>{var e,i;return C(null==(e=t.extra)?void 0:e.right)?t.extra.right():null==(i=t.extra)?void 0:i.right}),eo=$(()=>{var e;let t=null==(e=M())?void 0:e.content;return C(t)?t():t});function er(){t.animated&&et("")}return y(()=>{null==n||n.addEventListener("wheel",Z,{passive:E})}),x(()=>{null==n||n.removeEventListener("wheel",Z,!1)}),[(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=F()),e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=I()),e})(),(()=>{let e=u();return e.textContent=X,e})(),(()=>{let e=f(),t=e.firstChild;return r(()=>t.data=z()),e})(),s(j,{get when(){return t.css},get children(){let e=f(),i=e.firstChild;return r(()=>i.data=T(t.css)),e}}),(()=>{let d=m(),f=n,u=d.firstChild,p=A;return"function"==typeof f?e(f,d):n=d,l(d,s(j,{get when(){return ei()},get children(){return ei()}}),u),"function"==typeof p?e(p,u):A=u,l(u,s(w,{get each(){return K()},children:(i,n)=>{let d=$(()=>t.disabled||i.disabled),{icon:f,value:u,label:c}=J(),m=$(()=>void 0!==Y()&&i[u]===Y());return(()=>{let t=g(),u=K()[n()].ref;return"function"==typeof u?e(u,t):K()[n()].ref=t,v(t,"click",Q.bind(null,i),!0),v(t,"keyup",R.bind(null,i),!0),t.link=!0,t.css=P,t._$owner=o(),l(t,()=>i[c],null),l(t,s(j,{get when(){return i.closable},get children(){let e=b();return v(e,"click",U.bind(null,"remove",i),!0),e}}),null),r(e=>{let l=m()?"primary":"default",o=W("tab",i.class),r=!!m(),s=!!(m()&&0===n()),v=d()?-1:0,u=d(),c=i[f];return l!==e._v$6&&(t.type=e._v$6=l),o!==e._v$7&&a(t,e._v$7=o),r!==e._v$8&&t.classList.toggle("active",e._v$8=r),s!==e._v$9&&t.classList.toggle("first-active",e._v$9=s),v!==e._v$10&&(t.tabindex=e._v$10=v),u!==e._v$11&&(t.disabled=e._v$11=u),c!==e._v$12&&(t.icon=e._v$12=c),e},{_v$6:void 0,_v$7:void 0,_v$8:void 0,_v$9:void 0,_v$10:void 0,_v$11:void 0,_v$12:void 0}),t})()}})),l(d,s(j,{get when(){return t.add},get children(){let t=c(),i=L;return v(t,"click",U.bind(null,"add",void 0),!0),"function"==typeof i?e(i,t):L=t,t.link=!0,t.css=O,t._$owner=o(),t}}),null),l(d,s(j,{get when(){return el()},get children(){return el()}}),null),r(e=>{let l=W("tabs",t.type,t.class),o=!!t.centered,r=t.disabled,n=!!G().left,s=!!G().right;return l!==e._v$&&a(d,e._v$=l),o!==e._v$2&&d.classList.toggle("centered",e._v$2=o),r!==e._v$3&&i(d,"aria-disabled",e._v$3=r),n!==e._v$4&&u.classList.toggle("warp-left",e._v$4=n),s!==e._v$5&&u.classList.toggle("warp-right",e._v$5=s),e},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0,_v$5:void 0}),d})(),s(j,{get when(){var en;return null==(en=M())?void 0:en.content},get children(){let e=p();return v(e,"animationend",er),l(e,eo),r(i=>d(e,{[ee()]:t.animated},i)),e}})]}A("n-tabs",{class:void 0,css:void 0,disabled:void 0,value:void 0,defaultValue:void 0,centered:void 0,items:[],type:"line",fieldNames:void 0,add:void 0,extra:void 0,animated:void 0},(e,t)=>{let i=t.element,l=L({onChange(e,t,l){i.dispatchEvent(new CustomEvent("change",{detail:[e,t,l]}))},onEdit(e,t,l){i.dispatchEvent(new CustomEvent("edit",{detail:[e,t,l]}))}},e);return h(()=>{i.removeAttribute("items"),i.removeAttribute("field-names"),i.removeAttribute("css")}),s(F,l)});export default F;n(["click","keyup"]);
 //# sourceMappingURL=index.js.map

package/es/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  For,\n  Show,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { addCss, btnCss, style } from './style';\nimport { FieldName } from '../basic-config';\nimport '../button';\nimport getOptions from '../get-options';\nimport theme from '../theme';\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n  /** 动画\n   * @since 2.8.2\n   * @default false\n   */\n  animated?: boolean;\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef!.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef!.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    if (props.animated) {\n      setAni('slide-in');\n    }\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra!.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra!.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    if (props.animated) {\n      setAni('');\n    }\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class)}\n        classList={{\n          centered: props.centered,\n        }}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class=\"items\"\n          classList={{\n            'warp-left': wrap().left,\n            'warp-right': wrap().right,\n          }}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', item.class)}\n                  classList={{\n                    active: isActive(),\n                    'first-active': isActive() && i() === 0,\n                  }}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div\n          class=\"content\"\n          classList={{\n            [ani()]: props.animated,\n          }}\n          onAnimationEnd={onAnimationEnd}\n        >\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n    animated: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Tabs {...props} />;\n  },\n);\nexport default Tabs;\n"],"names":["For","Show","createEffect","createMemo","createSignal","mergeProps","onCleanup","onMount","untrack","isFunction","passiveSupported","css","cx","customElement","addCss","btnCss","style","FieldName","getOptions","theme","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","animated","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"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"}
+{"version":3,"sources":["../../components/tabs/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  mergeProps,\n  onCleanup,\n  onMount,\n  Show,\n  untrack,\n} from 'solid-js';\nimport { isFunction, passiveSupported } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { BaseOption, BasicConfig, ButtonElement, CustomElement } from '..';\nimport { FieldName } from '../basic-config';\nimport getOptions from '../get-options';\nimport theme from '../theme';\n\nimport { addCss, btnCss, style } from './style';\n\nimport '../button';\n\nexport interface TabsProps {\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义样式表 */\n  css?: string;\n  /** 只读 */\n  disabled?: boolean;\n  /** 值(指定值时为受控模式,配合onChange使用) */\n  value?: string | number;\n  /** 默认值 */\n  defaultValue?: string | number;\n  /** 选项数据 */\n  items?: (TabOption | string)[];\n  /** 标签页居中 */\n  centered?: boolean;\n  /** 自定义节点 'label'、'value'、'options' 的字段 */\n  fieldNames?: BasicConfig['fieldName'];\n  /** 标签页的显示类型\n   * @default 'line'\n   */\n  type?: 'line' | 'card';\n  /** 值修改时的回调方法 */\n  onChange?(val: string, item: TabOption, e: Event): void;\n  /** 显示添加按钮 */\n  add?: boolean;\n  /** 删除和添加时的回调方法 */\n  onEdit?: (type: 'add' | 'remove', item: TabOption, e: Event) => void;\n  /** 给标签页左右添加的附加内容 */\n  extra?: {\n    left?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n    right?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  };\n  /** 动画\n   * @since 2.8.2\n   * @default false\n   */\n  animated?: boolean;\n}\n\nexport interface TabOption extends Omit<BaseOption, 'options'> {\n  /** 内容 */\n  content?: JSX.Element | (() => JSX.Element | (() => JSX.Element));\n  /** 标签可关闭 */\n  closable?: boolean;\n}\n\nfunction Tabs(props: TabsProps) {\n  const { baseStyle, isDark } = theme;\n  let box: HTMLDivElement | undefined;\n  let add: ButtonElement | undefined;\n  const [value, setValue] = createSignal<string | number>();\n  const [offsetStyle, setOffsetStyle] = createSignal('');\n  const [wrap, setWrap] = createSignal({ left: false, right: false });\n  let wrapRef: HTMLDivElement | undefined;\n\n  const cssVar = createMemo(() => {\n    if (isDark()) {\n      return css`\n        :host {\n          --tab-current-bg: var(--component-bg);\n          --tab-bg: rgb(255 255 255 / 4%);\n        }\n      `;\n    }\n\n    return css`\n      :host {\n        --tab-bg: var(--primary-details-bg);\n        --tab-current-bg: var(--component-bg);\n      }\n    `;\n  });\n  const fieldNames = createMemo(() => Object.assign({}, FieldName, props.fieldNames));\n  const items = createMemo<TabOption[]>(() => {\n    return getOptions(props.items, fieldNames());\n  });\n  const current = createMemo(() => {\n    return items().find((o) => o[fieldNames().value] === value());\n  });\n\n  function onChange(item: TabOption, e: Event) {\n    if (!props.disabled && !item.disabled) {\n      const next = item[fieldNames().value];\n\n      if (props.value === void 0) {\n        setValue(next);\n      }\n      if (isFunction(props.onChange)) {\n        props.onChange(next, item, e);\n      }\n    }\n  }\n  function onKeyUp(item: TabOption, e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      onChange(item, e);\n    }\n  }\n  function handleEdit(type: 'remove' | 'add', item: TabOption | undefined, e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    if (isFunction(props.onEdit)) {\n      props.onEdit(type, item, e);\n    }\n  }\n  function handleWheel(e?: WheelEvent) {\n    if (wrapRef) {\n      const pwid = box!.offsetWidth;\n      const addWid = add?.offsetWidth || 0;\n      const scrollWidth = wrapRef.scrollWidth;\n\n      if (scrollWidth > pwid - addWid) {\n        let deltaY = 0;\n\n        if (e) {\n          if (!passiveSupported) {\n            e.stopPropagation();\n            e.preventDefault();\n          }\n          deltaY = e.deltaX !== 0 ? e.deltaX : e.deltaY;\n        }\n        const nl = wrapRef.scrollLeft + deltaY;\n\n        wrapRef.scrollTo({\n          left: nl,\n        });\n        setWrap({\n          left: nl > 0,\n          right: scrollWidth > nl + wrapRef.offsetWidth,\n        });\n      } else {\n        setWrap({\n          left: false,\n          right: false,\n        });\n      }\n      const el = untrack(current)?.ref;\n\n      setOffsetStyle(\n        `.tabs {--w: ${el.offsetWidth}px;--left: ${\n          el.offsetLeft - wrapRef.scrollLeft + wrapRef.offsetLeft\n        }px;--s:${wrapRef.scrollLeft}px}`,\n      );\n    }\n  }\n  createEffect(() => {\n    let _val = untrack(value);\n\n    if (props.value !== void 0) {\n      _val = props.value;\n    } else if (props.defaultValue !== void 0) {\n      _val = props.defaultValue;\n    } else if (items()[0]) {\n      _val = items()[0][fieldNames().value];\n    }\n    if (_val !== untrack(value)) {\n      setValue(_val);\n    }\n  });\n\n  createEffect(() => {\n    let timer: NodeJS.Timeout | undefined, whellTimer: NodeJS.Timeout | undefined;\n    const el = current()?.ref;\n\n    if (el) {\n      timer = setTimeout(() => {\n        clearTimeout(timer);\n        if (wrapRef) {\n          setWrap({\n            left: false,\n            right: false,\n          });\n          wrapRef.scrollTo({\n            left: el.offsetLeft - wrapRef.offsetLeft,\n            behavior: 'smooth',\n          });\n        }\n\n        setOffsetStyle(\n          `.tabs {--w: ${el.offsetWidth}px;--left: ${\n            el.offsetLeft - wrapRef!.scrollLeft + wrapRef!.offsetLeft\n          }px;--s:${wrapRef!.scrollLeft}px}`,\n        );\n        whellTimer = setTimeout(() => {\n          clearTimeout(whellTimer);\n          handleWheel();\n        }, 300);\n      }, 0);\n    } else {\n      setOffsetStyle('');\n    }\n    onCleanup(() => {\n      clearTimeout(timer);\n      clearTimeout(whellTimer);\n    });\n  });\n  const [ani, setAni] = createSignal('slide-in');\n\n  createEffect(() => {\n    if (props.animated) {\n      setAni('slide-in');\n    }\n    return current()?.content;\n  });\n  const left = createMemo(() =>\n    isFunction(props.extra?.left) ? (props.extra.left() as JSX.Element) : props.extra?.left,\n  );\n  const right = createMemo(() =>\n    isFunction(props.extra?.right) ? (props.extra.right() as JSX.Element) : props.extra?.right,\n  );\n  const content = createMemo(() => {\n    const _content = current()?.content;\n\n    return isFunction(_content) ? (_content() as JSX.Element) : _content;\n  });\n\n  function onAnimationEnd() {\n    if (props.animated) {\n      setAni('');\n    }\n  }\n  onMount(() => {\n    box?.addEventListener('wheel', handleWheel, {\n      passive: passiveSupported,\n    });\n  });\n  onCleanup(() => {\n    box?.removeEventListener('wheel', handleWheel, false);\n  });\n\n  return (\n    <>\n      <style textContent={baseStyle()} />\n      <style textContent={cssVar()} />\n      <style textContent={style} />\n      <style textContent={offsetStyle()} />\n      <Show when={props.css}>\n        <style textContent={css(props.css)} />\n      </Show>\n      <div\n        ref={box}\n        class={cx('tabs', props.type, props.class)}\n        classList={{\n          centered: props.centered,\n        }}\n        aria-disabled={props.disabled}\n      >\n        <Show when={left()}>{left()}</Show>\n        <div\n          ref={wrapRef}\n          class=\"items\"\n          classList={{\n            'warp-left': wrap().left,\n            'warp-right': wrap().right,\n          }}\n        >\n          <For each={items()}>\n            {(item, i) => {\n              const readOnly = createMemo(() => props.disabled || item.disabled);\n              const { icon, value: val, label } = fieldNames();\n              const isActive = createMemo(() => value() !== void 0 && item[val] === value());\n\n              return (\n                <n-button\n                  link={true}\n                  type={isActive() ? 'primary' : 'default'}\n                  class={cx('tab', item.class)}\n                  classList={{\n                    active: isActive(),\n                    'first-active': isActive() && i() === 0,\n                  }}\n                  tabindex={readOnly() ? -1 : 0}\n                  onKeyUp={onKeyUp.bind(null, item)}\n                  onClick={onChange.bind(null, item)}\n                  disabled={readOnly()}\n                  icon={item[icon]}\n                  ref={items()[i()].ref}\n                  css={btnCss}\n                >\n                  {item[label]}\n                  <Show when={item.closable}>\n                    <span class=\"remove\" onClick={handleEdit.bind(null, 'remove', item)}>\n                      ⛌\n                    </span>\n                  </Show>\n                </n-button>\n              );\n            }}\n          </For>\n        </div>\n        <Show when={props.add}>\n          <n-button\n            ref={add}\n            link={true}\n            class=\"tab add\"\n            css={addCss}\n            onClick={handleEdit.bind(null, 'add', void 0)}\n          >\n            ＋\n          </n-button>\n        </Show>\n        <Show when={right()}>{right()}</Show>\n      </div>\n      <Show when={current()?.content}>\n        <div\n          class=\"content\"\n          classList={{\n            [ani()]: props.animated,\n          }}\n          onAnimationEnd={onAnimationEnd}\n        >\n          {content()}\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport type TabsElement = CustomElement<TabsProps, 'onChange' | 'onEdit'>;\n\ncustomElement<TabsProps>(\n  'n-tabs',\n  {\n    class: void 0,\n    css: void 0,\n    disabled: void 0,\n    value: void 0,\n    defaultValue: void 0,\n    centered: void 0,\n    items: [],\n    type: 'line' as TabsProps['type'],\n    fieldNames: void 0,\n    add: void 0,\n    extra: void 0,\n    animated: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        onChange(next: string, item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('change', {\n              detail: [next, item, e],\n            }),\n          );\n        },\n        onEdit(type: 'add' | 'remove', item: TabOption, e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('edit', {\n              detail: [type, item, e],\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.removeAttribute('items');\n      el.removeAttribute('field-names');\n      el.removeAttribute('css');\n    });\n    return <Tabs {...props} />;\n  },\n);\nexport default Tabs;\n"],"names":["createEffect","createMemo","createSignal","For","mergeProps","onCleanup","onMount","Show","untrack","isFunction","passiveSupported","css","cx","customElement","FieldName","getOptions","theme","addCss","btnCss","style","Tabs","props","box","add","wrapRef","baseStyle","isDark","value","setValue","offsetStyle","setOffsetStyle","wrap","setWrap","left","right","cssVar","fieldNames","Object","assign","items","current","find","o","onChange","item","e","disabled","next","onKeyUp","key","handleEdit","type","stopPropagation","preventDefault","onEdit","handleWheel","pwid","offsetWidth","addWid","scrollWidth","deltaY","deltaX","nl","scrollLeft","scrollTo","el","ref","offsetLeft","_val","defaultValue","timer","whellTimer","setTimeout","clearTimeout","behavior","ani","setAni","animated","content","extra","_content","onAnimationEnd","addEventListener","passive","removeEventListener","i","readOnly","icon","val","label","isActive","bind","closable","class","centered","_","opt","element","dispatchEvent","CustomEvent","detail","removeAttribute"],"mappings":"woBAAA,QACEA,gBAAAA,CAAY,CACZC,cAAAA,CAAU,CACVC,gBAAAA,CAAY,CACZC,OAAAA,CAAG,CACHC,cAAAA,CAAU,CACVC,aAAAA,CAAS,CACTC,WAAAA,CAAO,CACPC,QAAAA,CAAI,CACJC,WAAAA,CAAO,KACF,UAAW,AAClB,QAASC,MAAoC,+BAAiB,AAA9D,QAAqBC,MAAwB,qCAAiB,AAC9D,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAASC,aAAAA,CAAS,KAAQ,iBAAkB,AAC5C,QAAOC,MAAgB,gBAAiB,AACxC,QAAOC,MAAW,UAAW,AAE7B,QAASC,UAAAA,CAAM,CAAEC,UAAAA,CAAM,CAAEC,SAAAA,CAAK,KAAQ,SAAU,AAEhD,OAAO,WAAY,CAgDnB,SAASC,EAAKC,CAAgB,MAExBC,EACAC,EAIAC,EANJ,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGV,EAGxB,CAACW,EAAOC,EAAS,CAAG1B,IACpB,CAAC2B,EAAaC,EAAe,CAAG5B,EAAa,IAC7C,CAAC6B,EAAMC,EAAQ,CAAG9B,EAAa,CAAE+B,KAAM,CAAA,EAAOC,MAAO,CAAA,CAAM,GAG3DC,EAASlC,EAAW,IACxB,AAAIyB,IACKf,CAAG,CAAC;;;;;MAKX,CAAC,CAGIA,CAAG,CAAC;;;;;IAKX,CAAC,EAEGyB,EAAanC,EAAW,IAAMoC,OAAOC,MAAM,CAAC,CAAC,EAAGxB,EAAWO,EAAMe,UAAU,GAC3EG,EAAQtC,EAAwB,IAC7Bc,EAAWM,EAAMkB,KAAK,CAAEH,MAE3BI,EAAUvC,EAAW,IAClBsC,IAAQE,IAAI,CAAC,AAACC,GAAMA,CAAC,CAACN,IAAaT,KAAK,CAAC,GAAKA,MAGvD,SAASgB,EAASC,CAAe,CAAEC,CAAQ,EACzC,GAAI,CAACxB,EAAMyB,QAAQ,EAAI,CAACF,EAAKE,QAAQ,CAAE,CACrC,IAAMC,EAAOH,CAAI,CAACR,IAAaT,KAAK,CAAC,AAEjB,MAAK,IAArBN,EAAMM,KAAK,EACbC,EAASmB,GAEPtC,EAAWY,EAAMsB,QAAQ,GAC3BtB,EAAMsB,QAAQ,CAACI,EAAMH,EAAMC,EAE/B,CACF,CACA,SAASG,EAAQJ,CAAe,CAAEC,CAAgB,EAClC,UAAVA,EAAEI,GAAG,EACPN,EAASC,EAAMC,EAEnB,CACA,SAASK,EAAWC,CAAsB,CAAEP,CAA2B,CAAEC,CAAQ,EAC/EA,EAAEO,eAAe,GACjBP,EAAEQ,cAAc,GACZ5C,EAAWY,EAAMiC,MAAM,GACzBjC,EAAMiC,MAAM,CAACH,EAAMP,EAAMC,EAE7B,CACA,SAASU,EAAYV,CAAc,EACjC,GAAIrB,EAAS,KA8BAhB,EA7BX,IAAMgD,EAAOlC,EAAKmC,WAAW,CACvBC,EAASnC,OAAAA,SAAAA,EAAKkC,WAAW,GAAI,EAC7BE,EAAcnC,EAAQmC,WAAW,CAEvC,GAAIA,EAAcH,EAAOE,EAAQ,CAC/B,IAAIE,EAAS,EAETf,IACGnC,IACHmC,EAAEO,eAAe,GACjBP,EAAEQ,cAAc,IAElBO,EAASf,AAAa,IAAbA,EAAEgB,MAAM,CAAShB,EAAEgB,MAAM,CAAGhB,EAAEe,MAAM,EAE/C,IAAME,EAAKtC,EAAQuC,UAAU,CAAGH,EAEhCpC,EAAQwC,QAAQ,CAAC,CACf/B,KAAM6B,CACR,GACA9B,EAAQ,CACNC,KAAM6B,EAAK,EACX5B,MAAOyB,EAAcG,EAAKtC,EAAQiC,WAAW,AAC/C,EACF,MACEzB,EAAQ,CACNC,KAAM,CAAA,EACNC,MAAO,CAAA,CACT,GAEF,IAAM+B,SAAKzD,EAAAA,EAAQgC,WAARhC,EAAkB0D,GAAG,CAEhCpC,EACE,CAAC,YAAY,EAAEmC,EAAGR,WAAW,CAAC,WAAW,EACvCQ,EAAGE,UAAU,CAAG3C,EAAQuC,UAAU,CAAGvC,EAAQ2C,UAAU,CACxD,OAAO,EAAE3C,EAAQuC,UAAU,CAAC,GAAG,CAAC,CAErC,CACF,CACA/D,EAAa,KACX,IAAIoE,EAAO5D,EAAQmB,EAEfN,AAAgB,MAAK,IAArBA,EAAMM,KAAK,CACbyC,EAAO/C,EAAMM,KAAK,CACTN,AAAuB,KAAK,IAA5BA,EAAMgD,YAAY,CAC3BD,EAAO/C,EAAMgD,YAAY,CAChB9B,GAAO,CAAC,EAAE,EACnB6B,CAAAA,EAAO7B,GAAO,CAAC,EAAE,CAACH,IAAaT,KAAK,CAAC,AAAD,EAElCyC,IAAS5D,EAAQmB,IACnBC,EAASwC,EAEb,GAEApE,EAAa,SAEAwC,MADP8B,EAAmCC,EACvC,IAAMN,SAAKzB,EAAAA,YAAAA,EAAW0B,GAAG,CAErBD,EACFK,EAAQE,WAAW,KACjBC,aAAaH,GACT9C,IACFQ,EAAQ,CACNC,KAAM,CAAA,EACNC,MAAO,CAAA,CACT,GACAV,EAAQwC,QAAQ,CAAC,CACf/B,KAAMgC,EAAGE,UAAU,CAAG3C,EAAQ2C,UAAU,CACxCO,SAAU,QACZ,IAGF5C,EACE,CAAC,YAAY,EAAEmC,EAAGR,WAAW,CAAC,WAAW,EACvCQ,EAAGE,UAAU,CAAG3C,EAASuC,UAAU,CAAGvC,EAAS2C,UAAU,CAC1D,OAAO,EAAE3C,EAASuC,UAAU,CAAC,GAAG,CAAC,EAEpCQ,EAAaC,WAAW,KACtBC,aAAaF,GACbhB,GACF,EAAG,IACL,EAAG,GAEHzB,EAAe,IAEjBzB,EAAU,KACRoE,aAAaH,GACbG,aAAaF,EACf,EACF,GACA,GAAM,CAACI,GAAKC,GAAO,CAAG1E,EAAa,YAEnCF,EAAa,SAIJwC,EAAP,OAHInB,EAAMwD,QAAQ,EAChBD,GAAO,mBAEFpC,EAAAA,YAAAA,EAAWsC,OAAO,AAC3B,GACA,IAAM7C,GAAOhC,EAAW,SACXoB,EAA2DA,SAAtEZ,SAAWY,EAAAA,EAAM0D,KAAK,SAAX1D,EAAaY,IAAI,EAAKZ,EAAM0D,KAAK,CAAC9C,IAAI,UAAqBZ,EAAAA,EAAM0D,KAAK,SAAX1D,EAAaY,IAAI,GAEnFC,GAAQjC,EAAW,SACZoB,EAA6DA,SAAxEZ,SAAWY,EAAAA,EAAM0D,KAAK,SAAX1D,EAAaa,KAAK,EAAKb,EAAM0D,KAAK,CAAC7C,KAAK,UAAqBb,EAAAA,EAAM0D,KAAK,SAAX1D,EAAaa,KAAK,GAEtF4C,GAAU7E,EAAW,SACRuC,EAAjB,IAAMwC,SAAWxC,EAAAA,YAAAA,EAAWsC,OAAO,CAEnC,OAAOrE,EAAWuE,GAAaA,IAA6BA,CAC9D,GAEA,SAASC,KACH5D,EAAMwD,QAAQ,EAChBD,GAAO,GAEX,CAUA,OATAtE,EAAQ,WACNgB,GAAAA,EAAK4D,gBAAgB,CAAC,QAAS3B,EAAa,CAC1C4B,QAASzE,CACX,EACF,GACAL,EAAU,WACRiB,GAAAA,EAAK8D,mBAAmB,CAAC,QAAS7B,EAAa,CAAA,EACjD,uDAIwB9B,8DACAU,gDACAhB,2DACAU,aACnBtB,qBAAWc,EAAMV,GAAG,8DACCA,EAAIU,EAAMV,GAAG,0BAG5BW,mBASEE,oCATFF,UAOJf,qBAAW0B,4BAASA,uCAEdT,UAOJrB,qBAAUoC,cACR,CAACK,EAAMyC,KACN,IAAMC,EAAWrF,EAAW,IAAMoB,EAAMyB,QAAQ,EAAIF,EAAKE,QAAQ,EAC3D,CAAEyC,KAAAA,CAAI,CAAE5D,MAAO6D,CAAG,CAAEC,MAAAA,CAAK,CAAE,CAAGrD,IAC9BsD,EAAWzF,EAAW,IAAM0B,AAAY,KAAK,IAAjBA,KAAsBiB,CAAI,CAAC4C,EAAI,GAAK7D,KAEtE,wBAcSY,GAAO,CAAC8C,IAAI,CAACnB,GAAG,mCAAhB3B,GAAO,CAAC8C,IAAI,CAACnB,GAAG,eAHZvB,EAASgD,IAAI,CAAC,KAAM/C,mBADpBI,EAAQ2C,IAAI,CAAC,KAAM/C,cARtB,CAAA,QAaD1B,wBAEJ0B,CAAI,CAAC6C,EAAM,aACXlF,qBAAWqC,EAAKgD,QAAQ,8CACO1C,EAAWyC,IAAI,CAAC,KAAM,SAAU/C,8BAhB1D8C,IAAa,UAAY,YACxB9E,EAAG,MAAOgC,EAAKiD,KAAK,MAEjBH,QACQA,CAAAA,KAAcL,AAAQ,IAARA,GAAQ,IAE9BC,IAAa,GAAK,IAGlBA,MACJ1C,CAAI,CAAC2C,EAAK,oXAYtB,WAGHhF,qBAAWc,EAAME,GAAG,6BAEZA,qBAII2B,EAAWyC,IAAI,CAAC,KAAM,MAAO,KAAK,mCAJtCpE,WACC,CAAA,QAEDN,iCAMRV,qBAAW2B,4BAAUA,0BA5DftB,EAAG,OAAQS,EAAM8B,IAAI,CAAE9B,EAAMwE,KAAK,MAE7BxE,EAAMyE,QAAQ,GAEXzE,EAAMyB,QAAQ,KAOZf,IAAOE,IAAI,KACVF,IAAOG,KAAK,kTAkD/B3B,kBAAWiC,iBAAAA,GAAAA,YAAAA,GAAWsC,OAAO,qDAMVG,QAEfH,aALU,CACT,CAACH,KAAM,CAAEtD,EAAMwD,QAAQ,AACzB,WAQV,CAIAhE,EACE,SACA,CACEgF,MAAO,KAAK,EACZlF,IAAK,KAAK,EACVmC,SAAU,KAAK,EACfnB,MAAO,KAAK,EACZ0C,aAAc,KAAK,EACnByB,SAAU,KAAK,EACfvD,MAAO,EAAE,CACTY,KAAM,OACNf,WAAY,KAAK,EACjBb,IAAK,KAAK,EACVwD,MAAO,KAAK,EACZF,SAAU,KAAK,CACjB,EACA,CAACkB,EAAGC,KACF,IAAM/B,EAAK+B,EAAIC,OAAO,CAChB5E,EAAQjB,EACZ,CACEuC,SAASI,CAAY,CAAEH,CAAe,CAAEC,CAAQ,EAC9CoB,EAAGiC,aAAa,CACd,IAAIC,YAAY,SAAU,CACxBC,OAAQ,CAACrD,EAAMH,EAAMC,EAAE,AACzB,GAEJ,EACAS,OAAOH,CAAsB,CAAEP,CAAe,CAAEC,CAAQ,EACtDoB,EAAGiC,aAAa,CACd,IAAIC,YAAY,OAAQ,CACtBC,OAAQ,CAACjD,EAAMP,EAAMC,EAAE,AACzB,GAEJ,CACF,EACAkD,GAQF,OALA/F,EAAa,KACXiE,EAAGoC,eAAe,CAAC,SACnBpC,EAAGoC,eAAe,CAAC,eACnBpC,EAAGoC,eAAe,CAAC,MACrB,KACQjF,EAASC,EACnB,EAEF,gBAAeD,CAAK"}

package/es/tag/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 通用
+title: 标签
+subtitle: n-tag
+icon: 🏷️
+---
+
+# Tag 标签
+
+> 进行标记和分类的小标签。

package/es/tag/examples/basic.md

@@ -0,0 +1,28 @@
+---
+title: 基本使用
+description: 基本标签的用法，可以通过设置 `close-icon` 变为可关闭标签并自定义关闭按钮，设置为 true 时将使用默认关闭按钮
+order: 1
+---
+
+```html
+<n-tag>Tag 1</n-tag>
+<n-tag close-icon="true">Close</n-tag>
+<n-tag>Custom Close</n-tag>
+<script>
+  const el = container.querySelectorAll('n-tag');
+
+  el[2].closeIcon = () => {
+    const icon = document.createElement('span');
+    icon.textContent = '⊖';
+    return icon;
+  };
+</script>
+```
+
+```jsx
+<n-tag>Tag 1</n-tag>
+<n-tag close-icon={true}>Prevent Default</n-tag>
+<n-tag close-icon={() => <span>⊖</span>}>
+  Tag 2
+</n-tag>
+```

package/es/tag/examples/bordered.md

@@ -0,0 +1,19 @@
+---
+title: 无边框
+description: 无边框模式。
+order: 5
+---
+
+```html
+<n-tag bordered="false" type="primary">primary</n-tag>
+<n-tag bordered="false" color="purple">purple</n-tag>
+<n-tag bordered="false" color="#f50">#f50</n-tag>
+<n-tag bordered="false" color="green">green</n-tag>
+```
+
+```jsx
+<n-tag bordered={false} type="primary">primary</n-tag>
+<n-tag bordered={false} color="purple">purple</n-tag>
+<n-tag bordered={false} color="#f50">#f50</n-tag>
+<n-tag bordered={false} color="green">green</n-tag>
+```

package/es/tag/examples/color.md

@@ -0,0 +1,25 @@
+---
+title: 自定义色彩
+description: 通过 `color` 设置色彩
+order: 2
+---
+
+```html
+<n-tag color="blue">blue</n-tag>
+<n-tag color="red">red</n-tag>
+<n-tag color="purple">purple</n-tag>
+<n-tag color="magenta">magenta</n-tag>
+<n-tag color="black">black</n-tag>
+<n-tag color="#f50">#f50</n-tag>
+<n-tag color="green">green</n-tag>
+```
+
+```jsx
+<n-tag color="blue">blue</n-tag>
+<n-tag color="red">red</n-tag>
+<n-tag color="purple">purple</n-tag>
+<n-tag color="magenta">magenta</n-tag>
+<n-tag color="black">black</n-tag>
+<n-tag color="#f50">#f50</n-tag>
+<n-tag color="green">green</n-tag>
+```

package/es/tag/examples/icon.md

@@ -0,0 +1,21 @@
+---
+title: 图标
+description: 通过 `icon` 在文本前添加一个图标
+order: 4
+---
+
+```html
+<n-tag icon="⎋">Default</n-tag>
+<n-tag icon="⌥" type="primary">Primary</n-tag>
+<n-tag icon="⌘" type="warning">Warning</n-tag>
+<n-tag icon="♼" type="success">Success</n-tag>
+<n-tag icon="⚾" type="error">Error</n-tag>
+```
+
+```jsx
+<n-tag icon="⎋">Default</n-tag>
+<n-tag icon="⌥" type="primary">Primary</n-tag>
+<n-tag icon="⌘" type="warning">Warning</n-tag>
+<n-tag icon="♼" type="success">Success</n-tag>
+<n-tag icon="⚾" type="error">Error</n-tag>
+```

package/es/tag/examples/type.md

@@ -0,0 +1,19 @@
+---
+title: 预设类型
+description: 通过 `type` 更改预设色彩的标签样式
+order: 3
+---
+
+```html
+<n-tag close-icon="true" type="primary">primary</n-tag>
+<n-tag close-icon="true" type="warning">warning</n-tag>
+<n-tag close-icon="true" type="success">success</n-tag>
+<n-tag close-icon="true" type="error">error</n-tag>
+```
+
+```jsx
+<n-tag close-icon={true} type="primary">primary</n-tag>
+<n-tag close-icon={true} type="warning">warning</n-tag>
+<n-tag close-icon={true} type="success">success</n-tag>
+<n-tag close-icon={true} type="error">error</n-tag>
+```

package/es/tag/index.js

@@ -1,6 +1,6 @@
-import{template as e}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as n}from"solid-js/web";import{addEventListener as i}from"solid-js/web";let d=e("<style> "),c=e("<style>"),m=e('<span class="icon">'),a=e('<span class="close">'),p=e("<span>");import{Show as u,createEffect as f,createMemo as b,createSignal as h,mergeProps as g,splitProps as v}from"solid-js";import w from"@moneko/common/lib/isFunction";import{css as C,cx as j}from"@moneko/css";import{customElement as y}from"solid-element";import{style as k}from"./style";import I,{generateColor as E}from"../theme";function x(e){let{baseStyle:l,isDark:f}=I,[g,y]=v(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[x,L]=h(!0),A=b(()=>g.color?C`
+import{template as e}from"solid-js/web";import{spread as o}from"solid-js/web";import{mergeProps as t}from"solid-js/web";import"solid-js/web";import{insert as s}from"solid-js/web";import{effect as r}from"solid-js/web";import{delegateEvents as l}from"solid-js/web";import{createComponent as n}from"solid-js/web";import{addEventListener as i}from"solid-js/web";let d=e("<style> "),c=e("<style>"),m=e('<span class="icon">'),a=e('<span class="close">'),p=e("<span>");import{createEffect as u,createMemo as f,createSignal as b,mergeProps as h,Show as g,splitProps as v}from"solid-js";import w from"@moneko/common/lib/isFunction";import{css as C,cx as j}from"@moneko/css";import{customElement as y}from"solid-element";import k,{generateColor as I}from"../theme";import{style as E}from"./style";function x(e){let{baseStyle:l,isDark:u}=k,[h,y]=v(e,["class","css","onClose","color","icon","closeIcon","bordered","type","disabled"]),[x,L]=b(!0),A=f(()=>h.color?C`
         :host {
-          ${E(g.color,{dark:f(),name:"tag-custom"})}
+          ${I(h.color,{dark:u(),name:"tag-custom"})}
         }
-      `:"");function F(e){w(g.onClose)&&g.onClose(e),L(!1)}return n(u,{get when(){return x()},get children(){return[(()=>{let e=d(),o=e.firstChild;return r(()=>o.data=l()),e})(),(()=>{let e=d(),o=e.firstChild;return r(()=>o.data=A()),e})(),(()=>{let e=c();return e.textContent=k,e})(),n(u,{get when(){return g.css},get children(){let e=d(),o=e.firstChild;return r(()=>o.data=C(g.css)),e}}),(()=>{let e=p();return o(e,t(y,{get class(){return j("tag",g.type)},get classList(){return{"tag-custom":!!g.color,bordered:g.bordered,disabled:g.disabled}}}),!1,!0),s(e,n(u,{get when(){return g.icon},get children(){let e=m();return s(e,()=>g.icon),e}}),null),s(e,()=>y.children,null),s(e,n(u,{get when(){return g.closeIcon},get children(){let e=a();return i(e,"click",F,!0),s(e,()=>!0===g.closeIcon?"⛌":g.closeIcon),e}}),null),e})()]}})}y("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let t=o.element,s=g({css:t.css,children:[...t.childNodes.values()],onClose(e){t.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return f(()=>{t.replaceChildren(),t.removeAttribute("css")}),n(x,s)});export default x;l(["click"]);
+      `:"");function F(e){w(h.onClose)&&h.onClose(e),L(!1)}return n(g,{get when(){return x()},get children(){return[(()=>{let e=d(),o=e.firstChild;return r(()=>o.data=l()),e})(),(()=>{let e=d(),o=e.firstChild;return r(()=>o.data=A()),e})(),(()=>{let e=c();return e.textContent=E,e})(),n(g,{get when(){return h.css},get children(){let e=d(),o=e.firstChild;return r(()=>o.data=C(h.css)),e}}),(()=>{let e=p();return o(e,t(y,{get class(){return j("tag",h.type)},get classList(){return{"tag-custom":!!h.color,bordered:h.bordered,disabled:h.disabled}}}),!1,!0),s(e,n(g,{get when(){return h.icon},get children(){let e=m();return s(e,()=>h.icon),e}}),null),s(e,()=>y.children,null),s(e,n(g,{get when(){return h.closeIcon},get children(){let e=a();return i(e,"click",F,!0),s(e,()=>!0===h.closeIcon?"⛌":h.closeIcon),e}}),null),e})()]}})}y("n-tag",{class:void 0,css:void 0,color:void 0,icon:void 0,closeIcon:void 0,onClose:void 0,bordered:!0,disabled:void 0,type:void 0},(e,o)=>{let t=o.element,s=h({css:t.css,children:[...t.childNodes.values()],onClose(e){t.dispatchEvent(new CustomEvent("close",{detail:e}))}},e);return u(()=>{t.replaceChildren(),t.removeAttribute("css")}),n(x,s)});export default x;l(["click"]);
 //# sourceMappingURL=index.js.map

package/es/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import { Show, createEffect, createMemo, createSignal, mergeProps, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\nimport { style } from './style';\nimport theme, { generateColor } from '../theme';\nimport type { CustomElement } from '..';\n\nexport interface TagProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义颜色 */\n  color?: string;\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义关闭图标 */\n  closeIcon?: JSX.Element | boolean;\n  /** 显示边框\n   * @default true\n   */\n  bordered?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 关闭时的回调方法 */\n  onClose?: (e: MouseEvent) => void;\n  children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n  const { baseStyle, isDark } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'onClose',\n    'color',\n    'icon',\n    'closeIcon',\n    'bordered',\n    'type',\n    'disabled',\n  ]);\n  const [show, setShow] = createSignal(true);\n\n  const customColor = createMemo(() => {\n    if (local.color) {\n      return css`\n        :host {\n          ${generateColor(local.color, {\n            dark: isDark(),\n            name: 'tag-custom',\n          })}\n        }\n      `;\n    }\n    return '';\n  });\n\n  function onClose(e: Event) {\n    if (isFunction(local.onClose)) {\n      local.onClose(e);\n    }\n    setShow(false);\n  }\n\n  return (\n    <Show when={show()}>\n      <style textContent={baseStyle()} />\n      <style textContent={customColor()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <span\n        {...other}\n        class={cx('tag', local.type)}\n        classList={{\n          'tag-custom': !!local.color,\n          bordered: local.bordered,\n          disabled: local.disabled,\n        }}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\">{local.icon}</span>\n        </Show>\n        {other.children}\n        <Show when={local.closeIcon}>\n          <span class=\"close\" onClick={onClose}>\n            {local.closeIcon === true ? '⛌' : local.closeIcon}\n          </span>\n        </Show>\n      </span>\n    </Show>\n  );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n  'n-tag',\n  {\n    class: void 0,\n    css: void 0,\n    color: void 0,\n    icon: void 0,\n    closeIcon: void 0,\n    onClose: void 0,\n    bordered: true,\n    disabled: void 0,\n    type: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n        onClose(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('close', {\n              detail: e,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Tag {...props} />;\n  },\n);\n\nexport default Tag;\n"],"names":["Show","createEffect","createMemo","createSignal","mergeProps","splitProps","isFunction","css","cx","customElement","style","theme","generateColor","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"mappings":"6cAAA,QAASA,QAAAA,CAAI,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAC9C,QAASC,SAAAA,CAAK,KAAQ,SAAU,AAChC,QAAOC,GAASC,iBAAAA,CAAa,KAAQ,UAAW,CA2BhD,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGL,EACxB,CAACM,EAAOC,EAAM,CAAGb,EAAWS,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGjB,EAAa,CAAA,GAE/BkB,EAAcnB,EAAW,IAC7B,AAAIe,EAAMK,KAAK,CACNf,CAAG,CAAC;;UAEP,EAAEK,EAAcK,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBpB,EAAWW,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGpB,qBAAWmB,8EACUJ,8DACAM,gDACAX,UACnBV,qBAAWiB,EAAMV,GAAG,8DACCA,EAAIU,EAAMV,GAAG,qCAG7BW,sBACGV,EAAG,MAAOS,EAAMU,IAAI,yBAChB,CACT,aAAc,CAAC,CAACV,EAAMK,KAAK,CAC3BM,SAAUX,EAAMW,QAAQ,CACxBC,SAAUZ,EAAMY,QAAQ,AAC1B,kBAEC7B,qBAAWiB,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACd/B,qBAAWiB,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAvB,EACE,QACA,CACEwB,MAAO,KAAK,EACZ1B,IAAK,KAAK,EACVe,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQV,EACZ,CACEG,IAAK6B,EAAG7B,GAAG,CACXwB,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALAjC,EAAa,KACXmC,EAAGO,eAAe,GAClBP,EAAGQ,eAAe,CAAC,MACrB,KAEQ/B,EAAQC,EAClB,EAGF,gBAAeD,CAAI"}
+{"version":3,"sources":["../../components/tag/index.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, mergeProps, Show, splitProps } from 'solid-js';\nimport { isFunction } from '@moneko/common';\nimport { css, cx } from '@moneko/css';\nimport { customElement } from 'solid-element';\n\nimport type { CustomElement } from '..';\nimport theme, { generateColor } from '../theme';\n\nimport { style } from './style';\n\nexport interface TagProps {\n  /** 自定义样式表 */\n  css?: string;\n  /** 自定义类名 */\n  class?: string;\n  /** 自定义颜色 */\n  color?: string;\n  /** 图标 */\n  icon?: JSX.Element;\n  /** 内置类型(状态) */\n  type?: 'primary' | 'success' | 'error' | 'warning';\n  /** 自定义关闭图标 */\n  closeIcon?: JSX.Element | boolean;\n  /** 显示边框\n   * @default true\n   */\n  bordered?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /** 关闭时的回调方法 */\n  onClose?: (e: MouseEvent) => void;\n  children?: JSX.Element;\n}\n\nfunction Tag(props: TagProps) {\n  const { baseStyle, isDark } = theme;\n  const [local, other] = splitProps(props, [\n    'class',\n    'css',\n    'onClose',\n    'color',\n    'icon',\n    'closeIcon',\n    'bordered',\n    'type',\n    'disabled',\n  ]);\n  const [show, setShow] = createSignal(true);\n\n  const customColor = createMemo(() => {\n    if (local.color) {\n      return css`\n        :host {\n          ${generateColor(local.color, {\n            dark: isDark(),\n            name: 'tag-custom',\n          })}\n        }\n      `;\n    }\n    return '';\n  });\n\n  function onClose(e: Event) {\n    if (isFunction(local.onClose)) {\n      local.onClose(e);\n    }\n    setShow(false);\n  }\n\n  return (\n    <Show when={show()}>\n      <style textContent={baseStyle()} />\n      <style textContent={customColor()} />\n      <style textContent={style} />\n      <Show when={local.css}>\n        <style textContent={css(local.css)} />\n      </Show>\n      <span\n        {...other}\n        class={cx('tag', local.type)}\n        classList={{\n          'tag-custom': !!local.color,\n          bordered: local.bordered,\n          disabled: local.disabled,\n        }}\n      >\n        <Show when={local.icon}>\n          <span class=\"icon\">{local.icon}</span>\n        </Show>\n        {other.children}\n        <Show when={local.closeIcon}>\n          <span class=\"close\" onClick={onClose}>\n            {local.closeIcon === true ? '⛌' : local.closeIcon}\n          </span>\n        </Show>\n      </span>\n    </Show>\n  );\n}\n\nexport type TagElement = CustomElement<TagProps, 'onClose'>;\n\ncustomElement<TagProps>(\n  'n-tag',\n  {\n    class: void 0,\n    css: void 0,\n    color: void 0,\n    icon: void 0,\n    closeIcon: void 0,\n    onClose: void 0,\n    bordered: true,\n    disabled: void 0,\n    type: void 0,\n  },\n  (_, opt) => {\n    const el = opt.element;\n    const props = mergeProps(\n      {\n        css: el.css,\n        children: [...el.childNodes.values()],\n        onClose(e: Event) {\n          el.dispatchEvent(\n            new CustomEvent('close', {\n              detail: e,\n            }),\n          );\n        },\n      },\n      _,\n    );\n\n    createEffect(() => {\n      el.replaceChildren();\n      el.removeAttribute('css');\n    });\n\n    return <Tag {...props} />;\n  },\n);\n\nexport default Tag;\n"],"names":["createEffect","createMemo","createSignal","mergeProps","Show","splitProps","isFunction","css","cx","customElement","theme","generateColor","style","Tag","props","baseStyle","isDark","local","other","show","setShow","customColor","color","dark","name","onClose","e","type","bordered","disabled","icon","children","closeIcon","class","_","opt","el","element","childNodes","values","dispatchEvent","CustomEvent","detail","replaceChildren","removeAttribute"],"mappings":"6cAAA,QAASA,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,gBAAAA,CAAY,CAAEC,cAAAA,CAAU,CAAEC,QAAAA,CAAI,CAAEC,cAAAA,CAAU,KAAQ,UAAW,AAChG,QAASC,MAAkB,+BAAiB,AAC5C,QAASC,OAAAA,CAAG,CAAEC,MAAAA,CAAE,KAAQ,aAAc,AACtC,QAASC,iBAAAA,CAAa,KAAQ,eAAgB,AAG9C,QAAOC,GAASC,iBAAAA,CAAa,KAAQ,UAAW,AAEhD,QAASC,SAAAA,CAAK,KAAQ,SAAU,CA0BhC,SAASC,EAAIC,CAAe,EAC1B,GAAM,CAAEC,UAAAA,CAAS,CAAEC,OAAAA,CAAM,CAAE,CAAGN,EACxB,CAACO,EAAOC,EAAM,CAAGb,EAAWS,EAAO,CACvC,QACA,MACA,UACA,QACA,OACA,YACA,WACA,OACA,WACD,EACK,CAACK,EAAMC,EAAQ,CAAGlB,EAAa,CAAA,GAE/BmB,EAAcpB,EAAW,IAC7B,AAAIgB,EAAMK,KAAK,CACNf,CAAG,CAAC;;UAEP,EAAEI,EAAcM,EAAMK,KAAK,CAAE,CAC3BC,KAAMP,IACNQ,KAAM,YACR,GAAG;;MAEP,CAAC,CAEI,IAGT,SAASC,EAAQC,CAAQ,EACnBpB,EAAWW,EAAMQ,OAAO,GAC1BR,EAAMQ,OAAO,CAACC,GAEhBN,EAAQ,CAAA,EACV,CAEA,SACGhB,qBAAWe,8EACUJ,8DACAM,gDACAT,UACnBR,qBAAWa,EAAMV,GAAG,8DACCA,EAAIU,EAAMV,GAAG,qCAG7BW,sBACGV,EAAG,MAAOS,EAAMU,IAAI,yBAChB,CACT,aAAc,CAAC,CAACV,EAAMK,KAAK,CAC3BM,SAAUX,EAAMW,QAAQ,CACxBC,SAAUZ,EAAMY,QAAQ,AAC1B,kBAECzB,qBAAWa,EAAMa,IAAI,0CACAb,EAAMa,IAAI,qBAE/BZ,EAAMa,QAAQ,aACd3B,qBAAWa,EAAMe,SAAS,8CACIP,cAC1BR,AAAoB,CAAA,IAApBA,EAAMe,SAAS,CAAY,IAAMf,EAAMe,SAAS,sBAM7D,CAIAvB,EACE,QACA,CACEwB,MAAO,KAAK,EACZ1B,IAAK,KAAK,EACVe,MAAO,KAAK,EACZQ,KAAM,KAAK,EACXE,UAAW,KAAK,EAChBP,QAAS,KAAK,EACdG,SAAU,CAAA,EACVC,SAAU,KAAK,EACfF,KAAM,KAAK,CACb,EACA,CAACO,EAAGC,KACF,IAAMC,EAAKD,EAAIE,OAAO,CAChBvB,EAAQX,EACZ,CACEI,IAAK6B,EAAG7B,GAAG,CACXwB,SAAU,IAAIK,EAAGE,UAAU,CAACC,MAAM,GAAG,CACrCd,QAAQC,CAAQ,EACdU,EAAGI,aAAa,CACd,IAAIC,YAAY,QAAS,CACvBC,OAAQhB,CACV,GAEJ,CACF,EACAQ,GAQF,OALAlC,EAAa,KACXoC,EAAGO,eAAe,GAClBP,EAAGQ,eAAe,CAAC,MACrB,KAEQ/B,EAAQC,EAClB,EAGF,gBAAeD,CAAI"}

package/es/theme/README.mdx

@@ -0,0 +1,10 @@
+---
+type: 全局
+title: 动态配色
+subtitle: theme & generateColor
+icon: 👅
+---
+
+# 共享颜色方案
+
+> 根据浏览器首选颜色方案媒体查询的变化自动更新颜色的方案

package/es/theme/examples/colors.md

@@ -0,0 +1,123 @@
+---
+title: 调色板、生成、设置主题色
+description: 通过传入一个基础色生成出主题色调
+order: 1
+col: 100%
+---
+
+```jsx
+const { dark, setDark, light, setLight } = NekoUI.theme;
+
+function getTextColor(colors) {
+  return {
+    0: colors['100'],
+    1: colors['90'],
+    2: colors['90'],
+    3: colors['95'],
+    4: colors['95'],
+    5: colors['99'],
+    6: colors['99'],
+    7: colors['30'],
+    8: colors['30'],
+    9: colors['20'],
+    10: colors['20'],
+    11: colors['10'],
+    12: colors['5'],
+    13: colors['5'],
+    14: colors['0'],
+  };
+}
+
+function Item({ name, isDark }) {
+  const color = createMemo(() => (isDark ? dark() : light())[name]);
+  const colors = createMemo(() => NekoUI.toneColor(color(), isDark));
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        'align-items': 'center',
+        'flex-wrap': 'wrap',
+        width: '100%',
+        'font-size': '8px',
+        'font-weight': 100,
+        'text-align': 'center',
+      }}
+    >
+      <strong
+        style={{
+          width: '30px',
+          'text-align': 'right',
+          'margin-right': '8px',
+          color: `var(--${name}-color)`,
+        }}
+      >
+        {name}:
+      </strong>
+      <n-color-picker
+        style={{ 'margin-right': '8px' }}
+        value={color()}
+        onChange={(e) => {
+          if (isDark) {
+            setDark((prev) => {
+              return { ...prev, [name]: e.detail };
+            });
+          } else {
+            setLight((prev) => {
+              return { ...prev, [name]: e.detail };
+            });
+          }
+          e.target.value = e.detail;
+        }}
+      />
+      {Object.keys(colors()).slice(1,-1).map((c, i) => {
+        let item;
+        createEffect(() => {
+          item.style.backgroundColor = colors()[c];
+          item.style.color = getTextColor(colors())[i];
+        });
+        return (
+          <div
+            ref={(e) => (item = e)}
+            class="item"
+            style={{
+              flex: 1,
+              padding: '4px',
+            }}
+          >
+            <div>{c}</div>
+            <div>{colors()[c]}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+render(
+  <>
+    {['#fff', '#000'].map((c) => {
+      const dark = c === '#000';
+
+      return (
+        <div
+          style={{
+            display: 'flex',
+            'flex-direction': 'column',
+            padding: '8px',
+            'margin-bottom': '16px',
+            width: '100%',
+            'background-color': c,
+            'overflow-x': 'auto',
+          }}
+        >
+          <Item name="primary" isDark={dark} />
+          <Item name="warning" isDark={dark} />
+          <Item name="error" isDark={dark} />
+          <Item name="success" isDark={dark} />
+        </div>
+      );
+    })}
+  </>
+);
+```

package/es/theme/examples/theme.md

@@ -0,0 +1,19 @@
+---
+title: 切换颜色模式
+description: 通过传入一个基础色生成出主题色调
+order: 2
+col: 100%
+---
+
+```jsx
+function Demo() {
+  const { isDark, scheme, setScheme } = NekoUI.theme;
+  function handleChange(e) {
+    setScheme(e.detail ? 'dark' : 'light');
+  }
+
+  return (
+    <n-switch checked={isDark()} onChange={handleChange} un-checked-text="🌞" checked-text="🌛" />
+  );
+}
+```

package/es/theme/index.js

@@ -1,2 +1,2 @@
-var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import l from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as m}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateColor(e,o){let r=s(e,null==o?void 0:o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:l(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:l(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-shadow-1`]:n.setAlpha(.08).toRgbaString(),[`--${o.name}-shadow-2`]:n.setAlpha(.05).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5]}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export default a(function(){let e=m({":root,:host":{"--scrollbar-size":"4px","--font-size":"14px","--font-size-sm":"12px","--font-size-xs":"10px","--font-size-lg":"16px","--border-base":"1px solid var(--border-color)","--border-radius":"8px","--text-color":"var(--primary-text)","--text-secondary":"var(--primary-secondary)","--text-heading":"var(--primary-heading)","--text-selection":"var(--primary-selection)","--transition-duration":"0.3s","--mask-bg":"rgb(0 0 0 / 5%)","--modal-component-bg":"rgb(255 255 255 / 80%)","--modal-box-shadow":"0 5px 35px rgb(0 0 0 / 10%)","--notification-box-shadow":"0 4px 16px rgb(0 0 0 / 5%)","--transition-timing-function":"cubic-bezier(0.645, 0.045, 0.355, 1)",fontSize:"var(--font-size)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'",color:"var(--text-color, rgb(0 0 0 / 65%))",lineHeight:1.8},'[disabled]:not([disabled="false"]):not(n-img)':{cursor:"not-allowed",color:"var(--disable-color)"},"::selection":{backgroundColor:"var(--text-selection)"},"::-webkit-scrollbar":{inlineSize:"var(--scrollbar-size)",blockSize:"var(--scrollbar-size)"}}),a=ColorScheme[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[i,l]=n(a),[s,c]=n(t.matches),[g,b]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,p]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),h=r(()=>generateColor(g().primary,{name:"primary"})),f=r(()=>generateColor(d().primary,{name:"primary",dark:!0})),u=r(()=>generateColor(g().warning,{name:"warning"})),x=r(()=>generateColor(d().warning,{name:"warning",dark:!0})),y=r(()=>generateColor(g().success,{name:"success"})),v=r(()=>generateColor(d().success,{name:"success",dark:!0})),S=r(()=>generateColor(g().error,{name:"error"})),$=r(()=>generateColor(d().error,{name:"error",dark:!0}));function C(o){let r="";for(let e in o)Object.prototype.hasOwnProperty.call(o,e)&&(r+=`${e}:${o[e]};`);return`${e}:root,:host{${r}}`}let k=r(()=>C(Object.assign({},h(),u(),y(),S(),{"--bg":"transparent","--disable-color":"rgb(0 0 0 / 25%)","--disable-bg":"rgb(0 0 0 / 4%)","--disable-border":"#d9d9d9","--border-color":"var(--primary-border)","--component-bg":"var(--primary-bg)"}))),w=r(()=>C(Object.assign({},f(),x(),v(),$(),{"--bg":"#1c1c1c","--disable-color":"rgb(255 255 255 / 25%)","--disable-bg":"rgb(255 255 255 / 8%)","--disable-border":"#424242","--border-color":"#303030","--component-bg":"#141414","--primary-shadow":"rgb(0 0 0 / 12%)","--primary-selection":"rgb(255 255 255 / 5%)","--primary-details-bg":"rgb(255 255 255 / 3%)","--primary-component-bg":"#000","--modal-component-bg":"rgb(30 30 30 / 80%)"})));function z(e){c(e.matches)}o(()=>{let e=i();c("dark"===e||"auto"===e&&t.matches)});let A=r(()=>s()?w():k());return o(()=>{"auto"===i()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",i())}),{baseStyle:A,dark:d,setDark:p,light:g,setLight:b,scheme:i,setScheme:l,isDark:s}},t());
+var e;import{createEffect as o,createMemo as r,createRoot as a,createSignal as n,getOwner as t}from"solid-js";import i from"@moneko/common/lib/colorParse";import l from"@moneko/common/lib/mixColor";import s from"@moneko/common/lib/toneColor";import{css as m}from"@moneko/css";export{toneColor}from"@moneko/common";export function generateColor(e,o){let r=s(e,o.dark),a=i(r[5]),n=i(e);return{[`--${o.name}-text`]:a.setAlpha(.65).toRgbaString(),[`--${o.name}-secondary`]:a.setAlpha(.45).toRgbaString(),[`--${o.name}-heading`]:r[5],[`--${o.name}-active`]:r[30],[`--${o.name}-color`]:r[40],[`--${o.name}-hover`]:l(r[40],r[30],15),[`--${o.name}-secondary-bg`]:r[70],[`--${o.name}-border`]:r[80],[`--${o.name}-outline`]:l(r[90],r[40],5),[`--${o.name}-selection`]:r[90],[`--${o.name}-notify-bg`]:i(r[90]).setAlpha(.8).toRgbaString(),[`--on-${o.name}-selection`]:r[10],[`--${o.name}-shadow`]:n.setAlpha(.12).toRgbaString(),[`--${o.name}-shadow-1`]:n.setAlpha(.08).toRgbaString(),[`--${o.name}-shadow-2`]:n.setAlpha(.05).toRgbaString(),[`--${o.name}-details-bg`]:r[95],[`--${o.name}-component-bg`]:r[98],[`--${o.name}-bg`]:r[99],[`--on-${o.name}-bg`]:r[5]}}export var ColorScheme;(e=ColorScheme||(ColorScheme={})).light="light",e.dark="dark",e.auto="auto";export default a(function(){let e=m({":root,:host":{"--scrollbar-size":"4px","--font-size":"14px","--font-size-sm":"12px","--font-size-xs":"10px","--font-size-lg":"16px","--border-base":"1px solid var(--border-color)","--border-radius":"8px","--text-color":"var(--primary-text)","--text-secondary":"var(--primary-secondary)","--text-heading":"var(--primary-heading)","--text-selection":"var(--primary-selection)","--transition-duration":"0.3s","--mask-bg":"rgb(0 0 0 / 5%)","--modal-component-bg":"rgb(255 255 255 / 80%)","--modal-box-shadow":"0 5px 35px rgb(0 0 0 / 10%)","--notification-box-shadow":"0 4px 16px rgb(0 0 0 / 5%)","--transition-timing-function":"cubic-bezier(0.645, 0.045, 0.355, 1)",fontSize:"var(--font-size)",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', Helvetica, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans'",color:"var(--text-color, rgb(0 0 0 / 65%))",lineHeight:1.8},'[disabled]:not([disabled="false"]):not(n-img)':{cursor:"not-allowed",color:"var(--disable-color)"},"::selection":{backgroundColor:"var(--text-selection)"},"::-webkit-scrollbar":{inlineSize:"var(--scrollbar-size)",blockSize:"var(--scrollbar-size)"}}),a=ColorScheme[localStorage.getItem("color-scheme")]||"auto",t=window.matchMedia("(prefers-color-scheme: dark)"),[i,l]=n(a),[s,c]=n(t.matches),[g,b]=n({primary:"#5794ff",warning:"#faad14",error:"#ff4d4f",success:"#52c41a"}),[d,p]=n({primary:"#4d81dc",warning:"#bb8314",error:"#901c22",success:"#419418"}),h=r(()=>generateColor(g().primary,{name:"primary"})),f=r(()=>generateColor(d().primary,{name:"primary",dark:!0})),u=r(()=>generateColor(g().warning,{name:"warning"})),x=r(()=>generateColor(d().warning,{name:"warning",dark:!0})),y=r(()=>generateColor(g().success,{name:"success"})),S=r(()=>generateColor(d().success,{name:"success",dark:!0})),$=r(()=>generateColor(g().error,{name:"error"})),v=r(()=>generateColor(d().error,{name:"error",dark:!0}));function C(o){let r="";for(let e in o)Object.prototype.hasOwnProperty.call(o,e)&&(r+=`${e}:${o[e]};`);return`${e}:root,:host{${r}}`}let k=r(()=>C(Object.assign({},h(),u(),y(),$(),{"--bg":"transparent","--disable-color":"rgb(0 0 0 / 25%)","--disable-bg":"rgb(0 0 0 / 4%)","--disable-border":"#d9d9d9","--border-color":"var(--primary-border)","--component-bg":"var(--primary-bg)"}))),w=r(()=>C(Object.assign({},f(),x(),S(),v(),{"--bg":"#1c1c1c","--disable-color":"rgb(255 255 255 / 25%)","--disable-bg":"rgb(255 255 255 / 8%)","--disable-border":"#424242","--border-color":"#303030","--component-bg":"#141414","--primary-shadow":"rgb(0 0 0 / 12%)","--primary-selection":"rgb(255 255 255 / 5%)","--primary-details-bg":"rgb(255 255 255 / 3%)","--primary-component-bg":"#000","--modal-component-bg":"rgb(30 30 30 / 80%)"})));function z(e){c(e.matches)}o(()=>{let e=i();c("dark"===e||"auto"===e&&t.matches)});let A=r(()=>s()?w():k());return o(()=>{"auto"===i()?t.addEventListener("change",z):t.removeEventListener("change",z),localStorage.setItem("color-scheme",i())}),{baseStyle:A,dark:d,setDark:p,light:g,setLight:b,scheme:i,setScheme:l,isDark:s}},t());
 //# sourceMappingURL=index.js.map