+
+
+
+
diff --git a/src/components/map/BoxIntensity.vue b/src/components/map/BoxIntensity.vue
new file mode 100644
index 0000000..3d443b2
--- /dev/null
+++ b/src/components/map/BoxIntensity.vue
@@ -0,0 +1,46 @@
+
+
+
diff --git a/src/components/map/CircleMarker.vue b/src/components/map/CircleMarker.vue
new file mode 100644
index 0000000..de6a90a
--- /dev/null
+++ b/src/components/map/CircleMarker.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/map/CountyIntensity.vue b/src/components/map/CountyIntensity.vue
new file mode 100644
index 0000000..64cbe4f
--- /dev/null
+++ b/src/components/map/CountyIntensity.vue
@@ -0,0 +1,51 @@
+
+
+
diff --git a/src/components/map/CrossMarker.vue b/src/components/map/CrossMarker.vue
new file mode 100644
index 0000000..b380e7c
--- /dev/null
+++ b/src/components/map/CrossMarker.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/map/DotMarker.vue b/src/components/map/DotMarker.vue
new file mode 100644
index 0000000..b985b76
--- /dev/null
+++ b/src/components/map/DotMarker.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/map/EewMarker.vue b/src/components/map/EewMarker.vue
new file mode 100644
index 0000000..52b0df9
--- /dev/null
+++ b/src/components/map/EewMarker.vue
@@ -0,0 +1,111 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/map/RtsMarker.vue b/src/components/map/RtsMarker.vue
new file mode 100644
index 0000000..c5f9703
--- /dev/null
+++ b/src/components/map/RtsMarker.vue
@@ -0,0 +1,264 @@
+
+
+
+
+
+ {{ titles[configStore.earthquake.display] }}
+
+
+ {{ units[configStore.earthquake.display] }}
+
+
+
+
+
+
+
+
+
+ {{ configStore.earthquake.display == 0 ? v : v.toFixed(1) }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/map/TownIntensity.vue b/src/components/map/TownIntensity.vue
new file mode 100644
index 0000000..2104ff0
--- /dev/null
+++ b/src/components/map/TownIntensity.vue
@@ -0,0 +1,49 @@
+
diff --git a/src/components/map/WaveMarker.vue b/src/components/map/WaveMarker.vue
new file mode 100644
index 0000000..52dffcc
--- /dev/null
+++ b/src/components/map/WaveMarker.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ id }}
+
+
+ {{ station.info[0].code }} {{ info.city }} {{ info.town }}
+
+
+
+
+
+ 計測震度
+ {{ rts?.i ?? "-" }}
+
+
+ 衰減震度
+ {{ rts?.I ?? "-" }}
+
+
+ PGA gal
+ {{ rts?.pga ?? "-" }}
+
+
+ PGV cm/s
+ {{ rts?.pgv ?? "-" }}
+
+
+ {{
+ intensity != null
+ ? ["0", "1", "2", "3", "4", "5⁻", "5⁺", "6⁻", "6⁺", "7"][intensity]
+ : "不明"
+ }}
+
+
diff --git a/src/components/misc/IntensityBall.vue b/src/components/misc/IntensityBall.vue
new file mode 100644
index 0000000..2f4631f
--- /dev/null
+++ b/src/components/misc/IntensityBall.vue
@@ -0,0 +1,31 @@
+
+
+
+ {{ ["0", "1", "2", "3", "4", "5⁻", "5⁺", "6⁻", "6⁺", "7"][intensity] }}
+
+
diff --git a/src/components/misc/IntensityBlock.vue b/src/components/misc/IntensityBlock.vue
new file mode 100644
index 0000000..fc4454b
--- /dev/null
+++ b/src/components/misc/IntensityBlock.vue
@@ -0,0 +1,30 @@
+
+
+
+ {{ ["0", "1", "2", "3", "4", "5⁻", "5⁺", "6⁻", "6⁺", "7"][intensity] }}
+
+
diff --git a/src/components/misc/MaterialSymbols.vue b/src/components/misc/MaterialSymbols.vue
new file mode 100644
index 0000000..d89c438
--- /dev/null
+++ b/src/components/misc/MaterialSymbols.vue
@@ -0,0 +1,30 @@
+
+
+
+ {{ icon }}
+
diff --git a/src/components/misc/Panel.vue b/src/components/misc/Panel.vue
new file mode 100644
index 0000000..51120a2
--- /dev/null
+++ b/src/components/misc/Panel.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+ {{ toFormattedTimeString(time) }}
+
+
+
+
diff --git a/src/components/misc/ViewPanel.vue b/src/components/misc/ViewPanel.vue
new file mode 100644
index 0000000..8c4d74d
--- /dev/null
+++ b/src/components/misc/ViewPanel.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/src/components/navigation/NavigationEntry.vue b/src/components/navigation/NavigationEntry.vue
new file mode 100644
index 0000000..9a74f85
--- /dev/null
+++ b/src/components/navigation/NavigationEntry.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+ {{ title }}
+ {{ subtitle }}
+ {{ label }}
+
+
+
+
+
diff --git a/src/components/report/AreaIntensityItem.vue b/src/components/report/AreaIntensityItem.vue
new file mode 100644
index 0000000..9342141
--- /dev/null
+++ b/src/components/report/AreaIntensityItem.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+ {{ frame }}
+
+
+ {{ frames }}
+
+
+
+
+
+
+
+
+ {{ area.area }}
+
+
+
+
+
diff --git a/src/components/report/AreaIntensityPanel.vue b/src/components/report/AreaIntensityPanel.vue
new file mode 100644
index 0000000..4bd665c
--- /dev/null
+++ b/src/components/report/AreaIntensityPanel.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/report/ReportItem.vue b/src/components/report/ReportItem.vue
new file mode 100644
index 0000000..2f5b4b7
--- /dev/null
+++ b/src/components/report/ReportItem.vue
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/report/StationIntensityItem.vue b/src/components/report/StationIntensityItem.vue
new file mode 100644
index 0000000..de73606
--- /dev/null
+++ b/src/components/report/StationIntensityItem.vue
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+ {{
+ report.no % 1000
+ ? `第 ${report.no % 1000} 號有感地震`
+ : extractLocationFromString(report.loc)
+ }}
+
+
+ {{ toFormattedTimeString(report.time) }}
+
+ 規模 M {{ report.mag.toFixed(1) }} 深度 {{ report.depth }} km
+
+
+
+
+
+
+
diff --git a/src/components/view/HomeView.vue b/src/components/view/HomeView.vue
deleted file mode 100644
index 28a8940..0000000
--- a/src/components/view/HomeView.vue
+++ /dev/null
@@ -1,558 +0,0 @@
-
-
-
-.home-view(:class="{eew: currentEewIndex != undefined}")
- .home-info-box-wrapper
- .home-info-box-container
- .home-info-box(:class="{[currentEewIndex && eew[currentEewIndex] ? InfoBoxStatusClass[eew[currentEewIndex].status] : '']: true, show: currentView == 'home'}")
- .header(v-if="Object.keys(eew).length && currentEewIndex && eew[currentEewIndex]")
- .title-container
- .header-title
- | 地震速報
- | #[span.current-eew-index(v-if="Object.keys(eew).length > 1") {{ Object.keys(eew).indexOf(currentEewIndex) + 1 }}]
- | #[span.total-eew-count(v-if="Object.keys(eew).length > 1") {{ Object.keys(eew).length }}]
- |｜
- |{{ eew[currentEewIndex].source.toUpperCase() }} {{ InfoBoxStatusText[eew[currentEewIndex].status] }}
- .header-subtitle(v-if="!eew[currentEewIndex].final") 第{{ `${eew[currentEewIndex].serial}` }}報
- .header-subtitle(v-else) \#{{ `${eew[currentEewIndex].serial}` }} (最終)
- .header-body(v-if="currentEewIndex")
- .detail-container
- IntensityBox(:int="eew[currentEewIndex].max == 0 ? -1 : eew[currentEewIndex].max")
- .detail
- .location {{ eew[currentEewIndex].location || "未知區域" }}
- .parameter-container(v-if="eew[currentEewIndex].detail")
- .magnitude.magnitude-6(data-background-text="規模")
- .magnitude-value {{ eew[currentEewIndex].magnitude.toFixed(1) }}
- .depth.depth-deep(data-background-text="深度")
- .depth-value {{ eew[currentEewIndex].depth }}
- .parameter-container(v-else)
- .nsspe NSSPE 假設震源參數
- .footer
- .footer-title 預估最大震度
- .time-container
- span.time {{ toFormattedTimeString(eew[currentEewIndex].time) }}
- span.time-name 發震
- .cancel-box(v-if="eew[currentEewIndex].cancel")
- .cancel-title #[span 取]#[span 消]
- .cancel-body 此地震速報已取消
-
- .header(v-else)
- .title-container
- .header-title() 目前無發布地震預警
-
- .intensity(v-if="rts.int.length")
- .intensity-title 最大觀測震度
- .intensity-list-wrapper
- .intensity-list-scroller
- .intensity-list
- template(v-for="r in rts.int", :key="`${r.area ?? ''}${r.station ?? ''}`")
- ReportIntensityItem(:area="r?.area", :station="r.station", :int="r.i")
- template(v-for="(e, id) in eew", :key="id")
- WaveTimer.wave-timer-box(v-if="e.t" , :class="{ show: currentView == 'home' }", :eew="e", :index="Object.keys(eew).indexOf(id) + 1")
- .home-report-box-wrapper(v-if="!currentEewIndex && reports.length")
- .home-report-box(:class="{ show: !currentEewIndex && currentView == 'home' }")
- .title-container
- span.title-icon.material-symbols-rounded earthquake
- span.title 近期地震報告
- FilledButton(label="顯示更多", trailing-icon="arrow_forward" ,@click="changeView('report-list')")
- .report-container
- DetailedReportItem(v-if="reports[0]", :report="reports[0]", :change-report="changeReport")
- ReportItem(v-if="reports[1]", :report="reports[1]", :change-report="changeReport")
- ReportItem(v-if="reports[2]", :report="reports[2]", :change-report="changeReport")
- ReportItem(v-if="reports[3]", :report="reports[3]", :change-report="changeReport")
- ReportItem(v-if="reports[4]", :report="reports[4]", :change-report="changeReport")
- .home-local-rts-box-wrapper(v-if="config.location.station")
- LocalRtsBox.home-local-rts-box(:class="{ show: currentView == 'home' }", :station="config.location.station", :stations="stations", :rts="rts")
-
-
-
-
-
-
-
diff --git a/src/components/view/MapView.vue b/src/components/view/MapView.vue
deleted file mode 100644
index 77ecfd3..0000000
--- a/src/components/view/MapView.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-
-
-
-#map.map-container.maplibregl-map(ref="mapTemplate")
-.map-layers(v-if="map")
- .home(v-if="!Object.keys(eew).length && currentView == 'home'")
- MapHomeViewControl(:map="map")
- .report-list(v-if="currentView == 'report-list'")
- MapReportListMarker(:map="map", :reports="reports", :change-report="changeReport")
- .active-report(v-if="activeReport && currentView == 'report'")
- MapReportMarker(:map="map", :report="activeReport")
- .rts(v-if="stations && currentView == 'home' && !currentView.startsWith('report')")
- MapRtsMarker(:map="map", :stations="stations", :rts="rts", :hide-non-alert="!!Object.keys(eew).length")
- .rts-box(v-if="Object.keys(rts.box).length && currentView == 'home'")
- MapRtsBox(:map="map", :box="rts.box")
- .eew(v-if="Object.keys(eew).length && currentView == 'home'")
- MapEew(:map="map", :eew="eew")
- .eew-town-intensity(v-if="currentEewIndex && eew[currentEewIndex] && currentView == 'home'")
- MapEewIntensity(:map="map", :int="eew[currentEewIndex].int", :area="eew[currentEewIndex].raw.eq?.area")
- .location(v-if="config.location.area && code[config.location.area]")
- MapLocalMarker(:map="map", :lat="code[config.location.area].lat", :lng="code[config.location.area].lng")
-
-
-
diff --git a/src/components/view/ReportBox.vue b/src/components/view/ReportBox.vue
deleted file mode 100644
index 71fefd7..0000000
--- a/src/components/view/ReportBox.vue
+++ /dev/null
@@ -1,545 +0,0 @@
-
-
-
-.report-box-wrapper
- #report-box.report-box.panel(:class="{ show: currentView == 'report' }")
- .report-box-header
- .report-box-header
- FilledButton(leading-icon="arrow_back", label="返回列表", @click="handleHideReportBox")
- #report-source.report-source 交通部中央氣象署
-
- // 報告標題
-
- .report-title
- .report-title-container
- .report-subtitle.skeleton(:style="report?.no ? '' : 'max-width: 40%'") {{ report?.no ? report.no % 1000 ? `編號 ${report.no}` : "小區域有感地震" : ""}}
- .report-title.skeleton(:style="report?.no ? '' : 'max-width: 80%'") {{ extractLocationFromString(report?.loc ?? "") }}
- #report-max-intensity.report-max-intensity(:class="`intensity-${report?.int ?? 'unknow'}`")
-
- .report-action-container
- ChipButton.report-action-chip
- template(#icon) replay
- template(#label) 重播
- ChipButton.report-action-chip(:disabled="!report?.id", @click="openUrl(report?.id)")
- template(#icon) captive_portal
- template(#label) 報告頁面
- ChipButton.report-action-copy.report-action-chip(:disabled="!report", @click="copyReport($event, report)")
- template(#icon) content_copy
- template(#label) 複製
-
- .report-box-body
- // 報告資訊
- .report-detail
- ReportDetailField(:style="report?.time ? '' : 'max-width: 70%'")
- template(#icon) schedule
- template(#name) 發震時間
- template(v-if="report?.time", #value) {{ toFormattedTimeString(report.time) }}
- ReportDetailField(:style="report?.loc ? '' : 'max-width: 85%'")
- template(#icon) pin_drop
- template(#name) 震央位置
- template(v-if="report?.loc", #value) {{ report.loc.substring(0, report.loc.indexOf("(")).trim() }}
- ReportDetailField(:style="report?.lon != undefined ? '' : 'max-width: 55%'")
- template(#icon) point_scan
- template(#name) 震央座標
- template(v-if="report?.lat != undefined && report?.lon != undefined", #value)
- FieldValueUnitPair
- template(#value) {{ report.lon }}
- template(#trailing-unit) {{ report.lon ? report.lon > 0 ? "°E" : "°W" : "°" }}
- FieldValueUnitPair
- template(#value) {{ report.lat }}
- template(#trailing-unit) {{ report.lat ? report.lat > 0 ? "°N" : "°S" : "°" }}
- .report-detail-field-row
- ReportDetailField(:style="report?.lon != undefined ? '' : 'max-width: 60%'", :divider-color="magnitude(report?.mag).hex()")
- template(#icon) speed
- template(#name) 規模
- template(v-if="report?.mag != undefined", #value)
- FieldValueUnitPair
- template(#leading-unit) M#[sub L]
- template(#value) {{ report.mag }}
- ReportDetailField(:style="report?.lon != undefined ? '' : 'max-width: 40%'", :divider-color="depth(report?.depth).hex()")
- template(#icon) keyboard_double_arrow_down
- template(#name) 深度
- template(v-if="report?.depth != undefined", #value)
- FieldValueUnitPair
- template(#value) {{ report.depth }}
- template(#trailing-unit) ㎞
-
-
- // 各地最大震度
-
- .report-intensity-list
- .report-intensity-list-header
- .report-intensity-list-title 各地最大震度
- .report-intensity-sort-btn-container
- label.report-intensity-sort-btn(for="report-intensity-sort-group")
- input#report-intensity-sort-group(type="radio", name="report-intensity-sort", title="依縣市分組", checked)
- span.report-intensity-sort-btn-icon.material-symbols-rounded category
- label.report-intensity-sort-btn(for="report-intensity-sort-intensity")
- input#report-intensity-sort-intensity(type="radio", name="report-intensity-sort", title="依震度排序")
- span.report-intensity-sort-btn-icon.material-symbols-rounded swap_vert
-
- .report-intensity-list-scrollview
- .report-intensity-list-scroller
- #report-intensity-grouped.report-intensity-container
- ReportIntensityGroup(v-for="area in report?.list" :key="area.area" :area="area")
- #report-intensity-all.report-intensity-container
- template(v-if="report?.list")
- ReportIntensityItem(v-for="s in report.list.flatMap(v=>v.stations.map(s=>({...s,area: v.area }))).sort((a, b) => b.int - a.int)", :key="s.station", :area="s.area", :station="s.station", :int="s.int")
-
-
-
diff --git a/src/components/view/ReportListBox.vue b/src/components/view/ReportListBox.vue
deleted file mode 100644
index 40b1926..0000000
--- a/src/components/view/ReportListBox.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-
-
-
-.report-list-wrapper
- #report-panel.report-list-scrollview.panel(:class="{ show: currentView.startsWith('report') }")
- .report-list-scroller
- .report-list
- ReportItem(v-for="report in reports", :key="report.id" :report='report', :change-report="changeReport")
-
-
-
diff --git a/src/components/window/Titlebar.vue b/src/components/window/Titlebar.vue
new file mode 100644
index 0000000..cc02301
--- /dev/null
+++ b/src/components/window/Titlebar.vue
@@ -0,0 +1,76 @@
+
+
+
+ {{ station.station }}
+
+
+
+
+
diff --git a/src/components/window/WindowControlButton.vue b/src/components/window/WindowControlButton.vue
new file mode 100644
index 0000000..05731de
--- /dev/null
+++ b/src/components/window/WindowControlButton.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/src/config.json b/src/config.json
new file mode 100644
index 0000000..e34a6de
--- /dev/null
+++ b/src/config.json
@@ -0,0 +1,3 @@
+{
+ "$version": 1
+}
diff --git a/src/global.ts b/src/global.ts
new file mode 100644
index 0000000..ff17700
--- /dev/null
+++ b/src/global.ts
@@ -0,0 +1,50 @@
+import type { EewType } from "@exptechtw/api-wrapper";
+import { useEewStore } from "./stores/eew_store";
+import { useRtsStore } from "./stores/rts_store";
+import { appDataDir } from "@tauri-apps/api/path";
+import { Stronghold, type Client } from "@tauri-apps/plugin-stronghold";
+import { ExpTechApi } from "./class/api";
+
+const api = new ExpTechApi();
+
+const vaultPassword = import.meta.env.VITE_STRONGHOLD_PASS;
+
+const stronghold = await Stronghold.load(
+ `${await appDataDir()}/vault.hold`,
+ vaultPassword
+);
+
+let client: Client;
+
+try {
+ client = await stronghold.loadClient("account");
+} catch {
+ client = await stronghold.createClient("account");
+}
+
+export default {
+ api,
+ client,
+ stronghold,
+ init() {
+ const eewStore = useEewStore();
+ const rtsStore = useRtsStore();
+
+ window.setInterval(() => {
+ api.getRts().then((v) => {
+ if (v.time < rtsStore.time) {
+ return;
+ }
+ rtsStore.$patch(v);
+ });
+ api.getEew().then((v) => {
+ eewStore.$patch({
+ eew: v.reduce(
+ (acc, e) => ((acc[e.id] = e), acc),
+ {} as Record
+
+
+
+ 
+
+
+ TREM Tauri
+ v{{ version }}
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
deleted file mode 100644
index f39a140..0000000
--- a/src/main.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import App from "./App.vue";
-
-import {
- enable as enableAutoStart,
- disable as disableAutoStart,
- isEnabled as isAutoStartEnabled,
-} from "@tauri-apps/plugin-autostart";
-import { createApp } from "vue";
-import { getCurrent } from "@tauri-apps/api/window";
-import { getMatches } from "@tauri-apps/plugin-cli";
-
-import { Config } from "./scripts/class/config";
-import { version } from "../package.json";
-
-import "maplibre-gl/dist/maplibre-gl.css";
-import "./styles.css";
-
-const webviewWindow = getCurrent();
-
-const args = await getMatches();
-
-if (!args.args["quiet"].value) {
- webviewWindow.show();
- webviewWindow.setTitle(`TREM Tauri | 臺灣即時地震監測 v${version}`);
-}
-
-const config = new Config();
-
-const app = createApp(App);
-app.provide("config", config);
-app.mount("#app");
-
-window.onbeforeunload = () => app.unmount();
-
-await webviewWindow.setAlwaysOnTop(config.cache.behavior.alwaysOnTop);
-
-if (config.cache.system.startWithSystem) {
- await enableAutoStart();
-} else if (await isAutoStartEnabled()) {
- await disableAutoStart();
-}
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..d8cc137
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+
+
+ 登入
+
+
+
diff --git a/src/pages/reports/[id].vue b/src/pages/reports/[id].vue
new file mode 100644
index 0000000..e519b41
--- /dev/null
+++ b/src/pages/reports/[id].vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/pages/reports/index.vue b/src/pages/reports/index.vue
new file mode 100644
index 0000000..b0d8e7c
--- /dev/null
+++ b/src/pages/reports/index.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/src/presets/aura/accordion/index.js b/src/presets/aura/accordion/index.js
new file mode 100644
index 0000000..53e1d7c
--- /dev/null
+++ b/src/presets/aura/accordion/index.js
@@ -0,0 +1,74 @@
+export default {
+ // For PrimeVue version 3
+ accordiontab: {
+ root: {
+ class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700']
+ },
+ header: ({ props }) => ({
+ class: [
+ // State
+ { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+ ]
+ }),
+ headerAction: {
+ class: [
+ //Font
+ 'font-semibold',
+ 'leading-none',
+
+ // Alignments
+ 'flex justify-between items-center',
+ 'flex-row-reverse',
+ 'relative',
+
+ // Sizing
+ 'p-[1.125rem]',
+
+ // Shape
+ 'rounded-md',
+ 'border-0',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-600 dark:text-surface-0/80',
+
+ // Transition
+ 'transition duration-200 ease-in-out',
+ 'transition-shadow duration-200',
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
+
+ // Misc
+ 'cursor-pointer no-underline select-none'
+ ]
+ },
+ headerIcon: ({ context }) => ({
+ class: ['inline-block ml-2', { 'text-surface-900 dark:text-surface-0': context.active }]
+ }),
+ headerTitle: {
+ class: 'leading-none'
+ },
+ content: {
+ class: [
+ // Spacing
+ 'p-[1.125rem] pt-0',
+
+ //Shape
+ 'border-0 rounded-none',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-600 dark:text-surface-0/70'
+ ]
+ },
+ transition: {
+ enterFromClass: 'max-h-0',
+ enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+ enterToClass: 'max-h-[1000px]',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+ leaveToClass: 'max-h-0'
+ }
+ }
+};
diff --git a/src/presets/aura/accordioncontent/index.js b/src/presets/aura/accordioncontent/index.js
new file mode 100644
index 0000000..e4f0637
--- /dev/null
+++ b/src/presets/aura/accordioncontent/index.js
@@ -0,0 +1,3 @@
+export default {
+ content: 'p-5 pt-0 bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-surface-0/70'
+};
diff --git a/src/presets/aura/accordionheader/index.js b/src/presets/aura/accordionheader/index.js
new file mode 100644
index 0000000..12c3520
--- /dev/null
+++ b/src/presets/aura/accordionheader/index.js
@@ -0,0 +1,11 @@
+export default {
+ root: ({ context }) => ({
+ class: [
+ 'flex items-center justify-between bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-surface-0/70 p-[1.125rem] font-semibold outline-transparent',
+ {
+ 'focus-visible:outline-offset-2 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
+ }
+ ]
+ }),
+ toggleIcon: 'inline-block text-surface-900 dark:text-surface-0 w-4 h-4'
+};
diff --git a/src/presets/aura/accordionpanel/index.js b/src/presets/aura/accordionpanel/index.js
new file mode 100644
index 0000000..e65f6fc
--- /dev/null
+++ b/src/presets/aura/accordionpanel/index.js
@@ -0,0 +1,18 @@
+export default {
+ root: ({ props, context }) => ({
+ class: [
+ 'flex flex-col border-b border-surface-200 dark:border-surface-700',
+ {
+ '[&>[data-pc-name=accordionheader]]:select-none [&>[data-pc-name=accordionheader]]:pointer-events-none [&>[data-pc-name=accordionheader]]:cursor-default [&>[data-pc-name=accordionheader]]:opacity-60': props?.disabled,
+ '[&>[data-pc-name=accordionheader]]:text-surface-700 dark:[&>[data-pc-name=accordionheader]]:text-surface-100 hover:[&>[data-pc-name=accordionheader]]:text-surface-800 dark:hover:[&>[data-pc-name=accordionheader]]:text-surface-0':
+ !props.disabled && context.active,
+ '[&>[data-pc-section=toggleicon]]:text-surface-700 dark:[&>[data-pc-section=toggleicon]]:text-surface-100 hover:[&>[data-pc-section=toggleicon]]:text-surface-800 dark:hover:[&>[data-pc-section=toggleicon]]:text-surface-0':
+ !props.disabled && context.active,
+ '[&:last-child>[data-pc-name=accordioncontent]>[data-pc-section=content]]:rounded-b-md': !props.disabled && context.active,
+ '[&:last-child>[data-pc-name=accordionheader]]:rounded-b-md': !props.disabled && !context.active
+ },
+ '[&:nth-child(n+2)>[data-pc-name=accordionheader]]:border-t-0',
+ '[&:first-child>[data-pc-name=accordionheader]]:rounded-t-md'
+ ]
+ })
+};
diff --git a/src/presets/aura/autocomplete/index.js b/src/presets/aura/autocomplete/index.js
new file mode 100644
index 0000000..f578207
--- /dev/null
+++ b/src/presets/aura/autocomplete/index.js
@@ -0,0 +1,188 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+
+ // Flex
+ {
+ flex: props.fluid,
+ 'inline-flex': !props.fluid
+ },
+
+ // Size
+ { 'w-full': props.multiple },
+
+ // Color
+ 'text-surface-900 dark:text-surface-0',
+
+ //States
+ {
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+ }
+ ]
+ }),
+ inputMultiple: ({ props, state }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Flex
+ 'flex items-center flex-wrap',
+ 'gap-2',
+
+ // Spacing
+ 'm-0 list-none',
+ 'py-1 px-1',
+
+ // Size
+ 'w-full',
+
+ // Shape
+ 'appearance-none rounded-md',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ { 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
+ { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+ // Transition
+ 'transition duration-200 ease-in-out',
+
+ // Misc
+ 'cursor-text overflow-hidden'
+ ]
+ }),
+ inputToken: {
+ class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
+ },
+ inputChip: {
+ class: 'flex-auto inline-flex pt-1 pb-1'
+ },
+ input: {
+ class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full'
+ },
+ dropdown: {
+ class: [
+ 'relative',
+
+ // Alignments
+ 'items-center inline-flex justify-center text-center align-bottom',
+
+ // Shape
+ 'rounded-r-md',
+
+ // Size
+ 'py-2 leading-none',
+ 'w-10',
+
+ // Colors
+ 'text-primary-contrast',
+ 'bg-primary',
+ 'border border-primary',
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
+ 'hover:bg-primary-emphasis hover:border-primary-emphasis',
+ 'focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ },
+ loader: {
+ class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
+ },
+ overlay: {
+ class: [
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+
+ // Shape
+ 'border border-surface-300 dark:border-surface-700',
+ 'rounded-md',
+ 'shadow-md',
+
+ // Size
+ 'overflow-auto'
+ ]
+ },
+ list: {
+ class: 'p-1 list-none m-0'
+ },
+ option: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0 px-3 py-2',
+ 'first:mt-0 mt-[2px]',
+
+ // Shape
+ 'border-0 rounded',
+
+ // Colors
+ {
+ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+ 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+ 'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+ 'bg-highlight': context.selected
+ },
+
+ //States
+ { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+ { 'hover:bg-highlight-emphasis': context.selected },
+ { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+ // Transition
+ 'transition-shadow duration-200',
+
+ // Misc
+ 'cursor-pointer overflow-hidden whitespace-nowrap'
+ ]
+ }),
+ optionGroup: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Colors
+ 'text-surface-400 dark:text-surface-500',
+
+ // Misc
+ 'cursor-auto'
+ ]
+ },
+ emptyMessage: {
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+ 'bg-transparent'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/avatar/index.js b/src/presets/aura/avatar/index.js
new file mode 100644
index 0000000..9c77beb
--- /dev/null
+++ b/src/presets/aura/avatar/index.js
@@ -0,0 +1,43 @@
+export default {
+ root: ({ props, parent }) => ({
+ class: [
+ // Font
+ {
+ 'text-xl': props.size == 'large',
+ 'text-2xl': props.size == 'xlarge'
+ },
+
+ // Alignments
+ 'inline-flex items-center justify-center',
+ 'relative',
+
+ // Sizes
+ {
+ 'h-8 w-8': props.size == null || props.size == 'normal',
+ 'w-12 h-12': props.size == 'large',
+ 'w-16 h-16': props.size == 'xlarge'
+ },
+ { '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+ // Shapes
+ {
+ 'rounded-lg': props.shape == 'square',
+ 'rounded-full': props.shape == 'circle'
+ },
+ { 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+ // Colors
+ 'bg-surface-300 dark:bg-surface-700',
+ { 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
+ ]
+ }),
+ image: ({ props }) => ({
+ class: [
+ 'h-full w-full',
+ {
+ 'rounded-lg': props.shape == 'square',
+ 'rounded-full': props.shape == 'circle'
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/avatargroup/index.js b/src/presets/aura/avatargroup/index.js
new file mode 100644
index 0000000..d267e06
--- /dev/null
+++ b/src/presets/aura/avatargroup/index.js
@@ -0,0 +1,5 @@
+export default {
+ root: {
+ class: 'flex items-center'
+ }
+};
diff --git a/src/presets/aura/badge/index.js b/src/presets/aura/badge/index.js
new file mode 100644
index 0000000..da21a51
--- /dev/null
+++ b/src/presets/aura/badge/index.js
@@ -0,0 +1,47 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Font
+ 'font-bold',
+
+ {
+ 'text-xs leading-[1.5rem]': props.size === null,
+ 'text-[0.625rem] leading-[1.25rem]': props.size === 'small',
+ 'text-lg leading-[2.25rem]': props.size === 'large',
+ 'text-2xl leading-[3rem]': props.size === 'xlarge'
+ },
+
+ // Alignment
+ 'text-center inline-block',
+
+ // Size
+ 'p-0 px-1',
+ {
+ 'w-2 h-2': props.value === null,
+ 'min-w-[1.5rem] h-[1.5rem]': props.value !== null && props.size === null,
+ 'min-w-[1.25rem] h-[1.25rem]': props.size === 'small',
+ 'min-w-[2.25rem] h-[2.25rem]': props.size === 'large',
+ 'min-w-[3rem] h-[3rem]': props.size === 'xlarge'
+ },
+
+ // Shape
+ {
+ 'rounded-full': props.value?.length === 1,
+ 'rounded-[0.71rem]': props.value?.length !== 1
+ },
+
+ // Color
+ 'text-primary-contrast',
+ {
+ 'bg-primary': props.severity == null || props.severity === 'primary',
+ 'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary',
+ 'bg-green-500 dark:bg-green-400': props.severity === 'success',
+ 'bg-blue-500 dark:bg-blue-400': props.severity === 'info',
+ 'bg-orange-500 dark:bg-orange-400': props.severity === 'warn',
+ 'bg-purple-500 dark:bg-purple-400': props.severity === 'help',
+ 'bg-red-500 dark:bg-red-400': props.severity === 'danger',
+ 'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity === 'contrast'
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/badgedirective/index.js b/src/presets/aura/badgedirective/index.js
new file mode 100644
index 0000000..ad01eb3
--- /dev/null
+++ b/src/presets/aura/badgedirective/index.js
@@ -0,0 +1,43 @@
+export default {
+ root: ({ context }) => ({
+ class: [
+ // Font
+ 'font-bold',
+ 'text-xs leading-5',
+
+ // Alignment
+ 'flex items-center justify-center',
+ 'text-center',
+
+ // Position
+ 'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+ // Size
+ 'm-0',
+ {
+ 'p-0': context.nogutter || context.dot,
+ 'px-2': !context.nogutter && !context.dot,
+ 'min-w-[0.5rem] w-2 h-2': context.dot,
+ 'min-w-[1.5rem] h-6': !context.dot
+ },
+
+ // Shape
+ {
+ 'rounded-full': context.nogutter || context.dot,
+ 'rounded-[10px]': !context.nogutter && !context.dot
+ },
+
+ // Color
+ 'text-primary-contrast',
+ {
+ 'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
+ 'bg-surface-500 dark:bg-surface-400': context.secondary,
+ 'bg-green-500 dark:bg-green-400': context.success,
+ 'bg-blue-500 dark:bg-blue-400': context.info,
+ 'bg-orange-500 dark:bg-orange-400': context.warning,
+ 'bg-purple-500 dark:bg-purple-400': context.help,
+ 'bg-red-500 dark:bg-red-400': context.danger
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/blockui/index.js b/src/presets/aura/blockui/index.js
new file mode 100644
index 0000000..928257a
--- /dev/null
+++ b/src/presets/aura/blockui/index.js
@@ -0,0 +1,4 @@
+export default {
+ root: 'relative',
+ mask: 'bg-black/40 rounded-md'
+};
diff --git a/src/presets/aura/breadcrumb/index.js b/src/presets/aura/breadcrumb/index.js
new file mode 100644
index 0000000..558b5d4
--- /dev/null
+++ b/src/presets/aura/breadcrumb/index.js
@@ -0,0 +1,63 @@
+export default {
+ root: {
+ class: [
+ // Shape
+ 'rounded-md',
+
+ // Spacing
+ 'p-4',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+
+ // Misc
+ 'overflow-x-auto'
+ ]
+ },
+ list: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center flex-nowrap',
+
+ // Spacing
+ 'm-0 p-0 list-none leading-none'
+ ]
+ },
+ itemLink: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center gap-2',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'text-surface-600 dark:text-white/70',
+
+ // States
+ 'focus-visible:outline-none focus-visible:outline-offset-0',
+ 'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transitions
+ 'transition-shadow duration-200',
+
+ // Misc
+ 'text-decoration-none'
+ ]
+ },
+ itemIcon: {
+ class: 'text-surface-600 dark:text-white/70'
+ },
+ separator: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center',
+
+ // Spacing
+ 'mx-2',
+
+ // Color
+ 'text-surface-600 dark:text-white/70'
+ ]
+ }
+};
diff --git a/src/presets/aura/button/index.js b/src/presets/aura/button/index.js
new file mode 100644
index 0000000..874fe13
--- /dev/null
+++ b/src/presets/aura/button/index.js
@@ -0,0 +1,246 @@
+export default {
+ root: ({ props, context, parent, instance }) => ({
+ class: [
+ 'relative',
+
+ // Alignments
+ 'items-center inline-flex text-center align-bottom justify-center',
+ { 'flex-col': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label },
+
+ // Sizes & Spacing
+ 'leading-[normal]',
+ {
+ 'px-3 py-2': props.size === null,
+ 'text-sm py-1.5 px-3': props.size === 'small',
+ 'text-xl py-3 px-4': props.size === 'large'
+ },
+ { 'gap-2': props.label !== null },
+ {
+ 'w-10 px-0 py-2': props.label == null && props.icon !== null
+ },
+ {
+ 'w-10 px-0 gap-0': instance.hasIcon && !props.label && !props.badge,
+ 'rounded-[50%] h-10 [&>[data-pc-section=label]]:w-0 [&>[data-pc-section=label]]:invisible': instance.hasIcon && !props.label && !props.badge && props.rounded
+ },
+
+ // Shapes
+ { 'shadow-lg': props.raised },
+ { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+ { 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+
+ // Link Button
+ { 'text-primary-600 bg-transparent border-transparent': props.link },
+
+ // Plain Button
+ { 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
+ // Plain Text Button
+ { 'text-surface-500': props.plain && props.text },
+ // Plain Outlined Button
+ { 'text-surface-500 border border-gray-500': props.plain && props.outlined },
+
+ // Text Button
+ { 'bg-transparent border-transparent': props.text && !props.plain },
+
+ // Outlined Button
+ { 'bg-transparent border': props.outlined && !props.plain },
+
+ // --- Severity Buttons ---
+
+ // Primary Button
+ {
+ 'text-primary-contrast': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+ 'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+ 'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
+ },
+ // Primary Text Button
+ { 'text-primary': props.text && props.severity === null && !props.plain },
+ // Primary Outlined Button
+ { 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
+
+ // Secondary Button
+ {
+ 'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+ 'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+ 'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
+ },
+ // Secondary Text Button
+ { 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
+ // Secondary Outlined Button
+ { 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
+
+ // Success Button
+ {
+ 'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+ 'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+ 'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
+ },
+ // Success Text Button
+ { 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
+ // Success Outlined Button
+ { 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
+
+ // Info Button
+ {
+ 'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+ 'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+ 'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
+ },
+ // Info Text Button
+ { 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
+ // Info Outlined Button
+ { 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
+
+ // Warning Button
+ {
+ 'text-white dark:text-surface-900': props.severity === 'warn' && !props.text && !props.outlined && !props.plain,
+ 'bg-orange-500 dark:bg-orange-400': props.severity === 'warn' && !props.text && !props.outlined && !props.plain,
+ 'border border-orange-500 dark:border-orange-400': props.severity === 'warn' && !props.text && !props.outlined && !props.plain
+ },
+ // Warning Text Button
+ { 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warn' && !props.plain },
+ // Warning Outlined Button
+ { 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warn' && !props.plain },
+
+ // Help Button
+ {
+ 'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+ 'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+ 'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
+ },
+ // Help Text Button
+ { 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
+ // Help Outlined Button
+ { 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
+
+ // Danger Button
+ {
+ 'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+ 'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
+ 'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+ },
+ // Danger Text Button
+ { 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
+ // Danger Outlined Button
+ { 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
+
+ // Contrast Button
+ {
+ 'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+ 'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
+ 'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
+ },
+ // Contrast Text Button
+ { 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
+ // Contrast Outlined Button
+ { 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
+
+ // --- Severity Button States ---
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1',
+
+ // Link
+ { 'focus:ring-primary': props.link },
+
+ // Plain
+ { 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
+ // Text & Outlined Button
+ { 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
+
+ // Primary
+ { 'hover:bg-primary-emphasis hover:border-primary-emphasis': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-primary': props.severity === null },
+ // Text & Outlined Button
+ { 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
+
+ // Secondary
+ { 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
+ // Text & Outlined Button
+ { 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
+
+ // Success
+ { 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
+ // Text & Outlined Button
+ { 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
+
+ // Info
+ { 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
+ // Text & Outlined Button
+ { 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
+
+ // Warning
+ { 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warn' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warn' },
+ // Text & Outlined Button
+ { 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warn' && !props.plain },
+
+ // Help
+ { 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
+ // Text & Outlined Button
+ { 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
+
+ // Danger
+ { 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
+ // Text & Outlined Button
+ { 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
+
+ // Contrast
+ { 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
+ { 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
+ // Text & Outlined Button
+ { 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
+
+ // Disabled
+ { 'opacity-60 pointer-events-none cursor-default': context.disabled },
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // Misc
+ 'cursor-pointer overflow-hidden select-none',
+
+ // Badge
+ '[&>[data-pc-name=badge]]:min-w-4 [&>[data-pc-name=badge]]:h-4 [&>[data-pc-name=badge]]:leading-4'
+ ]
+ }),
+ label: ({ props }) => ({
+ class: [
+ 'duration-200',
+ 'font-medium',
+ {
+ 'hover:underline': props.link
+ },
+ { 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
+ ]
+ }),
+ icon: ({ props }) => ({
+ class: [
+ 'text-base leading-4',
+ 'mx-0',
+ {
+ 'mr-2': props.iconPos == 'left' && props.label != null,
+ 'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+ 'order-2': props.iconPos == 'bottom' && props.label != null
+ }
+ ]
+ }),
+ loadingIcon: ({ props }) => ({
+ class: [
+ 'h-4 w-4',
+ 'mx-0',
+ {
+ 'mr-2': props.iconPos == 'left' && props.label != null,
+ 'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+ 'mb-2': props.iconPos == 'top' && props.label != null,
+ 'mt-2': props.iconPos == 'bottom' && props.label != null
+ },
+ 'animate-spin'
+ ]
+ }),
+ badge: ({ props }) => ({
+ class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
+ })
+};
diff --git a/src/presets/aura/buttongroup/index.js b/src/presets/aura/buttongroup/index.js
new file mode 100644
index 0000000..c6ae4d3
--- /dev/null
+++ b/src/presets/aura/buttongroup/index.js
@@ -0,0 +1,12 @@
+export default {
+ root: {
+ class: [
+ '[&>[data-pc-name=button]]:m-0',
+ '[&>[data-pc-name=button]]:border-r-none',
+ '[&>[data-pc-name=button]:nth-last-child(n+2)]:rounded-tr-none',
+ '[&>[data-pc-name=button]:nth-last-child(n+2)]:rounded-br-none',
+ '[&>[data-pc-name=button]:nth-child(n+2)]:rounded-tl-none',
+ '[&>[data-pc-name=button]:nth-child(n+2)]:rounded-bl-none'
+ ]
+ }
+};
diff --git a/src/presets/aura/card/index.js b/src/presets/aura/card/index.js
new file mode 100644
index 0000000..eef7c57
--- /dev/null
+++ b/src/presets/aura/card/index.js
@@ -0,0 +1,53 @@
+export default {
+ root: {
+ class: [
+ //Flex
+ 'flex flex-col',
+
+ //Shape
+ 'rounded-[12px]',
+ 'shadow-md',
+
+ //Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0'
+ ]
+ },
+ body: {
+ class: [
+ //Flex
+ 'flex flex-col',
+ 'gap-4',
+
+ 'p-6'
+ ]
+ },
+ caption: {
+ class: [
+ //Flex
+ 'flex flex-col',
+ 'gap-2'
+ ]
+ },
+ title: {
+ class: 'text-xl font-semibold mb-0'
+ },
+ subtitle: {
+ class: [
+ //Font
+ 'font-normal',
+
+ //Spacing
+ 'mb-0',
+
+ //Color
+ 'text-surface-600 dark:text-surface-0/60'
+ ]
+ },
+ content: {
+ class: 'p-0'
+ },
+ footer: {
+ class: 'p-0'
+ }
+};
diff --git a/src/presets/aura/carousel/index.js b/src/presets/aura/carousel/index.js
new file mode 100644
index 0000000..6b58b78
--- /dev/null
+++ b/src/presets/aura/carousel/index.js
@@ -0,0 +1,102 @@
+export default {
+ root: {
+ class: [
+ // Flexbox
+ 'flex flex-col'
+ ]
+ },
+ contentContainer: {
+ class: [
+ // Flexbox & Overflow
+ 'flex flex-col overflow-auto'
+ ]
+ },
+ content: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex',
+
+ // Orientation
+ {
+ 'flex-row': props.orientation !== 'vertical',
+ 'flex-col': props.orientation == 'vertical'
+ },
+ '[&>[data-pc-extend=button]]:self-center'
+ ]
+ }),
+ viewport: {
+ class: [
+ // Overflow & Width
+ 'overflow-hidden w-full'
+ ]
+ },
+ itemList: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex',
+
+ // Orientation & Sizing
+ {
+ 'flex-row': props.orientation !== 'vertical',
+ 'flex-col h-full': props.orientation == 'vertical'
+ }
+ ]
+ }),
+ item: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex shrink-0 grow ',
+
+ // Size
+ {
+ 'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+ 'w-full h-full': props.orientation == 'vertical'
+ }
+ ]
+ }),
+ itemClone: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex shrink-0 grow',
+ 'unvisible',
+
+ // Size
+ {
+ 'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
+
+ 'w-full h-full': props.orientation == 'vertical'
+ }
+ ]
+ }),
+ indicatorList: {
+ class: [
+ // Flexbox & Alignment
+ 'flex flex-row justify-center flex-wrap'
+ ]
+ },
+ indicator: {
+ class: [
+ // Spacing
+ 'mr-2 mb-2'
+ ]
+ },
+ indicatorButton: ({ context }) => ({
+ class: [
+ // Sizing & Shape
+ 'w-8 h-2 rounded-md',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Focus Styles
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Color & Background
+ {
+ 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
+ 'bg-primary hover:bg-primary-emphasis': context.highlighted
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/cascadeselect/index.js b/src/presets/aura/cascadeselect/index.js
new file mode 100644
index 0000000..0e4b905
--- /dev/null
+++ b/src/presets/aura/cascadeselect/index.js
@@ -0,0 +1,190 @@
+export default {
+ root: ({ props, state }) => ({
+ class: [
+ 'relative',
+
+ // Flex
+ {
+ flex: props.fluid,
+ 'inline-flex': !props.fluid
+ },
+
+ // Shape
+ 'rounded-md',
+
+ // Color and Background
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // States
+ { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+ { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none',
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ label: ({ props }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Flex & Alignment
+ 'flex flex-auto',
+
+ // Sizing and Spacing
+ 'w-[1%]',
+ 'py-2 px-3',
+
+ //Shape
+ 'rounded-none',
+
+ // Color and Background
+ 'bg-transparent',
+ 'border-0',
+ { 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+ // Transitions
+ 'transition',
+ 'duration-200',
+
+ // States
+ 'focus:outline-none focus:shadow-none',
+
+ // Misc
+ 'relative',
+ 'cursor-pointer',
+ 'overflow-hidden overflow-ellipsis',
+ 'whitespace-nowrap',
+ 'appearance-none'
+ ]
+ }),
+ dropdown: {
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+ 'shrink-0',
+
+ // Color and Background
+ 'bg-transparent',
+ 'text-surface-500',
+
+ // Size
+ 'w-12',
+
+ // Shape
+ 'rounded-r-md'
+ ]
+ },
+ overlay: {
+ class: [
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+
+ // Shape
+ 'border border-surface-300 dark:border-surface-700',
+ 'rounded-md',
+ 'shadow-md'
+ ]
+ },
+ list: {
+ class: 'flex flex-col list-none p-0 m-0 gap-[2px] min-w-full'
+ },
+ option: ({ context }) => ({
+ class: [
+ //Shape
+ 'rounded-[4px]',
+
+ // Spacing
+ 'first:mt-0 mt-[2px]',
+
+ // Colors
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // Transitions
+ 'transition-shadow',
+ 'duration-200',
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Disabled
+ { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+ ]
+ }),
+ optionContent: {
+ class: [
+ 'relative',
+ 'leading-[normal]',
+
+ // Flexbox
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Misc
+ 'no-underline',
+ 'overflow-hidden',
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ groupIcon: {
+ class: [
+ // Alignment
+ 'ml-auto'
+ ]
+ },
+ optionList: {
+ class: [
+ 'min-w-full',
+
+ // Spacing
+ 'p-1',
+ 'm-0',
+ 'list-none',
+
+ // Shape
+ 'shadow-none sm:shadow-md',
+ 'rounded-md',
+ 'border border-surface-200 dark:border-surface-700',
+
+ // Position
+ 'static sm:absolute',
+ 'z-10',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/checkbox/index.js b/src/presets/aura/checkbox/index.js
new file mode 100644
index 0000000..0169fdd
--- /dev/null
+++ b/src/presets/aura/checkbox/index.js
@@ -0,0 +1,104 @@
+export default {
+ root: {
+ class: [
+ 'relative',
+
+ // Alignment
+ 'inline-flex',
+ 'align-bottom',
+
+ // Size
+ 'w-5',
+ 'h-5',
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ box: ({ props, context }) => ({
+ class: [
+ // Alignment
+ 'flex',
+ 'items-center',
+ 'justify-center',
+
+ // Size
+ 'w-5',
+ 'h-5',
+
+ // Shape
+ 'rounded',
+ 'border',
+
+ // Colors
+ {
+ 'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+ 'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
+ 'border-primary bg-primary': context.checked
+ },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ {
+ 'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
+ 'peer-hover:bg-primary-emphasis peer-hover:border-primary-emphasis': !props.disabled && context.checked,
+ 'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+ },
+
+ // Transitions
+ 'transition-colors',
+ 'duration-200'
+ ]
+ }),
+ input: {
+ class: [
+ 'peer',
+
+ // Size
+ 'w-full ',
+ 'h-full',
+
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-10',
+
+ // Spacing
+ 'p-0',
+ 'm-0',
+
+ // Shape
+ 'opacity-0',
+ 'rounded',
+ 'outline-none',
+ 'border border-surface-300 dark:border-surface-700',
+
+ // Misc
+ 'appearance-none',
+ 'cursor-pointer'
+ ]
+ },
+ icon: ({ context, state }) => ({
+ class: [
+ // Size
+ 'w-[0.875rem]',
+ 'h-[0.875rem]',
+
+ // Colors
+ {
+ 'text-white dark:text-surface-950': context.checked,
+ 'text-primary': state.d_indeterminate
+ },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/chip/index.js b/src/presets/aura/chip/index.js
new file mode 100644
index 0000000..70ea685
--- /dev/null
+++ b/src/presets/aura/chip/index.js
@@ -0,0 +1,43 @@
+export default {
+ root: {
+ class: [
+ // Flexbox
+ 'inline-flex items-center',
+
+ // Spacing
+ 'px-3 py-1 gap-2',
+
+ // Shape
+ 'rounded-[16px]',
+
+ // Colors
+ 'text-surface-700 dark:text-white',
+ 'bg-surface-100 dark:bg-surface-700'
+ ]
+ },
+ label: {
+ class: 'leading-6 m-0'
+ },
+ icon: {
+ class: 'leading-6 mr-2'
+ },
+ image: {
+ class: ['w-8 h-8 -ml-2 mr-2', 'rounded-full']
+ },
+ removeIcon: {
+ class: [
+ 'inline-block',
+ // Shape
+ 'rounded-md leading-6',
+
+ // Size
+ 'w-4 h-4',
+
+ // Transition
+ 'transition duration-200 ease-in-out',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }
+};
diff --git a/src/presets/aura/colorpicker/index.js b/src/presets/aura/colorpicker/index.js
new file mode 100644
index 0000000..e517a47
--- /dev/null
+++ b/src/presets/aura/colorpicker/index.js
@@ -0,0 +1,126 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Display
+ 'inline-block',
+
+ // Misc
+ { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ preview: {
+ class: [
+ // Font
+ 'text-base leading-none',
+
+ // Spacing
+ 'm-0',
+ 'p-0',
+
+ //Size
+ 'w-6 h-6',
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-300 dark:border-surface-700',
+
+ // States
+ 'hover:border-surface-400 dark:hover:border-surface-600',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+ // Transition
+ 'transition-colors duration-200',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ },
+ panel: ({ props }) => ({
+ class: [
+ // Position & Size
+ {
+ 'relative h-[166px] w-[193px]': props.inline,
+ 'absolute h-[166px] w-[193px]': !props.inline
+ },
+
+ // Shape
+ 'shadow-md border',
+
+ // Colors
+ 'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700'
+ ]
+ }),
+ colorSelector: {
+ class: [
+ // Position
+ 'absolute top-[8px] left-[8px]',
+
+ // Size
+ 'h-[150px] w-[150px]'
+ ]
+ },
+ color: {
+ class: [
+ // Size
+ 'h-[150px] w-[150px]'
+ ],
+ style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+ },
+ colorHandle: {
+ class: [
+ 'absolute',
+
+ // Shape
+ 'rounded-full border border-solid',
+
+ // Size
+ 'h-[10px] w-[10px]',
+
+ // Spacing
+ '-ml-[5px] -mt-[5px]',
+
+ // Colors
+ 'border-white',
+
+ // Misc
+ 'cursor-pointer opacity-85'
+ ]
+ },
+ hue: {
+ class: [
+ // Position
+ 'absolute top-[8px] left-[167px]',
+
+ // Size
+ 'h-[150px] w-[17px]',
+
+ // Opacity
+ 'opacity-85'
+ ],
+ style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+ },
+ hueHandle: {
+ class: [
+ // Position
+ 'absolute left-0 -ml-[2px] -mt-[5px]',
+
+ // Size
+ 'h-[10px] w-[21px]',
+
+ // Shape
+ 'border-solid border-2',
+
+ // Misc
+ 'cursor-pointer opacity-85'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/confirmdialog/index.js b/src/presets/aura/confirmdialog/index.js
new file mode 100644
index 0000000..52abb64
--- /dev/null
+++ b/src/presets/aura/confirmdialog/index.js
@@ -0,0 +1,3 @@
+export default {
+ icon: 'w-8 h-8 text-[2rem] mr-2'
+};
diff --git a/src/presets/aura/confirmpopup/index.js b/src/presets/aura/confirmpopup/index.js
new file mode 100644
index 0000000..f5490ce
--- /dev/null
+++ b/src/presets/aura/confirmpopup/index.js
@@ -0,0 +1,56 @@
+export default {
+ root: {
+ class: [
+ // Shape
+ 'rounded-lg',
+ 'shadow-lg',
+ 'border-0',
+
+ // Positioning
+ 'z-40 transform origin-center',
+ 'mt-3 absolute left-0 top-0',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80',
+
+ // Before: Arrow
+ 'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
+ 'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
+ ]
+ },
+ content: {
+ class: ['p-4 items-center flex', 'rounded-t-lg', 'border-x border-t last:border-b border-surface-200 dark:border-surface-700']
+ },
+ icon: {
+ class: 'text-2xl mr-4'
+ },
+ footer: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-end',
+ 'shrink-0',
+ 'text-right',
+ 'gap-2',
+
+ // Spacing
+ 'px-4',
+ 'pb-4',
+
+ // Shape
+ 'border-t-0',
+ 'rounded-b-lg',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80',
+ 'border-x border-b border-surface-200 dark:border-surface-700'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/contextmenu/index.js b/src/presets/aura/contextmenu/index.js
new file mode 100644
index 0000000..5b035c7
--- /dev/null
+++ b/src/presets/aura/contextmenu/index.js
@@ -0,0 +1,127 @@
+export default {
+ root: {
+ class: [
+ // Sizing and Shape
+ 'min-w-[12.5rem]',
+ 'rounded-md',
+ 'shadow-md',
+
+ // Spacing
+ 'p-1',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+ 'border border-surface-200 dark:border-surface-700'
+ ]
+ },
+ rootList: {
+ class: [
+ // Spacings and Shape
+ 'flex flex-col',
+ 'list-none',
+ 'm-0',
+ 'p-0',
+ 'outline-none'
+ ]
+ },
+ item: {
+ class: 'relative my-[2px] [&:first-child]:mt-0'
+ },
+ itemContent: ({ context }) => ({
+ class: [
+ //Shape
+ 'rounded-[4px]',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // Transitions
+ 'transition-shadow',
+ 'duration-200',
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Disabled
+ { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+ ]
+ }),
+ itemLink: {
+ class: [
+ 'relative',
+ // Flexbox
+
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+
+ // Misc
+ 'no-underline',
+ 'overflow-hidden',
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ itemIcon: {
+ class: [
+ // Spacing
+ 'mr-2',
+
+ // Color
+ 'text-surface-600 dark:text-white/70'
+ ]
+ },
+ itemLabel: {
+ class: ['leading-none']
+ },
+ submenu: ({ props }) => ({
+ class: [
+ 'flex flex-col',
+ // Size
+ 'w-full sm:w-48',
+
+ // Spacing
+ 'p-1',
+ 'm-0',
+ 'list-none',
+
+ // Shape
+ 'shadow-md',
+ 'rounded-md',
+ 'dark:border dark:border-surface-700',
+
+ // Position
+ 'static sm:absolute',
+ 'z-10',
+ { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ }),
+ submenuIcon: {
+ class: ['ml-auto']
+ },
+ separator: {
+ class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+ },
+ transition: {
+ enterFromClass: 'opacity-0',
+ enterActiveClass: 'transition-opacity duration-250'
+ }
+};
diff --git a/src/presets/aura/datatable/index.js b/src/presets/aura/datatable/index.js
new file mode 100644
index 0000000..10828b9
--- /dev/null
+++ b/src/presets/aura/datatable/index.js
@@ -0,0 +1,406 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' },
+
+ // Size
+ { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+ ]
+ }),
+ mask: {
+ class: [
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-20',
+
+ // Flex & Alignment
+ 'flex items-center justify-center',
+
+ // Size
+ 'w-full h-full',
+
+ // Color
+ 'bg-surface-100/40 dark:bg-surface-900/40',
+
+ // Transition
+ 'transition duration-200'
+ ]
+ },
+ loadingIcon: {
+ class: 'w-8 h-8 animate-spin'
+ },
+ tableContainer: ({ props }) => ({
+ class: [
+ { relative: props.scrollable, 'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex' },
+
+ // Size
+ { 'h-full': props.scrollable && props.scrollHeight === 'flex' }
+ ]
+ }),
+ header: ({ props }) => ({
+ class: [
+ 'font-bold',
+
+ // Shape
+ props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+ // Spacing
+ 'p-4',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+ 'text-surface-700 dark:text-white/80'
+ ]
+ }),
+ table: {
+ class: 'w-full border-spacing-0 border-separate'
+ },
+ thead: ({ context }) => ({
+ class: [
+ {
+ 'bg-surface-0 dark:bg-surface-900 top-0 z-40 sticky': context.scrollable
+ }
+ ]
+ }),
+ tbody: ({ instance, context }) => ({
+ class: [
+ {
+ 'sticky z-20': instance.frozenRow && context.scrollable
+ },
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ }),
+ tfoot: ({ context }) => ({
+ class: [
+ {
+ 'bg-surface-0 bottom-0 z-0': context.scrollable
+ }
+ ]
+ }),
+ footer: {
+ class: [
+ 'font-bold',
+
+ // Shape
+ 'border-t-0 border-b border-x-0',
+
+ // Spacing
+ 'p-4',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+ 'text-surface-700 dark:text-white/80'
+ ]
+ },
+ column: {
+ headerCell: ({ context, props }) => ({
+ class: [
+ 'font-semibold',
+ 'leading-[normal]',
+
+ // Position
+ { 'sticky z-20 border-b': props.frozen || props.frozen === '' },
+
+ { relative: context.resizable },
+
+ // Alignment
+ 'text-left',
+
+ // Shape
+ { 'first:border-l border-y border-r': context?.showGridlines },
+ 'border-0 border-b border-solid',
+
+ // Spacing
+ context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+ // Color
+ (props.sortable === '' || props.sortable) && context.sorted ? 'bg-highlight' : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800',
+ 'border-surface-200 dark:border-surface-700 ',
+
+ // States
+ { 'hover:bg-surface-100 dark:hover:bg-surface-800/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transition
+ { 'transition duration-200': props.sortable === '' || props.sortable },
+
+ // Misc
+ { 'cursor-pointer': props.sortable === '' || props.sortable },
+ {
+ 'overflow-hidden whitespace-nowrap border-y bg-clip-padding': context?.resizable // Resizable
+ }
+ ]
+ }),
+ columnHeaderContent: {
+ class: 'flex items-center gap-2'
+ },
+ sort: ({ context }) => ({
+ class: [context.sorted ? 'text-primary-500' : 'text-surface-700', context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80']
+ }),
+ bodyCell: ({ props, context, state, parent }) => ({
+ class: [
+ // Font
+ 'leading-[normal]',
+
+ //Position
+ { 'sticky box-border border-b': parent.instance.frozenRow },
+ { 'sticky box-border border-b z-20': props.frozen || props.frozen === '' },
+
+ // Alignment
+ 'text-left',
+
+ // Shape
+ 'border-0 border-b border-solid',
+ { 'first:border-l border-r border-b': context?.showGridlines },
+ { 'bg-surface-0 dark:bg-surface-900': parent.instance.frozenRow || props.frozen || props.frozen === '' },
+
+ // Spacing
+ { 'py-[0.375rem] px-2': context?.size === 'small' && !state['d_editing'] },
+ { 'py-[0.9375rem] px-5': context?.size === 'large' && !state['d_editing'] },
+ { 'py-3 px-4': context?.size !== 'large' && context?.size !== 'small' && !state['d_editing'] },
+ { 'py-[0.6rem] px-2': state['d_editing'] },
+
+ // Color
+ 'border-surface-200 dark:border-surface-700',
+
+ {
+ 'overflow-hidden whitespace-nowrap border-y bg-clip-padding': parent.instance?.$parentInstance?.$parentInstance?.resizableColumns // Resizable
+ }
+ ]
+ }),
+ footerCell: ({ context }) => ({
+ class: [
+ // Font
+ 'font-bold',
+
+ // Alignment
+ 'text-left',
+
+ // Shape
+ 'border-0 border-b border-solid',
+ { 'border-x border-y': context?.showGridlines },
+
+ // Spacing
+ context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4',
+
+ // Color
+ 'border-surface-200 dark:border-surface-700',
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ }),
+ sortIcon: ({ context }) => ({
+ class: ['ml-2', context.sorted ? 'text-inherit' : 'text-surface-700 dark:text-white/70']
+ }),
+ columnFilter: {
+ class: 'inline-flex items-center ml-auto font-normal'
+ },
+ filterOverlay: {
+ class: [
+ 'flex flex-col gap-2',
+
+ // Position
+ 'absolute top-0 left-0',
+
+ // Shape
+ 'border-0 dark:border',
+ 'rounded-md',
+ 'shadow-md',
+
+ // Size
+ 'min-w-[12.5rem]',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-800 dark:text-white/80',
+ 'dark:border-surface-700'
+ ]
+ },
+ filterConstraintList: {
+ class: 'm-0 p-0 py-3 list-none'
+ },
+ filterConstraint: ({ context }) => ({
+ class: [
+ // Font
+ 'font-normal',
+ 'leading-none',
+
+ // Position
+ 'relative',
+
+ // Shape
+ 'border-0',
+ 'rounded-none',
+
+ // Spacing
+ 'm-0',
+ 'py-3 px-5',
+
+ // Color
+ { 'text-surface-700 dark:text-white/80': !context?.highlighted },
+ { 'bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-white/80': !context?.highlighted },
+ { 'bg-highlight': context?.highlighted },
+
+ //States
+ { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
+ { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': !context?.highlighted },
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transitions
+ 'transition-shadow',
+ 'duration-200',
+
+ // Misc
+ 'cursor-pointer',
+ 'overflow-hidden',
+ 'whitespace-nowrap'
+ ]
+ }),
+ filterOperator: {
+ class: [
+ // Shape
+ 'rounded-t-md',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-700',
+ '[&>[data-pc-name=pcfilteroperatordropdown]]:w-full'
+ ]
+ },
+ filter: ({ instance }) => ({
+ class: [{ 'flex items-center w-full gap-2': instance.display === 'row', 'inline-flex ml-auto': instance.display === 'menu' }]
+ }),
+ filterRule: 'flex flex-col gap-2',
+ filterButtonbar: 'flex items-center justify-between p-0',
+ filterAddButtonContainer: '[&>[data-pc-name=pcfilteraddrulebutton]]:w-full',
+ rowToggleButton: {
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+ 'text-left',
+
+ // Spacing
+ 'm-0 p-0',
+
+ // Size
+ 'w-8 h-8',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Color
+ 'text-surface-500 dark:text-white/70',
+ 'bg-transparent',
+ 'focus-visible:outline-none focus-visible:outline-offset-0',
+ 'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'overflow-hidden',
+ 'cursor-pointer select-none'
+ ]
+ },
+ columnResizer: {
+ class: [
+ 'block',
+
+ // Position
+ 'absolute top-0 right-0',
+
+ // Sizing
+ 'w-2 h-full',
+
+ // Spacing
+ 'm-0 p-0',
+
+ // Color
+ 'border border-transparent',
+
+ // Misc
+ 'cursor-col-resize'
+ ]
+ },
+ transition: {
+ class: 'p-4 flex flex-col gap-2',
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+ },
+ bodyRow: ({ context, props }) => ({
+ class: [
+ // Color
+ 'dark:text-white/80',
+ { 'bg-highlight': context.selected && props.highlightOnSelect },
+ { 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
+ { 'font-bold bg-surface-0 dark:bg-surface-900 z-20': props.frozenRow },
+ { 'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-900 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-800/50': context.stripedRows },
+
+ // State
+ { 'hover:bg-surface-300/20 dark:hover:bg-surface-800/50 hover:text-surface-600': props.selectionMode && !context.selected },
+
+ // Transition
+ { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover },
+
+ // Misc
+ { 'cursor-pointer': props.selectionMode }
+ ]
+ }),
+ rowExpansion: {
+ class: 'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-white/80'
+ },
+ rowGroupHeader: {
+ class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
+ },
+ rowGroupFooter: {
+ class: ['sticky z-20', 'bg-surface-0 text-surface-600 dark:text-white/70', 'dark:bg-surface-900']
+ },
+ rowToggleButton: {
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+ 'text-left',
+
+ // Spacing
+ 'm-0 p-0',
+
+ // Size
+ 'w-8 h-8',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Color
+ 'text-surface-500 dark:text-white/70',
+ 'bg-transparent',
+ 'focus-visible:outline-none focus-visible:outline-offset-0',
+ 'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'overflow-hidden',
+ 'cursor-pointer select-none'
+ ]
+ },
+ rowToggleIcon: {
+ class: 'inline-block w-4 h-4'
+ },
+ columnResizeIndicator: {
+ class: 'absolute hidden w-[2px] z-20 bg-primary'
+ }
+};
diff --git a/src/presets/aura/dataview/index.js b/src/presets/aura/dataview/index.js
new file mode 100644
index 0000000..2fa6414
--- /dev/null
+++ b/src/presets/aura/dataview/index.js
@@ -0,0 +1,28 @@
+export default {
+ content: {
+ class: [
+ // Spacing
+ 'p-0',
+
+ // Shape
+ 'border-0',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ header: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'py-3 px-4',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+ 'bg-surface-00 dark:bg-surface-900',
+ 'border-b border-surface-200 dark:border-surface-700'
+ ]
+ }
+};
diff --git a/src/presets/aura/datepicker/index.js b/src/presets/aura/datepicker/index.js
new file mode 100644
index 0000000..c55812f
--- /dev/null
+++ b/src/presets/aura/datepicker/index.js
@@ -0,0 +1,446 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Display and Position
+ {
+ flex: props.fluid,
+ 'inline-flex': !props.fluid
+ },
+ 'max-w-full',
+ 'relative'
+ ]
+ }),
+ pcInput: ({ props, parent }) => ({
+ root: {
+ class: [
+ // Display
+ 'flex-auto w-[1%]',
+
+ // Font
+ 'leading-none',
+
+ // Colors
+ 'text-surface-600 dark:text-surface-200',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Shape
+ 'appearance-none',
+ { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
+ { 'rounded-l-md flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' },
+ { 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
+
+ // Transitions
+ 'transition-colors',
+ 'duration-200',
+
+ // States
+ {
+ 'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
+ },
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
+ ]
+ }
+ }),
+ dropdownIcon: {
+ class: ['absolute top-1/2 -mt-2', 'text-surface-600 dark:text-surface-200', 'right-3']
+ },
+ dropdown: {
+ class: [
+ 'relative',
+
+ // Alignments
+ 'items-center inline-flex text-center align-bottom justify-center',
+
+ // Shape
+ 'rounded-r-md',
+
+ // Size
+ 'py-2 px-0',
+ 'w-10',
+ 'leading-[normal]',
+
+ // Colors
+ 'border border-l-0 border-surface-300 dark:border-surface-600',
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1',
+ 'hover:bg-primary-hover hover:border-primary-hover',
+ 'focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ },
+ inputIconContainer: 'absolute cursor-pointer top-1/2 right-3 -mt-3',
+ inputIcon: 'inline-block text-base',
+ panel: ({ props }) => ({
+ class: [
+ // Display & Position
+ {
+ absolute: !props.inline,
+ 'inline-block': props.inline
+ },
+
+ // Size
+ { 'w-auto p-3 ': !props.inline },
+ { 'min-w-[80vw] w-auto p-3 ': props.touchUI },
+ { 'p-3 min-w-full': props.inline },
+
+ // Shape
+ 'border rounded-lg',
+ {
+ 'shadow-md': !props.inline
+ },
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+
+ //misc
+ { 'overflow-x-auto': props.inline }
+ ]
+ }),
+ header: {
+ class: [
+ //Font
+ 'font-medium',
+
+ // Flexbox and Alignment
+ 'flex items-center justify-between',
+
+ // Spacing
+ 'p-0 pb-2',
+ 'm-0',
+
+ // Shape
+ 'border-b',
+ 'rounded-t-md',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700'
+ ]
+ },
+ title: {
+ class: [
+ // Text
+ 'leading-7',
+ 'mx-auto my-0'
+ ]
+ },
+ selectMonth: {
+ class: [
+ // Font
+ 'text-base leading-[normal]',
+ 'font-medium',
+
+ //shape
+ 'rounded-md',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Spacing
+ 'p-1',
+ 'm-0 mr-2',
+
+ // States
+ 'hover:text-primary-500 dark:hover:text-primary-400',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ },
+ selectYear: {
+ class: [
+ // Font
+ 'text-base leading-[normal]',
+ 'font-medium',
+
+ //shape
+ 'rounded-md',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Spacing
+ 'p-1',
+ 'm-0 mr-2',
+
+ // States
+ 'hover:text-primary-500 dark:hover:text-primary-400',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ },
+ table: {
+ class: [
+ // Font
+ 'text-base leading-[normal]',
+ // Size & Shape
+ 'border-collapse',
+ 'w-full',
+
+ // Spacing
+ 'm-0 mt-2'
+ ]
+ },
+ tableHeaderCell: {
+ class: [
+ // Spacing
+ 'p-1',
+ 'font-medium'
+ ]
+ },
+ weekHeader: {
+ class: ['leading-5', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+ },
+ weekNumber: {
+ class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
+ },
+ weekday: {
+ class: [
+ // Colors
+ 'text-surface-500 dark:text-white/60',
+ 'p-1'
+ ]
+ },
+ dayCell: {
+ class: [
+ // Spacing
+ 'p-1'
+ ]
+ },
+ weekLabelContainer: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-center',
+ 'mx-auto',
+
+ // Shape & Size
+ 'w-8 h-8',
+ 'rounded-full',
+ 'border-transparent border',
+ 'leading-[normal]',
+
+ // Colors
+ 'opacity-60 cursor-default'
+ ]
+ },
+ dayView: 'w-full',
+ day: ({ context }) => ({
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-center',
+ 'mx-auto',
+
+ // Shape & Size
+ 'w-8 h-8',
+ 'rounded-full',
+ 'border-transparent border',
+ 'leading-[normal]',
+
+ // Colors
+ {
+ 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70': context.date.today && !context.selected && !context.disabled,
+ 'bg-transparent text-surface-600 dark:text-white/70': !context.selected && !context.disabled && !context.date.today,
+ 'bg-highlight': context.selected && !context.disabled
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+ {
+ 'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled
+ },
+ {
+ 'opacity-60 cursor-default': context.disabled,
+ 'cursor-pointer': !context.disabled
+ }
+ ]
+ }),
+ monthView: {
+ class: [
+ // Spacing
+ 'mt-2'
+ ]
+ },
+ month: ({ context }) => ({
+ class: [
+ // Flexbox and Alignment
+ 'inline-flex items-center justify-center',
+
+ // Size
+ 'w-1/3',
+ 'p-1',
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ {
+ 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+ 'bg-highlight': context.selected && !context.disabled
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
+ },
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }),
+ yearView: {
+ class: [
+ // Spacing
+ 'mt-2'
+ ]
+ },
+ year: ({ context }) => ({
+ class: [
+ // Flexbox and Alignment
+ 'inline-flex items-center justify-center',
+
+ // Size
+ 'w-1/2',
+ 'p-1',
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ {
+ 'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
+ 'bg-highlight': context.selected && !context.disabled
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
+ },
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }),
+ timePicker: {
+ class: [
+ // Flexbox
+ 'flex',
+ 'justify-center items-center',
+
+ // Borders
+ 'border-t-1',
+ 'border-solid border-surface-200',
+
+ // Spacing
+ 'pt-2 mt-2'
+ ]
+ },
+ separatorContainer: {
+ class: [
+ // Flexbox and Alignment
+ 'flex',
+ 'items-center',
+ 'flex-col',
+
+ // Spacing
+ 'px-2'
+ ]
+ },
+ separator: {
+ class: [
+ // Text
+ 'text-xl'
+ ]
+ },
+ hourPicker: {
+ class: [
+ // Flexbox and Alignment
+ 'flex',
+ 'items-center',
+ 'flex-col',
+
+ // Spacing
+ 'px-2'
+ ]
+ },
+ minutePicker: {
+ class: [
+ // Flexbox and Alignment
+ 'flex',
+ 'items-center',
+ 'flex-col',
+
+ // Spacing
+ 'px-2'
+ ]
+ },
+ secondPicker: {
+ class: [
+ // Flexbox and Alignment
+ 'flex',
+ 'items-center',
+ 'flex-col',
+
+ // Spacing
+ 'px-2'
+ ]
+ },
+ ampmPicker: {
+ class: [
+ // Flexbox and Alignment
+ 'flex',
+ 'items-center',
+ 'flex-col',
+
+ // Spacing
+ 'px-2'
+ ]
+ },
+ calendarContainer: 'flex',
+ calendar: 'flex-auto border-l first:border-l-0 border-surface-200',
+ buttonbar: {
+ class: [
+ // Flexbox
+ 'flex justify-between items-center',
+
+ // Spacing
+ 'pt-2',
+
+ // Shape
+ 'border-t border-surface-200 dark:border-surface-700'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/deferred/index.js b/src/presets/aura/deferred/index.js
new file mode 100644
index 0000000..2064371
--- /dev/null
+++ b/src/presets/aura/deferred/index.js
@@ -0,0 +1,3 @@
+export default {
+ root: {}
+};
diff --git a/src/presets/aura/dialog/index.js b/src/presets/aura/dialog/index.js
new file mode 100644
index 0000000..93f6ee8
--- /dev/null
+++ b/src/presets/aura/dialog/index.js
@@ -0,0 +1,152 @@
+export default {
+ root: ({ state }) => ({
+ class: [
+ // Shape
+ 'rounded-lg',
+ 'shadow-lg',
+ 'border-0',
+
+ // Size
+ 'max-h-[90vh]',
+ 'm-0',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ '[&:last-child]:border-b',
+ 'border-surface-200 dark:border-surface-700',
+
+ // Transitions
+ 'transform',
+ 'scale-100',
+
+ // Maximized State
+ {
+ 'transition-none': state.maximized,
+ 'transform-none': state.maximized,
+ '!w-screen': state.maximized,
+ '!h-screen': state.maximized,
+ '!max-h-full': state.maximized,
+ '!top-0': state.maximized,
+ '!left-0': state.maximized
+ }
+ ]
+ }),
+ header: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-between',
+ 'shrink-0',
+
+ // Spacing
+ 'p-6',
+
+ // Shape
+ 'rounded-tl-lg',
+ 'rounded-tr-lg',
+
+ // Colors
+ 'text-surface-700 dark:text-surface-0/80',
+ 'border border-b-0',
+ 'border-surface-200 dark:border-surface-700'
+ ]
+ },
+ title: {
+ class: ['font-semibold text-xl leading-[normal]']
+ },
+ headerActions: {
+ class: ['flex items-center']
+ },
+ content: ({ state, instance }) => ({
+ class: [
+ // Spacing
+ 'px-6',
+ 'pb-6',
+ 'pt-0',
+
+ // Shape
+ {
+ grow: state.maximized,
+ 'rounded-bl-lg': !instance.$slots.footer,
+ 'rounded-br-lg': !instance.$slots.footer
+ },
+
+ // Colors
+ 'text-surface-700 dark:text-surface-0/80',
+ 'border border-t-0 border-b-0',
+ 'border-surface-200 dark:border-surface-700',
+
+ // Misc
+ 'overflow-y-auto'
+ ]
+ }),
+ footer: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-end',
+ 'shrink-0',
+ 'text-right',
+ 'gap-2',
+
+ // Spacing
+ 'px-6',
+ 'pb-6',
+
+ // Shape
+ 'border-t-0',
+ 'rounded-b-lg',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80',
+ 'border border-t-0 border-b-0',
+ 'border-surface-200 dark:border-surface-700'
+ ]
+ },
+ mask: ({ props }) => ({
+ class: [
+ // Transitions
+ 'transition-all',
+ 'duration-300',
+ { 'p-5': !props.position == 'full' },
+
+ // Background and Effects
+ { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
+ ]
+ }),
+ transition: ({ props }) => {
+ return props.position === 'top'
+ ? {
+ enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+ enterActiveClass: 'transition-all duration-200 ease-out',
+ leaveActiveClass: 'transition-all duration-200 ease-out',
+ leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
+ }
+ : props.position === 'bottom'
+ ? {
+ enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+ enterActiveClass: 'transition-all duration-200 ease-out',
+ leaveActiveClass: 'transition-all duration-200 ease-out',
+ leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
+ }
+ : props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
+ ? {
+ enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+ enterActiveClass: 'transition-all duration-200 ease-out',
+ leaveActiveClass: 'transition-all duration-200 ease-out',
+ leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active'
+ }
+ : props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
+ ? {
+ enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+ enterActiveClass: 'transition-all duration-200 ease-out',
+ leaveActiveClass: 'transition-all duration-200 ease-out',
+ leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
+ }
+ : {
+ enterFromClass: 'opacity-0 scale-75 mask-active',
+ enterActiveClass: 'transition-all duration-200 ease-out',
+ leaveActiveClass: 'transition-all duration-200 ease-out',
+ leaveToClass: 'opacity-0 scale-75 mask-active'
+ };
+ }
+};
diff --git a/src/presets/aura/divider/index.js b/src/presets/aura/divider/index.js
new file mode 100644
index 0000000..b440697
--- /dev/null
+++ b/src/presets/aura/divider/index.js
@@ -0,0 +1,67 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Flex and Position
+ 'flex relative',
+ { 'justify-center': props.layout == 'vertical' },
+ { 'items-center': props.layout == 'vertical' },
+ {
+ 'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+ 'justify-center': props?.align == 'center' && props.layout == 'horizontal',
+ 'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+ 'items-center': props?.align == 'top' && props.layout == 'vertical',
+ 'items-start': props?.align == 'center' && props.layout == 'vertical',
+ 'items-end': props?.align == 'bottom' && props.layout == 'vertical'
+ },
+
+ // Spacing
+ {
+ 'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+ 'mx-4 md:mx-5 py-5': props.layout == 'vertical'
+ },
+
+ // Size
+ {
+ 'w-full': props.layout == 'horizontal',
+ 'min-h-full': props.layout == 'vertical'
+ },
+
+ // Before: Line
+ 'before:block',
+
+ // Position
+ {
+ 'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
+ 'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
+ },
+
+ // Size
+ {
+ 'before:w-full': props.layout == 'horizontal',
+ 'before:min-h-full': props.layout == 'vertical'
+ },
+
+ // Shape
+ {
+ 'before:border-solid': props.type == 'solid',
+ 'before:border-dotted': props.type == 'dotted',
+ 'before:border-dashed': props.type == 'dashed'
+ },
+
+ // Color
+ {
+ 'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
+ 'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
+ }
+ ]
+ }),
+ content: {
+ class: [
+ // Space and Position
+ 'px-1 z-10',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-800'
+ ]
+ }
+};
diff --git a/src/presets/aura/dock/index.js b/src/presets/aura/dock/index.js
new file mode 100644
index 0000000..b9332a8
--- /dev/null
+++ b/src/presets/aura/dock/index.js
@@ -0,0 +1,86 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Positioning
+ 'absolute z-1',
+ {
+ 'left-0 bottom-0 w-full': props.position == 'bottom',
+ 'left-0 top-0 w-full': props.position == 'top',
+ 'left-0 top-0 h-full': props.position == 'left',
+ 'right-0 top-0 h-full': props.position == 'right'
+ },
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Interactivity
+ 'pointer-events-none'
+ ]
+ }),
+ listContainer: {
+ class: [
+ // Flexbox
+ 'flex',
+
+ // Shape & Border
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
+ 'backdrop-blur-sm',
+
+ // Spacing
+ 'p-2',
+
+ // Misc
+ 'pointer-events-auto'
+ ]
+ },
+ list: ({ props }) => ({
+ class: [
+ // Flexbox & Alignment
+ 'flex items-center justify-center',
+ {
+ 'flex-col': props.position == 'left' || props.position == 'right'
+ },
+
+ // List Style
+ 'm-0 p-0 list-none',
+
+ // Shape
+ 'outline-none'
+ ]
+ }),
+ item: ({ props, context, instance }) => ({
+ class: [
+ // Spacing & Shape
+ 'p-2 rounded-md',
+
+ // Positioning & Hover States
+ {
+ 'origin-bottom': props.position == 'bottom',
+ 'origin-top': props.position == 'top',
+ 'origin-left': props.position == 'left',
+ 'origin-right': props.position == 'right'
+ },
+
+ // Transitions & Transform
+ 'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
+ ]
+ }),
+ itemLink: {
+ class: [
+ // Flexbox & Alignment
+ 'flex flex-col items-center justify-center',
+
+ // Position
+ 'relative',
+
+ // Size
+ 'w-16 h-16',
+
+ // Misc
+ 'cursor-default overflow-hidden'
+ ]
+ }
+};
diff --git a/src/presets/aura/drawer/index.js b/src/presets/aura/drawer/index.js
new file mode 100644
index 0000000..de985f1
--- /dev/null
+++ b/src/presets/aura/drawer/index.js
@@ -0,0 +1,149 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex flex-col',
+
+ // Position
+ 'relative',
+ { '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
+
+ // Size
+ {
+ 'h-full w-80': props.position == 'left' || props.position == 'right',
+ 'h-auto w-full': props.position == 'top' || props.position == 'bottom'
+ },
+
+ // Shape
+ 'border-0 dark:border',
+ 'shadow-lg',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+ 'dark:border-surface-700',
+
+ // Transitions
+ 'transition-transform',
+ 'duration-300',
+
+ // Misc
+ 'pointer-events-auto'
+ ]
+ }),
+ header: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-between',
+ 'shrink-0',
+
+ // Spacing
+ 'p-[1.125rem]',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80'
+ ]
+ },
+ title: {
+ class: ['font-semibold text-xl']
+ },
+ icons: {
+ class: ['flex items-center']
+ },
+ closeButton: {
+ class: [
+ 'relative',
+
+ // Flexbox and Alignment
+ 'flex items-center justify-center',
+
+ // Size and Spacing
+ 'mr-2',
+ 'last:mr-0',
+ 'w-7 h-7',
+
+ // Shape
+ 'border-0',
+ 'rounded-full',
+
+ // Colors
+ 'text-surface-500',
+ 'bg-transparent',
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // States
+ 'hover:text-surface-700 dark:hover:text-white/80',
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1',
+ 'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Misc
+ 'overflow-hidden'
+ ]
+ },
+ closeButtonIcon: {
+ class: [
+ // Display
+ 'inline-block',
+
+ // Size
+ 'w-4',
+ 'h-4'
+ ]
+ },
+ content: {
+ class: [
+ // Spacing and Size
+ 'p-[1.125rem]',
+ 'pt-0',
+ 'h-full',
+ 'w-full',
+
+ // Growth and Overflow
+ 'grow',
+ 'overflow-y-auto'
+ ]
+ },
+ mask: ({ props }) => ({
+ class: [
+ // Transitions
+ 'transition-all',
+ 'duration-300',
+ { 'p-5': !props.position == 'full' },
+
+ // Background and Effects
+ { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
+ ]
+ }),
+ transition: ({ props }) => {
+ return props.position === 'top'
+ ? {
+ enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+ leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
+ }
+ : props.position === 'bottom'
+ ? {
+ enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+ leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
+ }
+ : props.position === 'left'
+ ? {
+ enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+ leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
+ }
+ : props.position === 'right'
+ ? {
+ enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+ leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
+ }
+ : {
+ enterFromClass: 'opacity-0 mask-active',
+ enterActiveClass: 'transition-opacity duration-400 ease-in',
+ leaveActiveClass: 'transition-opacity duration-400 ease-in',
+ leaveToClass: 'opacity-0 mask-active'
+ };
+ }
+};
diff --git a/src/presets/aura/fieldset/index.js b/src/presets/aura/fieldset/index.js
new file mode 100644
index 0000000..bfc980c
--- /dev/null
+++ b/src/presets/aura/fieldset/index.js
@@ -0,0 +1,81 @@
+export default {
+ root: {
+ class: [
+ // Spacing
+ 'p-[1.125rem] pt-0',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'border border-surface-200 dark:border-surface-700',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80'
+ ]
+ },
+ legend: ({ props }) => ({
+ class: [
+ // Font
+ 'font-semibold',
+ 'leading-none',
+
+ //Spacing
+ 'p-0 mb-[0.375rem]',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'text-surface-700 dark:text-surface-0/80',
+ 'bg-surface-0 dark:bg-surface-900',
+
+ // Transition
+ 'transition-none',
+
+ // States
+ { 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable }
+ ]
+ }),
+ toggleButton: ({ props }) => ({
+ class: [
+ // Alignments
+ 'flex items-center justify-center',
+ 'relative',
+
+ //Spacing
+ { 'py-2 px-3': props.toggleable },
+
+ // Shape
+ { 'rounded-md': props.toggleable },
+
+ // Color
+ { 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
+
+ // States
+ { 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
+ { 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300': props.toggleable },
+
+ // Misc
+ {
+ 'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
+ }
+ ]
+ }),
+ toggleIcon: {
+ class: 'mr-2 inline-block'
+ },
+ legendLabel: ({ props }) => ({
+ class: ['flex items-center justify-center leading-none', { 'py-2 px-3': !props.toggleable }]
+ }),
+ content: {
+ class: 'p-0'
+ },
+ transition: {
+ enterFromClass: 'max-h-0',
+ enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+ enterToClass: 'max-h-[1000px]',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+ leaveToClass: 'max-h-0'
+ }
+};
diff --git a/src/presets/aura/fileupload/index.js b/src/presets/aura/fileupload/index.js
new file mode 100644
index 0000000..4eff7a9
--- /dev/null
+++ b/src/presets/aura/fileupload/index.js
@@ -0,0 +1,95 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ {
+ 'flex flex-wrap items-center justify-center gap-2': props.mode === 'basic'
+ }
+ ]
+ }),
+ input: {
+ class: 'hidden'
+ },
+ header: {
+ class: [
+ // Flexbox
+ 'flex',
+ 'flex-wrap',
+
+ // Colors
+ 'bg-surface-0',
+ 'dark:bg-surface-900',
+ 'text-surface-700',
+ 'dark:text-white/80',
+
+ // Spacing
+ 'p-[1.125rem]',
+ 'gap-2',
+
+ // Borders
+ 'border',
+ 'border-solid',
+ 'border-surface-200',
+ 'dark:border-surface-700',
+ 'border-b-0',
+
+ // Shape
+ 'rounded-tr-lg',
+ 'rounded-tl-lg'
+ ]
+ },
+ content: {
+ class: [
+ // Position
+ 'relative',
+
+ // Colors
+ 'bg-surface-0',
+ 'dark:bg-surface-900',
+ 'text-surface-700',
+ 'dark:text-white/80',
+
+ // Spacing
+ 'p-[1.125rem]',
+
+ // Borders
+ 'border border-t-0',
+ 'border-surface-200',
+ 'dark:border-surface-700',
+
+ // Shape
+ 'rounded-b-lg',
+
+ //ProgressBar
+ '[&>[data-pc-name=pcprogressbar]]:absolute',
+ '[&>[data-pc-name=pcprogressbar]]:w-full',
+ '[&>[data-pc-name=pcprogressbar]]:top-0',
+ '[&>[data-pc-name=pcprogressbar]]:left-0',
+ '[&>[data-pc-name=pcprogressbar]]:h-1'
+ ]
+ },
+ file: {
+ class: [
+ // Flexbox
+ 'flex',
+ 'items-center',
+ 'flex-wrap',
+
+ // Spacing
+ 'p-4',
+ 'mb-2',
+ 'last:mb-0',
+
+ // Borders
+ 'border',
+ 'border-surface-200',
+ 'dark:border-surface-700',
+ 'gap-2',
+
+ // Shape
+ 'rounded'
+ ]
+ },
+ fileThumbnail: 'shrink-0',
+ fileName: 'mb-2 break-all',
+ fileSize: 'mr-2'
+};
diff --git a/src/presets/aura/floatlabel/index.js b/src/presets/aura/floatlabel/index.js
new file mode 100644
index 0000000..557808f
--- /dev/null
+++ b/src/presets/aura/floatlabel/index.js
@@ -0,0 +1,26 @@
+export default {
+ root: {
+ class: [
+ 'block relative',
+
+ // Base Label Appearance
+ '[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+ '[&>*:last-child]:absolute',
+ '[&>*:last-child]:top-1/2',
+ '[&>*:last-child]:-translate-y-1/2',
+ '[&>*:last-child]:left-3',
+ '[&>*:last-child]:pointer-events-none',
+ '[&>*:last-child]:transition-all',
+ '[&>*:last-child]:duration-200',
+ '[&>*:last-child]:ease',
+
+ // Focus Label Appearance
+ '[&>*:last-child]:has-[:focus]:-top-3',
+ '[&>*:last-child]:has-[:focus]:text-sm',
+
+ // Filled Input Label Appearance
+ '[&>*:last-child]:has-[.filled]:-top-3',
+ '[&>*:last-child]:has-[.filled]:text-sm'
+ ]
+ }
+};
diff --git a/src/presets/aura/galleria/index.js b/src/presets/aura/galleria/index.js
new file mode 100644
index 0000000..41dc126
--- /dev/null
+++ b/src/presets/aura/galleria/index.js
@@ -0,0 +1,307 @@
+export default {
+ content: ({ parent, props }) => ({
+ class: [
+ 'flex',
+ {
+ 'flex-col': props.fullScreen
+ },
+ {
+ 'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+ 'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+ }
+ ]
+ }),
+ itemsContainer: ({ parent, props }) => ({
+ class: [
+ 'group',
+ 'flex relative',
+ {
+ 'grow shrink w-0 justify-center': props.fullScreen
+ },
+ {
+ 'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
+ 'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
+ },
+ {
+ 'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
+ 'flex-row': parent.props.thumbnailsPosition === 'right'
+ }
+ ]
+ }),
+ items: ({ parent }) => ({
+ class: [
+ 'flex h-full relative',
+ {
+ 'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
+ 'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
+ }
+ ]
+ }),
+ item: {
+ class: [
+ // Flex
+ 'flex justify-center items-center h-full w-full',
+
+ // Sizing
+ 'h-full w-full'
+ ]
+ },
+ thumbnails: ({ parent }) => ({
+ class: [
+ // Flex
+ 'flex flex-col shrink-0',
+
+ {
+ 'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
+ },
+
+ // Misc
+ 'overflow-auto'
+ ]
+ }),
+ thumbnailContent: ({ parent }) => ({
+ class: [
+ // Flex
+ 'flex',
+
+ // Spacing
+ 'py-4 px-1',
+
+ // Colors
+ 'bg-black/90',
+
+ {
+ 'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+ 'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+ }
+ ]
+ }),
+ thumbnailPrevButton: {
+ class: [
+ // Positioning
+ 'self-center relative',
+
+ // Display & Flexbox
+ 'flex shrink-0 justify-center items-center overflow-hidden',
+
+ // Spacing
+ 'm-2',
+
+ // Appearance
+ 'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+ // Hover Effects
+ 'hover:bg-surface-0/10 hover:text-white',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ },
+ thumbnailsViewport: {
+ class: 'overflow-hidden w-full'
+ },
+ thumbnailItems: ({ parent }) => ({
+ class: [
+ 'flex',
+ {
+ 'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+ }
+ ]
+ }),
+ thumbnailItem: ({ parent }) => ({
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+ 'grow shrink-0',
+
+ // Sizing
+ {
+ 'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
+ },
+
+ // Misc
+ 'overflow-auto',
+ 'cursor-pointer',
+ 'opacity-50',
+
+ // States
+ '[&[data-p-active="true"]]:opacity-100',
+ 'hover:opacity-100',
+
+ // Transitions
+ 'transition-opacity duration-300'
+ ]
+ }),
+ thumbnailNextButton: {
+ class: [
+ // Positioning
+ 'self-center relative',
+
+ // Display & Flexbox
+ 'flex shrink-0 justify-center items-center overflow-hidden',
+
+ // Spacing
+ 'm-2',
+
+ // Appearance
+ 'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+ // Hover Effects
+ 'hover:bg-surface-0/10 hover:text-white',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ },
+ indicatorList: ({ parent }) => ({
+ class: [
+ // flex
+ 'flex items-center justify-center',
+
+ // Spacing
+ 'p-4',
+
+ // Indicators Position
+ {
+ 'order-2': parent.props.indicatorsPosition == 'bottom',
+ 'order-1': parent.props.indicatorsPosition == 'top',
+ 'order-1 flex-col': parent.props.indicatorsPosition == 'left',
+ 'flex-col order-2': parent.props.indicatorsPosition == 'right'
+ },
+ {
+ 'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
+ },
+
+ {
+ 'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
+ 'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
+ 'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
+ 'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
+ }
+ ]
+ }),
+ indicator: ({ parent }) => ({
+ class: [
+ {
+ 'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
+ 'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
+ }
+ ]
+ }),
+ indicatorButton: ({ context }) => ({
+ class: [
+ // Size
+ 'w-4 h-4',
+
+ // Appearance
+ 'rounded-full transition duration-200',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Conditional Appearance: Not Highlighted
+ { 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
+
+ // Conditional Appearance: Highlighted
+ { 'bg-primary hover:bg-primary-emphasis': context.highlighted }
+ ]
+ }),
+ mask: {
+ class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
+ },
+ closeButton: {
+ class: [
+ // Positioning
+ '!absolute top-0 right-0',
+
+ // Display & Flexbox
+ 'flex justify-center items-center overflow-hidden',
+
+ // Spacing
+ 'm-2',
+
+ // Appearance
+ 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+
+ // Hover Effect
+ 'hover:text-white hover:bg-surface-0/10',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ },
+ closeIcon: {
+ class: 'w-6 h-6'
+ },
+ prevButton: ({ parent }) => ({
+ class: [
+ // Display & Flexbox
+ 'inline-flex justify-center items-center overflow-hidden',
+
+ // Appearance
+ 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+ {
+ 'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+ },
+
+ // Spacing
+ 'mx-2',
+
+ // Positioning
+ 'top-1/2 mt-[-0.5rem] left-0',
+ {
+ '!absolute': !parent.state.containerVisible && parent.props.showItemNavigators,
+ '!fixed': parent.state.containerVisible
+ },
+
+ // Hover Effect
+ 'hover:bg-surface-0/10 hover:text-white',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ }),
+ nextButton: ({ parent }) => ({
+ class: [
+ // Display & Flexbox
+ 'inline-flex justify-center items-center overflow-hidden',
+
+ // Appearance
+ 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+ {
+ 'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+ },
+
+ // Spacing
+ 'mx-2',
+
+ // Positioning
+ 'top-1/2 mt-[-0.5rem] right-0',
+ {
+ '!absolute': !parent.state.containerVisible && parent.props.showItemNavigators,
+ '!fixed': parent.state.containerVisible
+ },
+
+ // Hover Effect
+ 'hover:bg-surface-0/10 hover:text-white',
+
+ // Focus Effects
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
+ ]
+ }),
+ caption: {
+ class: [
+ // Positioning
+ 'absolute bottom-0 left-0 w-full',
+
+ // Appearance
+ 'bg-black/50 text-white p-4'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-75',
+ enterActiveClass: 'transition-all duration-150 ease-in-out',
+ leaveActiveClass: 'transition-all duration-150 ease-in',
+ leaveToClass: 'opacity-0 scale-75'
+ }
+};
diff --git a/src/presets/aura/global.js b/src/presets/aura/global.js
new file mode 100644
index 0000000..42552db
--- /dev/null
+++ b/src/presets/aura/global.js
@@ -0,0 +1,90 @@
+export default {
+ css: `
+ *[data-pd-ripple="true"]{
+ overflow: hidden;
+ position: relative;
+ }
+ span[data-p-ink-active="true"]{
+ animation: ripple 0.4s linear;
+ }
+ @keyframes ripple {
+ 100% {
+ opacity: 0;
+ transform: scale(2.5);
+ }
+ }
+
+ .progress-spinner-circle {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: 0;
+ animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+ stroke-linecap: round;
+ }
+
+ @keyframes p-progress-spinner-dash{
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -35px;
+ }
+ 100% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -124px;
+ }
+ }
+ @keyframes p-progress-spinner-color {
+ 100%, 0% {
+ stroke: #ff5757;
+ }
+ 40% {
+ stroke: #696cff;
+ }
+ 66% {
+ stroke: #1ea97c;
+ }
+ 80%, 90% {
+ stroke: #cc8925;
+ }
+ }
+
+ .progressbar-value-animate::after {
+ will-change: left, right;
+ animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+ }
+ .progressbar-value-animate::before {
+ will-change: left, right;
+ animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+ }
+ @keyframes p-progressbar-indeterminate-anim {
+ 0% {
+ left: -35%;
+ right: 100%;
+ }
+ 60% {
+ left: 100%;
+ right: -90%;
+ }
+ 100% {
+ left: 100%;
+ right: -90%;
+ }
+ }
+
+ .p-fadein {
+ animation: p-fadein 250ms linear;
+ }
+
+ @keyframes p-fadein {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+`
+};
diff --git a/src/presets/aura/iconfield/index.js b/src/presets/aura/iconfield/index.js
new file mode 100644
index 0000000..28e6ae5
--- /dev/null
+++ b/src/presets/aura/iconfield/index.js
@@ -0,0 +1,27 @@
+export default {
+ root: {
+ class: [
+ 'relative',
+
+ '[&>[data-pc-name=inputicon]]:absolute',
+ '[&>[data-pc-name=inputicon]]:top-1/2',
+ '[&>[data-pc-name=inputicon]]:-mt-2',
+ '[&>[data-pc-name=inputicon]]:text-surface-900/60 dark:[&>[data-pc-name=inputicon]]:text-white/60',
+
+ '[&>[data-pc-name=inputicon]:first-child]:left-3',
+ '[&>[data-pc-name=inputicon]:last-child]:right-3',
+
+ '[&>[data-pc-name=inputtext]:first-child]:pr-10',
+ '[&>[data-pc-name=inputtext]:last-child]:pl-10',
+
+ // filter
+ '[&>[data-pc-extend=inputicon]]:absolute',
+ '[&>[data-pc-extend=inputicon]]:top-1/2',
+ '[&>[data-pc-extend=inputicon]]:-mt-2',
+ '[&>[data-pc-extend=inputicon]]:text-surface-900/60 dark:[&>[data-pc-extend=inputicon]]:text-white/60',
+
+ '[&>[data-pc-extend=inputicon]:first-child]:left-3',
+ '[&>[data-pc-extend=inputicon]:last-child]:right-3'
+ ]
+ }
+};
diff --git a/src/presets/aura/image/index.js b/src/presets/aura/image/index.js
new file mode 100644
index 0000000..9355b8e
--- /dev/null
+++ b/src/presets/aura/image/index.js
@@ -0,0 +1,206 @@
+export default {
+ root: {
+ class: 'relative inline-block'
+ },
+ previewMask: {
+ class: [
+ // Flexbox & Alignment
+ 'flex items-center justify-center',
+
+ // Positioning
+ 'absolute',
+
+ // Shape
+ 'inset-0 opacity-0 transition-opacity duration-300',
+
+ // Color
+ 'bg-transparent text-surface-100',
+
+ // States
+ 'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
+ ]
+ },
+ mask: {
+ class: [
+ // Flexbox & Alignment
+ 'flex items-center justify-center',
+
+ // Positioning
+ 'fixed top-0 left-0',
+
+ // Sizing
+ 'w-full h-full',
+
+ // Color
+ 'bg-black/90'
+ ]
+ },
+ toolbar: {
+ class: [
+ // Flexbox
+ 'flex',
+
+ // Positioning
+ 'absolute top-0 right-0',
+
+ // Spacing
+ 'p-4'
+ ]
+ },
+ rotateRightButton: {
+ class: [
+ 'z-20',
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-12 h-12',
+
+ // Spacing
+ 'mr-2',
+
+ // Shape
+ 'rounded-full',
+
+ // Color
+ 'text-white bg-transparent',
+
+ // States
+ 'hover:text-white hover:bg-surface-0/10',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200 ease-in-out'
+ ]
+ },
+ rotateRightIcon: {
+ class: 'w-6 h-6'
+ },
+ rotateLeftButton: {
+ class: [
+ 'z-20',
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-12 h-12',
+
+ // Spacing
+ 'mr-2',
+
+ // Shape
+ 'rounded-full',
+
+ // Color
+ 'text-white bg-transparent',
+
+ // States
+ 'hover:text-white hover:bg-surface-0/10',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200 ease-in-out'
+ ]
+ },
+ rotateLeftIcon: {
+ class: 'w-6 h-6'
+ },
+ zoomOutButton: {
+ class: [
+ 'z-20',
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-12 h-12',
+
+ // Spacing
+ 'mr-2',
+
+ // Shape
+ 'rounded-full',
+
+ // Color
+ 'text-white bg-transparent',
+
+ // States
+ 'hover:text-white hover:bg-surface-0/10',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200 ease-in-out'
+ ]
+ },
+ zoomOutIcon: {
+ class: 'w-6 h-6'
+ },
+ zoomInButton: {
+ class: [
+ 'z-20',
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-12 h-12',
+
+ // Spacing
+ 'mr-2',
+
+ // Shape
+ 'rounded-full',
+
+ // Color
+ 'text-white bg-transparent',
+
+ // States
+ 'hover:text-white hover:bg-surface-0/10',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200 ease-in-out'
+ ]
+ },
+ zoomInIcon: {
+ class: 'w-6 h-6'
+ },
+ closeButton: {
+ class: [
+ 'z-20',
+
+ // Flexbox & Alignment
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-12 h-12',
+
+ // Spacing
+ 'mr-2',
+
+ // Shape
+ 'rounded-full',
+
+ // Color
+ 'text-white bg-transparent',
+
+ // States
+ 'hover:text-white hover:bg-surface-0/10',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200 ease-in-out'
+ ]
+ },
+ closeIcon: {
+ class: 'w-6 h-6'
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-75',
+ enterActiveClass: 'transition-all duration-150 ease-in-out',
+ leaveActiveClass: 'transition-all duration-150 ease-in',
+ leaveToClass: 'opacity-0 scale-75'
+ }
+};
diff --git a/src/presets/aura/index.js b/src/presets/aura/index.js
new file mode 100644
index 0000000..b7e2ac0
--- /dev/null
+++ b/src/presets/aura/index.js
@@ -0,0 +1,234 @@
+import accordion from './accordion';
+import accordioncontent from './accordioncontent';
+import accordionheader from './accordionheader';
+import accordionpanel from './accordionpanel';
+import autocomplete from './autocomplete';
+import avatar from './avatar';
+import avatargroup from './avatargroup';
+import badge from './badge';
+import badgedirective from './badgedirective';
+import blockui from './blockui';
+import breadcrumb from './breadcrumb';
+import button from './button';
+import buttongroup from './buttongroup';
+import card from './card';
+import carousel from './carousel';
+import cascadeselect from './cascadeselect';
+import checkbox from './checkbox';
+import chip from './chip';
+import colorpicker from './colorpicker';
+import confirmdialog from './confirmdialog';
+import confirmpopup from './confirmpopup';
+import contextmenu from './contextmenu';
+import datatable from './datatable';
+import dataview from './dataview';
+import datepicker from './datepicker';
+import deferred from './deferred';
+import dialog from './dialog';
+import divider from './divider';
+import dock from './dock';
+import drawer from './drawer';
+import fieldset from './fieldset';
+import fileupload from './fileupload';
+import floatlabel from './floatlabel';
+import galleria from './galleria';
+import global from './global';
+import iconfield from './iconfield';
+import image from './image';
+import inplace from './inplace';
+import inputgroup from './inputgroup';
+import inputgroupaddon from './inputgroupaddon';
+import inputmask from './inputmask';
+import inputnumber from './inputnumber';
+import inputotp from './inputotp';
+import inputtext from './inputtext';
+import knob from './knob';
+import listbox from './listbox';
+import megamenu from './megamenu';
+import menu from './menu';
+import menubar from './menubar';
+import message from './message';
+import metergroup from './metergroup';
+import multiselect from './multiselect';
+import orderlist from './orderlist';
+import organizationchart from './organizationchart';
+import overlaybadge from './overlaybadge';
+import paginator from './paginator';
+import panel from './panel';
+import panelmenu from './panelmenu';
+import password from './password';
+import picklist from './picklist';
+import popover from './popover';
+import progressbar from './progressbar';
+import progressspinner from './progressspinner';
+import radiobutton from './radiobutton';
+import rating from './rating';
+import ripple from './ripple';
+import scrollpanel from './scrollpanel';
+import scrolltop from './scrolltop';
+import select from './select';
+import selectbutton from './selectbutton';
+import skeleton from './skeleton';
+import slider from './slider';
+import speeddial from './speeddial';
+import splitbutton from './splitbutton';
+import splitter from './splitter';
+import splitterpanel from './splitterpanel';
+import step from './step';
+import stepitem from './stepitem';
+import steplist from './steplist';
+import steppanels from './steppanels';
+import stepper from './stepper';
+import steps from './steps';
+import tab from './tab';
+import tablist from './tablist';
+import tabmenu from './tabmenu';
+import tabpanel from './tabpanel';
+import tabpanels from './tabpanels';
+import tabs from './tabs';
+import tabview from './tabview';
+import tag from './tag';
+import terminal from './terminal';
+import textarea from './textarea';
+import tieredmenu from './tieredmenu';
+import timeline from './timeline';
+import toast from './toast';
+import togglebutton from './togglebutton';
+import toggleswitch from './toggleswitch';
+import toolbar from './toolbar';
+import tooltip from './tooltip';
+import tree from './tree';
+import treeselect from './treeselect';
+import treetable from './treetable';
+
+export default {
+ global,
+ directives: {
+ badge: badgedirective,
+ ripple,
+ tooltip
+ },
+
+ //forms
+ autocomplete,
+ select,
+ dropdown: select,
+ inputnumber,
+ inputtext,
+ datepicker,
+ calendar: datepicker,
+ checkbox,
+ radiobutton,
+ toggleswitch,
+ inputswitch: toggleswitch,
+ selectbutton,
+ slider,
+ rating,
+ multiselect,
+ togglebutton,
+ cascadeselect,
+ listbox,
+ colorpicker,
+ inputgroup,
+ inputgroupaddon,
+ inputmask,
+ knob,
+ treeselect,
+ textarea,
+ password,
+ iconfield,
+ floatlabel,
+ inputotp,
+
+ //buttons
+ button,
+ buttongroup,
+ splitbutton,
+ speeddial,
+
+ //data
+ paginator,
+ datatable,
+ tree,
+ dataview,
+ organizationchart,
+ orderlist,
+ picklist,
+ treetable,
+ timeline,
+
+ //panels
+ accordion,
+ accordionpanel,
+ accordionheader,
+ accordioncontent,
+ panel,
+ fieldset,
+ card,
+ tabview,
+ divider,
+ toolbar,
+ scrollpanel,
+ splitter,
+ splitterpanel,
+ stepper,
+ steplist,
+ step,
+ stepitem,
+ steppanels,
+ deferred,
+ tab,
+ tabs,
+ tablist,
+ tabpanels,
+ tabpanel,
+
+ //file
+ fileupload,
+
+ //menu
+ contextmenu,
+ menu,
+ menubar,
+ steps,
+ tieredmenu,
+ breadcrumb,
+ panelmenu,
+ megamenu,
+ dock,
+ tabmenu,
+
+ //overlays
+ dialog,
+ popover,
+ sidebar: popover,
+ drawer,
+ overlaypanel: drawer,
+ confirmpopup,
+ confirmdialog,
+
+ //messages
+ message,
+ toast,
+
+ //media
+ carousel,
+ galleria,
+ image,
+
+ //misc
+ badge,
+ overlaybadge,
+ avatar,
+ avatargroup,
+ tag,
+ chip,
+ progressbar,
+ skeleton,
+ scrolltop,
+ terminal,
+ blockui,
+ metergroup,
+ inplace,
+ progressspinner
+};
diff --git a/src/presets/aura/inplace/index.js b/src/presets/aura/inplace/index.js
new file mode 100644
index 0000000..691230b
--- /dev/null
+++ b/src/presets/aura/inplace/index.js
@@ -0,0 +1,27 @@
+export default {
+ display: {
+ class: [
+ // Display
+ 'inline',
+
+ // Spacing
+ 'px-3 py-2',
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+
+ // States
+ 'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-white/80',
+
+ // Transitions
+ 'transition',
+ 'duration-200',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }
+};
diff --git a/src/presets/aura/inputgroup/index.js b/src/presets/aura/inputgroup/index.js
new file mode 100644
index 0000000..cce7111
--- /dev/null
+++ b/src/presets/aura/inputgroup/index.js
@@ -0,0 +1,5 @@
+export default {
+ root: {
+ class: ['flex items-stretch', 'w-full']
+ }
+};
diff --git a/src/presets/aura/inputgroupaddon/index.js b/src/presets/aura/inputgroupaddon/index.js
new file mode 100644
index 0000000..888b311
--- /dev/null
+++ b/src/presets/aura/inputgroupaddon/index.js
@@ -0,0 +1,28 @@
+export default {
+ root: {
+ class: [
+ // Flex
+ 'flex items-center justify-center',
+
+ // Shape
+ 'first:rounded-l-md',
+ 'last:rounded-r-md',
+ 'border-y',
+
+ 'last:border-r',
+ 'border-l',
+ 'border-r-0',
+
+ // Space
+ 'p-2',
+
+ // Size
+ 'min-w-[2.5rem]',
+
+ // Color
+ 'bg-transparent dark:bg-surface-900',
+ 'text-surface-800 dark:text-white/80',
+ 'border-surface-300 dark:border-surface-700'
+ ]
+ }
+};
diff --git a/src/presets/aura/inputmask/index.js b/src/presets/aura/inputmask/index.js
new file mode 100644
index 0000000..2e43d34
--- /dev/null
+++ b/src/presets/aura/inputmask/index.js
@@ -0,0 +1,39 @@
+export default {
+ root: ({ context, props, parent }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Colors
+ 'text-surface-800 dark:text-white/80',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ {
+ 'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+ },
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+ // Misc
+ 'rounded-md',
+ 'appearance-none',
+ 'transition-colors duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/inputnumber/index.js b/src/presets/aura/inputnumber/index.js
new file mode 100644
index 0000000..447f88a
--- /dev/null
+++ b/src/presets/aura/inputnumber/index.js
@@ -0,0 +1,172 @@
+export default {
+ root: ({ props, parent }) => ({
+ class: [
+ // Flex
+ 'inline-flex',
+ 'relative',
+ { 'flex-col': props.showButtons && props.buttonLayout === 'vertical' },
+ { 'flex-1 w-[1%]': parent.instance.$name === 'InputGroup' },
+ { 'w-full': props.fluid },
+
+ // Shape
+ { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name === 'InputGroup' && !props.showButtons },
+ { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-700': parent.instance.$name === 'InputGroup' && !props.showButtons },
+ { 'first:ml-0 -ml-px': parent.instance.$name === 'InputGroup' && !props.showButtons },
+
+ //Sizing
+ { '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
+ ]
+ }),
+ pcInput: {
+ root: ({ parent, context }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Display
+ 'flex-auto',
+ { 'w-[1%]': parent.props.fluid },
+
+ //Text
+ { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+ // Spacing
+ 'py-2 px-3',
+ 'm-0',
+
+ // Shape
+ 'rounded-md',
+ { 'rounded-l-none rounded-r-none': parent.props.showButtons && parent.props.buttonLayout === 'horizontal' },
+ { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout === 'vertical' },
+
+ { 'border-0': parent.instance.$parentInstance?.$name === 'InputGroup' && !parent.props.showButtons },
+
+ // Colors
+ 'text-surface-800 dark:text-white/80',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+ // States
+ { 'hover:border-primary': !parent.props.invalid },
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled },
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$parentInstance?.$name === 'FloatLabel' && parent.state.d_modelValue !== null },
+
+ //Position
+ { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout === 'vertical' }
+ ]
+ })
+ },
+ buttonGroup: ({ props }) => ({
+ class: [
+ 'absolute',
+
+ // Flex
+ 'flex',
+ 'flex-col',
+
+ 'top-px right-px',
+
+ { 'h-[calc(100%-2px)]': props.showButtons && props.buttonLayout === 'stacked' }
+ ]
+ }),
+ incrementButton: ({ props }) => ({
+ class: [
+ // Display
+ { 'flex flex-initial shrink-0': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked' },
+
+ // Alignment
+ 'items-center',
+ 'justify-center',
+ 'text-center align-bottom',
+
+ //Position
+ 'relative',
+ { 'order-3': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'order-1': props.showButtons && props.buttonLayout === 'vertical' },
+
+ //Color
+ 'text-surface-800 dark:text-surface-0',
+ 'bg-transparent',
+ { 'dark:bg-surface-900': props.showButtons && props.buttonLayout !== 'stacked' },
+ 'border border-surface-300 dark:border-surface-700',
+ { 'border-0': props.showButtons && props.buttonLayout === 'stacked' },
+ { 'border-l-0': props.showButtons && props.buttonLayout !== 'stacked' && props.buttonLayout === 'horizontal' },
+ { 'border-b-0': props.showButtons && props.buttonLayout !== 'stacked' && props.buttonLayout === 'vertical' },
+
+ // Sizing
+ 'w-[3rem]',
+ { 'px-3 py-2': props.showButtons && props.buttonLayout !== 'stacked' },
+ { 'p-0': props.showButtons && props.buttonLayout === 'stacked' },
+ { 'w-full': props.showButtons && props.buttonLayout === 'vertical' },
+
+ // Shape
+ 'rounded-md',
+ { 'rounded-md': props.showButtons && props.buttonLayout == 'stacked' },
+ { 'rounded-bl-none rounded-tl-none': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'rounded-bl-none rounded-br-none': props.showButtons && props.buttonLayout === 'vertical' },
+
+ //States
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+ //Misc
+ 'cursor-pointer overflow-hidden select-none'
+ ]
+ }),
+ incrementIcon: 'inline-block w-4 h-4',
+ decrementButton: ({ props }) => ({
+ class: [
+ // Display
+ { 'flex flex-initial shrink-0': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked' },
+
+ // Alignment
+ 'items-center',
+ 'justify-center',
+ 'text-center align-bottom',
+
+ //Position
+ 'relative',
+ { 'order-1': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'order-3': props.showButtons && props.buttonLayout === 'vertical' },
+
+ //Color
+ 'text-surface-800 dark:text-surface-0',
+ 'bg-transparent',
+ { 'dark:bg-surface-900': props.showButtons && props.buttonLayout !== 'stacked' },
+ 'border border-surface-300 dark:border-surface-700',
+ { 'border-0': props.showButtons && props.buttonLayout === 'stacked' },
+ { 'border-r-0': props.showButtons && props.buttonLayout !== 'stacked' && props.buttonLayout === 'horizontal' },
+ { 'border-t-0': props.showButtons && props.buttonLayout !== 'stacked' && props.buttonLayout === 'vertical' },
+
+ // Sizing
+ 'w-[3rem]',
+ { 'px-3 py-2': props.showButtons && props.buttonLayout !== 'stacked' },
+ { 'p-0': props.showButtons && props.buttonLayout === 'stacked' },
+ { 'w-full': props.showButtons && props.buttonLayout === 'vertical' },
+
+ // Shape
+ 'rounded-md',
+ { 'rounded-tr-none rounded-tl-none rounded-bl-none': props.showButtons && props.buttonLayout === 'stacked' },
+ { 'rounded-tr-none rounded-br-none ': props.showButtons && props.buttonLayout === 'horizontal' },
+ { 'rounded-tr-none rounded-tl-none ': props.showButtons && props.buttonLayout === 'vertical' },
+
+ //States
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+
+ //Misc
+ 'cursor-pointer overflow-hidden select-none'
+ ]
+ }),
+ decrementIcon: 'inline-block w-4 h-4'
+};
diff --git a/src/presets/aura/inputotp/index.js b/src/presets/aura/inputotp/index.js
new file mode 100644
index 0000000..b14ce4b
--- /dev/null
+++ b/src/presets/aura/inputotp/index.js
@@ -0,0 +1,10 @@
+export default {
+ root: {
+ class: [
+ // Alignment
+ 'flex items-center',
+ 'gap-2',
+ '[&_[data-pc-name=pcinput]]:w-10'
+ ]
+ }
+};
diff --git a/src/presets/aura/inputswitch/index.js b/src/presets/aura/inputswitch/index.js
new file mode 100644
index 0000000..69255e8
--- /dev/null
+++ b/src/presets/aura/inputswitch/index.js
@@ -0,0 +1,79 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'inline-block relative',
+ 'w-10 h-6',
+ 'rounded-2xl',
+ {
+ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+ }
+ ]
+ }),
+ slider: ({ props }) => ({
+ class: [
+ // Position
+ 'absolute top-0 left-0 right-0 bottom-0',
+ { 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
+
+ // Shape
+ 'rounded-2xl',
+
+ // Before:
+ 'before:absolute before:top-1/2 before:left-1',
+ 'before:-mt-2',
+ 'before:h-4 before:w-4',
+ 'before:rounded-full',
+ 'before:duration-200',
+ 'before:bg-surface-0 before:dark:bg-surface-500',
+
+ // Colors
+ {
+ 'bg-surface-300 dark:bg-surface-800': !(props.modelValue == props.trueValue) && !props.invalid,
+ 'bg-primary': props.modelValue == props.trueValue && !props.invalid,
+ 'before:dark:bg-surface-950': props.modelValue == props.trueValue
+ },
+
+ // Invalid State
+ { 'bg-red-400 dark:bg-red-300': props.invalid },
+ { 'peer-hover:bg-red-500 dark:peer-hover:bg-red-200': props.invalid },
+
+ // States
+ { 'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700': !(props.modelValue == props.trueValue) && !props.disabled && !props.invalid },
+ { 'peer-hover:bg-primary-emphasis': props.modelValue == props.trueValue && !props.disabled && !props.invalid },
+ 'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
+
+ // Transition
+ 'transition-colors duration-200',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }),
+ input: {
+ class: [
+ 'peer',
+
+ // Size
+ 'w-full ',
+ 'h-full',
+
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-10',
+
+ // Spacing
+ 'p-0',
+ 'm-0',
+
+ // Shape
+ 'opacity-0',
+ 'rounded-2xl',
+ 'outline-none',
+
+ // Misc
+ 'appearance-none',
+ 'cursor-pointer'
+ ]
+ }
+};
diff --git a/src/presets/aura/inputtext/index.js b/src/presets/aura/inputtext/index.js
new file mode 100644
index 0000000..1069a15
--- /dev/null
+++ b/src/presets/aura/inputtext/index.js
@@ -0,0 +1,54 @@
+export default {
+ root: ({ props, context, parent }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Flex
+ { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+ // Spacing
+ 'm-0',
+ { 'w-full': props.fluid },
+
+ // Size
+ {
+ 'py-3 px-3.5': props.size == 'large',
+ 'py-1.5 px-2': props.size == 'small',
+ 'py-2 px-3': props.size == null
+ },
+
+ // Shape
+ { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+ { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+ { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+ { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+ // Colors
+ 'text-surface-800 dark:text-white/80',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ {
+ 'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+ },
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+ // Misc
+ 'appearance-none',
+ 'transition-colors duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/knob/index.js b/src/presets/aura/knob/index.js
new file mode 100644
index 0000000..be6d8e5
--- /dev/null
+++ b/src/presets/aura/knob/index.js
@@ -0,0 +1,44 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Misc
+ { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ range: {
+ class: [
+ // Stroke
+ 'stroke-current',
+
+ // Color
+ 'stroke-surface-200 dark:stroke-surface-700',
+
+ // Fill
+ 'fill-none',
+
+ // Transition
+ 'transition duration-100 ease-in'
+ ]
+ },
+ value: {
+ class: [
+ // Animation
+ 'animate-dash-frame',
+
+ // Color
+ 'stroke-primary',
+
+ // Fill
+ 'fill-none'
+ ]
+ },
+ text: {
+ class: [
+ // Text Style
+ 'text-center text-xl',
+
+ // Color
+ 'fill-surface-600 dark:fill-surface-200'
+ ]
+ }
+};
diff --git a/src/presets/aura/listbox/index.js b/src/presets/aura/listbox/index.js
new file mode 100644
index 0000000..063a29b
--- /dev/null
+++ b/src/presets/aura/listbox/index.js
@@ -0,0 +1,107 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'rounded-md',
+
+ // Colors
+ { 'bg-surface-0 dark:bg-surface-900': !props.disabled },
+ 'text-surface-700 dark:text-white/80',
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+ // Disabled State
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled },
+
+ // Invalid State
+ { 'border-red-500 dark:border-red-400': props.invalid }
+ ]
+ }),
+ listContainer: 'overflow-auto',
+ list: {
+ class: 'p-1 list-none m-0 outline-none'
+ },
+ option: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex
+ 'flex items-center',
+
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0 px-3 py-2',
+ 'first:mt-0 mt-[2px]',
+
+ // Shape
+ 'border-0 rounded',
+
+ // Colors
+ {
+ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+ 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+ 'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+ 'bg-highlight': context.selected
+ },
+
+ //States
+ { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+ { 'hover:bg-highlight-emphasis': context.selected },
+ { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+ // Transition
+ 'transition-shadow duration-200',
+
+ // Misc
+ 'cursor-pointer overflow-hidden whitespace-nowrap'
+ ]
+ }),
+ optionGroup: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Colors
+ 'text-surface-400 dark:text-surface-500',
+
+ // Misc
+ 'cursor-auto'
+ ]
+ },
+ optionCheckIcon: 'relative -ms-1.5 me-1.5 text-surface-700 dark:text-white/80 w-4 h-4',
+ emptyMessage: {
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+ 'bg-transparent'
+ ]
+ },
+ header: {
+ class: [
+ // Spacing
+ 'pt-2 px-2 pb-0',
+ 'm-0',
+
+ //Shape
+ 'border-b-0',
+ 'rounded-tl-md',
+ 'rounded-tr-md',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-300 dark:border-surface-700',
+
+ '[&_[data-pc-name=pcfilter]]:w-full'
+ ]
+ }
+};
diff --git a/src/presets/aura/megamenu/index.js b/src/presets/aura/megamenu/index.js
new file mode 100644
index 0000000..70a87a3
--- /dev/null
+++ b/src/presets/aura/megamenu/index.js
@@ -0,0 +1,196 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+
+ // Flexbox
+ 'flex',
+
+ // Shape & Size
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700',
+ { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-1': props.orientation !== 'horizontal' }
+ ]
+ }),
+ rootList: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'sm:flex',
+ 'items-center',
+ 'flex-wrap',
+ 'flex-col sm:flex-row',
+ { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+ // Position
+ 'absolute sm:relative',
+ 'top-full left-0',
+ 'sm:top-auto sm:left-auto',
+
+ // Size
+ 'w-full sm:w-auto',
+
+ // Spacing
+ 'm-0',
+ 'p-1 sm:py-0 sm:p-0',
+ 'list-none',
+
+ // Shape
+ 'shadow-md sm:shadow-none',
+ 'border-0',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
+
+ // Misc
+ 'outline-none'
+ ]
+ }),
+ item: ({ props }) => ({
+ class: [
+ 'sm:relative static my-[2px] [&:first-child]:mt-0',
+ {
+ 'sm:w-auto w-full': props.horizontal,
+ 'w-full': !props.horizontal
+ }
+ ]
+ }),
+ itemContent: ({ context }) => ({
+ class: [
+ 'rounded-[4px]',
+
+ // Colors
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // Hover States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200'
+ ]
+ }),
+ itemLink: {
+ class: [
+ 'relative',
+
+ // Flexbox
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Size
+ 'leading-none',
+
+ // Misc
+ 'select-none',
+ 'cursor-pointer',
+ 'no-underline ',
+ 'overflow-hidden'
+ ]
+ },
+ itemIcon: {
+ class: 'mr-2'
+ },
+ submenuIcon: ({ props }) => ({
+ class: [
+ {
+ 'ml-auto sm:ml-2': props.horizontal,
+ 'ml-auto': !props.horizontal
+ }
+ ]
+ }),
+ overlay: ({ props }) => ({
+ class: [
+ // Size
+ 'w-auto',
+
+ // Spacing
+ 'm-0',
+
+ // Shape
+ 'shadow-none sm:shadow-md',
+
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+
+ // Position
+ 'static sm:absolute',
+ 'z-10',
+ {
+ 'sm:left-full top-0': !props.horizontal
+ }
+ ]
+ }),
+ grid: {
+ class: 'flex flex-wrap sm:flex-nowrap'
+ },
+ column: {
+ class: 'w-full sm:w-1/2'
+ },
+ submenu: {
+ class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]']
+ },
+ submenuLabel: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'py-2 px-3',
+ 'm-0',
+
+ // Color
+ 'text-surface-400 dark:text-surface-500',
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ separator: {
+ class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+ },
+ button: {
+ class: [
+ // Flexbox
+ 'flex sm:hidden',
+ 'items-center justify-center',
+
+ // Size
+ 'w-7',
+ 'h-7',
+
+ // Shape
+ 'rounded-full',
+ // Color
+ 'text-surface-500 dark:text-white/80',
+
+ // States
+ 'hover:text-surface-600 dark:hover:text-white/60',
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0',
+ 'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // Misc
+ 'cursor-pointer',
+ 'no-underline'
+ ]
+ },
+ end: {
+ class: 'ml-auto self-center'
+ }
+};
diff --git a/src/presets/aura/menu/index.js b/src/presets/aura/menu/index.js
new file mode 100644
index 0000000..dee00b4
--- /dev/null
+++ b/src/presets/aura/menu/index.js
@@ -0,0 +1,114 @@
+export default {
+ root: {
+ class: [
+ // Sizing and Shape
+ 'min-w-[12.5rem]',
+ 'rounded-md',
+
+ // Spacing
+ 'p-1',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+ 'border border-surface-200 dark:border-surface-700'
+ ]
+ },
+ list: {
+ class: [
+ // Spacings and Shape
+ 'list-none',
+ 'm-0',
+ 'p-0',
+ 'outline-none'
+ ]
+ },
+ item: {
+ class: 'relative my-[2px] [&:first-child]:mt-0'
+ },
+ itemContent: ({ context }) => ({
+ class: [
+ //Shape
+ 'rounded-[4px]',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // Transitions
+ 'transition-shadow',
+ 'duration-200',
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Disabled
+ { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+ ]
+ }),
+ itemLink: {
+ class: [
+ 'relative',
+ // Flexbox
+
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+
+ // Misc
+ 'no-underline',
+ 'overflow-hidden',
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ itemIcon: {
+ class: [
+ // Spacing
+ 'mr-2',
+
+ // Color
+ 'text-surface-600 dark:text-white/70'
+ ]
+ },
+ itemLabel: {
+ class: ['leading-[normal]']
+ },
+ submenuLabel: {
+ class: [
+ // Font
+ 'font-bold',
+
+ // Spacing
+ 'm-0',
+ 'py-2 px-3',
+
+ // Shape
+ 'rounded-tl-none',
+ 'rounded-tr-none',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-400 dark:text-surface-600'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/menubar/index.js b/src/presets/aura/menubar/index.js
new file mode 100644
index 0000000..0860003
--- /dev/null
+++ b/src/presets/aura/menubar/index.js
@@ -0,0 +1,178 @@
+export default {
+ root: {
+ class: [
+ 'relative',
+
+ // Flexbox
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'p-2',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700'
+ ]
+ },
+ rootList: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'sm:flex',
+ 'items-center',
+ 'flex-wrap',
+ 'flex-col sm:flex-row',
+ { hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+ // Position
+ 'absolute sm:relative',
+ 'top-full left-0',
+ 'sm:top-auto sm:left-auto',
+
+ // Size
+ 'w-full sm:w-auto',
+
+ // Spacing
+ 'm-0',
+ 'p-1 sm:py-0 sm:p-0',
+ 'list-none',
+
+ // Shape
+ 'shadow-md sm:shadow-none',
+ 'border-0',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
+
+ // Misc
+ 'outline-none'
+ ]
+ }),
+ item: {
+ class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0'
+ },
+ itemContent: ({ context }) => ({
+ class: [
+ // Shape
+ 'rounded-[4px]',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200'
+ ]
+ }),
+ itemLink: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flexbox
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Size
+ {
+ 'pl-9 sm:pl-5': context.level === 1,
+ 'pl-14 sm:pl-5': context.level === 2
+ },
+ 'leading-none',
+
+ // Misc
+ 'select-none',
+ 'cursor-pointer',
+ 'no-underline ',
+ 'overflow-hidden'
+ ]
+ }),
+ itemIcon: {
+ class: 'mr-2'
+ },
+ submenuIcon: ({ props }) => ({
+ class: [
+ {
+ 'ml-auto sm:ml-2': props.root,
+ 'ml-auto': !props.root
+ }
+ ]
+ }),
+ submenu: ({ props }) => ({
+ class: [
+ 'flex flex-col',
+ // Size
+ 'rounded-md',
+ 'min-w-[12.5rem]',
+
+ // Spacing
+ 'p-1',
+ 'm-0',
+ 'list-none',
+
+ // Shape
+ 'shadow-none sm:shadow-md',
+ 'border border-surface-200 dark:border-surface-700',
+
+ // Position
+ 'static sm:absolute',
+ 'z-10',
+ { 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ }),
+ separator: {
+ class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
+ },
+ button: {
+ class: [
+ // Flexbox
+ 'flex sm:hidden',
+ 'items-center justify-center',
+
+ // Size
+ 'w-7',
+ 'h-7',
+
+ // Shape
+ 'rounded-full',
+ // Color
+ 'text-surface-500 dark:text-white/80',
+
+ // States
+ 'hover:text-surface-600 dark:hover:text-white/60',
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0',
+ 'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // Misc
+ 'cursor-pointer',
+ 'no-underline'
+ ]
+ },
+ end: {
+ class: 'ml-auto self-center'
+ }
+};
diff --git a/src/presets/aura/message/index.js b/src/presets/aura/message/index.js
new file mode 100644
index 0000000..a898870
--- /dev/null
+++ b/src/presets/aura/message/index.js
@@ -0,0 +1,100 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Spacing and Shape
+ 'rounded-md',
+ 'outline',
+
+ // Colors
+ {
+ 'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+ 'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+ 'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
+ 'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+ 'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+ 'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
+ },
+ {
+ 'outline-blue-200 dark:outline-blue-500/20': props.severity == 'info',
+ 'outline-green-200 dark:outline-green-500/20': props.severity == 'success',
+ 'outline-surface-200 dark:outline-surface-500/20': props.severity == 'secondary',
+ 'outline-orange-200 dark:outline-orange-500/20': props.severity == 'warn',
+ 'outline-red-200 dark:outline-red-500/20': props.severity == 'error',
+ 'outline-surface-950 dark:outline-surface-0': props.severity == 'contrast'
+ },
+ {
+ 'text-blue-700 dark:text-blue-300': props.severity == 'info',
+ 'text-green-700 dark:text-green-300': props.severity == 'success',
+ 'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+ 'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+ 'text-red-700 dark:text-red-300': props.severity == 'error',
+ 'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
+ }
+ ]
+ }),
+ content: {
+ class: [
+ // Flexbox
+ 'flex items-center h-full',
+
+ // Spacing
+ 'py-2 px-3 gap-2'
+ ]
+ },
+ icon: {
+ class: [
+ // Sizing and Spacing
+ 'shrink-0 w-[1.125rem] h-[1.125rem]'
+ ]
+ },
+ text: {
+ class: [
+ // Font and Text
+ 'text-base leading-[normal]',
+ 'font-medium'
+ ]
+ },
+ closeButton: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+
+ // Size
+ 'w-7 h-7',
+
+ // Spacing and Misc
+ 'ml-auto relative',
+
+ // Shape
+ 'rounded-full',
+
+ // Colors
+ 'bg-transparent',
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // States
+ 'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1',
+ {
+ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
+ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
+ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
+ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
+ 'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
+ 'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
+ },
+
+ // Misc
+ 'overflow-hidden'
+ ]
+ }),
+ transition: {
+ enterFromClass: 'opacity-0',
+ enterActiveClass: 'transition-opacity duration-300',
+ leaveFromClass: 'max-h-40',
+ leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+ leaveToClass: 'max-h-0 opacity-0 !m-0'
+ }
+};
diff --git a/src/presets/aura/metergroup/index.js b/src/presets/aura/metergroup/index.js
new file mode 100644
index 0000000..1defe09
--- /dev/null
+++ b/src/presets/aura/metergroup/index.js
@@ -0,0 +1,96 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex gap-4',
+
+ { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
+ ]
+ }),
+ meters: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex',
+
+ { 'flex-col': props.orientation === 'vertical' },
+
+ // Sizing
+ { 'w-2 h-full': props.orientation === 'vertical' },
+ { 'h-2': props.orientation === 'horizontal' },
+
+ // Colors
+ 'bg-gray-200 dark:bg-gray-700',
+
+ // Border Radius
+ 'rounded-lg'
+ ]
+ }),
+ meter: ({ props }) => ({
+ class: [
+ // Shape
+ 'border-0',
+
+ // Rounded Corners - Horizontal
+ {
+ 'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
+ },
+
+ // Rounded Corners - Vertical
+ {
+ 'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
+ },
+
+ // Colors
+ 'bg-primary'
+ ]
+ }),
+ labelList: ({ props }) => ({
+ class: [
+ // Display & Flexbox
+ 'flex flex-wrap',
+
+ { 'gap-4': props.labelOrientation === 'horizontal' },
+
+ { 'gap-2': props.labelOrientation === 'vertical' },
+
+ { 'flex-col': props.labelOrientation === 'vertical' },
+
+ // Conditional Alignment - Horizontal
+ {
+ 'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
+ 'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
+ },
+
+ // Conditional Alignment - Vertical
+ {
+ 'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
+ },
+
+ // List Styling
+ 'm-0 p-0 list-none'
+ ]
+ }),
+ label: {
+ class: [
+ // Flexbox
+ 'inline-flex',
+ 'items-center',
+ 'gap-2'
+ ]
+ },
+ labelMarker: {
+ class: [
+ // Display
+ 'inline-flex',
+
+ // Background Color
+ 'bg-primary',
+
+ // Size
+ 'w-2 h-2',
+
+ // Rounded Shape
+ 'rounded-full'
+ ]
+ }
+};
diff --git a/src/presets/aura/multiselect/index.js b/src/presets/aura/multiselect/index.js
new file mode 100644
index 0000000..ddf3518
--- /dev/null
+++ b/src/presets/aura/multiselect/index.js
@@ -0,0 +1,196 @@
+export default {
+ root: ({ props, state }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Display and Position
+ 'inline-flex',
+ 'relative',
+
+ // Shape
+ 'rounded-md',
+
+ // Color and Background
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // States
+ { 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
+ { 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none',
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+ label: ({ props }) => ({
+ class: [
+ 'text-base leading-2',
+
+ // Spacing
+ {
+ 'py-2 px-3': props.display === 'comma' || (props.display === 'chip' && !props?.modelValue?.length),
+ 'py-1 px-1': props.display === 'chip' && props?.modelValue?.length > 0
+ },
+
+ // Color
+ { 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Misc
+ 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+ ]
+ }),
+ dropdown: {
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+ 'shrink-0',
+
+ // Color and Background
+ 'bg-transparent',
+ 'text-surface-500',
+
+ // Size
+ 'w-12',
+
+ // Shape
+ 'rounded-r-md'
+ ]
+ },
+ overlay: {
+ class: [
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+
+ // Shape
+ 'border border-surface-300 dark:border-surface-700',
+ 'rounded-md',
+ 'shadow-md',
+ 'mt-[2px]'
+ ]
+ },
+ header: {
+ class: [
+ //Flex
+ 'flex items-center justify-between',
+
+ // Spacing
+ 'pt-2 px-4 pb-0 gap-2',
+ 'm-0',
+
+ //Shape
+ 'border-b-0',
+ 'rounded-tl-md',
+ 'rounded-tr-md',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-300 dark:border-surface-700',
+
+ '[&_[data-pc-name=pcfiltercontainer]]:!flex-auto',
+ '[&_[data-pc-name=pcfilter]]:w-full'
+ ]
+ },
+ listContainer: {
+ class: [
+ // Sizing
+ 'max-h-[200px]',
+
+ // Misc
+ 'overflow-auto'
+ ]
+ },
+ list: {
+ class: 'p-1 list-none m-0'
+ },
+ option: ({ context }) => ({
+ class: [
+ 'relative',
+ 'flex items-center',
+
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0 px-3 py-2 gap-2',
+ 'first:mt-0 mt-[2px]',
+
+ // Shape
+ 'border-0 rounded',
+
+ // Colors
+ {
+ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+ 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+ 'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+ 'bg-highlight': context.selected
+ },
+
+ //States
+ { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+ { 'hover:bg-highlight-emphasis': context.selected },
+ { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+ // Transition
+ 'transition-shadow duration-200',
+
+ // Misc
+ 'cursor-pointer overflow-hidden whitespace-nowrap'
+ ]
+ }),
+ optionGroup: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Colors
+ 'text-surface-400 dark:text-surface-500',
+
+ // Misc
+ 'cursor-auto'
+ ]
+ },
+ emptyMessage: {
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+ 'bg-transparent'
+ ]
+ },
+ loadingIcon: {
+ class: 'text-surface-400 dark:text-surface-500 animate-spin'
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/orderlist/index.js b/src/presets/aura/orderlist/index.js
new file mode 100644
index 0000000..a64fcd4
--- /dev/null
+++ b/src/presets/aura/orderlist/index.js
@@ -0,0 +1,25 @@
+export default {
+ root: 'flex',
+ controls: {
+ class: [
+ // Flexbox & Alignment
+ 'flex xl:flex-col justify-center gap-2',
+
+ // Spacing
+ 'p-[1.125rem]'
+ ]
+ },
+ container: {
+ class: [
+ 'flex-auto',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700',
+ 'outline-none'
+ ]
+ }
+};
diff --git a/src/presets/aura/organizationchart/index.js b/src/presets/aura/organizationchart/index.js
new file mode 100644
index 0000000..d08f025
--- /dev/null
+++ b/src/presets/aura/organizationchart/index.js
@@ -0,0 +1,137 @@
+export default {
+ table: {
+ class: [
+ // Spacing & Position
+ 'mx-auto my-0',
+
+ // Table Style
+ 'border-spacing-0 border-separate'
+ ]
+ },
+ cell: {
+ class: [
+ // Alignment
+ 'text-center align-top',
+
+ // Spacing
+ 'py-0 px-3'
+ ]
+ },
+ node: ({ context }) => ({
+ class: [
+ 'relative inline-block',
+
+ // Spacing
+ 'py-3 px-4',
+
+ // Shape
+ 'border',
+ 'rounded-md',
+ 'border-surface-200 dark:border-surface-700',
+ // Color
+ {
+ 'text-surface-600 dark:text-white/80': !context?.selected,
+ 'bg-surface-0 dark:bg-surface-900': !context?.selected,
+ 'bg-highlight': context?.selected
+ },
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-surface-800': context?.selectable && !context?.selected,
+ 'hover:bg-highlight-emphasis': context?.selectable && context?.selected
+ },
+
+ { 'cursor-pointer': context?.selectable }
+ ]
+ }),
+ lineCell: {
+ class: [
+ // Alignment
+ 'text-center align-top',
+
+ // Spacing
+ 'py-0 px-3'
+ ]
+ },
+ connectorDown: {
+ class: [
+ // Spacing
+ 'mx-auto my-0',
+
+ // Size
+ 'w-px h-[20px]',
+
+ // Color
+ 'bg-surface-200 dark:bg-surface-700'
+ ]
+ },
+ connectorLeft: ({ context }) => ({
+ class: [
+ // Alignment
+ 'text-center align-top',
+
+ // Spacing
+ 'py-0 px-3',
+
+ // Shape
+ 'rounded-none border-r',
+ { 'border-t': context.lineTop },
+
+ // Color
+ 'border-surface-200 dark:border-surface-700'
+ ]
+ }),
+ connectorRight: ({ context }) => ({
+ class: [
+ // Alignment
+ 'text-center align-top',
+
+ // Spacing
+ 'py-0 px-3',
+
+ // Shape
+ 'rounded-none',
+
+ // Color
+ { 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
+ ]
+ }),
+ nodeCell: {
+ class: 'text-center align-top py-0 px-3'
+ },
+ nodeToggleButton: {
+ class: [
+ // Position
+ 'absolute bottom-[-0.75rem] left-2/4 -ml-3',
+ 'z-20',
+
+ // Flexbox
+ 'flex items-center justify-center',
+
+ // Size
+ 'w-6 h-6',
+
+ // Shape
+ 'rounded-full',
+ 'border border-surface-200 dark:border-surface-700',
+
+ // Color
+ 'bg-inherit text-inherit',
+
+ // Focus
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Misc
+ 'cursor-pointer no-underline select-none'
+ ]
+ },
+ nodeToggleButtonIcon: {
+ class: [
+ // Position
+ 'static inline-block',
+
+ // Size
+ 'w-4 h-4'
+ ]
+ }
+};
diff --git a/src/presets/aura/overlaybadge/index.js b/src/presets/aura/overlaybadge/index.js
new file mode 100644
index 0000000..7728885
--- /dev/null
+++ b/src/presets/aura/overlaybadge/index.js
@@ -0,0 +1,18 @@
+export default {
+ root: {
+ class: [
+ 'relative',
+ '[&>[data-pc-name=pcbadge]]:absolute',
+ '[&>[data-pc-name=pcbadge]]:top-0',
+ '[&>[data-pc-name=pcbadge]]:right-0',
+ '[&>[data-pc-name=pcbadge]]:translate-x-1/2',
+ '[&>[data-pc-name=pcbadge]]:-translate-y-1/2',
+ '[&>[data-pc-name=pcbadge]]:m-0',
+ '[&>[data-pc-name=pcbadge]]:origin-[100%_0]',
+ '[&>[data-pc-name=pcbadge]]:outline',
+ '[&>[data-pc-name=pcbadge]]:outline-[2px]',
+ '[&>[data-pc-name=pcbadge]]:outline-surface-0',
+ 'dark:[&>[data-pc-name=pcbadge]]:outline-surface-900'
+ ]
+ }
+};
diff --git a/src/presets/aura/paginator/index.js b/src/presets/aura/paginator/index.js
new file mode 100644
index 0000000..040fc14
--- /dev/null
+++ b/src/presets/aura/paginator/index.js
@@ -0,0 +1,175 @@
+export default {
+ root: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center justify-center flex-wrap',
+
+ // Spacing
+ 'px-4 py-2',
+
+ // Shape
+ 'border-0 rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-500 dark:text-white/60'
+ ]
+ },
+ first: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'min-w-[2.5rem] h-10 m-[0.143rem]',
+ 'leading-none',
+
+ // Color
+ 'text-surface-500 dark:text-white/60',
+
+ // State
+ {
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+ },
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'user-none overflow-hidden',
+ { 'cursor-default pointer-events-none opacity-60': context.disabled }
+ ]
+ }),
+ prev: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'min-w-[2.5rem] h-10 m-[0.143rem]',
+ 'leading-none',
+
+ // Color
+ 'text-surface-500 dark:text-white/60',
+
+ // State
+ {
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+ },
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'user-none overflow-hidden',
+ { 'cursor-default pointer-events-none opacity-60': context.disabled }
+ ]
+ }),
+ next: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'min-w-[2.5rem] h-10 m-[0.143rem]',
+ 'leading-none',
+
+ // Color
+ 'text-surface-500 dark:text-white/60',
+
+ // State
+ {
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+ },
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'user-none overflow-hidden',
+ { 'cursor-default pointer-events-none opacity-60': context.disabled }
+ ]
+ }),
+ last: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'min-w-[2.5rem] h-10 m-[0.143rem]',
+ 'leading-none',
+
+ // Color
+ 'text-surface-500 dark:text-white/60',
+
+ // State
+ {
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+ },
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'user-none overflow-hidden',
+ { 'cursor-default pointer-events-none opacity-60': context.disabled }
+ ]
+ }),
+ page: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'min-w-[2.5rem] h-10 m-[0.143rem]',
+ 'leading-none',
+
+ // Color
+ 'text-surface-500 dark:text-white/60',
+
+ // State
+ {
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
+ },
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'user-none overflow-hidden',
+ { 'cursor-default pointer-events-none opacity-60': context.disabled }
+ ]
+ }),
+ contentStart: 'mr-auto',
+ contentEnd: 'ml-auto'
+};
diff --git a/src/presets/aura/panel/index.js b/src/presets/aura/panel/index.js
new file mode 100644
index 0000000..9bd92d2
--- /dev/null
+++ b/src/presets/aura/panel/index.js
@@ -0,0 +1,97 @@
+export default {
+ root: {
+ class: [
+ //Shape
+ 'rounded-md',
+
+ //Colors
+ 'border border-surface-200 dark:border-surface-700',
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ header: ({ props }) => ({
+ class: [
+ // Flex
+ 'flex items-center justify-between',
+
+ // Colors
+ 'text-surface-700 dark:text-surface-0/80',
+ 'bg-transparent',
+
+ //Shape
+ 'rounded-tl-md rounded-tr-md',
+ 'border-0',
+
+ // Conditional Spacing
+ { 'p-[1.125rem]': !props.toggleable, 'py-3 px-[1.125rem]': props.toggleable }
+ ]
+ }),
+ title: {
+ class: 'leading-none font-semibold'
+ },
+ toggler: {
+ class: [
+ // Alignments
+ 'inline-flex items-center justify-center',
+ 'relative',
+
+ // Sized
+ 'w-7 h-7',
+ 'm-0 p-0',
+
+ //Shape
+ 'border-0 rounded-full',
+
+ //Color
+ 'bg-transparent',
+ 'text-surface-600 dark:text-surface-0/80',
+
+ // States
+ 'hover:text-surface-800 dark:hover:text-surface-0',
+ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+ // Transitions
+ 'transition-all duration-200 ease-in-out',
+
+ // Misc
+ 'overflow-hidden no-underline',
+ 'cursor-pointer'
+ ]
+ },
+ togglerIcon: {
+ class: 'inline-block w-4 h-4'
+ },
+ content: {
+ class: [
+ // Spacing
+ 'p-[1.125rem] pt-0',
+
+ // Shape
+ 'border-0 border-t-0 last:rounded-br-md last:rounded-bl-md',
+
+ //Color
+ 'text-surface-700 dark:text-surface-0/80'
+ ]
+ },
+ footer: {
+ class: [
+ // Spacing
+ 'p-[1.125rem] pt-0',
+
+ // Shape
+ 'border-0 border-t-0 rounded-br-lg rounded-bl-lg',
+
+ //Color
+ 'text-surface-700 dark:text-surface-0/80'
+ ]
+ },
+ transition: {
+ enterFromClass: 'max-h-0',
+ enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+ enterToClass: 'max-h-[1000px]',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+ leaveToClass: 'max-h-0'
+ }
+};
diff --git a/src/presets/aura/panelmenu/index.js b/src/presets/aura/panelmenu/index.js
new file mode 100644
index 0000000..ad1293a
--- /dev/null
+++ b/src/presets/aura/panelmenu/index.js
@@ -0,0 +1,126 @@
+export default {
+ panel: {
+ class: 'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md'
+ },
+ header: {
+ class: ['rounded-[4px]', 'outline-none']
+ },
+ headerContent: ({ context }) => ({
+ class: [
+ // Shape
+ 'rounded-[4px]',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-600 dark:text-surface-0/80',
+ { 'text-surface-900': context.active },
+
+ // States
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'hover:text-surface-900',
+
+ // Transition
+ 'transition duration-200 ease-in-out',
+ 'transition-shadow duration-200'
+ ]
+ }),
+ headerLink: {
+ class: [
+ 'relative',
+
+ // Font
+ 'font-semibold',
+ 'leading-none',
+
+ // Flex & Alignments
+ 'flex items-center',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Misc
+ 'select-none cursor-pointer no-underline'
+ ]
+ },
+ headerLabel: {
+ class: 'leading-none'
+ },
+ headerIcon: {
+ class: 'mr-2'
+ },
+ submenuIcon: {
+ class: 'mr-2'
+ },
+ content: {
+ class: [
+ // Spacing
+ 'pl-4',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ rootList: {
+ class: ['outline-none', 'm-0 p-0 list-none']
+ },
+ menuitem: {
+ class: 'relative my-[2px]'
+ },
+ itemContent: {
+ class: [
+ // Shape
+ 'border-none rounded-[4px]',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+
+ // Transition
+ 'transition-shadow duration-200'
+ ]
+ },
+ itemLink: ({ context }) => ({
+ class: [
+ 'relative',
+
+ // Font
+ 'leading-none',
+
+ // Flex & Alignments
+ 'flex items-center',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Shape
+ 'rounded-[4px]',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+
+ // States
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
+ {
+ 'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10': context.focused
+ },
+
+ // Misc
+ 'cursor-pointer no-underline',
+ 'select-none overflow-hidden'
+ ]
+ }),
+ itemIcon: {
+ class: 'mr-2'
+ },
+ submenu: {
+ class: 'p-0 pl-4 m-0 list-none'
+ },
+ transition: {
+ enterFromClass: 'max-h-0',
+ enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+ enterToClass: 'max-h-[1000px]',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+ leaveToClass: 'max-h-0'
+ }
+};
diff --git a/src/presets/aura/password/index.js b/src/presets/aura/password/index.js
new file mode 100644
index 0000000..0250f6d
--- /dev/null
+++ b/src/presets/aura/password/index.js
@@ -0,0 +1,66 @@
+export default {
+ root: ({ props }) => ({
+ class: ['relative', { '[&>input]:pr-10': props.toggleMask }, { 'flex [&>input]:w-full': props.fluid, 'inline-flex': !props.fluid }]
+ }),
+ overlay: {
+ class: [
+ // Spacing
+ 'p-3',
+
+ // Shape
+ 'border',
+ 'shadow-md rounded-md',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+ 'border-surface-200 dark:border-surface-700'
+ ]
+ },
+ meter: {
+ class: [
+ // Position and Overflow
+ 'overflow-hidden',
+ 'relative',
+
+ // Shape and Size
+ 'border-0',
+ 'h-[10px]',
+ 'rounded-md',
+
+ // Spacing
+ 'mb-3',
+
+ // Colors
+ 'bg-surface-100 dark:bg-surface-700'
+ ]
+ },
+ meterLabel: ({ instance }) => ({
+ class: [
+ // Size
+ 'h-full',
+
+ // Colors
+ {
+ 'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
+ 'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
+ 'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
+ },
+
+ // Transitions
+ 'transition-all duration-1000 ease-in-out'
+ ]
+ }),
+ maskIcon: {
+ class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+ },
+ unmaskIcon: {
+ class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/picklist/index.js b/src/presets/aura/picklist/index.js
new file mode 100644
index 0000000..98f8c93
--- /dev/null
+++ b/src/presets/aura/picklist/index.js
@@ -0,0 +1,64 @@
+export default {
+ root: 'flex [&_[data-pc-name=pclist]]:h-full',
+ sourceControls: {
+ class: [
+ // Flexbox & Alignment
+ 'flex xl:flex-col justify-center gap-2',
+
+ // Spacing
+ 'p-[1.125rem]'
+ ]
+ },
+ sourceListContainer: {
+ class: [
+ // Flexbox
+ 'grow shrink basis-2/4',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700',
+ 'outline-none'
+ ]
+ },
+ transferControls: {
+ class: [
+ // Flexbox & Alignment
+ 'flex xl:flex-col justify-center gap-2',
+
+ // Spacing
+ 'p-[1.125rem]'
+ ]
+ },
+ targetListContainer: {
+ class: [
+ // Flexbox
+ 'grow shrink basis-2/4',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700',
+ 'outline-none'
+ ]
+ },
+ targetControls: {
+ class: [
+ // Flexbox & Alignment
+ 'flex xl:flex-col justify-center gap-2',
+
+ // Spacing
+ 'p-[1.125rem]'
+ ]
+ },
+ transition: {
+ enterFromClass: '!transition-none',
+ enterActiveClass: '!transition-none',
+ leaveActiveClass: '!transition-none',
+ leaveToClass: '!transition-none'
+ }
+};
diff --git a/src/presets/aura/popover/index.js b/src/presets/aura/popover/index.js
new file mode 100644
index 0000000..243aa7c
--- /dev/null
+++ b/src/presets/aura/popover/index.js
@@ -0,0 +1,29 @@
+export default {
+ root: {
+ class: [
+ // Shape
+ 'rounded-md shadow-lg',
+
+ // Position
+ 'absolute left-0 top-0 mt-2',
+ 'z-40 transform origin-center',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80',
+
+ // Before: Arrow
+ 'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[10px] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
+ 'after:absolute after:w-0 after:-top-[0.54rem] after:left-[4px] after:h-0 after:border-transparent after:border-solid after:ml-[8px] after:border-x-[8px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
+ ]
+ },
+ content: {
+ class: ['p-5 items-center flex', 'rounded-lg', 'border border-surface-200 dark:border-surface-700']
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/progressbar/index.js b/src/presets/aura/progressbar/index.js
new file mode 100644
index 0000000..7cc565a
--- /dev/null
+++ b/src/presets/aura/progressbar/index.js
@@ -0,0 +1,58 @@
+export default {
+ root: {
+ class: [
+ // Position and Overflow
+ 'overflow-hidden',
+ 'relative',
+
+ // Shape and Size
+ 'border-0',
+ 'h-5',
+ 'rounded-md',
+
+ // Colors
+ 'bg-surface-100 dark:bg-surface-800'
+ ]
+ },
+ value: ({ props }) => ({
+ class: [
+ // Flexbox & Overflow & Position
+ { 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
+
+ // Colors
+ 'bg-primary',
+
+ // Spacing & Sizing
+ 'm-0',
+ { 'h-full w-0': props.mode !== 'indeterminate' },
+
+ // Shape
+ 'border-0',
+
+ // Transitions
+ {
+ 'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
+ 'progressbar-value-animate': props.mode == 'indeterminate'
+ },
+
+ // Before & After (indeterminate)
+ {
+ 'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
+ 'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+ }
+ ]
+ }),
+ label: {
+ class: [
+ //Font
+ 'text-xs font-semibold',
+
+ // Flexbox
+ 'inline-flex',
+
+ // Font and Text
+ 'text-white dark:text-surface-900',
+ 'leading-5'
+ ]
+ }
+};
diff --git a/src/presets/aura/progressspinner/index.js b/src/presets/aura/progressspinner/index.js
new file mode 100644
index 0000000..4e1faec
--- /dev/null
+++ b/src/presets/aura/progressspinner/index.js
@@ -0,0 +1,51 @@
+export default {
+ root: {
+ class: [
+ // Position
+ 'relative',
+ 'mx-auto',
+
+ // Sizing
+ 'w-28',
+ 'h-28',
+
+ // Flexbox
+ 'inline-block',
+
+ // Pseudo-Elements
+ 'before:block',
+ 'before:pt-full'
+ ]
+ },
+ spinner: {
+ class: [
+ // Position
+ 'absolute',
+ 'top-0',
+ 'bottom-0',
+ 'left-0',
+ 'right-0',
+ 'm-auto',
+
+ // Sizing
+ 'w-full',
+ 'h-full',
+
+ // Transformations
+ 'transform',
+ 'origin-center',
+
+ // Animations
+ 'animate-spin'
+ ]
+ },
+ circle: {
+ class: [
+ // Colors
+ 'text-red-500',
+
+ // Misc
+ 'progress-spinner-circle'
+ ]
+ }
+};
diff --git a/src/presets/aura/radiobutton/index.js b/src/presets/aura/radiobutton/index.js
new file mode 100644
index 0000000..3649e91
--- /dev/null
+++ b/src/presets/aura/radiobutton/index.js
@@ -0,0 +1,102 @@
+export default {
+ root: {
+ class: [
+ 'relative',
+
+ // Flexbox & Alignment
+ 'inline-flex',
+ 'align-bottom',
+
+ // Size
+ 'w-5 h-5',
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ box: ({ props, context }) => ({
+ class: [
+ // Flexbox
+ 'flex justify-center items-center',
+
+ // Size
+ 'w-5 h-5',
+
+ // Shape
+ 'border outline-transparent',
+ 'rounded-full',
+
+ // Transition
+ 'transition duration-200 ease-in-out',
+
+ // Colors
+ {
+ 'text-surface-700 dark:text-white/80': context.checked,
+ 'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
+ 'border-primary bg-primary': context.checked && !props.disabled
+ },
+ // Invalid State
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ {
+ 'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && !context.checked,
+ 'peer-hover:border-primary-emphasis': !props.disabled && !context.checked,
+ 'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && !context.checked,
+ 'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
+ 'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
+ }
+ ]
+ }),
+ input: {
+ class: [
+ 'peer',
+
+ // Size
+ 'w-full ',
+ 'h-full',
+
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-10',
+
+ // Spacing
+ 'p-0',
+ 'm-0',
+
+ // Shape
+ 'opacity-0',
+ 'rounded-md',
+ 'outline-none',
+ 'border-1 border-surface-200 dark:border-surface-700',
+
+ // Misc
+ 'appearance-none',
+ 'cursor-pointer'
+ ]
+ },
+ icon: ({ context }) => ({
+ class: [
+ 'block',
+
+ // Shape
+ 'rounded-full',
+
+ // Size
+ 'w-3 h-3',
+
+ // Conditions
+ {
+ 'bg-surface-0 dark:bg-surface-900': context.checked,
+ 'bg-primary': !context.checked,
+ 'backface-hidden invisible scale-[0.1]': !context.checked,
+ 'transform visible translate-z-0 scale-[1,1]': context.checked
+ },
+
+ // Transition
+ 'transition duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/rating/index.js b/src/presets/aura/rating/index.js
new file mode 100644
index 0000000..b497fd3
--- /dev/null
+++ b/src/presets/aura/rating/index.js
@@ -0,0 +1,63 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'flex items-center',
+ 'gap-1',
+
+ // Misc
+ {
+ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+ }
+ ]
+ }),
+ option: ({ props, context }) => ({
+ class: [
+ // Flex & Alignment
+ 'inline-flex items-center',
+
+ // State
+ {
+ 'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
+ },
+
+ // Misc
+ {
+ 'cursor-pointer': !props.readonly,
+ 'cursor-default': props.readonly
+ }
+ ]
+ }),
+ offIcon: ({ props }) => ({
+ class: [
+ // Size
+ 'w-4 h-4',
+
+ // Color
+ 'text-surface-700 dark:text-surface-0/80',
+
+ // State
+ { 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
+
+ // Transition
+ 'transition duration-200 ease-in'
+ ]
+ }),
+ onIcon: ({ props }) => ({
+ class: [
+ // Size
+ 'w-4 h-4',
+
+ // Color
+ 'text-primary',
+
+ // State
+ { 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
+
+ // Transition
+ 'transition duration-200 ease-in'
+ ]
+ })
+};
diff --git a/src/presets/aura/ripple/index.js b/src/presets/aura/ripple/index.js
new file mode 100644
index 0000000..429c249
--- /dev/null
+++ b/src/presets/aura/ripple/index.js
@@ -0,0 +1,6 @@
+export default {
+ root: {
+ class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+ style: 'transform: scale(0)'
+ }
+};
diff --git a/src/presets/aura/scrollpanel/index.js b/src/presets/aura/scrollpanel/index.js
new file mode 100644
index 0000000..896fb14
--- /dev/null
+++ b/src/presets/aura/scrollpanel/index.js
@@ -0,0 +1,77 @@
+export default {
+ contentContainer: {
+ class: [
+ // Size & Position
+ 'h-full w-full',
+
+ // Layering
+ 'z-[1]',
+
+ // Spacing
+ 'overflow-hidden',
+
+ // Misc
+ 'relative float-left'
+ ]
+ },
+ content: {
+ class: [
+ // Size & Spacing
+ 'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
+
+ // Overflow & Scrollbar
+ 'overflow-scroll scrollbar-none',
+
+ // Box Model
+ 'box-border',
+
+ // Position
+ 'relative',
+
+ // Webkit Specific
+ '[&::-webkit-scrollbar]:hidden'
+ ]
+ },
+ barX: {
+ class: [
+ // Size & Position
+ 'h-[9px] bottom-0',
+
+ // Appearance
+ 'bg-surface-50 dark:bg-surface-700 rounded',
+
+ // Interactivity
+ 'cursor-pointer',
+
+ // Visibility & Layering
+ 'invisible z-20',
+
+ // Transition
+ 'transition duration-[250ms] ease-linear',
+
+ // Misc
+ 'relative'
+ ]
+ },
+ barY: {
+ class: [
+ // Size & Position
+ 'w-[9px] top-0',
+
+ // Appearance
+ 'bg-surface-50 dark:bg-surface-700 rounded',
+
+ // Interactivity
+ 'cursor-pointer',
+
+ // Visibility & Layering
+ 'z-20',
+
+ // Transition
+ 'transition duration-[250ms] ease-linear',
+
+ // Misc
+ 'relative'
+ ]
+ }
+};
diff --git a/src/presets/aura/scrolltop/index.js b/src/presets/aura/scrolltop/index.js
new file mode 100644
index 0000000..420093c
--- /dev/null
+++ b/src/presets/aura/scrolltop/index.js
@@ -0,0 +1,26 @@
+export default {
+ button: ({ props }) => ({
+ root: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center justify-center',
+
+ // Positioning
+ {
+ '!sticky flex ml-auto': props.target === 'parent',
+ '!fixed': props.target === 'window'
+ },
+ 'bottom-[20px] right-[20px]',
+ 'h-10 w-10 rounded-full shadow-md',
+ 'text-white dark:text-surface-900 bg-surface-600 dark:bg-surface-700',
+ 'hover:bg-surface-600 dark:hover:bg-surface-300'
+ ]
+ }
+ }),
+ transition: {
+ enterFromClass: 'opacity-0',
+ enterActiveClass: 'transition-opacity duration-150',
+ leaveActiveClass: 'transition-opacity duration-150',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/select/index.js b/src/presets/aura/select/index.js
new file mode 100644
index 0000000..879fbe9
--- /dev/null
+++ b/src/presets/aura/select/index.js
@@ -0,0 +1,226 @@
+export default {
+ root: ({ props, state, parent }) => ({
+ class: [
+ // Display and Position
+ 'inline-flex',
+ 'relative',
+ // Shape
+ { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+ { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+ { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+ { 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+ // Color and Background
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+
+ 'border',
+ { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
+ { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
+ { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // States
+ { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+ { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none',
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ label: ({ props, parent }) => ({
+ class: [
+ //Font
+ 'leading-[normal]',
+
+ // Display
+ 'block',
+ 'flex-auto',
+
+ // Color and Background
+ 'bg-transparent',
+ 'border-0',
+ { 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+ // Sizing and Spacing
+ 'w-[1%]',
+ 'py-2 px-3',
+ { 'pr-7': props.showClear },
+
+ //Shape
+ 'rounded-none',
+
+ // Transitions
+ 'transition',
+ 'duration-200',
+
+ // States
+ 'focus:outline-none focus:shadow-none',
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
+
+ // Misc
+ 'relative',
+ 'cursor-pointer',
+ 'overflow-hidden overflow-ellipsis',
+ 'whitespace-nowrap',
+ 'appearance-none'
+ ]
+ }),
+ dropdown: {
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+ 'shrink-0',
+
+ // Color and Background
+ 'bg-transparent',
+ 'text-surface-500',
+
+ // Size
+ 'w-12',
+
+ // Shape
+ 'rounded-r-md'
+ ]
+ },
+ overlay: {
+ class: [
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+
+ // Shape
+ 'border border-surface-300 dark:border-surface-700',
+ 'rounded-md',
+ 'shadow-md'
+ ]
+ },
+ listContainer: {
+ class: [
+ // Sizing
+ 'max-h-[200px]',
+
+ // Misc
+ 'overflow-auto'
+ ]
+ },
+ list: {
+ class: 'p-1 list-none m-0'
+ },
+ option: ({ context }) => ({
+ class: [
+ 'relative',
+ 'flex items-center',
+
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0 px-3 py-2',
+ 'first:mt-0 mt-[2px]',
+
+ // Shape
+ 'border-0 rounded',
+
+ // Colors
+ {
+ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
+ 'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
+ 'text-surface-700 dark:text-white/80': context.focused && !context.selected,
+ 'bg-highlight': context.selected
+ },
+
+ //States
+ { 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
+ { 'hover:bg-highlight-emphasis': context.selected },
+ { 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
+
+ // Transition
+ 'transition-shadow duration-200',
+
+ // Misc
+ 'cursor-pointer overflow-hidden whitespace-nowrap'
+ ]
+ }),
+ optionGroup: {
+ class: [
+ 'font-semibold',
+
+ // Spacing
+ 'm-0 py-2 px-3',
+
+ // Colors
+ 'text-surface-400 dark:text-surface-500',
+
+ // Misc
+ 'cursor-auto'
+ ]
+ },
+ optionCheckIcon: 'relative -ms-1.5 me-1.5 text-surface-700 dark:text-white/80 w-4 h-4',
+ optionBlankIcon: 'w-4 h-4',
+ emptyMessage: {
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'py-2 px-3',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+ 'bg-transparent'
+ ]
+ },
+ header: {
+ class: [
+ // Spacing
+ 'pt-2 px-2 pb-0',
+ 'm-0',
+
+ //Shape
+ 'border-b-0',
+ 'rounded-tl-md',
+ 'rounded-tr-md',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-300 dark:border-surface-700'
+ ]
+ },
+ clearIcon: {
+ class: [
+ // Color
+ 'text-surface-400 dark:text-surface-500',
+
+ // Position
+ 'absolute',
+ 'top-1/2',
+ 'right-12',
+
+ // Spacing
+ '-mt-2'
+ ]
+ },
+ loadingIcon: {
+ class: 'text-surface-400 dark:text-surface-500 animate-spin'
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/selectbutton/index.js b/src/presets/aura/selectbutton/index.js
new file mode 100644
index 0000000..be4d716
--- /dev/null
+++ b/src/presets/aura/selectbutton/index.js
@@ -0,0 +1,16 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'inline-flex select-none align-bottom outline-transparent',
+ 'border rounded-md [&>button]:rounded-none [&>button]:border-none',
+ '[&>button:first-child]:border-r-none [&>button:first-child]:rounded-r-none [&>button:first-child]:rounded-tl-md [&>button:first-child]:rounded-bl-md',
+ '[&>button:last-child]:border-l-none [&>button:first-child]:rounded-l-none [&>button:last-child]:rounded-tr-md [&>button:last-child]:rounded-br-md',
+
+ // Invalid State
+ {
+ 'border-red-500 dark:border-red-400': props.invalid,
+ 'border-transparent': !props.invalid
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/skeleton/index.js b/src/presets/aura/skeleton/index.js
new file mode 100644
index 0000000..d459aaa
--- /dev/null
+++ b/src/presets/aura/skeleton/index.js
@@ -0,0 +1,16 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'overflow-hidden',
+ {
+ 'animate-pulse': props.animation !== 'none'
+ },
+
+ // Round
+ { 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
+
+ // Colors
+ 'bg-surface-200 dark:bg-surface-700'
+ ]
+ })
+};
diff --git a/src/presets/aura/slider/index.js b/src/presets/aura/slider/index.js
new file mode 100644
index 0000000..c35cfaf
--- /dev/null
+++ b/src/presets/aura/slider/index.js
@@ -0,0 +1,138 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+
+ // Size
+ { 'h-[3px]': props.orientation == 'horizontal', 'w-[3px]': props.orientation == 'vertical' },
+
+ // Shape
+ 'border-0',
+ 'rounded-md',
+
+ // Colors
+ 'bg-surface-200 dark:bg-surface-800',
+
+ // States
+ { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ range: ({ props }) => ({
+ class: [
+ // Position
+ 'block absolute',
+ {
+ 'top-0 left-0': props.orientation == 'horizontal',
+ 'bottom-0 left-0': props.orientation == 'vertical'
+ },
+
+ //Size
+ {
+ 'h-full': props.orientation == 'horizontal',
+ 'w-full': props.orientation == 'vertical'
+ },
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ 'bg-primary'
+ ]
+ }),
+ handle: ({ props }) => ({
+ class: [
+ 'flex items-center justify-center',
+
+ // Size
+ 'h-[20px]',
+ 'w-[20px]',
+ {
+ 'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+ 'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+ },
+
+ // Shape
+ 'rounded-full',
+
+ 'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+ // Colors
+ 'bg-surface-200 dark:bg-surface-800',
+
+ // States
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+ 'ring-primary-500 dark:ring-primary-400',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Misc
+ 'cursor-grab',
+ 'touch-action-none'
+ ]
+ }),
+ startHandler: ({ props }) => ({
+ class: [
+ 'flex items-center justify-center',
+
+ // Size
+ 'h-[20px]',
+ 'w-[20px]',
+ {
+ 'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+ 'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+ },
+
+ // Shape
+ 'rounded-full',
+
+ 'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+ // Colors
+ 'bg-surface-200 dark:bg-surface-800',
+
+ // States
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+ 'ring-primary-500 dark:ring-primary-400',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Misc
+ 'cursor-grab',
+ 'touch-action-none'
+ ]
+ }),
+ endHandler: ({ props }) => ({
+ class: [
+ 'flex items-center justify-center',
+
+ // Size
+ 'h-[20px]',
+ 'w-[20px]',
+ {
+ 'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
+ 'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
+ },
+
+ // Shape
+ 'rounded-full',
+
+ 'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
+
+ // Colors
+ 'bg-surface-200 dark:bg-surface-800',
+
+ // States
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
+ 'ring-primary-500 dark:ring-primary-400',
+
+ // Transitions
+ 'transition duration-200',
+
+ // Misc
+ 'cursor-grab',
+ 'touch-action-none'
+ ]
+ })
+};
diff --git a/src/presets/aura/speeddial/index.js b/src/presets/aura/speeddial/index.js
new file mode 100644
index 0000000..db9ea04
--- /dev/null
+++ b/src/presets/aura/speeddial/index.js
@@ -0,0 +1,57 @@
+export default {
+ root: ({ state }) => ({
+ class: [
+ 'static flex gap-2',
+ {
+ '[&_[data-pc-name=pcbutton]]:rotate-45': state.d_visible,
+ '[&_[data-pc-name=pcbutton]]:rotate-0': !state.d_visible
+ }
+ ]
+ }),
+ list: {
+ class: [
+ // Spacing
+ 'm-0 p-0',
+
+ // Layout & Flexbox
+ 'list-none flex items-center justify-center',
+
+ // Transitions
+ 'transition delay-200',
+
+ // Z-Index (Positioning)
+ 'z-20'
+ ]
+ },
+ item: ({ props, context }) => ({
+ class: [
+ 'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+
+ // Conditional Appearance
+ context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
+
+ // Conditional Spacing
+ {
+ 'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+ 'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+ 'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+ 'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+ },
+
+ // Conditional Positioning
+ { absolute: props.type !== 'linear' }
+ ]
+ }),
+ mask: ({ state }) => ({
+ class: [
+ // Base Styles
+ 'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
+
+ // Conditional Appearance
+ {
+ 'opacity-0 pointer-events-none': !state.d_visible,
+ 'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/splitbutton/index.js b/src/presets/aura/splitbutton/index.js
new file mode 100644
index 0000000..cdb13d0
--- /dev/null
+++ b/src/presets/aura/splitbutton/index.js
@@ -0,0 +1,19 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ // Flexbox and Position
+ 'inline-flex',
+ 'relative',
+
+ // Shape
+ 'rounded-md',
+ { 'shadow-lg': props.raised },
+
+ '[&>[data-pc-name=pcbutton]]:rounded-tr-none',
+ '[&>[data-pc-name=pcbutton]]:rounded-br-none',
+ '[&>[data-pc-name=pcdropdown]]:rounded-tl-none',
+ '[&>[data-pc-name=pcdropdown]]:rounded-bl-none',
+ '[&>[data-pc-name=pcmenu]]:min-w-full'
+ ]
+ })
+};
diff --git a/src/presets/aura/splitter/index.js b/src/presets/aura/splitter/index.js
new file mode 100644
index 0000000..412d03f
--- /dev/null
+++ b/src/presets/aura/splitter/index.js
@@ -0,0 +1,68 @@
+export default {
+ root: ({ context }) => ({
+ class: [
+ // Colors
+ 'bg-surface-0',
+ 'dark:bg-surface-900',
+ 'text-surface-700',
+ 'dark:text-surface-0/80',
+
+ // Shape
+ 'rounded-md',
+
+ // Borders (Conditional)
+ { 'border border-solid border-surface-200 dark:border-surface-700': !context.nested },
+
+ // Nested
+ { 'flex grow border-0': context.nested }
+ ]
+ }),
+
+ gutter: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex',
+ 'items-center',
+ 'justify-center',
+ 'shrink-0',
+
+ // Colors
+ 'bg-surface-100',
+ 'dark:bg-surface-700',
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // Misc
+ {
+ 'cursor-col-resize': props.layout == 'horizontal',
+ 'cursor-row-resize': props.layout !== 'horizontal'
+ }
+ ]
+ }),
+ gutterhandler: ({ props }) => ({
+ class: [
+ 'z-20',
+ // Colors
+ 'bg-surface-100',
+ 'dark:bg-surface-700',
+
+ // Shape
+ 'rounded-md',
+
+ //States
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // Sizing (Conditional)
+ {
+ 'h-[1.70rem]': props.layout == 'horizontal',
+ 'w-[1.70rem] h-2': props.layout !== 'horizontal'
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/splitterpanel/index.js b/src/presets/aura/splitterpanel/index.js
new file mode 100644
index 0000000..6a21cd3
--- /dev/null
+++ b/src/presets/aura/splitterpanel/index.js
@@ -0,0 +1,5 @@
+export default {
+ root: ({ context }) => ({
+ class: ['grow', { flex: context.nested }]
+ })
+};
diff --git a/src/presets/aura/step/index.js b/src/presets/aura/step/index.js
new file mode 100644
index 0000000..bcfe7c0
--- /dev/null
+++ b/src/presets/aura/step/index.js
@@ -0,0 +1,62 @@
+export default {
+ root: ({ context }) => ({
+ class: ['relative flex flex-auto items-center gap-2 p-2 last-of-type:flex-[initial]', { 'cursor-default pointer-events-none select-none opacity-60': context.disabled }, '[&_[data-pc-section=separator]]:has-[~[data-p-active=true]]:bg-primary']
+ }),
+ header: ({ props, context }) => ({
+ class: [
+ 'inline-flex items-center border-0 cursor-pointer rounded-md outline-transparent bg-transparent p-0 gap-2',
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+ { '!cursor-default': context.active },
+ { 'cursor-auto': props.linear }
+ ]
+ }),
+ number: ({ context }) => ({
+ class: [
+ // Flexbox
+ 'flex',
+ 'items-center',
+ 'justify-center',
+
+ //Colors
+ 'border-solid border-2 border-surface-200 dark:border-surface-700',
+
+ // Colors (Conditional)
+ context.active ? 'text-primary' : 'text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+ // Size and Shape
+ 'min-w-[2rem]',
+ 'h-[2rem]',
+ 'line-height-[2rem]',
+ 'rounded-full',
+
+ // Text
+ 'text-lg',
+
+ // Transitions
+ 'transition',
+ 'transition-colors',
+ 'transition-shadow',
+ 'duration-200'
+ ]
+ }),
+ title: ({ context }) => ({
+ class: [
+ // Layout
+ 'block',
+ 'whitespace-nowrap',
+ 'overflow-hidden',
+ 'text-ellipsis',
+ 'max-w-full',
+
+ // Text
+ context.active ? 'text-primary' : 'text-surface-700 dark:text-surface-0/80',
+ 'font-medium',
+
+ // Transitions
+ 'transition',
+ 'transition-colors',
+ 'transition-shadow',
+ 'duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/stepitem/index.js b/src/presets/aura/stepitem/index.js
new file mode 100644
index 0000000..31235fb
--- /dev/null
+++ b/src/presets/aura/stepitem/index.js
@@ -0,0 +1,11 @@
+export default {
+ root: ({ state }) => ({
+ class: [
+ 'flex flex-col flex-[initial] has-[[data-pc-name=steppanels]]:px-2 has-[[data-pc-name=steppanels]]:pt-3.5 has-[[data-pc-name=steppanels]]:pb-[1.125rem]',
+ { 'flex-auto': state.isActive },
+ '[&>[data-pc-name=step]]:flex-[initial]',
+ '[&>[data-pc-name=steppanel]]:flex [&>[data-pc-name=steppanel]]:flex-auto [&>[data-pc-name=steppanel]>[data-pc-section=content]]:w-full [&>[data-pc-name=steppanel]>[data-pc-section=content]]:pl-4 [&:last-child>[data-pc-name=steppanel]>[data-pc-section=content]]:ps-8',
+ '[&>[data-pc-name=steppanel]>[data-pc-section=separator]]:relative [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:!flex-initial [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:shrink-0 [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:w-[2px] [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:h-auto [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:m-2 [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:left-[-2px] [&>[data-pc-name=steppanel]>[data-pc-section=separator]]:ml-[1.625rem]'
+ ]
+ })
+};
diff --git a/src/presets/aura/steplist/index.js b/src/presets/aura/steplist/index.js
new file mode 100644
index 0000000..6135229
--- /dev/null
+++ b/src/presets/aura/steplist/index.js
@@ -0,0 +1,3 @@
+export default {
+ root: 'relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto'
+};
diff --git a/src/presets/aura/steppanels/index.js b/src/presets/aura/steppanels/index.js
new file mode 100644
index 0000000..75b5bc7
--- /dev/null
+++ b/src/presets/aura/steppanels/index.js
@@ -0,0 +1,3 @@
+export default {
+ root: 'px-2 pt-3.5 pb-[1.125rem]'
+};
diff --git a/src/presets/aura/stepper/index.js b/src/presets/aura/stepper/index.js
new file mode 100644
index 0000000..8071926
--- /dev/null
+++ b/src/presets/aura/stepper/index.js
@@ -0,0 +1,13 @@
+export default {
+ root: 'has-[[data-pc-name=stepitem]]:flex has-[[data-pc-name=stepitem]]:flex-col',
+ separator: 'flex-1 w-full h-[2px] bg-surface-200 dark:bg-surface-700 transition-shadow duration-200',
+ transition: {
+ class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-900', 'text-surface-900 dark:text-surface-0'],
+ enterFromClass: 'max-h-0',
+ enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+ enterToClass: 'max-h-[1000px]',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+ leaveToClass: 'max-h-0'
+ }
+};
diff --git a/src/presets/aura/steps/index.js b/src/presets/aura/steps/index.js
new file mode 100644
index 0000000..f4cb711
--- /dev/null
+++ b/src/presets/aura/steps/index.js
@@ -0,0 +1,113 @@
+export default {
+ root: {
+ class: 'relative'
+ },
+ menu: {
+ class: 'p-0 m-0 list-none flex'
+ },
+ menuitem: {
+ class: [
+ // Flexbox and Position
+ 'relative',
+ 'flex',
+ 'justify-center',
+ 'flex-1',
+ 'overflow-hidden',
+
+ // Before
+ 'before:border-t-2',
+ 'before:border-surface-200',
+ 'before:dark:border-surface-700',
+ 'before:w-full',
+ '[&:first-child]:before:w-[calc(50%+1rem)]',
+ '[&:last-child]:before:w-1/2',
+ 'before:absolute',
+ 'before:top-1/2',
+ 'before:left-0',
+ 'before:transform',
+ 'before:mt-[calc(-1rem+1px)]',
+ '[&:first-child]:before:translate-x-[100%]'
+ ]
+ },
+ action: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'inline-flex items-center',
+ 'flex-col',
+
+ // Transitions and Shape
+ 'transition-shadow',
+ 'rounded-md',
+
+ // Colors
+ 'bg-surface-0',
+ 'dark:bg-transparent',
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring',
+ 'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Misc
+ 'overflow-hidden',
+ { 'cursor-pointer': !props.readonly }
+ ]
+ }),
+ step: ({ context, props }) => ({
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+
+ // Position
+ 'z-20',
+
+ // Shape
+ 'rounded-full',
+ 'border-2',
+
+ // Size
+ 'w-8',
+ 'h-8',
+ 'text-sm',
+ 'leading-[2rem]',
+ 'font-medium',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-800',
+ 'border-surface-100 dark:border-surface-700',
+ {
+ 'text-surface-400 dark:text-white/60': !context.active,
+ 'text-primary': context.active
+ },
+
+ // States
+ {
+ 'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
+ },
+
+ // Transition
+ 'transition-colors duration-200 ease-in-out'
+ ]
+ }),
+ label: ({ context }) => ({
+ class: [
+ // Font
+ 'leading-[normal]',
+ 'font-medium',
+
+ // Display
+ 'block',
+
+ // Spacing
+ 'mt-2',
+
+ // Colors
+ { 'text-surface-700 dark:text-white/70': !context.active, 'text-primary': context.active },
+
+ // Text and Overflow
+ 'whitespace-nowrap',
+ 'overflow-hidden',
+ 'overflow-ellipsis',
+ 'max-w-full'
+ ]
+ })
+};
diff --git a/src/presets/aura/tab/index.js b/src/presets/aura/tab/index.js
new file mode 100644
index 0000000..a5117e7
--- /dev/null
+++ b/src/presets/aura/tab/index.js
@@ -0,0 +1,38 @@
+export default {
+ root: ({ props, context }) => ({
+ class: [
+ 'relative shrink-0',
+
+ // Shape
+ 'border-b',
+ 'rounded-t-md',
+
+ // Spacing
+ 'py-4 px-[1.125rem]',
+ '-mb-px',
+
+ // Colors and Conditions
+ 'outline-transparent',
+ {
+ 'border-surface-200 dark:border-surface-700': !context.active,
+ 'bg-surface-0 dark:bg-surface-900': !context.active,
+ 'text-surface-700 dark:text-surface-0/80': !context.active,
+
+ 'bg-surface-0 dark:bg-surface-900': context.active,
+ 'text-primary': context.active,
+
+ 'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+ // Transitions
+ 'transition-all duration-200',
+
+ // Misc
+ 'cursor-pointer select-none whitespace-nowrap',
+ 'user-select-none'
+ ]
+ })
+};
diff --git a/src/presets/aura/tablist/index.js b/src/presets/aura/tablist/index.js
new file mode 100644
index 0000000..80801c6
--- /dev/null
+++ b/src/presets/aura/tablist/index.js
@@ -0,0 +1,8 @@
+export default {
+ root: 'relative flex',
+ content: 'overflow-x-auto overflow-y-hidden scroll-smooth overscroll-x-contain overscroll-y-auto [&::-webkit-scrollbar]:hidden grow',
+ tabList: 'relative flex border-solid border-b border-surface-200 dark:border-surface-700',
+ nextButton: '!absolute top-0 right-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-900 outline-transparent cursor-pointer shrink-0',
+ prevButton: '!absolute top-0 left-0 z-20 h-full w-10 flex items-center justify-center text-surface-700 dark:text-surface-0/80 bg-surface-0 dark:bg-surface-900 outline-transparent cursor-pointer shrink-0',
+ activeBar: 'z-10 block absolute h-[1px] bottom-[-1px] bg-primary'
+};
diff --git a/src/presets/aura/tabmenu/index.js b/src/presets/aura/tabmenu/index.js
new file mode 100644
index 0000000..e0cd44e
--- /dev/null
+++ b/src/presets/aura/tabmenu/index.js
@@ -0,0 +1,70 @@
+export default {
+ root: {
+ class: 'overflow-x-auto'
+ },
+ menu: {
+ class: [
+ // Flexbox
+ 'flex flex-1',
+
+ // Spacing
+ 'list-none',
+ 'p-0 m-0',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-b-2 border-surface-200 dark:border-surface-700',
+ 'text-surface-900 dark:text-surface-0/80'
+ ]
+ },
+ menuitem: {
+ class: 'mr-0'
+ },
+ action: ({ context, state }) => ({
+ class: [
+ 'relative',
+
+ // Font
+ 'font-semibold leading-none',
+
+ // Flexbox and Alignment
+ 'flex items-center',
+
+ // Spacing
+ 'py-4 px-[1.125rem]',
+ '-mb-px',
+
+ // Shape
+ 'border-b',
+ 'rounded-t-md',
+
+ // Colors and Conditions
+ {
+ 'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
+ 'bg-surface-0 dark:bg-surface-900': state.d_activeIndex !== context.index,
+ 'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
+
+ 'bg-surface-0 dark:bg-surface-900': state.d_activeIndex === context.index,
+ 'border-primary': state.d_activeIndex === context.index,
+ 'text-primary': state.d_activeIndex === context.index
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+ {
+ 'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
+ },
+
+ // Transitions
+ 'transition-all duration-200',
+
+ // Misc
+ 'cursor-pointer select-none text-decoration-none',
+ 'overflow-hidden',
+ 'user-select-none'
+ ]
+ }),
+ icon: {
+ class: 'mr-2'
+ }
+};
diff --git a/src/presets/aura/tabpanel/index.js b/src/presets/aura/tabpanel/index.js
new file mode 100644
index 0000000..854f508
--- /dev/null
+++ b/src/presets/aura/tabpanel/index.js
@@ -0,0 +1,3 @@
+export default {
+ root: 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300'
+};
diff --git a/src/presets/aura/tabpanels/index.js b/src/presets/aura/tabpanels/index.js
new file mode 100644
index 0000000..662573d
--- /dev/null
+++ b/src/presets/aura/tabpanels/index.js
@@ -0,0 +1,3 @@
+export default {
+ root: 'bg-surface-0 dark:bg-surface-900 text-surface-900 dark:text-surface-0/80 outline-0 p-[1.125rem] pt-[0.875rem]'
+};
diff --git a/src/presets/aura/tabs/index.js b/src/presets/aura/tabs/index.js
new file mode 100644
index 0000000..0e69458
--- /dev/null
+++ b/src/presets/aura/tabs/index.js
@@ -0,0 +1,5 @@
+export default {
+ root: ({ props }) => ({
+ class: ['flex flex-col', { '[&>[data-pc-name=tablist]]:overflow-hidden': props.scrollable }]
+ })
+};
diff --git a/src/presets/aura/tabview/index.js b/src/presets/aura/tabview/index.js
new file mode 100644
index 0000000..3a3005c
--- /dev/null
+++ b/src/presets/aura/tabview/index.js
@@ -0,0 +1,156 @@
+export default {
+ // For PrimeVue version 3
+ navContainer: ({ props }) => ({
+ class: [
+ // Position
+ 'relative',
+
+ // Misc
+ { 'overflow-hidden': props.scrollable }
+ ]
+ }),
+ navContent: ({ instance }) => ({
+ class: [
+ // Overflow and Scrolling
+ 'overflow-y-hidden overscroll-contain',
+ 'overscroll-auto',
+ 'scroll-smooth',
+ '[&::-webkit-scrollbar]:hidden'
+ ]
+ }),
+ previousButton: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-center',
+
+ // Position
+ '!absolute',
+ 'top-0 left-0',
+ 'z-20',
+
+ // Size and Shape
+ 'h-full w-10',
+ 'rounded-none',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-surface-0/80',
+ 'shadow-sm'
+ ]
+ },
+ nextButton: {
+ class: [
+ // Flexbox and Alignment
+ 'flex items-center justify-center',
+
+ // Position
+ '!absolute',
+ 'top-0 right-0',
+ 'z-20',
+
+ // Size and Shape
+ 'h-full w-10',
+ 'rounded-none',
+
+ // Colors
+ 'text-surface-700 dark:text-surface-0/80',
+ 'bg-surface-0 dark:bg-surface-900',
+ 'shadow-sm'
+ ]
+ },
+ nav: {
+ class: [
+ // Flexbox
+ 'flex flex-1',
+
+ // Spacing
+ 'list-none',
+ 'p-0 m-0',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-b border-surface-200 dark:border-surface-700',
+ 'text-surface-900 dark:text-surface-0/80'
+ ]
+ },
+ tabpanel: {
+ header: ({ props }) => ({
+ class: [
+ // Spacing
+ 'mr-0',
+
+ // Misc
+ 'outline-none',
+ {
+ 'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+ }
+ ]
+ }),
+ headerAction: ({ parent, context }) => ({
+ class: [
+ 'relative',
+
+ // Font
+ 'font-semibold',
+
+ // Flexbox and Alignment
+ 'flex items-center',
+
+ // Spacing
+ 'py-4 px-[1.125rem]',
+ '-mb-px',
+
+ // Shape
+ 'border-b-2',
+ 'rounded-t-md',
+
+ // Colors and Conditions
+ {
+ 'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
+ 'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex !== context.index,
+ 'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
+
+ 'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex === context.index,
+ 'border-primary': parent.state.d_activeIndex === context.index,
+ 'text-primary': parent.state.d_activeIndex === context.index
+ },
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+ {
+ 'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
+ 'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
+ },
+
+ // Transitions
+ 'transition-all duration-200',
+
+ // Misc
+ 'cursor-pointer select-none text-decoration-none',
+ 'overflow-hidden',
+ 'user-select-none'
+ ]
+ }),
+ headerTitle: {
+ class: [
+ // Text
+ 'leading-none',
+ 'whitespace-nowrap'
+ ]
+ }
+ },
+ panelcontainer: {
+ class: [
+ // Spacing
+ 'p-[1.125rem] pt-[0.875rem]',
+
+ // Shape
+ 'border-0 rounded-none',
+ 'border-br-md border-bl-md',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-900 dark:text-surface-0/80'
+ ]
+ }
+};
diff --git a/src/presets/aura/tag/index.js b/src/presets/aura/tag/index.js
new file mode 100644
index 0000000..6cebd68
--- /dev/null
+++ b/src/presets/aura/tag/index.js
@@ -0,0 +1,37 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ //Font
+ 'text-xs font-bold',
+
+ //Alignments
+ 'inline-flex items-center justify-center',
+
+ //Spacing
+ 'px-[0.4rem] py-1',
+
+ //Shape
+ {
+ 'rounded-md': !props.rounded,
+ 'rounded-full': props.rounded
+ },
+
+ //Colors
+ {
+ 'bg-highlight': props.severity === null || props.severity === 'primary',
+ 'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20': props.severity === 'success',
+ 'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20': props.severity === 'secondary',
+ 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20': props.severity === 'info',
+ 'text-orange-700 dark:text-orange-300 bg-orange-100 dark:bg-orange-500/20': props.severity === 'warn',
+ 'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-500/20': props.severity === 'danger',
+ 'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity === 'contrast'
+ }
+ ]
+ }),
+ value: {
+ class: 'leading-normal'
+ },
+ icon: {
+ class: 'mr-1 text-sm'
+ }
+};
diff --git a/src/presets/aura/terminal/index.js b/src/presets/aura/terminal/index.js
new file mode 100644
index 0000000..d714566
--- /dev/null
+++ b/src/presets/aura/terminal/index.js
@@ -0,0 +1,60 @@
+export default {
+ root: {
+ class: [
+ // Spacing
+ 'py-2 px-3',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0',
+ 'border border-surface-200 dark:border-surface-700',
+
+ // Sizing & Overflow
+ 'h-72 overflow-auto'
+ ]
+ },
+ container: {
+ class: [
+ // Flexbox
+ 'flex items-center'
+ ]
+ },
+ prompt: {
+ class: [
+ // Color
+ 'text-surface-700 dark:text-surface-0'
+ ]
+ },
+ response: {
+ class: [
+ // Color
+ 'text-surface-700 dark:text-surface-0'
+ ]
+ },
+ command: {
+ class: [
+ // Color
+ 'text-surface-700 dark:text-surface-0'
+ ]
+ },
+ commandtext: {
+ class: [
+ // Flexbox
+ 'flex-1 shrink grow-0',
+
+ // Shape
+ 'border-0',
+
+ // Spacing
+ 'p-0',
+
+ // Color
+ 'bg-transparent text-inherit',
+
+ // Outline
+ 'outline-none'
+ ]
+ }
+};
diff --git a/src/presets/aura/textarea/index.js b/src/presets/aura/textarea/index.js
new file mode 100644
index 0000000..4f72b9e
--- /dev/null
+++ b/src/presets/aura/textarea/index.js
@@ -0,0 +1,41 @@
+export default {
+ root: ({ context, props, parent }) => ({
+ class: [
+ // Font
+ 'leading-none',
+
+ // Spacing
+ 'm-0',
+ 'py-2 px-3',
+
+ // Shape
+ 'rounded-md',
+
+ // Colors
+ 'text-surface-800 dark:text-white/80',
+ 'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+ { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ {
+ 'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
+ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
+ },
+
+ // Filled State *for FloatLabel
+ { filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
+
+ // Misc
+ 'appearance-none',
+ 'transition-colors duration-200'
+ ]
+ })
+};
diff --git a/src/presets/aura/tieredmenu/index.js b/src/presets/aura/tieredmenu/index.js
new file mode 100644
index 0000000..2911d28
--- /dev/null
+++ b/src/presets/aura/tieredmenu/index.js
@@ -0,0 +1,123 @@
+export default {
+ root: {
+ class: [
+ // Shape
+ 'rounded-md',
+
+ // Size
+ 'min-w-[12rem]',
+ 'p-1',
+
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700'
+ ]
+ },
+ rootList: {
+ class: [
+ // Spacings and Shape
+ 'list-none',
+ 'flex flex-col',
+ 'm-0 p-0',
+ 'outline-none'
+ ]
+ },
+ item: {
+ class: 'relative my-[2px] [&:first-child]:mt-0'
+ },
+ itemContent: ({ context }) => ({
+ class: [
+ //Shape
+ 'rounded-[4px]',
+
+ // Colors
+ 'text-surface-700 dark:text-white/80',
+ {
+ 'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+ 'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
+ 'bg-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
+ },
+
+ // Transitions
+ 'transition-shadow',
+ 'duration-200',
+
+ // States
+ {
+ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
+ 'hover:bg-highlight-emphasis': context.active
+ },
+
+ // Disabled
+ { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+ ]
+ }),
+ itemLink: {
+ class: [
+ 'relative',
+ // Flexbox
+
+ 'flex',
+ 'items-center',
+
+ // Spacing
+ 'py-2',
+ 'px-3',
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+
+ // Misc
+ 'no-underline',
+ 'overflow-hidden',
+ 'cursor-pointer',
+ 'select-none'
+ ]
+ },
+ itemIcon: {
+ class: [
+ // Spacing
+ 'mr-2',
+
+ // Color
+ 'text-surface-600 dark:text-white/70'
+ ]
+ },
+ itemLabel: {
+ class: ['leading-none']
+ },
+ submenuIcon: {
+ class: [
+ // Position
+ 'ml-auto'
+ ]
+ },
+ submenu: {
+ class: [
+ // Spacing
+ 'flex flex-col',
+ 'm-0',
+ 'p-1',
+ 'list-none',
+ 'min-w-[12.5rem]',
+
+ // Shape
+ 'shadow-none sm:shadow-md',
+ 'border border-surface-200 dark:border-surface-700',
+
+ // Position
+ 'static sm:absolute',
+ 'z-10',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900'
+ ]
+ },
+ separator: {
+ class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
+ },
+ transition: {
+ enterFromClass: 'opacity-0',
+ enterActiveClass: 'transition-opacity duration-250'
+ }
+};
diff --git a/src/presets/aura/timeline/index.js b/src/presets/aura/timeline/index.js
new file mode 100644
index 0000000..330a45f
--- /dev/null
+++ b/src/presets/aura/timeline/index.js
@@ -0,0 +1,88 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'flex grow',
+ {
+ 'flex-col': props.layout === 'vertical',
+ 'flex-row': props.layout === 'horizontal'
+ }
+ ]
+ }),
+ event: ({ props, context }) => ({
+ class: [
+ 'flex relative min-h-[70px]',
+ {
+ 'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+ 'flex-col [&:not(:last-child)]:flex-1': props.layout === 'horizontal',
+ 'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+ }
+ ]
+ }),
+ eventOpposite: ({ props, context }) => ({
+ class: [
+ 'flex-1',
+ {
+ 'px-4': props.layout === 'vertical',
+ 'py-4': props.layout === 'horizontal'
+ },
+ {
+ 'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+ 'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+ }
+ ]
+ }),
+ eventSeparator: ({ props }) => ({
+ class: [
+ 'flex items-center flex-initial',
+ {
+ 'flex-col': props.layout === 'vertical',
+ 'flex-row': props.layout === 'horizontal'
+ }
+ ]
+ }),
+ eventMarker: {
+ class: [
+ 'relative',
+
+ // Display & Flexbox
+ 'inline-flex items-center justify-center',
+
+ // Size
+ 'w-[1.125rem] h-[1.125rem]',
+
+ // Appearance
+ 'rounded-full border-2 border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-950',
+
+ // Before
+ 'before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary',
+ // After
+ 'after:absolute after:rounded-full after:w-full after:h-full after:shadow-sm'
+ ]
+ },
+ eventConnector: ({ props }) => ({
+ class: [
+ 'grow bg-surface-300 dark:bg-surface-700',
+ {
+ 'w-[2px]': props.layout === 'vertical',
+ 'w-full h-[2px]': props.layout === 'horizontal'
+ }
+ ]
+ }),
+ eventContent: ({ props, context }) => ({
+ class: [
+ 'flex-1',
+ {
+ 'px-4': props.layout === 'vertical',
+ 'py-4': props.layout === 'horizontal'
+ },
+ {
+ 'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+ 'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+ },
+ {
+ 'min-h-0': props.layout === 'vertical' && context.index === context.count - 1,
+ 'grow-0': props.layout === 'horizontal' && context.index === context.count - 1
+ }
+ ]
+ })
+};
diff --git a/src/presets/aura/toast/index.js b/src/presets/aura/toast/index.js
new file mode 100644
index 0000000..7664159
--- /dev/null
+++ b/src/presets/aura/toast/index.js
@@ -0,0 +1,117 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ //Size and Shape
+ 'w-96 rounded-md',
+
+ // Positioning
+ { '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
+ ]
+ }),
+ message: ({ props }) => ({
+ class: [
+ 'mb-4 rounded-md w-full',
+ 'border border-transparent',
+ 'backdrop-blur-[10px] shadow-md',
+
+ // Colors
+ {
+ 'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
+ 'bg-green-50/90 dark:bg-green-500/20': props.message.severity == 'success',
+ 'bg-surface-50 dark:bg-surface-800': props.message.severity == 'secondary',
+ 'bg-orange-50/90 dark:bg-orange-500/20': props.message.severity == 'warn',
+ 'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
+ 'bg-surface-950 dark:bg-surface-0': props.message.severity == 'contrast'
+ },
+ {
+ 'border-blue-200 dark:border-blue-500/20': props.message.severity == 'info',
+ 'border-green-200 dark:border-green-500/20': props.message.severity == 'success',
+ 'border-surface-300 dark:border-surface-500/20': props.message.severity == 'secondary',
+ 'border-orange-200 dark:border-orange-500/20': props.message.severity == 'warn',
+ 'border-red-200 dark:border-red-500/20': props.message.severity == 'error',
+ 'border-surface-950 dark:border-surface-0': props.message.severity == 'contrast'
+ },
+ {
+ 'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
+ 'text-green-700 dark:text-green-300': props.message.severity == 'success',
+ 'text-surface-700 dark:text-surface-300': props.message.severity == 'secondary',
+ 'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
+ 'text-red-700 dark:text-red-300': props.message.severity == 'error',
+ 'text-surface-0 dark:text-surface-950': props.message.severity == 'contrast'
+ }
+ ]
+ }),
+ messageContent: ({ props }) => ({
+ class: [
+ 'flex p-3',
+ {
+ 'items-start': props.message.summary,
+ 'items-center': !props.message.summary
+ }
+ ]
+ }),
+ messageIcon: ({ props }) => ({
+ class: [
+ // Sizing and Spacing
+ props.message.severity === 'contrast' || props.message.severity === 'secondary' ? 'w-0' : 'w-[1.125rem] h-[1.125rem] mr-2',
+ 'text-lg leading-[normal]'
+ ]
+ }),
+ messageText: {
+ class: [
+ // Font and Text
+ 'text-base leading-[normal]',
+ 'ml-2',
+ 'flex-1'
+ ]
+ },
+ summary: {
+ class: 'font-medium block'
+ },
+ detail: ({ props }) => ({
+ class: ['block', 'text-sm', props.message.severity === 'contrast' ? 'text-surface-0 dark:text-surface-950' : 'text-surface-700 dark:text-surface-0', { 'mt-2': props.message.summary }]
+ }),
+ closeButton: ({ props }) => ({
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+
+ // Size
+ 'w-7 h-7',
+
+ // Spacing and Misc
+ 'ml-auto relative',
+
+ // Shape
+ 'rounded-full',
+
+ // Colors
+ 'bg-transparent',
+
+ // Transitions
+ 'transition duration-200 ease-in-out',
+
+ // States
+ 'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1',
+ {
+ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
+ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
+ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
+ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
+ 'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
+ 'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
+ },
+
+ // Misc
+ 'overflow-hidden'
+ ]
+ }),
+ transition: {
+ enterFromClass: 'opacity-0 translate-y-2/4',
+ enterActiveClass: 'transition-[transform,opacity] duration-300',
+ leaveFromClass: 'max-h-[1000px]',
+ leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+ leaveToClass: 'max-h-0 opacity-0 mb-0'
+ }
+};
diff --git a/src/presets/aura/togglebutton/index.js b/src/presets/aura/togglebutton/index.js
new file mode 100644
index 0000000..4a29de0
--- /dev/null
+++ b/src/presets/aura/togglebutton/index.js
@@ -0,0 +1,43 @@
+export default {
+ root: ({ props, context }) => ({
+ class: [
+ 'relative',
+
+ // Alignment
+ 'flex items-center justify-center',
+ 'py-2 px-4',
+ 'rounded-md border',
+
+ // Color
+ 'bg-surface-100 dark:bg-surface-950',
+ {
+ 'text-surface-600 dark:text-white/60 before:bg-transparent': !context.active,
+ 'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': context.active
+ },
+
+ // States
+ {
+ 'hover:text-surface-800 dark:hover:text-white/80': !props.disabled && !props.modelValue,
+ 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !props.disabled
+ },
+
+ // Invalid State
+ {
+ 'border-red-500 dark:border-red-400': props.invalid,
+ 'border-surface-100 dark:border-surface-950': !props.invalid
+ },
+
+ // Before
+ 'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+
+ // Transitions
+ 'transition-all duration-200',
+
+ // Misc
+ { 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ content: 'relative items-center inline-flex justify-center gap-2',
+ label: 'font-medium leading-[normal] text-center w-full z-10 relative',
+ icon: 'relative z-10 mr-2'
+};
diff --git a/src/presets/aura/toggleswitch/index.js b/src/presets/aura/toggleswitch/index.js
new file mode 100644
index 0000000..8d30dfe
--- /dev/null
+++ b/src/presets/aura/toggleswitch/index.js
@@ -0,0 +1,80 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'inline-block relative',
+ 'w-10 h-6',
+ 'rounded-2xl',
+ {
+ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+ }
+ ]
+ }),
+ slider: ({ props }) => ({
+ class: [
+ // Position
+ 'absolute top-0 left-0 right-0 bottom-0',
+ { 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
+
+ // Shape
+ 'rounded-2xl',
+
+ // Before:
+ 'before:absolute before:top-1/2 before:left-1',
+ 'before:-mt-2',
+ 'before:h-4 before:w-4',
+ 'before:rounded-full',
+ 'before:duration-200',
+ 'before:bg-surface-0 before:dark:bg-surface-500',
+
+ // Colors
+ 'border',
+ {
+ 'bg-surface-300 dark:bg-surface-800': !(props.modelValue == props.trueValue),
+ 'bg-primary': props.modelValue == props.trueValue,
+ 'before:dark:bg-surface-950': props.modelValue == props.trueValue,
+ 'border-transparent': !props.invalid
+ },
+
+ // Invalid State
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // States
+ { 'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700': !(props.modelValue == props.trueValue) && !props.disabled && !props.invalid },
+ { 'peer-hover:bg-primary-hover': props.modelValue == props.trueValue && !props.disabled && !props.invalid },
+ 'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
+
+ // Transition
+ 'transition-colors duration-200',
+
+ // Misc
+ 'cursor-pointer'
+ ]
+ }),
+ input: {
+ class: [
+ 'peer',
+
+ // Size
+ 'w-full ',
+ 'h-full',
+
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-10',
+
+ // Spacing
+ 'p-0',
+ 'm-0',
+
+ // Shape
+ 'opacity-0',
+ 'rounded-2xl',
+ 'outline-none',
+
+ // Misc
+ 'appearance-none',
+ 'cursor-pointer'
+ ]
+ }
+};
diff --git a/src/presets/aura/toolbar/index.js b/src/presets/aura/toolbar/index.js
new file mode 100644
index 0000000..6a825fe
--- /dev/null
+++ b/src/presets/aura/toolbar/index.js
@@ -0,0 +1,28 @@
+export default {
+ root: {
+ class: [
+ // Flex & Alignment
+ 'flex items-center justify-between flex-wrap',
+ 'gap-2',
+
+ // Spacing
+ 'p-3',
+
+ // Shape
+ 'rounded-md',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border border-surface-200 dark:border-surface-700'
+ ]
+ },
+ start: {
+ class: 'flex items-center'
+ },
+ center: {
+ class: 'flex items-center'
+ },
+ end: {
+ class: 'flex items-center'
+ }
+};
diff --git a/src/presets/aura/tooltip/index.js b/src/presets/aura/tooltip/index.js
new file mode 100644
index 0000000..212f767
--- /dev/null
+++ b/src/presets/aura/tooltip/index.js
@@ -0,0 +1,45 @@
+export default {
+ root: ({ context }) => ({
+ class: [
+ // Position and Shadows
+ 'absolute',
+ 'shadow-md',
+ 'p-fadein',
+ // Spacing
+ {
+ 'py-0 px-1': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+ 'py-1 px-0': context?.top || context?.bottom
+ }
+ ]
+ }),
+ arrow: ({ context }) => ({
+ class: [
+ // Position
+
+ 'absolute',
+
+ // Size
+ 'w-0',
+ 'h-0',
+
+ // Shape
+ 'border-transparent',
+ 'border-solid',
+ {
+ 'border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+ 'border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700': context?.left,
+ 'border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700': context?.top,
+ 'border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700': context?.bottom
+ },
+
+ // Spacing
+ {
+ '-mt-[10px] top-1/2': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
+ '-ml-[10px] left-1/2': context?.top || context?.bottom
+ }
+ ]
+ }),
+ text: {
+ class: ['p-3', 'bg-surface-700', 'text-white', 'leading-none', 'rounded-md', 'whitespace-pre-line', 'break-words']
+ }
+};
diff --git a/src/presets/aura/tree/index.js b/src/presets/aura/tree/index.js
new file mode 100644
index 0000000..d67cf9f
--- /dev/null
+++ b/src/presets/aura/tree/index.js
@@ -0,0 +1,116 @@
+export default {
+ root: {
+ class: [
+ // Space
+ 'p-4',
+
+ // Shape
+ 'rounded-md',
+ 'border-none',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+ '[&_[data-pc-name=pcfilter]]:w-full'
+ ]
+ },
+ wrapper: {
+ class: ['overflow-auto']
+ },
+ container: {
+ class: [
+ // Spacing
+ 'm-0 p-0',
+
+ // Misc
+ 'list-none overflow-auto'
+ ]
+ },
+ node: {
+ class: ['p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10']
+ },
+ nodeContent: ({ context, props }) => ({
+ class: [
+ // Flex and Alignment
+ 'flex items-center',
+
+ // Shape
+ 'rounded-md',
+
+ // Spacing
+ 'py-1 px-2 gap-2',
+
+ // Colors
+ context.selected ? 'bg-highlight text-primary-600 dark:text-white' : 'bg-transparent text-surface-600 dark:text-white/70',
+
+ // States
+ { 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+ // Transition
+ 'transition-shadow duration-200',
+
+ { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+ ]
+ }),
+ nodeToggleButton: ({ context }) => ({
+ class: [
+ // Flex and Alignment
+ 'inline-flex items-center justify-center',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Size
+ 'w-7 h-7',
+
+ // Colors
+ 'bg-transparent',
+ {
+ 'text-surface-600 dark:text-white/70': !context.selected,
+ 'text-primary-600 dark:text-white': context.selected,
+ invisible: context.leaf
+ },
+
+ // States
+ 'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'cursor-pointer select-none'
+ ]
+ }),
+ nodeIcon: ({ context }) => ({
+ class: [
+ // Space
+ 'mr-2',
+
+ // Color
+ {
+ 'text-surface-600 dark:text-white/70': !context.selected,
+ 'text-primary-600 dark:text-white': context.selected
+ }
+ ]
+ }),
+ nodeLabel: ({ context }) => ({
+ class: [
+ {
+ 'text-surface-600 dark:text-white/70': !context.selected,
+ 'text-primary-600 dark:text-white': context.selected
+ }
+ ]
+ }),
+ nodeChildren: {
+ class: ['m-0 list-none p-0 pl-4 [&:not(ul)]:pl-0 [&:not(ul)]:my-[2px]']
+ },
+ loadingIcon: {
+ class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+ }
+ // pcFilterContainer: {
+ // root: {
+ // class: '[&>[data-pc-name=inputtext]]:w-full'
+ // }
+ // }
+};
diff --git a/src/presets/aura/treeselect/index.js b/src/presets/aura/treeselect/index.js
new file mode 100644
index 0000000..00c74e6
--- /dev/null
+++ b/src/presets/aura/treeselect/index.js
@@ -0,0 +1,99 @@
+export default {
+ root: ({ props, state }) => ({
+ class: [
+ // Display and Position
+ 'inline-flex',
+ 'relative',
+
+ // Shape
+ 'rounded-md',
+
+ // Color and Background
+ { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+ 'border',
+ { 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+ // Invalid State
+ 'invalid:focus:ring-red-200',
+ 'invalid:hover:border-red-500',
+ { 'border-red-500 dark:border-red-400': props.invalid },
+
+ // Transitions
+ 'transition-all',
+ 'duration-200',
+
+ // States
+ { 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
+ { 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+
+ // Misc
+ 'cursor-pointer',
+ 'select-none',
+ { 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
+ ]
+ }),
+ labelContainer: {
+ class: ['overflow-hidden flex flex-auto cursor-pointer']
+ },
+ label: {
+ class: [
+ 'block leading-[normal]',
+
+ // Space
+ 'py-2 px-3',
+
+ // Color
+ 'text-surface-800 dark:text-white/80',
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
+ ]
+ },
+ dropdown: {
+ class: [
+ // Flexbox
+ 'flex items-center justify-center',
+ 'shrink-0',
+
+ // Color and Background
+ 'bg-transparent',
+ 'text-surface-500',
+
+ // Size
+ 'w-12',
+
+ // Shape
+ 'rounded-r-md'
+ ]
+ },
+ panel: {
+ class: [
+ // Colors
+ 'bg-surface-0 dark:bg-surface-900',
+ 'text-surface-700 dark:text-white/80',
+
+ // Shape
+ 'border border-surface-300 dark:border-surface-700',
+ 'rounded-md',
+ 'shadow-md'
+ ]
+ },
+ treeContainer: {
+ class: [
+ // Sizing
+ 'max-h-[200px]',
+
+ // Misc
+ 'overflow-auto'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+};
diff --git a/src/presets/aura/treetable/index.js b/src/presets/aura/treetable/index.js
new file mode 100644
index 0000000..48d7c6a
--- /dev/null
+++ b/src/presets/aura/treetable/index.js
@@ -0,0 +1,314 @@
+export default {
+ root: ({ props }) => ({
+ class: [
+ 'relative',
+ {
+ 'flex flex-col h-full': props.scrollHeight === 'flex'
+ }
+ ]
+ }),
+ mask: {
+ class: [
+ // Position
+ 'absolute',
+ 'top-0 left-0',
+ 'z-20',
+
+ // Flex & Alignment
+ 'flex items-center justify-center',
+
+ // Size
+ 'w-full h-full',
+
+ // Color
+ 'bg-surface-100/40 dark:bg-surface-800/40',
+
+ // Transition
+ 'transition duration-200'
+ ]
+ },
+ loadingIcon: {
+ class: 'w-8 h-8 animate-spin'
+ },
+ tableContainer: ({ props }) => ({
+ class: [
+ // Overflow
+ {
+ 'relative overflow-auto': props.scrollable,
+ 'overflow-x-auto': props.resizableColumns
+ }
+ ]
+ }),
+ header: ({ props }) => ({
+ class: [
+ 'font-semibold',
+
+ // Shape
+ props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0',
+
+ // Spacing
+ 'p-4',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+ 'text-surface-700 dark:text-white/80'
+ ]
+ }),
+ footer: {
+ class: [
+ 'font-semibold',
+
+ // Shape
+ 'border-t-0 border-b border-x-0',
+
+ // Spacing
+ 'p-4',
+
+ // Color
+ 'bg-surface-0 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+ 'text-surface-700 dark:text-white/80'
+ ]
+ },
+ table: {
+ class: [
+ // Table & Width
+ 'border-collapse table-fixed w-full '
+ ]
+ },
+ thead: ({ props }) => ({
+ class: [
+ // Position & Z-index
+ {
+ 'top-0 z-40 sticky': props.scrollable
+ }
+ ]
+ }),
+ tbody: ({ props }) => ({
+ class: [
+ // Block Display
+ {
+ block: props.scrollable
+ }
+ ]
+ }),
+ tfoot: ({ props }) => ({
+ class: [
+ // Block Display
+ {
+ block: props.scrollable
+ }
+ ]
+ }),
+ headerRow: ({ props }) => ({
+ class: [
+ // Flexbox & Width
+ {
+ 'flex flex-nowrap w-full': props.scrollable
+ }
+ ]
+ }),
+ row: ({ context, props }) => ({
+ class: [
+ // Flex
+ { 'flex flex-nowrap w-full': context.scrollable },
+
+ // Color
+ 'text-surface-700 dark:text-white/80',
+ { 'bg-highlight': context.selected },
+ { 'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected },
+
+ // Hover & Flexbox
+ {
+ 'hover:bg-surface-100 dark:bg-surface-800/50': context.selectable && !context.selected
+ },
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400',
+
+ // Transition
+ { 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
+ ]
+ }),
+ headerCell: ({ context, props }) => ({
+ class: [
+ 'font-semibold',
+ 'leading-[normal]',
+
+ // Position
+ { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+ // Flex & Alignment
+ {
+ 'flex flex-1 items-center': context.scrollable,
+ 'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+ },
+ 'text-left',
+
+ // Shape
+ { 'first:border-l border-y border-r': context?.showGridlines },
+ 'border-0 border-b border-solid',
+
+ // Spacing
+ context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+ // Color
+ (props.sortable === '' || props.sortable) && context.sorted ? 'bg-highlight' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+
+ // States
+ { 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transition
+ { 'transition duration-200': props.sortable === '' || props.sortable },
+
+ // Misc
+ {
+ 'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+ }
+ ]
+ }),
+ column: {
+ headerCell: ({ context, props }) => ({
+ class: [
+ 'font-semibold',
+ 'leading-[normal]',
+
+ // Position
+ { 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
+
+ // Flex & Alignment
+ {
+ 'flex flex-1 items-center': context.scrollable,
+ 'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+ },
+ 'text-left',
+
+ // Shape
+ { 'first:border-l border-y border-r': context?.showGridlines },
+ 'border-0 border-b border-solid',
+
+ // Spacing
+ context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+ // Color
+ (props.sortable === '' || props.sortable) && context.sorted ? 'bg-highlight' : 'bg-surface-0 text-surface-700 dark:text-white/80 dark:bg-surface-900',
+ 'border-surface-200 dark:border-surface-700',
+
+ // States
+ { 'hover:bg-surface-100 dark:hover:bg-surface-80/50': (props.sortable === '' || props.sortable) && !context?.sorted },
+ 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+ // Transition
+ { 'transition duration-200': props.sortable === '' || props.sortable },
+
+ // Misc
+ {
+ 'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+ }
+ ]
+ }),
+ bodyCell: ({ context }) => ({
+ class: [
+ // Font
+ 'leading-[normal]',
+
+ // Position
+ {
+ sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
+ },
+
+ // Flex & Alignment
+ {
+ 'flex flex-1 items-center': context.scrollable,
+ 'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
+ },
+ 'text-left',
+
+ // Shape
+ 'border-0 border-b border-solid',
+ 'border-surface-200 dark:border-surface-700',
+ {
+ 'border-x-0 border-l-0': !context.showGridlines
+ },
+ { 'first:border-l border-r border-b': context?.showGridlines },
+
+ // Spacing
+ context?.size === 'small' ? 'py-[0.375rem] px-2' : context?.size === 'large' ? 'py-[0.9375rem] px-5' : 'py-3 px-4',
+
+ // Misc
+ {
+ 'cursor-pointer': context.selectable,
+ sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+ 'border-x-0 border-l-0': !context.showGridlines
+ }
+ ]
+ }),
+ bodyCellContent: 'flex items-center gap-2',
+ rowToggleButton: {
+ class: [
+ 'relative',
+
+ // Flex & Alignment
+ 'inline-flex items-center justify-center',
+ 'text-left align-middle',
+
+ // Spacing
+ 'm-0 mr-2 p-0',
+
+ // Size
+ 'w-7 h-7',
+
+ // Shape
+ 'border-0 rounded-full',
+
+ // Color
+ 'text-surface-700 dark:text-white/70',
+ 'border-transparent',
+
+ // States
+ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+ 'hover:text-surface-700 hover:bg-surface-50 dark:hover:bg-surface-800/50',
+
+ // Transition
+ 'transition duration-200',
+
+ // Misc
+ 'overflow-hidden',
+ 'cursor-pointer select-none'
+ ]
+ },
+ sortIcon: ({ context }) => ({
+ class: ['ml-2 inline-block', context.sorted ? 'text-inherit' : 'fill-surface-700 dark:fill-white/70']
+ }),
+ columnResizer: {
+ class: [
+ 'block',
+
+ // Position
+ 'absolute top-0 right-0',
+
+ // Sizing
+ 'w-2 h-full',
+
+ // Spacing
+ 'm-0 p-0',
+
+ // Color
+ 'border border-transparent',
+
+ // Misc
+ 'cursor-col-resize'
+ ]
+ },
+ transition: {
+ enterFromClass: 'opacity-0 scale-y-[0.8]',
+ enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+ leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+ leaveToClass: 'opacity-0'
+ }
+ },
+ columnResizeIndicator: {
+ class: 'absolute hidden w-[2px] z-20 bg-primary'
+ }
+};
diff --git a/src/scripts/class/api.ts b/src/scripts/class/api.ts
deleted file mode 100644
index c875fb9..0000000
--- a/src/scripts/class/api.ts
+++ /dev/null
@@ -1,757 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
-import { debug, error, info } from "@tauri-apps/plugin-log";
-import { fetch, type ClientOptions } from "@tauri-apps/plugin-http";
-import EventEmitter from "events";
-
-import Route from "./route";
-
-import Code from "../../assets/json/code.json";
-
-/**
- * 測站資訊
- */
-export interface StationInfo {
- /**
- * 測站郵遞區號 (地區編號)
- */
- code: keyof typeof Code;
- /**
- * 測站經度
- */
- lon: number;
- /**
- * 測站緯度
- */
- lat: number;
- /**
- * 測站安裝時間
- */
- time: string;
-}
-
-/**
- * TREM 測站
- */
-export interface Station {
- /**
- * 測站種類
- */
- net: string;
- /**
- * 測站資訊
- */
- info: StationInfo[];
- city: string;
- town: string;
- /**
- * 測站是否運作
- */
- work: boolean;
-}
-
-export interface WebSocketConnectionConfig {
- type?: string;
- key?: string;
- service?: (
- | "trem.rts"
- | "websocket.eew"
- | "websocket.report"
- | "websocket.tsunami"
- | "trem.intensity"
- | "cwa.intensity"
- )[];
-}
-
-/**
- * 部分地震報告
- */
-export interface PartialReport {
- /**
- * 地震報告 ID
- */
- id: string;
- /**
- * 地震震央經度
- */
- lon: number;
- /**
- * 地震震央緯度
- */
- lat: number;
- /**
- * 地震位置敘述
- */
- loc: string;
- /**
- * 地震深度
- */
- depth: number;
- /**
- * 地震芮氏規模
- */
- mag: number;
- /**
- * 地震觀測最大震度
- */
- int: number;
- /**
- * 地震發生時間
- */
- time: number;
- /**
- * TREM 觀測網 ID
- */
- trem: number;
- /**
- * 地震報告編號
- */
- no: number;
- /**
- * 地震報告完整性
- */
- md5: string;
-}
-
-/**
- * 測站觀測資料
- */
-export interface StationIntensity {
- /**
- * 測站名稱
- */
- station: string;
- /**
- * 測站經度
- */
- lon: number;
- /**
- * 測站緯度
- */
- lat: number;
- /**
- * 測站最大觀測震度
- */
- int: number;
-}
-
-/**
- * 區域觀測資料
- */
-export interface AreaIntensity {
- /**
- * 區域名稱
- */
- area: string;
- /**
- * 區域最大觀測震度
- */
- int: number;
- /**
- * 區域內測站觀測資料
- */
- stations: StationIntensity[];
-}
-
-/**
- * 地震報告
- */
-export interface Report extends Omit
+
+
+ 觀測點資料
+ 選擇即時地動資料在地圖上的呈現方式
+
+
+
+
+
diff --git a/src/view/EarthquakeView.vue b/src/view/EarthquakeView.vue
new file mode 100644
index 0000000..6352e8b
--- /dev/null
+++ b/src/view/EarthquakeView.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/view/FileDropOverlayView.vue b/src/view/FileDropOverlayView.vue
new file mode 100644
index 0000000..e58060d
--- /dev/null
+++ b/src/view/FileDropOverlayView.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
diff --git a/src/view/LoginView.vue b/src/view/LoginView.vue
new file mode 100644
index 0000000..6482abe
--- /dev/null
+++ b/src/view/LoginView.vue
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/view/ReplayView.d.ts b/src/view/ReplayView.d.ts
new file mode 100644
index 0000000..6d3b4d2
--- /dev/null
+++ b/src/view/ReplayView.d.ts
@@ -0,0 +1,29 @@
+import type { EewSource, EewType, Rts } from "@exptechtw/api-wrapper";
+
+export type Events = {
+ frame: number;
+ type: EewSource | "rts" | "nsspe";
+ label: string;
+};
+
+export type RtsEewData = {
+ rts: Rts;
+ eew: EewType[];
+ time: number;
+};
+
+export type RtsFrame = {
+ type: "rts";
+ data: Rts;
+ time: number;
+ sound: string[];
+};
+
+export type EewFrame = {
+ type: "eew";
+ data: EewType;
+ time: number;
+ sound: string[];
+};
+
+export type Frame = RtsFrame | EewFrame;
\ No newline at end of file
diff --git a/src/view/ReplayView.vue b/src/view/ReplayView.vue
new file mode 100644
index 0000000..477e643
--- /dev/null
+++ b/src/view/ReplayView.vue
@@ -0,0 +1,396 @@
+
+
+
+
+
+
+
+
diff --git a/src/view/ReportListView.vue b/src/view/ReportListView.vue
new file mode 100644
index 0000000..f7fa8cb
--- /dev/null
+++ b/src/view/ReportListView.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 817b917..fc81239 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,10 +2,6 @@
declare module "*.vue" {
import type { DefineComponent } from "vue";
- const component: DefineComponent<
- NonNullable
+
+
+
+
+
+
+
+ {{
+ report.no % 1000
+ ? `第 ${report.no % 1000} 號有感地震`
+ : extractLocationFromString(report.loc)
+ }}
+
+
+ {{ toFormattedTimeString(report.time) }}
+
+ 規模 M {{ report.mag.toFixed(1) }} 深度 {{ report.depth }} km
+
+
+
+
+
+
+
+
+