@bagaar/velvet-thunder 0.2.0 → 0.2.1

package/tailwind/components/link.cjs

@@ -1,33 +1,53 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-link': {
-    '@apply border border-transparent font-medium': {},
-    '@apply flex items-center justify-center': {},
-    '@apply rounded-md text-sm transition w-fit': {},
+    'border-width': '1px',
+    'border-color': 'transparent',
+    'font-weight': theme('fontWeight.medium'),
+    display: 'flex',
+    'align-items': 'center',
+    'justify-content': 'center',
+    'border-radius': theme('borderRadius.md'),
+    'font-size': theme('fontSize.sm'),
+    'line-height': theme('lineHeight.5'),
+    'transition-property': theme('transitionProperty.DEFAULT'),
+    'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    'transition-duration': theme('transitionDuration.DEFAULT'),
+    width: 'fit-content',
 
     '&:focus-visible': {
-      '@apply velvet-outline': {},
+      'outline-style': 'solid',
+      'outline-width': '2px',
+      'outline-offset': '1px',
     },
 
     '&-xs': {
-      '@apply h-7 px-2': {},
+      height: theme('spacing.7'),
+      'padding-left': theme('spacing.2'),
+      'padding-right': theme('spacing.2'),
     },
 
     '&-sm': {
-      '@apply h-8 px-3': {},
+      height: theme('spacing.8'),
+      'padding-left': theme('spacing.3'),
+      'padding-right': theme('spacing.3'),
     },
 
     '&-md': {
-      '@apply h-9 px-4': {},
+      height: theme('spacing.9'),
+      'padding-left': theme('spacing.4'),
+      'padding-right': theme('spacing.4'),
     },
 
     '&-lg': {
-      '@apply h-10 px-6': {},
+      height: theme('spacing.10'),
+      'padding-left': theme('spacing.6'),
+      'padding-right': theme('spacing.6'),
     },
 
     '&-pill': {
-      '@apply rounded-full': {},
+      'border-radius': theme('borderRadius.full'),
     },
   },
 });

package/tailwind/components/progress.cjs

@@ -1,23 +1,29 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-progress': {
-    '@apply overflow-hidden rounded-full w-full': {},
+    overflow: 'hidden',
+    'border-radius': theme('borderRadius.full'),
+    width: '100%',
 
     '&-sm': {
-      '@apply h-1': {},
+      height: theme('spacing.1'),
     },
 
     '&-md': {
-      '@apply h-2': {},
+      height: theme('spacing.2'),
     },
 
     '&-lg': {
-      '@apply h-3': {},
+      height: theme('spacing.3'),
     },
 
     '&-line': {
-      '@apply h-full rounded-full transition-all': {},
+      height: '100%',
+      'border-radius': theme('borderRadius.full'),
+      'transition-property': theme('transitionProperty.all'),
+      'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+      'transition-duration': theme('transitionDuration.DEFAULT'),
     },
   },
 });

package/tailwind/components/radio.cjs

