@mrts/soltw 0.3.0 → 0.3.1

package/dist/cjs/index.js

@@ -1,11 +1,127 @@
 'use strict';
 
 var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var tailwindMerge = require('tailwind-merge');
 
-var _tmpl$ = /*#__PURE__*/web.template(`<div class=bg-red-600>- - S O L T W - -`);
+var _tmpl$$1 = /*#__PURE__*/web.template(`<div class=bg-red-600>- - S O L T W - -`);
 const SolTw = props => {
-  return _tmpl$();
+  return _tmpl$$1();
 };
 
+function buildIdLabel(arg) {
+  if (typeof arg == "string") {
+    return {
+      id: arg,
+      label: arg
+    };
+  } else if (Array.isArray(arg)) {
+    return {
+      id: arg[0],
+      label: arg[1]
+    };
+  } else {
+    const r = Object.assign({}, arg);
+    if (r.label == undefined) {
+      r["label"] = r.id;
+    }
+    return r;
+  }
+}
+
+const themeAlpha = {
+  "item": {
+    base: "bg-orange-900 text-stone-100",
+    selected: "bg-orange-800 text-stone-100 font-bold underline",
+    disabled: "bg-orange-900 text-stone-300 italic",
+    disabler: "bg-white/70"
+  }
+};
+
+var _tmpl$ = /*#__PURE__*/web.template(`<div>`);
+const Item = props => {
+  const itemData = () => buildIdLabel(props.idLabel);
+  const styleBox = () => {
+    return props.theme != undefined ? props.theme : themeAlpha["item"];
+  };
+  const propsClass = solidJs.createMemo(() => {
+    if (props.class == undefined) {
+      return {};
+    } else if (typeof props.class == "string") {
+      return {
+        item: props.class
+      };
+    } else {
+      return props.class;
+    }
+  });
+  const itemClasses = solidJs.createMemo(() => {
+    const rawClasses = ["px-1"];
+    rawClasses.push(styleBox().base);
+
+    // const stylerClasses = styler
+    //   ? styler.classes(stags, props.vtags)
+    //   : undefined;
+    // rawClasses.push(...(stylerClasses ?? []));
+
+    if (props.action) {
+      rawClasses.push("select-none cursor-pointer");
+    }
+    const customClasses = propsClass();
+    if (customClasses.item) {
+      rawClasses.push(customClasses.item);
+    }
+    if (props.selected) {
+      rawClasses.push(styleBox().selected, customClasses.selected);
+    }
+    if (props.disabled) {
+      rawClasses.push(styleBox().disabled, customClasses.disabled);
+    }
+    rawClasses.push("relative");
+    const r = tailwindMerge.twMerge(...rawClasses);
+    return r;
+  });
+  const disablerClasses = solidJs.createMemo(() => {
+    const rawClasses = [];
+    rawClasses.push(styleBox().disabler);
+    if (propsClass().disabler) {
+      rawClasses.push(propsClass().disabler);
+    }
+    rawClasses.push("absolute inset-0");
+    const r = tailwindMerge.twMerge(...rawClasses);
+    return r;
+  });
+  function handleClick() {
+    if (props.action != undefined) {
+      props.action(itemData());
+    }
+  }
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = handleClick;
+    web.insert(_el$, () => itemData().label, null);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.disabled;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        _el$2.$$click = e => {
+          if (!props.clickableWhendisabled) {
+            e.stopPropagation();
+          }
+        };
+        web.effect(() => web.className(_el$2, disablerClasses()));
+        return _el$2;
+      }
+    }), null);
+    web.effect(() => web.className(_el$, itemClasses()));
+    return _el$;
+  })();
+};
+web.delegateEvents(["click"]);
+
+exports.Item = Item;
 exports.SolTw = SolTw;
