beeple-toolkit 0.1.0

package/dist/App.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/beeple-toolkit.css

@@ -0,0 +1 @@
+.storybook-button{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#555ab9;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{padding:10px 16px;font-size:12px}.storybook-button--medium{padding:11px 20px;font-size:14px}.storybook-button--large{padding:12px 24px;font-size:16px}.storybook-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.1);padding:15px 20px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-header svg{display:inline-block;vertical-align:top}.storybook-header h1{display:inline-block;vertical-align:top;margin:6px 0 6px 10px;font-weight:700;font-size:20px;line-height:1}.storybook-header button+button{margin-left:10px}.storybook-header .welcome{margin-right:10px;color:#333;font-size:14px}.storybook-page{margin:0 auto;padding:48px 20px;max-width:600px;color:#333;font-size:14px;line-height:24px;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-page h2{display:inline-block;vertical-align:top;margin:0 0 4px;font-weight:700;font-size:32px;line-height:1}.storybook-page p{margin:1em 0}.storybook-page a{color:inherit}.storybook-page ul{margin:1em 0;padding-left:30px}.storybook-page li{margin-bottom:8px}.storybook-page .tip{display:inline-block;vertical-align:top;margin-right:10px;border-radius:1em;background:#e7fdd8;padding:4px 12px;color:#357a14;font-weight:700;font-size:11px;line-height:12px}.storybook-page .tip-wrapper{margin-top:40px;margin-bottom:40px;font-size:13px;line-height:20px}.storybook-page .tip-wrapper svg{display:inline-block;vertical-align:top;margin-top:3px;margin-right:4px;width:12px;height:12px}.storybook-page .tip-wrapper svg path{fill:#1ea7fd}

package/dist/beeple-toolkit.es.js

@@ -0,0 +1,96 @@
+import { defineComponent as p, computed as g, createElementBlock as l, openBlock as n, normalizeStyle as k, normalizeClass as y, toDisplayString as v, createElementVNode as u, createStaticVNode as b, createCommentVNode as s, createBlock as c, createTextVNode as h, ref as f, createVNode as w } from "vue";
+const m = /* @__PURE__ */ p({
+  __name: "Button",
+  props: {
+    label: {},
+    primary: { type: Boolean, default: !1 },
+    size: {},
+    backgroundColor: {}
+  },
+  emits: ["click"],
+  setup(o, { emit: t }) {
+    const e = o, r = t, i = g(() => ({
+      "storybook-button": !0,
+      "storybook-button--primary": e.primary,
+      "storybook-button--secondary": !e.primary,
+      [`storybook-button--${e.size || "medium"}`]: !0
+    })), d = g(() => ({
+      backgroundColor: e.backgroundColor
+    })), a = () => {
+      r("click", 1);
+    };
+    return (A, B) => (n(), l("button", {
+      type: "button",
+      class: y(i.value),
+      onClick: a,
+      style: k(d.value)
+    }, v(o.label), 7));
+  }
+}), z = { class: "storybook-header" }, V = {
+  key: 0,
+  class: "welcome"
+}, C = /* @__PURE__ */ p({
+  __name: "Header",
+  props: {
+    user: {}
+  },
+  emits: ["createAccount", "login", "logout"],
+  setup(o) {
+    return (t, e) => (n(), l("header", null, [
+      u("div", z, [
+        e[5] || (e[5] = b('<div><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF"></path><path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9"></path><path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8"></path></g></svg><h1>Acme</h1></div>', 1)),
+        u("div", null, [
+          o.user ? (n(), l("span", V, [
+            e[3] || (e[3] = h("Welcome, ", -1)),
+            u("b", null, v(o.user.name), 1),
+            e[4] || (e[4] = h("!", -1))
+          ])) : s("", !0),
+          o.user ? (n(), c(m, {
+            key: 1,
+            size: "small",
+            onClick: e[0] || (e[0] = (r) => t.$emit("logout")),
+            label: "Log out"
+          })) : s("", !0),
+          o.user ? s("", !0) : (n(), c(m, {
+            key: 2,
+            size: "small",
+            onClick: e[1] || (e[1] = (r) => t.$emit("login")),
+            label: "Log in"
+          })),
+          o.user ? s("", !0) : (n(), c(m, {
+            key: 3,
+            primary: "",
+            size: "small",
+            onClick: e[2] || (e[2] = (r) => t.$emit("createAccount")),
+            label: "Sign up"
+          }))
+        ])
+      ])
+    ]));
+  }
+}), $ = /* @__PURE__ */ p({
+  __name: "Page",
+  setup(o) {
+    const t = f(null), e = () => {
+      t.value = { name: "Jane Doe" };
+    }, r = () => {
+      t.value = null;
+    }, i = () => {
+      t.value = { name: "Jane Doe" };
+    };
+    return (d, a) => (n(), l("article", null, [
+      w(C, {
+        user: t.value,
+        onLogin: e,
+        onLogout: r,
+        onCreateAccount: i
+      }, null, 8, ["user"]),
+      a[0] || (a[0] = b('<section class="storybook-page"><h2>Pages in Storybook</h2><p> We recommend building UIs with a <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer"><strong>component-driven</strong></a> process starting with atomic components and ending with pages. </p><p> Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook: </p><ul><li> Use a higher-level connected component. Storybook helps you compose such data from the &quot;args&quot; of child component stories </li><li> Assemble data in the page component from your services. You can mock these services out using Storybook. </li></ul><p> Get a guided tutorial on component-driven development at <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a> . Read more in the <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a> . </p><div class="tip-wrapper"><span class="tip">Tip</span> Adjust the width of the canvas with the <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z" id="a" fill="#999"></path></g></svg> Viewports addon in the toolbar </div></section>', 1))
+    ]));
+  }
+});
+export {
+  m as Button,
+  C as Header,
+  $ as Page
+};

package/dist/beeple-toolkit.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.BeepleToolkit={},n.Vue))})(this,(function(n,e){"use strict";const a=e.defineComponent({__name:"Button",props:{label:{},primary:{type:Boolean,default:!1},size:{},backgroundColor:{}},emits:["click"],setup(r,{emit:t}){const o=r,l=t,i=e.computed(()=>({"storybook-button":!0,"storybook-button--primary":o.primary,"storybook-button--secondary":!o.primary,[`storybook-button--${o.size||"medium"}`]:!0})),d=e.computed(()=>({backgroundColor:o.backgroundColor})),s=()=>{l("click",1)};return(g,h)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(i.value),onClick:s,style:e.normalizeStyle(d.value)},e.toDisplayString(r.label),7))}}),m={class:"storybook-header"},p={key:0,class:"welcome"},c=e.defineComponent({__name:"Header",props:{user:{}},emits:["createAccount","login","logout"],setup(r){return(t,o)=>(e.openBlock(),e.createElementBlock("header",null,[e.createElementVNode("div",m,[o[5]||(o[5]=e.createStaticVNode('<div><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF"></path><path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9"></path><path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8"></path></g></svg><h1>Acme</h1></div>',1)),e.createElementVNode("div",null,[r.user?(e.openBlock(),e.createElementBlock("span",p,[o[3]||(o[3]=e.createTextVNode("Welcome, ",-1)),e.createElementVNode("b",null,e.toDisplayString(r.user.name),1),o[4]||(o[4]=e.createTextVNode("!",-1))])):e.createCommentVNode("",!0),r.user?(e.openBlock(),e.createBlock(a,{key:1,size:"small",onClick:o[0]||(o[0]=l=>t.$emit("logout")),label:"Log out"})):e.createCommentVNode("",!0),r.user?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(a,{key:2,size:"small",onClick:o[1]||(o[1]=l=>t.$emit("login")),label:"Log in"})),r.user?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(a,{key:3,primary:"",size:"small",onClick:o[2]||(o[2]=l=>t.$emit("createAccount")),label:"Sign up"}))])])]))}}),u=e.defineComponent({__name:"Page",setup(r){const t=e.ref(null),o=()=>{t.value={name:"Jane Doe"}},l=()=>{t.value=null},i=()=>{t.value={name:"Jane Doe"}};return(d,s)=>(e.openBlock(),e.createElementBlock("article",null,[e.createVNode(c,{user:t.value,onLogin:o,onLogout:l,onCreateAccount:i},null,8,["user"]),s[0]||(s[0]=e.createStaticVNode('<section class="storybook-page"><h2>Pages in Storybook</h2><p> We recommend building UIs with a <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer"><strong>component-driven</strong></a> process starting with atomic components and ending with pages. </p><p> Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook: </p><ul><li> Use a higher-level connected component. Storybook helps you compose such data from the &quot;args&quot; of child component stories </li><li> Assemble data in the page component from your services. You can mock these services out using Storybook. </li></ul><p> Get a guided tutorial on component-driven development at <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">Storybook tutorials</a> . Read more in the <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a> . </p><div class="tip-wrapper"><span class="tip">Tip</span> Adjust the width of the canvas with the <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z" id="a" fill="#999"></path></g></svg> Viewports addon in the toolbar </div></section>',1))]))}});n.Button=a,n.Header=c,n.Page=u,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/components/Button/Button.vue.d.ts

