@thatix.io/credit-ui 0.0.1 → 0.0.3

package/dist/credit-ui.es.js

@@ -8861,7 +8861,7 @@ function o5(t) {
 function y0(t) {
   return t.replace(/-([a-z])/g, (e, a) => a.toUpperCase());
 }
-const d5 = "0.0.1";
+const d5 = "0.0.2";
 export {
   M0 as ActionButton,
   oe as Alert,

package/dist/index.d.ts

@@ -13,7 +13,7 @@
  * import { Button, FormField, LoginForm, FormLayout } from '@thatix.io/credit-ui'
  * ```
  */
-export declare const version = "0.0.1";
+export declare const version = "0.0.2";
 export * from './components';
 export { useTheme } from './composables';
 export { mergeTheme, generateCSSString, injectThemeCSS, defaultTokens, defaultColors, defaultFonts, } from './themes';

package/dist/nuxt.cjs.js

@@ -1 +1 @@
-"use strict";const e=require("@nuxt/kit");var r=typeof document<"u"?document.currentScript:null;const o=e.defineNuxtModule({meta:{name:"@thatix.io/credit-ui",configKey:"creditUi",compatibility:{nuxt:">=3.0.0"}},defaults:{theme:{}},setup(i,s){const t=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:r&&r.tagName.toUpperCase()==="SCRIPT"&&r.src||new URL("nuxt.cjs.js",document.baseURI).href);s.options.runtimeConfig.public.creditUi={theme:i.theme||{}},e.addPlugin({src:t.resolve("./runtime/plugin"),mode:"client"}),e.addPlugin({src:t.resolve("./runtime/plugin.server"),mode:"server"}),e.addImports({name:"useTheme",from:t.resolve("./runtime/composables/useTheme")}),s.options.css.push(t.resolve("../themes/tokens.css"))}});module.exports=o;
+"use strict";const e=require("@nuxt/kit");var i=typeof document<"u"?document.currentScript:null;const s=e.defineNuxtModule({meta:{name:"@thatix.io/credit-ui",configKey:"creditUi",compatibility:{nuxt:">=3.0.0"}},defaults:{theme:{}},setup(o,r){const t=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:i&&i.tagName.toUpperCase()==="SCRIPT"&&i.src||new URL("nuxt.cjs.js",document.baseURI).href);r.options.runtimeConfig.public.creditUi={theme:o.theme||{}},e.addPlugin({src:t.resolve("./runtime/plugin"),mode:"client"}),e.addPlugin({src:t.resolve("./runtime/plugin.server"),mode:"server"}),e.addImports({name:"useTheme",from:t.resolve("./runtime/composables/useTheme")}),r.options.css.push("@thatix.io/credit-ui/themes/tokens.css")}});module.exports=s;

package/dist/nuxt.es.js

@@ -1,5 +1,5 @@
-import { defineNuxtModule as r, createResolver as i, addPlugin as o, addImports as m } from "@nuxt/kit";
-const l = r({
+import { defineNuxtModule as r, createResolver as s, addPlugin as i, addImports as m } from "@nuxt/kit";
+const n = r({
   meta: {
     name: "@thatix.io/credit-ui",
     configKey: "creditUi",
@@ -10,22 +10,22 @@ const l = r({
   defaults: {
     theme: {}
   },
-  setup(s, t) {
-    const e = i(import.meta.url);
+  setup(o, t) {
+    const e = s(import.meta.url);
     t.options.runtimeConfig.public.creditUi = {
-      theme: s.theme || {}
-    }, o({
+      theme: o.theme || {}
+    }, i({
       src: e.resolve("./runtime/plugin"),
       mode: "client"
-    }), o({
+    }), i({
       src: e.resolve("./runtime/plugin.server"),
       mode: "server"
     }), m({
       name: "useTheme",
       from: e.resolve("./runtime/composables/useTheme")
-    }), t.options.css.push(e.resolve("../themes/tokens.css"));
+    }), t.options.css.push("@thatix.io/credit-ui/themes/tokens.css");
   }
 });
 export {
-  l as default
+  n as default
 };

package/dist/runtime/composables/useTheme.ts

@@ -0,0 +1,86 @@
+/**
+ * Nuxt composable for theme access
+ *
+ * Provides programmatic access to theme tokens within Nuxt applications.
+ * Uses runtimeConfig to access the merged theme configuration.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * const { getColor, getToken, colors, fonts } = useTheme()
+ *
+ * const primaryColor = getColor('primary')
+ * const spacing = getToken('spacing-4')
+ * </script>
+ * ```
+ */
+
+import { computed } from 'vue'
+import { useRuntimeConfig } from '#app'
+import { mergeTheme, getCSSVariable } from '@thatix.io/credit-ui/themes'
+import type { ThemeTokens } from '@thatix.io/credit-ui'
+
+export function useTheme() {
+  const config = useRuntimeConfig()
+  const themeConfig = config.public.creditUi?.theme
+
+  // Merge user config with defaults
+  const tokens = computed<ThemeTokens>(() => mergeTheme(themeConfig))
+
+  // Get color from tokens
+  const colors = computed(() => tokens.value.colors)
+  const fonts = computed(() => tokens.value.fonts)
+
+  /**
+   * Get a color token value
+   * @param name - Color name (e.g., 'primary', 'accent')
+   */
+  function getColor(name: keyof ThemeTokens['colors']): string {
+    return tokens.value.colors[name]
+  }
+
+  /**
+   * Get a font family value
+   * @param name - Font name ('heading' or 'base')
+   */
+  function getFont(name: keyof ThemeTokens['fonts']): string {
+    return tokens.value.fonts[name]
+  }
+
+  /**
+   * Get any CSS variable value from the document
+   * @param name - CSS variable name (e.g., '--color-primary', '--spacing-4')
+   */
+  function getToken(name: string): string {
+    // Ensure name starts with --
+    const varName = name.startsWith('--') ? name : `--${name}`
+    return getCSSVariable(varName)
+  }
+
+  /**
+   * Get spacing token value
+   * @param size - Spacing size (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16)
+   */
+  function getSpacing(size: keyof ThemeTokens['spacing']): string {
+    return tokens.value.spacing[size]
+  }
+
+  /**
+   * Get radius token value
+   * @param size - Radius size (none, sm, md, lg, xl, 2xl, full)
+   */
+  function getRadius(size: keyof ThemeTokens['radius']): string {
+    return tokens.value.radius[size]
+  }
+
+  return {
+    tokens,
+    colors,
+    fonts,
+    getColor,
+    getFont,
+    getToken,
+    getSpacing,
+    getRadius,
+  }
+}

package/dist/runtime/plugin.server.ts

@@ -0,0 +1,32 @@
+/**
+ * Server-side Nuxt plugin for theme injection
+ *
+ * Generates inline CSS for SSR to prevent FOUC (Flash of Unstyled Content).
+ * The CSS is injected into the head during server-side rendering.
+ */
+
+import { defineNuxtPlugin, useRuntimeConfig, useHead } from '#app'
+import { mergeTheme, generateCSSString } from '@thatix.io/credit-ui/themes'
+
+export default defineNuxtPlugin({
+  name: 'credit-ui-theme-server',
+  enforce: 'pre',
+  setup() {
+    const config = useRuntimeConfig()
+    const themeConfig = config.public.creditUi?.theme
+
+    // Merge user config with defaults
+    const tokens = mergeTheme(themeConfig)
+    const cssString = generateCSSString(tokens)
+
+    // Inject CSS into head for SSR
+    useHead({
+      style: [
+        {
+          id: 'credit-ui-theme',
+          innerHTML: cssString,
+        },
+      ],
+    })
+  },
+})

package/dist/runtime/plugin.ts

@@ -0,0 +1,22 @@
+/**
+ * Client-side Nuxt plugin for theme injection
+ *
+ * Reads theme config from runtimeConfig and injects CSS variables
+ * into the document head, overriding defaults from tokens.css.
+ */
+
+import { defineNuxtPlugin, useRuntimeConfig } from '#app'
+import { mergeTheme, injectThemeCSS } from '@thatix.io/credit-ui/themes'
+
+export default defineNuxtPlugin({
+  name: 'credit-ui-theme',
+  enforce: 'pre',
+  setup() {
+    const config = useRuntimeConfig()
+    const themeConfig = config.public.creditUi?.theme
+
+    // Merge user config with defaults and inject CSS
+    const tokens = mergeTheme(themeConfig)
+    injectThemeCSS(tokens)
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thatix.io/credit-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "UI Kit para esteiras de crédito da Thatix",
   "author": "Thatix.io",
@@ -31,6 +31,9 @@
     },
     "./themes/tokens.css": {
       "style": "./dist/tokens.css"
+    },
+    "./style.css": {
+      "style": "./dist/credit-ui.css"
     }
   },
   "files": [

package/src/nuxt/runtime/composables/useTheme.ts

@@ -17,8 +17,8 @@
 
 import { computed } from 'vue'
 import { useRuntimeConfig } from '#app'
-import { mergeTheme, getCSSVariable } from '../../../themes'
-import type { ThemeTokens } from '../../../types/theme'
+import { mergeTheme, getCSSVariable } from '@thatix.io/credit-ui/themes'
+import type { ThemeTokens } from '@thatix.io/credit-ui'
 
 export function useTheme() {
   const config = useRuntimeConfig()

package/src/nuxt/runtime/plugin.server.ts

@@ -6,7 +6,7 @@
  */
 
 import { defineNuxtPlugin, useRuntimeConfig, useHead } from '#app'
-import { mergeTheme, generateCSSString } from '../../themes'
+import { mergeTheme, generateCSSString } from '@thatix.io/credit-ui/themes'
 
 export default defineNuxtPlugin({
   name: 'credit-ui-theme-server',

package/src/nuxt/runtime/plugin.ts

@@ -6,7 +6,7 @@
  */
 
 import { defineNuxtPlugin, useRuntimeConfig } from '#app'
-import { mergeTheme, injectThemeCSS } from '../../themes'
+import { mergeTheme, injectThemeCSS } from '@thatix.io/credit-ui/themes'
 
 export default defineNuxtPlugin({
   name: 'credit-ui-theme',