@bagaar/velvet-thunder 0.0.1

package/tailwind/components/button.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-button': {
+    '@apply border border-transparent font-medium': {},
+    '@apply flex items-center justify-center': {},
+    '@apply rounded-md text-sm transition': {},
+
+    '&:focus-visible': {
+      '@apply velvet-outline': {},
+    },
+
+    '&:disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-xs': {
+      '@apply h-7 px-2': {},
+    },
+
+    '&-sm': {
+      '@apply h-8 px-3': {},
+    },
+
+    '&-md': {
+      '@apply h-9 px-4': {},
+    },
+
+    '&-lg': {
+      '@apply h-10 px-6': {},
+    },
+
+    '&-pill': {
+      '@apply rounded-full': {},
+    },
+
+    '&-disclosure-icon': {
+      '@apply ml-2 size-4': {},
+    },
+
+    '.velvet-spinner': {
+      '@apply mr-2': {},
+    },
+  },
+});

package/tailwind/components/checkbox.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-checkbox': {
+    '@apply flex items-center w-fit': {},
+
+    '&-sm': {
+      '@apply text-xs': {},
+
+      '.velvet-checkbox-input': {
+        '@apply mr-2 size-4': {},
+      },
+    },
+
+    '&-md': {
+      '@apply text-sm': {},
+
+      '.velvet-checkbox-input': {
+        '@apply mr-3 size-5': {},
+      },
+    },
+
+    '&-lg': {
+      '@apply text-base': {},
+
+      '.velvet-checkbox-input': {
+        '@apply mr-4 size-6': {},
+      },
+    },
+
+    '&-disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-input': {
+      '@apply border-2 rounded transition': {},
+
+      '&:focus': {
+        '@apply ring-0 ring-offset-0 velvet-outline': {},
+      },
+
+      '&:disabled': {
+        '@apply cursor-not-allowed': {},
+      },
+    },
+  },
+});

package/tailwind/components/disclosure.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-disclosure': {
+    '@apply overflow-hidden': {},
+
+    '&:focus-within': {
+      '@apply overflow-visible': {},
+    },
+  },
+});

package/tailwind/components/dropdown.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-dropdown': {
+    '&-content': {},
+  },
+});

package/tailwind/components/icon-button.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-icon-button': {
+    '@apply border border-transparent': {},
+    '@apply flex items-center justify-center shrink-0': {},
+    '@apply rounded-md transition': {},
+
+    '&:focus-visible': {
+      '@apply velvet-outline': {},
+    },
+
+    '&:disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-xs': {
+      '@apply size-7': {},
+    },
+
+    '&-sm': {
+      '@apply size-8': {},
+    },
+
+    '&-md': {
+      '@apply size-9': {},
+    },
+
+    '&-lg': {
+      '@apply size-10': {},
+    },
+
+    '&-round': {
+      '@apply rounded-full': {},
+    },
+
+    '&-disclosure-icon': {
+      '@apply size-4': {},
+    },
+  },
+});

package/tailwind/components/icon-link.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-icon-link': {
+    '@apply border border-transparent': {},
+    '@apply flex items-center justify-center shrink-0': {},
+    '@apply rounded-md transition': {},
+
+    '&:focus-visible': {
+      '@apply velvet-outline': {},
+    },
+
+    '&-xs': {
+      '@apply size-7': {},
+    },
+
+    '&-sm': {
+      '@apply size-8': {},
+    },
+
+    '&-md': {
+      '@apply size-9': {},
+    },
+
+    '&-lg': {
+      '@apply size-10': {},
+    },
+
+    '&-round': {
+      '@apply rounded-full': {},
+    },
+  },
+});

package/tailwind/components/input.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-input': {
+    '@apply py-0 rounded-md text-sm transition w-full': {},
+
+    '&:focus': {
+      '@apply ring-0 velvet-outline-offset-0': {},
+    },
+
+    '&:disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-sm': {
+      '@apply h-8 px-2': {},
+    },
+
+    '&-md': {
+      '@apply h-9 px-3': {},
+    },
+
+    '&-lg': {
+      '@apply h-10 px-4': {},
+    },
+
+    '&-pill': {
+      '@apply rounded-full': {},
+    },
+  },
+});