@@ -0,0 +1,28 @@
+import './button.css';
+type __VLS_Props = {
+    /**
+     * The label of the button
+     */
+    label: string;
+    /**
+     * primary or secondary button
+     */
+    primary?: boolean;
+    /**
+     * size of the button
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * background color of the button
+     */
+    backgroundColor?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((id: number) => any) | undefined;
+}>, {
+    primary: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Header/Header.vue.d.ts

@@ -0,0 +1,17 @@
+import './header.css';
+type __VLS_Props = {
+    user: {
+        name: string;
+    } | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    createAccount: () => any;
+    login: () => any;
+    logout: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCreateAccount?: (() => any) | undefined;
+    onLogin?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Page/Page.vue.d.ts

@@ -0,0 +1,4 @@
+import './page.css';
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import Button from './Button/Button.vue';
+import Header from './Header/Header.vue';
+import Page from './Page/Page.vue';
+export { Button, Header, Page, };

package/dist/main.d.ts

@@ -0,0 +1 @@
+import './style.css';

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "beeple-toolkit",
+  "version": "0.1.0",
+  "description": "Vue 3 component library beeple-toolkit",
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "toolkit"
+  ],
+  "type": "module",
+  "main": "./dist/beeple-toolkit.umd.js",
+  "module": "./dist/beeple-toolkit.es.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/beeple-toolkit.es.js",
+      "require": "./dist/beeple-toolkit.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rimraf dist && vite build",
+    "build:types": "vue-tsc -p tsconfig.types.json",
+    "prepublishOnly": "npm run build && npm run build:types",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-vitest": "^9.1.8",
+    "@storybook/vue3-vite": "^9.1.8",
+    "@types/node": "^24.5.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "happy-dom": "^19.0.2",
+    "jsdom": "^27.0.0",
+    "playwright": "^1.55.1",
+    "rimraf": "^6.0.1",
+    "storybook": "^9.1.8",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.22",
+    "vue-tsc": "^3.0.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.beeple.eu:beeple/beeple-toolkit.git"
+  },
+  "license": "ISC"
+}