@kyokusu-ui/vue 0.0.3

package/dist/Toggle.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    label?: string;
+    id?: string;
+    disabled?: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.vue';
+export * from '@kyokusu-ui/core';

package/dist/kyokusu-ui-vue.cjs

@@ -0,0 +1,2 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.dark .k-toggle-container[data-v-286c3414]{--k-toggle-bg-off:#e4e4e7;--k-toggle-bg-on:#fff;--k-toggle-thumb-off:#71717a;--k-toggle-thumb-on:#18181b;--k-toggle-ring:#fff;--k-toggle-label-color:#f4f4f5}.k-toggle-container[data-v-286c3414]{--k-toggle-width:48px;--k-toggle-height:24px;--k-toggle-thumb-size:20px;--k-toggle-bg-off:#3f3f46;--k-toggle-bg-on:#18181b;--k-toggle-thumb-off:#a1a1aa;--k-toggle-thumb-on:#fff;--k-toggle-ring:#18181b;--k-toggle-label-color:#18181b;align-items:center;gap:12px;display:flex}.sr-only[data-v-286c3414]{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.k-toggle-switch[data-v-286c3414]{height:var(--k-toggle-height);width:var(--k-toggle-width);cursor:pointer;background-color:var(--k-toggle-bg-off);box-sizing:border-box;border:1px solid #0000;border-radius:9999px;outline:none;flex-shrink:0;align-items:center;padding:0;transition:background-color .2s ease-in-out,box-shadow .2s;display:inline-flex;position:relative}.k-toggle-switch[data-v-286c3414]:focus-visible{box-shadow:0 0 0 2px transparent, 0 0 0 4px var(--k-toggle-ring)}.k-toggle--active[data-v-286c3414]{background-color:var(--k-toggle-bg-on)}.k-toggle-switch[data-v-286c3414]:disabled{opacity:.5;cursor:not-allowed}.k-toggle-thumb[data-v-286c3414]{pointer-events:none;height:var(--k-toggle-thumb-size);width:var(--k-toggle-thumb-size);background-color:var(--k-toggle-thumb-off);border-radius:50%;transition:transform .2s ease-in-out,background-color .2s;position:absolute;left:1px;box-shadow:0 1px 2px #0000001a}.k-toggle--active .k-toggle-thumb[data-v-286c3414]{background-color:var(--k-toggle-thumb-on);transform:translate(24px)}.k-toggle-label[data-v-286c3414]{color:var(--k-toggle-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:500;transition:color .2s ease-in-out}.k-toggle-label--disabled[data-v-286c3414]{opacity:.5;cursor:not-allowed}
+/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`);var t={class:`k-toggle-container`},n=[`for`],r=[`id`,`aria-checked`,`disabled`],i={class:`sr-only`},a=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`Toggle`,props:(0,e.mergeModels)({label:{},id:{},disabled:{type:Boolean}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(a){let o=a,s=(0,e.useModel)(a,`modelValue`),c=o.id||(0,e.useId)(),l=()=>{o.disabled||(s.value=!s.value)};return(o,u)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[a.label?((0,e.openBlock)(),(0,e.createElementBlock)(`label`,{key:0,for:(0,e.unref)(c),class:(0,e.normalizeClass)([`k-toggle-label`,{"k-toggle-label--disabled":a.disabled}]),onClick:(0,e.withModifiers)(l,[`prevent`])},(0,e.toDisplayString)(a.label),11,n)):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`button`,{id:(0,e.unref)(c),type:`button`,role:`switch`,"aria-checked":s.value,disabled:a.disabled,onClick:l,class:(0,e.normalizeClass)([`k-toggle-switch`,{"k-toggle--active":s.value}])},[(0,e.createElementVNode)(`span`,i,(0,e.toDisplayString)(a.label),1),u[0]||=(0,e.createElementVNode)(`span`,{"aria-hidden":`true`,class:`k-toggle-thumb`},null,-1)],10,r)]))}}),[[`__scopeId`,`data-v-286c3414`]]);exports.Toggle=a;var o=require(`@kyokusu-ui/core`);Object.keys(o).forEach(function(e){e!==`default`&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return o[e]}})});

package/dist/kyokusu-ui-vue.js

@@ -0,0 +1,51 @@
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.dark .k-toggle-container[data-v-286c3414]{--k-toggle-bg-off:#e4e4e7;--k-toggle-bg-on:#fff;--k-toggle-thumb-off:#71717a;--k-toggle-thumb-on:#18181b;--k-toggle-ring:#fff;--k-toggle-label-color:#f4f4f5}.k-toggle-container[data-v-286c3414]{--k-toggle-width:48px;--k-toggle-height:24px;--k-toggle-thumb-size:20px;--k-toggle-bg-off:#3f3f46;--k-toggle-bg-on:#18181b;--k-toggle-thumb-off:#a1a1aa;--k-toggle-thumb-on:#fff;--k-toggle-ring:#18181b;--k-toggle-label-color:#18181b;align-items:center;gap:12px;display:flex}.sr-only[data-v-286c3414]{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.k-toggle-switch[data-v-286c3414]{height:var(--k-toggle-height);width:var(--k-toggle-width);cursor:pointer;background-color:var(--k-toggle-bg-off);box-sizing:border-box;border:1px solid #0000;border-radius:9999px;outline:none;flex-shrink:0;align-items:center;padding:0;transition:background-color .2s ease-in-out,box-shadow .2s;display:inline-flex;position:relative}.k-toggle-switch[data-v-286c3414]:focus-visible{box-shadow:0 0 0 2px transparent, 0 0 0 4px var(--k-toggle-ring)}.k-toggle--active[data-v-286c3414]{background-color:var(--k-toggle-bg-on)}.k-toggle-switch[data-v-286c3414]:disabled{opacity:.5;cursor:not-allowed}.k-toggle-thumb[data-v-286c3414]{pointer-events:none;height:var(--k-toggle-thumb-size);width:var(--k-toggle-thumb-size);background-color:var(--k-toggle-thumb-off);border-radius:50%;transition:transform .2s ease-in-out,background-color .2s;position:absolute;left:1px;box-shadow:0 1px 2px #0000001a}.k-toggle--active .k-toggle-thumb[data-v-286c3414]{background-color:var(--k-toggle-thumb-on);transform:translate(24px)}.k-toggle-label[data-v-286c3414]{color:var(--k-toggle-label-color);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:500;transition:color .2s ease-in-out}.k-toggle-label--disabled[data-v-286c3414]{opacity:.5;cursor:not-allowed}
+/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, normalizeClass as a, openBlock as o, toDisplayString as s, unref as c, useId as l, useModel as u, withModifiers as d } from "vue";
+export * from "@kyokusu-ui/core";
+//#region src/Toggle.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "k-toggle-container" }, p = ["for"], m = [
+	"id",
+	"aria-checked",
+	"disabled"
+], h = { class: "sr-only" }, g = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ r({
+	__name: "Toggle",
+	props: /* @__PURE__ */ i({
+		label: {},
+		id: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = r, g = u(r, "modelValue"), _ = i.id || l(), v = () => {
+			i.disabled || (g.value = !g.value);
+		};
+		return (i, l) => (o(), t("div", f, [r.label ? (o(), t("label", {
+			key: 0,
+			for: c(_),
+			class: a(["k-toggle-label", { "k-toggle-label--disabled": r.disabled }]),
+			onClick: d(v, ["prevent"])
+		}, s(r.label), 11, p)) : e("", !0), n("button", {
+			id: c(_),
+			type: "button",
+			role: "switch",
+			"aria-checked": g.value,
+			disabled: r.disabled,
+			onClick: v,
+			class: a(["k-toggle-switch", { "k-toggle--active": g.value }])
+		}, [n("span", h, s(r.label), 1), l[0] ||= n("span", {
+			"aria-hidden": "true",
+			class: "k-toggle-thumb"
+		}, null, -1)], 10, m)]));
+	}
+}), [["__scopeId", "data-v-286c3414"]]);
+//#endregion
+export { g as Toggle };

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@kyokusu-ui/vue",
+  "version": "0.0.3",
+  "type": "module",
+  "main": "./dist/kyokusu-ui-vue.umd.cjs",
+  "module": "./dist/kyokusu-ui-vue.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "dependencies": {
+    "@kyokusu-ui/core": "^0.0.3",
+    "vue": "^3.5.32"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "vite": "^8.0.3",
+    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "import": "./dist/kyokusu-ui-vue.js",
+      "require": "./dist/kyokusu-ui-vue.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  }
+}