@@ -1,46 +1,63 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-radio': {
-    '@apply flex items-center w-fit': {},
+    display: 'flex',
+    'align-items': 'center',
+    width: 'fit-content',
 
     '&-sm': {
-      '@apply text-xs': {},
+      'font-size': theme('fontSize.xs'),
+      'line-height': theme('lineHeight.4'),
 
       '.velvet-radio-input': {
-        '@apply mr-2 size-4': {},
+        'margin-right': theme('spacing.2'),
+        width: theme('spacing.4'),
+        height: theme('spacing.4'),
       },
     },
 
     '&-md': {
-      '@apply text-sm': {},
+      'font-size': theme('fontSize.sm'),
+      'line-height': theme('lineHeight.5'),
 
       '.velvet-radio-input': {
-        '@apply mr-3 size-5': {},
+        'margin-right': theme('spacing.3'),
+        width: theme('spacing.5'),
+        height: theme('spacing.5'),
       },
     },
 
     '&-lg': {
-      '@apply text-base': {},
+      'font-size': theme('fontSize.base'),
+      'line-height': theme('lineHeight.6'),
 
       '.velvet-radio-input': {
-        '@apply mr-4 size-6': {},
+        'margin-right': theme('spacing.4'),
+        width: theme('spacing.6'),
+        height: theme('spacing.6'),
       },
     },
 
     '&-disabled': {
-      '@apply cursor-not-allowed': {},
+      cursor: 'not-allowed',
     },
 
     '&-input': {
-      '@apply border-2 transition': {},
+      'border-width': '2px',
+      'transition-property': theme('transitionProperty.DEFAULT'),
+      'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+      'transition-duration': theme('transitionDuration.DEFAULT'),
 
       '&:focus': {
-        '@apply ring-0 ring-offset-0 velvet-outline': {},
+        'box-shadow': 'none',
+        'outline-style': 'solid',
+        'outline-width': '2px',
+        'outline-offset': '1px',
       },
 
       '&:disabled': {
-        '@apply cursor-not-allowed': {},
+        cursor: 'not-allowed',
       },
     },
   },

package/tailwind/components/select.cjs

@@ -2,33 +2,51 @@
 
 module.exports = ({ theme }) => ({
   '.velvet-select': {
-    '@apply py-0 rounded-md text-sm transition w-full': {},
+    'padding-top': '0',
+    'padding-bottom': '0',
+    'border-radius': theme('borderRadius.md'),
+    'font-size': theme('fontSize.sm'),
+    'line-height': theme('lineHeight.5'),
+    'transition-property': theme('transitionProperty.DEFAULT'),
+    'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    'transition-duration': theme('transitionDuration.DEFAULT'),
+    width: '100%',
 
     '&:focus': {
-      '@apply ring-0 velvet-outline-offset-0': {},
+      'box-shadow': 'none',
+      'outline-style': 'solid',
+      'outline-width': '2px',
+      'outline-offset': '0px',
     },
 
     '&:disabled': {
-      '@apply cursor-not-allowed opacity-100': {},
+      cursor: 'not-allowed',
+      opacity: '1',
     },
 
     '&-sm': {
-      '@apply h-8 pl-2 pr-8': {},
-      [`@apply bg-[right_${theme('spacing.1')}_center]`]: {},
+      height: theme('spacing.8'),
+      'padding-left': theme('spacing.2'),
+      'padding-right': theme('spacing.8'),
+      'background-position': `right ${theme('spacing.1')} center`,
     },
 
     '&-md': {
-      '@apply h-9 pl-3 pr-10': {},
-      [`@apply bg-[right_${theme('spacing.2')}_center]`]: {},
+      height: theme('spacing.9'),
+      'padding-left': theme('spacing.3'),
+      'padding-right': theme('spacing.10'),
+      'background-position': `right ${theme('spacing.2')} center`,
     },
 
     '&-lg': {
-      '@apply h-10 pl-4 pr-12': {},
-      [`@apply bg-[right_${theme('spacing.3')}_center]`]: {},
+      height: theme('spacing.10'),
+      'padding-left': theme('spacing.4'),
+      'padding-right': theme('spacing.12'),
+      'background-position': `right ${theme('spacing.3')} center`,
     },
 
     '&-pill': {
-      '@apply rounded-full': {},
+      'border-radius': theme('borderRadius.full'),
     },
   },
 });

package/tailwind/components/spinner.cjs

@@ -1,31 +1,41 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
+  '@keyframes velvet-spin': {
+    to: { transform: 'rotate(360deg)' },
+  },
+
   '.velvet-spinner': {
-    '@apply animate-spin shrink-0': {},
+    animation: 'velvet-spin 1s linear infinite',
+    'flex-shrink': '0',
 
     '&-xs': {
-      '@apply size-3': {},
+      width: theme('spacing.3'),
+      height: theme('spacing.3'),
     },
 
     '&-sm': {
-      '@apply size-4': {},
+      width: theme('spacing.4'),
+      height: theme('spacing.4'),
     },
 
     '&-md': {
-      '@apply size-5': {},
+      width: theme('spacing.5'),
+      height: theme('spacing.5'),
     },
 
     '&-lg': {
-      '@apply size-6': {},
+      width: theme('spacing.6'),
+      height: theme('spacing.6'),
     },
 
     '&-xl': {
-      '@apply size-7': {},
+      width: theme('spacing.7'),
+      height: theme('spacing.7'),
     },
 
     '&-track': {
-      '@apply opacity-20': {},
+      opacity: '0.2',
     },
   },
 });