+exports.buildIdLabel = buildIdLabel;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/soltw.tsx"],"sourcesContent":["import type { Component } from \"solid-js\";\n\ntype TProps = {}\n\nexport const SolTw : Component<TProps> = (props) =>{\n  return <div class=\"bg-red-600\">- - S O L T W - -</div>\n}\n\n\n"],"names":["SolTw","props","_tmpl$"],"mappings":";;;;;AAIO,MAAMA,KAAyB,GAAIC,KAAK,IAAI;AACjD,EAAA,OAAAC,MAAA,EAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/soltw.tsx","../../src/items/IdLabel.ts","../../src/theme/StyleBoxes.ts","../../src/items/Item.tsx"],"sourcesContent":["import type { Component } from \"solid-js\";\n\ntype TProps = {}\n\nexport const SolTw : Component<TProps> = (props) =>{\n  return <div class=\"bg-red-600\">- - S O L T W - -</div>\n}\n\n\n","export interface IdLabel {\n  id: string;\n  label: string;\n  [x: string | symbol]: unknown;\n}\n\nexport type IdLabelDef = {\n  id: string;\n  label?: string;\n  [x: string | symbol]: unknown;\n};\n\nexport type IdLabelArg = IdLabelDef | [string, string] | string;\n\nexport function buildIdLabel(arg: IdLabelArg): IdLabel {\n  if (typeof arg == \"string\") {\n    return { id: arg, label: arg };\n  } else if (Array.isArray(arg)) {\n    return { id: arg[0], label: arg[1] };\n  } else {\n    const r = Object.assign({}, arg);\n    if (r.label == undefined) {\n      r[\"label\"] = r.id;\n    }\n    return r as IdLabel;\n  }\n}\n\n","import type { IStyleBox } from \"./StyleBox\";\n\nexport const themeAlpha :Record<string, IStyleBox> = {\n\n  \"block\" : {\n    base: \"bg-stone-100 text-stone-900\",\n    selected: \"bg-stone-100 text-orange-800 font-bold\",\n    disabled: \"bg-stone-100 text-stone-600 italic\",\n    disabler: \"bg-white/30\"\n  },\n  \"item\" : {\n    base: \"bg-orange-900 text-stone-100\",\n    selected: \"bg-orange-800 text-stone-100 font-bold underline\",\n    disabled: \"bg-orange-900 text-stone-300 italic\",\n    disabler: \"bg-white/70\"\n  },\n\n}\n","import { type Component, createMemo, Show } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { buildIdLabel, type IdLabel, type IdLabelArg } from \"./IdLabel.js\";\nimport { themeAlpha } from \"../theme/StyleBoxes.js\";\nimport type { IStyleBox } from \"../theme/StyleBox.js\";\n\nexport type TItemClass = {\n  item?: string;\n  selected?: string;\n  disabled?: string;\n  disabler?: string;\n};\nexport type TItemClassArg = TItemClass | string;\n\nexport type TItemProps = {\n  idLabel: IdLabelArg;\n  action?: (item: IdLabel) => void;\n  selected?: boolean;\n  disabled?: boolean;\n  clickableWhendisabled?: boolean;\n  class?: TItemClassArg;\n  theme?: IStyleBox;\n};\n\nexport const Item: Component<TItemProps> = (props) => {\n  const itemData = () => buildIdLabel(props.idLabel);\n\n  const styleBox = () => {\n    return props.theme !=undefined  ? props.theme : themeAlpha[\"item\"]!;\n  };\n\n  const propsClass = createMemo<TItemClass>(() => {\n    if (props.class == undefined) {\n      return {};\n    } else if (typeof props.class == \"string\") {\n      return { item: props.class };\n    } else {\n      return props.class;\n    }\n  });\n\n  const itemClasses = createMemo(() => {\n    const rawClasses = [\"px-1\"] as (string | undefined)[];\n\n    rawClasses.push(styleBox().base)\n\n\n    // const stylerClasses = styler\n    //   ? styler.classes(stags, props.vtags)\n    //   : undefined;\n    // rawClasses.push(...(stylerClasses ?? []));\n\n    if (props.action) {\n      rawClasses.push(\"select-none cursor-pointer\");\n    }\n\n    const customClasses = propsClass();\n    if (customClasses.item) {\n      rawClasses.push(customClasses.item);\n    }\n    if (props.selected) {\n      rawClasses.push(styleBox().selected, customClasses.selected);\n    }\n    if (props.disabled ) {\n      rawClasses.push(styleBox().disabled, customClasses.disabled);\n    }\n\n    rawClasses.push(\"relative\");\n    const r = twMerge(...rawClasses);\n    return r;\n  });\n\n  const disablerClasses = createMemo(() => {\n    const rawClasses = [] as string[];\n\n    rawClasses.push(styleBox().disabler)\n\n    if (propsClass().disabler) {\n      rawClasses.push(propsClass().disabler!);\n    }\n    rawClasses.push(\"absolute inset-0\");\n    const r = twMerge(...rawClasses);\n    return r;\n  });\n\n  function handleClick() {\n    if (props.action != undefined) {\n      props.action(itemData());\n    }\n  }\n\n  return (\n    <div onClick={handleClick} class={itemClasses()}>\n      {itemData().label}\n      <Show when={props.disabled}>\n        <div\n          class={disablerClasses()}\n          onClick={(e) => {\n            if (!props.clickableWhendisabled) {\n              e.stopPropagation();\n            }\n          }}\n        ></div>\n      </Show>\n    </div>\n  );\n};\n"],"names":["SolTw","props","_tmpl$","buildIdLabel","arg","id","label","Array","isArray","r","Object","assign","undefined","themeAlpha","base","selected","disabled","disabler","Item","itemData","idLabel","styleBox","theme","propsClass","createMemo","class","item","itemClasses","rawClasses","push","action","customClasses","twMerge","disablerClasses","handleClick","_el$","$$click","_$insert","_$createComponent","Show","when","children","_el$2","e","clickableWhendisabled","stopPropagation","_$effect","_$className","_$delegateEvents"],"mappings":"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"}

