@teammodlr/ui-kit 1.0.4 → 1.0.6

package/src/css/variables.css

@@ -0,0 +1,80 @@
+:root {
+    --font-size: 14px;
+    --font-color: #333;
+    --font-family: 'Inter', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    --white: #FFF;
+    --black: #000;
+
+    --blue: hsl(212, 92%, 53%);
+    --blue-outline: hsla(212, 92%, 53%, .4);
+    --blue-hover: hsl(212, 97%, 58%);
+    --blue-focus: hsl(212, 97%, 45%);
+    --blue-light: hsl(212, 92%, 51%);
+    --blue-lighter: hsl(212, 92%, 58%);
+    --blue-dark: hsl(212, 92%, 37%);
+    --blue-darker: hsl(212, 92%, 27%);
+    --blue-secondary: hsl(212, 89%, 93%);
+    --blue-secondary-hover: hsl(212, 97%, 90%);
+    --blue-secondary-focus: hsl(212, 97%, 88%);
+
+    --green: hsl(148, 74%, 36%);
+    --green-outline: hsla(148, 74%, 36%, .4);
+    --green-hover: hsl(148, 52%, 45%);
+    --green-focus: hsl(148, 52%, 37%);
+    --green-light: hsl(148, 92%, 51%);
+    --green-lighter: hsl(148, 92%, 58%);
+    --green-dark: hsl(148, 92%, 29%);
+    --green-darker: hsl(148, 92%, 25%);
+    --green-secondary: hsl(148, 42%, 90%);
+    --green-secondary-hover: hsl(148, 42%, 86%);
+    --green-secondary-focus: hsl(148, 42%, 82%);
+
+    --red: hsl(348, 63%, 50%);
+    --red-outline: hsla(348, 63%, 50%, 4);
+    --red-hover: hsl(348, 68%, 56%);
+    --red-focus: hsl(348, 68%, 46%);
+    --red-light: hsl(348, 64%, 50%);
+    --red-lighter: hsl(348, 63%, 58%);
+    --red-dark: hsl(348, 63%, 46%);
+    --red-darker: hsl(348, 63%, 40%);
+    --red-secondary: hsl(348, 61%, 92%);
+    --red-secondary-hover: hsl(348, 61%, 89%);
+    --red-secondary-focus: hsl(348, 61%, 85%);
+
+    --yellow: hsl(37, 87%, 53%);
+    --yellow-outline: hsla(37, 87%, 53%, .4);
+    --yellow-hover: hsl(37, 87%, 59%);
+    --yellow-focus: hsl(37, 87%, 48%);
+    --yellow-light: hsl(37, 64%, 52%);
+    --yellow-lighter: hsl(37, 63%, 60%);
+    --yellow-dark: hsl(37, 63%, 48%);
+    --yellow-darker: hsl(37, 63%, 42%);
+    --yellow-secondary: hsl(37, 61%, 92%);
+    --yellow-secondary-hover: hsl(37, 61%, 87%);
+    --yellow-secondary-focus: hsl(37, 61%, 85%);
+
+    --gray-50: #fafaf9;
+    --gray-100: #f5f5f4;
+    --gray-150: #eeeeee;
+    --gray-200: #e7e5e4;
+    --gray-300: #d6d3d1;
+    --gray-400: #bdbab8;
+    --gray-500: #78716c;
+    --gray-600: #57534e;
+    --gray-700: #44403c;
+    --gray-800: #292524;
+    --gray-900: #1c1917;
+
+    --shadow: 0px 4px 10px 1px rgb(154 161 171 / 20%);
+}
+
+html,
+body {
+    height: 100%;
+    font-family: var(--font-family);
+}
+
+* {
+    box-sizing: border-box;
+}

package/src/exports/nuxt.js

@@ -0,0 +1,33 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+    meta: {
+        name: '@teammodlr/ui-kit',
+        configKey: 'modlr',
+        compatibility: {
+            nuxt: '^3.0.0-rc.1',
+        },
+    },
+    defaults: {
+        prefix: 'M',
+    },
+    async setup(options, nuxt) {
+        // Create resolver to resolve relative paths
+        const { resolve } = createResolver(import.meta.url)
+
+        nuxt.options.runtimeConfig.public.modlrUiOptions = options
+
+        // plugin install
+        addPlugin(resolve('./nuxt.plugin.js'))
+
+        // nuxt install
+        nuxt.hook('components:dirs', (dirs) => {
+            dirs.push({
+                path: fileURLToPath(new URL('../src/components', import.meta.url)),
+                extensions: ['vue', 'tsx'],
+                prefix: options?.prefix ? options?.prefix : 'M',
+            })
+        })
+    },
+})

package/src/exports/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const UI = create(nuxtApp.$config.modlrUiOptions)
+
+    nuxtApp.vueApp.use(UI)
+})

package/src/index.ts

@@ -0,0 +1,5 @@
+import './css/index.css';
+export * from './components';
+export { default as createUI } from './create';
+export { default } from './install';
+

package/src/install.ts

@@ -0,0 +1,8 @@
+import * as components from './components'
+import create from './create'
+
+export default create({
+    components: Object.keys(components).map(
+        (key) => components[key as keyof object],
+    ),
+})

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/src/types/props.ts

@@ -0,0 +1,3 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';