@yymojo-tec/mojo-ui 0.1.0

package/README.md

@@ -0,0 +1,211 @@
+# mojo-ui
+
+`mojo-ui` 鏄竴涓熀浜?Vue 3銆乀ypeScript 鍜?Headless UI 灏佽鐨勭粍浠跺簱锛屾彁渚涙槑鏆椾袱濂椾富棰樻牱寮忋€?
+## 瀹夎
+
+```bash
+pnpm add @yymojo-tec/mojo-ui
+```
+
+涔熷彲浠ヤ娇鐢?npm锛?
+```bash
+npm install @yymojo-tec/mojo-ui
+```
+
+## 鍏ㄩ噺寮曞叆
+
+```ts
+import { createApp } from "vue";
+import MojoUi from "@yymojo-tec/mojo-ui";
+import "@yymojo-tec/mojo-ui/style.css";
+import App from "./App.vue";
+
+createApp(App).use(MojoUi).mount("#app");
+```
+
+## 鎸夐渶寮曞叆
+
+```vue
+<script setup lang="ts">
+import { MoButton } from "@yymojo-tec/mojo-ui";
+import "@yymojo-tec/mojo-ui/style.css";
+</script>
+
+<template>
+  <MoButton type="primary" theme="dark">鐢熸垚</MoButton>
+</template>
+```
+
+## 涓婚
+
+缁勪欢閫氳繃 `theme` 鍙傛暟鎺у埗浜壊鍜屾殫鑹诧細
+
+```vue
+<MoButton theme="light">Light</MoButton>
+<MoButton theme="dark">Dark</MoButton>
+```
+
+## 缁勪欢
+
+### Button
+
+```vue
+<MoButton type="primary" round size="small">鐢熸垚闊宠壊</MoButton>
+
+<MoButton theme="dark">
+  <template #prefix>鉁?/template>
+  閲嶆柊鐢熸垚
+</MoButton>
+
+<MoButton icon>
+  <template #icon>鈫?/template>
+</MoButton>
+```
+
+### Row / Col
+
+```vue
+<MoRow :gutter="12">
+  <MoCol :span="8">A</MoCol>
+  <MoCol :span="8">B</MoCol>
+  <MoCol :span="8">C</MoCol>
+</MoRow>
+```
+
+### Card
+
+```vue
+<MoCard theme="dark" shadow="hover" border-style="solid">
+  鍗＄墖鍐呭
+</MoCard>
+
+<MoCard theme="dark" selectable v-model:selected="selected">
+  <template #selected-icon>鈾?/template>
+  OrcaSlicer
+</MoCard>
+```
+
+### Form
+
+```vue
+<script setup lang="ts">
+import { reactive } from "vue";
+import { requiredRule, phoneRule } from "@yymojo-tec/mojo-ui";
+
+const model = reactive({ name: "", phone: "" });
+const rules = {
+  name: [requiredRule("璇疯緭鍏ュ悕绉?)],
+  phone: [requiredRule("璇疯緭鍏ユ墜鏈哄彿"), phoneRule()]
+};
+</script>
+
+<template>
+  <MoForm :model="model" :rules="rules" label-position="top">
+    <MoFormItem label="鍚嶇О" prop="name" required>
+      <MoInput v-model="model.name" placeholder="杈撳叆鍚嶇О" />
+    </MoFormItem>
+  </MoForm>
+</template>
+```
+
+### Input
+
+```vue
+<MoInput v-model="name" :maxlength="15" show-word-limit placeholder="杈撳叆鍚嶇О" />
+
+<MoInput
+  v-model="intro"
+  type="textarea"
+  :rows="4"
+  :maxlength="1000"
+  show-word-limit
+  placeholder="杈撳叆寮€鍦虹櫧"
+/>
+
+<MoInput
+  v-model="keyword"
+  v-model:tags="tags"
+  taggable
+  placeholder="杈撳叆鍚庢寜鍥炶溅娣诲姞"
+/>
+```
+
+### Tabs
+
+```vue
+<MoTabs v-model="active" :items="tabs" size="large">
+  <template #label="{ item }">
+    {{ item.label }}
+  </template>
+
+  <template #panel="{ item }">
+    {{ item.value }}
+  </template>
+</MoTabs>
+```
+
+### Select
+
+```vue
+<MoSelect v-model="value" :options="options" theme="dark" />
+```
+
+### Menu
+
+```vue
+<MoMenu :items="items" theme="dark" @select="handleSelect">
+  <template #trigger>
+    <MoButton theme="dark">鍙戝竷</MoButton>
+  </template>
+</MoMenu>
+```
+
+### Upload
+
+```vue
+<MoUpload
+  theme="dark"
+  accept="image/png,image/jpeg,image/webp"
+  :limit="1"
+  :max-size="10"
+  crop
+  crop-shape="circle"
+  :crop-size="96"
+  hint="PNG/JPG/WebP锛屾渶澶?0MB"
+/>
+```
+
+鑷畾涔変笂浼犲尯鍩燂細
+
+```vue
+<MoUpload theme="dark">
+  <template #dropzone>
+    <div class="upload-icon">+</div>
+    <div>鎷栨嫿鏂囦欢鍒拌繖閲?/div>
+    <div>鎴栫偣鍑讳笂浼?/div>
+  </template>
+</MoUpload>
+```
+
+鐭╁舰瑁佸垏锛?
+```vue
+<MoUpload crop crop-shape="rect" :crop-width="320" :crop-height="180" />
+```
+
+## 鏈湴寮€鍙?
+```bash
+pnpm install
+pnpm dev
+```
+
+## 鏋勫缓
+
+```bash
+pnpm build
+```
+
+## 鍙戝竷鍓嶆鏌?
+```bash
+pnpm release:dry
+```
+

