@ithinkdt/ui 4.0.0-50 → 4.0.0-501

package/dist/use-style.js

@@ -1,2 +1,2 @@
-import { a as flex, c as flexDirCol, d as flexJustifySB, f as fullHeight, g as useStyle, h as useMergedClsPrefix, i as cM, l as flexGap, m as fullWidth, n as cB, o as flexAlignCenter, p as fullWH, r as cE, s as flexCenter, t as c, u as flexJustifyCenter } from "./use-style-DcT-1dj4.js";
+import { a as flex, c as flexDirCol, d as flexJustifySB, f as fullHeight, g as useStyle, h as useMergedClsPrefix, i as cM, l as flexGap, m as fullWidth, n as cB, o as flexAlignCenter, p as fullWH, r as cE, s as flexCenter, t as c, u as flexJustifyCenter } from "./use-style-mj2B1q0l.js";
 export { c, cB, cE, cM, useStyle as default, flex, flexAlignCenter, flexCenter, flexDirCol, flexGap, flexJustifyCenter, flexJustifySB, fullHeight, fullWH, fullWidth, useMergedClsPrefix as useClsPrefix };

package/esm/components.d.ts

@@ -1,5 +1,8 @@
 import {
-    CheckboxGroupProps, DataTableInst as NDataTableInst, DataTableProps as NDataTableProps,
+    AnchorProps,
+    ButtonProps,
+    ButtonSlots,
+    CheckboxGroupProps, DataTableInst as NDataTableInst, DataTableProps as NDataTableProps, FlexProps,
     FormItemGiProps as NFormItemGiProps, FormProps as NFormProps, GridItemProps as NGridItemProps, GridProps as NGridProps,
     PopoverProps,
     RadioGroupProps, TransferProps,
@@ -10,12 +13,18 @@ import type { CSSProperties, HTMLAttributes, TemplateRef } from 'vue'
 
 import { GenericCtx, GenericExposed, GenericReturn, MaybeArray, MaybePromise, PublicProps } from '@ithinkdt/common'
 import { DictItem } from '@ithinkdt/common/dict'
-import { FormItem, PageParams, PresetKeyField, SortParams, TableActionRenderParam, TableColumn, ValidationResults, _DataWithPresetKeyField } from '@ithinkdt/page'
+import { DescriptionItem, FormItem, PageParams, PresetKeyField, SortParams, TableActionRenderParam, TableColumn, TableTypePresets, ValidationResults, _DataWithPresetKeyField } from '@ithinkdt/page'
 
 declare module '@ithinkdt/page' {
 
     interface FormRenderExtraOptions {
         showColon?: MaybeRef<boolean | undefined>
+        labelWidth?: MaybeRef<string | number | undefined>
+        labelAlign?: MaybeRef<'left' | 'right' | 'center' | undefined>
+        labelPlacement?: MaybeRef<'left' | 'top' | undefined>
+        showRequireMark?: MaybeRef<boolean | undefined>
+        requireMarkPlacement?: MaybeRef<'left' | 'right' | 'right-hanging' | undefined>
+        showFeedback?: MaybeRef<boolean | undefined>
     }
 
     type FormItemOptionKeys = 'size' | 'showLabel' | 'labelWidth' | 'labelStyle' | 'labelAlign' | 'labelPlacement' | 'labelProps'
@@ -45,19 +54,35 @@ declare module '@ithinkdt/page' {
     interface FormItemRenderExtraParams {
         size?: 'small' | 'medium' | 'large' | undefined
     }
+}
 
+export type NStateButtonProps = ButtonProps & {
+    succeeded?: boolean | null | undefined
+    successText?: string | undefined
+    failureText?: string | undefined
 }
 
-export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules' | 'onSubmit' | 'validateMessages'> & {
-    items: FormItem<Data>[]
-    model: Data
-    readonly?: boolean | undefined
-    grid?: boolean | NGridProps | undefined
-    validation?: { [k in keyof Data]?: ValidationResults } | undefined
-    showColon?: boolean | undefined
-    loading?: boolean | undefined
-    showAction?: boolean | NGridItemProps & AllowedComponentProps | undefined
-    actionAlign?: 'start' | 'center' | 'end'
+export type NStateButtonEmits = {
+    (e: 'click', evt: MouseEvent): void
+}
+
+export type NStateButtonSlots = ButtonSlots & {
+    success?: () => VNodeChild
+    failure?: () => VNodeChild
+    successIcon?: () => VNodeChild
+    failureIcon?: () => VNodeChild
+}
+
+export declare function NStateButton(
+    props: NStateButtonProps & PublicProps,
+    ctx?: Pick<GenericCtx<NStateButtonProps, NStateButtonEmits, NStateButtonSlots>, 'attrs' | 'emit' | 'slots'>,
+    expose?: (exposed?: GenericExposed) => void,
+    setup?: GenericCtx<NStateButtonProps, NStateButtonEmits, NStateButtonSlots>,
+): GenericReturn<NStateButtonProps, NStateButtonEmits, NStateButtonSlots>
+
+export type DataFormActionsProps = Pick<FlexProps, 'align' | 'justify' | 'vertical' | 'reverse'> & {
+    size?: 'small' | 'medium' | 'large' | undefined
+    gap?: number | string | undefined
     submitText?: VNodeChild | undefined
     resetText?: VNodeChild | undefined
     cancelText?: VNodeChild | undefined
@@ -65,21 +90,61 @@ export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules'
     showResetBtn?: boolean | undefined
     showCancelBtn?: boolean | undefined
     submitDisabled?: boolean | undefined
+    submitLoading?: boolean | undefined
     succeeded?: boolean | undefined
     successText?: VNodeChild | undefined
-
-    tooltipPlacement?: 'bottom' | 'icon' | undefined
-    onSubmit?: MaybeArray<(model: Data) => void> | undefined
+    failureText?: VNodeChild | undefined
+    onSubmit?: MaybeArray<() => void> | undefined
     onRest?: MaybeArray<() => void> | undefined
+    onCancel?: MaybeArray<() => void> | undefined
+    nativeButtonType?: boolean | undefined
+}
+
+export type DataFormActionsEmits = {
+    (e: 'submit'): void
+    (e: 'reset'): void
+    (e: 'cancel'): void
+}
+
+export type DataFormActionsSlots = {
+    prefix?: () => VNodeChild
+    suffix?: () => VNodeChild
 }
 
+export declare function DataFormActions(
+    props: DataFormActionsProps & PublicProps,
+    ctx?: Pick<GenericCtx<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>, 'attrs' | 'emit' | 'slots'>,
+    expose?: (exposed?: GenericExposed) => void,
+    setup?: GenericCtx<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>,
+): GenericReturn<DataFormActionsProps, DataFormActionsEmits, DataFormActionsSlots>
+
+export type DataFormProps<Data extends {}> = Omit<NFormProps, 'model' | 'rules' | 'onSubmit' | 'validateMessages'>
+    & Omit<DataFormActionsProps, 'onSubmit' | 'size' | 'gap' | 'justify' | 'direction' | 'submitloading'> & {
+        items: FormItem<Data>[]
+        model: Data
+        readonly?: boolean | undefined
+        grid?: boolean | NGridProps | undefined
+        validation?: { [k in keyof Data]?: ValidationResults } | undefined
+        showColon?: boolean | undefined
+        tooltipPlacement?: 'bottom' | 'icon' | undefined
+        loading?: boolean | undefined
+        showAction?: boolean | NGridItemProps & AllowedComponentProps | undefined
+        actionJustify?: DataFormActionsProps['justify']
+        actionAlign?: DataFormActionsProps['align']
+        actionGap?: DataFormActionsProps['gap']
+        onSubmit?: MaybeArray<(model: Data) => void> | undefined
+    }
+
 export type DataFormEmits<Data extends {}> = {
     (e: 'submit', model: Data): void
     (e: 'reset'): void
+    (e: 'cancel'): void
 }
 
 export type DataFormSlots<_Data extends {}> = {
     action?: (params: { cols: number, spans: number, overflow: boolean }) => VNodeChild
+    actionPrefix?: () => VNodeChild
+    actionSuffix?: () => VNodeChild
 }
 
 export type DataFormInst = {
@@ -367,6 +432,7 @@ export interface UserGroupOption {
     name: string
 }
 export interface DeptOption {
+    id?: string | undefined
     code: string
     name: string
     children?: DeptOption[]
@@ -381,8 +447,9 @@ interface UserDeptProps<Multiple extends boolean> {
     'defaultExpandAll'?: boolean | undefined
     'filterable'?: boolean | undefined
     'disabled'?: boolean | undefined
-    'size'?: TransferProps['size'] | undefined
-    'users'?: { username: string, nickname: string }[] | undefined
+    'size'?: TransferProps['size']
+    'valueField'?: 'id' | 'username' | 'code' | undefined
+    'users'?: { id?: string | undefined, username: string, nickname: string }[] | undefined
     'groups'?: UserGroupOption[] | undefined
     'depts'?: DeptOption[] | undefined
     'getUsersByGroup'?: ((code: string) => Promise<{ username: string, nickname: string }[]>) | undefined
@@ -397,12 +464,12 @@ interface UserDeptEmits<Multiple extends boolean> {
     (e: 'updateModelValue', value: Multiple extends true ? string[] : string): void
 }
 
-export declare const DtUserDept: <Multiple extends boolean>(
+export declare function DtUserDept<Multiple extends boolean>(
     props: UserDeptProps<Multiple> & PublicProps,
     ctx?: Pick<GenericCtx<UserDeptProps<Multiple>, UserDeptEmits<Multiple>>, 'attrs' | 'emit' | 'slots'>,
     expose?: (exposed?: GenericExposed<{}>) => void,
     setup?: GenericCtx<UserDeptProps<Multiple>, UserDeptEmits<Multiple>, {}, {}>,
-) => GenericReturn<UserDeptProps<Multiple>, UserDeptEmits<Multiple>, {}, {}>
+): GenericReturn<UserDeptProps<Multiple>, UserDeptEmits<Multiple>, {}, {}>
 
 interface UserRenderProps {
     value?: string | string[] | null | undefined
@@ -438,3 +505,21 @@ export declare const DtDeptRender: (
     expose?: (exposed?: GenericExposed<{}>) => void,
     setup?: GenericCtx<DeptRenderProps, DeptRenderEmits, {}, {}>,
 ) => GenericReturn<DeptRenderProps, DeptRenderEmits, {}, {}>
+
+export interface DataDescriptionsProps<Data extends object> {
+    cols?: number
+    data: Data | undefined | null
+    items: DescriptionItem<Data>[]
+    title?: VNodeChild | ((data: Data | undefined) => VNodeChild)
+    anchor?: boolean | AnchorProps & AllowedComponentProps | undefined
+}
+
+export interface DataDescriptionsEmits {
+}
+
+export declare function DataDescriptions<Data extends {}>(
+    props: DataDescriptionsProps<Data> & PublicProps,
+    ctx?: Pick<GenericCtx<DataDescriptionsProps<Data>, DataDescriptionsEmits>, 'attrs' | 'emit' | 'slots'>,
+    expose?: (exposed?: GenericExposed<{}>) => void,
+    setup?: GenericCtx<DataDescriptionsProps<Data>, DataDescriptionsEmits, {}, {}>,
+): GenericReturn<DataDescriptionsProps<Data>, DataDescriptionsEmits, {}, {}>

package/esm/page.d.ts

@@ -1,10 +1,7 @@
 import {
-    CheckboxProps,
-    DatePickerProps, DatePickerSlots,
-    DrawerContentProps, DrawerProps,
+    CheckboxProps, DatePickerProps, DatePickerSlots, DrawerContentProps, DrawerProps,
     InputNumberProps, InputNumberSlots, InputProps, InputSlots,
-    ModalOptions,
-    SelectGroupOption, SelectOption, SelectProps, SelectSlots,
+    ModalOptions, SelectGroupOption, SelectOption, SelectProps, SelectSlots,
     UploadFileInfo, UploadProps,
 } from 'ithinkdt-ui'
 import { MaybeRef, VNode } from 'vue'
@@ -26,7 +23,9 @@ declare module '@ithinkdt/page' {
             inputSlots?: InputSlots
         }
         number: {
-            numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'> & PublicProps & {
+                valueType?: 'string' | 'number' | undefined
+            }>
             numberSlots?: InputNumberSlots
         }
         select: {
@@ -34,12 +33,13 @@ declare module '@ithinkdt/page' {
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
+                valueType?: 'string' | 'number' | undefined
             }>
             selectSlots?: SelectSlots
         }
 
         checkbox: {
-            checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & PublicProps
+            checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'> & PublicProps>
             checkboxSlots?: {
                 default?: (() => VNode[]) | undefined
                 checked?: (() => VNode[]) | undefined
@@ -52,6 +52,7 @@ declare module '@ithinkdt/page' {
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
+                valueType?: 'string' | 'number' | undefined
             }>
             checkboxesSlots?: { }
         }
@@ -61,12 +62,13 @@ declare module '@ithinkdt/page' {
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
+                valueType?: 'string' | 'number' | undefined
             }>
             radiosSlots?: { }
         }
 
         datepicker: {
-            datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'> & PublicProps>
             datepickerSlots?: DatePickerSlots
         }
 
@@ -98,52 +100,69 @@ declare module '@ithinkdt/page' {
         }
 
         user: {
-            uploadProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            userProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
             | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
-            uploadSlots?: {}
+            userSlots?: {}
         }
     }
 
-    interface TableTypePresets {
+    interface DescriptionTypePresets {
         number: {
-            /** 保留 n 位小数（保留 0） */
-            fixed?: number | undefined
-            /** 保留 n 位小数（不保留 0） */
-            round?: number | undefined
-            /** 保留 n 位数（不保留 0） */
-            precision?: number | undefined
-            /** 使用数字分隔符 */
-            separator?: boolean | undefined
-            /** 是否为百分数 */
-            percent?: boolean | undefined
+            numberParams: ShallowMaybeRef<{
+                /** 保留 n 位小数（保留 0） */
+                fixed?: number | undefined
+                /** 保留 n 位小数（不保留 0） */
+                round?: number | undefined
+                /** 保留 n 位数（不保留 0） */
+                precision?: number | undefined
+                /** 使用数字分隔符 */
+                separator?: boolean | undefined
+                /** 是否为百分数 */
+                percent?: boolean | undefined
+            }>
         }
 
         date: {
-            formatter?: 'yyyy-MM-dd' | 'yyyy/MM/dd' | string & {} | undefined
+            dateParams: ShallowMaybeRef<{
+                formatter?: 'yyyy-MM-dd' | 'yyyy/MM/dd' | string & {} | undefined
+            }>
         }
 
         datetime: {
-            formatter?: 'yyyy-MM-dd HH:mm' | 'yyyy-MM-dd HH:mm:ss' | string & {} | undefined
+            datetimeParams: ShallowMaybeRef<{
+                formatter?: 'yyyy-MM-dd HH:mm' | 'yyyy-MM-dd HH:mm:ss' | string & {} | undefined
+            }>
         }
 
         dict: {
-            dictType?: DictTypeKey | undefined
-            options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
-            multiple?: boolean | undefined
-            labelField?: string | undefined
-            valueField?: string | undefined
-            statusMap?: Record<string, 'primary' | 'success' | 'warning' | 'danger' | string & {} | undefined> | undefined
+            dictParams: ShallowMaybeRef<{
+                dictType?: DictTypeKey | undefined
+                options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
+                multiple?: boolean | undefined
+                labelField?: string | undefined
+                valueField?: string | undefined
+                statusMap?: Record<string, 'primary' | 'success' | 'warning' | 'danger' | string & {} | undefined> | undefined
+            }>
         }
         email: {}
         url: {}
         color: {}
-        file: { multiple?: boolean | undefined }
-        image: { multiple?: boolean | undefined }
-        user: { multiple?: boolean | undefined }
-        dept: { multiple?: boolean | undefined }
+        file: {
+            fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
+        }
+        image: {
+            fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
+        }
+        user: {
+            fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
+        }
+        dept: {
+            fileParams: ShallowMaybeRef<{ multiple?: boolean | undefined }>
+        }
     }
 
-    type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptions
+    type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptionsBase
+
     interface ModalDrawerOptions extends ShallowMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, ShallowMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
 
     interface ModalDialogOptions extends ShallowMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
@@ -160,11 +179,11 @@ export declare function createPageFormHelper(options?: {
     }) => Promise<string>
     getFileInfos?: (files: string[]) => Promise<UploadFileInfo[]>
 }): PageOptions['getFormItemRenderer']
-export declare function createPageTableHelper(options?: {
+export declare function createDescriptionHelper(options?: {
     getUsersByUsername?: (usernames: string[]) => Promise<{ username: string, nickname: string }[]>
     getDeptsByCode?: (codes: string[]) => Promise<{ code: string, name: string }[]>
     getFileInfos?: (fileIds: string[]) => Promise<UploadFileInfo[]>
     previewFileUrl?: (fileId: string) => string
-}): PageOptions['getCellRenderer']
+}): PageOptions['getDescriptionRenderer']
 export declare function createFormHelper(options?: { }): PageOptions['getFormRenderer']
 export declare function createModalHelper(options?: { }): PageOptions['getModalRenderer']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-50",
+  "version": "4.0.0-501",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -14,7 +14,7 @@
     "esm",
     "auto-imports.*",
     "locale.*",
-    "unocss.*"
+    "unocss*"
   ],
   "main": "./esm/index.js",
   "module": "./esm/index.js",
@@ -48,8 +48,8 @@
       "default": "./auto-imports.js"
     },
     "./unocss": {
-      "types": "./unocss.d.ts",
-      "default": "./unocss.js"
+      "types": "./unocss-preset.d.ts",
+      "default": "./unocss-preset.js"
     }
   },
   "publishConfig": {
@@ -58,13 +58,13 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@vueuse/core": "^14.0.0",
+    "@vueuse/core": "^14.1.0",
     "date-fns": "^4.1.0",
     "vueuc": "^0.4.65",
     "sortablejs": "^1.15.6",
     "@types/sortablejs": "^1.15.9",
     "nanoid": "^5.1.6",
-    "@ithinkdt/common": "^4.0.0-50"
+    "@ithinkdt/common": "^4.0.0-500"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -82,14 +82,14 @@
     }
   },
   "devDependencies": {
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "ithinkdt-ui": "^1.8.0",
+    "@vitejs/plugin-vue-jsx": "^5.1.2",
+    "ithinkdt-ui": "^1.8.1",
     "typescript": "~5.9.3",
-    "unocss": ">=66.5.4",
-    "vite": "npm:rolldown-vite@^7.1.19",
-    "vue": "^3.5.22",
+    "unocss": ">=66.5.9",
+    "vite": "npm:rolldown-vite@^7.2.8",
+    "vue": "^3.5.25",
     "vue-router": "^4.6.3",
-    "@ithinkdt/page": "^4.0.0-50"
+    "@ithinkdt/page": "^4.0.0-502"
   },
   "scripts": {
     "dev": "vite build --watch",

package/unocss-preset.d.ts

@@ -0,0 +1,5 @@
+import { Preset, PresetWind4Theme } from 'unocss'
+
+declare const ithinkdt: (options?: { namespace?: string | undefined }) => Preset<PresetWind4Theme>[]
+
+export default ithinkdt

package/unocss-preset.js

@@ -0,0 +1,163 @@
+import { presetWind4, transformerDirectives, transformerVariantGroup } from 'unocss'
+
+const ithinkdt = (options = {}) => {
+    const { namespace: ns } = options
+
+    let wind4, postprocess
+    if (ns) {
+        wind4 = () => {
+            const plugin = presetWind4({
+                variablePrefix: `${ns}-`,
+                preflights: {
+                    reset: false,
+                    property: {
+                        selector: `.${ns} :where(*, ::before, ::after)`,
+                    },
+                },
+            })
+
+            return {
+                ...plugin,
+                preflights: plugin.preflights?.map((preflight) => {
+                    if (preflight.layer === 'theme') {
+                        return {
+                            ...preflight,
+                            async getCSS(ctx) {
+                                let result = await preflight.getCSS?.(ctx)
+                                if (result) {
+                                    result = result.replace(':root, :host', `.${ns}`)
+                                }
+                                return result
+                            },
+                        }
+                    } else if (preflight.layer === 'properties') {
+                        return {
+                            ...preflight,
+                            async getCSS(ctx) {
+                                let result = await preflight.getCSS?.(ctx)
+                                if (result) {
+                                    result = result
+                                        .replaceAll('--un-', `--${ns}-`)
+                                }
+                                return result
+                            },
+                        }
+                    }
+                    return preflight
+                }),
+            }
+        }
+        postprocess = [
+            (p) => {
+                if (p.selector.includes('--un-')) {
+                    p.selector = p.selector.replaceAll('--un-', `--${ns}-`)
+                } else if (p.selector.endsWith(String.raw`.\-`)) {
+                    if (p.selector.startsWith('.dark ')) {
+                        p.selector = `.dark & ${p.selector.slice(6)}`
+                    }
+                } else {
+                    p.selector = p.selector.startsWith('.dark ') ? `.dark .${ns} ${p.selector.slice(6)}` : `.${ns} ${p.selector}`
+                }
+            },
+        ]
+    } else { wind4 = presetWind4 }
+
+    const alphas = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+    const ithinkdt = {
+        name: 'preset-ithinkdt',
+        options,
+        theme: {
+            colors: {
+                ...Object.fromEntries(
+                    ['primary', 'success', 'warning', 'danger'].map(name => [
+                        name,
+                        {
+                            DEFAULT: `var(--color-${name})`,
+                            ...Object.fromEntries(alphas.map(alpha => [`${alpha}`, `color-mix(in oklab, var(--color-${name}) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`])),
+                            ...Object.fromEntries(
+                                ['hover', 'active'].flatMap(level => [
+                                    [level, `var(--color-${name}-${level})`],
+                                    ...alphas.map(alpha => [`${level}-${alpha}`, `color-mix(in oklab, var(--color-${name}-${level}) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`]),
+                                ]),
+                            ),
+                        },
+                    ]),
+                ),
+                text: {
+                    DEFAULT: `var(--color-text)`,
+                    ...Object.fromEntries(alphas.map(alpha => [`${alpha}`, `color-mix(in oklab, var(--color-text) ${alpha / 10}%, #fff ${(1000 - alpha) / 10}%)`])),
+                },
+                base: { DEFAULT: `var(--color-base)` },
+            },
+            radius: Object.fromEntries(
+                ['xs', 'sm', 'md', 'lg'].map(size => [size, `var(--rounded-${size})`]),
+            ),
+        },
+        variants: [
+            // stuck:
+            (matcher) => {
+                const array = ['top', 'right', 'bottom', 'left']
+                const index = array.findIndex(it => matcher.startsWith(`stuck-${it}:`))
+                if (index === -1)
+                    return matcher
+                return {
+                    matcher: matcher.slice(7 + array[index].length),
+                    handle: (input, next) => next({
+                        ...input,
+                        parent: `${input.parent ? `${input.parent} $$ ` : ''} @container scroll-state(stuck: ${array[index]})`,
+                    }),
+                }
+            },
+        ],
+        rules: [
+            ['scroll-state', { 'container-type': 'scroll-state' }],
+            [
+                /^bg-img-(.*)$/,
+                ([_, r]) => {
+                    return {
+                        'background-image': r[0] === '[' && r.at(-1) === ']' ? r.slice(1, -1) : r,
+                    }
+                },
+            ],
+            [
+                /^mask-(.*)$/,
+                ([_, r]) => {
+                    const mask = `var(--un-icon) no-repeat`
+                    return {
+                        '--un-icon': r[0] === '[' && r.at(-1) === ']' ? r.slice(1, -1) : r,
+                        mask,
+                        'mask-size': '100% 100%',
+                    }
+                },
+            ],
+        ],
+        shortcuts: [
+            [
+                /^card-(.*)$/,
+                ([_, size]) => {
+                    const i = ['none', 'sm', 'md', 'lg'].indexOf(size)
+                    if (i === -1) return
+                    const p = [0, 2, 4, 5][i]
+                    return `rounded-${size} px-${p + 1} py-${p} bg-white dark:bg-dark ease-in-out transition-shadow 
+                       hover:shadow-[0_1px_2px_0_rgba(0_0_0_/_0.03),0_1px_6px_-1px_rgba(0_0_0_/_0.02),0_2px_4px_0_rgba(0_0_0_/_0.02)]`
+                },
+                { autocomplete: ['card-none', 'card-sm', 'card-md', 'card-lg'] },
+            ],
+            {
+                'ell': 'truncate',
+                'ell-2': 'line-clamp-2',
+                'ell-3': 'line-clamp-3',
+                'flex-center': 'flex justify-center items-center',
+                'card': `card-md`,
+            },
+        ],
+        transformers: [transformerDirectives(), transformerVariantGroup()],
+        postprocess: postprocess,
+    }
+    return [
+        wind4(),
+        ithinkdt,
+    ]
+}
+
+export default ithinkdt