@luminescent/ui 1.0.5 → 1.1.3

package/lib/components/bg.js

@@ -0,0 +1,36 @@
+export default function ({ matchUtilities, theme }) {
+    const colors = {};
+    Object.entries(theme('colors')).forEach(([color, value]) => {
+        if (typeof value == 'string') {
+            colors[color] = color;
+        }
+        else {
+            Object.keys(value).forEach((shade) => {
+                colors[`${color}-${shade}`] = `${color}.${shade}`;
+            });
+        }
+    });
+    matchUtilities({
+        'lum-bg': (value) => {
+            var _a, _b, _c, _d, _e;
+            const color = value.split('.')[0];
+            const shades = Object.values(colors).filter((c) => {
+                return c.startsWith(color);
+            });
+            const index = shades.indexOf(value);
+            const borderColor = shades[index - 1 < 0 ? shades.length - 1 : index - 1] || shades[index + 1 > shades.length - 1 ? 0 : index + 1];
+            const textColor = shades[index - 5 < 0 ? shades.length - 1 : index - 5] || shades[index + 5 > shades.length - 1 ? 0 : index + 5];
+            return {
+                background: (_a = theme(`colors.${value}`)) !== null && _a !== void 0 ? _a : value,
+                color: textColor == value ? 'inherit' : (_b = theme(`colors.${textColor}`)) !== null && _b !== void 0 ? _b : 'inherit',
+                border: `1px solid ${(_d = (_c = theme(`colors.${borderColor !== null && borderColor !== void 0 ? borderColor : value}`)) !== null && _c !== void 0 ? _c : borderColor) !== null && _d !== void 0 ? _d : value}`,
+                outline: 'none',
+                '&:focus': {
+                    border: `1px solid ${(_e = theme(`colors.${textColor}`)) !== null && _e !== void 0 ? _e : 'inherit'}`,
+                },
+            };
+        },
+    }, {
+        values: colors,
+    });
+}

package/lib/components/btn.js

@@ -0,0 +1,9 @@
+export const defaultClasses = 'lum-pad-md text-base lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md';
+export default function ({ addComponents }) {
+    addComponents({
+        '.lum-btn': {
+            '@apply flex items-center gap-3 motion-safe:transition ease-in-out disabled:opacity-50 hover:drop-shadow-lg motion-safe:active:scale-95 whitespace-nowrap touch-manipulation select-none text-center': {},
+            [`@apply ${defaultClasses}`]: {},
+        },
+    });
+}

package/lib/components/card.js

@@ -0,0 +1,9 @@
+export const defaultClasses = 'lum-bg-gray-900 lum-pad-equal-4xl rounded-lg';
+export default function ({ addComponents }) {
+    addComponents({
+        '.lum-card': {
+            '@apply flex flex-col gap-3 motion-safe:transition ease-in-out whitespace-nowrap': {},
+            [`@apply ${defaultClasses}`]: {},
+        },
+    });
+}

package/lib/components/input.js

@@ -0,0 +1,9 @@
+export const defaultClasses = 'lum-pad-sm text-sm lum-bg-gray-800 hover:lum-bg-gray-700 rounded-md';
+export default function ({ addComponents }) {
+    addComponents({
+        '.lum-input': {
+            '@apply flex motion-safe:transition ease-in-out disabled:opacity-50 hover:drop-shadow-lg whitespace-nowrap touch-manipulation select-none': {},
+            [`@apply ${defaultClasses}`]: {},
+        },
+    });
+}

package/lib/components/loading.js

@@ -0,0 +1,7 @@
+export default function ({ addComponents }) {
+    addComponents({
+        '.lum-loading': {
+            '@apply animate-spin rounded-full border-transparent border-l-current border-t-current border-4': {},
+        },
+    });
+}

package/lib/components/pad.js

@@ -0,0 +1,24 @@
+const padding = {
+    xs: ['2.5', '1.5'],
+    sm: ['3', '2'],
+    md: ['4', '2'],
+    lg: ['7', '4'],
+    xl: ['8', '4'],
+    '2xl': ['10', '5'],
+    '3xl': ['12', '6'],
+    '4xl': ['14', '7'],
+    '5xl': ['16', '8'],
+};
+export default function ({ addComponents }) {
+    const classes = {};
+    Object.keys(padding).forEach((key) => {
+        const [x, y] = padding[key];
+        classes[`.lum-pad-${key}`] = {
+            [`@apply px-${x} py-${y}`]: {},
+        };
+        classes[`.lum-pad-equal-${key}`] = {
+            [`@apply p-${y}`]: {},
+        };
+    });
+    addComponents(classes);
+}

package/lib/index.js

@@ -0,0 +1,8 @@
+import plugin from 'tailwindcss/plugin';
+import { readdirSync } from 'fs';
+export default plugin(function (plugin) {
+    const components = readdirSync(__dirname + '/components').map((file) => file.split('.')[0]);
+    components.forEach((component) => {
+        import(`./components/${component}`).then((module) => module.default(plugin));
+    });
+});