@byyuurin/ui 0.0.1 → 0.0.3

package/dist/runtime/composables/useModal.cjs

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModal = exports.provideModalState = exports.injectModalState = void 0;
+var _core = require("@vueuse/core");
+var _vue = require("vue");
+var _utils = require("../utils/index.cjs");
+const {
+  inject: injectModalState,
+  provide: provideModalState
+} = (0, _utils.createInjection)("ui.modal");
+exports.provideModalState = provideModalState;
+exports.injectModalState = injectModalState;
+const useModal = exports.useModal = (0, _core.createSharedComposable)(() => {
+  const modalState = injectModalState();
+  const isOpen = (0, _vue.ref)(false);
+  function open(component, props) {
+    if (!modalState) throw new Error("useModal() is called without provider");
+    modalState.value = {
+      component,
+      props: props ?? {}
+    };
+    isOpen.value = true;
+  }
+  function close() {
+    if (!modalState) return;
+    isOpen.value = false;
+  }
+  function reset() {
+    if (!modalState) return;
+    modalState.value = {
+      component: "div",
+      props: {}
+    };
+  }
+  function patch(props) {
+    if (!modalState) return;
+    modalState.value = {
+      ...modalState.value,
+      props: {
+        ...modalState.value.props,
+        ...props
+      }
+    };
+  }
+  return {
+    open,
+    close,
+    reset,
+    patch,
+    isOpen
+  };
+});

package/dist/runtime/composables/useTheme.cjs

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports.provideThemeExtension = exports.injectThemeExtension = void 0;
+var _unocssPreset = require("@byyuurin/ui/unocss-preset");
+var _core = require("@vueuse/core");
+var _vue = require("vue");
+var theme = _interopRequireWildcard(require("../theme/index.cjs"));
+var _utils = require("../utils/index.cjs");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const {
+  provide: provideThemeExtension,
+  inject: injectThemeExtension
+} = (0, _utils.createInjection)("ui.themeExtension", {});
+exports.injectThemeExtension = injectThemeExtension;
+exports.provideThemeExtension = provideThemeExtension;
+const useTheme = exports.useTheme = (0, _core.createSharedComposable)(() => {
+  const _theme = injectThemeExtension();
+  const mergeRules = (0, _unocssPreset.createMergeRules)();
+  const {
+    createStyler
+  } = (0, _utils.prepareStyler)(mergeRules);
+  return {
+    theme: (0, _vue.computed)(() => (0, _utils.extendTheme)((0, _vue.toValue)(_theme), theme)),
+    createStyler
+  };
+});

package/dist/{composables → runtime/composables}/useTheme.d.ts

@@ -1,7 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue';
 import * as theme from '../theme';
 export declare const provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
-export declare const mergeRules: import("@byyuurin/ui-kit/index").CRRule[];
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
     createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, never, B, S>) => [keyof V] extends string[] ? (props: Required<import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };

package/dist/{composables → runtime/composables}/useTheme.mjs

@@ -1,15 +1,15 @@
+import { createMergeRules } from "@byyuurin/ui/unocss-preset";
 import { createSharedComposable } from "@vueuse/core";
 import { computed, toValue } from "vue";
-import { createMergeRules, extendTheme, prepareStyler } from "../internal/index.mjs";
 import * as theme from "../theme/index.mjs";
-import { createInjection } from "../utils/index.mjs";
+import { createInjection, extendTheme, prepareStyler } from "../utils/index.mjs";
 export const {
   provide: provideThemeExtension,
   inject: injectThemeExtension
 } = createInjection("ui.themeExtension", {});