package/tailwind/components/switch.cjs

@@ -1,71 +1,102 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-switch': {
-    '@apply flex items-center w-fit': {},
+    display: 'flex',
+    'align-items': 'center',
+    width: 'fit-content',
 
     '&-right': {
-      '@apply flex-row-reverse': {},
+      'flex-direction': 'row-reverse',
     },
 
     '&-sm': {
-      '@apply gap-2 text-xs': {},
+      gap: theme('spacing.2'),
+      'font-size': theme('fontSize.xs'),
+      'line-height': theme('lineHeight.4'),
 
       '.velvet-switch-track': {
-        '@apply h-4 w-7': {},
+        height: theme('spacing.4'),
+        width: theme('spacing.7'),
       },
 
       '.velvet-switch-handle': {
-        '@apply size-3': {},
+        width: theme('spacing.3'),
+        height: theme('spacing.3'),
       },
     },
 
     '&-md': {
-      '@apply gap-3 text-sm': {},
+      gap: theme('spacing.3'),
+      'font-size': theme('fontSize.sm'),
+      'line-height': theme('lineHeight.5'),
 
       '.velvet-switch-track': {
-        '@apply h-5 w-9': {},
+        height: theme('spacing.5'),
+        width: theme('spacing.9'),
       },
 
       '.velvet-switch-handle': {
-        '@apply size-4': {},
+        width: theme('spacing.4'),
+        height: theme('spacing.4'),
       },
     },
 
     '&-lg': {
-      '@apply gap-4 text-base': {},
+      gap: theme('spacing.4'),
+      'font-size': theme('fontSize.base'),
+      'line-height': theme('lineHeight.6'),
 
       '.velvet-switch-track': {
-        '@apply h-6 w-11': {},
+        height: theme('spacing.6'),
+        width: theme('spacing.11'),
       },
 
       '.velvet-switch-handle': {
-        '@apply size-5': {},
+        width: theme('spacing.5'),
+        height: theme('spacing.5'),
       },
     },
 
     '&-disabled': {
-      '@apply cursor-not-allowed': {},
+      cursor: 'not-allowed',
     },
 
     '&-input': {
-      '@apply sr-only': {},
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      'white-space': 'nowrap',
+      'border-width': '0',
 
       '&:focus-visible + .velvet-switch-track': {
-        '@apply velvet-outline': {},
+        'outline-style': 'solid',
+        'outline-width': '2px',
+        'outline-offset': '1px',
       },
 
       '&:checked + .velvet-switch-track .velvet-switch-handle': {
-        '@apply translate-x-full': {},
+        transform: 'translateX(100%)',
       },
     },
 
     '.velvet-switch-track': {
-      '@apply p-0.5 rounded-full transition-colors': {},
+      padding: '0.125rem',
+      'border-radius': theme('borderRadius.full'),
+      'transition-property': theme('transitionProperty.colors'),
+      'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+      'transition-duration': theme('transitionDuration.DEFAULT'),
     },
 
     '.velvet-switch-handle': {
-      '@apply rounded-full transition-transform': {},
+      'border-radius': theme('borderRadius.full'),
+      'transition-property': theme('transitionProperty.transform'),
+      'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+      'transition-duration': theme('transitionDuration.DEFAULT'),
     },
   },
 });

package/tailwind/components/tag.cjs

