@histoire/controls 0.17.16 → 1.0.0-alpha.1

package/.histoire/dist/assets/HstTokenGrid.story.025819d6.js

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { ax as _export_sfc, d as defineComponent, c as computed, r as ref, a as openBlock, b as createElementBlock, F as Fragment, J as renderList, f as renderSlot, e as createBaseVNode, M as withDirectives, i as unref, ay as VTooltip, R as createTextVNode, t as toDisplayString, j as createBlock, m as createCommentVNode, h as normalizeStyle, q as resolveComponent, k as withCtx, l as createVNode } from "./vendor.2833ae3d.js";
+import { H as HstCopyIcon } from "./HstCopyIcon.e40e725e.js";
+var HstTokenGrid_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1 = ["onMouseenter"];
+const _hoisted_2 = { class: "htw-flex htw-gap-1" };
+const _hoisted_3 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_4 = { class: "htw-flex htw-gap-1" };
+const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+const __default__ = {
+  name: "HstTokenGrid"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    tokens: { type: Object, required: true },
+    colSize: { type: Number, required: false, default: 180 },
+    getName: { type: Function, required: false, default: null }
+  },
+  setup(__props) {
+    const props = __props;
+    const processedTokens = computed(() => {
+      const list = props.tokens;
+      const getName = props.getName;
+      return Object.entries(list).map(([key, value]) => {
+        const name = getName ? getName(key, value) : key;
+        return {
+          key,
+          name,
+          value: typeof value === "number" ? value.toString() : value
+        };
+      });
+    });
+    const colSizePx = computed(() => `${props.colSize}px`);
+    const hover = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
+        style: normalizeStyle({
+          "--histoire-col-size": unref(colSizePx)
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
+          return openBlock(), createElementBlock("div", {
+            key: token.key,
+            class: "htw-flex htw-flex-col htw-gap-2",
+            onMouseenter: ($event) => hover.value = token.key,
+            onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
+          }, [
+            renderSlot(_ctx.$slots, "default", { token }),
+            createBaseVNode("div", null, [
+              createBaseVNode("div", _hoisted_2, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3, [
+                  createTextVNode(toDisplayString(token.name), 1)
+                ])), [
+                  [unref(VTooltip), token.name.length > __props.colSize / 8 ? token.name : ""]
+                ]),
+                hover.value === token.key ? (openBlock(), createBlock(HstCopyIcon, {
+                  key: 0,
+                  content: token.name,
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+              ]),
+              createBaseVNode("div", _hoisted_4, [
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_5, [
+                  createTextVNode(toDisplayString(token.value), 1)
+                ])), [
+                  [unref(VTooltip), token.value.length > __props.colSize / 8 ? token.value : ""]
+                ]),
+                hover.value === token.key ? (openBlock(), createBlock(HstCopyIcon, {
+                  key: 0,
+                  content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
+                  class: "htw-flex-none"
+                }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+              ])
+            ])
+          ], 40, _hoisted_1);
+        }), 128))
+      ], 4);
+    };
+  }
+}));
+_sfc_main$1.__file = "src/components/design-tokens/HstTokenGrid.vue";
+var HstTokenGrid = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.vue"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstTokenGrid.story",
+  setup(__props) {
+    const tokens = {
+      sm: "filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))",
+      DEFAULT: "filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))",
+      md: "filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
+      lg: "filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))",
+      xl: "filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))",
+      "2xl": "filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))",
+      none: "filter: drop-shadow(0 0 #0000)"
+    };
+    return (_ctx, _cache) => {
+      const _component_Variant = resolveComponent("Variant");
+      const _component_Story = resolveComponent("Story");
+      return openBlock(), createBlock(_component_Story, {
+        title: "design-tokens/HstTokenGrid",
+        "responsive-disabled": ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_Variant, { title: "default" }, {
+            default: withCtx(() => [
+              createVNode(HstTokenGrid, {
+                tokens,
+                "get-name": (key) => key === "DEFAULT" ? "drop-shadow" : `drop-shadow-${key}`,
+                "col-size": 160
+              }, {
+                default: withCtx(({ token }) => [
+                  createBaseVNode("div", {
+                    class: "htw-w-32 htw-h-32 htw-bg-white dark:htw-bg-black htw-rounded htw-mb-2",
+                    style: normalizeStyle(token.value)
+                  }, null, 4)
+                ]),
+                _: 1
+              }, 8, ["get-name"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+_sfc_main.__file = "src/components/design-tokens/HstTokenGrid.story.vue";
+var HstTokenGrid_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.story.vue"]]);
+export { HstTokenGrid_story as default };

package/.histoire/dist/assets/HstTokenList.story.d3aa6575.js

@@ -0,0 +1,176 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { ax as _export_sfc, d as defineComponent, c as computed, r as ref, a as openBlock, b as createElementBlock, J as renderList, f as renderSlot, e as createBaseVNode, t as toDisplayString, j as createBlock, m as createCommentVNode, i as unref, F as Fragment, q as resolveComponent, k as withCtx, l as createVNode, h as normalizeStyle } from "./vendor.2833ae3d.js";
+import { H as HstCopyIcon } from "./HstCopyIcon.e40e725e.js";
+const _hoisted_1$1 = ["onMouseenter"];
+const _hoisted_2 = { class: "htw-mx-4" };
+const _hoisted_3 = { class: "htw-flex htw-gap-1" };
+const _hoisted_4 = { class: "htw-my-0 htw-truncate htw-shrink" };
+const _hoisted_5 = { class: "htw-flex htw-gap-1" };
+const _hoisted_6 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
+const __default__ = {
+  name: "HstTokenList"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    tokens: { type: Object, required: true },
+    getName: { type: Function, required: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const processedTokens = computed(() => {
+      const list = props.tokens;
+      const getName = props.getName;
+      return Object.entries(list).map(([key, value]) => {
+        const name = getName ? getName(key, value) : key;
+        return {
+          key,
+          name,
+          value: typeof value === "number" ? value.toString() : value
+        };
+      });
+    });
+    const hover = ref(null);
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(unref(processedTokens), (token) => {
+        return openBlock(), createElementBlock("div", {
+          key: token.key,
+          class: "htw-flex htw-flex-col htw-gap-2 htw-my-8",
+          onMouseenter: ($event) => hover.value = token.key,
+          onMouseleave: _cache[0] || (_cache[0] = ($event) => hover.value = null)
+        }, [
+          renderSlot(_ctx.$slots, "default", { token }),
+          createBaseVNode("div", _hoisted_2, [
+            createBaseVNode("div", _hoisted_3, [
+              createBaseVNode("pre", _hoisted_4, toDisplayString(token.name), 1),
+              hover.value === token.key ? (openBlock(), createBlock(HstCopyIcon, {
+                key: 0,
+                content: token.name,
+                class: "htw-flex-none"
+              }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+            ]),
+            createBaseVNode("div", _hoisted_5, [
+              createBaseVNode("pre", _hoisted_6, toDisplayString(token.value), 1),
+              hover.value === token.key ? (openBlock(), createBlock(HstCopyIcon, {
+                key: 0,
+                content: typeof token.value === "string" ? token.value : JSON.stringify(token.value),
+                class: "htw-flex-none"
+              }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+            ])
+          ])
+        ], 40, _hoisted_1$1);
+      }), 128);
+    };
+  }
+}));
+_sfc_main$1.__file = "src/components/design-tokens/HstTokenList.vue";
+var HstTokenList = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstTokenList.vue"]]);
+const _hoisted_1 = { class: "htw-bg-gray-500/10" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "HstTokenList.story",
+  setup(__props) {
+    const tokens = {
+      0: 0,
+      1: "0.25rem",
+      2: "0.5rem",
+      3: "0.75rem",
+      4: "1rem",
+      5: "1.25rem",
+      6: "1.5rem",
+      8: "2rem",
+      10: "2.5rem",
+      12: "3rem",
+      16: "4rem",
+      20: "5rem",
+      24: "6rem",
+      32: "8rem",
+      40: "10rem",
+      48: "12rem",
+      56: "14rem",
+      64: "16rem",
+      auto: "auto",
+      px: "1px",
+      screen: "100vw",
+      "1/2": "50%",
+      "1/3": "33.333333%",
+      "2/3": "66.666667%",
+      "1/4": "25%",
+      "2/4": "50%",
+      "3/4": "75%",
+      "1/5": "20%",
+      "2/5": "40%",
+      "3/5": "60%",
+      "4/5": "80%",
+      "1/6": "16.666667%",
+      "2/6": "33.333333%",
+      "3/6": "50%",
+      "4/6": "66.666667%",
+      "5/6": "83.333333%",
+      "1/12": "8.333333%",
+      "2/12": "16.666667%",
+      "3/12": "25%",
+      "4/12": "33.333333%",
+      "5/12": "41.666667%",
+      "6/12": "50%",
+      "7/12": "58.333333%",
+      "8/12": "66.666667%",
+      "9/12": "75%",
+      "10/12": "83.333333%",
+      "11/12": "91.666667%",
+      full: "100%"
+    };
+    return (_ctx, _cache) => {
+      const _component_Variant = resolveComponent("Variant");
+      const _component_Story = resolveComponent("Story");
+      return openBlock(), createBlock(_component_Story, {
+        title: "design-tokens/HstTokenList",
+        "responsive-disabled": ""
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_Variant, { title: "default" }, {
+            default: withCtx(() => [
+              createVNode(HstTokenList, {
+                tokens,
+                "get-name": (key) => `w-${key}`
+              }, {
+                default: withCtx(({ token }) => [
+                  createBaseVNode("div", _hoisted_1, [
+                    createBaseVNode("div", {
+                      class: "htw-h-20 htw-bg-gray-500/50",
+                      style: normalizeStyle({
+                        width: token.value
+                      })
+                    }, null, 4)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["get-name"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+_sfc_main.__file = "src/components/design-tokens/HstTokenList.story.vue";
+var HstTokenList_story = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue"]]);
+export { HstTokenList_story as default };

package/.histoire/dist/assets/HstWrapper.246b6982.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { ax as _export_sfc, d as defineComponent, a as openBlock, b as createElementBlock, M as withDirectives, i as unref, ay as VTooltip, R as createTextVNode, t as toDisplayString, e as createBaseVNode, f as renderSlot } from "./vendor.2833ae3d.js";
+const _hoisted_1 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
+const _hoisted_2 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
+const _hoisted_3 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
+const _hoisted_4 = { class: "htw-block htw-grow" };
+const __default__ = {
+  name: "HstWrapper"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    title: { type: String, required: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", _hoisted_1, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2, [
+          createTextVNode(toDisplayString(__props.title), 1)
+        ])), [
+          [unref(VTooltip), {
+            content: __props.title,
+            placement: "left",
+            distance: 12
+          }]
+        ]),
+        createBaseVNode("span", _hoisted_3, [
+          createBaseVNode("span", _hoisted_4, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          renderSlot(_ctx.$slots, "actions")
+        ])
+      ]);
+    };
+  }
+}));
+_sfc_main.__file = "src/components/HstWrapper.vue";
+var HstWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/akryum/Projects/histoire/packages/histoire-controls/src/components/HstWrapper.vue"]]);
+export { HstWrapper as H };