@thatix.io/credit-ui 0.0.1

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@thatix.io/credit-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "UI Kit para esteiras de crédito da Thatix",
+  "author": "Thatix.io",
+  "license": "UNLICENSED",
+  "main": "./dist/credit-ui.cjs.js",
+  "module": "./dist/credit-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/credit-ui.es.js",
+      "require": "./dist/credit-ui.cjs.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/credit-ui.es.js",
+      "require": "./dist/credit-ui.cjs.js"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt/module.d.ts",
+      "import": "./dist/nuxt.es.js",
+      "require": "./dist/nuxt.cjs.js"
+    },
+    "./themes": {
+      "types": "./dist/themes/index.d.ts",
+      "import": "./dist/themes.es.js",
+      "require": "./dist/themes.cjs.js"
+    },
+    "./themes/tokens.css": {
+      "style": "./dist/tokens.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src/nuxt/runtime"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write src",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@storybook/vue3": "^10.2.1",
+    "@storybook/vue3-vite": "^10.2.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.7.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "storybook": "^10.2.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.27",
+    "vue-tsc": "^3.2.4"
+  },
+  "dependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "ogl": "^1.0.11"
+  }
+}

package/src/nuxt/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 '../../../themes'
+import type { ThemeTokens } from '../../../types/theme'
+
+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/src/nuxt/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 '../../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/src/nuxt/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 '../../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)
+  },
+})