package/tailwind/components/link.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-link': {
+    '@apply border border-transparent font-medium': {},
+    '@apply flex items-center justify-center': {},
+    '@apply rounded-md text-sm transition w-fit': {},
+
+    '&:focus-visible': {
+      '@apply velvet-outline': {},
+    },
+
+    '&-xs': {
+      '@apply h-7 px-2': {},
+    },
+
+    '&-sm': {
+      '@apply h-8 px-3': {},
+    },
+
+    '&-md': {
+      '@apply h-9 px-4': {},
+    },
+
+    '&-lg': {
+      '@apply h-10 px-6': {},
+    },
+
+    '&-pill': {
+      '@apply rounded-full': {},
+    },
+  },
+});

package/tailwind/components/progress.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-progress': {
+    '@apply overflow-hidden rounded-full w-full': {},
+
+    '&-sm': {
+      '@apply h-1': {},
+    },
+
+    '&-md': {
+      '@apply h-2': {},
+    },
+
+    '&-lg': {
+      '@apply h-3': {},
+    },
+
+    '&-line': {
+      '@apply h-full rounded-full transition-all': {},
+    },
+  },
+});

package/tailwind/components/radio.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-radio': {
+    '@apply flex items-center w-fit': {},
+
+    '&-sm': {
+      '@apply text-xs': {},
+
+      '.velvet-radio-input': {
+        '@apply mr-2 size-4': {},
+      },
+    },
+
+    '&-md': {
+      '@apply text-sm': {},
+
+      '.velvet-radio-input': {
+        '@apply mr-3 size-5': {},
+      },
+    },
+
+    '&-lg': {
+      '@apply text-base': {},
+
+      '.velvet-radio-input': {
+        '@apply mr-4 size-6': {},
+      },
+    },
+
+    '&-disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-input': {
+      '@apply border-2 transition': {},
+
+      '&:focus': {
+        '@apply ring-0 ring-offset-0 velvet-outline': {},
+      },
+
+      '&:disabled': {
+        '@apply cursor-not-allowed': {},
+      },
+    },
+  },
+});

package/tailwind/components/select.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = ({ theme }) => ({
+  '.velvet-select': {
+    '@apply py-0 rounded-md text-sm transition w-full': {},
+
+    '&:focus': {
+      '@apply ring-0 velvet-outline-offset-0': {},
+    },
+
+    '&:disabled': {
+      '@apply cursor-not-allowed opacity-100': {},
+    },
+
+    '&-sm': {
+      '@apply h-8 pl-2 pr-8': {},
+      [`@apply bg-[right_${theme('spacing.1')}_center]`]: {},
+    },
+
+    '&-md': {
+      '@apply h-9 pl-3 pr-10': {},
+      [`@apply bg-[right_${theme('spacing.2')}_center]`]: {},
+    },
+
+    '&-lg': {
+      '@apply h-10 pl-4 pr-12': {},
+      [`@apply bg-[right_${theme('spacing.3')}_center]`]: {},
+    },
+
+    '&-pill': {
+      '@apply rounded-full': {},
+    },
+  },
+});

package/tailwind/components/spinner.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-spinner': {
+    '@apply animate-spin shrink-0': {},
+
+    '&-xs': {
+      '@apply size-3': {},
+    },
+
+    '&-sm': {
+      '@apply size-4': {},
+    },
+
+    '&-md': {
+      '@apply size-5': {},
+    },
+
+    '&-lg': {
+      '@apply size-6': {},
+    },
+
+    '&-xl': {
+      '@apply size-7': {},
+    },
+
+    '&-track': {
+      '@apply opacity-20': {},
+    },
+  },
+});

package/tailwind/components/switch.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-switch': {
+    '@apply flex items-center w-fit': {},
+
+    '&-right': {
+      '@apply flex-row-reverse': {},
+    },
+
+    '&-sm': {
+      '@apply gap-2 text-xs': {},
+
+      '.velvet-switch-track': {
+        '@apply h-4 w-7': {},
+      },
+
+      '.velvet-switch-handle': {
+        '@apply size-3': {},
+      },
+    },
+
+    '&-md': {
+      '@apply gap-3 text-sm': {},
+
+      '.velvet-switch-track': {
+        '@apply h-5 w-9': {},
+      },
+
+      '.velvet-switch-handle': {
+        '@apply size-4': {},
+      },
+    },
+
+    '&-lg': {
+      '@apply gap-4 text-base': {},
+
+      '.velvet-switch-track': {
+        '@apply h-6 w-11': {},
+      },
+
+      '.velvet-switch-handle': {
+        '@apply size-5': {},
+      },
+    },
+
+    '&-disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-input': {
+      '@apply sr-only': {},
+
+      '&:focus-visible + .velvet-switch-track': {
+        '@apply velvet-outline': {},
+      },
+
+      '&:checked + .velvet-switch-track .velvet-switch-handle': {
+        '@apply translate-x-full': {},
+      },
+    },
+
+    '.velvet-switch-track': {
+      '@apply p-0.5 rounded-full transition-colors': {},
+    },
+
+    '.velvet-switch-handle': {
+      '@apply rounded-full transition-transform': {},
+    },
+  },
+});