package/dist/esm/index.js

@@ -1,9 +1,123 @@
-import { template } from 'solid-js/web';
+import { template, delegateEvents, insert, createComponent, effect, className } from 'solid-js/web';
+import { createMemo, Show } from 'solid-js';
+import { twMerge } from 'tailwind-merge';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class=bg-red-600>- - S O L T W - -`);
+var _tmpl$$1 = /*#__PURE__*/template(`<div class=bg-red-600>- - S O L T W - -`);
 const SolTw = props => {
-  return _tmpl$();
+  return _tmpl$$1();
 };
 
-export { SolTw };
+function buildIdLabel(arg) {
+  if (typeof arg == "string") {
+    return {
+      id: arg,
+      label: arg
+    };
+  } else if (Array.isArray(arg)) {
+    return {
+      id: arg[0],
+      label: arg[1]
+    };
+  } else {
+    const r = Object.assign({}, arg);
+    if (r.label == undefined) {
+      r["label"] = r.id;
+    }
+    return r;
+  }
+}
+
+const themeAlpha = {
+  "item": {
+    base: "bg-orange-900 text-stone-100",
+    selected: "bg-orange-800 text-stone-100 font-bold underline",
+    disabled: "bg-orange-900 text-stone-300 italic",
+    disabler: "bg-white/70"
+  }
+};
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
+const Item = props => {
+  const itemData = () => buildIdLabel(props.idLabel);
+  const styleBox = () => {
+    return props.theme != undefined ? props.theme : themeAlpha["item"];
+  };
+  const propsClass = createMemo(() => {
+    if (props.class == undefined) {
+      return {};
+    } else if (typeof props.class == "string") {
+      return {
+        item: props.class
+      };
+    } else {
+      return props.class;
+    }
+  });
+  const itemClasses = createMemo(() => {
+    const rawClasses = ["px-1"];
+    rawClasses.push(styleBox().base);
+
+    // const stylerClasses = styler
+    //   ? styler.classes(stags, props.vtags)
+    //   : undefined;
+    // rawClasses.push(...(stylerClasses ?? []));
+
+    if (props.action) {
+      rawClasses.push("select-none cursor-pointer");
+    }
+    const customClasses = propsClass();
+    if (customClasses.item) {
+      rawClasses.push(customClasses.item);
+    }
+    if (props.selected) {
+      rawClasses.push(styleBox().selected, customClasses.selected);
+    }
+    if (props.disabled) {
+      rawClasses.push(styleBox().disabled, customClasses.disabled);
+    }
+    rawClasses.push("relative");
+    const r = twMerge(...rawClasses);
+    return r;
+  });
+  const disablerClasses = createMemo(() => {
+    const rawClasses = [];
+    rawClasses.push(styleBox().disabler);
+    if (propsClass().disabler) {
+      rawClasses.push(propsClass().disabler);
+    }
+    rawClasses.push("absolute inset-0");
+    const r = twMerge(...rawClasses);
+    return r;
+  });
+  function handleClick() {
+    if (props.action != undefined) {
+      props.action(itemData());
+    }
+  }
+  return (() => {
+    var _el$ = _tmpl$();
+    _el$.$$click = handleClick;
+    insert(_el$, () => itemData().label, null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.disabled;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        _el$2.$$click = e => {
+          if (!props.clickableWhendisabled) {
+            e.stopPropagation();
+          }
+        };
+        effect(() => className(_el$2, disablerClasses()));
+        return _el$2;
+      }
+    }), null);
+    effect(() => className(_el$, itemClasses()));
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+export { Item, SolTw, buildIdLabel };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/soltw.tsx"],"sourcesContent":["import type { Component } from \"solid-js\";\n\ntype TProps = {}\n\nexport const SolTw : Component<TProps> = (props) =>{\n  return <div class=\"bg-red-600\">- - S O L T W - -</div>\n}\n\n\n"],"names":["SolTw","props","_tmpl$"],"mappings":";;;AAIO,MAAMA,KAAyB,GAAIC,KAAK,IAAI;AACjD,EAAA,OAAAC,MAAA,EAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/soltw.tsx","../../src/items/IdLabel.ts","../../src/theme/StyleBoxes.ts","../../src/items/Item.tsx"],"sourcesContent":["import type { Component } from \"solid-js\";\n\ntype TProps = {}\n\nexport const SolTw : Component<TProps> = (props) =>{\n  return <div class=\"bg-red-600\">- - S O L T W - -</div>\n}\n\n\n","export interface IdLabel {\n  id: string;\n  label: string;\n  [x: string | symbol]: unknown;\n}\n\nexport type IdLabelDef = {\n  id: string;\n  label?: string;\n  [x: string | symbol]: unknown;\n};\n\nexport type IdLabelArg = IdLabelDef | [string, string] | string;\n\nexport function buildIdLabel(arg: IdLabelArg): IdLabel {\n  if (typeof arg == \"string\") {\n    return { id: arg, label: arg };\n  } else if (Array.isArray(arg)) {\n    return { id: arg[0], label: arg[1] };\n  } else {\n    const r = Object.assign({}, arg);\n    if (r.label == undefined) {\n      r[\"label\"] = r.id;\n    }\n    return r as IdLabel;\n  }\n}\n\n","import type { IStyleBox } from \"./StyleBox\";\n\nexport const themeAlpha :Record<string, IStyleBox> = {\n\n  \"block\" : {\n    base: \"bg-stone-100 text-stone-900\",\n    selected: \"bg-stone-100 text-orange-800 font-bold\",\n    disabled: \"bg-stone-100 text-stone-600 italic\",\n    disabler: \"bg-white/30\"\n  },\n  \"item\" : {\n    base: \"bg-orange-900 text-stone-100\",\n    selected: \"bg-orange-800 text-stone-100 font-bold underline\",\n    disabled: \"bg-orange-900 text-stone-300 italic\",\n    disabler: \"bg-white/70\"\n  },\n\n}\n","import { type Component, createMemo, Show } from \"solid-js\";\nimport { twMerge } from \"tailwind-merge\";\nimport { buildIdLabel, type IdLabel, type IdLabelArg } from \"./IdLabel.js\";\nimport { themeAlpha } from \"../theme/StyleBoxes.js\";\nimport type { IStyleBox } from \"../theme/StyleBox.js\";\n\nexport type TItemClass = {\n  item?: string;\n  selected?: string;\n  disabled?: string;\n  disabler?: string;\n};\nexport type TItemClassArg = TItemClass | string;\n\nexport type TItemProps = {\n  idLabel: IdLabelArg;\n  action?: (item: IdLabel) => void;\n  selected?: boolean;\n  disabled?: boolean;\n  clickableWhendisabled?: boolean;\n  class?: TItemClassArg;\n  theme?: IStyleBox;\n};\n\nexport const Item: Component<TItemProps> = (props) => {\n  const itemData = () => buildIdLabel(props.idLabel);\n\n  const styleBox = () => {\n    return props.theme !=undefined  ? props.theme : themeAlpha[\"item\"]!;\n  };\n\n  const propsClass = createMemo<TItemClass>(() => {\n    if (props.class == undefined) {\n      return {};\n    } else if (typeof props.class == \"string\") {\n      return { item: props.class };\n    } else {\n      return props.class;\n    }\n  });\n\n  const itemClasses = createMemo(() => {\n    const rawClasses = [\"px-1\"] as (string | undefined)[];\n\n    rawClasses.push(styleBox().base)\n\n\n    // const stylerClasses = styler\n    //   ? styler.classes(stags, props.vtags)\n    //   : undefined;\n    // rawClasses.push(...(stylerClasses ?? []));\n\n    if (props.action) {\n      rawClasses.push(\"select-none cursor-pointer\");\n    }\n\n    const customClasses = propsClass();\n    if (customClasses.item) {\n      rawClasses.push(customClasses.item);\n    }\n    if (props.selected) {\n      rawClasses.push(styleBox().selected, customClasses.selected);\n    }\n    if (props.disabled ) {\n      rawClasses.push(styleBox().disabled, customClasses.disabled);\n    }\n\n    rawClasses.push(\"relative\");\n    const r = twMerge(...rawClasses);\n    return r;\n  });\n\n  const disablerClasses = createMemo(() => {\n    const rawClasses = [] as string[];\n\n    rawClasses.push(styleBox().disabler)\n\n    if (propsClass().disabler) {\n      rawClasses.push(propsClass().disabler!);\n    }\n    rawClasses.push(\"absolute inset-0\");\n    const r = twMerge(...rawClasses);\n    return r;\n  });\n\n  function handleClick() {\n    if (props.action != undefined) {\n      props.action(itemData());\n    }\n  }\n\n  return (\n    <div onClick={handleClick} class={itemClasses()}>\n      {itemData().label}\n      <Show when={props.disabled}>\n        <div\n          class={disablerClasses()}\n          onClick={(e) => {\n            if (!props.clickableWhendisabled) {\n              e.stopPropagation();\n            }\n          }}\n        ></div>\n      </Show>\n    </div>\n  );\n};\n"],"names":["SolTw","props","_tmpl$","buildIdLabel","arg","id","label","Array","isArray","r","Object","assign","undefined","themeAlpha","base","selected","disabled","disabler","Item","itemData","idLabel","styleBox","theme","propsClass","createMemo","class","item","itemClasses","rawClasses","push","action","customClasses","twMerge","disablerClasses","handleClick","_el$","$$click","_$insert","_$createComponent","Show","when","children","_el$2","e","clickableWhendisabled","stopPropagation","_$effect","_$className","_$delegateEvents"],"mappings":"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"}

package/dist/source/index.js

@@ -1 +1,2 @@
 export * from "./soltw.js";
+export * from "./items/index.js";

package/dist/source/items/IdLabel.js

@@ -0,0 +1,15 @@
+export function buildIdLabel(arg) {
+    if (typeof arg == "string") {
+        return { id: arg, label: arg };
+    }
+    else if (Array.isArray(arg)) {
+        return { id: arg[0], label: arg[1] };
+    }
+    else {
+        const r = Object.assign({}, arg);
+        if (r.label == undefined) {
+            r["label"] = r.id;
+        }
+        return r;
+    }
+}

package/dist/source/items/Item.jsx

@@ -0,0 +1,70 @@
+import { createMemo, Show } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { buildIdLabel } from "./IdLabel.js";
+import { themeAlpha } from "../theme/StyleBoxes.js";
+export const Item = (props) => {
+    const itemData = () => buildIdLabel(props.idLabel);
+    const styleBox = () => {
+        return props.theme != undefined ? props.theme : themeAlpha["item"];
+    };
+    const propsClass = createMemo(() => {
+        if (props.class == undefined) {
+            return {};
+        }
+        else if (typeof props.class == "string") {
+            return { item: props.class };
+        }
+        else {
+            return props.class;
+        }
+    });
+    const itemClasses = createMemo(() => {
+        const rawClasses = ["px-1"];
+        rawClasses.push(styleBox().base);
+        // const stylerClasses = styler
+        //   ? styler.classes(stags, props.vtags)
+        //   : undefined;
+        // rawClasses.push(...(stylerClasses ?? []));
+        if (props.action) {
+            rawClasses.push("select-none cursor-pointer");
+        }
+        const customClasses = propsClass();
+        if (customClasses.item) {
+            rawClasses.push(customClasses.item);
+        }
+        if (props.selected) {
+            rawClasses.push(styleBox().selected, customClasses.selected);
+        }
+        if (props.disabled) {
+            rawClasses.push(styleBox().disabled, customClasses.disabled);
+        }
+        rawClasses.push("relative");
+        const r = twMerge(...rawClasses);
+        return r;
+    });
+    const disablerClasses = createMemo(() => {
+        const rawClasses = [];
+        rawClasses.push(styleBox().disabler);
+        if (propsClass().disabler) {
+            rawClasses.push(propsClass().disabler);
+        }
+        rawClasses.push("absolute inset-0");
+        const r = twMerge(...rawClasses);
+        return r;
+    });
+    function handleClick() {
+        if (props.action != undefined) {
+            props.action(itemData());
+        }
+    }
+    return (<div onClick={handleClick} class={itemClasses()}>
+      {itemData().label}
+      <Show when={props.disabled}>
+        <div class={disablerClasses()} onClick={(e) => {
+            if (!props.clickableWhendisabled) {
+                e.stopPropagation();
+            }
+        }}></div>
+      </Show>
+    </div>);
+};

package/dist/source/items/index.js

@@ -0,0 +1,2 @@
+export * from "./IdLabel.js";
+export * from "./Item.js";

package/dist/source/theme/StyleBox.js

@@ -0,0 +1 @@
+export {};

package/dist/source/theme/StyleBoxes.js

@@ -0,0 +1,14 @@
+export const themeAlpha = {
+    "block": {
+        base: "bg-stone-100 text-stone-900",
+        selected: "bg-stone-100 text-orange-800 font-bold",
+        disabled: "bg-stone-100 text-stone-600 italic",
+        disabler: "bg-white/30"
+    },
+    "item": {
+        base: "bg-orange-900 text-stone-100",
+        selected: "bg-orange-800 text-stone-100 font-bold underline",
+        disabled: "bg-orange-900 text-stone-300 italic",
+        disabler: "bg-white/70"
+    },
+};

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from "./soltw.js";
+export * from "./items/index.js";

package/dist/types/items/IdLabel.d.ts

@@ -0,0 +1,12 @@
+export interface IdLabel {
+    id: string;
+    label: string;
+    [x: string | symbol]: unknown;
+}
+export type IdLabelDef = {
+    id: string;
+    label?: string;
+    [x: string | symbol]: unknown;
+};
+export type IdLabelArg = IdLabelDef | [string, string] | string;
+export declare function buildIdLabel(arg: IdLabelArg): IdLabel;

package/dist/types/items/Item.d.ts

@@ -0,0 +1,20 @@
+import { type Component } from "solid-js";
+import { type IdLabel, type IdLabelArg } from "./IdLabel.js";
+import type { IStyleBox } from "../theme/StyleBox.js";
+export type TItemClass = {
+    item?: string;
+    selected?: string;
+    disabled?: string;
+    disabler?: string;
+};
+export type TItemClassArg = TItemClass | string;
+export type TItemProps = {
+    idLabel: IdLabelArg;
+    action?: (item: IdLabel) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    clickableWhendisabled?: boolean;
+    class?: TItemClassArg;
+    theme?: IStyleBox;
+};
+export declare const Item: Component<TItemProps>;

package/dist/types/items/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IdLabel.js";
+export * from "./Item.js";

package/dist/types/theme/StyleBox.d.ts

@@ -0,0 +1,6 @@
+export interface IStyleBox {
+    base: string;
+    selected: string;
+    disabled: string;
+    disabler: string;
+}

package/dist/types/theme/StyleBoxes.d.ts

@@ -0,0 +1,2 @@
+import type { IStyleBox } from "./StyleBox";
+export declare const themeAlpha: Record<string, IStyleBox>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mrts/soltw",
   "description": "S O L T W : SolidJS + tailwindcss ui components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f8f48163f85c0871e835e7c0aef88b123a42a5e3"
+  "gitHead": "dc5c746473031e764be23f5efb7271a33fb5a1a9"
 }