@fewangsit/wangsvue-presets 1.0.81 → 1.0.82

package/fixedasset/splitbutton/index.js

@@ -0,0 +1,957 @@
+export default {
+  root: ({ props }) => ({
+    class: [
+      // Flexbox and Position
+      'inline-flex',
+      'relative',
+
+      // Shape
+      'rounded-md',
+      { 'shadow-lg': props.raised },
+    ],
+  }),
+  button: {
+    root: ({ parent }) => ({
+      class: [
+        'relative',
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'text-sm',
+        {
+          'px-2.5 py-1.5 min-w-[2rem]':
+            parent.props.size === null && parent.props.label !== null,
+          'px-2 py-1': parent.props.size === 'small',
+          'px-3 py-2': parent.props.size === 'large',
+        },
+        {
+          'h-8 w-8 p-0': parent.props.label == null,
+        },
+
+        // Shape
+        'rounded-r-none',
+        'border-r-0',
+        { 'rounded-l-full': parent.props.rounded },
+        {
+          'rounded-md': !parent.props.rounded,
+          'rounded-full': parent.props.rounded,
+        },
+
+        // Link Button
+        {
+          'text-primary-600 bg-transparent ring-transparent': parent.props.link,
+        },
+
+        // Plain Button
+        {
+          'text-white bg-gray-500 ring-1 ring-gray-500':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Plain Text Button
+        { 'text-surface-500': parent.props.plain && parent.props.text },
+        // Plain Outlined Button
+        {
+          'text-surface-500 ring-1 ring-gray-500':
+            parent.props.plain && parent.props.outlined,
+        },
+
+        // Text Button
+        {
+          'bg-transparent ring-transparent':
+            parent.props.text && !parent.props.plain,
+        },
+
+        // Outlined Button
+        { 'bg-transparent': parent.props.outlined && !parent.props.plain },
+
+        // --- Severity Buttons ---
+
+        // Primary Button
+        {
+          'text-white':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Primary Text Button
+        {
+          'text-primary-500':
+            parent.props.text &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+        // Primary Outlined Button
+        {
+          'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20':
+            parent.props.outlined &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary Button
+        {
+          'text-white':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Secondary Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Secondary Outlined Button
+        {
+          'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success Button
+        {
+          'text-white':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Success Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Success Outlined Button
+        {
+          'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info Button
+        {
+          'text-white':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Info Text Button
+        {
+          'text-blue-500':
+            parent.props.text &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+        // Info Outlined Button
+        {
+          'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ':
+            parent.props.outlined &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning Button
+        {
+          'text-white':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Warning Text Button
+        {
+          'text-orange-500':
+            parent.props.text &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+        // Warning Outlined Button
+        {
+          'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help Button
+        {
+          'text-white':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Help Text Button
+        {
+          'text-purple-500':
+            parent.props.text &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+        // Help Outlined Button
+        {
+          'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Danger Button
+        {
+          'text-white':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Danger Text Button
+        {
+          'text-red-500':
+            parent.props.text &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+        // Danger Outlined Button
+        {
+          'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // --- Severity Button States ---
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+        {
+          'focus:ring-offset-2':
+            !parent.props.link &&
+            !parent.props.plain &&
+            !parent.props.outlined &&
+            !parent.props.text,
+        },
+
+        // Link
+        {
+          'focus:ring-primary-500':
+            parent.props.link,
+        },
+
+        // Plain
+        {
+          'hover:bg-gray-600 hover:ring-gray-600':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            parent.props.plain && (parent.props.text || parent.props.outlined),
+        },
+
+        // Primary
+        {
+          'hover:bg-primary-600 hover:ring-primary-600':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-primary-500':
+            parent.props.severity === null,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-primary-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary
+        {
+          'hover:bg-surface-600 hover:ring-surface-600':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-surface-500':
+            parent.props.severity === 'secondary',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success
+        {
+          'hover:bg-green-600 hover:ring-green-600':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-green-500':
+            parent.props.severity === 'success',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-green-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info
+        {
+          'hover:bg-blue-600 hover:ring-blue-600':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-blue-500':
+            parent.props.severity === 'info',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-blue-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-orange-600 hover:ring-orange-600':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-orange-500':
+            parent.props.severity === 'warning',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-orange-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help
+        {
+          'hover:bg-purple-600 hover:ring-purple-600':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-purple-500':
+            parent.props.severity === 'help',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-purple-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-red-600 hover:ring-red-600':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-red-500':
+            parent.props.severity === 'danger',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-red-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // Transitions
+        'transition duration-200 ease-in-out',
+
+        // Misc
+        'cursor-pointer overflow-hidden select-none',
+      ],
+    }),
+    icon: {
+      class: [
+        // Margins
+        'mr-2',
+      ],
+    },
+  },
+  menubutton: {
+    root: ({ parent }) => ({
+      class: [
+        'relative',
+
+        // Alignments
+        'items-center inline-flex text-center align-bottom justify-center',
+
+        // Sizes & Spacing
+        'text-sm',
+        {
+          'px-2.5 py-1.5 min-w-[2rem]':
+            parent.props.size === null && parent.props.label !== null,
+          'px-2 py-1': parent.props.size === 'small',
+          'px-3 py-2': parent.props.size === 'large',
+        },
+        {
+          'h-8 w-8 p-0': parent.props.label == null,
+        },
+        'ml-[1px]',
+
+        // Shape
+        'rounded-l-none',
+        { 'rounded-l-full': parent.props.rounded },
+        {
+          'rounded-md': !parent.props.rounded,
+          'rounded-full': parent.props.rounded,
+        },
+
+        // Link Button
+        {
+          'text-primary-600 bg-transparent ring-transparent': parent.props.link,
+        },
+
+        // Plain Button
+        {
+          'text-white bg-gray-500 ring-1 ring-gray-500':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Plain Text Button
+        { 'text-surface-500': parent.props.plain && parent.props.text },
+        // Plain Outlined Button
+        {
+          'text-surface-500 ring-1 ring-gray-500':
+            parent.props.plain && parent.props.outlined,
+        },
+
+        // Text Button
+        {
+          'bg-transparent ring-transparent':
+            parent.props.text && !parent.props.plain,
+        },
+
+        // Outlined Button
+        { 'bg-transparent': parent.props.outlined && !parent.props.plain },
+
+        // --- Severity Buttons ---
+
+        // Primary Button
+        {
+          'text-white':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-primary-500':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Primary Text Button
+        {
+          'text-primary-500':
+            parent.props.text &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+        // Primary Outlined Button
+        {
+          'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20':
+            parent.props.outlined &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary Button
+        {
+          'text-white':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-surface-500':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Secondary Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Secondary Outlined Button
+        {
+          'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success Button
+        {
+          'text-white':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-green-500':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Success Text Button
+        {
+          'text-surface-500':
+            parent.props.text &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+        // Success Outlined Button
+        {
+          'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info Button
+        {
+          'text-white':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-blue-500':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Info Text Button
+        {
+          'text-blue-500':
+            parent.props.text &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+        // Info Outlined Button
+        {
+          'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ':
+            parent.props.outlined &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning Button
+        {
+          'text-white':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-orange-500':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Warning Text Button
+        {
+          'text-orange-500':
+            parent.props.text &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+        // Warning Outlined Button
+        {
+          'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help Button
+        {
+          'text-white':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-purple-500':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Help Text Button
+        {
+          'text-purple-500':
+            parent.props.text &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+        // Help Outlined Button
+        {
+          'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Danger Button
+        {
+          'text-white':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'bg-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+          'ring-1 ring-red-500':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        // Danger Text Button
+        {
+          'text-red-500':
+            parent.props.text &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+        // Danger Outlined Button
+        {
+          'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20':
+            parent.props.outlined &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // --- Severity Button States ---
+        'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+        {
+          'focus:ring-offset-2':
+            !parent.props.link &&
+            !parent.props.plain &&
+            !parent.props.outlined &&
+            !parent.props.text,
+        },
+
+        // Link
+        {
+          'focus:ring-primary-500':
+            parent.props.link,
+        },
+
+        // Plain
+        {
+          'hover:bg-gray-600 hover:ring-gray-600':
+            parent.props.plain && !parent.props.outlined && !parent.props.text,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            parent.props.plain && (parent.props.text || parent.props.outlined),
+        },
+
+        // Primary
+        {
+          'hover:bg-primary-600 hover:ring-primary-600':
+            !parent.props.link &&
+            parent.props.severity === null &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-primary-500':
+            parent.props.severity === null,
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-primary-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === null &&
+            !parent.props.plain,
+        },
+
+        // Secondary
+        {
+          'hover:bg-surface-600 hover:ring-surface-600':
+            parent.props.severity === 'secondary' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-surface-500':
+            parent.props.severity === 'secondary',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-surface-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'secondary' &&
+            !parent.props.plain,
+        },
+
+        // Success
+        {
+          'hover:bg-green-600 hover:ring-green-600':
+            parent.props.severity === 'success' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-green-500':
+            parent.props.severity === 'success',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-green-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'success' &&
+            !parent.props.plain,
+        },
+
+        // Info
+        {
+          'hover:bg-blue-600 hover:ring-blue-600':
+            parent.props.severity === 'info' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-blue-500':
+            parent.props.severity === 'info',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-blue-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'info' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-orange-600 hover:ring-orange-600':
+            parent.props.severity === 'warning' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-orange-500':
+            parent.props.severity === 'warning',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-orange-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'warning' &&
+            !parent.props.plain,
+        },
+
+        // Help
+        {
+          'hover:bg-purple-600 hover:ring-purple-600':
+            parent.props.severity === 'help' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-purple-500':
+            parent.props.severity === 'help',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-purple-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'help' &&
+            !parent.props.plain,
+        },
+
+        // Warning
+        {
+          'hover:bg-red-600 hover:ring-red-600':
+            parent.props.severity === 'danger' &&
+            !parent.props.text &&
+            !parent.props.outlined &&
+            !parent.props.plain,
+        },
+        {
+          'focus:ring-red-500':
+            parent.props.severity === 'danger',
+        },
+        // Text & Outlined Button
+        {
+          'hover:bg-red-300/20':
+            (parent.props.text || parent.props.outlined) &&
+            parent.props.severity === 'danger' &&
+            !parent.props.plain,
+        },
+
+        // Transitions
+        'transition duration-200 ease-in-out',
+
+        // Misc
+        'cursor-pointer overflow-hidden select-none',
+      ],
+    }),
+    label: {
+      class: ['hidden'],
+    },
+  },
+};