package/tailwind/components/tag.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-tag': {
+    '@apply border border-transparent font-medium': {},
+    '@apply flex items-center justify-center': {},
+    '@apply rounded text-sm w-fit': {},
+
+    '&-sm': {
+      '@apply h-5 px-1 text-xs': {},
+    },
+
+    '&-md': {
+      '@apply h-6 px-2': {},
+    },
+
+    '&-lg': {
+      '@apply h-7 px-3': {},
+    },
+
+    '&-pill': {
+      '@apply rounded-full': {},
+    },
+  },
+});

package/tailwind/components/textarea.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-textarea': {
+    '@apply rounded-md text-sm transition w-full': {},
+
+    '&:focus': {
+      '@apply ring-0 velvet-outline-offset-0': {},
+    },
+
+    '&:disabled': {
+      '@apply cursor-not-allowed': {},
+    },
+
+    '&-sm': {
+      '@apply h-16 px-2 py-1': {},
+    },
+
+    '&-md': {
+      '@apply h-24 px-3 py-2': {},
+    },
+
+    '&-lg': {
+      '@apply h-32 px-4 py-3': {},
+    },
+  },
+});

package/tailwind/components/tooltip.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = () => ({
+  '.velvet-tooltip': {
+    '&-content': {
+      '@apply text-sm': {},
+    },
+  },
+});

package/tailwind/content.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+const { join } = require('node:path');
+
+const CONTENT_PATHS = ['dist/components/**/*.js'];
+const ROOT_PATH = join(__dirname, '..');
+
+module.exports = () => CONTENT_PATHS.map((path) => join(ROOT_PATH, path));

package/tailwind/index.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  content: require('./content.cjs'),
+  plugin: require('./plugin.cjs'),
+};

package/tailwind/plugin.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+const tailwindPlugin = require('tailwindcss/plugin');
+
+const COMPONENTS = {
+  alert: require('./components/alert.cjs'),
+  avatar: require('./components/avatar.cjs'),
+  button: require('./components/button.cjs'),
+  checkbox: require('./components/checkbox.cjs'),
+  disclosure: require('./components/disclosure.cjs'),
+  dropdown: require('./components/dropdown.cjs'),
+  iconButton: require('./components/icon-button.cjs'),
+  iconLink: require('./components/icon-link.cjs'),
+  input: require('./components/input.cjs'),
+  link: require('./components/link.cjs'),
+  progress: require('./components/progress.cjs'),
+  radio: require('./components/radio.cjs'),
+  select: require('./components/select.cjs'),
+  spinner: require('./components/spinner.cjs'),
+  switch: require('./components/switch.cjs'),
+  tag: require('./components/tag.cjs'),
+  textarea: require('./components/textarea.cjs'),
+  tooltip: require('./components/tooltip.cjs'),
+};
+
+const UTILITIES = {
+  ...require('./utilities/outline.cjs'),
+};
+
+const DEFAULT_OPTIONS = {
+  components: {},
+};
+
+module.exports = tailwindPlugin.withOptions(
+  (providedOptions) => {
+    const options = {
+      ...DEFAULT_OPTIONS,
+      ...providedOptions,
+    };
+
+    const components = Object.keys(COMPONENTS).filter((component) => {
+      return options.components[component] !== false;
+    });
+
+    return ({ addComponents, addUtilities, config, theme }) => {
+      addComponents(
+        components.map((component) =>
+          COMPONENTS[component]({
+            config,
+            options: options.components[component],
+            theme,
+          }),
+        ),
+      );
+
+      addUtilities(UTILITIES);
+    };
+  },
+  () => ({
+    safelist: [
+      {
+        pattern: /^velvet-/,
+      },
+    ],
+  }),
+);

package/tailwind/utilities/outline.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  '.velvet-outline': {
+    '@apply outline outline-2 outline-offset-1': {},
+  },
+  '.velvet-outline-offset-0': {
+    '@apply outline outline-2 outline-offset-0': {},
+  },
+};