@shuriken-ui/tailwind 1.0.0-beta.3 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/preset.cjs +0 -185
- package/dist/preset.mjs +0 -185
- package/package.json +1 -1
package/dist/preset.cjs
CHANGED
|
@@ -3201,190 +3201,6 @@ const checkbox = plugin__default.withOptions(
|
|
|
3201
3201
|
}
|
|
3202
3202
|
);
|
|
3203
3203
|
|
|
3204
|
-
const defaultCheckboxAnimatedConfig = {
|
|
3205
|
-
size: "8",
|
|
3206
|
-
rounded: "full",
|
|
3207
|
-
label: {
|
|
3208
|
-
disabledOpacity: "75",
|
|
3209
|
-
inner: {
|
|
3210
|
-
duration: "300"
|
|
3211
|
-
}
|
|
3212
|
-
},
|
|
3213
|
-
default: {
|
|
3214
|
-
color: "muted-600",
|
|
3215
|
-
colorDark: "muted-200"
|
|
3216
|
-
},
|
|
3217
|
-
light: "white",
|
|
3218
|
-
muted: "muted-400",
|
|
3219
|
-
primary: "primary-500",
|
|
3220
|
-
info: "info-500",
|
|
3221
|
-
success: "success-500",
|
|
3222
|
-
warning: "warning-500",
|
|
3223
|
-
danger: "danger-500"
|
|
3224
|
-
};
|
|
3225
|
-
const checkboxAnimated = plugin__default.withOptions(
|
|
3226
|
-
function(options) {
|
|
3227
|
-
let { prefix } = defu.defu(options, defaultPluginOptions);
|
|
3228
|
-
if (prefix) {
|
|
3229
|
-
prefix = `${prefix}-`;
|
|
3230
|
-
}
|
|
3231
|
-
return function({ addComponents, theme }) {
|
|
3232
|
-
const config = theme(
|
|
3233
|
-
"shurikenUi.checkboxAnimated"
|
|
3234
|
-
);
|
|
3235
|
-
const keyframes = {
|
|
3236
|
-
"@keyframes stroke": {
|
|
3237
|
-
"100%": {
|
|
3238
|
-
"stroke-dashoffset": "0"
|
|
3239
|
-
}
|
|
3240
|
-
},
|
|
3241
|
-
"@keyframes reverseCircle": {
|
|
3242
|
-
from: {
|
|
3243
|
-
"stroke-dashoffset": "0"
|
|
3244
|
-
},
|
|
3245
|
-
to: {
|
|
3246
|
-
"stroke-dashoffset": "166"
|
|
3247
|
-
}
|
|
3248
|
-
},
|
|
3249
|
-
"@keyframes reverseCheck": {
|
|
3250
|
-
from: {
|
|
3251
|
-
"stroke-dashoffset": "0"
|
|
3252
|
-
},
|
|
3253
|
-
to: {
|
|
3254
|
-
"stroke-dashoffset": "48"
|
|
3255
|
-
}
|
|
3256
|
-
}
|
|
3257
|
-
};
|
|
3258
|
-
addComponents({
|
|
3259
|
-
[`.${prefix}checkbox-animated`]: {
|
|
3260
|
-
[`@apply ${prefix}focus relative h-${config.size} w-${config.size} rounded-${config.rounded} focus-within:outline-current`]: {},
|
|
3261
|
-
[`.${prefix}checkbox-animated-input`]: {
|
|
3262
|
-
[`@apply cursor-pointer disabled:cursor-not-allowed absolute h-full w-full opacity-0 z-[1] left-0 top-0`]: {}
|
|
3263
|
-
},
|
|
3264
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3265
|
-
[`@apply relative h-${config.size} w-${config.size} disabled:opacity-75`]: {},
|
|
3266
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3267
|
-
[`@apply absolute h-${config.size} w-${config.size} border border-solid z-0 opacity-100 transition-all duration-${config.label.inner.duration} rounded-full left-0 top-0`]: {},
|
|
3268
|
-
[`&.${prefix}is-opaque`]: {
|
|
3269
|
-
[`@apply opacity-0`]: {}
|
|
3270
|
-
}
|
|
3271
|
-
},
|
|
3272
|
-
[`&:deep(svg circle)`]: {
|
|
3273
|
-
[`@apply h-${config.size} w-${config.size} stroke-2 stroke-current fill-none`]: "",
|
|
3274
|
-
"stroke-dasharray": "166",
|
|
3275
|
-
"stroke-dashoffset": "166",
|
|
3276
|
-
"stroke-miterlimit": "10"
|
|
3277
|
-
},
|
|
3278
|
-
[`&:deep(svg)`]: {
|
|
3279
|
-
[`@apply h-${config.size} w-${config.size} stroke-2 text-current stroke-current shadow-[inset_0_0_0_currentColor] mx-auto my-0 rounded-full`]: "",
|
|
3280
|
-
"stroke-miterlimit": "10"
|
|
3281
|
-
},
|
|
3282
|
-
[`&:deep(svg path)`]: {
|
|
3283
|
-
[`@apply origin-[50%_50%] stroke-current`]: "",
|
|
3284
|
-
"stroke-dasharray": "48",
|
|
3285
|
-
"stroke-dashoffset": "48"
|
|
3286
|
-
}
|
|
3287
|
-
},
|
|
3288
|
-
[`&.${prefix}checked`]: {
|
|
3289
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3290
|
-
[`&:deep(svg circle)`]: {
|
|
3291
|
-
"@apply animate-[stroke_0.6s_cubic-bezier(0.65,0,0.45,1)_both]": {}
|
|
3292
|
-
},
|
|
3293
|
-
[`&:deep(svg path)`]: {
|
|
3294
|
-
"@apply animate-[stroke_0.3s_cubic-bezier(0.65,0,0.45,1)_0.8s_both]": {}
|
|
3295
|
-
}
|
|
3296
|
-
}
|
|
3297
|
-
},
|
|
3298
|
-
[`&.${prefix}unchecked`]: {
|
|
3299
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3300
|
-
[`&:deep(svg circle)`]: {
|
|
3301
|
-
"@apply animate-[reverseCircle_0.6s_cubic-bezier(0.65,0,0.45,1)_0.2s_both]": {}
|
|
3302
|
-
},
|
|
3303
|
-
[`&:deep(svg path)`]: {
|
|
3304
|
-
"@apply animate-[reverseCheck_0.3s_cubic-bezier(0.65,0,0.45,1)_0.1s_both]": {}
|
|
3305
|
-
}
|
|
3306
|
-
}
|
|
3307
|
-
},
|
|
3308
|
-
[`&.${prefix}checkbox-animated-default`]: {
|
|
3309
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3310
|
-
[`@apply text-${config.default.color} dark:text-${config.default.colorDark}`]: {},
|
|
3311
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3312
|
-
[`@apply border-${config.default.color} dark:border-${config.default.colorDark}`]: {}
|
|
3313
|
-
}
|
|
3314
|
-
}
|
|
3315
|
-
},
|
|
3316
|
-
[`&.${prefix}checkbox-animated-light`]: {
|
|
3317
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3318
|
-
[`@apply text-${config.light}`]: {},
|
|
3319
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3320
|
-
[`@apply border-${config.light}`]: {}
|
|
3321
|
-
}
|
|
3322
|
-
}
|
|
3323
|
-
},
|
|
3324
|
-
[`&.${prefix}checkbox-animated-muted`]: {
|
|
3325
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3326
|
-
[`@apply text-${config.muted}`]: {},
|
|
3327
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3328
|
-
[`@apply border-${config.muted}`]: {}
|
|
3329
|
-
}
|
|
3330
|
-
}
|
|
3331
|
-
},
|
|
3332
|
-
[`&.${prefix}checkbox-animated-primary`]: {
|
|
3333
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3334
|
-
[`@apply text-${config.primary}`]: {},
|
|
3335
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3336
|
-
[`@apply border-${config.primary}`]: {}
|
|
3337
|
-
}
|
|
3338
|
-
}
|
|
3339
|
-
},
|
|
3340
|
-
[`&.${prefix}checkbox-animated-info`]: {
|
|
3341
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3342
|
-
[`@apply text-${config.info}`]: {},
|
|
3343
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3344
|
-
[`@apply border-${config.info}`]: {}
|
|
3345
|
-
}
|
|
3346
|
-
}
|
|
3347
|
-
},
|
|
3348
|
-
[`&.${prefix}checkbox-animated-success`]: {
|
|
3349
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3350
|
-
[`@apply text-${config.success}`]: {},
|
|
3351
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3352
|
-
[`@apply border-${config.success}`]: {}
|
|
3353
|
-
}
|
|
3354
|
-
}
|
|
3355
|
-
},
|
|
3356
|
-
[`&.${prefix}checkbox-animated-warning`]: {
|
|
3357
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3358
|
-
[`@apply text-${config.warning}`]: {},
|
|
3359
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3360
|
-
[`@apply border-${config.warning}`]: {}
|
|
3361
|
-
}
|
|
3362
|
-
}
|
|
3363
|
-
},
|
|
3364
|
-
[`&.${prefix}checkbox-animated-danger`]: {
|
|
3365
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3366
|
-
[`@apply text-${config.danger}`]: {},
|
|
3367
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3368
|
-
[`@apply border-${config.danger}`]: {}
|
|
3369
|
-
}
|
|
3370
|
-
}
|
|
3371
|
-
}
|
|
3372
|
-
}
|
|
3373
|
-
});
|
|
3374
|
-
addComponents(keyframes);
|
|
3375
|
-
};
|
|
3376
|
-
},
|
|
3377
|
-
function() {
|
|
3378
|
-
return {
|
|
3379
|
-
theme: {
|
|
3380
|
-
shurikenUi: {
|
|
3381
|
-
checkboxAnimated: defaultCheckboxAnimatedConfig
|
|
3382
|
-
}
|
|
3383
|
-
}
|
|
3384
|
-
};
|
|
3385
|
-
}
|
|
3386
|
-
);
|
|
3387
|
-
|
|
3388
3204
|
const defaultCheckboxHeadlessConfig = {
|
|
3389
3205
|
label: {
|
|
3390
3206
|
text: "muted-400",
|
|
@@ -9971,7 +9787,6 @@ const components = [
|
|
|
9971
9787
|
button,
|
|
9972
9788
|
card,
|
|
9973
9789
|
checkbox,
|
|
9974
|
-
checkboxAnimated,
|
|
9975
9790
|
checkboxHeadless,
|
|
9976
9791
|
dropdownDivider,
|
|
9977
9792
|
dropdownItem,
|
package/dist/preset.mjs
CHANGED
|
@@ -3188,190 +3188,6 @@ const checkbox = plugin.withOptions(
|
|
|
3188
3188
|
}
|
|
3189
3189
|
);
|
|
3190
3190
|
|
|
3191
|
-
const defaultCheckboxAnimatedConfig = {
|
|
3192
|
-
size: "8",
|
|
3193
|
-
rounded: "full",
|
|
3194
|
-
label: {
|
|
3195
|
-
disabledOpacity: "75",
|
|
3196
|
-
inner: {
|
|
3197
|
-
duration: "300"
|
|
3198
|
-
}
|
|
3199
|
-
},
|
|
3200
|
-
default: {
|
|
3201
|
-
color: "muted-600",
|
|
3202
|
-
colorDark: "muted-200"
|
|
3203
|
-
},
|
|
3204
|
-
light: "white",
|
|
3205
|
-
muted: "muted-400",
|
|
3206
|
-
primary: "primary-500",
|
|
3207
|
-
info: "info-500",
|
|
3208
|
-
success: "success-500",
|
|
3209
|
-
warning: "warning-500",
|
|
3210
|
-
danger: "danger-500"
|
|
3211
|
-
};
|
|
3212
|
-
const checkboxAnimated = plugin.withOptions(
|
|
3213
|
-
function(options) {
|
|
3214
|
-
let { prefix } = defu(options, defaultPluginOptions);
|
|
3215
|
-
if (prefix) {
|
|
3216
|
-
prefix = `${prefix}-`;
|
|
3217
|
-
}
|
|
3218
|
-
return function({ addComponents, theme }) {
|
|
3219
|
-
const config = theme(
|
|
3220
|
-
"shurikenUi.checkboxAnimated"
|
|
3221
|
-
);
|
|
3222
|
-
const keyframes = {
|
|
3223
|
-
"@keyframes stroke": {
|
|
3224
|
-
"100%": {
|
|
3225
|
-
"stroke-dashoffset": "0"
|
|
3226
|
-
}
|
|
3227
|
-
},
|
|
3228
|
-
"@keyframes reverseCircle": {
|
|
3229
|
-
from: {
|
|
3230
|
-
"stroke-dashoffset": "0"
|
|
3231
|
-
},
|
|
3232
|
-
to: {
|
|
3233
|
-
"stroke-dashoffset": "166"
|
|
3234
|
-
}
|
|
3235
|
-
},
|
|
3236
|
-
"@keyframes reverseCheck": {
|
|
3237
|
-
from: {
|
|
3238
|
-
"stroke-dashoffset": "0"
|
|
3239
|
-
},
|
|
3240
|
-
to: {
|
|
3241
|
-
"stroke-dashoffset": "48"
|
|
3242
|
-
}
|
|
3243
|
-
}
|
|
3244
|
-
};
|
|
3245
|
-
addComponents({
|
|
3246
|
-
[`.${prefix}checkbox-animated`]: {
|
|
3247
|
-
[`@apply ${prefix}focus relative h-${config.size} w-${config.size} rounded-${config.rounded} focus-within:outline-current`]: {},
|
|
3248
|
-
[`.${prefix}checkbox-animated-input`]: {
|
|
3249
|
-
[`@apply cursor-pointer disabled:cursor-not-allowed absolute h-full w-full opacity-0 z-[1] left-0 top-0`]: {}
|
|
3250
|
-
},
|
|
3251
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3252
|
-
[`@apply relative h-${config.size} w-${config.size} disabled:opacity-75`]: {},
|
|
3253
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3254
|
-
[`@apply absolute h-${config.size} w-${config.size} border border-solid z-0 opacity-100 transition-all duration-${config.label.inner.duration} rounded-full left-0 top-0`]: {},
|
|
3255
|
-
[`&.${prefix}is-opaque`]: {
|
|
3256
|
-
[`@apply opacity-0`]: {}
|
|
3257
|
-
}
|
|
3258
|
-
},
|
|
3259
|
-
[`&:deep(svg circle)`]: {
|
|
3260
|
-
[`@apply h-${config.size} w-${config.size} stroke-2 stroke-current fill-none`]: "",
|
|
3261
|
-
"stroke-dasharray": "166",
|
|
3262
|
-
"stroke-dashoffset": "166",
|
|
3263
|
-
"stroke-miterlimit": "10"
|
|
3264
|
-
},
|
|
3265
|
-
[`&:deep(svg)`]: {
|
|
3266
|
-
[`@apply h-${config.size} w-${config.size} stroke-2 text-current stroke-current shadow-[inset_0_0_0_currentColor] mx-auto my-0 rounded-full`]: "",
|
|
3267
|
-
"stroke-miterlimit": "10"
|
|
3268
|
-
},
|
|
3269
|
-
[`&:deep(svg path)`]: {
|
|
3270
|
-
[`@apply origin-[50%_50%] stroke-current`]: "",
|
|
3271
|
-
"stroke-dasharray": "48",
|
|
3272
|
-
"stroke-dashoffset": "48"
|
|
3273
|
-
}
|
|
3274
|
-
},
|
|
3275
|
-
[`&.${prefix}checked`]: {
|
|
3276
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3277
|
-
[`&:deep(svg circle)`]: {
|
|
3278
|
-
"@apply animate-[stroke_0.6s_cubic-bezier(0.65,0,0.45,1)_both]": {}
|
|
3279
|
-
},
|
|
3280
|
-
[`&:deep(svg path)`]: {
|
|
3281
|
-
"@apply animate-[stroke_0.3s_cubic-bezier(0.65,0,0.45,1)_0.8s_both]": {}
|
|
3282
|
-
}
|
|
3283
|
-
}
|
|
3284
|
-
},
|
|
3285
|
-
[`&.${prefix}unchecked`]: {
|
|
3286
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3287
|
-
[`&:deep(svg circle)`]: {
|
|
3288
|
-
"@apply animate-[reverseCircle_0.6s_cubic-bezier(0.65,0,0.45,1)_0.2s_both]": {}
|
|
3289
|
-
},
|
|
3290
|
-
[`&:deep(svg path)`]: {
|
|
3291
|
-
"@apply animate-[reverseCheck_0.3s_cubic-bezier(0.65,0,0.45,1)_0.1s_both]": {}
|
|
3292
|
-
}
|
|
3293
|
-
}
|
|
3294
|
-
},
|
|
3295
|
-
[`&.${prefix}checkbox-animated-default`]: {
|
|
3296
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3297
|
-
[`@apply text-${config.default.color} dark:text-${config.default.colorDark}`]: {},
|
|
3298
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3299
|
-
[`@apply border-${config.default.color} dark:border-${config.default.colorDark}`]: {}
|
|
3300
|
-
}
|
|
3301
|
-
}
|
|
3302
|
-
},
|
|
3303
|
-
[`&.${prefix}checkbox-animated-light`]: {
|
|
3304
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3305
|
-
[`@apply text-${config.light}`]: {},
|
|
3306
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3307
|
-
[`@apply border-${config.light}`]: {}
|
|
3308
|
-
}
|
|
3309
|
-
}
|
|
3310
|
-
},
|
|
3311
|
-
[`&.${prefix}checkbox-animated-muted`]: {
|
|
3312
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3313
|
-
[`@apply text-${config.muted}`]: {},
|
|
3314
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3315
|
-
[`@apply border-${config.muted}`]: {}
|
|
3316
|
-
}
|
|
3317
|
-
}
|
|
3318
|
-
},
|
|
3319
|
-
[`&.${prefix}checkbox-animated-primary`]: {
|
|
3320
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3321
|
-
[`@apply text-${config.primary}`]: {},
|
|
3322
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3323
|
-
[`@apply border-${config.primary}`]: {}
|
|
3324
|
-
}
|
|
3325
|
-
}
|
|
3326
|
-
},
|
|
3327
|
-
[`&.${prefix}checkbox-animated-info`]: {
|
|
3328
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3329
|
-
[`@apply text-${config.info}`]: {},
|
|
3330
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3331
|
-
[`@apply border-${config.info}`]: {}
|
|
3332
|
-
}
|
|
3333
|
-
}
|
|
3334
|
-
},
|
|
3335
|
-
[`&.${prefix}checkbox-animated-success`]: {
|
|
3336
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3337
|
-
[`@apply text-${config.success}`]: {},
|
|
3338
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3339
|
-
[`@apply border-${config.success}`]: {}
|
|
3340
|
-
}
|
|
3341
|
-
}
|
|
3342
|
-
},
|
|
3343
|
-
[`&.${prefix}checkbox-animated-warning`]: {
|
|
3344
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3345
|
-
[`@apply text-${config.warning}`]: {},
|
|
3346
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3347
|
-
[`@apply border-${config.warning}`]: {}
|
|
3348
|
-
}
|
|
3349
|
-
}
|
|
3350
|
-
},
|
|
3351
|
-
[`&.${prefix}checkbox-animated-danger`]: {
|
|
3352
|
-
[`.${prefix}checkbox-animated-label`]: {
|
|
3353
|
-
[`@apply text-${config.danger}`]: {},
|
|
3354
|
-
[`.${prefix}checkbox-animated-label-inner`]: {
|
|
3355
|
-
[`@apply border-${config.danger}`]: {}
|
|
3356
|
-
}
|
|
3357
|
-
}
|
|
3358
|
-
}
|
|
3359
|
-
}
|
|
3360
|
-
});
|
|
3361
|
-
addComponents(keyframes);
|
|
3362
|
-
};
|
|
3363
|
-
},
|
|
3364
|
-
function() {
|
|
3365
|
-
return {
|
|
3366
|
-
theme: {
|
|
3367
|
-
shurikenUi: {
|
|
3368
|
-
checkboxAnimated: defaultCheckboxAnimatedConfig
|
|
3369
|
-
}
|
|
3370
|
-
}
|
|
3371
|
-
};
|
|
3372
|
-
}
|
|
3373
|
-
);
|
|
3374
|
-
|
|
3375
3191
|
const defaultCheckboxHeadlessConfig = {
|
|
3376
3192
|
label: {
|
|
3377
3193
|
text: "muted-400",
|
|
@@ -9958,7 +9774,6 @@ const components = [
|
|
|
9958
9774
|
button,
|
|
9959
9775
|
card,
|
|
9960
9776
|
checkbox,
|
|
9961
|
-
checkboxAnimated,
|
|
9962
9777
|
checkboxHeadless,
|
|
9963
9778
|
dropdownDivider,
|
|
9964
9779
|
dropdownItem,
|