-export const mergeRules = createMergeRules();
 export const useTheme = createSharedComposable(() => {
   const _theme = injectThemeExtension();
+  const mergeRules = createMergeRules();
   const { createStyler } = prepareStyler(mergeRules);
   return {
     theme: computed(() => extendTheme(toValue(_theme), theme)),

package/dist/runtime/composables/useToast.cjs

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToast = void 0;
+var _core = require("@vueuse/core");
+var _vue = require("vue");
+const useToast = exports.useToast = (0, _core.createSharedComposable)(() => {
+  const toasts = (0, _vue.ref)([]);
+  function add(toast) {
+    const body = {
+      id: Date.now().toString(),
+      open: true,
+      ...toast
+    };
+    const index = toasts.value.findIndex(t => t.id === body.id);
+    if (index === -1) toasts.value.push(body);
+    toasts.value = toasts.value.slice(-5);
+    return body;
+  }
+  function update(id, toast) {
+    const index = toasts.value.findIndex(t => t.id === id);
+    if (index === -1) return;
+    toasts.value[index] = {
+      ...toasts.value[index],
+      ...toast
+    };
+  }
+  function remove(id) {
+    const index = toasts.value.findIndex(t => t.id === id);
+    if (index === -1) return;
+    toasts.value[index] = {
+      ...toasts.value[index],
+      open: false
+    };
+    setTimeout(() => {
+      toasts.value = toasts.value.filter(t => t.id !== id);
+    }, 200);
+  }
+  function clear() {
+    toasts.value = [];
+  }
+  return {
+    toasts,
+    add,
+    update,
+    remove,
+    clear
+  };
+});

package/dist/{composables → runtime/composables}/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from '../types';
+import type { ToastProps } from '@byyuurin/ui';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
     click?: (toast: Toast) => void;

package/dist/runtime/theme/accordion.cjs

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "w-full color-ui-cb",
+    item: "border-b last:border-b-0",
+    header: "flex",
+    trigger: "group flex-1 flex items-center gap-2 font-medium text-sm py-4 focus-visible:outline-ui-fill min-w-0",
+    content: ["overflow-hidden focus:outline-none", "data-[state=open]:animate-[accordion-down_200ms_ease-out]", "data-[state=closed]:animate-[accordion-up_200ms_ease-out]"],
+    body: "text-sm pb-4 color-ui-cb/80",
+    icon: "shrink-0 size-5",
+    trailingIcon: "shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200",
+    label: "text-start break-words"
+  },
+  variants: {
+    disabled: {
+      true: {
+        trigger: "cursor-not-allowed opacity-50"
+      }
+    }
+  }
+});

package/dist/runtime/theme/app.cjs

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+module.exports = {
+  icons: {
+    close: "i-mdi-close-thick",
+    loading: "i-mdi-loading",
+    check: "i-mdi-check-bold",
+    indeterminate: "i-mdi-minus-thick",
+    down: "i-mdi-chevron-down"
+  }
+};

package/dist/runtime/theme/button.cjs

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    base: ["inline-flex items-center leading-normal transition-colors", "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50"],
+    label: "color-inherit",
+    prefixIcon: "shrink-0 size-1.5em",
+    suffixIcon: "shrink-0 size-1.5em"
+  },
+  variants: {
+    variant: {
+      solid: {
+        base: ["color-ui-c1 bg-ui-fill/90", "hover:bg-ui-fill/80 active:bg-ui-fill", "disabled:bg-ui-fill/90 aria-disabled:bg-ui-fill/90"]
+      },
+      outline: {
+        base: ["color-ui-fill bg-ui-c1 ring ring-inset ring-ui-fill", "hover:bg-ui-fill/10 active:bg-ui-fill/25", "disabled:bg-ui-c1 aria-disabled:bg-ui-c1"]
+      },
+      soft: {
+        base: ["color-ui-content/80 bg-ui-fill/10", "hover:bg-ui-fill/15 hover:color-ui-content/80 active:bg-ui-fill/20 active:color-ui-content/90", "disabled:bg-ui-fill/10 aria-disabled:bg-ui-fill/10 disabled:color-ui-content/80 aria-disabled:color-ui-content/80"]
+      },
+      ghost: {
+        base: ["color-ui-fill/80 bg-transparent", "hover:bg-ui-fill/10 hover:color-ui-fill/80 active:bg-ui-fill/20 active:color-ui-fill/90", "disabled:bg-transparent aria-disabled:bg-transparent disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80"]
+      },
+      link: {
+        base: ["color-ui-fill bg-transparent", "hover:color-ui-fill/80 active:color-ui-fill/90", "disabled:color-ui-fill aria-disabled:color-ui-fill"]
+      }
+    },
+    size: {
+      xs: {
+        base: "text-xs"
+      },
+      sm: {
+        base: "text-sm"
+      },
+      md: {
+        base: "text-base"
+      },
+      lg: {
+        base: "text-lg"
+      },
+      xl: {
+        base: "text-xl"
+      }
+    },
+    round: {
+      true: {
+        base: "rounded-full"
+      },
+      false: {
+        base: "rounded-ui-button"
+      }
+    },
+    active: {
+      true: ""
+    },
+    prefix: {
+      true: ""
+    },
+    suffix: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    size: ["xs", "sm", "md"],
+    class: {
+      base: "p-1.5",
+      label: "px-1"
+    }
+  }, {
+    size: ["lg", "xl"],
+    class: {
+      base: "p-2.5",
+      label: "px-2"
+    }
+  }, {
+    active: true,
+    variant: "solid",
+    class: {
+      base: "bg-ui-fill hover:bg-ui-fill"
+    }
+  }, {
+    active: true,
+    variant: "outline",
+    class: {
+      base: "bg-ui-fill/25 hover:bg-ui-fill/25"
+    }
+  }, {
+    active: true,
+    variant: "soft",
+    class: {
+      base: "color-ui-content/90 bg-ui-fill/20 hover:color-ui-content/90 hover:bg-ui-fill/20"
+    }
+  }, {
+    active: true,
+    variant: "ghost",
+    class: {
+      base: "color-ui-fill/90 bg-ui-fill/20 hover:color-ui-fill/90 hover:bg-ui-fill/20"
+    }
+  }, {
+    active: true,
+    variant: "link",
+    class: {
+      base: "color-ui-fill/90 hover:color-ui-fill/90"
+    }
+  }, {
+    loading: true,
+    prefix: true,
+    class: {
+      prefixIcon: "animate-spin"
+    }
+  }, {
+    loading: true,
+    prefix: false,
+    suffix: true,
+    class: {
+      suffixIcon: "animate-spin"
+    }
+  }]
+});