@@ -1,25 +1,40 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-tag': {
-    '@apply border border-transparent font-medium': {},
-    '@apply flex items-center justify-center': {},
-    '@apply rounded text-sm w-fit': {},
+    'border-width': '1px',
+    'border-color': 'transparent',
+    'font-weight': theme('fontWeight.medium'),
+    display: 'flex',
+    'align-items': 'center',
+    'justify-content': 'center',
+    'border-radius': theme('borderRadius.DEFAULT'),
+    'font-size': theme('fontSize.sm'),
+    'line-height': theme('lineHeight.5'),
+    width: 'fit-content',
 
     '&-sm': {
-      '@apply h-5 px-1 text-xs': {},
+      height: theme('spacing.5'),
+      'padding-left': theme('spacing.1'),
+      'padding-right': theme('spacing.1'),
+      'font-size': theme('fontSize.xs'),
+      'line-height': theme('lineHeight.4'),
     },
 
     '&-md': {
-      '@apply h-6 px-2': {},
+      height: theme('spacing.6'),
+      'padding-left': theme('spacing.2'),
+      'padding-right': theme('spacing.2'),
     },
 
     '&-lg': {
-      '@apply h-7 px-3': {},
+      height: theme('spacing.7'),
+      'padding-left': theme('spacing.3'),
+      'padding-right': theme('spacing.3'),
     },
 
     '&-pill': {
-      '@apply rounded-full': {},
+      'border-radius': theme('borderRadius.full'),
     },
   },
 });

package/tailwind/components/textarea.cjs

@@ -1,27 +1,48 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-textarea': {
-    '@apply rounded-md text-sm transition w-full': {},
+    'border-radius': theme('borderRadius.md'),
+    'font-size': theme('fontSize.sm'),
+    'line-height': theme('lineHeight.5'),
+    'transition-property': theme('transitionProperty.DEFAULT'),
+    'transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
+    'transition-duration': theme('transitionDuration.DEFAULT'),
+    width: '100%',
 
     '&:focus': {
-      '@apply ring-0 velvet-outline-offset-0': {},
+      'box-shadow': 'none',
+      'outline-style': 'solid',
+      'outline-width': '2px',
+      'outline-offset': '0px',
     },
 
     '&:disabled': {
-      '@apply cursor-not-allowed': {},
+      cursor: 'not-allowed',
     },
 
     '&-sm': {
-      '@apply h-16 px-2 py-1': {},
+      height: theme('spacing.16'),
+      'padding-left': theme('spacing.2'),
+      'padding-right': theme('spacing.2'),
+      'padding-top': theme('spacing.1'),
+      'padding-bottom': theme('spacing.1'),
     },
 
     '&-md': {
-      '@apply h-24 px-3 py-2': {},
+      height: theme('spacing.24'),
+      'padding-left': theme('spacing.3'),
+      'padding-right': theme('spacing.3'),
+      'padding-top': theme('spacing.2'),
+      'padding-bottom': theme('spacing.2'),
     },
 
     '&-lg': {
-      '@apply h-32 px-4 py-3': {},
+      height: theme('spacing.32'),
+      'padding-left': theme('spacing.4'),
+      'padding-right': theme('spacing.4'),
+      'padding-top': theme('spacing.3'),
+      'padding-bottom': theme('spacing.3'),
     },
   },
 });

package/tailwind/components/tooltip.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-module.exports = () => ({
+module.exports = ({ theme }) => ({
   '.velvet-tooltip': {
     '&-content': {
-      '@apply text-sm': {},
+      'font-size': theme('fontSize.sm'),
+      'line-height': theme('lineHeight.5'),
     },
   },
 });

package/tailwind/utilities/outline.cjs

@@ -2,9 +2,13 @@
 
 module.exports = {
   '.velvet-outline': {
-    '@apply outline outline-2 outline-offset-1': {},
+    'outline-style': 'solid',
+    'outline-width': '2px',
+    'outline-offset': '1px',
   },
   '.velvet-outline-offset-0': {
-    '@apply outline outline-2 outline-offset-0': {},
+    'outline-style': 'solid',
+    'outline-width': '2px',
+    'outline-offset': '0px',
   },
 };