package/dist/mojo-ui.css

@@ -0,0 +1 @@
+:root{--mo-radius-base: 6px;--mo-transition: .16s ease}:root,[data-mojo-theme=light],.mo-theme--light{--mo-bg: #f6f7fb;--mo-header-bg: #ffffff;--mo-sidebar-bg: #ffffff;--mo-panel-bg: #ffffff;--mo-panel-bg-secondary: #f0f2f8;--mo-field-bg: #f8f9fc;--mo-primary: #6f55e8;--mo-primary-hover: #5f48d6;--mo-secondary: #b43fd2;--mo-secondary-hover: #9f34bd;--mo-gradient-start: #6f55e8;--mo-gradient-end: #b43fd2;--mo-text-primary: #202337;--mo-text-secondary: #5d6278;--mo-text-tertiary: #8b91a4;--mo-success: #1d9e75;--mo-success-hover: #168865;--mo-warning: #f6c544;--mo-warning-hover: #dea915;--mo-error: #e04472;--mo-error-hover: #c73360;--mo-border: rgba(31, 36, 54, .1);--mo-border-active: #6f55e8;--mo-disabled-bg: #eef0f6;--mo-disabled-text: #a2a7b8}[data-mojo-theme=dark],.mo-theme--dark{--mo-bg: #09070f;--mo-header-bg: #120f1e;--mo-sidebar-bg: #120f1e;--mo-panel-bg: #14171e;--mo-panel-bg-secondary: #262138;--mo-field-bg: #14101f;--mo-primary: #8b5cff;--mo-primary-hover: #9c76ff;--mo-secondary: #c44fe0;--mo-secondary-hover: #d46bea;--mo-gradient-start: #7b5cff;--mo-gradient-end: #c44fe0;--mo-text-primary: #eeeaff;--mo-text-secondary: #a09bbd;--mo-text-tertiary: #6f6a86;--mo-success: #1d9e75;--mo-success-hover: #25b688;--mo-warning: #f6c544;--mo-warning-hover: #ffd86a;--mo-error: #ff5c8a;--mo-error-hover: #ff7aa1;--mo-border: transparent;--mo-border-active: #8b5cff;--mo-disabled-bg: #201b32;--mo-disabled-text: #6f6a86}*{box-sizing:border-box}.mo-button{--mo-button-bg: var(--mo-button-custom-bg, var(--mo-panel-bg));--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-text-secondary, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-bg) 88%, var(--mo-primary));--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:max-content;padding:10px;border:1px solid var(--mo-button-border);border-radius:var(--mo-radius-base);background:var(--mo-button-bg);color:var(--mo-button-color);font:inherit;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background var(--mo-transition),border-color var(--mo-transition),box-shadow var(--mo-transition),color var(--mo-transition),opacity var(--mo-transition),transform var(--mo-transition)}.mo-button:hover:not(.is-disabled,.is-loading){border-color:var(--mo-button-hover-border);background:var(--mo-button-hover-bg);color:var(--mo-button-hover-color)}.mo-button:active:not(.is-disabled,.is-loading){transform:translateY(1px)}.mo-button.is-block{width:100%}.mo-button.is-disabled,.mo-button.is-loading{cursor:not-allowed;opacity:.72}.mo-button.is-disabled{--mo-button-bg: var(--mo-disabled-bg);--mo-button-border: var(--mo-border);--mo-button-color: var(--mo-disabled-text)}.mo-button.is-round{border-radius:999px}.mo-button.is-icon-only{min-width:38px}.mo-button--small{gap:6px;padding:6px 10px;height:max-content;font-size:12px}.mo-button--small.is-icon-only{width:32px;min-width:32px}.mo-button--large{gap:10px;height:max-content;padding:14px;border-radius:12px;font-size:16px}.mo-button--large.is-icon-only{width:52px;min-width:52px}.mo-button--primary{--mo-button-accent: var(--mo-primary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--ghost{--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-primary) 14%, transparent);--mo-button-hover-border: var(--mo-border-active);--mo-button-hover-color: var(--mo-text-primary)}.mo-button--secondary{--mo-button-accent: var(--mo-secondary);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--gradient{--mo-button-bg: linear-gradient(90deg, var(--mo-gradient-start), var(--mo-gradient-end));--mo-button-border: var(--mo-button-custom-border, transparent);--mo-button-color: var(--mo-button-custom-color, #ffffff);--mo-button-hover-bg: linear-gradient(90deg, var(--mo-primary-hover), var(--mo-secondary-hover));--mo-button-hover-border: transparent;--mo-button-hover-color: #ffffff;background:var(--mo-button-custom-bg, var(--mo-button-bg));box-shadow:0 10px 24px #8b5cff3d}.mo-button--gradient:hover:not(.is-disabled,.is-loading){background:var(--mo-button-custom-bg, var(--mo-button-hover-bg));box-shadow:0 12px 28px #c44fe047}.mo-button--success{--mo-button-accent: var(--mo-success);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--warning{--mo-button-accent: var(--mo-warning);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 14%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button--danger{--mo-button-accent: var(--mo-error);--mo-button-bg: var(--mo-button-custom-bg, transparent);--mo-button-border: var(--mo-button-custom-border, var(--mo-border));--mo-button-color: var(--mo-button-custom-color, var(--mo-text-primary));--mo-button-hover-bg: color-mix(in srgb, var(--mo-button-accent) 12%, transparent);--mo-button-hover-border: var(--mo-button-accent);--mo-button-hover-color: var(--mo-button-accent)}.mo-button__content{min-width:0;overflow:hidden;line-height:1;text-overflow:ellipsis}.mo-button__icon svg,.mo-button__spinner svg{width:1em;height:1em}.mo-button__spinner{border:2px solid currentcolor;border-right-color:transparent;border-radius:50%;animation:mo-button-spin .8s linear infinite}@keyframes mo-button-spin{to{transform:rotate(360deg)}}.mo-card{--mo-card-bg: var(--mo-panel-bg);--mo-card-border: var(--mo-border);--mo-card-border-hover: var(--mo-border-active);--mo-card-shadow: 0 14px 34px rgba(31, 36, 54, .1);--mo-card-shadow-dark: 0 16px 36px rgba(0, 0, 0, .28);position:relative;overflow:hidden;border:1px solid var(--mo-card-border);border-radius:8px;background:var(--mo-card-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition),transform var(--mo-transition)}.mo-card.is-hoverable:hover{border-color:var(--mo-card-border-hover)}.mo-card.is-selectable{cursor:pointer;outline:none}.mo-card.is-selectable:focus-visible{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-card.is-selected{border-color:var(--mo-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--mo-primary) 10%,transparent),transparent 42%),var(--mo-card-bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--mo-primary) 26%,transparent)}.mo-card.is-selected.is-hoverable:hover{border-color:var(--mo-primary)}.mo-card.is-hoverable.is-animated:hover{transform:translateY(-4px)}.mo-card--shadow-always{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-always{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow)}.mo-theme--dark.mo-card--shadow-hover.is-hoverable:hover{box-shadow:var(--mo-card-shadow-dark)}.mo-card--shadow-never{box-shadow:none}.mo-card--border-solid{border-style:solid}.mo-card--border-dashed{border-style:dashed}.mo-card--border-dotted{border-style:dotted}.mo-card--border-none{border-color:transparent}.mo-card__header,.mo-card__body,.mo-card__footer,.mo-card__selected-mark{position:relative;z-index:1}.mo-card__selected-mark{position:absolute;top:8px;right:8px;display:flex;width:16px;height:16px;align-items:center;justify-content:center;color:#f6c544;font-size:12px;line-height:1;pointer-events:none}.mo-card__header{padding:18px 18px 0}.mo-card__body{padding:18px}.mo-card__footer{padding:0 18px 18px}.mo-form{color:var(--mo-text-primary)}.mo-form-item{display:flex;margin-bottom:24px}.mo-form--label-top .mo-form-item{display:block}.mo-form-item__label{display:inline-flex;align-items:center;min-height:24px;width:var(--mo-form-label-width, auto);padding-right:12px;color:var(--mo-text-primary);font-size:14px;line-height:1.5;white-space:nowrap}.mo-form--label-left .mo-form-item__label{justify-content:flex-start;text-align:left}.mo-form--label-right .mo-form-item__label{justify-content:flex-end;text-align:right}.mo-form--label-top .mo-form-item__label{justify-content:flex-start;width:auto;margin-bottom:5px;padding-right:0}.mo-form-item__asterisk{margin:0 4px 0 0;color:var(--mo-error);font-weight:700}.mo-form-item__suffix{margin-left:2px}.mo-form-item__content{position:relative;min-width:0;flex:1}.mo-form-item__help{margin-top:8px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-form-item__error{position:absolute;top:calc(100% + 2px);left:0;z-index:2;margin-top:0;color:var(--mo-error);font-size:12px;line-height:1.5;pointer-events:none}.mo-form-item.is-error :where(input,textarea,select){border-color:var(--mo-error)}.mo-input{position:relative;width:100%;color:var(--mo-text-primary)}.mo-input__inner{width:100%;border:1px solid var(--mo-border-active);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);font:inherit;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__tag-wrapper{display:flex;width:100%;min-height:46px;align-items:center;gap:8px;padding:5px;border:1px solid var(--mo-border-active);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-input__inner::placeholder,.mo-input__tag-input::placeholder{color:var(--mo-text-tertiary)}.mo-input__inner:hover,.mo-input__tag-wrapper:hover{border-color:var(--mo-primary)}.mo-input__inner:focus{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input__tag-wrapper:focus-within{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-input:not(.is-textarea) .mo-input__inner{height:46px;padding:0 42px 0 16px}.mo-input--small:not(.is-textarea) .mo-input__inner{height:36px;padding:0 36px 0 12px;font-size:13px}.mo-input--large:not(.is-textarea) .mo-input__inner{height:56px;padding:0 46px 0 18px;font-size:16px}.mo-input--small .mo-input__tag-wrapper{min-height:36px;gap:6px;padding:5px;font-size:13px}.mo-input--large .mo-input__tag-wrapper{min-height:56px;gap:10px;padding:7px 16px;font-size:16px}.mo-input.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 28px + 34px);padding:14px 16px 30px;line-height:1.6}.mo-input--small.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 22px + 28px);padding:10px 12px 26px;font-size:13px}.mo-input--large.is-textarea .mo-input__inner{min-height:calc(var(--mo-input-rows, 3) * 32px + 42px);padding:18px 18px 34px;font-size:16px}.mo-input__count{position:absolute;right:14px;bottom:8px;color:var(--mo-text-secondary);font-size:12px;line-height:1;pointer-events:none}.mo-input__tag{display:inline-flex;max-width:180px;height:30px;align-items:center;gap:8px;padding:0 10px;border:1px solid color-mix(in srgb,var(--mo-primary) 34%,var(--mo-border));border-radius:6px;background:color-mix(in srgb,var(--mo-primary) 14%,var(--mo-panel-bg));color:var(--mo-primary);flex:0 0 auto;font-size:14px;line-height:1}.mo-input--small .mo-input__tag{height:28px;padding:0 9px;font-size:13px}.mo-input--large .mo-input__tag{height:34px;padding:0 12px;font-size:15px}.mo-input__tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-input__tag-close{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:currentcolor;cursor:pointer;flex:0 0 auto;font:inherit;line-height:1;opacity:.76}.mo-input__tag-close:hover{opacity:1}.mo-input__tag-input{min-width:120px;height:30px;border:0;outline:none;background:transparent;color:var(--mo-text-primary);font:inherit;flex:1 1 140px}.mo-input__clear{position:absolute;top:50%;right:12px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-tertiary);cursor:pointer;transform:translateY(-50%)}.mo-input__clear:hover{color:var(--mo-primary)}.mo-input.is-disabled .mo-input__inner,.mo-input.is-disabled .mo-input__tag-wrapper{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--mo-row-gutter-half, 0px) * -1);margin-left:calc(var(--mo-row-gutter-half, 0px) * -1)}.mo-row.is-nowrap{flex-wrap:nowrap}.mo-row--justify-start{justify-content:flex-start}.mo-row--justify-center{justify-content:center}.mo-row--justify-end{justify-content:flex-end}.mo-row--justify-space-between{justify-content:space-between}.mo-row--justify-space-around{justify-content:space-around}.mo-row--justify-space-evenly{justify-content:space-evenly}.mo-row--align-top{align-items:flex-start}.mo-row--align-middle{align-items:center}.mo-row--align-bottom{align-items:flex-end}.mo-row--align-stretch{align-items:stretch}.mo-col{display:block;max-width:calc(var(--mo-col-span, 24) / 24 * 100%);min-height:1px;padding-right:var(--mo-row-gutter-half, 0px);padding-left:var(--mo-row-gutter-half, 0px);flex:0 0 calc(var(--mo-col-span, 24) / 24 * 100%)}.mo-menu{position:relative;display:inline-block}.mo-menu__trigger{height:36px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-menu__items{position:absolute;z-index:30;width:var(--mo-menu-width);padding:4px;border:1px solid rgba(104,84,220,.22);border-radius:12px;outline:none;background:var(--mo-panel-bg);box-shadow:0 18px 42px #1f243624}.mo-theme--dark .mo-menu__items{box-shadow:0 18px 42px #00000057}.mo-menu--bottom-start .mo-menu__items{top:calc(100% + 8px);left:0}.mo-menu--bottom-end .mo-menu__items{top:calc(100% + 8px);right:0}.mo-menu--top-start .mo-menu__items{bottom:calc(100% + 8px);left:0}.mo-menu--top-end .mo-menu__items{right:0;bottom:calc(100% + 8px)}.mo-menu__item{display:flex;width:100%;align-items:flex-start;gap:14px;padding:10px 8px;border:0;border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:background-color var(--mo-transition),opacity var(--mo-transition)}.mo-menu__item.is-active{background:color-mix(in srgb,var(--mo-primary) 10%,transparent)}.mo-menu__item.is-disabled{cursor:not-allowed;opacity:.48}.mo-menu__icon{display:inline-flex;width:18px;height:22px;align-items:center;justify-content:center;color:var(--mo-primary);flex:0 0 auto}.mo-menu__icon svg{width:18px;height:18px}.mo-menu__icon-dot{width:10px;height:10px;border:2px solid currentcolor;border-radius:50%}.mo-menu__text{display:grid;min-width:0;gap:4px}.mo-menu__label{color:var(--mo-text-primary);font-size:16px;font-weight:700;line-height:1.25}.mo-menu__description{color:var(--mo-text-secondary);font-size:13px;line-height:1.35}.mo-select{position:relative;width:100%;color:var(--mo-text-primary)}.mo-select__button{display:flex;width:100%;height:46px;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 18px;border:1px solid var(--mo-border-active);border-radius:8px;outline:none;background:var(--mo-field-bg);color:var(--mo-text-primary);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--mo-transition),box-shadow var(--mo-transition)}.mo-select__button:hover{border-color:var(--mo-primary)}.mo-select__button:focus-visible,.mo-select__button[data-headlessui-state~=open]{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 18%,transparent)}.mo-select--small .mo-select__button{height:36px;padding:0 12px 0 14px;font-size:13px}.mo-select--large .mo-select__button{height:56px;padding:0 16px 0 22px;font-size:16px}.mo-select__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mo-select.is-placeholder .mo-select__label{color:var(--mo-text-tertiary)}.mo-select__arrow{width:8px;height:8px;border-right:2px solid currentcolor;border-bottom:2px solid currentcolor;color:var(--mo-text-primary);flex:0 0 auto;transform:rotate(45deg) translateY(-2px);transition:transform var(--mo-transition)}.mo-select__button[data-headlessui-state~=open] .mo-select__arrow{transform:rotate(225deg) translateY(-2px)}.mo-select__options{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:100%;max-height:240px;margin:0;padding:6px;border:1px solid var(--mo-border);border-radius:8px;outline:none;background:var(--mo-panel-bg);box-shadow:0 14px 34px #1f243624;list-style:none;overflow:auto}.mo-theme--dark .mo-select__options{box-shadow:0 16px 36px #00000057}.mo-select__option{display:flex;min-height:34px;align-items:center;gap:10px;padding:0 12px;border-radius:6px;color:var(--mo-text-primary);cursor:pointer;font-size:14px}.mo-select__option.is-active{background:var(--mo-panel-bg-secondary);color:var(--mo-text-primary)}.mo-select__option.is-selected{color:var(--mo-text-primary);font-weight:500}.mo-select__check{position:relative;width:18px;height:18px;flex:0 0 auto;opacity:0}.mo-select__option.is-selected .mo-select__check{opacity:1}.mo-select__check:after{position:absolute;top:2px;left:6px;width:6px;height:11px;border-right:2px solid var(--mo-primary);border-bottom:2px solid var(--mo-primary);content:"";transform:rotate(45deg)}.mo-select__option.is-disabled{cursor:not-allowed;opacity:.48}.mo-select.is-disabled .mo-select__button{cursor:not-allowed;background:var(--mo-disabled-bg);color:var(--mo-disabled-text)}.mo-tabs{width:100%;color:var(--mo-text-primary)}.mo-tabs__list{position:relative;display:flex;width:100%;min-height:46px;padding:4px;border:1px solid var(--mo-border);border-radius:8px;background:var(--mo-field-bg)}.mo-tabs--small .mo-tabs__list{min-height:38px;padding:3px}.mo-tabs--large .mo-tabs__list{min-height:58px;padding:5px;border-radius:10px}.mo-tabs__indicator{position:absolute;top:4px;bottom:4px;left:4px;z-index:0;width:calc((100% - 8px) / var(--mo-tabs-count));border-radius:6px;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transform:translate(calc(var(--mo-tabs-active-index) * 100%));transition:transform .22s ease,width .22s ease}.mo-tabs--small .mo-tabs__indicator{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--mo-tabs-count))}.mo-tabs--large .mo-tabs__indicator{top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / var(--mo-tabs-count));border-radius:8px}.mo-tabs__tab{position:relative;z-index:1;display:inline-flex;min-width:0;align-items:center;justify-content:center;padding:0 18px;border:0;background:transparent;color:var(--mo-text-secondary);cursor:pointer;flex:1 1 0;font:inherit;font-size:14px;line-height:1;outline:none;transition:color var(--mo-transition),opacity var(--mo-transition)}.mo-tabs__tab.is-active{color:#fff;font-weight:700}.mo-tabs__tab:not(.is-active):hover{color:var(--mo-text-primary)}.mo-tabs__tab.is-disabled{cursor:not-allowed;opacity:.48}.mo-tabs--small .mo-tabs__tab{padding:0 14px;font-size:13px}.mo-tabs--large .mo-tabs__tab{padding:0 24px;font-size:16px}.mo-tabs__panels{margin-top:12px}.mo-tabs__panel{outline:none}.mo-upload{width:100%;color:var(--mo-text-primary)}.mo-upload__dropzone{display:grid;min-height:190px;place-items:center;padding:26px;border:1px dashed var(--mo-border-active);border-radius:12px;outline:none;background:var(--mo-field-bg);cursor:pointer;text-align:center;transition:border-color var(--mo-transition),box-shadow var(--mo-transition),background-color var(--mo-transition)}.mo-upload__dropzone:hover,.mo-upload__dropzone:focus-visible,.mo-upload.is-dragging .mo-upload__dropzone{border-color:var(--mo-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-primary) 16%,transparent)}.mo-upload__input{display:none}.mo-upload__icon{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff;font-size:22px;font-weight:700}.mo-upload__title{margin-top:14px;color:var(--mo-text-primary);font-size:16px;font-weight:700}.mo-upload__action{margin-top:6px;color:var(--mo-primary);font-size:14px}.mo-upload__hint{margin-top:10px;color:var(--mo-text-secondary);font-size:13px;line-height:1.5}.mo-upload__dropzone.has-custom-dropzone>.mo-upload__icon,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__title,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__action,.mo-upload__dropzone.has-custom-dropzone>.mo-upload__hint{display:none}.mo-upload__list{display:grid;gap:12px;margin-top:14px}.mo-upload__file{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid var(--mo-border);border-radius:10px;background:var(--mo-panel-bg)}.mo-upload__preview{width:64px;height:64px;overflow:hidden;border-radius:8px;background:var(--mo-panel-bg-secondary);color:var(--mo-text-secondary)}.mo-upload__preview.is-crop{width:var(--mo-upload-crop-size);height:var(--mo-upload-crop-size)}.mo-upload__preview.is-rect{width:var(--mo-upload-crop-preview-width);height:var(--mo-upload-crop-preview-height)}.mo-upload__preview.is-circle{border-radius:50%}.mo-upload__preview img,.mo-upload__preview video{display:block;width:100%;height:100%;object-fit:cover}.mo-upload__file-icon{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:12px;font-weight:700}.mo-upload__meta{min-width:0}.mo-upload__name{overflow:hidden;color:var(--mo-text-primary);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.mo-upload__size,.mo-upload__status{margin-top:4px;color:var(--mo-text-secondary);font-size:12px}.mo-upload__progress{position:relative;height:6px;margin-top:8px;overflow:hidden;border-radius:999px;background:var(--mo-panel-bg-secondary)}.mo-upload__progress-bar{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));transition:width .18s ease}.mo-upload__status{display:flex;align-items:center;gap:10px}.mo-upload__status button,.mo-upload__remove{border:0;background:transparent;color:var(--mo-primary);cursor:pointer;font:inherit}.mo-upload__remove{width:28px;height:28px;border-radius:50%;color:var(--mo-text-tertiary);font-size:20px;line-height:1}.mo-upload__remove:hover{background:color-mix(in srgb,var(--mo-error) 12%,transparent);color:var(--mo-error)}.mo-upload-cropper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#00000094}.mo-upload-cropper__panel{width:min(420px,100%);padding:18px;border:1px solid var(--mo-border);border-radius:12px;background:var(--mo-panel-bg);color:var(--mo-text-primary);box-shadow:0 24px 64px #00000057}.mo-upload-cropper__header,.mo-upload-cropper__actions,.mo-upload-cropper__slider{display:flex;align-items:center;justify-content:space-between;gap:12px}.mo-upload-cropper__header{margin-bottom:14px}.mo-upload-cropper__header button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--mo-text-secondary);cursor:pointer;font-size:20px}.mo-upload-cropper__stage{position:relative;width:320px;height:240px;margin:0 auto;overflow:hidden;border-radius:10px;background:var(--mo-field-bg);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.mo-upload-cropper__stage:active{cursor:grabbing}.mo-upload-cropper__image{position:absolute;top:50%;left:50%;max-width:none;transform-origin:center;-webkit-user-select:none;user-select:none}.mo-upload-cropper__frame{position:absolute;top:50%;left:50%;width:var(--mo-upload-crop-width);height:var(--mo-upload-crop-height);border:2px solid var(--mo-primary);box-shadow:0 0 0 999px #00000052;pointer-events:none;transform:translate(-50%,-50%)}.mo-upload-cropper__frame.is-circle{border-radius:50%}.mo-upload-cropper__slider{margin-top:16px;color:var(--mo-text-secondary);font-size:14px;display:none}.mo-upload-cropper__slider input{flex:1}.mo-upload-cropper__actions{justify-content:flex-end;margin-top:16px}.mo-upload-cropper__actions button{height:34px;padding:0 14px;border:1px solid var(--mo-border);border-radius:8px;background:transparent;color:var(--mo-text-primary);cursor:pointer;font:inherit}.mo-upload-cropper__actions button:last-child{border-color:transparent;background:linear-gradient(90deg,var(--mo-gradient-start),var(--mo-gradient-end));color:#fff}