package/dist/runtime/theme/card.cjs

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "color-ui-cb bg-ui-c1 ring ring-ui-cb/10 divide-y divide-ui-cb/10 rounded-ui-box shadow-sm shadow-ui-cb/10",
+    header: "flex flex-wrap items-center gap-1 px-4 py-5 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "flex-grow color-ui-cb text-xl font-semibold",
+    description: "w-full color-ui-cb/80"
+  }
+});

package/dist/runtime/theme/checkbox.cjs

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "relative flex items-start",
+    base: ["size-1.25em shrink-0 flex items-center justify-center rounded-ui-base color-ui-c1 ring ring-inset ring-ui-cb", "focus-visible:outline-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2"],
+    container: "flex items-center h-1.25em",
+    wrapper: "text-inherit ms-2",
+    icon: "shrink-0 size-1em data-[state=checked]:animate-[scale-in_200ms_ease-out]",
+    label: "flex color-ui-cb after:content-empty",
+    description: "color-ui-cb/60"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "text-xs"
+      },
+      sm: {
+        root: "text-sm"
+      },
+      md: {
+        root: "text-base"
+      },
+      lg: {
+        root: "text-lg"
+      },
+      xl: {
+        root: "text-xl"
+      }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5`
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+      },
+      false: {
+        label: "cursor-pointer"
+      }
+    },
+    checked: {
+      true: {
+        base: "ring-2 ring-ui-content bg-ui-content",
+        icon: "color-ui-c1"
+      }
+    }
+  }
+});

package/dist/runtime/theme/drawer.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    overlay: "fixed inset-0 bg-ui-c3/75",
+    content: "fixed bg-ui-c1 ring ring-ui-cb/5 flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-ui-cb/17.5",
+    container: "w-full flex flex-col overflow-hidden overflow-y-auto",
+    header: "p-4 sm:px-6 sibling:pt-0",
+    title: "color-ui-cb text-xl font-semibold",
+    description: "mt-1 color-ui-cb/80",
+    body: "p-4 sm:px-6 flex-1 sibling:pt-0",
+    footer: "p-4 sm:px-6 flex flex-col gap-1.5"
+  },
+  variants: {
+    direction: {
+      top: {
+        content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box",
+        handle: "mb-4"
+      },
+      right: {
+        content: "right-4 flex-row rounded-l-ui-box",
+        handle: "ml-4"
+      },
+      bottom: {
+        content: "bottom-0 mt-24 flex-col rounded-t-ui-box",
+        handle: "mt-4"
+      },
+      left: {
+        content: "left-4 flex-row-reverse rounded-r-ui-box",
+        handle: "mr-4"
+      }
+    },
+    blur: {
+      true: {
+        overlay: "backdrop-blur-sm"
+      }
+    },
+    full: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    direction: ["top", "bottom"],
+    class: {
+      content: "inset-x-0 h-auto max-h-[96%]",
+      handle: "w-12 h-1.5 mx-auto"
+    }
+  }, {
+    direction: ["top", "bottom"],
+    full: false,
+    class: {
+      content: "inset-x-4 my-4 rounded-ui-box after:hidden"
+    }
+  }, {
+    direction: ["right", "left"],
+    class: {
+      content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]",
+      handle: "h-12 w-1.5 my-auto"
+    }
+  }, {
+    direction: ["right", "left"],
+    full: false,
+    class: {
+      content: "inset-y-4 rounded-ui-box after:hidden"
+    }
+  }]
+});

package/dist/runtime/theme/index.cjs

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "accordion", {
+  enumerable: true,
+  get: function () {
+    return _accordion.default;
+  }
+});
+Object.defineProperty(exports, "app", {
+  enumerable: true,
+  get: function () {
+    return _app.default;
+  }
+});
+Object.defineProperty(exports, "button", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
+Object.defineProperty(exports, "card", {
+  enumerable: true,
+  get: function () {
+    return _card.default;
+  }
+});
+Object.defineProperty(exports, "checkbox", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.default;
+  }
+});
+Object.defineProperty(exports, "drawer", {
+  enumerable: true,
+  get: function () {
+    return _drawer.default;
+  }
+});
+Object.defineProperty(exports, "input", {
+  enumerable: true,
+  get: function () {
+    return _input.default;
+  }
+});
+Object.defineProperty(exports, "link", {
+  enumerable: true,
+  get: function () {
+    return _link.default;
+  }
+});
+Object.defineProperty(exports, "modal", {
+  enumerable: true,
+  get: function () {
+    return _modal.default;
+  }
+});
+Object.defineProperty(exports, "popover", {
+  enumerable: true,
+  get: function () {
+    return _popover.default;
+  }
+});
+Object.defineProperty(exports, "radioGroup", {
+  enumerable: true,
+  get: function () {
+    return _radioGroup.default;
+  }
+});
+Object.defineProperty(exports, "select", {
+  enumerable: true,
+  get: function () {
+    return _select.default;
+  }
+});
+Object.defineProperty(exports, "switch", {
+  enumerable: true,
+  get: function () {
+    return _switch.default;
+  }
+});
+Object.defineProperty(exports, "tabs", {
+  enumerable: true,
+  get: function () {
+    return _tabs.default;
+  }
+});
+Object.defineProperty(exports, "toast", {
+  enumerable: true,
+  get: function () {
+    return _toast.default;
+  }
+});
+Object.defineProperty(exports, "toaster", {
+  enumerable: true,
+  get: function () {
+    return _toaster.default;
+  }
+});
+Object.defineProperty(exports, "tooltip", {
+  enumerable: true,
+  get: function () {
+    return _tooltip.default;
+  }
+});
+var _accordion = _interopRequireDefault(require("./accordion.cjs"));
+var _app = _interopRequireDefault(require("./app.cjs"));
+var _button = _interopRequireDefault(require("./button.cjs"));
+var _card = _interopRequireDefault(require("./card.cjs"));
+var _checkbox = _interopRequireDefault(require("./checkbox.cjs"));
+var _drawer = _interopRequireDefault(require("./drawer.cjs"));
+var _input = _interopRequireDefault(require("./input.cjs"));
+var _link = _interopRequireDefault(require("./link.cjs"));
+var _modal = _interopRequireDefault(require("./modal.cjs"));
+var _popover = _interopRequireDefault(require("./popover.cjs"));
+var _radioGroup = _interopRequireDefault(require("./radioGroup.cjs"));
+var _select = _interopRequireDefault(require("./select.cjs"));
+var _switch = _interopRequireDefault(require("./switch.cjs"));
+var _tabs = _interopRequireDefault(require("./tabs.cjs"));
+var _toast = _interopRequireDefault(require("./toast.cjs"));
+var _toaster = _interopRequireDefault(require("./toaster.cjs"));
+var _tooltip = _interopRequireDefault(require("./tooltip.cjs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }