diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml new file mode 100644 index 00000000..393af549 --- /dev/null +++ b/.github/workflows/docs.yml @@ -0,0 +1,232 @@ +name: Documentation CI + +on: + push: + branches: + - main + - develop + paths: + - 'apps/ds-docs/**' + - 'packages/**' + - '.github/workflows/docs.yml' + pull_request: + branches: + - main + - develop + paths: + - 'apps/ds-docs/**' + - 'packages/**' + - '.github/workflows/docs.yml' + +env: + NODE_VERSION: '20' + PNPM_VERSION: '8' + +# Minimal permissions for CI (read-only checkout; no write to repo) +permissions: + contents: read + +jobs: + lint: + name: Documentation Lint + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Run documentation lint + run: | + cd apps/ds-docs + pnpm run lint || echo "Lint script not defined, skipping..." + + - name: Validate frontmatter + run: | + cd apps/ds-docs + pnpm run lint || true + + link-check: + name: Link Validation + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Check internal links + run: | + cd apps/ds-docs + pnpm run lint:links || true + + component-docs: + name: Component Documentation Coverage + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Check component documentation coverage + run: | + cd apps/ds-docs + pnpm run lint:coverage + + api-extraction: + name: API Extraction + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Extract component APIs + run: | + cd apps/ds-docs + pnpm run build:api || true + + - name: Upload API artifacts + uses: actions/upload-artifact@v4 + with: + name: component-api + path: apps/ds-docs/src/generated/component-api/ + retention-days: 7 + + build: + name: Build Documentation + runs-on: ubuntu-latest + needs: [lint, link-check, component-docs] + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build @aziontech/icons + run: pnpm --filter @aziontech/icons run build + + - name: Build search index + run: | + cd apps/ds-docs + pnpm run build:search + + - name: Build documentation + run: | + cd apps/ds-docs + pnpm run build + env: + ASTRO_TELEMETRY_DISABLED: true + + - name: Upload build artifacts + uses: actions/upload-artifact@v4 + with: + name: docs-build + path: apps/ds-docs/dist/ + retention-days: 7 + + preview: + name: Deploy Preview + runs-on: ubuntu-latest + needs: build + if: github.event_name == 'pull_request' + + steps: + - name: Download build artifacts + uses: actions/download-artifact@v4 + with: + name: docs-build + path: dist + + - name: Deploy to preview + run: | + echo "Preview deployment would happen here" + echo "Build artifacts are ready at: dist/" + # In a real setup, this would deploy to a preview environment + # such as Vercel, Netlify, or Cloudflare Pages + + # Summary job that requires all checks to pass + docs-check: + name: Documentation Check Summary + runs-on: ubuntu-latest + needs: [lint, link-check, component-docs, build] + if: always() + + steps: + - name: Check job status + run: | + if [[ "${{ needs.lint.result }}" == "failure" ]] || \ + [[ "${{ needs.link-check.result }}" == "failure" ]] || \ + [[ "${{ needs.component-docs.result }}" == "failure" ]] || \ + [[ "${{ needs.build.result }}" == "failure" ]]; then + echo "❌ Documentation checks failed" + exit 1 + fi + echo "✅ All documentation checks passed" diff --git a/apps/ds-docs/.astro/collections/v1-en.schema.json b/apps/ds-docs/.astro/collections/v1-en.schema.json new file mode 100644 index 00000000..ea7ef966 --- /dev/null +++ b/apps/ds-docs/.astro/collections/v1-en.schema.json @@ -0,0 +1,1026 @@ +{ + "$ref": "#/definitions/v1-en", + "definitions": { + "v1-en": { + "anyOf": [ + { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "form", + "navigation", + "feedback", + "data-display", + "layout", + "utility" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "deprecatedIn": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, + "type": { + "type": "string", + "const": "component" + }, + "component": { + "type": "string" + }, + "source": { + "type": "string" + }, + "storybook": { + "type": "string" + }, + "figma": { + "type": "string" + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + }, + "apiFrom": { + "type": "string" + }, + "anatomy": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + } + }, + "accessibility": { + "type": "object", + "properties": { + "keyboard": { + "type": "array", + "items": { + "type": "object", + "properties": { + "keys": { + "type": "string" + }, + "action": { + "type": "string" + } + }, + "required": [ + "keys", + "action" + ], + "additionalProperties": false + } + }, + "aria": { + "type": "array", + "items": { + "type": "object", + "properties": { + "attribute": { + "type": "string" + }, + "usage": { + "type": "string" + } + }, + "required": [ + "attribute", + "usage" + ], + "additionalProperties": false + } + }, + "wcag": { + "type": "array", + "items": { + "type": "string" + } + }, + "notes": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "additionalProperties": false + }, + "usage": { + "type": "object", + "properties": { + "whenToUse": { + "type": "array", + "items": { + "type": "string" + } + }, + "whenNotToUse": { + "type": "array", + "items": { + "type": "string" + } + }, + "doDonts": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "do", + "dont" + ] + }, + "description": { + "type": "string" + }, + "example": { + "type": "string" + } + }, + "required": [ + "type", + "description" + ], + "additionalProperties": false + } + }, + "examples": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "code": { + "type": "string" + }, + "preview": { + "type": "string" + } + }, + "required": [ + "title", + "code" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "type": { + "type": "string" + }, + "default": { + "type": "string" + }, + "required": { + "type": "boolean" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "type", + "description" + ], + "additionalProperties": false + } + }, + "slots": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "description": { + "type": "string" + }, + "props": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + }, + "events": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "payload": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "imagery" + ] + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "foundation" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "border", + "shadow" + ] + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "token" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "block" + }, + "components": { + "type": "array", + "items": { + "type": "string" + } + }, + "usage": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/usage" + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/api/properties/props/items" + } + }, + "slots": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/api/properties/slots/items" + } + }, + "events": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/api/properties/events/items" + } + } + }, + "additionalProperties": false + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "pattern" + }, + "useCases": { + "type": "array", + "items": { + "type": "string" + } + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "template" + }, + "blocks": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "installation", + "quick-start", + "migration", + "contribution" + ] + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "guide" + }, + "prerequisites": { + "type": "array", + "items": { + "type": "string" + } + }, + "difficulty": { + "type": "string", + "enum": [ + "beginner", + "intermediate", + "advanced" + ] + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "azionicons", + "primeicons" + ] + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "icon" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "guidelines", + "development", + "documentation", + "pull-requests" + ] + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "contributing" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-en/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "playground" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + ] + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/collections/v1-pt.schema.json b/apps/ds-docs/.astro/collections/v1-pt.schema.json new file mode 100644 index 00000000..979fb984 --- /dev/null +++ b/apps/ds-docs/.astro/collections/v1-pt.schema.json @@ -0,0 +1,1026 @@ +{ + "$ref": "#/definitions/v1-pt", + "definitions": { + "v1-pt": { + "anyOf": [ + { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "navLabel": { + "type": "string" + }, + "order": { + "type": "number" + }, + "hidden": { + "type": "boolean" + }, + "category": { + "type": "string", + "enum": [ + "form", + "navigation", + "feedback", + "data-display", + "layout", + "utility" + ] + }, + "status": { + "type": "string", + "enum": [ + "stable", + "beta", + "deprecated", + "planned", + "experimental" + ] + }, + "since": { + "type": "string" + }, + "deprecatedIn": { + "type": "string" + }, + "contributors": { + "type": "array", + "items": { + "type": "string" + } + }, + "lastUpdated": { + "anyOf": [ + { + "type": "string", + "format": "date-time" + }, + { + "type": "string", + "format": "date" + }, + { + "type": "integer", + "format": "unix-time" + } + ] + }, + "tags": { + "type": "array", + "items": { + "type": "string" + } + }, + "version": { + "type": "string", + "default": "v1" + }, + "language": { + "type": "string", + "default": "en" + }, + "translatedFrom": { + "type": "string" + }, + "translationStatus": { + "type": "string", + "enum": [ + "complete", + "partial", + "missing" + ] + }, + "type": { + "type": "string", + "const": "component" + }, + "component": { + "type": "string" + }, + "source": { + "type": "string" + }, + "storybook": { + "type": "string" + }, + "figma": { + "type": "string" + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + }, + "apiFrom": { + "type": "string" + }, + "anatomy": { + "type": "array", + "items": { + "type": "object", + "properties": { + "label": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "label" + ], + "additionalProperties": false + } + }, + "accessibility": { + "type": "object", + "properties": { + "keyboard": { + "type": "array", + "items": { + "type": "object", + "properties": { + "keys": { + "type": "string" + }, + "action": { + "type": "string" + } + }, + "required": [ + "keys", + "action" + ], + "additionalProperties": false + } + }, + "aria": { + "type": "array", + "items": { + "type": "object", + "properties": { + "attribute": { + "type": "string" + }, + "usage": { + "type": "string" + } + }, + "required": [ + "attribute", + "usage" + ], + "additionalProperties": false + } + }, + "wcag": { + "type": "array", + "items": { + "type": "string" + } + }, + "notes": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "additionalProperties": false + }, + "usage": { + "type": "object", + "properties": { + "whenToUse": { + "type": "array", + "items": { + "type": "string" + } + }, + "whenNotToUse": { + "type": "array", + "items": { + "type": "string" + } + }, + "doDonts": { + "type": "array", + "items": { + "type": "object", + "properties": { + "type": { + "type": "string", + "enum": [ + "do", + "dont" + ] + }, + "description": { + "type": "string" + }, + "example": { + "type": "string" + } + }, + "required": [ + "type", + "description" + ], + "additionalProperties": false + } + }, + "examples": { + "type": "array", + "items": { + "type": "object", + "properties": { + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "code": { + "type": "string" + }, + "preview": { + "type": "string" + } + }, + "required": [ + "title", + "code" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "type": { + "type": "string" + }, + "default": { + "type": "string" + }, + "required": { + "type": "boolean" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "type", + "description" + ], + "additionalProperties": false + } + }, + "slots": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "description": { + "type": "string" + }, + "props": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + }, + "events": { + "type": "array", + "items": { + "type": "object", + "properties": { + "name": { + "type": "string" + }, + "payload": { + "type": "string" + }, + "description": { + "type": "string" + } + }, + "required": [ + "name", + "description" + ], + "additionalProperties": false + } + } + }, + "additionalProperties": false + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "imagery" + ] + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "foundation" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "color", + "typography", + "spacing", + "elevation", + "motion", + "border", + "shadow" + ] + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "token" + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "block" + }, + "components": { + "type": "array", + "items": { + "type": "string" + } + }, + "usage": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/usage" + }, + "api": { + "type": "object", + "properties": { + "props": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/api/properties/props/items" + } + }, + "slots": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/api/properties/slots/items" + } + }, + "events": { + "type": "array", + "items": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/api/properties/events/items" + } + } + }, + "additionalProperties": false + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "pattern" + }, + "useCases": { + "type": "array", + "items": { + "type": "string" + } + }, + "related": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "template" + }, + "blocks": { + "type": "array", + "items": { + "type": "string" + } + } + }, + "required": [ + "title", + "description", + "category", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "installation", + "quick-start", + "migration", + "contribution" + ] + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "guide" + }, + "prerequisites": { + "type": "array", + "items": { + "type": "string" + } + }, + "difficulty": { + "type": "string", + "enum": [ + "beginner", + "intermediate", + "advanced" + ] + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "azionicons", + "primeicons" + ] + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "icon" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string", + "enum": [ + "guidelines", + "development", + "documentation", + "pull-requests" + ] + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "contributing" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + }, + { + "type": "object", + "properties": { + "title": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/title" + }, + "description": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/description" + }, + "navLabel": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/navLabel" + }, + "order": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/order" + }, + "hidden": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/hidden" + }, + "category": { + "type": "string" + }, + "status": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/status" + }, + "since": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/since" + }, + "deprecatedIn": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/deprecatedIn" + }, + "contributors": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/contributors" + }, + "lastUpdated": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/lastUpdated" + }, + "tags": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/tags" + }, + "version": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/version" + }, + "language": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/language" + }, + "translatedFrom": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translatedFrom" + }, + "translationStatus": { + "$ref": "#/definitions/v1-pt/anyOf/0/properties/translationStatus" + }, + "type": { + "type": "string", + "const": "playground" + } + }, + "required": [ + "title", + "description", + "type" + ], + "additionalProperties": false + } + ] + } + }, + "$schema": "http://json-schema.org/draft-07/schema#" +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/content-assets.mjs b/apps/ds-docs/.astro/content-assets.mjs new file mode 100644 index 00000000..2b8b8234 --- /dev/null +++ b/apps/ds-docs/.astro/content-assets.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/apps/ds-docs/.astro/content-modules.mjs b/apps/ds-docs/.astro/content-modules.mjs new file mode 100644 index 00000000..dcbe8bb0 --- /dev/null +++ b/apps/ds-docs/.astro/content-modules.mjs @@ -0,0 +1,74 @@ + +export default new Map([ +["src/content/v1/en/components/azion-system-status.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fazion-system-status.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/button.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fbutton.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-auto-complete.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-auto-complete.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-checkbox-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-checkbox-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown-icon.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown-icon.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/blocks/toast.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fblocks%2Ftoast.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown-lazy-loader-with-filter.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown-lazy-loader-with-filter.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown-lazy-loader-dynamic.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown-lazy-loader-dynamic.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown-lazy-loader.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown-lazy-loader.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/foundations/color.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Ffoundations%2Fcolor.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/blocks/toast.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fblocks%2Ftoast.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/foundations/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Ffoundations%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/azion-system-status.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fazion-system-status.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/button.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fbutton.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown-icon.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown-icon.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-checkbox-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-checkbox-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-auto-complete.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-auto-complete.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown-multi-select-lazy-loader.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown-multi-select-lazy-loader.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-dropdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-dropdown.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-group-checkbox.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-group-checkbox.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-group-radio.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-group-radio.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-group-switch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-group-switch.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-input-group.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-input-group.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-number.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-number.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-multi-select.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-multi-select.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-phone-number-country.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-phone-number-country.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown-lazy-loader-dynamic.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown-lazy-loader-dynamic.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-phone-number.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-phone-number.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown-lazy-loader-with-filter.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown-lazy-loader-with-filter.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown-multi-select-lazy-loader.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown-multi-select-lazy-loader.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-group-checkbox.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-group-checkbox.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-group-switch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-group-switch.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-group-radio.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-group-radio.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-dropdown-lazy-loader.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-dropdown-lazy-loader.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-input-group.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-input-group.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-switch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-switch.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-multi-select.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-multi-select.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-radio-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-radio-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-switch-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-switch-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-text-icon.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-text-icon.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-pick-list.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-pick-list.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-text-privacy.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-text-privacy.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-text-area.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-text-area.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-label.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-label.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-text-password.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-text-password.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/form-field-text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fform-field-text.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-phone-number.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-phone-number.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-phone-number-country.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-phone-number-country.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-pick-list.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-pick-list.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-number.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-number.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-radio-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-radio-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-switch-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-switch-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-switch.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-switch.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-text-area.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-text-area.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-text-icon.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-text-icon.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/components/selector-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fcomponents%2Fselector-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/foundations/color.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Ffoundations%2Fcolor.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-text-password.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-text-password.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/foundations/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Ffoundations%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-text-privacy.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-text-privacy.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-field-text.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-field-text.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/form-label.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fform-label.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/components/selector-block.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fcomponents%2Fselector-block.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/patterns/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fpatterns%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/patterns/success-creation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Fpatterns%2Fsuccess-creation.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/patterns/success-creation.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Fpatterns%2Fsuccess-creation.mdx&astroContentModuleFlag=true")], +["src/content/v1/pt/tokens/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fpt%2Ftokens%2Findex.mdx&astroContentModuleFlag=true")], +["src/content/v1/en/tokens/index.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fv1%2Fen%2Ftokens%2Findex.mdx&astroContentModuleFlag=true")]]); + \ No newline at end of file diff --git a/apps/ds-docs/.astro/content.d.ts b/apps/ds-docs/.astro/content.d.ts new file mode 100644 index 00000000..734330b8 --- /dev/null +++ b/apps/ds-docs/.astro/content.d.ts @@ -0,0 +1,226 @@ +declare module 'astro:content' { + interface Render { + '.mdx': Promise<{ + Content: import('astro').MDXContent; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + components: import('astro').MDXInstance<{}>['components']; + }>; + } +} + +declare module 'astro:content' { + export interface RenderResult { + Content: import('astro/runtime/server/index.js').AstroComponentFactory; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + } + interface Render { + '.md': Promise; + } + + export interface RenderedContent { + html: string; + metadata?: { + imagePaths: Array; + [key: string]: unknown; + }; + } +} + +declare module 'astro:content' { + type Flatten = T extends { [K: string]: infer U } ? U : never; + + export type CollectionKey = keyof AnyEntryMap; + export type CollectionEntry = Flatten; + + export type ContentCollectionKey = keyof ContentEntryMap; + export type DataCollectionKey = keyof DataEntryMap; + + type AllValuesOf = T extends any ? T[keyof T] : never; + type ValidContentEntrySlug = AllValuesOf< + ContentEntryMap[C] + >['slug']; + + export type ReferenceDataEntry< + C extends CollectionKey, + E extends keyof DataEntryMap[C] = string, + > = { + collection: C; + id: E; + }; + export type ReferenceContentEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}) = string, + > = { + collection: C; + slug: E; + }; + export type ReferenceLiveEntry = { + collection: C; + id: string; + }; + + /** @deprecated Use `getEntry` instead. */ + export function getEntryBySlug< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + // Note that this has to accept a regular string too, for SSR + entrySlug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + + /** @deprecated Use `getEntry` instead. */ + export function getDataEntryById( + collection: C, + entryId: E, + ): Promise>; + + export function getCollection>( + collection: C, + filter?: (entry: CollectionEntry) => entry is E, + ): Promise; + export function getCollection( + collection: C, + filter?: (entry: CollectionEntry) => unknown, + ): Promise[]>; + + export function getLiveCollection( + collection: C, + filter?: LiveLoaderCollectionFilterType, + ): Promise< + import('astro').LiveDataCollectionResult, LiveLoaderErrorType> + >; + + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + entry: ReferenceContentEntry, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + entry: ReferenceDataEntry, + ): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + slug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + collection: C, + id: E, + ): E extends keyof DataEntryMap[C] + ? string extends keyof DataEntryMap[C] + ? Promise | undefined + : Promise + : Promise | undefined>; + export function getLiveEntry( + collection: C, + filter: string | LiveLoaderEntryFilterType, + ): Promise, LiveLoaderErrorType>>; + + /** Resolve an array of entry references from the same collection */ + export function getEntries( + entries: ReferenceContentEntry>[], + ): Promise[]>; + export function getEntries( + entries: ReferenceDataEntry[], + ): Promise[]>; + + export function render( + entry: AnyEntryMap[C][string], + ): Promise; + + export function reference( + collection: C, + ): import('astro/zod').ZodEffects< + import('astro/zod').ZodString, + C extends keyof ContentEntryMap + ? ReferenceContentEntry> + : ReferenceDataEntry + >; + // Allow generic `string` to avoid excessive type errors in the config + // if `dev` is not running to update as you edit. + // Invalid collection names will be caught at build time. + export function reference( + collection: C, + ): import('astro/zod').ZodEffects; + + type ReturnTypeOrOriginal = T extends (...args: any[]) => infer R ? R : T; + type InferEntrySchema = import('astro/zod').infer< + ReturnTypeOrOriginal['schema']> + >; + + type ContentEntryMap = { + + }; + + type DataEntryMap = { + "v1-en": Record; + rendered?: RenderedContent; + filePath?: string; +}>; +"v1-pt": Record; + rendered?: RenderedContent; + filePath?: string; +}>; + + }; + + type AnyEntryMap = ContentEntryMap & DataEntryMap; + + type ExtractLoaderTypes = T extends import('astro/loaders').LiveLoader< + infer TData, + infer TEntryFilter, + infer TCollectionFilter, + infer TError + > + ? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError } + : { data: never; entryFilter: never; collectionFilter: never; error: never }; + type ExtractDataType = ExtractLoaderTypes['data']; + type ExtractEntryFilterType = ExtractLoaderTypes['entryFilter']; + type ExtractCollectionFilterType = ExtractLoaderTypes['collectionFilter']; + type ExtractErrorType = ExtractLoaderTypes['error']; + + type LiveLoaderDataType = + LiveContentConfig['collections'][C]['schema'] extends undefined + ? ExtractDataType + : import('astro/zod').infer< + Exclude + >; + type LiveLoaderEntryFilterType = + ExtractEntryFilterType; + type LiveLoaderCollectionFilterType = + ExtractCollectionFilterType; + type LiveLoaderErrorType = ExtractErrorType< + LiveContentConfig['collections'][C]['loader'] + >; + + export type ContentConfig = typeof import("./../src/content/config.js"); + export type LiveContentConfig = never; +} diff --git a/apps/ds-docs/.astro/data-store.json b/apps/ds-docs/.astro/data-store.json new file mode 100644 index 00000000..69d37365 --- /dev/null +++ b/apps/ds-docs/.astro/data-store.json @@ -0,0 +1 @@ +[["Map",1,2,9,10,809,810],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.18.1","content-config-digest","c6d50c3b876ba120","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://ds.azion.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{\"light\":\"github-light\",\"dark\":\"github-dark\"},\"defaultColor\":false,\"wrap\":true,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}","v1-en",["Map",11,12,90,91,115,116,129,130,139,140,149,150,293,294,303,304,313,314,323,324,333,334,343,344,353,354,363,364,373,374,383,384,393,394,403,404,413,414,423,424,433,434,443,444,453,454,463,464,473,474,483,484,493,494,503,504,513,514,523,524,531,532,541,542,549,550,606,607,615,616,647,648,671,672,715,716,736,737,747,748,770,771,792,793,800,801],"blocks/toast",{"id":11,"data":13,"body":87,"filePath":88,"digest":89,"deferredRender":61},{"title":14,"description":15,"navLabel":14,"order":16,"category":17,"status":18,"version":19,"language":20,"type":21,"components":22,"usage":23,"api":49},"Toast","A toast block for success and error feedback with title, description, icon, action link, close button, and auto-close progress bar.",1,"feedback","beta","v1","en","block",[14],{"whenToUse":24,"whenNotToUse":28,"doDonts":31,"examples":40},[25,26,27],"Confirm successful form submission or save","Show validation or server errors without blocking the UI","Short-lived feedback that does not require user acknowledgment",[29,30],"Critical errors that require immediate action (use a modal or inline error)","Long messages (prefer a dedicated message or page)",[32,35,37],{"type":33,"description":34},"do","Use success for confirmations and error for failures",{"type":33,"description":36},"Keep title and description short",{"type":38,"description":39},"dont","Don't stack too many toasts at once",[41,45],{"title":42,"description":43,"code":44},"Success toast","Use for confirmations (e.g. saved successfully).","\u003CBlockToastDemo\n variant=\"success\"\n title=\"Changes saved\"\n description=\"Your profile has been updated.\"\n actionText=\"View profile\"\n actionHref=\"#\"\n durationMs={5000}\n autoClose={false}\n/>\n",{"title":46,"description":47,"code":48},"Error toast","Use for validation or server errors.","\u003CBlockToastDemo\n variant=\"error\"\n title=\"Something went wrong\"\n description=\"We couldn't save your changes. Please try again.\"\n actionText=\"Retry\"\n actionHref=\"#\"\n durationMs={5000}\n autoClose={false}\n/>\n",{"props":50},[51,57,63,67,70,74,79,84],{"name":52,"type":53,"default":54,"required":55,"description":56},"variant","'success' | 'error'","'success'",false,"Visual variant of the toast",{"name":58,"type":59,"default":60,"required":61,"description":62},"title","string","''",true,"Toast title",{"name":64,"type":59,"default":65,"required":55,"description":66},"description","undefined","Optional description text",{"name":68,"type":59,"default":65,"required":55,"description":69},"actionText","Label for the action link or button",{"name":71,"type":59,"default":72,"required":55,"description":73},"actionHref","'#'","URL for the action link",{"name":75,"type":76,"default":77,"required":55,"description":78},"durationMs","number","5000","Auto-close duration in milliseconds; progress bar reflects this",{"name":80,"type":81,"default":82,"required":55,"description":83},"autoClose","boolean","true","When false, toast stays visible and timer does not run",{"name":85,"type":81,"default":82,"required":55,"description":86},"showProgress","When false, progress bar is hidden","import { CodeBlock, Callout, Playground } from '@components/docs';\r\nimport { blockToastDemoProps } from '@components/demo/props-metadata';\r\nimport BlockToastDemo from '@components/demo/BlockToastDemo.vue';\r\n\r\nThe Toast block combines a title, optional description, icon, optional action link/button, close button, and a progress bar that shows the remaining time until the toast auto-closes.\r\n\r\n## Playground\r\n\r\nExplore the Toast block interactively. Adjust props and see live changes.\r\n\r\n\u003CPlayground\r\n client:load\r\n component-name=\"BlockToastDemo\"\r\n props={blockToastDemoProps}\r\n initialValues={{ autoClose: false }}\r\n/>\r\n\r\n## Variants\r\n\r\nSuccess and error variants for different feedback types.\r\n\r\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-6 my-8\">\r\n \u003Cdiv class=\"border border-default rounded-lg overflow-hidden\">\r\n \u003Cdiv class=\"p-6 bg-gray-50 flex items-center justify-center min-h-[120px]\">\r\n \u003CBlockToastDemo\r\n client:load\r\n variant=\"success\"\r\n title=\"Changes saved\"\r\n description=\"Your profile has been updated.\"\r\n actionText=\"View profile\"\r\n actionHref=\"#\"\r\n autoClose={false}\r\n showProgress={true}\r\n />\r\n \u003C/div>\r\n \u003Cdiv class=\"px-4 py-2 bg-layer1 border-t border-default\">\r\n \u003Cspan class=\"text-sm font-medium text-default\">Success\u003C/span>\r\n \u003Cp class=\"text-xs text-muted mt-0.5\">Use for confirmations and positive feedback\u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003Cdiv class=\"border border-default rounded-lg overflow-hidden\">\r\n \u003Cdiv class=\"p-6 bg-layer1 flex items-center justify-center min-h-[120px]\">\r\n \u003CBlockToastDemo\r\n client:load\r\n variant=\"error\"\r\n title=\"Something went wrong\"\r\n description=\"We couldn't save your changes. Please try again.\"\r\n actionText=\"Retry\"\r\n actionHref=\"#\"\r\n autoClose={false}\r\n showProgress={true}\r\n />\r\n \u003C/div>\r\n \u003Cdiv class=\"px-4 py-2 bg-layer1 border-t border-default\">\r\n \u003Cspan class=\"text-sm font-medium text-default\">Error\u003C/span>\r\n \u003Cp class=\"text-xs text-muted mt-0.5\">Use for validation or server errors\u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n\r\n## Behavior\r\n\r\n- **Auto-close**: The progress bar decreases over the given `durationMs`; when it reaches zero, the toast closes.\r\n- **Close button**: Users can dismiss the toast at any time.\r\n- **Action**: The action link/button can navigate or trigger a retry without closing the toast (handled by your app).\r\n\r\n\u003CCallout type=\"tip\" title=\"Accessibility\">\r\nEnsure the close button has an `aria-label` and the progress bar uses `role=\"progressbar\"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.\r\n\u003C/Callout>","src/content/v1/en/blocks/toast.mdx","713c983c8b08b373","blocks",{"id":90,"data":92,"body":97,"filePath":98,"digest":99,"rendered":100},{"title":93,"description":94,"navLabel":95,"order":16,"category":96,"version":19,"language":20,"type":21},"UI Blocks","Composable UI blocks combining multiple components for common use cases.","Blocks","layout","## Overview\r\n\r\nUI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\r\n\r\n## Available Blocks\r\n\r\nBlock documentation is being prepared. Check back soon for detailed block references.\r\n\r\n\u003CCallout type=\"info\">\r\nThis section will include blocks like headers, forms, cards, and navigation patterns.\r\n\u003C/Callout>","src/content/v1/en/blocks/index.md","132c0b530959ede5",{"html":101,"metadata":102},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>UI Blocks are pre-built combinations of components that solve common interface patterns. They provide a starting point for building pages and features.\u003C/p>\n\u003Ch2 id=\"available-blocks\">Available Blocks\u003C/h2>\n\u003Cp>Block documentation is being prepared. Check back soon for detailed block references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include blocks like headers, forms, cards, and navigation patterns.\n\u003C/callout>",{"headings":103,"localImagePaths":111,"remoteImagePaths":112,"frontmatter":113,"imagePaths":114},[104,108],{"depth":105,"slug":106,"text":107},2,"overview","Overview",{"depth":105,"slug":109,"text":110},"available-blocks","Available Blocks",[],[],{"title":93,"description":94,"navLabel":95,"order":16,"type":21,"category":96},[],"components/form-field-checkbox-block",{"id":115,"data":117,"body":126,"filePath":127,"digest":128,"deferredRender":61},{"title":118,"description":119,"navLabel":118,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":124,"apiFrom":125},"Field Checkbox Block","Field Checkbox Block component from the Azion Design System.",999,"form","experimental","component","FieldCheckboxBlock","form-field-checkbox-block","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-checkbox-block.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldCheckboxBlock\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-checkbox-block.mdx","44702bb1c64d762d","components/form-field-dropdown-icon",{"id":129,"data":131,"body":136,"filePath":137,"digest":138,"deferredRender":61},{"title":132,"description":133,"navLabel":132,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":134,"apiFrom":135},"Field Dropdown Icon","Field Dropdown Icon component from the Azion Design System.","FieldDropdownIcon","form-field-dropdown-icon","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown-icon.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdownIcon\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown-icon.mdx","030ab3e59594fdbf","components/azion-system-status",{"id":139,"data":141,"body":146,"filePath":147,"digest":148,"deferredRender":61},{"title":142,"description":143,"navLabel":142,"order":105,"category":17,"status":122,"version":19,"language":20,"type":123,"component":144,"apiFrom":145},"Azion System Status","Azion System Status component from the Azion Design System.","AzionSystemStatus","azion-system-status","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/azion-system-status.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"AzionSystemStatus\"\n props={componentProps}\n/>","src/content/v1/en/components/azion-system-status.mdx","7fcd684ef4cd12cb","components/button",{"id":149,"data":151,"body":290,"filePath":291,"digest":292,"deferredRender":61},{"title":152,"description":153,"navLabel":152,"order":16,"category":121,"status":154,"since":155,"tags":156,"version":19,"language":20,"type":123,"component":152,"source":159,"storybook":160,"figma":161,"related":162,"anatomy":166,"accessibility":176,"usage":199,"api":240},"Button","Buttons trigger actions and events when users interact with them.","stable","1.0.0",[157,121,158],"action","interactive","https://github.com/aziontech/webkit/tree/main/packages/components/src/Button","https://storybook.azion.com/components/button","https://figma.com/file/azion-design-system/components/button",[163,164,165],"Input","Select","IconButton",[167,170,173],{"label":168,"description":169},"Container","The clickable area with background styling and border",{"label":171,"description":172},"Label","The text content describing the action",{"label":174,"description":175},"Icon (optional)","An optional icon for visual emphasis before or after the label",{"keyboard":177,"aria":186,"wcag":196},[178,181,184],{"keys":179,"action":180},"Tab","Moves focus to the button",{"keys":182,"action":183},"Enter","Activates the button when focused",{"keys":185,"action":183},"Space",[187,190,193],{"attribute":188,"usage":189},"aria-disabled=\"true\"","Use instead of disabled attribute for screen readers to announce the disabled state",{"attribute":191,"usage":192},"aria-label","Required for icon-only buttons to provide accessible name",{"attribute":194,"usage":195},"aria-busy=\"true\"","When button is in loading state",[197,198],"2.1.1 Keyboard","4.1.2 Name, Role, Value",{"whenToUse":200,"whenNotToUse":206,"doDonts":210,"examples":223},[201,202,203,204,205],"Trigger primary actions (Submit, Save, Continue)","Navigate to different views or pages","Toggle states or settings","Trigger secondary actions (Cancel, Delete)","Submit forms",[207,208,209],"Navigation to external links (use a link instead)","Displaying static content (use text or labels)","When a more subtle interaction is needed (consider a text link)",[211,214,217,220],{"type":33,"description":212,"example":213},"Use buttons for actionable items","\u003CButton>Submit Form\u003C/Button>",{"type":33,"description":215,"example":216},"Use clear, action-oriented labels","\u003CButton>Save Changes\u003C/Button>",{"type":38,"description":218,"example":219},"Don't use buttons for navigation","\u003CButton>Go to Docs\u003C/Button>",{"type":38,"description":221,"example":222},"Don't use vague labels","\u003CButton>Click Here\u003C/Button>",[224,228,232,236],{"title":225,"description":226,"code":227},"Primary Button","The default button style for primary actions","\u003CButton severity=\"primary\">Primary Button\u003C/Button>",{"title":229,"description":230,"code":231},"Secondary Button","For alternative or less prominent actions","\u003CButton severity=\"secondary\">Secondary Button\u003C/Button>",{"title":233,"description":234,"code":235},"Danger Button","For dangerous actions like delete or remove","\u003CButton severity=\"danger\">Delete\u003C/Button>",{"title":237,"description":238,"code":239},"Button Sizes","Available in small, medium, and large sizes","\u003CButton size=\"sm\">Small\u003C/Button>\n\u003CButton size=\"md\">Medium\u003C/Button>\n\u003CButton size=\"lg\">Large\u003C/Button>'",{"props":241,"slots":274,"events":285},[242,247,251,256,260,263,266,271],{"name":243,"type":244,"default":245,"required":55,"description":246},"severity","'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'plain' | 'contrast'","'primary'","Visual severity level - affects color scheme",{"name":52,"type":248,"default":249,"required":55,"description":250},"'filled' | 'raised' | 'rounded' | 'outlined' | 'text' | 'link'","'filled'","Style variant of the button",{"name":252,"type":253,"default":254,"required":55,"description":255},"size","'sm' | 'md' | 'lg'","'md'","Size of the button",{"name":257,"type":81,"default":258,"required":55,"description":259},"disabled","false","Whether the button is disabled",{"name":261,"type":81,"default":258,"required":55,"description":262},"loading","Shows loading spinner and disables interaction",{"name":264,"type":81,"default":258,"required":55,"description":265},"iconOnly","Render as icon-only button (no text)",{"name":267,"type":268,"default":269,"required":55,"description":270},"iconPosition","'left' | 'right'","'left'","Position of the icon relative to label",{"name":272,"type":81,"default":258,"required":55,"description":273},"fullWidth","Whether button takes full width of container",[275,278,282],{"name":276,"description":277},"default","Button label content",{"name":279,"description":280,"props":281},"icon-left","Custom icon before the label","iconClass: string",{"name":283,"description":284,"props":281},"icon-right","Custom icon after the label",[286],{"name":287,"payload":288,"description":289},"click","MouseEvent","Fired when button is clicked and not disabled","import { Playground, StateGrid, CodeBlock, Callout } from '@components/docs';\r\nimport { buttonProps } from '@components/demo/props-metadata';\r\nimport Button from '@components/demo/Button.vue';\r\n\r\nButtons are interactive elements that trigger actions when clicked or tapped. They communicate actions that users can take and are typically placed throughout your UI, from forms to dialogs to navigation.\r\n\r\nThe Button component provides a consistent, accessible way to trigger actions throughout your application.\r\n\r\n## Import\r\n\r\n\u003CCodeBlock code={`import { Button } from '@aziontech/webkit';`} lang=\"javascript\" />\r\n\r\n## Playground\r\n\r\nExplore the Button component interactively. Adjust props and see live changes.\r\n\r\n\u003CPlayground\r\n client:load\r\n component-name=\"Button\"\r\n props={buttonProps}\r\n slot-content=\"Button\"\r\n/>\r\n\r\n## States\r\n\r\n\u003CStateGrid columns={4}>\r\n \u003CButton slot=\"default\" client:load>Button\u003C/Button>\r\n \u003CButton slot=\"hover\" client:load state=\"hover\">Button\u003C/Button>\r\n \u003CButton slot=\"focus\" client:load state=\"focus\">Button\u003C/Button>\r\n \u003CButton slot=\"active\" client:load state=\"active\">Button\u003C/Button>\r\n \u003CButton slot=\"disabled\" client:load disabled>Button\u003C/Button>\r\n \u003CButton slot=\"loading\" client:load loading>Button\u003C/Button>\r\n\u003C/StateGrid>\r\n\r\n\u003CCallout type=\"tip\" title=\"Choosing the right severity\">\r\n Use **primary** for the main action, **secondary** for alternative actions, **danger** for destructive actions, and **plain** for less prominent actions.\r\n\u003C/Callout>","src/content/v1/en/components/button.mdx","1f0e054f8f4216ff","components/form-field-auto-complete",{"id":293,"data":295,"body":300,"filePath":301,"digest":302,"deferredRender":61},{"title":296,"description":297,"navLabel":296,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":298,"apiFrom":299},"Field Auto Complete","Field Auto Complete component from the Azion Design System.","FieldAutoComplete","form-field-auto-complete","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-auto-complete.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldAutoComplete\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-auto-complete.mdx","b6e3f01ddff7e31e","components/form-field-dropdown-lazy-loader-dynamic",{"id":303,"data":305,"body":310,"filePath":311,"digest":312,"deferredRender":61},{"title":306,"description":307,"navLabel":306,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":308,"apiFrom":309},"Field Dropdown Lazy Loader Dynamic","Field Dropdown Lazy Loader Dynamic component from the Azion Design System.","FieldDropdownLazyLoaderDynamic","form-field-dropdown-lazy-loader-dynamic","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown-lazy-loader-dynamic.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdownLazyLoaderDynamic\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown-lazy-loader-dynamic.mdx","5db46f3859b6f8ae","components/form-field-dropdown-lazy-loader-with-filter",{"id":313,"data":315,"body":320,"filePath":321,"digest":322,"deferredRender":61},{"title":316,"description":317,"navLabel":316,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":318,"apiFrom":319},"Field Dropdown Lazy Loader With Filter","Field Dropdown Lazy Loader With Filter component from the Azion Design System.","FieldDropdownLazyLoaderWithFilter","form-field-dropdown-lazy-loader-with-filter","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown-lazy-loader-with-filter.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdownLazyLoaderWithFilter\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown-lazy-loader-with-filter.mdx","d49458617764a8b0","components/form-field-dropdown-lazy-loader",{"id":323,"data":325,"body":330,"filePath":331,"digest":332,"deferredRender":61},{"title":326,"description":327,"navLabel":326,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":328,"apiFrom":329},"Field Dropdown Lazy Loader","Field Dropdown Lazy Loader component from the Azion Design System.","FieldDropdownLazyLoader","form-field-dropdown-lazy-loader","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown-lazy-loader.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdownLazyLoader\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown-lazy-loader.mdx","52b0deb6e43994da","components/form-field-dropdown-multi-select-lazy-loader",{"id":333,"data":335,"body":340,"filePath":341,"digest":342,"deferredRender":61},{"title":336,"description":337,"navLabel":336,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":338,"apiFrom":339},"Field Dropdown Multi Select Lazy Loader","Field Dropdown Multi Select Lazy Loader component from the Azion Design System.","FieldDropdownMultiSelectLazyLoader","form-field-dropdown-multi-select-lazy-loader","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown-multi-select-lazy-loader.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdownMultiSelectLazyLoader\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown-multi-select-lazy-loader.mdx","3e0b9509efe79eba","components/form-field-group-radio",{"id":343,"data":345,"body":350,"filePath":351,"digest":352,"deferredRender":61},{"title":346,"description":347,"navLabel":346,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":348,"apiFrom":349},"Field Group Radio","Field Group Radio component from the Azion Design System.","FieldGroupRadio","form-field-group-radio","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-group-radio.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldGroupRadio\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-group-radio.mdx","c4d074ef77915ae6","components/form-field-dropdown",{"id":353,"data":355,"body":360,"filePath":361,"digest":362,"deferredRender":61},{"title":356,"description":357,"navLabel":356,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":358,"apiFrom":359},"Field Dropdown","Field Dropdown component from the Azion Design System.","FieldDropdown","form-field-dropdown","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-dropdown.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldDropdown\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-dropdown.mdx","8b958e77f6a28b62","components/form-field-group-checkbox",{"id":363,"data":365,"body":370,"filePath":371,"digest":372,"deferredRender":61},{"title":366,"description":367,"navLabel":366,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":368,"apiFrom":369},"Field Group Checkbox","Field Group Checkbox component from the Azion Design System.","FieldGroupCheckbox","form-field-group-checkbox","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-group-checkbox.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldGroupCheckbox\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-group-checkbox.mdx","6d3af20902cbfba0","components/form-field-group-switch",{"id":373,"data":375,"body":380,"filePath":381,"digest":382,"deferredRender":61},{"title":376,"description":377,"navLabel":376,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":378,"apiFrom":379},"Field Group Switch","Field Group Switch component from the Azion Design System.","FieldGroupSwitch","form-field-group-switch","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-group-switch.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldGroupSwitch\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-group-switch.mdx","db88289fa13feb71","components/form-field-input-group",{"id":383,"data":385,"body":390,"filePath":391,"digest":392,"deferredRender":61},{"title":386,"description":387,"navLabel":386,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":388,"apiFrom":389},"Field Input Group","Field Input Group component from the Azion Design System.","FieldInputGroup","form-field-input-group","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-input-group.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldInputGroup\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-input-group.mdx","3d7fd74d5057c815","components/form-field-number",{"id":393,"data":395,"body":400,"filePath":401,"digest":402,"deferredRender":61},{"title":396,"description":397,"navLabel":396,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":398,"apiFrom":399},"Field Number","Field Number component from the Azion Design System.","FieldNumber","form-field-number","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-number.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldNumber\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-number.mdx","01daf2df4a39a9ba","components/form-field-multi-select",{"id":403,"data":405,"body":410,"filePath":411,"digest":412,"deferredRender":61},{"title":406,"description":407,"navLabel":406,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":408,"apiFrom":409},"Field Multi Select","Field Multi Select component from the Azion Design System.","FieldMultiSelect","form-field-multi-select","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-multi-select.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldMultiSelect\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-multi-select.mdx","91f5b99f94de145c","components/form-field-phone-number-country",{"id":413,"data":415,"body":420,"filePath":421,"digest":422,"deferredRender":61},{"title":416,"description":417,"navLabel":416,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":418,"apiFrom":419},"Field Phone Number Country","Field Phone Number Country component from the Azion Design System.","FieldPhoneNumberCountry","form-field-phone-number-country","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-phone-number-country.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldPhoneNumberCountry\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-phone-number-country.mdx","b48335bc47c20adb","components/form-field-phone-number",{"id":423,"data":425,"body":430,"filePath":431,"digest":432,"deferredRender":61},{"title":426,"description":427,"navLabel":426,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":428,"apiFrom":429},"Field Phone Number","Field Phone Number component from the Azion Design System.","FieldPhoneNumber","form-field-phone-number","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-phone-number.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldPhoneNumber\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-phone-number.mdx","c19c23a7fa7c9991","components/form-field-pick-list",{"id":433,"data":435,"body":440,"filePath":441,"digest":442,"deferredRender":61},{"title":436,"description":437,"navLabel":436,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":438,"apiFrom":439},"Field Pick List","Field Pick List component from the Azion Design System.","FieldPickList","form-field-pick-list","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-pick-list.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldPickList\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-pick-list.mdx","130f105dbf96e932","components/form-field-radio-block",{"id":443,"data":445,"body":450,"filePath":451,"digest":452,"deferredRender":61},{"title":446,"description":447,"navLabel":446,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":448,"apiFrom":449},"Field Radio Block","Field Radio Block component from the Azion Design System.","FieldRadioBlock","form-field-radio-block","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-radio-block.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldRadioBlock\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-radio-block.mdx","695d12c8d5209c5e","components/form-field-switch",{"id":453,"data":455,"body":460,"filePath":461,"digest":462,"deferredRender":61},{"title":456,"description":457,"navLabel":456,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":458,"apiFrom":459},"Field Switch","Field Switch component from the Azion Design System.","FieldSwitch","form-field-switch","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-switch.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldSwitch\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-switch.mdx","8db7dd305d8d644e","components/form-field-switch-block",{"id":463,"data":465,"body":470,"filePath":471,"digest":472,"deferredRender":61},{"title":466,"description":467,"navLabel":466,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":468,"apiFrom":469},"Field Switch Block","Field Switch Block component from the Azion Design System.","FieldSwitchBlock","form-field-switch-block","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-switch-block.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldSwitchBlock\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-switch-block.mdx","8606013e0e511d7f","components/form-field-text-area",{"id":473,"data":475,"body":480,"filePath":481,"digest":482,"deferredRender":61},{"title":476,"description":477,"navLabel":476,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":478,"apiFrom":479},"Field Text Area","Field Text Area component from the Azion Design System.","FieldTextArea","form-field-text-area","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-text-area.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldTextArea\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-text-area.mdx","9687ed4dd6e03dd6","components/form-field-text-icon",{"id":483,"data":485,"body":490,"filePath":491,"digest":492,"deferredRender":61},{"title":486,"description":487,"navLabel":486,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":488,"apiFrom":489},"Field Text Icon","Field Text Icon component from the Azion Design System.","FieldTextIcon","form-field-text-icon","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-text-icon.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldTextIcon\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-text-icon.mdx","0d48e979fa59609e","components/form-field-text-password",{"id":493,"data":495,"body":500,"filePath":501,"digest":502,"deferredRender":61},{"title":496,"description":497,"navLabel":496,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":498,"apiFrom":499},"Field Text Password","Field Text Password component from the Azion Design System.","FieldTextPassword","form-field-text-password","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-text-password.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldTextPassword\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-text-password.mdx","95c61cf0e5d67359","components/form-field-text-privacy",{"id":503,"data":505,"body":510,"filePath":511,"digest":512,"deferredRender":61},{"title":506,"description":507,"navLabel":506,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":508,"apiFrom":509},"Field Text Privacy","Field Text Privacy component from the Azion Design System.","FieldTextPrivacy","form-field-text-privacy","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-text-privacy.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldTextPrivacy\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-text-privacy.mdx","874f60e8538e42b9","components/form-field-text",{"id":513,"data":515,"body":520,"filePath":521,"digest":522,"deferredRender":61},{"title":516,"description":517,"navLabel":516,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":518,"apiFrom":519},"Field Text","Field Text component from the Azion Design System.","FieldText","form-field-text","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-field-text.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"FieldText\"\n props={componentProps}\n/>","src/content/v1/en/components/form-field-text.mdx","163ac09ad4075fe7","components/form-label",{"id":523,"data":525,"body":528,"filePath":529,"digest":530,"deferredRender":61},{"title":171,"description":526,"navLabel":171,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":171,"apiFrom":527},"Label component from the Azion Design System.","form-label","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/form-label.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"Label\"\n props={componentProps}\n/>","src/content/v1/en/components/form-label.mdx","6045a3ebb4b94b7a","components/selector-block",{"id":531,"data":533,"body":538,"filePath":539,"digest":540,"deferredRender":61},{"title":534,"description":535,"navLabel":534,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":536,"apiFrom":537},"Selector Block","Selector Block component from the Azion Design System.","SelectorBlock","selector-block","import { Playground } from '@components/docs';\nimport componentProps from '@/generated/component-props/selector-block.json';\n\n\u003CPlayground\n client:only=\"vue\"\n component-name=\"SelectorBlock\"\n props={componentProps}\n/>","src/content/v1/en/components/selector-block.mdx","64c56b96b5b2337e","components",{"id":541,"data":543,"body":546,"filePath":547,"digest":548,"deferredRender":61},{"title":544,"description":545,"navLabel":544,"order":16,"version":19,"language":20,"type":123},"Components","Explore our component library built with Vue and designed for the Azion platform.","import { ComponentsIndex } from '@components/docs';\r\n\r\n\u003CComponentsIndex language=\"en\" />","src/content/v1/en/components/index.mdx","bac2e3117876f044","contributing",{"id":549,"data":551,"body":554,"filePath":555,"digest":556,"rendered":557},{"title":552,"description":553,"navLabel":552,"order":16,"version":19,"language":20,"type":549},"Contributing","Guidelines for contributing to the Azion Design System.","# Contributing\r\n\r\nThank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\r\n\r\n## Ways to Contribute\r\n\r\n### Report Issues\r\nFound a bug or have a suggestion? Open an issue on our GitHub repository.\r\n\r\n### Submit Pull Requests\r\nFix a bug or add a feature by submitting a pull request.\r\n\r\n### Improve Documentation\r\nHelp us improve our documentation by fixing typos, adding examples, or clarifying explanations.\r\n\r\n## Development Setup\r\n\r\n1. Fork and clone the repository\r\n2. Install dependencies: `pnpm install`\r\n3. Start the development server: `pnpm docs:dev`\r\n\r\n## Coding Standards\r\n\r\n### Code Style\r\n- Follow the existing code style\r\n- Use TypeScript for all new code\r\n- Write meaningful commit messages\r\n\r\n### Component Development\r\n- Follow the component API conventions\r\n- Include accessibility features\r\n- Write unit tests for new components\r\n\r\n### Documentation\r\n- Write clear, concise documentation\r\n- Include code examples\r\n- Update the changelog\r\n\r\n## Pull Request Process\r\n\r\n1. Create a feature branch from `main`\r\n2. Make your changes\r\n3. Run tests: `pnpm test`\r\n4. Submit a pull request with a clear description\r\n\r\n## Code of Conduct\r\n\r\nPlease read and follow our [Code of Conduct](https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md).\r\n\r\n## Need Help?\r\n\r\n- Open a discussion on GitHub\r\n- Join our community chat\r\n- Email us at design-system@azion.com\r\n\r\n## Related\r\n\r\n- [Installation](/get-started/installation) - Get started with the design system","src/content/v1/en/contributing/index.md","f8c4fa615c455e24",{"html":558,"metadata":559},"\u003Ch1 id=\"contributing\">Contributing\u003C/h1>\n\u003Cp>Thank you for your interest in contributing to the Azion Design System! This guide will help you understand how to contribute effectively.\u003C/p>\n\u003Ch2 id=\"ways-to-contribute\">Ways to Contribute\u003C/h2>\n\u003Ch3 id=\"report-issues\">Report Issues\u003C/h3>\n\u003Cp>Found a bug or have a suggestion? Open an issue on our GitHub repository.\u003C/p>\n\u003Ch3 id=\"submit-pull-requests\">Submit Pull Requests\u003C/h3>\n\u003Cp>Fix a bug or add a feature by submitting a pull request.\u003C/p>\n\u003Ch3 id=\"improve-documentation\">Improve Documentation\u003C/h3>\n\u003Cp>Help us improve our documentation by fixing typos, adding examples, or clarifying explanations.\u003C/p>\n\u003Ch2 id=\"development-setup\">Development Setup\u003C/h2>\n\u003Col>\n\u003Cli>Fork and clone the repository\u003C/li>\n\u003Cli>Install dependencies: \u003Ccode>pnpm install\u003C/code>\u003C/li>\n\u003Cli>Start the development server: \u003Ccode>pnpm docs:dev\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"coding-standards\">Coding Standards\u003C/h2>\n\u003Ch3 id=\"code-style\">Code Style\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the existing code style\u003C/li>\n\u003Cli>Use TypeScript for all new code\u003C/li>\n\u003Cli>Write meaningful commit messages\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"component-development\">Component Development\u003C/h3>\n\u003Cul>\n\u003Cli>Follow the component API conventions\u003C/li>\n\u003Cli>Include accessibility features\u003C/li>\n\u003Cli>Write unit tests for new components\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"documentation\">Documentation\u003C/h3>\n\u003Cul>\n\u003Cli>Write clear, concise documentation\u003C/li>\n\u003Cli>Include code examples\u003C/li>\n\u003Cli>Update the changelog\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"pull-request-process\">Pull Request Process\u003C/h2>\n\u003Col>\n\u003Cli>Create a feature branch from \u003Ccode>main\u003C/code>\u003C/li>\n\u003Cli>Make your changes\u003C/li>\n\u003Cli>Run tests: \u003Ccode>pnpm test\u003C/code>\u003C/li>\n\u003Cli>Submit a pull request with a clear description\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"code-of-conduct\">Code of Conduct\u003C/h2>\n\u003Cp>Please read and follow our \u003Ca href=\"https://github.com/aziontech/webkit/blob/main/CODE_OF_CONDUCT.md\">Code of Conduct\u003C/a>.\u003C/p>\n\u003Ch2 id=\"need-help\">Need Help?\u003C/h2>\n\u003Cul>\n\u003Cli>Open a discussion on GitHub\u003C/li>\n\u003Cli>Join our community chat\u003C/li>\n\u003Cli>Email us at \u003Ca href=\"mailto:design-system@azion.com\">design-system@azion.com\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started/installation\">Installation\u003C/a> - Get started with the design system\u003C/li>\n\u003C/ul>",{"headings":560,"localImagePaths":602,"remoteImagePaths":603,"frontmatter":604,"imagePaths":605},[561,562,565,569,572,575,578,581,584,587,590,593,596,599],{"depth":16,"slug":549,"text":552},{"depth":105,"slug":563,"text":564},"ways-to-contribute","Ways to Contribute",{"depth":566,"slug":567,"text":568},3,"report-issues","Report Issues",{"depth":566,"slug":570,"text":571},"submit-pull-requests","Submit Pull Requests",{"depth":566,"slug":573,"text":574},"improve-documentation","Improve Documentation",{"depth":105,"slug":576,"text":577},"development-setup","Development Setup",{"depth":105,"slug":579,"text":580},"coding-standards","Coding Standards",{"depth":566,"slug":582,"text":583},"code-style","Code Style",{"depth":566,"slug":585,"text":586},"component-development","Component Development",{"depth":566,"slug":588,"text":589},"documentation","Documentation",{"depth":105,"slug":591,"text":592},"pull-request-process","Pull Request Process",{"depth":105,"slug":594,"text":595},"code-of-conduct","Code of Conduct",{"depth":105,"slug":597,"text":598},"need-help","Need Help?",{"depth":105,"slug":600,"text":601},"related","Related",[],[],{"title":552,"description":553,"navLabel":552,"order":16,"type":549},[],"foundations",{"id":606,"data":608,"body":612,"filePath":613,"digest":614,"deferredRender":61},{"title":609,"description":610,"version":19,"language":20,"type":611},"Foundations","Foundations define the core building blocks of the design system","guide","# Foundations\r\n\r\nFoundations define the visual and interaction principles that guide every component and interface across the design system.\r\n\r\nThey ensure consistency, accessibility, and scalability across all products and experiences.\r\n\r\n## What are Foundations\r\n\r\nFoundations are the core design decisions that underpin the entire system. They define the fundamental rules that ensure visual and functional coherence.\r\n\r\nEvery component in the design system is built on top of these foundations. Understanding them helps you:\r\n\r\n- Make informed design decisions\r\n- Create consistent interfaces\r\n- Maintain scalability across products\r\n- Ensure accessibility compliance\r\n\r\nFoundations define:\r\n\r\n- **Color systems** — Palettes, semantic colors, and accessibility guidelines\r\n- **Typography scale** — Font families, sizes, weights, and line heights\r\n- **Spacing rules** — Consistent margins, padding, and gaps\r\n- **Layout structure** — Grid systems and responsive breakpoints\r\n- **Motion principles** — Animation timing, easing, and transitions\r\n- **Iconography** — Icon style, sizing, and usage guidelines\r\n\r\n## Available Foundations\r\n\r\nExplore each foundation to understand the design decisions and implementation details.\r\n\r\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6 mb-8\">\r\n\r\n\u003CFoundationCard\r\n title=\"Color\"\r\n description=\"Color palettes, semantic colors, and accessibility guidelines for consistent visual language.\"\r\n href=\"/foundations/color\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Typography\"\r\n description=\"Font families, type scales, and text styles for readable and hierarchical content.\"\r\n href=\"/foundations/typography\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Spacing\"\r\n description=\"Consistent spacing scale for margins, padding, and gaps across layouts.\"\r\n href=\"/foundations/spacing\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Grid\"\r\n description=\"Layout grids, columns, and responsive breakpoints for structured designs.\"\r\n href=\"/foundations/grid\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Elevation\"\r\n description=\"Shadow and z-index systems for creating visual hierarchy and depth.\"\r\n href=\"/foundations/elevation\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Motion\"\r\n description=\"Animation principles, timing functions, and transition guidelines.\"\r\n href=\"/foundations/motion\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Iconography\"\r\n description=\"Icon style, sizing, and usage guidelines for consistent icon implementation.\"\r\n href=\"/foundations/iconography\"\r\n/>\r\n\r\n\u003C/div>\r\n\r\n## Why Foundations Matter\r\n\r\nFoundations provide the essential building blocks that enable teams to build consistent, scalable interfaces.\r\n\r\n### Consistency\r\n\r\nFoundations establish shared visual language across all products. When everyone uses the same color palette, typography scale, and spacing rules, interfaces feel cohesive and predictable.\r\n\r\n### Predictability\r\n\r\nDesigners and developers can make decisions faster when the foundational rules are clear. No need to reinvent spacing values or guess at hover states — the answers are already defined.\r\n\r\n### Accessibility\r\n\r\nFoundations embed accessibility into the design system from the start. Color contrast ratios, focus states, and motion preferences are all considered at the foundation level.\r\n\r\n### Scalability\r\n\r\nAs products grow, foundations ensure that new features integrate seamlessly with existing ones. The same design tokens and rules apply across all new work.\r\n\r\n### Maintainability\r\n\r\nWhen a foundational value needs to change — like updating a primary color — the change propagates through the entire system. This reduces technical debt and design inconsistencies.\r\n\r\n## Relationship with Tokens\r\n\r\nFoundations and design tokens work together to translate design decisions into implementation.\r\n\r\n### Foundations Define Rules\r\n\r\nFoundations are conceptual. They define the **rules and principles** that guide design decisions.\r\n\r\nFor example, the Color foundation defines:\r\n- The purpose of semantic colors (primary, success, warning, error)\r\n- Accessibility requirements for contrast\r\n- How to use color to communicate meaning\r\n\r\n### Tokens Implement Values\r\n\r\nDesign tokens are the **implementation layer**. They translate foundation rules into specific values that can be used in code.\r\n\r\nFor example, tokens implement the Color foundation:\r\n\r\n| Foundation Concept | Token | Value |\r\n|-------------------|-------|-------|\r\n| Primary color | `color.primary.500` | `#3b82f6` |\r\n| Success color | `color.success.500` | `#22c55e` |\r\n| Text primary | `color.text.primary` | `#111827` |\r\n\r\n### How They Work Together\r\n\r\n1. **Foundations** define what we're trying to achieve (e.g., \"Use primary color for main actions\")\r\n2. **Tokens** provide the specific values (e.g., `color.primary.500`)\r\n3. **Components** use tokens to implement the foundation rules\r\n\r\nThis separation allows foundations to evolve conceptually while tokens provide stable implementation references.\r\n\r\n\u003CCallout type=\"info\" title=\"Learn more about tokens\">\r\n Explore the [Tokens documentation](/tokens) to see how design tokens implement these foundations in code.\r\n\u003C/Callout>","src/content/v1/en/foundations/index.mdx","f10b38401d4bfa5e","get-started/installation",{"id":615,"data":617,"body":621,"filePath":622,"digest":623,"rendered":624},{"title":618,"description":619,"navLabel":618,"order":105,"category":620,"version":19,"language":20,"type":611},"Installation","Get started with the Azion Design System by installing the required packages.","installation","## Requirements\r\n\r\n- Node.js 18.x or higher\r\n- Vue 3.x\r\n- Tailwind CSS 3.x\r\n\r\n## Package Installation\r\n\r\nInstall the core packages you need:\r\n\r\n```bash\r\n# Install components\r\nnpm install @aziontech/components\r\n\r\n# Install icons\r\nnpm install @aziontech/icons\r\n\r\n# Install theme (optional, for design tokens)\r\nnpm install @aziontech/theme\r\n```\r\n\r\n## Tailwind Configuration\r\n\r\nExtend your Tailwind configuration to include Azion's design tokens:\r\n\r\n```js\r\n// tailwind.config.js\r\nimport azionTheme from '@aziontech/theme';\r\n\r\nexport default {\r\n content: [\r\n './src/**/*.{vue,js,ts}',\r\n './node_modules/@aziontech/**/*.{vue,js,ts}',\r\n ],\r\n theme: {\r\n extend: azionTheme.tailwindPreset,\r\n },\r\n};\r\n```\r\n\r\n## Vue Configuration\r\n\r\nImport the CSS and register the components:\r\n\r\n```js\r\n// main.js\r\nimport { createApp } from 'vue';\r\nimport App from './App.vue';\r\n\r\n// Import Azion CSS\r\nimport '@aziontech/theme/css';\r\n\r\n// Import Azion components (optional)\r\nimport { Button, Input, Select } from '@aziontech/components';\r\n\r\nconst app = createApp(App);\r\n\r\n// Register components globally\r\napp.component('AzButton', Button);\r\napp.component('AzInput', Input);\r\napp.component('AzSelect', Select);\r\n\r\napp.mount('#app');\r\n```\r\n\r\n## Next Steps\r\n\r\n- [Quick Start](/get-started) - Build your first component\r\n- [Components](/components) - Explore available components\r\n- [Foundations](/foundations) - Learn about design principles","src/content/v1/en/get-started/installation.md","10ee78e47bac7429",{"html":625,"metadata":626},"\u003Ch2 id=\"requirements\">Requirements\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18.x or higher\u003C/li>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Tailwind CSS 3.x\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"package-installation\">Package Installation\u003C/h2>\n\u003Cp>Install the core packages you need:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Install components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Install icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Install theme (optional, for design tokens)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"tailwind-configuration\">Tailwind Configuration\u003C/h2>\n\u003Cp>Extend your Tailwind configuration to include Azion’s design tokens:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// tailwind.config.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> azionTheme \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> content: [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> './src/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> './node_modules/@aziontech/**/*.{vue,js,ts}'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ],\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> theme: {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> extend: azionTheme.tailwindPreset,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"vue-configuration\">Vue Configuration\u003C/h2>\n\u003Cp>Import the CSS and register the components:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// main.js\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// Import Azion CSS\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme/css'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// Import Azion components (optional)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button, Input, Select } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C/span>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> app\u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// Register components globally\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">component\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'AzButton'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, Button);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">component\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'AzInput'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, Input);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">component\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'AzSelect'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, Select);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">mount\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/get-started\">Quick Start\u003C/a> - Build your first component\u003C/li>\n\u003Cli>\u003Ca href=\"/components\">Components\u003C/a> - Explore available components\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations\">Foundations\u003C/a> - Learn about design principles\u003C/li>\n\u003C/ul>",{"headings":627,"localImagePaths":643,"remoteImagePaths":644,"frontmatter":645,"imagePaths":646},[628,631,634,637,640],{"depth":105,"slug":629,"text":630},"requirements","Requirements",{"depth":105,"slug":632,"text":633},"package-installation","Package Installation",{"depth":105,"slug":635,"text":636},"tailwind-configuration","Tailwind Configuration",{"depth":105,"slug":638,"text":639},"vue-configuration","Vue Configuration",{"depth":105,"slug":641,"text":642},"next-steps","Next Steps",[],[],{"title":618,"description":619,"navLabel":618,"order":105,"type":611,"category":620},[],"get-started",{"id":647,"data":649,"body":652,"filePath":653,"digest":654,"rendered":655},{"title":650,"description":651,"version":19,"language":20,"type":611},"Get Started","Get started with the Azion Design System","## Welcome\r\n\r\nWelcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\r\n\r\n## Installation\r\n\r\nInstall the design system packages using your preferred package manager:\r\n\r\n```bash\r\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\r\n```\r\n\r\n## Quick Start\r\n\r\n1. Import the CSS in your main entry file:\r\n\r\n```javascript\r\nimport '@aziontech/theme/styles.css';\r\n```\r\n\r\n2. Import and use components:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { Button, Input } from '@aziontech/components';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CButton variant=\"primary\">Click me\u003C/Button>\r\n\u003C/template>\r\n```\r\n\r\n## Next Steps\r\n\r\n- Explore our [Components](/components) library\r\n- Learn about our [Foundations](/foundations) and design principles\r\n- Browse our [Icons](/icons) collection","src/content/v1/en/get-started/index.md","60ad21a9657a227f",{"html":656,"metadata":657},"\u003Ch2 id=\"welcome\">Welcome\u003C/h2>\n\u003Cp>Welcome to the Azion Design System documentation. This guide will help you get started with using our components and design tokens in your projects.\u003C/p>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Install the design system packages using your preferred package manager:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"quick-start\">Quick Start\u003C/h2>\n\u003Col>\n\u003Cli>Import the CSS in your main entry file:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Import and use components:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> variant\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Click me</\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"next-steps\">Next Steps\u003C/h2>\n\u003Cul>\n\u003Cli>Explore our \u003Ca href=\"/components\">Components\u003C/a> library\u003C/li>\n\u003Cli>Learn about our \u003Ca href=\"/foundations\">Foundations\u003C/a> and design principles\u003C/li>\n\u003Cli>Browse our \u003Ca href=\"/icons\">Icons\u003C/a> collection\u003C/li>\n\u003C/ul>",{"headings":658,"localImagePaths":667,"remoteImagePaths":668,"frontmatter":669,"imagePaths":670},[659,662,663,666],{"depth":105,"slug":660,"text":661},"welcome","Welcome",{"depth":105,"slug":620,"text":618},{"depth":105,"slug":664,"text":665},"quick-start","Quick Start",{"depth":105,"slug":641,"text":642},[],[],{"title":650,"description":651,"type":611},[],"icons",{"id":671,"data":673,"body":677,"filePath":678,"digest":679,"rendered":680},{"title":674,"description":675,"navLabel":674,"order":16,"version":19,"language":20,"type":676},"Icons","Icon library with Azion Icons and PrimeIcons for use in your applications.","icon","# Icons\r\n\r\n> **Icon Gallery** — Browse all available icons with a visual gallery, search, and copy-to-clipboard. \u003Ca href=\"https://icons-gallery.azion.app\" target=\"_blank\" rel=\"noopener noreferrer\">Open Icon Gallery\u003C/a>\r\n\r\nThe Azion Design System includes two icon libraries:\r\n\r\n- **Azion Icons** - Custom icons designed for Azion products\r\n- **PrimeIcons** - General purpose icon library from PrimeVue\r\n\r\n## Installation\r\n\r\nIcons are included in the `@aziontech/icons` package:\r\n\r\n```bash\r\nnpm install @aziontech/icons\r\n```\r\n\r\n## Usage\r\n\r\n### Font Icons\r\n\r\nUse icons as font icons with the appropriate class:\r\n\r\n```html\r\n\u003C!-- Azion Icon -->\r\n\u003Ci class=\"ai ai-azion\">\u003C/i>\r\n\r\n\u003C!-- PrimeIcon -->\r\n\u003Ci class=\"pi pi-home\">\u003C/i>\r\n```\r\n\r\n### SVG Icons\r\n\r\nImport SVG icons directly for more control:\r\n\r\n```js\r\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\r\n```\r\n\r\n## Icon Categories\r\n\r\n### Azion Icons\r\n\r\nAzion Icons are organized into categories:\r\n\r\n- **Product Icons** - Azion product and service icons\r\n- **Action Icons** - Common action icons\r\n- **Status Icons** - Status and notification icons\r\n\r\n### PrimeIcons\r\n\r\nPrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\r\n\r\n## Sizing\r\n\r\nIcons inherit their size from the font size of their container:\r\n\r\n```html\r\n\u003C!-- Small -->\r\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\r\n\r\n\u003C!-- Medium (default) -->\r\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\r\n\r\n\u003C!-- Large -->\r\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\r\n```\r\n\r\n## Accessibility\r\n\r\nWhen using icons alone, provide accessible labels:\r\n\r\n```html\r\n\u003C!-- Icon button with label -->\r\n\u003Cbutton aria-label=\"Settings\">\r\n \u003Ci class=\"pi pi-cog\">\u003C/i>\r\n\u003C/button>\r\n\r\n\u003C!-- Decorative icon (hidden from screen readers) -->\r\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\r\n```\r\n\r\n## Related\r\n\r\n- [Button](/components/button) - Button component with icon support","src/content/v1/en/icons/index.md","3fe3bd4e610acec5",{"html":681,"metadata":682},"\u003Ch1 id=\"icons\">Icons\u003C/h1>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Icon Gallery\u003C/strong> — Browse all available icons with a visual gallery, search, and copy-to-clipboard. \u003Ca href=\"https://icons-gallery.azion.app\" target=\"_blank\" rel=\"noopener noreferrer\">Open Icon Gallery\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>The Azion Design System includes two icon libraries:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Custom icons designed for Azion products\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - General purpose icon library from PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"installation\">Installation\u003C/h2>\n\u003Cp>Icons are included in the \u003Ccode>@aziontech/icons\u003C/code> package:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"usage\">Usage\u003C/h2>\n\u003Ch3 id=\"font-icons\">Font Icons\u003C/h3>\n\u003Cp>Use icons as font icons with the appropriate class:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Azion Icon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"svg-icons\">SVG Icons\u003C/h3>\n\u003Cp>Import SVG icons directly for more control:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"icon-categories\">Icon Categories\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Azion Icons are organized into categories:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Product Icons\u003C/strong> - Azion product and service icons\u003C/li>\n\u003Cli>\u003Cstrong>Action Icons\u003C/strong> - Common action icons\u003C/li>\n\u003Cli>\u003Cstrong>Status Icons\u003C/strong> - Status and notification icons\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons provide a comprehensive set of general-purpose icons suitable for most UI needs.\u003C/p>\n\u003Ch2 id=\"sizing\">Sizing\u003C/h2>\n\u003Cp>Icons inherit their size from the font size of their container:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Small -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Medium (default) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Large -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"accessibility\">Accessibility\u003C/h2>\n\u003Cp>When using icons alone, provide accessible labels:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Icon button with label -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Settings\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Decorative icon (hidden from screen readers) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"related\">Related\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/components/button\">Button\u003C/a> - Button component with icon support\u003C/li>\n\u003C/ul>",{"headings":683,"localImagePaths":711,"remoteImagePaths":712,"frontmatter":713,"imagePaths":714},[684,685,686,689,692,695,698,701,704,707,710],{"depth":16,"slug":671,"text":674},{"depth":105,"slug":620,"text":618},{"depth":105,"slug":687,"text":688},"usage","Usage",{"depth":566,"slug":690,"text":691},"font-icons","Font Icons",{"depth":566,"slug":693,"text":694},"svg-icons","SVG Icons",{"depth":105,"slug":696,"text":697},"icon-categories","Icon Categories",{"depth":566,"slug":699,"text":700},"azion-icons","Azion Icons",{"depth":566,"slug":702,"text":703},"primeicons","PrimeIcons",{"depth":105,"slug":705,"text":706},"sizing","Sizing",{"depth":105,"slug":708,"text":709},"accessibility","Accessibility",{"depth":105,"slug":600,"text":601},[],[],{"title":674,"description":675,"navLabel":674,"order":16,"type":676},[],"playground",{"id":715,"data":717,"body":721,"filePath":722,"digest":723,"rendered":724},{"title":718,"description":719,"navLabel":720,"order":16,"version":19,"language":20,"type":715},"Component Playground","Interactive component playground for experimenting with Azion Design System components.","Playground","## Overview\r\n\r\nThe Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\r\n\r\n## Coming Soon\r\n\r\nThe playground is currently under development. Check back soon for an interactive component testing experience.\r\n\r\n\u003CCallout type=\"info\">\r\nThe playground will allow you to:\r\n- Select any component from the library\r\n- Modify props and see live updates\r\n- Copy generated code snippets\r\n- Test different states and variants\r\n\u003C/Callout>","src/content/v1/en/playground/index.md","a93deb7956a3f1c4",{"html":725,"metadata":726},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>The Component Playground provides an interactive environment for experimenting with Azion Design System components. You can modify props in real-time and see how components behave.\u003C/p>\n\u003Ch2 id=\"coming-soon\">Coming Soon\u003C/h2>\n\u003Cp>The playground is currently under development. Check back soon for an interactive component testing experience.\u003C/p>\n\u003Ccallout type=\"info\">\nThe playground will allow you to:\n- Select any component from the library\n- Modify props and see live updates\n- Copy generated code snippets\n- Test different states and variants\n\u003C/callout>",{"headings":727,"localImagePaths":732,"remoteImagePaths":733,"frontmatter":734,"imagePaths":735},[728,729],{"depth":105,"slug":106,"text":107},{"depth":105,"slug":730,"text":731},"coming-soon","Coming Soon",[],[],{"title":718,"description":719,"navLabel":720,"order":16,"type":715},[],"tokens",{"id":736,"data":738,"body":744,"filePath":745,"digest":746,"deferredRender":61},{"title":739,"description":740,"navLabel":741,"order":16,"category":742,"version":19,"language":20,"type":743},"Design Tokens","Design tokens are the smallest units of the design system, storing visual values like colors for consistent usage across products. The tokens live in the @aziontech/theme package.","Tokens","color","token","# Tokens\r\n\r\nDesign tokens are the smallest units of the design system. They store visual values like colors so that products and platforms stay consistent.\r\n\r\nIn this monorepo, tokens are provided by the **`@aziontech/theme`** package. They support light and dark themes via semantic tokens and can be used with Tailwind CSS in the docs and other apps.\r\n\r\n## Package and structure\r\n\r\nThe theme package is **`@aziontech/theme`**. Design tokens are under the `/tokens` export.\r\n\r\n### Install\r\n\r\nIn the monorepo, the docs app already depends on the theme:\r\n\r\n```json\r\n{\r\n \"dependencies\": {\r\n \"@aziontech/theme\": \"workspace:*\"\r\n }\r\n}\r\n```\r\n\r\nFor an external project:\r\n\r\n```bash\r\nnpm install @aziontech/theme\r\n```\r\n\r\n### Token source layout\r\n\r\nInside `packages/theme` the token source is:\r\n\r\n```\r\npackages/theme/\r\n├── tokens.js # Main entry: re-exports from src/tokens\r\n├── default.js # Theme SCSS entry (full theme)\r\n└── src/tokens/\r\n ├── index.js # Public token exports\r\n ├── primitives/\r\n │ ├── colors.js # Raw palettes (gray, neutral, orange, violet, etc.)\r\n │ └── brand.js # Brand + surface primitives (surface, primary, accent)\r\n ├── colors-brand.js # Brand color aliases (orange, white, black, etc.)\r\n ├── semantic/\r\n │ ├── text.js # Light/dark text semantics (textColorBase, textMuted, …)\r\n │ ├── backgrounds.js # Light/dark background semantics (bgLayer1, bgCanvas, …)\r\n │ └── borders.js # Light/dark border semantics (borderBase, borderPrimary, …)\r\n └── build/\r\n ├── preset.js # Tailwind preset (theme.extend.colors with CSS vars)\r\n ├── tailwind-plugin.js # tokenUtilities() for semantic utility classes\r\n ├── resolve.js # Resolve refs to concrete values\r\n ├── css-vars.js # CSS variable output for runtime theming\r\n └── refs.js # Token reference helpers\r\n```\r\n\r\n- **Primitives** are raw values (e.g. `neutral.900`, `orange.500`). They do not switch by theme; use Tailwind's `dark:` when needed.\r\n- **Semantic** tokens are defined per theme (light/dark) in `semantic/*.js`. The **Tailwind plugin** turns them into utility classes that automatically follow the active theme (e.g. `.dark` or `.azion.azion-dark`).\r\n\r\n## Primitive tokens\r\n\r\nPrimitives are the base palettes. Use them when you need a fixed value or when building new semantic tokens.\r\n\r\n| Category | Example | Usage |\r\n|----------|---------|--------|\r\n| Neutrals | `neutral-50` … `neutral-950` | Surfaces, borders, text when not using semantic |\r\n| Primary (orange) | `orange-50` … `orange-950` | Brand primary; `orange-500` is the main orange |\r\n| Accent (violet) | `violet-50` … `violet-950` | Accent/highlights |\r\n| Surface | `surface-0`, `surface-50`, … `surface-950` | Same scale as neutral, used for layers |\r\n| Status | `red-*`, `green-*`, `yellow-*`, `blue-*` | Status and feedback |\r\n\r\n**In Tailwind (docs):** The docs config extends `theme.extend.colors` with `primitives`, `surface`, `primaryBrand`, and `accent` from `@aziontech/theme/tokens`, so you can use classes like `bg-neutral-100`, `text-orange-500`, `border-surface-200`.\r\n\r\n**In JS:** You can import and use the same values:\r\n\r\n```js\r\nimport { primitives, surfacePrimitives, brandPrimitives } from '@aziontech/theme/tokens';\r\n\r\nprimitives.neutral[900]; // #171717\r\nsurfacePrimitives.surface[50]; // #fafafa\r\nbrandPrimitives.primary[500]; // #fe601f\r\n```\r\n\r\n\u003CCallout type=\"warning\" title=\"Use primitives sparingly\">\r\n Prefer semantic tokens for UI so the app adapts to light/dark. Use primitives when you need a fixed value or when defining new semantics.\r\n\u003C/Callout>\r\n\r\n## Semantic tokens\r\n\r\nSemantic tokens are theme-aware: one name maps to different primitive values in light vs dark. The **Tailwind plugin** (`tokenUtilities`) generates utilities that switch with `.dark` (and `.azion.azion-dark`).\r\n\r\n### How the docs use them\r\n\r\nThe docs app wires the theme like this:\r\n\r\n1. **Tailwind config**\r\n - `darkMode: ['class', '.dark', '.azion.azion-dark']`\r\n - `plugins: [tokenUtilities(), …]`\r\n - `theme.extend.colors` extended with primitives/surface/primaryBrand/accent from `@aziontech/theme/tokens`.\r\n\r\n2. **Utility classes** from the plugin (no `dark:` needed):\r\n - **Text:** `text-default`, `text-muted`, `text-link`, `text-primary`, `text-accent`, `text-code`, and hover variants.\r\n - **Background:** `bg-layer1`, `bg-layer2`, `bg-surface`, `bg-canvas`, hover variants, and semantic (e.g. `bg-primary`, `bg-danger`).\r\n - **Border:** `border-default`, `border-primary`, `border-accent`, and semantic (e.g. `border-danger`, `border-success`).\r\n\r\nClass names are **not** prefixed with the category: use `text-default`, `bg-layer1`, `border-default` (not `text-text-default`, `bg-bg-layer1`, `border-border-default`).\r\n\r\n### Examples in the docs\r\n\r\n```html\r\n\u003C!-- Page / section background -->\r\n\u003Cdiv class=\"bg-canvas\">…\u003C/div>\r\n\r\n\u003C!-- Cards and panels -->\r\n\u003Cdiv class=\"bg-layer1 border border-default rounded-lg p-4\">\r\n \u003Cp class=\"text-default\">Primary text\u003C/p>\r\n \u003Cp class=\"text-muted\">Secondary text\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C!-- Themed border -->\r\n\u003Cdiv class=\"border border-primary\">…\u003C/div>\r\n```\r\n\r\n### Theme switching\r\n\r\nThe plugin emits separate rules for light and dark. When the root (e.g. `\u003Chtml>`) has the class `.dark` or `.azion.azion-dark`, the semantic utilities use the dark values. No extra CSS variables are required for this.\r\n\r\n## Using tokens with Tailwind\r\n\r\n### Minimal setup (semantic utilities only)\r\n\r\n```js\r\n// tailwind.config.js\r\nimport { tokenUtilities } from '@aziontech/theme/tokens/build/tailwind-plugin';\r\n\r\nexport default {\r\n darkMode: ['class', '.dark', '.azion.azion-dark'],\r\n content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,astro,mdx}'],\r\n plugins: [tokenUtilities()],\r\n};\r\n```\r\n\r\nAfter that you can use `bg-layer1`, `text-default`, `border-default`, etc.\r\n\r\n### With primitives in theme\r\n\r\nTo also have primitive colors (e.g. `neutral-500`, `orange-500`) in your theme:\r\n\r\n```js\r\nimport { tokenUtilities } from '@aziontech/theme/tokens/build/tailwind-plugin';\r\nimport { primitives, surfacePrimitives, brandPrimitives } from '@aziontech/theme/tokens';\r\n\r\nexport default {\r\n darkMode: ['class', '.dark', '.azion.azion-dark'],\r\n content: ['./src/**/*.{html,js,ts,jsx,tsx,vue,astro,mdx}'],\r\n theme: {\r\n extend: {\r\n colors: {\r\n ...primitives,\r\n surface: { ...surfacePrimitives.surface, DEFAULT: surfacePrimitives.surface[0] },\r\n primaryBrand: brandPrimitives.primary,\r\n accent: brandPrimitives.accent,\r\n },\r\n },\r\n },\r\n plugins: [tokenUtilities()],\r\n};\r\n```\r\n\r\n## Semantic token examples (visual)\r\n\r\n### Text colors\r\n\r\n\u003Cdiv className=\"space-y-4 my-6\" style={{viewTransitionName: 'text-colors'}}>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-default font-medium\">text-default\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Primary text for headings and body\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-muted font-medium\">text-muted\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Secondary text for descriptions and labels\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-link font-medium\">text-link\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Link color\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n### Background layers\r\n\r\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-3 gap-4 my-6\" style={{viewTransitionName: 'bg-layers'}}>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Layer 1\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-layer1\u003C/p>\r\n \u003Cp className=\"text-xs text-muted mt-1\">Cards and panels\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-layer2 border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Layer 2\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-layer2\u003C/p>\r\n \u003Cp className=\"text-xs text-muted mt-1\">Elevated surfaces\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-canvas border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Canvas\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-canvas\u003C/p>\r\n \u003Cp className=\"text-xs text-muted mt-1\">Page background\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n### Border tokens\r\n\r\n\u003Cdiv className=\"space-y-4 my-6\" style={{viewTransitionName: 'border-tokens'}}>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-default font-medium\">border-default\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Default border\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border-2 border-primary\">\r\n \u003Cp className=\"text-default font-medium\">border-primary\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Primary (orange) border\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border-2 border-accent\">\r\n \u003Cp className=\"text-default font-medium\">border-accent\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Accent (violet) border\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n## Sync and maintenance\r\n\r\nTokens can be synced from Figma via the scripts under `packages/theme/scripts` (e.g. Figma Variables → Tokens Studio → export into `src/tokens/figma-reference-tokens-studio/`). The source files to edit manually are:\r\n\r\n- **Primitives:** `src/tokens/primitives/colors.js`, `src/tokens/primitives/brand.js`\r\n- **Semantic:** `src/tokens/semantic/text.js`, `src/tokens/semantic/backgrounds.js`, `src/tokens/semantic/borders.js`\r\n- **Brand aliases:** `src/tokens/colors-brand.js`\r\n\r\nSee `packages/theme/src/tokens/README.md` for the full token README and sync workflow.\r\n\r\n## Related resources\r\n\r\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 mb-8\">\r\n\r\n\u003CFoundationCard\r\n title=\"Color\"\r\n description=\"Color foundation and how tokens implement the color system.\"\r\n href=\"/foundations/color\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Typography\"\r\n description=\"Typography foundations and token-based text styles.\"\r\n href=\"/foundations/typography\"\r\n/>\r\n\r\n\u003C/div>","src/content/v1/en/tokens/index.mdx","ed684f094b25427e","patterns",{"id":747,"data":749,"body":755,"filePath":756,"digest":757,"rendered":758},{"title":750,"description":751,"navLabel":752,"order":16,"category":753,"version":19,"language":20,"type":754},"Design Patterns","Common design patterns and best practices for building with the Azion Design System.","Patterns","general","pattern","## Overview\r\n\r\nDesign patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\r\n\r\n## Available Patterns\r\n\r\nPattern documentation is being prepared. Check back soon for detailed pattern references.\r\n\r\n\u003CCallout type=\"info\">\r\nThis section will include patterns like form validation, search experiences, and navigation structures.\r\n\u003C/Callout>","src/content/v1/en/patterns/index.md","8ab53f8cff046fab",{"html":759,"metadata":760},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Design patterns are reusable solutions to common problems in interface design. They provide proven approaches to typical UX challenges.\u003C/p>\n\u003Ch2 id=\"available-patterns\">Available Patterns\u003C/h2>\n\u003Cp>Pattern documentation is being prepared. Check back soon for detailed pattern references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include patterns like form validation, search experiences, and navigation structures.\n\u003C/callout>",{"headings":761,"localImagePaths":766,"remoteImagePaths":767,"frontmatter":768,"imagePaths":769},[762,763],{"depth":105,"slug":106,"text":107},{"depth":105,"slug":764,"text":765},"available-patterns","Available Patterns",[],[],{"title":750,"description":751,"navLabel":752,"order":16,"type":754,"category":753},[],"templates",{"id":770,"data":772,"body":777,"filePath":778,"digest":779,"rendered":780},{"title":773,"description":774,"navLabel":775,"order":16,"category":753,"version":19,"language":20,"type":776},"Page Templates","Page templates and layout examples for building applications with the Azion Design System.","Templates","template","## Overview\r\n\r\nPage templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\r\n\r\n## Available Templates\r\n\r\nTemplate documentation is being prepared. Check back soon for detailed template references.\r\n\r\n\u003CCallout type=\"info\">\r\nThis section will include templates like dashboards, settings pages, and form layouts.\r\n\u003C/Callout>","src/content/v1/en/templates/index.md","6396e35a5844bc84",{"html":781,"metadata":782},"\u003Ch2 id=\"overview\">Overview\u003C/h2>\n\u003Cp>Page templates are complete page layouts that combine blocks and components into ready-to-use starting points for common application pages.\u003C/p>\n\u003Ch2 id=\"available-templates\">Available Templates\u003C/h2>\n\u003Cp>Template documentation is being prepared. Check back soon for detailed template references.\u003C/p>\n\u003Ccallout type=\"info\">\nThis section will include templates like dashboards, settings pages, and form layouts.\n\u003C/callout>",{"headings":783,"localImagePaths":788,"remoteImagePaths":789,"frontmatter":790,"imagePaths":791},[784,785],{"depth":105,"slug":106,"text":107},{"depth":105,"slug":786,"text":787},"available-templates","Available Templates",[],[],{"title":773,"description":774,"navLabel":775,"order":16,"type":776,"category":753},[],"patterns/success-creation",{"id":792,"data":794,"body":797,"filePath":798,"digest":799,"deferredRender":61},{"title":795,"description":796,"order":105,"category":17,"version":19,"language":20,"type":754},"Success Creation Pattern","Displays a success notification after creating entities, with links to view and additional actions","\u003CCallout type=\"note\" title=\"Pattern Summary\">\r\nDisplays a toast notification indicating the successful creation of a new entity in the system. Provides a link to view the created entity details and, optionally, a button for a relevant follow-up action (e.g. start configuration).\r\n\u003C/Callout>\r\n\r\n## About\r\n\r\nThis pattern defines the behavior and visual presentation for positive feedback after a user successfully creates an entity. The system should confirm the action, reduce uncertainty, and let the user quickly access what was created.\r\n\r\n### Context & Problem\r\n\r\nWhen creating an item (e.g. workload, network list, digital certificate), users may be unsure whether the operation succeeded. Generic or missing feedback increases uncertainty and makes it harder to find the new entity.\r\n\r\n### When to Use\r\n\r\n- After the successful completion of create actions (CRUD - Create).\r\n\r\n### Components Used\r\n\r\n- **Toast** (Block Console Kit)\r\n\r\n### Visual Example\r\n\r\n![Success creation pattern example](https://console-kit-docs.azion.app/_astro/image-1.BHbpCU6q_Bfn81.webp)\r\n\r\n*Workloads > Create Workload*\r\n\r\n## Expected Behavior\r\n\r\n\u003CContentTabs tab1Label=\"Main Flow\" tab2Label=\"States\" defaultTab=\"tab1\">\r\n \u003Cdiv slot=\"tab1\">\r\n 1. **Success toast:** The system shows a toast (temporary notification) stating that the creation was completed.\r\n 2. **Clear message:** \"Entity created successfully!\" or equivalent, including the entity name.\r\n 3. **View link:** The toast provides a direct link to the new entity details.\r\n 4. **Optional action button:** When applicable, show a button for a relevant action (e.g. \"Start configuration\").\r\n 5. **Auto-dismiss:** The toast closes automatically after a few seconds or can be closed manually.\r\n \u003C/div>\r\n \u003Cdiv slot=\"tab2\">\r\n - **Success:** Green toast with check icon\r\n - **Primary action:** Prominent link to view\r\n - **Secondary action:** Optional button for next steps\r\n - **Auto-dismiss:** Closes automatically in 5-8 seconds\r\n \u003C/div>\r\n\u003C/ContentTabs>\r\n\r\n### Implementation\r\n\r\n```javascript title=\"handleToast.js\"\r\nconst handleToast = (response) => {\r\n const toast = {\r\n feedback: response.feedback,\r\n actions: {\r\n link: {\r\n label: 'View Workload',\r\n callback: () => response.redirectToUrl(response.urlToEditView)\r\n },\r\n secondary: {\r\n label: 'Copy Workload URL',\r\n icon: 'pi pi-copy',\r\n animation: {\r\n time: 3000,\r\n icon: 'pi pi-check',\r\n label: 'Copied'\r\n },\r\n callback: () => props.clipboardWrite(response.domainName)\r\n }\r\n }\r\n }\r\n response.showToastWithActions(toast)\r\n}\r\n```\r\n\r\n### Best Practices\r\n\r\n\u003CCallout type=\"tip\" title=\"Implementation Tips\">\r\n- Use clear, positive, direct language in the message\r\n- Always include the name or identifier of the created entity\r\n- Ensure the link goes directly to the newly created object\r\n- Show extra actions only when there is clear context\r\n- Allow closing the toast manually\r\n- Ensure screen reader users also receive the feedback\r\n\u003C/Callout>\r\n\r\n### Anti-patterns\r\n\r\n\u003CCallout type=\"caution\" title=\"What to Avoid\">\r\n- Do not leave the user without feedback after creating something\r\n- Avoid generic messages (\"Success!\") without context or overly long messages\r\n- Do not force multiple notifications; group when possible\r\n- Never present broken links or buttons\r\n\u003C/Callout>\r\n\r\n### Accessibility\r\n\r\n- Use `aria-live=\"polite\"` on toast components for screen readers\r\n- Check contrast between background, icon, and text colors\r\n- Ensure keyboard navigation to action buttons\r\n\r\n### References\r\n\r\n- [Atlassian - Success messages](https://atlassian.design/foundations/content/designing-messages/success-messages)","src/content/v1/en/patterns/success-creation.mdx","eb8be9729005f6d1","foundations/color",{"id":800,"data":802,"body":806,"filePath":807,"digest":808,"deferredRender":61},{"title":803,"description":804,"navLabel":803,"order":105,"category":742,"version":19,"language":20,"type":805},"Color","The color system provides semantic tokens for consistent and accessible interfaces.","foundation","## Color Philosophy\r\n\r\nOur color system is designed to be:\r\n\r\n- **Accessible**: All color combinations meet WCAG 2.1 AA contrast requirements\r\n- **Semantic**: Colors are named by purpose, not appearance\r\n- **Consistent**: The same tokens are used across all components\r\n- **Themeable**: Colors adapt automatically to light and dark modes\r\n\r\n## Primitive palette\r\n\r\nRaw color steps by family. Use these only when defining new semantics or when you need a fixed value; in UI components, prefer semantic tokens.\r\n\r\n\u003CPrimitivePalette />\r\n\r\n## Semantic tokens\r\n\r\nSemantic tokens map to different values in light and dark themes. Use them in component code so colors adapt automatically.\r\n\r\n\u003CSemanticColorsTable />","src/content/v1/en/foundations/color.mdx","da9cf6bfd742a38b","v1-pt",["Map",90,811,11,833,647,882,606,911,615,962,139,1010,149,1014,293,1113,115,1116,129,1119,303,1122,323,1125,313,1128,333,1131,353,1134,363,1137,343,1140,373,1143,383,1146,403,1149,393,1152,413,1155,423,1158,433,1161,443,1164,463,1167,453,1170,473,1173,483,1176,493,1179,503,1182,513,1185,523,1188,531,1191,541,1194,671,1201,715,1242,736,1262,792,1268,747,1275,800,1282],{"id":90,"data":812,"body":816,"filePath":817,"digest":818,"rendered":819},{"title":813,"description":814,"navLabel":815,"order":16,"category":96,"version":19,"language":20,"type":21},"Blocos de UI","Blocos de UI combinando vários componentes para casos de uso comuns.","Blocos","## Visão geral\r\n\r\nOs blocos de UI são combinações prontas de componentes que resolvem padrões comuns de interface. Eles servem como ponto de partida para construir páginas e funcionalidades.\r\n\r\n## Blocos disponíveis\r\n\r\nA documentação dos blocos está em preparação. Volte em breve para referências detalhadas.\r\n\r\n\u003CCallout type=\"info\">\r\nEsta seção incluirá blocos como cabeçalhos, formulários, cards e padrões de navegação.\r\n\u003C/Callout>","src/content/v1/pt/blocks/index.md","b053bff9f66bcf39",{"html":820,"metadata":821},"\u003Ch2 id=\"visão-geral\">Visão geral\u003C/h2>\n\u003Cp>Os blocos de UI são combinações prontas de componentes que resolvem padrões comuns de interface. Eles servem como ponto de partida para construir páginas e funcionalidades.\u003C/p>\n\u003Ch2 id=\"blocos-disponíveis\">Blocos disponíveis\u003C/h2>\n\u003Cp>A documentação dos blocos está em preparação. Volte em breve para referências detalhadas.\u003C/p>\n\u003Ccallout type=\"info\">\nEsta seção incluirá blocos como cabeçalhos, formulários, cards e padrões de navegação.\n\u003C/callout>",{"headings":822,"localImagePaths":829,"remoteImagePaths":830,"frontmatter":831,"imagePaths":832},[823,826],{"depth":105,"slug":824,"text":825},"visão-geral","Visão geral",{"depth":105,"slug":827,"text":828},"blocos-disponíveis","Blocos disponíveis",[],[],{"title":813,"description":814,"navLabel":815,"order":16,"type":21,"category":96},[],{"id":11,"data":834,"body":879,"filePath":880,"digest":881,"deferredRender":61},{"title":14,"description":835,"navLabel":14,"order":16,"category":17,"status":18,"version":19,"language":20,"type":21,"components":836,"usage":837,"api":861},"Bloco de toast para feedback de sucesso e erro com título, descrição, ícone, link de ação, botão fechar e barra de progresso de fechamento automático.",[14],{"whenToUse":838,"whenNotToUse":842,"doDonts":845,"examples":852},[839,840,841],"Confirmar envio ou salvamento de formulário com sucesso","Mostrar erros de validação ou do servidor sem bloquear a interface","Feedback de curta duração que não exige confirmação do usuário",[843,844],"Erros críticos que exigem ação imediata (use um modal ou erro inline)","Mensagens longas (prefira uma mensagem ou página dedicada)",[846,848,850],{"type":33,"description":847},"Use sucesso para confirmações e erro para falhas",{"type":33,"description":849},"Mantenha título e descrição curtos",{"type":38,"description":851},"Não empilhe muitos toasts ao mesmo tempo",[853,857],{"title":854,"description":855,"code":856},"Toast de sucesso","Use para confirmações (ex.: salvo com sucesso).","\u003CBlockToastDemo\n variant=\"success\"\n title=\"Alterações salvas\"\n description=\"Seu perfil foi atualizado.\"\n actionText=\"Ver perfil\"\n actionHref=\"#\"\n durationMs={5000}\n autoClose={false}\n/>\n",{"title":858,"description":859,"code":860},"Toast de erro","Use para erros de validação ou do servidor.","\u003CBlockToastDemo\n variant=\"error\"\n title=\"Algo deu errado\"\n description=\"Não foi possível salvar. Tente novamente.\"\n actionText=\"Tentar de novo\"\n actionHref=\"#\"\n durationMs={5000}\n autoClose={false}\n/>\n",{"props":862},[863,865,867,869,871,873,875,877],{"name":52,"type":53,"default":54,"required":55,"description":864},"Variante visual do toast",{"name":58,"type":59,"default":60,"required":61,"description":866},"Título do toast",{"name":64,"type":59,"default":65,"required":55,"description":868},"Texto de descrição opcional",{"name":68,"type":59,"default":65,"required":55,"description":870},"Rótulo do link ou botão de ação",{"name":71,"type":59,"default":72,"required":55,"description":872},"URL do link de ação",{"name":75,"type":76,"default":77,"required":55,"description":874},"Duração do fechamento automático em milissegundos; a barra de progresso reflete esse valor",{"name":80,"type":81,"default":82,"required":55,"description":876},"Quando false, o toast permanece visível e o timer não é iniciado",{"name":85,"type":81,"default":82,"required":55,"description":878},"Quando false, a barra de progresso é ocultada","import { Callout, Playground } from '@components/docs';\r\nimport { blockToastDemoProps } from '@components/demo/props-metadata';\r\nimport BlockToastDemo from '@components/demo/BlockToastDemo.vue';\r\n\r\nO bloco Toast combina título, descrição opcional, ícone, link ou botão de ação opcional, botão de fechar e uma barra de progresso que indica o tempo restante até o fechamento automático.\r\n\r\n## Playground\r\n\r\nExplore o bloco Toast de forma interativa. Ajuste as props e veja as alterações em tempo real.\r\n\r\n\u003CPlayground\r\n client:load\r\n component-name=\"BlockToastDemo\"\r\n props={blockToastDemoProps}\r\n initialValues={{ autoClose: false }}\r\n/>\r\n\r\n## Variantes\r\n\r\nVariantes de sucesso e erro para diferentes tipos de feedback.\r\n\r\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-6 my-8\">\r\n \u003Cdiv class=\"border border-default rounded-lg overflow-hidden\">\r\n \u003Cdiv class=\"p-6 bg-gray-50 flex items-center justify-center min-h-[120px]\">\r\n \u003CBlockToastDemo\r\n client:load\r\n variant=\"success\"\r\n title=\"Alterações salvas\"\r\n description=\"Seu perfil foi atualizado.\"\r\n actionText=\"Ver perfil\"\r\n actionHref=\"#\"\r\n autoClose={false}\r\n showProgress={true}\r\n />\r\n \u003C/div>\r\n \u003Cdiv class=\"px-4 py-2 bg-layer1 border-t border-default\">\r\n \u003Cspan class=\"text-sm font-medium text-default\">Sucesso\u003C/span>\r\n \u003Cp class=\"text-xs text-muted mt-0.5\">Use para confirmações e feedback positivo\u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003Cdiv class=\"border border-default rounded-lg overflow-hidden\">\r\n \u003Cdiv class=\"p-6 bg-gray-50 flex items-center justify-center min-h-[120px]\">\r\n \u003CBlockToastDemo\r\n client:load\r\n variant=\"error\"\r\n title=\"Algo deu errado\"\r\n description=\"Não foi possível salvar suas alterações. Tente novamente.\"\r\n actionText=\"Tentar de novo\"\r\n actionHref=\"#\"\r\n autoClose={false}\r\n showProgress={true}\r\n />\r\n \u003C/div>\r\n \u003Cdiv class=\"px-4 py-2 bg-layer1 border-t border-default\">\r\n \u003Cspan class=\"text-sm font-medium text-default\">Erro\u003C/span>\r\n \u003Cp class=\"text-xs text-muted mt-0.5\">Use para erros de validação ou do servidor\u003C/p>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/div>\r\n\r\n## Comportamento\r\n\r\n- **Fechamento automático**: A barra de progresso diminui ao longo do `durationMs`; ao chegar a zero, o toast fecha.\r\n- **Botão fechar**: O usuário pode dispensar o toast a qualquer momento.\r\n- **Ação**: O link ou botão de ação pode navegar ou disparar uma nova tentativa sem fechar o toast (tratado pela sua aplicação).\r\n\r\n\u003CCallout type=\"tip\" title=\"Acessibilidade\">\r\nGaranta que o botão de fechar tenha `aria-label` e que a barra de progresso use `role=\"progressbar\"` com `aria-valuenow`, `aria-valuemin` e `aria-valuemax`.\r\n\u003C/Callout>","src/content/v1/pt/blocks/toast.mdx","249b4307db8ce78b",{"id":647,"data":883,"body":888,"filePath":889,"digest":890,"rendered":891},{"title":884,"description":885,"version":19,"language":886,"translatedFrom":20,"translationStatus":887,"type":611},"Começar","Comece a usar o Azion Design System","pt","complete","## Bem-vindo\r\n\r\nBem-vindo à documentação do Azion Design System. Este guia irá ajudá-lo a começar a usar nossos componentes e design tokens em seus projetos.\r\n\r\n## Instalação\r\n\r\nInstale os pacotes do design system usando seu gerenciador de pacotes preferido:\r\n\r\n```bash\r\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\r\n```\r\n\r\n## Início Rápido\r\n\r\n1. Importe o CSS no seu arquivo de entrada principal:\r\n\r\n```javascript\r\nimport '@aziontech/theme/styles.css';\r\n```\r\n\r\n2. Importe e use os componentes:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { Button, Input } from '@aziontech/components';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CButton variant=\"primary\">Clique aqui\u003C/Button>\r\n\u003C/template>\r\n```\r\n\r\n## Próximos Passos\r\n\r\n- Explore nossa biblioteca de [Componentes](/pt/components)\r\n- Conheça nossos [Fundamentos](/pt/foundations) e princípios de design\r\n- Navegue pela nossa coleção de [Ícones](/pt/icons)","src/content/v1/pt/get-started/index.md","e9c3ddf69abc9b47",{"html":892,"metadata":893},"\u003Ch2 id=\"bem-vindo\">Bem-vindo\u003C/h2>\n\u003Cp>Bem-vindo à documentação do Azion Design System. Este guia irá ajudá-lo a começar a usar nossos componentes e design tokens em seus projetos.\u003C/p>\n\u003Ch2 id=\"instalação\">Instalação\u003C/h2>\n\u003Cp>Instale os pacotes do design system usando seu gerenciador de pacotes preferido:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"início-rápido\">Início Rápido\u003C/h2>\n\u003Col>\n\u003Cli>Importe o CSS no seu arquivo de entrada principal:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>Importe e use os componentes:\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> variant\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Clique aqui</\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>Explore nossa biblioteca de \u003Ca href=\"/pt/components\">Componentes\u003C/a>\u003C/li>\n\u003Cli>Conheça nossos \u003Ca href=\"/pt/foundations\">Fundamentos\u003C/a> e princípios de design\u003C/li>\n\u003Cli>Navegue pela nossa coleção de \u003Ca href=\"/pt/icons\">Ícones\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":894,"localImagePaths":907,"remoteImagePaths":908,"frontmatter":909,"imagePaths":910},[895,898,901,904],{"depth":105,"slug":896,"text":897},"bem-vindo","Bem-vindo",{"depth":105,"slug":899,"text":900},"instalação","Instalação",{"depth":105,"slug":902,"text":903},"início-rápido","Início Rápido",{"depth":105,"slug":905,"text":906},"próximos-passos","Próximos Passos",[],[],{"title":884,"description":885,"type":611,"language":886,"translatedFrom":20,"translationStatus":887},[],{"id":606,"data":912,"body":915,"filePath":916,"digest":917,"rendered":918},{"title":913,"description":914,"navLabel":913,"order":16,"version":19,"language":20,"type":805},"Fundamentos","Princípios e diretrizes de design principais que moldam o Azion Design System.","# Fundamentos\r\n\r\nFundamentos são os princípios de design principais, diretrizes e elementos visuais que moldam o Azion Design System. Eles fornecem consistência e coerência em todos os componentes e experiências.\r\n\r\n## O Que Está Incluído\r\n\r\n### Cor\r\nNosso sistema de cores é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas. Aprenda a usar cores de forma eficaz em suas interfaces.\r\n\r\n### Tipografia\r\nAs diretrizes de tipografia garantem texto legível, acessível e consistente em todos os pontos de contato.\r\n\r\n### Espaçamento\r\nUma escala de espaçamento consistente cria ritmo e harmonia nos layouts.\r\n\r\n### Elevação\r\nA elevação define a hierarquia visual e a profundidade dos elementos na interface.\r\n\r\n### Movimento\r\nOs princípios de movimento orientam animações e transições para uma experiência de usuário polida.\r\n\r\n## Princípios de Design\r\n\r\n### 1. Clareza em Primeiro Lugar\r\nTodo elemento deve servir a um propósito. Remova complexidade desnecessária.\r\n\r\n### 2. Consistência\r\nUse padrões familiares e comportamentos consistentes em todo o sistema.\r\n\r\n### 3. Acessibilidade\r\nProjete para todos. Atenda aos padrões WCAG 2.1 AA no mínimo.\r\n\r\n### 4. Performance\r\nOtimize para velocidade e eficiência tanto no design quanto na implementação.\r\n\r\n## Próximos Passos\r\n\r\n- [Cor](/foundations/color) - Explore o sistema de cores\r\n- [Tipografia](/foundations/typography) - Aprenda sobre tipografia\r\n- [Espaçamento](/foundations/spacing) - Entenda os princípios de espaçamento","src/content/v1/pt/foundations/index.md","8e23e4e00906b3ba",{"html":919,"metadata":920},"\u003Ch1 id=\"fundamentos\">Fundamentos\u003C/h1>\n\u003Cp>Fundamentos são os princípios de design principais, diretrizes e elementos visuais que moldam o Azion Design System. Eles fornecem consistência e coerência em todos os componentes e experiências.\u003C/p>\n\u003Ch2 id=\"o-que-está-incluído\">O Que Está Incluído\u003C/h2>\n\u003Ch3 id=\"cor\">Cor\u003C/h3>\n\u003Cp>Nosso sistema de cores é construído sobre tokens semânticos que se adaptam a diferentes contextos e temas. Aprenda a usar cores de forma eficaz em suas interfaces.\u003C/p>\n\u003Ch3 id=\"tipografia\">Tipografia\u003C/h3>\n\u003Cp>As diretrizes de tipografia garantem texto legível, acessível e consistente em todos os pontos de contato.\u003C/p>\n\u003Ch3 id=\"espaçamento\">Espaçamento\u003C/h3>\n\u003Cp>Uma escala de espaçamento consistente cria ritmo e harmonia nos layouts.\u003C/p>\n\u003Ch3 id=\"elevação\">Elevação\u003C/h3>\n\u003Cp>A elevação define a hierarquia visual e a profundidade dos elementos na interface.\u003C/p>\n\u003Ch3 id=\"movimento\">Movimento\u003C/h3>\n\u003Cp>Os princípios de movimento orientam animações e transições para uma experiência de usuário polida.\u003C/p>\n\u003Ch2 id=\"princípios-de-design\">Princípios de Design\u003C/h2>\n\u003Ch3 id=\"1-clareza-em-primeiro-lugar\">1. Clareza em Primeiro Lugar\u003C/h3>\n\u003Cp>Todo elemento deve servir a um propósito. Remova complexidade desnecessária.\u003C/p>\n\u003Ch3 id=\"2-consistência\">2. Consistência\u003C/h3>\n\u003Cp>Use padrões familiares e comportamentos consistentes em todo o sistema.\u003C/p>\n\u003Ch3 id=\"3-acessibilidade\">3. Acessibilidade\u003C/h3>\n\u003Cp>Projete para todos. Atenda aos padrões WCAG 2.1 AA no mínimo.\u003C/p>\n\u003Ch3 id=\"4-performance\">4. Performance\u003C/h3>\n\u003Cp>Otimize para velocidade e eficiência tanto no design quanto na implementação.\u003C/p>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/foundations/color\">Cor\u003C/a> - Explore o sistema de cores\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/typography\">Tipografia\u003C/a> - Aprenda sobre tipografia\u003C/li>\n\u003Cli>\u003Ca href=\"/foundations/spacing\">Espaçamento\u003C/a> - Entenda os princípios de espaçamento\u003C/li>\n\u003C/ul>",{"headings":921,"localImagePaths":958,"remoteImagePaths":959,"frontmatter":960,"imagePaths":961},[922,924,927,930,933,936,939,942,945,948,951,954,957],{"depth":16,"slug":923,"text":913},"fundamentos",{"depth":105,"slug":925,"text":926},"o-que-está-incluído","O Que Está Incluído",{"depth":566,"slug":928,"text":929},"cor","Cor",{"depth":566,"slug":931,"text":932},"tipografia","Tipografia",{"depth":566,"slug":934,"text":935},"espaçamento","Espaçamento",{"depth":566,"slug":937,"text":938},"elevação","Elevação",{"depth":566,"slug":940,"text":941},"movimento","Movimento",{"depth":105,"slug":943,"text":944},"princípios-de-design","Princípios de Design",{"depth":566,"slug":946,"text":947},"1-clareza-em-primeiro-lugar","1. Clareza em Primeiro Lugar",{"depth":566,"slug":949,"text":950},"2-consistência","2. Consistência",{"depth":566,"slug":952,"text":953},"3-acessibilidade","3. Acessibilidade",{"depth":566,"slug":955,"text":956},"4-performance","4. Performance",{"depth":105,"slug":905,"text":906},[],[],{"title":913,"description":914,"navLabel":913,"order":16,"type":805},[],{"id":615,"data":963,"body":965,"filePath":966,"digest":967,"rendered":968},{"title":900,"description":964,"category":620,"version":19,"language":886,"translatedFrom":20,"translationStatus":887,"type":611},"Instale o Azion Design System em seu projeto","## Requisitos\r\n\r\n- Node.js 18 ou superior\r\n- npm, yarn ou pnpm\r\n\r\n## Instalar Pacotes\r\n\r\nO Azion Design System é composto por três pacotes principais:\r\n\r\n```bash\r\n# Usando npm\r\nnpm install @aziontech/components @aziontech/icons @aziontech/theme\r\n\r\n# Usando yarn\r\nyarn add @aziontech/components @aziontech/icons @aziontech/theme\r\n\r\n# Usando pnpm\r\npnpm add @aziontech/components @aziontech/icons @aziontech/theme\r\n```\r\n\r\n### Pacotes\r\n\r\n| Pacote | Descrição |\r\n|--------|-----------|\r\n| `@aziontech/components` | Componentes Vue.js |\r\n| `@aziontech/icons` | Biblioteca de ícones |\r\n| `@aziontech/theme` | Design tokens e estilos base |\r\n\r\n## Configuração\r\n\r\n### 1. Importar Estilos\r\n\r\nImporte os estilos base no seu arquivo de entrada principal:\r\n\r\n```javascript\r\n// main.js ou main.ts\r\nimport '@aziontech/theme/styles.css';\r\n```\r\n\r\n### 2. Registrar Componentes (Opcional)\r\n\r\nPara registrar todos os componentes globalmente:\r\n\r\n```javascript\r\n// main.js ou main.ts\r\nimport { createApp } from 'vue';\r\nimport AzionComponents from '@aziontech/components';\r\nimport App from './App.vue';\r\n\r\nconst app = createApp(App);\r\napp.use(AzionComponents);\r\napp.mount('#app');\r\n```\r\n\r\n### 3. Importação Sob Demanda\r\n\r\nPara melhor performance, importe componentes individualmente:\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { Button, Input } from '@aziontech/components';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CButton variant=\"primary\">Enviar\u003C/Button>\r\n \u003CInput v-model=\"value\" placeholder=\"Digite algo...\" />\r\n\u003C/template>\r\n```\r\n\r\n## Frameworks Suportados\r\n\r\nO Azion Design System é construído com Vue 3 e funciona com:\r\n\r\n- Vue 3.x\r\n- Nuxt 3.x\r\n- Vite\r\n\r\n## Solução de Problemas\r\n\r\n### Erro de Importação\r\n\r\nSe você encontrar erros de importação, verifique se o `@aziontech/theme` está instalado corretamente:\r\n\r\n```bash\r\nnpm ls @aziontech/theme\r\n```\r\n\r\n### Estilos Não Aplicados\r\n\r\nCertifique-se de importar os estilos antes de usar os componentes:\r\n\r\n```javascript\r\nimport '@aziontech/theme/styles.css';\r\n// Depois importe os componentes\r\nimport { Button } from '@aziontech/components';\r\n```\r\n\r\n## Próximos Passos\r\n\r\n- [Início Rápido](/pt/get-started) - Comece a usar os componentes\r\n- [Componentes](/pt/components) - Explore a biblioteca de componentes\r\n- [Fundamentos](/pt/foundations) - Conheça os princípios de design","src/content/v1/pt/get-started/installation.md","54cb0b9a4a3d9fce",{"html":969,"metadata":970},"\u003Ch2 id=\"requisitos\">Requisitos\u003C/h2>\n\u003Cul>\n\u003Cli>Node.js 18 ou superior\u003C/li>\n\u003Cli>npm, yarn ou pnpm\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"instalar-pacotes\">Instalar Pacotes\u003C/h2>\n\u003Cp>O Azion Design System é composto por três pacotes principais:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Usando npm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Usando yarn\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">yarn\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># Usando pnpm\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">pnpm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/components\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"pacotes\">Pacotes\u003C/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Pacote\u003C/th>\u003Cth>Descrição\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/components\u003C/code>\u003C/td>\u003Ctd>Componentes Vue.js\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/icons\u003C/code>\u003C/td>\u003Ctd>Biblioteca de ícones\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>@aziontech/theme\u003C/code>\u003C/td>\u003Ctd>Design tokens e estilos base\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"configuração\">Configuração\u003C/h2>\n\u003Ch3 id=\"1-importar-estilos\">1. Importar Estilos\u003C/h3>\n\u003Cp>Importe os estilos base no seu arquivo de entrada principal:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// main.js ou main.ts\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"2-registrar-componentes-opcional\">2. Registrar Componentes (Opcional)\u003C/h3>\n\u003Cp>Para registrar todos os componentes globalmente:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// main.js ou main.ts\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { createApp } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'vue'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> AzionComponents \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> App \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> './App.vue'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C/span>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> app\u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> createApp\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(App);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">use\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(AzionComponents);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">app.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">mount\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'#app'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"3-importação-sob-demanda\">3. Importação Sob Demanda\u003C/h3>\n\u003Cp>Para melhor performance, importe componentes individualmente:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"vue\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button, Input } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> variant\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"primary\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Enviar</\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Button\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Input\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> v-model\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"value\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> placeholder\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Digite algo...\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"frameworks-suportados\">Frameworks Suportados\u003C/h2>\n\u003Cp>O Azion Design System é construído com Vue 3 e funciona com:\u003C/p>\n\u003Cul>\n\u003Cli>Vue 3.x\u003C/li>\n\u003Cli>Nuxt 3.x\u003C/li>\n\u003Cli>Vite\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"solução-de-problemas\">Solução de Problemas\u003C/h2>\n\u003Ch3 id=\"erro-de-importação\">Erro de Importação\u003C/h3>\n\u003Cp>Se você encontrar erros de importação, verifique se o \u003Ccode>@aziontech/theme\u003C/code> está instalado corretamente:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> ls\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/theme\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"estilos-não-aplicados\">Estilos Não Aplicados\u003C/h3>\n\u003Cp>Certifique-se de importar os estilos antes de usar os componentes:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"javascript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/theme/styles.css'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">// Depois importe os componentes\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Button } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/components'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"próximos-passos\">Próximos Passos\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/get-started\">Início Rápido\u003C/a> - Comece a usar os componentes\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/components\">Componentes\u003C/a> - Explore a biblioteca de componentes\u003C/li>\n\u003Cli>\u003Ca href=\"/pt/foundations\">Fundamentos\u003C/a> - Conheça os princípios de design\u003C/li>\n\u003C/ul>",{"headings":971,"localImagePaths":1006,"remoteImagePaths":1007,"frontmatter":1008,"imagePaths":1009},[972,975,978,981,984,987,990,993,996,999,1002,1005],{"depth":105,"slug":973,"text":974},"requisitos","Requisitos",{"depth":105,"slug":976,"text":977},"instalar-pacotes","Instalar Pacotes",{"depth":566,"slug":979,"text":980},"pacotes","Pacotes",{"depth":105,"slug":982,"text":983},"configuração","Configuração",{"depth":566,"slug":985,"text":986},"1-importar-estilos","1. Importar Estilos",{"depth":566,"slug":988,"text":989},"2-registrar-componentes-opcional","2. Registrar Componentes (Opcional)",{"depth":566,"slug":991,"text":992},"3-importação-sob-demanda","3. Importação Sob Demanda",{"depth":105,"slug":994,"text":995},"frameworks-suportados","Frameworks Suportados",{"depth":105,"slug":997,"text":998},"solução-de-problemas","Solução de Problemas",{"depth":566,"slug":1000,"text":1001},"erro-de-importação","Erro de Importação",{"depth":566,"slug":1003,"text":1004},"estilos-não-aplicados","Estilos Não Aplicados",{"depth":105,"slug":905,"text":906},[],[],{"title":900,"description":964,"type":611,"category":620,"language":886,"translatedFrom":20,"translationStatus":887},[],{"id":139,"data":1011,"body":146,"filePath":1012,"digest":1013,"deferredRender":61},{"title":142,"description":143,"navLabel":142,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":144,"apiFrom":145},"src/content/v1/pt/components/azion-system-status.mdx","ed7fb832e80d2f88",{"id":149,"data":1015,"body":1110,"filePath":1111,"digest":1112,"deferredRender":61},{"title":152,"description":1016,"navLabel":152,"order":16,"category":121,"status":154,"since":155,"tags":1017,"version":19,"language":20,"type":123,"component":152,"source":159,"storybook":160,"figma":161,"related":1018,"anatomy":1019,"accessibility":1026,"usage":1041,"api":1082},"Botões disparam ações e eventos quando os usuários interagem com eles.",[157,121,158],[163,164,165],[1020,1022,1024],{"label":168,"description":1021},"A área clicável com estilo de fundo e borda",{"label":171,"description":1023},"O texto que descreve a ação do botão",{"label":174,"description":1025},"Um ícone opcional para dar ênfase visual antes ou depois do texto",{"keyboard":1027,"aria":1033,"wcag":1040},[1028,1030,1032],{"keys":179,"action":1029},"Move o foco para o botão",{"keys":182,"action":1031},"Ativa o botão quando ele está em foco",{"keys":185,"action":1031},[1034,1036,1038],{"attribute":188,"usage":1035},"Use no lugar do atributo disabled para que leitores de tela anunciem corretamente o estado desabilitado",{"attribute":191,"usage":1037},"Obrigatório para botões que possuem apenas ícone, fornecendo um nome acessível",{"attribute":194,"usage":1039},"Utilizado quando o botão está em estado de carregamento",[197,198],{"whenToUse":1042,"whenNotToUse":1048,"doDonts":1052,"examples":1065},[1043,1044,1045,1046,1047],"Disparar ações principais (Enviar, Salvar, Continuar)","Navegar para diferentes telas ou páginas","Alternar estados ou configurações","Disparar ações secundárias (Cancelar, Excluir)","Enviar formulários",[1049,1050,1051],"Navegação para links externos (use um link em vez de um botão)","Exibir conteúdo estático (use texto ou labels)","Quando uma interação mais sutil for necessária (considere usar um link de texto)",[1053,1056,1059,1062],{"type":33,"description":1054,"example":1055},"Use botões para itens acionáveis","\u003CButton>Enviar Formulário\u003C/Button>",{"type":33,"description":1057,"example":1058},"Use rótulos claros e orientados à ação","\u003CButton>Salvar Alterações\u003C/Button>",{"type":38,"description":1060,"example":1061},"Não use botões para navegação","\u003CButton>Ir para Dashboard\u003C/Button>",{"type":38,"description":1063,"example":1064},"Não use rótulos vagos","\u003CButton>Clique Aqui\u003C/Button>",[1066,1070,1074,1078],{"title":1067,"description":1068,"code":1069},"Botão Primário","Estilo padrão do botão para ações principais","\u003CButton severity=\"primary\">Botão Primário\u003C/Button>",{"title":1071,"description":1072,"code":1073},"Botão Secundário","Para ações alternativas ou menos destacadas","\u003CButton severity=\"secondary\">Botão Secundário\u003C/Button>",{"title":1075,"description":1076,"code":1077},"Botão de Perigo","Para ações perigosas como excluir ou remover","\u003CButton severity=\"danger\">Excluir\u003C/Button>",{"title":1079,"description":1080,"code":1081},"Tamanhos do Botão","Disponível nos tamanhos pequeno, médio e grande","\u003CButton size=\"sm\">Pequeno\u003C/Button>\n\u003CButton size=\"md\">Médio\u003C/Button>\n\u003CButton size=\"lg\">Grande\u003C/Button>",{"props":1083,"slots":1100,"events":1107},[1084,1086,1088,1090,1092,1094,1096,1098],{"name":243,"type":244,"default":245,"required":55,"description":1085},"Nível de severidade visual - afeta o esquema de cores",{"name":52,"type":248,"default":249,"required":55,"description":1087},"Variante de estilo do botão",{"name":252,"type":253,"default":254,"required":55,"description":1089},"Tamanho do botão",{"name":257,"type":81,"default":258,"required":55,"description":1091},"Define se o botão está desabilitado",{"name":261,"type":81,"default":258,"required":55,"description":1093},"Exibe um indicador de carregamento e desativa a interação",{"name":264,"type":81,"default":258,"required":55,"description":1095},"Renderiza como botão apenas com ícone (sem texto)",{"name":267,"type":268,"default":269,"required":55,"description":1097},"Posição do ícone em relação ao texto",{"name":272,"type":81,"default":258,"required":55,"description":1099},"Define se o botão ocupa toda a largura do container",[1101,1103,1105],{"name":276,"description":1102},"Conteúdo do texto do botão",{"name":279,"description":1104,"props":281},"Ícone customizado antes do texto",{"name":283,"description":1106,"props":281},"Ícone customizado após o texto",[1108],{"name":287,"payload":288,"description":1109},"Disparado quando o botão é clicado e não está desabilitado","import { Playground, StateGrid, CodeBlock, Callout } from '@components/docs';\r\nimport Button from '@components/demo/Button.vue';\r\nimport { buttonProps } from '@components/demo/props-metadata';\r\n\r\nBotões são elementos interativos que disparam ações quando clicados ou tocados. Eles comunicam ações que os usuários podem executar e normalmente aparecem em diversas partes da interface, desde formulários até diálogos e navegação.\r\n\r\nO componente Button fornece uma maneira consistente e acessível de disparar ações em toda a sua aplicação.\r\n\r\n## Import\r\n\r\n\u003CCodeBlock code={`import { Button } from '@aziontech/webkit';`} lang=\"javascript\" />\r\n\r\n## Playground\r\n\r\nExplore o componente Button de forma interativa. Ajuste as props e veja as mudanças em tempo real.\r\n\r\n\u003CPlayground\r\n client:load\r\n component-name=\"Button\"\r\n props={buttonProps}\r\n slot-content=\"Button\"\r\n/>\r\n\r\n## States\r\n\r\n\u003CStateGrid columns={4}>\r\n \u003CButton slot=\"default\" client:load>Button\u003C/Button>\r\n \u003CButton slot=\"hover\" client:load severity=\"primary\" variant=\"filled\">Button\u003C/Button>\r\n \u003CButton slot=\"focus\" client:load severity=\"primary\" variant=\"filled\">Button\u003C/Button>\r\n \u003CButton slot=\"disabled\" client:load disabled>Button\u003C/Button>\r\n\u003C/StateGrid>\r\n\r\n\u003CCallout type=\"tip\" title=\"Escolhendo a severidade correta\">\r\n Use **primary** para a ação principal, **secondary** para ações alternativas, **danger** para ações perigosas e **plain** para ações menos destacadas.\r\n\u003C/Callout>","src/content/v1/pt/components/button.mdx","23c8574ff8026428",{"id":293,"data":1114,"body":300,"filePath":1115,"digest":302,"deferredRender":61},{"title":296,"description":297,"navLabel":296,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":298,"apiFrom":299},"src/content/v1/pt/components/form-field-auto-complete.mdx",{"id":115,"data":1117,"body":126,"filePath":1118,"digest":128,"deferredRender":61},{"title":118,"description":119,"navLabel":118,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":124,"apiFrom":125},"src/content/v1/pt/components/form-field-checkbox-block.mdx",{"id":129,"data":1120,"body":136,"filePath":1121,"digest":138,"deferredRender":61},{"title":132,"description":133,"navLabel":132,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":134,"apiFrom":135},"src/content/v1/pt/components/form-field-dropdown-icon.mdx",{"id":303,"data":1123,"body":310,"filePath":1124,"digest":312,"deferredRender":61},{"title":306,"description":307,"navLabel":306,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":308,"apiFrom":309},"src/content/v1/pt/components/form-field-dropdown-lazy-loader-dynamic.mdx",{"id":323,"data":1126,"body":330,"filePath":1127,"digest":332,"deferredRender":61},{"title":326,"description":327,"navLabel":326,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":328,"apiFrom":329},"src/content/v1/pt/components/form-field-dropdown-lazy-loader.mdx",{"id":313,"data":1129,"body":320,"filePath":1130,"digest":322,"deferredRender":61},{"title":316,"description":317,"navLabel":316,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":318,"apiFrom":319},"src/content/v1/pt/components/form-field-dropdown-lazy-loader-with-filter.mdx",{"id":333,"data":1132,"body":340,"filePath":1133,"digest":342,"deferredRender":61},{"title":336,"description":337,"navLabel":336,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":338,"apiFrom":339},"src/content/v1/pt/components/form-field-dropdown-multi-select-lazy-loader.mdx",{"id":353,"data":1135,"body":360,"filePath":1136,"digest":362,"deferredRender":61},{"title":356,"description":357,"navLabel":356,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":358,"apiFrom":359},"src/content/v1/pt/components/form-field-dropdown.mdx",{"id":363,"data":1138,"body":370,"filePath":1139,"digest":372,"deferredRender":61},{"title":366,"description":367,"navLabel":366,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":368,"apiFrom":369},"src/content/v1/pt/components/form-field-group-checkbox.mdx",{"id":343,"data":1141,"body":350,"filePath":1142,"digest":352,"deferredRender":61},{"title":346,"description":347,"navLabel":346,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":348,"apiFrom":349},"src/content/v1/pt/components/form-field-group-radio.mdx",{"id":373,"data":1144,"body":380,"filePath":1145,"digest":382,"deferredRender":61},{"title":376,"description":377,"navLabel":376,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":378,"apiFrom":379},"src/content/v1/pt/components/form-field-group-switch.mdx",{"id":383,"data":1147,"body":390,"filePath":1148,"digest":392,"deferredRender":61},{"title":386,"description":387,"navLabel":386,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":388,"apiFrom":389},"src/content/v1/pt/components/form-field-input-group.mdx",{"id":403,"data":1150,"body":410,"filePath":1151,"digest":412,"deferredRender":61},{"title":406,"description":407,"navLabel":406,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":408,"apiFrom":409},"src/content/v1/pt/components/form-field-multi-select.mdx",{"id":393,"data":1153,"body":400,"filePath":1154,"digest":402,"deferredRender":61},{"title":396,"description":397,"navLabel":396,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":398,"apiFrom":399},"src/content/v1/pt/components/form-field-number.mdx",{"id":413,"data":1156,"body":420,"filePath":1157,"digest":422,"deferredRender":61},{"title":416,"description":417,"navLabel":416,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":418,"apiFrom":419},"src/content/v1/pt/components/form-field-phone-number-country.mdx",{"id":423,"data":1159,"body":430,"filePath":1160,"digest":432,"deferredRender":61},{"title":426,"description":427,"navLabel":426,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":428,"apiFrom":429},"src/content/v1/pt/components/form-field-phone-number.mdx",{"id":433,"data":1162,"body":440,"filePath":1163,"digest":442,"deferredRender":61},{"title":436,"description":437,"navLabel":436,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":438,"apiFrom":439},"src/content/v1/pt/components/form-field-pick-list.mdx",{"id":443,"data":1165,"body":450,"filePath":1166,"digest":452,"deferredRender":61},{"title":446,"description":447,"navLabel":446,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":448,"apiFrom":449},"src/content/v1/pt/components/form-field-radio-block.mdx",{"id":463,"data":1168,"body":470,"filePath":1169,"digest":472,"deferredRender":61},{"title":466,"description":467,"navLabel":466,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":468,"apiFrom":469},"src/content/v1/pt/components/form-field-switch-block.mdx",{"id":453,"data":1171,"body":460,"filePath":1172,"digest":462,"deferredRender":61},{"title":456,"description":457,"navLabel":456,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":458,"apiFrom":459},"src/content/v1/pt/components/form-field-switch.mdx",{"id":473,"data":1174,"body":480,"filePath":1175,"digest":482,"deferredRender":61},{"title":476,"description":477,"navLabel":476,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":478,"apiFrom":479},"src/content/v1/pt/components/form-field-text-area.mdx",{"id":483,"data":1177,"body":490,"filePath":1178,"digest":492,"deferredRender":61},{"title":486,"description":487,"navLabel":486,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":488,"apiFrom":489},"src/content/v1/pt/components/form-field-text-icon.mdx",{"id":493,"data":1180,"body":500,"filePath":1181,"digest":502,"deferredRender":61},{"title":496,"description":497,"navLabel":496,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":498,"apiFrom":499},"src/content/v1/pt/components/form-field-text-password.mdx",{"id":503,"data":1183,"body":510,"filePath":1184,"digest":512,"deferredRender":61},{"title":506,"description":507,"navLabel":506,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":508,"apiFrom":509},"src/content/v1/pt/components/form-field-text-privacy.mdx",{"id":513,"data":1186,"body":520,"filePath":1187,"digest":522,"deferredRender":61},{"title":516,"description":517,"navLabel":516,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":518,"apiFrom":519},"src/content/v1/pt/components/form-field-text.mdx",{"id":523,"data":1189,"body":528,"filePath":1190,"digest":530,"deferredRender":61},{"title":171,"description":526,"navLabel":171,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":171,"apiFrom":527},"src/content/v1/pt/components/form-label.mdx",{"id":531,"data":1192,"body":538,"filePath":1193,"digest":540,"deferredRender":61},{"title":534,"description":535,"navLabel":534,"order":120,"category":121,"status":122,"version":19,"language":20,"type":123,"component":536,"apiFrom":537},"src/content/v1/pt/components/selector-block.mdx",{"id":541,"data":1195,"body":1198,"filePath":1199,"digest":1200,"deferredRender":61},{"title":1196,"description":1197,"navLabel":1196,"order":16,"version":19,"language":20,"type":123},"Componentes","Explore nossa biblioteca de componentes construída com Vue e projetada para a plataforma Azion.","import { ComponentsIndex } from '@components/docs';\r\n\r\n\u003CComponentsIndex \r\n language=\"pt\" \r\n categoryLabels={{\r\n form: 'Componentes de Formulário',\r\n navigation: 'Componentes de Navegação',\r\n feedback: 'Componentes de Feedback',\r\n 'data-display': 'Componentes de Exibição de Dados',\r\n layout: 'Componentes de Layout',\r\n utility: 'Componentes Utilitários',\r\n }}\r\n/>","src/content/v1/pt/components/index.mdx","baf776c1298c4550",{"id":671,"data":1202,"body":1205,"filePath":1206,"digest":1207,"rendered":1208},{"title":1203,"description":1204,"navLabel":1203,"order":16,"version":19,"language":20,"type":676},"Ícones","Biblioteca de ícones com Azion Icons e PrimeIcons para uso em suas aplicações.","# Ícones\r\n\r\n> **Galeria de Ícones** — Navegue por todos os ícones disponíveis com galeria visual, busca e copiar para a área de transferência. \u003Ca href=\"https://icons-gallery.azion.app\" target=\"_blank\" rel=\"noopener noreferrer\">Abrir Galeria de Ícones\u003C/a>\r\n\r\nO Azion Design System inclui duas bibliotecas de ícones:\r\n\r\n- **Azion Icons** - Ícones personalizados projetados para produtos Azion\r\n- **PrimeIcons** - Biblioteca de ícones de uso geral do PrimeVue\r\n\r\n## Instalação\r\n\r\nOs ícones estão incluídos no pacote `@aziontech/icons`:\r\n\r\n```bash\r\nnpm install @aziontech/icons\r\n```\r\n\r\n## Uso\r\n\r\n### Ícones de Fonte\r\n\r\nUse ícones como font icons com a classe apropriada:\r\n\r\n```html\r\n\u003C!-- Ícone Azion -->\r\n\u003Ci class=\"ai ai-azion\">\u003C/i>\r\n\r\n\u003C!-- PrimeIcon -->\r\n\u003Ci class=\"pi pi-home\">\u003C/i>\r\n```\r\n\r\n### Ícones SVG\r\n\r\nImporte ícones SVG diretamente para ter mais controle:\r\n\r\n```js\r\nimport { aiAzion, piHome } from '@aziontech/icons/svg';\r\n```\r\n\r\n## Categorias de Ícones\r\n\r\n### Azion Icons\r\n\r\nOs ícones Azion estão organizados em categorias:\r\n\r\n- **Ícones de Produto** - Ícones de produtos e serviços Azion\r\n- **Ícones de Ação** - Ícones de ações comuns\r\n- **Ícones de Status** - Ícones de status e notificações\r\n\r\n### PrimeIcons\r\n\r\nPrimeIcons fornece um conjunto abrangente de ícones de uso geral adequados para a maioria das necessidades de interface.\r\n\r\n## Tamanhos\r\n\r\nOs ícones herdam seu tamanho do tamanho da fonte de seu contêiner:\r\n\r\n```html\r\n\u003C!-- Pequeno -->\r\n\u003Ci class=\"ai ai-azion text-sm\">\u003C/i>\r\n\r\n\u003C!-- Médio (padrão) -->\r\n\u003Ci class=\"ai ai-azion text-base\">\u003C/i>\r\n\r\n\u003C!-- Grande -->\r\n\u003Ci class=\"ai ai-azion text-2xl\">\u003C/i>\r\n```\r\n\r\n## Acessibilidade\r\n\r\nAo usar ícones sozinhos, forneça rótulos acessíveis:\r\n\r\n```html\r\n\u003C!-- Botão com ícone e rótulo -->\r\n\u003Cbutton aria-label=\"Configurações\">\r\n \u003Ci class=\"pi pi-cog\">\u003C/i>\r\n\u003C/button>\r\n\r\n\u003C!-- Ícone decorativo (oculto para leitores de tela) -->\r\n\u003Ci class=\"pi pi-star\" aria-hidden=\"true\">\u003C/i>\r\n```\r\n\r\n## Relacionado\r\n\r\n- [Button](/pt/components/button) - Componente de botão com suporte a ícones","src/content/v1/pt/icons/index.md","addb048b4380dee8",{"html":1209,"metadata":1210},"\u003Ch1 id=\"ícones\">Ícones\u003C/h1>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Galeria de Ícones\u003C/strong> — Navegue por todos os ícones disponíveis com galeria visual, busca e copiar para a área de transferência. \u003Ca href=\"https://icons-gallery.azion.app\" target=\"_blank\" rel=\"noopener noreferrer\">Abrir Galeria de Ícones\u003C/a>\u003C/p>\n\u003C/blockquote>\n\u003Cp>O Azion Design System inclui duas bibliotecas de ícones:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Azion Icons\u003C/strong> - Ícones personalizados projetados para produtos Azion\u003C/li>\n\u003Cli>\u003Cstrong>PrimeIcons\u003C/strong> - Biblioteca de ícones de uso geral do PrimeVue\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"instalação\">Instalação\u003C/h2>\n\u003Cp>Os ícones estão incluídos no pacote \u003Ccode>@aziontech/icons\u003C/code>:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> @aziontech/icons\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"uso\">Uso\u003C/h2>\n\u003Ch3 id=\"ícones-de-fonte\">Ícones de Fonte\u003C/h3>\n\u003Cp>Use ícones como font icons com a classe apropriada:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Ícone Azion -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- PrimeIcon -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-home\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"ícones-svg\">Ícones SVG\u003C/h3>\n\u003Cp>Importe ícones SVG diretamente para ter mais controle:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { aiAzion, piHome } \u003C/span>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@aziontech/icons/svg'\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"categorias-de-ícones\">Categorias de Ícones\u003C/h2>\n\u003Ch3 id=\"azion-icons\">Azion Icons\u003C/h3>\n\u003Cp>Os ícones Azion estão organizados em categorias:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Ícones de Produto\u003C/strong> - Ícones de produtos e serviços Azion\u003C/li>\n\u003Cli>\u003Cstrong>Ícones de Ação\u003C/strong> - Ícones de ações comuns\u003C/li>\n\u003Cli>\u003Cstrong>Ícones de Status\u003C/strong> - Ícones de status e notificações\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"primeicons\">PrimeIcons\u003C/h3>\n\u003Cp>PrimeIcons fornece um conjunto abrangente de ícones de uso geral adequados para a maioria das necessidades de interface.\u003C/p>\n\u003Ch2 id=\"tamanhos\">Tamanhos\u003C/h2>\n\u003Cp>Os ícones herdam seu tamanho do tamanho da fonte de seu contêiner:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Pequeno -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-sm\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Médio (padrão) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-base\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Grande -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ai ai-azion text-2xl\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"acessibilidade\">Acessibilidade\u003C/h2>\n\u003Cp>Ao usar ícones sozinhos, forneça rótulos acessíveis:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Botão com ícone e rótulo -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-label\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Configurações\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-cog\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"><!-- Ícone decorativo (oculto para leitores de tela) -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"pi pi-star\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> aria-hidden\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C/span>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"true\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">i\u003C/span>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"relacionado\">Relacionado\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"/pt/components/button\">Button\u003C/a> - Componente de botão com suporte a ícones\u003C/li>\n\u003C/ul>",{"headings":1211,"localImagePaths":1238,"remoteImagePaths":1239,"frontmatter":1240,"imagePaths":1241},[1212,1214,1215,1218,1221,1224,1227,1228,1229,1232,1235],{"depth":16,"slug":1213,"text":1203},"ícones",{"depth":105,"slug":899,"text":900},{"depth":105,"slug":1216,"text":1217},"uso","Uso",{"depth":566,"slug":1219,"text":1220},"ícones-de-fonte","Ícones de Fonte",{"depth":566,"slug":1222,"text":1223},"ícones-svg","Ícones SVG",{"depth":105,"slug":1225,"text":1226},"categorias-de-ícones","Categorias de Ícones",{"depth":566,"slug":699,"text":700},{"depth":566,"slug":702,"text":703},{"depth":105,"slug":1230,"text":1231},"tamanhos","Tamanhos",{"depth":105,"slug":1233,"text":1234},"acessibilidade","Acessibilidade",{"depth":105,"slug":1236,"text":1237},"relacionado","Relacionado",[],[],{"title":1203,"description":1204,"navLabel":1203,"order":16,"type":676},[],{"id":715,"data":1243,"body":1246,"filePath":1247,"digest":1248,"rendered":1249},{"title":1244,"description":1245,"navLabel":720,"order":16,"version":19,"language":886,"translatedFrom":20,"translationStatus":887,"type":715},"Playground de Componentes","Ambiente interativo para experimentar componentes do Azion Design System.","## Visão Geral\r\n\r\nO Playground de Componentes fornece um ambiente interativo para experimentar componentes do Azion Design System. Você pode modificar props em tempo real e ver como os componentes se comportam.\r\n\r\n## Em Breve\r\n\r\nO playground está atualmente em desenvolvimento. Volte em breve para uma experiência interativa de teste de componentes.\r\n\r\n\u003CCallout type=\"info\">\r\nO playground permitirá que você:\r\n- Selecione qualquer componente da biblioteca\r\n- Modifique props e veja atualizações em tempo real\r\n- Copie snippets de código gerados\r\n- Teste diferentes estados e variantes\r\n\u003C/Callout>","src/content/v1/pt/playground/index.md","48967c1a0f0cc8db",{"html":1250,"metadata":1251},"\u003Ch2 id=\"visão-geral\">Visão Geral\u003C/h2>\n\u003Cp>O Playground de Componentes fornece um ambiente interativo para experimentar componentes do Azion Design System. Você pode modificar props em tempo real e ver como os componentes se comportam.\u003C/p>\n\u003Ch2 id=\"em-breve\">Em Breve\u003C/h2>\n\u003Cp>O playground está atualmente em desenvolvimento. Volte em breve para uma experiência interativa de teste de componentes.\u003C/p>\n\u003Ccallout type=\"info\">\nO playground permitirá que você:\n- Selecione qualquer componente da biblioteca\n- Modifique props e veja atualizações em tempo real\n- Copie snippets de código gerados\n- Teste diferentes estados e variantes\n\u003C/callout>",{"headings":1252,"localImagePaths":1258,"remoteImagePaths":1259,"frontmatter":1260,"imagePaths":1261},[1253,1255],{"depth":105,"slug":824,"text":1254},"Visão Geral",{"depth":105,"slug":1256,"text":1257},"em-breve","Em Breve",[],[],{"title":1244,"description":1245,"navLabel":720,"order":16,"type":715,"language":886,"translatedFrom":20,"translationStatus":887},[],{"id":736,"data":1263,"body":1265,"filePath":1266,"digest":1267,"deferredRender":61},{"title":739,"description":1264,"navLabel":741,"order":16,"category":742,"version":19,"language":20,"type":743},"Design tokens são as menores unidades do sistema de design, armazenando valores visuais como cores para uso consistente entre produtos. Os tokens ficam no pacote @aziontech/theme.","# Tokens\r\n\r\nDesign tokens são as menores unidades do sistema de design. Eles armazenam valores visuais como cores para manter produtos e plataformas consistentes.\r\n\r\nNeste monorepo, os tokens são fornecidos pelo pacote **`@aziontech/theme`**. Eles suportam temas claro e escuro por meio de tokens semânticos e podem ser usados com Tailwind CSS na documentação e em outros apps.\r\n\r\n## Pacote e estrutura\r\n\r\nO pacote de tema é **`@aziontech/theme`**. Os design tokens ficam no export `/tokens`.\r\n\r\n### Instalação\r\n\r\nNo monorepo, o app de docs já depende do tema:\r\n\r\n```json\r\n{\r\n \"dependencies\": {\r\n \"@aziontech/theme\": \"workspace:*\"\r\n }\r\n}\r\n```\r\n\r\nEm um projeto externo:\r\n\r\n```bash\r\nnpm install @aziontech/theme\r\n```\r\n\r\n### Estrutura dos tokens\r\n\r\nDentro de `packages/theme`:\r\n\r\n```\r\npackages/theme/\r\n├── tokens.js # Entrada principal: reexporta de src/tokens\r\n├── default.js # Entrada do tema SCSS (tema completo)\r\n└── src/tokens/\r\n ├── index.js # Exportações públicas dos tokens\r\n ├── primitives/\r\n │ ├── colors.js # Paletas (gray, neutral, orange, violet, etc.)\r\n │ └── brand.js # Primitivos de marca e superfície (surface, primary, accent)\r\n ├── colors-brand.js # Aliases de cor da marca\r\n ├── semantic/\r\n │ ├── text.js # Semânticas de texto light/dark\r\n │ ├── backgrounds.js # Semânticas de fundo light/dark\r\n │ └── borders.js # Semânticas de borda light/dark\r\n └── build/\r\n ├── preset.js # Preset Tailwind\r\n ├── tailwind-plugin.js # tokenUtilities() para classes semânticas\r\n ├── resolve.js # Resolução de refs para valores\r\n ├── css-vars.js # Saída de variáveis CSS\r\n └── refs.js # Helpers de referência\r\n```\r\n\r\n- **Primitivos** são valores fixos (ex.: `neutral.900`, `orange.500`). Não mudam com o tema; use `dark:` do Tailwind quando precisar.\r\n- **Semânticos** são definidos por tema (light/dark) em `semantic/*.js`. O **plugin Tailwind** gera as classes que seguem o tema ativo (`.dark` ou `.azion.azion-dark`).\r\n\r\n## Tokens primitivos\r\n\r\nUse primitivos quando precisar de valor fixo ou ao definir novas semânticas.\r\n\r\n| Categoria | Exemplo | Uso |\r\n|----------|---------|-----|\r\n| Neutros | `neutral-50` … `neutral-950` | Superfícies, bordas, texto sem semântico |\r\n| Primary (laranja) | `orange-50` … `orange-950` | Marca; `orange-500` é o laranja principal |\r\n| Accent (violeta) | `violet-50` … `violet-950` | Destaques |\r\n| Surface | `surface-0`, `surface-50`, … `surface-950` | Camadas |\r\n| Status | `red-*`, `green-*`, `yellow-*`, `blue-*` | Estados |\r\n\r\n**No Tailwind (docs):** O config estende `theme.extend.colors` com `primitives`, `surface`, `primaryBrand` e `accent` de `@aziontech/theme/tokens`. Use `bg-neutral-100`, `text-orange-500`, `border-surface-200`, etc.\r\n\r\n**Em JS:**\r\n\r\n```js\r\nimport { primitives, surfacePrimitives, brandPrimitives } from '@aziontech/theme/tokens';\r\n\r\nprimitives.neutral[900];\r\nsurfacePrimitives.surface[50];\r\nbrandPrimitives.primary[500];\r\n```\r\n\r\n\u003CCallout type=\"warning\" title=\"Use primitivos com moderação\">\r\n Prefira tokens semânticos na UI para o app se adaptar ao claro/escuro. Use primitivos quando precisar de valor fixo ou ao definir novas semânticas.\r\n\u003C/Callout>\r\n\r\n## Tokens semânticos\r\n\r\nOs tokens semânticos são conscientes de tema: um nome mapeia para valores diferentes em light e dark. O **plugin Tailwind** (`tokenUtilities`) gera utilitários que mudam com `.dark` (e `.azion.azion-dark`).\r\n\r\n### Como a documentação usa\r\n\r\n1. **Config Tailwind:** `darkMode: ['class', '.dark', '.azion.azion-dark']`, `plugins: [tokenUtilities(), …]`, e `theme.extend.colors` com primitives/surface/primaryBrand/accent de `@aziontech/theme/tokens`.\r\n\r\n2. **Classes do plugin** (sem precisar de `dark:`):\r\n - **Texto:** `text-default`, `text-muted`, `text-link`, `text-primary`, `text-accent`, `text-code`.\r\n - **Fundo:** `bg-layer1`, `bg-layer2`, `bg-surface`, `bg-canvas`, e variantes semânticas.\r\n - **Borda:** `border-default`, `border-primary`, `border-accent`, e variantes semânticas.\r\n\r\nUse `text-default`, `bg-layer1`, `border-default` — **não** `text-text-default`, `bg-bg-layer1`, `border-border-default`.\r\n\r\n### Exemplos\r\n\r\n```html\r\n\u003Cdiv class=\"bg-canvas\">…\u003C/div>\r\n\u003Cdiv class=\"bg-layer1 border border-default rounded-lg p-4\">\r\n \u003Cp class=\"text-default\">Texto primário\u003C/p>\r\n \u003Cp class=\"text-muted\">Texto secundário\u003C/p>\r\n\u003C/div>\r\n\u003Cdiv class=\"border border-primary\">…\u003C/div>\r\n```\r\n\r\n## Exemplos visuais de tokens semânticos\r\n\r\n### Cores de texto\r\n\r\n\u003Cdiv className=\"space-y-4 my-6\" style={{viewTransitionName: 'text-colors'}}>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-default font-medium\">text-default\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Texto primário para títulos e corpo\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-muted font-medium\">text-muted\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Texto secundário\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-link font-medium\">text-link\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-1\">Cor de link\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n### Camadas de fundo\r\n\r\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-3 gap-4 my-6\" style={{viewTransitionName: 'bg-layers'}}>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Camada 1\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-layer1\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-layer2 border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Camada 2\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-layer2\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-6 rounded-lg bg-canvas border border-default\">\r\n \u003Cp className=\"font-medium text-default\">Canvas\u003C/p>\r\n \u003Cp className=\"text-sm text-muted mt-2\">bg-canvas\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n### Bordas\r\n\r\n\u003Cdiv className=\"space-y-4 my-6\" style={{viewTransitionName: 'border-tokens'}}>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border border-default\">\r\n \u003Cp className=\"text-default font-medium\">border-default\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border-2 border-primary\">\r\n \u003Cp className=\"text-default font-medium\">border-primary\u003C/p>\r\n\u003C/div>\r\n\r\n\u003Cdiv className=\"p-4 rounded-lg bg-layer1 border-2 border-accent\">\r\n \u003Cp className=\"text-default font-medium\">border-accent\u003C/p>\r\n\u003C/div>\r\n\r\n\u003C/div>\r\n\r\n## Sincronização e manutenção\r\n\r\nOs tokens podem ser sincronizados a partir do Figma pelos scripts em `packages/theme/scripts`. Arquivos para edição manual:\r\n\r\n- **Primitivos:** `src/tokens/primitives/colors.js`, `src/tokens/primitives/brand.js`\r\n- **Semânticos:** `src/tokens/semantic/text.js`, `src/tokens/semantic/backgrounds.js`, `src/tokens/semantic/borders.js`\r\n- **Marca:** `src/tokens/colors-brand.js`\r\n\r\nConsulte `packages/theme/src/tokens/README.md` para o fluxo completo.\r\n\r\n## Recursos relacionados\r\n\r\n\u003Cdiv className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 mb-8\">\r\n\r\n\u003CFoundationCard\r\n title=\"Cor\"\r\n description=\"Fundação de cor e como os tokens implementam o sistema de cores.\"\r\n href=\"/foundations/color\"\r\n/>\r\n\r\n\u003CFoundationCard\r\n title=\"Tipografia\"\r\n description=\"Fundamentos de tipografia e estilos de texto baseados em tokens.\"\r\n href=\"/foundations/typography\"\r\n/>\r\n\r\n\u003C/div>","src/content/v1/pt/tokens/index.mdx","b602b9c717238f8a",{"id":792,"data":1269,"body":1272,"filePath":1273,"digest":1274,"deferredRender":61},{"title":1270,"description":1271,"order":105,"category":17,"version":19,"language":886,"type":754},"Padrão de Criação com Sucesso","Exibe notificação de sucesso após criação de entidades com links para visualização e ações adicionais","\u003CCallout type=\"note\" title=\"Resumo do Padrão\">\r\nExibe uma notificação (toast) indicando o sucesso da criação de uma nova entidade no sistema. Disponibiliza um link para visualizar os detalhes da entidade criada e, opcionalmente, um botão para ação adicional relevante (ex: começar configuração).\r\n\u003C/Callout>\r\n\r\n## Sobre\r\n\r\nEste padrão define o comportamento e a apresentação visual para feedback positivo após a criação bem-sucedida de uma entidade pelo usuário. O sistema deve informar a conclusão da ação, reduzir incertezas e permitir ao usuário acessar facilmente o que foi criado.\r\n\r\n### Contexto & Problema\r\n\r\nAo criar um item (p.ex: workload, network list, digital certificate), usuários podem não ter certeza sobre o sucesso da operação. Notificações genéricas ou ausência de feedback aumentam a insegurança e dificultam encontrar rapidamente a nova entidade.\r\n\r\n### Quando Usar\r\n\r\n- Após a conclusão bem-sucedida de ações de criação (CRUD - Create).\r\n\r\n### Componentes Utilizados\r\n\r\n- **Toast** (Block Console Kit)\r\n\r\n### Exemplo Visual\r\n\r\n![Exemplo do padrão de criação com sucesso](https://console-kit-docs.azion.app/_astro/image-1.BHbpCU6q_Bfn81.webp)\r\n\r\n*Workloads > Create Workload*\r\n\r\n## Comportamento Esperado\r\n\r\n\u003CContentTabs tab1Label=\"Fluxo Principal\" tab2Label=\"Estados\" defaultTab=\"tab1\">\r\n \u003Cdiv slot=\"tab1\">\r\n 1. **Exibição de toast de sucesso:** O sistema mostra um toast (notificação temporária) afirmando que a criação foi realizada.\r\n 2. **Mensagem clara:** \"Entidade criada com sucesso!\" ou equivalente, contendo o nome da entidade.\r\n 3. **Link para visualizar:** O toast apresenta um link direto para os detalhes da nova entidade.\r\n 4. **Botão de ação opcional:** Quando aplicável, mostra um botão com ação relevante (ex: \"Iniciar configuração\").\r\n 5. **Desaparecimento automático:** O toast se fecha sozinho após alguns segundos ou pode ser fechado manualmente.\r\n \u003C/div>\r\n \u003Cdiv slot=\"tab2\">\r\n - **Sucesso:** Toast verde com ícone de check\r\n - **Ação primária:** Link destacado para visualizar\r\n - **Ação secundária:** Botão opcional para próximos passos\r\n - **Auto-dismiss:** Fechamento automático em 5-8 segundos\r\n \u003C/div>\r\n\u003C/ContentTabs>\r\n\r\n### Implementação\r\n\r\n```javascript title=\"handleToast.js\"\r\nconst handleToast = (response) => {\r\n const toast = {\r\n feedback: response.feedback,\r\n actions: {\r\n link: {\r\n label: 'View Workload',\r\n callback: () => response.redirectToUrl(response.urlToEditView)\r\n },\r\n secondary: {\r\n label: 'Copy Workload URL',\r\n icon: 'pi pi-copy',\r\n animation: {\r\n time: 3000,\r\n icon: 'pi pi-check',\r\n label: 'Copied'\r\n },\r\n callback: () => props.clipboardWrite(response.domainName)\r\n }\r\n }\r\n }\r\n response.showToastWithActions(toast)\r\n}\r\n```\r\n\r\n### Boas Práticas\r\n\r\n\u003CCallout type=\"tip\" title=\"Dicas de Implementação\">\r\n- Utilize linguagem clara, positiva e direta na mensagem\r\n- Inclua sempre o nome ou identificador da entidade criada\r\n- Garanta que o link leva diretamente ao objeto recém-criado\r\n- Mostre ações extra apenas quando houver contexto claro\r\n- Permita fechar o toast manualmente\r\n- Certifique-se de que usuários de leitores de tela também recebem o feedback\r\n\u003C/Callout>\r\n\r\n### Anti-padrões\r\n\r\n\u003CCallout type=\"caution\" title=\"O que Evitar\">\r\n- Não deixe o usuário sem feedback após criar algo\r\n- Evite mensagens genéricas (\"Sucesso!\") sem contexto ou mensagens muito longas\r\n- Não force múltiplas notificações, agrupe quando possível\r\n- Nunca apresente links ou botões \"quebrados\"\r\n\u003C/Callout>\r\n\r\n### Acessibilidade\r\n\r\n- Utilize `aria-live=\"polite\"` em componentes de toast para leitores de tela\r\n- Verifique contraste entre cores de fundo, ícone e texto\r\n- Garanta navegação por teclado até os botões de ação\r\n\r\n### Referências\r\n\r\n- [Atlassian - Success messages](https://atlassian.design/foundations/content/designing-messages/success-messages)","src/content/v1/pt/patterns/success-creation.mdx","1c599cc3c4da2dec",{"id":747,"data":1276,"body":1279,"filePath":1280,"digest":1281,"deferredRender":61},{"title":1277,"description":1278,"navLabel":1277,"order":16,"category":753,"version":19,"language":886,"type":754},"Padrões","Padrões de design e boas práticas para construir com o Azion Design System.","## Visão geral\r\n\r\nPadrões de design são soluções reutilizáveis para problemas comuns em interfaces. Eles oferecem abordagens comprovadas para desafios típicos de UX.\r\n\r\n## Padrões disponíveis\r\n\r\nA documentação de padrões está em construção. Em breve você encontrará referências detalhadas aqui.\r\n\r\n\u003CCallout type=\"info\">\r\nEsta seção incluirá padrões como validação de formulários, experiências de busca e estruturas de navegação.\r\n\u003C/Callout>","src/content/v1/pt/patterns/index.mdx","01cf8524acdbf41f",{"id":800,"data":1283,"body":1285,"filePath":1286,"digest":1287,"deferredRender":61},{"title":929,"description":1284,"navLabel":929,"order":105,"category":742,"version":19,"language":20,"type":805},"O sistema de cores fornece tokens semânticos para interfaces consistentes e acessíveis.","## Filosofia de Cores\r\n\r\nNosso sistema de cores foi projetado para ser:\r\n\r\n- **Acessível**: Todas as combinações de cores atendem aos requisitos de contraste WCAG 2.1 AA\r\n- **Semântico**: As cores são nomeadas por propósito, não por aparência\r\n- **Consistente**: Os mesmos tokens são usados em todos os componentes\r\n- **Tematizável**: As cores se adaptam automaticamente aos modos claro e escuro\r\n\r\n## Paleta primitiva\r\n\r\nEtapas de cor brutas por família. Use-as apenas ao definir novas semânticas ou quando precisar de um valor fixo; em componentes de UI, prefira tokens semânticos.\r\n\r\n\u003CPrimitivePalette />\r\n\r\n## Tokens semânticos\r\n\r\nOs tokens semânticos mapeiam para valores diferentes nos temas claro e escuro. Use-os no código dos componentes para que as cores se adaptem automaticamente.\r\n\r\n\u003CSemanticColorsTable />","src/content/v1/pt/foundations/color.mdx","fadd49095c5a3a1d"] \ No newline at end of file diff --git a/apps/ds-docs/.astro/settings.json b/apps/ds-docs/.astro/settings.json new file mode 100644 index 00000000..20c8ae7a --- /dev/null +++ b/apps/ds-docs/.astro/settings.json @@ -0,0 +1,5 @@ +{ + "_variables": { + "lastUpdateCheck": 1773156020903 + } +} \ No newline at end of file diff --git a/apps/ds-docs/.astro/types.d.ts b/apps/ds-docs/.astro/types.d.ts new file mode 100644 index 00000000..03d7cc43 --- /dev/null +++ b/apps/ds-docs/.astro/types.d.ts @@ -0,0 +1,2 @@ +/// +/// \ No newline at end of file diff --git a/apps/ds-docs/.gitignore b/apps/ds-docs/.gitignore new file mode 100644 index 00000000..3c0c0663 --- /dev/null +++ b/apps/ds-docs/.gitignore @@ -0,0 +1,6 @@ +# Build output (root .gitignore already has dist; Astro cache) +.astro/ + +# Generated at build time (do not edit — see README) +public/search-index.json +src/generated/ diff --git a/apps/ds-docs/README.md b/apps/ds-docs/README.md new file mode 100644 index 00000000..e47eea7f --- /dev/null +++ b/apps/ds-docs/README.md @@ -0,0 +1,259 @@ +# Azion Design System Documentation Platform + +A product-grade documentation platform for the Azion Design System, built with Astro and Vue. + +## Overview + +This documentation platform serves as the central hub for the Azion Design System, providing: + +- **Component Documentation**: Comprehensive docs for all Vue/Webkit components +- **Design Foundations**: Principles, tokens, and guidelines (color, typography, etc.) +- **Interactive Demos**: Live component previews with code examples +- **Playground**: Interactive component playground with prop controls +- **Search**: Full-text search over documentation (search index built at build time) +- **i18n**: Multilingual support (English and Portuguese) via `v1/en` and `v1/pt` content +- **Accessibility Guidelines**: WCAG compliance and keyboard/ARIA documentation + +## Tech Stack + +- **[Astro](https://astro.build/)** (v5): Static site generator with Islands architecture +- **[Vue 3](https://vuejs.org/)**: Interactive components via Astro integration +- **[Tailwind CSS](https://tailwindcss.com/)**: Utility-first styling +- **MDX**: Markdown with JSX for rich content +- **Shiki**: Syntax highlighting for code blocks +- **PrimeVue** (theme): UI primitives where needed +- **@aziontech/webkit**: Design system components used in demos and playground + +## Architecture + +### Key Decisions + +1. **Astro without Starlight**: Custom documentation platform for full control over layout, behavior, and components. + +2. **Islands Architecture**: Vue components are hydrated selectively: + - `client:load` for immediately interactive components + - `client:visible` for below-fold content + - `client:only` for heavy interactive features (e.g. playground, search) + +3. **Content Collections**: Documentation is in Astro Content Collections with Zod schema validation. Content is organized by version and language: `src/content/v1/en` and `src/content/v1/pt`. + +4. **Monorepo Integration**: The app consumes workspace packages: `@aziontech/icons`, `@aziontech/theme`, `@aziontech/webkit`. + +5. **Build Pipeline**: Production build runs search index generation, component API extraction, and doc scaffolding before the Astro build. + +### Directory Structure + +``` +apps/ds-docs/ +├── scripts/ # Build-time and tooling scripts +│ ├── build-search-index.ts # Generates public/search-index.json +│ ├── extractComponentApi.ts # Extracts props/slots/events from Vue/Webkit +│ ├── scaffoldComponentDocs.ts # Scaffolds/updates component MDX from webkit +│ ├── check-docs.ts # Lint (links, rules, all) +│ ├── checkComponentDocs.ts # Doc coverage checks +│ └── generateChangelog.ts # Changelog generation +│ +├── src/ +│ ├── components/ +│ │ ├── docs/ # Documentation UI (PageHeader, StatusBadge, etc.) +│ │ ├── demo/ # Demo wrappers (e.g. AzButton) +│ │ ├── playground/ # Playground Vue components and code generator +│ │ └── search/ # Search modal and engine +│ │ +│ ├── content/ +│ │ └── config.ts # Content collection schemas (Zod) +│ │ └── v1/ +│ │ ├── en/ # English: components/, foundations/, get-started/, etc. +│ │ └── pt/ # Portuguese (same structure) +│ │ +│ ├── generated/ # Generated at build time (do not edit) +│ │ ├── component-api/ # Extracted API JSON per component +│ │ ├── component-props/ # Webkit component props (for playground) +│ │ └── playground-registry.ts +│ │ +│ ├── layouts/ # BaseLayout, PatternPageLayout, etc. +│ ├── pages/ # Astro routes (components/, foundations/, pt/, etc.) +│ ├── lib/ # Utilities (content, docs, search) +│ ├── styles/ # global.css, primevue-theme.scss +│ └── integrations/ # Astro integration (e.g. search-index) +│ +├── public/ # Static assets (includes search-index.json after build) +├── astro.config.mjs +├── tailwind.config.mjs +└── package.json +``` + +## Getting Started + +### Prerequisites + +- Node.js 18+ +- pnpm 8+ + +### Installation + +```bash +# From the monorepo root +pnpm install +``` + +### Development + +```bash +# From monorepo root (if using pnpm workspaces) +pnpm --filter ds-docs run dev + +# Or from this directory +cd apps/ds-docs && pnpm dev +``` + +### Build + +The full build runs search index, API extraction, and scaffold steps, then Astro: + +```bash +# From apps/ds-docs +pnpm build + +# Preview production build +pnpm preview +``` + +Optional steps (usually run as part of `build`): + +```bash +pnpm build:search # Build search index only +pnpm build:api # Extract component API from Vue/Webkit only +pnpm build:scaffold # Scaffold/update component docs from webkit +pnpm build:scaffold:dry # Dry run with verbose output +pnpm build:api:webkit # Extract API from webkit core (../../packages/webkit/src/core) +``` + +### Lint & Checks + +```bash +pnpm lint # Lint docs (content rules) +pnpm lint:links # Check internal/external links +pnpm lint:rules # Lint rule files +pnpm lint:coverage # Check component doc coverage +pnpm check # Run all checks (lint + links + rules) +pnpm changelog # Generate changelog +``` + +## Content Authoring + +### Creating a Component Page + +1. Create a new MDX file under `src/content/v1/en/components/` (and optionally `v1/pt/components/` for Portuguese): + +```mdx +--- +title: ComponentName +description: Brief description of the component. +type: component +category: form +status: stable +since: 1.0.0 +figma: https://figma.com/... +storybook: https://storybook.azion.com/... +source: https://github.com/aziontech/webkit/... +apiFrom: ComponentName # Optional: load API from generated/component-api/ComponentName.json +--- + +## Overview + +Description of the component... + +## Examples + + + + + +## API + +Props/slots/events can be written manually or loaded via `apiFrom` from extracted API. +``` + +2. The page will be available at `/components/[slug]` (and `/pt/components/[slug]` for PT). + +### Frontmatter Schema + +Required for component pages: + +```yaml +title: string +description: string +type: component +``` + +Optional: + +```yaml +category: form | navigation | feedback | data-display | layout | utility +status: stable | beta | deprecated | planned | experimental +since: string +deprecatedIn: string +figma: string +storybook: string +source: string +related: string[] +apiFrom: string # Key for generated/component-api/.json +navLabel: string +order: number +hidden: boolean +version: string # default v1 +language: string # default en +``` + +Other content types (foundation, token, block, pattern, template, guide, icon, contributing, playground) use the same base schema with type-specific fields; see `src/content/config.ts`. + +## Documentation Components + +- **PageHeader**: Page title, status, and metadata links (Figma, Storybook, source). +- **StatusBadge**: Component status with semantic styling. +- **MetadataLinks**: Links to Figma, Storybook, source. +- **ComponentPreview / DemoPreview**: Renders demos with optional code. +- **CodeBlock**: Syntax-highlighted code with copy. +- **Playground**: Interactive playground with prop controls (see `components/playground/`). + +## Path Aliases + +Configured in `astro.config.mjs`: + +- `@` → `src` +- `@components` → `src/components` +- `@layouts` → `src/layouts` +- `@lib` → `src/lib` + +## Integration with Design System Packages + +The app depends on: + +```json +{ + "@aziontech/icons": "workspace:*", + "@aziontech/theme": "workspace:*", + "@aziontech/webkit": "workspace:*" +} +``` + +- **Icons**: Used across the docs and in demos. +- **Theme**: Tokens and SCSS partials (via `@theme-azion` alias) for PrimeVue theme. +- **Webkit**: Component demos, playground, and API extraction source. + +## Future / Roadmap + +- **Versioning**: Support for multiple doc versions (e.g. v1 vs v2) in the URL and nav. +- **Search**: Possible enhancements (filters, scoped search). +- **Playground**: More components registered and more control types. + +See the `plans/` folder in the monorepo for architecture and migration docs. + +## Contributing + +See [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines. + +## License + +MIT License - see [LICENSE](../../LICENSE) for details. diff --git a/apps/ds-docs/astro.config.mjs b/apps/ds-docs/astro.config.mjs new file mode 100644 index 00000000..dc26c046 --- /dev/null +++ b/apps/ds-docs/astro.config.mjs @@ -0,0 +1,81 @@ +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; +import tailwind from '@astrojs/tailwind'; +import mdx from '@astrojs/mdx'; +import { searchIndexIntegration } from './src/integrations/search-index'; +import { fileURLToPath } from 'node:url'; +import { dirname, resolve } from 'node:path'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const monorepoRoot = resolve(__dirname, '..', '..'); + +// https://astro.build/config +export default defineConfig({ + integrations: [ + vue({ appEntrypoint: '/src/vue-app-setup' }), + tailwind({ + applyBaseStyles: false, + }), + mdx(), + searchIndexIntegration(), + ], + + // Site configuration + site: 'https://ds.azion.com', + + // Path aliases for clean imports + vite: { + resolve: { + alias: { + '@': resolve(__dirname, 'src'), + '@components': resolve(__dirname, 'src/components'), + '@layouts': resolve(__dirname, 'src/layouts'), + '@lib': resolve(__dirname, 'src/lib'), + // Alias for icons package to ensure proper resolution from monorepo + '@aziontech/icons/catalog': resolve(monorepoRoot, 'packages/icons/dist/catalog.json'), + // SCSS alias: lets primevue-theme.scss import Azion theme partials cleanly + '@theme-azion': resolve(monorepoRoot, 'packages/theme/src/azion'), + // Pin webkit transitive deps to ds-docs local copies so Rollup/Vite can + // resolve them even when webkit source files are bundled directly. + // webkit's package.json does not declare these as explicit deps, so + // without these aliases Rollup cannot find them in the webkit directory. + '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'), + 'primevue': resolve(__dirname, 'node_modules/primevue'), + 'vee-validate': resolve(__dirname, 'node_modules/vee-validate'), + }, + }, + // Ensure woff2 font files are properly handled + assetsInclude: ['**/*.woff2'], + css: { + preprocessorOptions: { + scss: { + // Silence dart-sass deprecation warnings coming from the Azion theme + // partials (legacy @import syntax and lighten()/darken() color functions). + // These will need updating when Dart Sass 3.0 drops @import support. + silenceDeprecations: ['import', 'color-functions', 'global-builtin', 'legacy-js-api'], + }, + }, + }, + }, + + // Markdown configuration + markdown: { + shikiConfig: { + themes: { + light: 'github-light', + dark: 'github-dark', + }, + wrap: true, + // No inline background/color so .docs-code-always-dark CSS can force #171717 + defaultColor: false, + }, + }, + + // Output configuration + output: 'static', + + // Build configuration + build: { + inlineStylesheets: 'auto', + }, +}); diff --git a/apps/ds-docs/docs/changelog.md b/apps/ds-docs/docs/changelog.md new file mode 100644 index 00000000..ca59c5c2 --- /dev/null +++ b/apps/ds-docs/docs/changelog.md @@ -0,0 +1,59 @@ +# Documentation Changelog + +A record of all notable changes to the Azion Design System documentation. + +## Unreleased + +_Released: 2026-03-08_ + +### New + +#### Components + +- ✨ **Button** - Added comprehensive Button component documentation with all variants. +- ✨ **Fieldset** - Added Fieldset component documentation for form grouping. + +#### Foundations + +- ✨ **Color** - Updated color documentation with new brand colors. + +### Updated + +#### Foundations + +- 📝 **Typography** - Updated typography documentation with new font scales. + +--- + +## v1.0.0 + +_Released: 2026-01-15_ + +### New + +#### Components + +- ✨ **Button** - Initial Button component documentation. +- ✨ **Input** - Initial Input component documentation. +- ✨ **Select** - Initial Select component documentation. + +#### Foundations + +- ✨ **Color** - Initial color foundation documentation. +- ✨ **Typography** - Initial typography foundation documentation. +- ✨ **Spacing** - Initial spacing foundation documentation. + +--- + +## v0.1.0 + +_Released: 2025-12-01_ + +### New + +#### Documentation + +- ✨ **Getting Started** - Initial getting started guide. +- ✨ **Installation** - Installation instructions for the design system. + +--- diff --git a/apps/ds-docs/docs/component-docs-generation.md b/apps/ds-docs/docs/component-docs-generation.md new file mode 100644 index 00000000..83f63007 --- /dev/null +++ b/apps/ds-docs/docs/component-docs-generation.md @@ -0,0 +1,161 @@ +# Geração automática de documentação de componentes + +Este documento descreve **como funciona** e **como executar** a geração automática de páginas e artefatos de documentação a partir do pacote **webkit**. A documentação de componentes do ds-docs é derivada do código-fonte do webkit; ao adicionar ou alterar componentes lá, você pode regenerar a doc aqui. + +## Visão geral + +O fluxo automático: + +1. **Descobre** todos os componentes Vue em `packages/webkit/src/core` e `packages/webkit/src/components`. +2. **Extrai** a API (props, events, slots) de cada componente via parsing do SFC. +3. **Gera** os artefatos usados pelo ds-docs: API JSON, props do Playground, páginas MDX (EN/PT) e o registry do Playground. + +A **fonte da verdade** é o webkit. O script de scaffold **não** inventa componentes; ele apenas reflete o que existe no pacote `@aziontech/webkit` e no `package.json` (exports). + +## Como rodar + +**Pré-requisito:** executar a partir da raiz do app **ds-docs**: + +```bash +cd apps/ds-docs +``` + +### Comando principal + +```bash +pnpm build:scaffold +``` + +- Cria/atualiza **component-api**, **component-props**, **playground-registry** e **páginas MDX** (EN e PT) para todos os componentes descobertos no webkit. +- **Não sobrescreve** páginas MDX já existentes (para preservar edições manuais). Para forçar a recriação das páginas, use `--force`. + +### Opções úteis + +| Comando | Descrição | +|--------|------------| +| `pnpm build:scaffold` | Gera tudo; pula MDX que já existem (EN). Sempre regera PT. | +| `pnpm build:scaffold --force` | Igual acima, mas **sobrescreve** as páginas MDX em EN (e continua regerando PT). | +| `pnpm build:scaffold --dry-run` | Só simula: descobre componentes e extrai API, **não grava arquivos**. | +| `pnpm build:scaffold --dry-run --verbose` ou `-v` | Dry-run com lista de componentes e arquivos que seriam criados/alterados. | +| `pnpm build:scaffold:dry` | Atalho para `--dry-run --verbose`. | + +### No build completo + +O build do ds-docs já chama o scaffold: + +```bash +pnpm build +``` + +Isso executa, na ordem: + +1. `pnpm build:search` — índice de busca +2. `pnpm build:api` — extração de API (também usada pelo scaffold internamente) +3. `pnpm build:scaffold` — geração de componentes (API, props, MDX, registry) +4. `astro build` — build do site + +Ou seja: **não é necessário** rodar `build:scaffold` à mão antes de cada build, a menos que você queira pré-gerar ou testar com `--dry-run` / `--force`. + +## O que é gerado + +### 1. Component API (`src/generated/component-api/`) + +- **Um JSON por componente**, com slug como nome do arquivo (ex.: `form-field-text.json`, `azion-system-status.json`). +- Conteúdo: **props** (name, type, default, required, description), **events**, **slots**, extraídos do código Vue do webkit. +- **Uso:** layout de página de componente (ex.: `ComponentPageLayout.astro`) e abas de documentação quando o frontmatter usa `apiFrom: ""`. + +### 2. Component Props – Playground (`src/generated/component-props/`) + +- **Um JSON por componente**, no formato **PropsDefinition** do Playground (controles: select, boolean, text, number, etc.). +- **Uso:** o componente `` em cada página MDX recebe `props={componentProps}` importado de `@/generated/component-props/.json`. +- **Override:** se existir `src/generated/component-props-overrides/.json`, ele **substitui** o arquivo gerado em `component-props/` para aquele slug. Use para ajustar controles, defaults ou adicionar props apenas para o demo (ex.: `azion-system-status` com `demoStatus`). + +### 3. Páginas de documentação (MDX) + +- **EN:** `src/content/v1/en/components/.mdx` +- **PT:** `src/content/v1/pt/components/.mdx` + +Cada página gerada contém: + +- Frontmatter: `title`, `description`, `navLabel`, `type: component`, `status`, `component` (nome PascalCase), `category`, `apiFrom` (slug). +- Import do `Playground` e do JSON de props. +- Uso de ``. + +**Comportamento:** + +- **EN:** criada só se o arquivo não existir; com `--force`, é sempre sobrescrita. +- **PT:** sempre regerada a cada execução (espelho do conteúdo EN; traduções podem ser feitas depois nos arquivos PT). + +### 4. Playground Registry (`src/generated/playground-registry.ts`) + +Arquivo TypeScript que define: + +- **webkitComponentLoaders:** mapa `slug → () => import('@aziontech/webkit/...')` para uso direto (ex.: WebkitPreview). +- **webkitComponentByName:** mapa `displayName (PascalCase) → dynamic import` para o registry do `Playground.vue`. +- **webkitRegistry:** array de metadados `{ slug, exportKey, displayName, category }`. + +Apenas componentes **exportados** no `package.json` do webkit entram nos loaders; todos os descobertos entram no `webkitRegistry`. + +### 5. Components registry (`src/generated/components-registry.ts`) + +- **Não é escrito** pelo scaffold; é **derivado** em código do `webkitRegistry` (import de `playground-registry.ts`). +- Fornece a lista de componentes para ferramentas de doc (ex.: `getComponentByName`, busca). A listagem na UI vem da **content collection** (arquivos MDX), não deste registry. + +## Fluxo interno do scaffold (resumido) + +``` +1. Verificar existência de packages/webkit/src/core e/ou src/components +2. discoverWebkitComponents(core) + discoverWebkitComponents(components) + → lista de { slug, exportKey, category, vuePath, ... } +3. Ler package.json do webkit (exports) para saber quais entram no registry com import +4. extractWebkitCore(core) + extractWebkitCore(components) + → gera component-api/.json para cada componente +5. Para cada API extraída: + - Se existir component-props-overrides/.json → copiar para component-props/ + - Senão → buildPropsDefinition(props) → gravar component-props/.json +6. Para cada componente: + - EN: escrever ou pular (ou sobrescrever com --force) src/content/v1/en/components/.mdx + - PT: sempre escrever src/content/v1/pt/components/.mdx +7. buildPlaygroundRegistry(components, webkitExports) → playground-registry.ts +8. Resumo (created / skipped) +``` + +## Convenções de nomes + +- **Slug:** kebab-case, espelhando a pasta do componente no webkit (ex.: `field-text` vira `form-field-text` quando está em `form/field-text/`). +- **Display name:** PascalCase usado no Playground e no frontmatter `component` (ex.: `FieldText`, `AzionSystemStatus`). +- **Export key:** nome do export no `package.json` do webkit (ex.: `field-text`, `azion-system-status`). O import é `@aziontech/webkit/`. + +## Overrides de props do Playground + +Para um componente cujas props geradas não são ideais para o demo (ou para adicionar props só de documentação): + +1. Crie `src/generated/component-props-overrides/.json`. +2. Coloque o objeto **PropsDefinition** completo que você quer (o override **substitui** o arquivo gerado, não faz merge). +3. Na próxima execução de `pnpm build:scaffold`, esse JSON será copiado para `src/generated/component-props/.json`. + +Exemplo: `component-props-overrides/azion-system-status.json` pode definir uma prop `demoStatus` (enum) para simular o status na doc sem chamar a API real. + +## Quando rodar + +- **Após adicionar componentes no webkit:** rode `pnpm build:scaffold` no ds-docs para criar as novas páginas e entradas no registry. +- **Após alterar props/API no webkit:** rode de novo para atualizar `component-api` e `component-props` (e, se quiser, as MDX com `--force`). +- **Para só ver o que mudaria:** use `pnpm build:scaffold:dry` ou `pnpm build:scaffold --dry-run -v`. +- **Para “resetar” as páginas EN ao template mínimo:** use `pnpm build:scaffold --force` (PT continua sendo espelho do EN). + +## Scripts e arquivos relacionados + +| Item | Descrição | +|------|------------| +| `scripts/scaffoldComponentDocs.ts` | Orquestra descoberta, extração, geração de props, MDX e registry. | +| `scripts/extractComponentApi.ts` | Extrai API (props, events, slots) dos Vue SFCs; exporta `discoverWebkitComponents` e `extractWebkitCore`. | +| `src/generated/playground-registry.ts` | Gerado; não editar à mão. | +| `src/generated/component-api/*.json` | Gerados pela extração. | +| `src/generated/component-props/*.json` | Gerados ou copiados de overrides. | +| `src/generated/component-props-overrides/*.json` | Manuais; um por slug quando quiser override. | +| `src/generated/components-registry.ts` | Derivado do `webkitRegistry`; ver comentários no arquivo. | + +## Referências + +- [Component Page Architecture](./component-page-architecture.md) — estrutura das páginas de componente (tabs, Overview/Usage/API). +- [Governance](./governance.md) — lint, links, API extraction e papel do `build:api` / `build:scaffold` no pipeline de documentação. diff --git a/apps/ds-docs/docs/component-page-architecture.md b/apps/ds-docs/docs/component-page-architecture.md new file mode 100644 index 00000000..6f2b055d --- /dev/null +++ b/apps/ds-docs/docs/component-page-architecture.md @@ -0,0 +1,328 @@ +# Component Page Architecture + +This document describes the architecture of the component documentation page layout, including the tab-based content structure, content ownership model, and authoring conventions. + +## Overview + +The component documentation page has been refactored to support a clear **tab-based content structure** with three tabs: + +1. **Overview** - Component introduction, import, playground, states, anatomy, accessibility +2. **Usage** - When to use, do's and don'ts, examples +3. **API** - Props table, slots table, events table + +## Architecture + +### Component Hierarchy + +``` +ComponentPageLayout.astro +├── PageHeader.vue (title, description, status, metadata links) +├── ComponentTabs.astro +│ ├── ComponentOverviewTab.astro (slot="overview") +│ │ ├── Default slot (markdown content) +│ │ ├── AnatomyBlock (from frontmatter.anatomy) +│ │ └── AccessibilityChecklist (from frontmatter.accessibility) +│ ├── ComponentUsageTab.astro (slot="usage") +│ │ └── Structured usage data (from frontmatter.usage) +│ └── ComponentApiTab.astro (slot="api") +│ ├── PropsTable (from frontmatter.api.props) +│ ├── SlotsTable (from frontmatter.api.slots) +│ └── EventsTable (from frontmatter.api.events) +└── RelatedLinks.astro +``` + +### Content Flow + +``` +┌─────────────────────────────────────────────────────────────┐ +│ Header Area (above tabs) │ +│ ┌─────────────────────────────────────────────────────────┐│ +│ │ Title: Button ││ +│ │ Description: Buttons trigger actions and events... ││ +│ │ [Stable] [Source] [Storybook] [Figma] ││ +│ └─────────────────────────────────────────────────────────┘│ +├─────────────────────────────────────────────────────────────┤ +│ Tab Navigation │ +│ [Overview] [Usage] [API] │ +├─────────────────────────────────────────────────────────────┤ +│ Tab Content │ +│ ┌─────────────────────────────────────────────────────────┐│ +│ │ Overview Tab (default) ││ +│ │ - Overview section (markdown) ││ +│ │ - Import code snippet (markdown) ││ +│ │ - Playground (component) ││ +│ │ - States (component) ││ +│ │ - Anatomy (from frontmatter.anatomy) ││ +│ │ - Accessibility (from frontmatter.accessibility) ││ +│ └─────────────────────────────────────────────────────────┘│ +│ ┌─────────────────────────────────────────────────────────┐│ +│ │ Usage Tab ││ +│ │ - When to Use (from frontmatter.usage.whenToUse) ││ +│ │ - When Not to Use (from frontmatter.usage.whenNotToUse) ││ +│ │ - Do's and Don'ts (from frontmatter.usage.doDonts) ││ +│ │ - Examples (from frontmatter.usage.examples) ││ +│ └─────────────────────────────────────────────────────────┘│ +│ ┌─────────────────────────────────────────────────────────┐│ +│ │ API Tab ││ +│ │ - Props Table (from frontmatter.api.props) ││ +│ │ - Slots Table (from frontmatter.api.slots) ││ +│ │ - Events Table (from frontmatter.api.events) ││ +│ └─────────────────────────────────────────────────────────┘│ +├─────────────────────────────────────────────────────────────┤ +│ Related Links (below tabs) │ +│ Related: Input, Select, IconButton │ +└─────────────────────────────────────────────────────────────┘ +``` + +## Content Ownership by Tab + +### Overview Tab + +| Section | Source | Description | +|---------|--------|-------------| +| Overview | Markdown body | Component introduction and description | +| Import | Markdown body | Code snippet showing how to import | +| Playground | Markdown body | Interactive component playground | +| States | Markdown body | Visual states grid | +| Anatomy | `frontmatter.anatomy` | Structured anatomy parts | +| Accessibility | `frontmatter.accessibility` | Keyboard, ARIA, WCAG info | + +### Usage Tab + +| Section | Source | Description | +|---------|--------|-------------| +| When to Use | `frontmatter.usage.whenToUse` | List of use cases | +| When Not to Use | `frontmatter.usage.whenNotToUse` | List of anti-patterns | +| Do's and Don'ts | `frontmatter.usage.doDonts` | Structured do/don't items | +| Examples | `frontmatter.usage.examples` | Usage examples with code | + +### API Tab + +| Section | Source | Description | +|---------|--------|-------------| +| Props Table | `frontmatter.api.props` | Component props | +| Slots Table | `frontmatter.api.slots` | Component slots | +| Events Table | `frontmatter.api.events` | Component events | + +## Frontmatter Schema + +### Component Frontmatter + +```yaml +--- +# Basic metadata +title: Button +description: Buttons trigger actions and events when users interact with them. +navLabel: Button +order: 1 +type: component +category: form +status: stable +since: 1.0.0 + +# Component identifiers +component: AzButton +source: https://github.com/aziontech/webkit/tree/main/packages/components/src/Button +storybook: https://storybook.azion.com/components/button +figma: https://figma.com/file/azion-design-system/components/button + +# Related components +related: + - Input + - Select + - IconButton + +# Tags for search +tags: + - action + - form + - interactive + +# Anatomy (Overview tab) +anatomy: + - label: Container + description: The clickable area with background styling and border + - label: Label + description: The text content describing the action + +# Accessibility (Overview tab) +accessibility: + keyboard: + - keys: Tab + action: Moves focus to the button + - keys: Enter + action: Activates the button when focused + aria: + - attribute: aria-disabled="true" + usage: Use instead of disabled attribute for screen readers + wcag: + - "2.1.1 Keyboard" + - "4.1.2 Name, Role, Value" + +# Usage guidelines (Usage tab) +usage: + whenToUse: + - Trigger primary actions (Submit, Save, Continue) + - Navigate to different views or pages + - Toggle states or settings + whenNotToUse: + - Navigation to external links (use a link instead) + - Displaying static content (use text or labels) + doDonts: + - type: do + description: Use buttons for actionable items + example: 'Submit Form' + - type: dont + description: Don't use buttons for navigation + example: 'Go to Docs' + examples: + - title: Primary Button + description: The default button style for primary actions + code: 'Primary Button' + +# API documentation (API tab) +api: + props: + - name: variant + type: "'primary' | 'secondary' | 'destructive' | 'ghost'" + default: "'primary'" + required: false + description: Visual style variant of the button + slots: + - name: default + description: Button label content + events: + - name: click + payload: "MouseEvent" + description: Fired when button is clicked +--- +``` + +## Authoring Model + +### Recommended Approach + +1. **Overview Content** - Write in markdown body + - Component introduction + - Import code snippet + - Playground component + - States visualization + +2. **Usage Content** - Use structured frontmatter + - `usage.whenToUse` - List of use cases + - `usage.whenNotToUse` - List of anti-patterns + - `usage.doDonts` - Structured do/don't items + - `usage.examples` - Usage examples with code + +3. **API Content** - Use structured frontmatter + - `api.props` - Component props + - `api.slots` - Component slots + - `api.events` - Component events + +4. **Anatomy & Accessibility** - Use structured frontmatter + - `anatomy` - Component parts + - `accessibility` - Keyboard, ARIA, WCAG info + +### Why Structured Frontmatter? + +Using structured frontmatter for Usage and API content provides: + +1. **Consistent rendering** - Content always appears in the correct tab and order +2. **Type safety** - Schema validation ensures correct data structure +3. **Automation ready** - API documentation can be generated from component source +4. **Searchability** - Structured data is easier to index and search +5. **Maintainability** - Clear separation of concerns + +### Markdown Body vs Frontmatter + +| Content Type | Location | Reason | +|--------------|----------|--------| +| Overview prose | Markdown body | Rich formatting, flexibility | +| Import snippet | Markdown body | Code highlighting | +| Playground | Markdown body | Component embedding | +| States | Markdown body | Visual customization | +| Anatomy | Frontmatter | Structured data, consistent rendering | +| Accessibility | Frontmatter | Structured data, consistent rendering | +| Usage guidelines | Frontmatter | Consistent tab placement | +| API docs | Frontmatter | Can be auto-generated | + +## Tab System Features + +### URL Hash Sync + +The tab system supports deep linking via URL hash fragments: + +- `/components/button` - Opens Overview tab (default) +- `/components/button#usage` - Opens Usage tab +- `/components/button#api` - Opens API tab + +### Keyboard Navigation + +The tab system supports keyboard navigation: + +- `Tab` - Move focus to active tab +- `Left/Right Arrow` - Navigate between tabs +- `Home` - Jump to first tab +- `End` - Jump to last tab +- `Enter/Space` - Activate focused tab + +### ARIA Attributes + +The tab system uses proper ARIA attributes: + +- `role="tablist"` - Tab list container +- `role="tab"` - Tab buttons +- `role="tabpanel"` - Tab content panels +- `aria-selected` - Indicates active tab +- `aria-controls` - Links tab to panel +- `tabindex` - Focus management + +## File Structure + +``` +apps/ds-docs/src/ +├── components/docs/ +│ ├── ComponentTabs.astro # Tab container with 3 fixed tabs +│ ├── ComponentOverviewTab.astro # Overview tab content +│ ├── ComponentUsageTab.astro # Usage tab content +│ ├── ComponentApiTab.astro # API tab content +│ ├── AnatomyBlock.astro # Anatomy section renderer +│ ├── AccessibilityChecklist.astro # Accessibility section renderer +│ ├── PropsTable.astro # Props table renderer +│ ├── SlotsTable.astro # Slots table renderer +│ └── EventsTable.astro # Events table renderer +├── layouts/ +│ └── ComponentPageLayout.astro # Main component page layout +├── pages/components/ +│ └── [slug].astro # Dynamic component page routing +└── content/v1/en/components/ + └── button.mdx # Example component documentation +``` + +## Trade-offs + +### Why Not Use Named Slots for All Tabs? + +**Problem**: MDX Fragment slots don't propagate through Astro's Content component to nested layouts. + +**Solution**: Use structured frontmatter for Usage and API content, which guarantees correct tab placement regardless of markdown authoring order. + +### Why Keep Markdown for Overview? + +**Reason**: Overview content benefits from rich markdown formatting (headings, paragraphs, code blocks, imported components). Structured frontmatter would be too restrictive for this content. + +### Why Separate Anatomy/Accessibility from Overview Markdown? + +**Reason**: +1. Consistent rendering across all component pages +2. Structured data is easier to validate and query +3. Can be used for automated documentation generation +4. Clear separation between prose and structured data + +## Future Enhancements + +1. **Auto-generated API docs** - Extract API documentation from component source code +2. **Usage examples from Storybook** - Pull examples from Storybook stories +3. **Accessibility testing** - Automated accessibility validation +4. **Search integration** - Index structured frontmatter for better search +5. **i18n support** - Translate structured content diff --git a/apps/ds-docs/docs/governance.md b/apps/ds-docs/docs/governance.md new file mode 100644 index 00000000..e192a9fe --- /dev/null +++ b/apps/ds-docs/docs/governance.md @@ -0,0 +1,330 @@ +# Documentation Governance and Automation System + +This document describes the governance and automation system implemented for the Azion Design System documentation platform. + +## Overview + +The documentation governance system ensures that documentation remains consistent, scalable, and maintainable as the design system evolves. It provides automated quality checks that run during development and CI to catch issues early. + +## Architecture + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ Documentation Governance │ +├─────────────────────────────────────────────────────────────────┤ +│ │ +│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────┐ │ +│ │ Frontmatter │ │ Link │ │ Content Rules │ │ +│ │ Validation │ │ Checker │ │ Enforcement │ │ +│ └──────┬───────┘ └──────┬───────┘ └───────────┬──────────┘ │ +│ │ │ │ │ +│ ┌──────┴─────────────────┴───────────────────────┴──────────┐ │ +│ │ Documentation Linter │ │ +│ └────────────────────────────┬───────────────────────────────┘ │ +│ │ │ +│ ┌────────────────────────────┴───────────────────────────────┐ │ +│ │ CI Pipeline │ │ +│ │ • Lint • Links • Coverage • API Extraction • Build │ │ +│ └────────────────────────────────────────────────────────────┘ │ +│ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +## Components + +### 1. Frontmatter Validation + +**Location:** [`src/lib/docs/validateFrontmatter.ts`](../src/lib/docs/validateFrontmatter.ts) + +Validates that all documentation pages include required frontmatter fields. + +**Required Fields:** +- `title` - Page title +- `description` - Page description +- `section` - Documentation section (components, foundations, etc.) +- `version` - Documentation version +- `language` - Content language + +**Recommended Fields:** +- `tags` - Search/categorization tags +- `status` - Component status (stable, beta, deprecated, etc.) +- `related` - Related component names + +**Usage:** +```typescript +import { validateFrontmatter } from '@/lib/docs'; + +const result = validateFrontmatter(frontmatter, { + strictTypes: true, + warnRecommended: true, +}); + +if (!result.valid) { + console.error('Validation failed:', result.errors); +} +``` + +### 2. Documentation Lint System + +**Location:** [`src/lib/docs/docLint.ts`](../src/lib/docs/docLint.ts) + +Comprehensive linter for documentation quality checks. + +**Checks:** +- Missing frontmatter +- Duplicate titles across files +- Duplicate slugs (URL conflicts) +- Missing descriptions +- Short descriptions +- Missing tags + +**Usage:** +```bash +pnpm lint +``` + +### 3. Link Checker + +**Location:** [`src/lib/docs/linkChecker.ts`](../src/lib/docs/linkChecker.ts) + +Scans documentation for broken links. + +**Link Types:** +- Internal links (to other docs pages) +- Anchor links (to sections within the same page) +- Component links (to component documentation) +- Asset links (images, files) +- External links (optional checking) + +**Usage:** +```bash +pnpm lint:links +``` + +### 4. Component Documentation Coverage + +**Location:** [`scripts/checkComponentDocs.ts`](../scripts/checkComponentDocs.ts) + +Verifies that all components have corresponding documentation. + +**Checks:** +- Components in `src/components` have matching docs in `src/content` +- Documentation exists in all required languages +- Reports undocumented components + +**Usage:** +```bash +pnpm lint:coverage +``` + +### 5. API Extraction + +**Location:** [`scripts/extractComponentApi.ts`](../scripts/extractComponentApi.ts) + +Automatically extracts component API information from Vue components. + +**Extracts:** +- Props (name, type, default, required, description) +- Events (name, payload type, description) +- Slots (name, description) + +**Output:** JSON files in `src/generated/component-api/` + +**Usage:** +```bash +pnpm build:api +``` + +**See also:** [Component docs generation](./component-docs-generation.md) — geração automática de páginas e registry a partir do webkit (`pnpm build:scaffold`). + +**Example Output:** +```json +{ + "component": "Button", + "props": [ + { + "name": "variant", + "type": "'primary' | 'secondary' | 'outline'", + "default": "'primary'", + "required": false, + "description": "Visual style variant" + } + ], + "events": [...], + "slots": [...] +} +``` + +### 6. Content Rules + +**Location:** [`src/lib/docs/contentRules.ts`](../src/lib/docs/contentRules.ts) + +Enforces documentation structure rules. + +**Required Sections (for components):** +- Overview +- Examples + +**Recommended Sections:** +- Accessibility +- API +- When to Use + +**Special Rules:** +- Deprecated components must have migration guidance +- Beta components should have stability notice + +**Usage:** +```bash +pnpm lint:rules +``` + +### 7. Changelog Generator + +**Location:** [`scripts/generateChangelog.ts`](../scripts/generateChangelog.ts) + +Generates documentation changelog. + +**Categories:** +- New components +- Updated components +- Deprecated components +- Token changes +- Foundation updates + +**Output:** [`docs/changelog.md`](./changelog.md) + +**Usage:** +```bash +pnpm changelog +``` + +### 8. CI Pipeline + +**Location:** [`.github/workflows/docs.yml`](../../.github/workflows/docs.yml) + +Automated checks running on every push and pull request. + +**Jobs:** +1. **Lint** - Frontmatter and content validation +2. **Link Check** - Broken link detection +3. **Component Docs** - Coverage check +4. **API Extraction** - Generate component API metadata +5. **Build** - Verify documentation builds successfully +6. **Preview** - Deploy preview for pull requests + +### 9. Analytics Hooks + +**Location:** [`src/lib/docs/analytics.ts`](../src/lib/docs/analytics.ts) + +Prepared hooks for analytics integration. + +**Trackable Events:** +- Page views +- Search queries +- Search result clicks +- Component views +- Code copies +- Link clicks +- Feedback submissions +- Version/language switches + +**Usage:** +```typescript +import { useAnalytics } from '@/lib/docs'; + +const analytics = useAnalytics(); +analytics.trackPageView({ path: '/components/button', title: 'Button' }); +``` + +### 10. Component Registry + +**Location:** [`src/generated/components-registry.ts`](../src/generated/components-registry.ts) + +Central registry of documented components. + +**Structure:** +```typescript +{ + name: 'Button', + status: 'stable', + category: 'actions', + documentation: '/components/button', + description: 'Primary action trigger', + tags: ['action', 'interactive', 'form'] +} +``` + +**Usage:** +```typescript +import { getComponentByName, getStableComponents } from '@/generated/components-registry'; + +const button = getComponentByName('Button'); +const stable = getStableComponents(); +``` + +## NPM Scripts + +| Script | Description | +|--------|-------------| +| `pnpm lint` | Run documentation lint | +| `pnpm lint:links` | Check for broken links | +| `pnpm lint:rules` | Check content rules | +| `pnpm lint:coverage` | Check component documentation coverage | +| `pnpm check` | Run all checks | +| `pnpm build:api` | Extract component APIs | +| `pnpm changelog` | Generate changelog | + +## Best Practices + +### Writing Documentation + +1. **Always include frontmatter** - Every page needs title, description, section, version, and language +2. **Use descriptive titles** - Unique, clear titles for each page +3. **Write meaningful descriptions** - At least 20 characters, summarize the content +4. **Add relevant tags** - Improve searchability +5. **Include required sections** - Overview, Examples, Accessibility for components + +### Component Documentation + +1. **Document all components** - Every component needs documentation +2. **Keep API in sync** - Use extracted API data for PropsTable, EventsTable, SlotsTable +3. **Include examples** - Show common usage patterns +4. **Document accessibility** - Keyboard interactions and ARIA attributes + +### Maintenance + +1. **Run checks locally** - Use `pnpm check` before committing +2. **Fix errors immediately** - CI will fail on documentation errors +3. **Update changelog** - Document significant changes +4. **Review coverage reports** - Ensure all components are documented + +## Error Handling + +The governance system distinguishes between: + +- **Errors** - Must be fixed before merge (missing required fields, broken links) +- **Warnings** - Should be addressed but don't block merge (missing recommended fields) +- **Info** - Suggestions for improvement (missing tags) + +## Future Enhancements + +1. **Git Integration** - Automatic changelog from commit history +2. **External Link Checking** - Verify external links periodically +3. **Screenshot Testing** - Visual regression testing for component examples +4. **Performance Metrics** - Track documentation load times +5. **Search Analytics** - Integrate with search provider for query analysis + +## Related Files + +- [`src/lib/docs/validateFrontmatter.ts`](../src/lib/docs/validateFrontmatter.ts) - Frontmatter validation +- [`src/lib/docs/docLint.ts`](../src/lib/docs/docLint.ts) - Documentation linter +- [`src/lib/docs/linkChecker.ts`](../src/lib/docs/linkChecker.ts) - Link checker +- [`src/lib/docs/contentRules.ts`](../src/lib/docs/contentRules.ts) - Content rules +- [`src/lib/docs/analytics.ts`](../src/lib/docs/analytics.ts) - Analytics hooks +- [`scripts/checkComponentDocs.ts`](../scripts/checkComponentDocs.ts) - Coverage checker +- [`scripts/extractComponentApi.ts`](../scripts/extractComponentApi.ts) - API extraction +- [`scripts/scaffoldComponentDocs.ts`](../scripts/scaffoldComponentDocs.ts) - Component docs scaffold (see [component-docs-generation.md](./component-docs-generation.md)) +- [`scripts/generateChangelog.ts`](../scripts/generateChangelog.ts) - Changelog generator +- [`scripts/check-docs.ts`](../scripts/check-docs.ts) - Unified check script +- [`.github/workflows/docs.yml`](../../.github/workflows/docs.yml) - CI pipeline diff --git a/apps/ds-docs/docs/i18n-versioning-architecture.md b/apps/ds-docs/docs/i18n-versioning-architecture.md new file mode 100644 index 00000000..124868a8 --- /dev/null +++ b/apps/ds-docs/docs/i18n-versioning-architecture.md @@ -0,0 +1,463 @@ +# Internationalization (i18n) and Documentation Versioning Architecture + +> This document describes the architecture for supporting multiple languages and versions in the Azion Design System Documentation Platform. + +--- + +## Overview + +The documentation platform supports: + +- **Multiple languages**: English (default), Portuguese (future) +- **Multiple versions**: v1 (current), future versions like v2 +- **Stable URLs**: URLs remain consistent across versions and languages +- **Graceful fallbacks**: Missing translations fall back to English + +--- + +## 1. URL Structure + +### URL Patterns + +The documentation uses a stable URL structure: + +``` +/docs/{version}/{language}/{section}/{page} +``` + +#### Examples + +| URL | Version | Language | Section | Page | +|-----|---------|----------|---------|------| +| `/components/button` | v1 (current) | en (default) | components | button | +| `/foundations/color` | v1 (current) | en (default) | foundations | color | +| `/pt/components/button` | v1 (current) | pt | components | button | +| `/v1/en/components/button` | v1 | en | components | button | +| `/v1/pt/components/button` | v1 | pt | components | button | +| `/v2/components/button` | v2 | en (default) | components | button | + +### Short URLs + +For the **default language (English)** and **current version**, URLs are shortened: + +``` +/components/button → v1, en, components, button +/foundations/color → v1, en, foundations, color +``` + +### Full URLs + +For **non-default languages** or **older versions**, full URLs are used: + +``` +/pt/components/button → v1, pt, components, button +/v1/pt/components/button → v1, pt, components, button +``` + +--- + +## 2. Configuration Files + +### Version Configuration + +**File**: [`src/config/docs-versions.ts`](../src/config/docs-versions.ts) + +```typescript +export const DOCS_VERSIONS: DocsVersionConfig = { + current: 'v1', + versions: ['v1'], + labels: { + v1: 'Latest', + }, +}; +``` + +#### Helper Functions + +| Function | Description | +|----------|-------------| +| `getCurrentVersion()` | Returns the current version identifier | +| `isValidVersion(version)` | Checks if a version is valid | +| `isCurrentVersion(version)` | Checks if a version is the current one | +| `getAllVersions()` | Returns all available versions | +| `getVersionLabel(version)` | Returns the display label for a version | + +### Language Configuration + +**File**: [`src/config/docs-languages.ts`](../src/config/docs-languages.ts) + +```typescript +export const DOCS_LANGUAGES: DocsLanguageConfig = { + default: 'en', + supported: ['en', 'pt'], + labels: { + en: 'English', + pt: 'Português', + }, +}; +``` + +#### Helper Functions + +| Function | Description | +|----------|-------------| +| `getDefaultLanguage()` | Returns the default language code | +| `isSupportedLanguage(lang)` | Checks if a language is supported | +| `isDefaultLanguage(lang)` | Checks if a language is the default | +| `getAllLanguages()` | Returns all supported languages | +| `getLanguageLabel(lang)` | Returns the native name for a language | + +--- + +## 3. Content Directory Structure + +### Current Structure (Flat) + +``` +src/content/ +├── components/ +│ ├── button.mdx +│ └── fieldset.mdx +├── foundations/ +│ └── color.md +└── ... +``` + +### Future Structure (Versioned & Localized) + +``` +src/content/docs/ +├── v1/ +│ ├── en/ +│ │ ├── get-started/ +│ │ ├── foundations/ +│ │ ├── tokens/ +│ │ ├── components/ +│ │ ├── patterns/ +│ │ ├── templates/ +│ │ └── icons/ +│ └── pt/ +│ ├── get-started/ +│ ├── foundations/ +│ ├── components/ +│ └── ... +└── v2/ + ├── en/ + └── pt/ +``` + +### Migration Strategy + +1. **Phase 1**: Keep flat structure, add version/language to frontmatter +2. **Phase 2**: Restructure content into version/language folders +3. **Phase 3**: Update content collections to use new structure + +--- + +## 4. Content Collection Schema + +### Updated Frontmatter + +```yaml +--- +title: Button +description: Trigger actions across the interface +version: v1 +language: en +section: components +status: stable +tags: + - action + - form +translatedFrom: en # For translations +translationStatus: complete # complete | partial | missing +--- +``` + +### Schema Definition + +**File**: [`src/content/config.ts`](../src/content/config.ts) + +```typescript +const baseSchema = z.object({ + // ... existing fields + version: z.string().default('v1'), + language: z.string().default('en'), + translatedFrom: z.string().optional(), + translationStatus: z.enum(['complete', 'partial', 'missing']).optional(), +}); +``` + +--- + +## 5. Content Resolution + +### Resolution Logic + +**File**: [`src/lib/docs/resolveDoc.ts`](../src/lib/docs/resolveDoc.ts) + +```typescript +const result = await resolveDoc({ + version: 'v1', + language: 'pt', + section: 'components', + slug: 'button' +}); +``` + +### Fallback Behavior + +When a translation doesn't exist, the system falls back to English: + +``` +User visits: /pt/components/button +If Portuguese page exists → Serve Portuguese content +If not → Serve English content with isFallback: true +``` + +### Resolution Result + +```typescript +interface ResolvedDoc { + version: string; + language: string; + section: Section; + slug: string; + url: string; + canonicalUrl: string; + isIndex: boolean; + isFallback: boolean; // True if fell back to English + requestedLanguage?: string; // Original requested language + entry: unknown; + frontmatter: Record; +} +``` + +--- + +## 6. Switcher Components + +### Version Switcher + +**File**: [`src/components/docs/VersionSwitcher.vue`](../src/components/docs/VersionSwitcher.vue) + +- Shows available versions +- Highlights current version +- Maintains same page when switching (if exists) +- Falls back to section index if page doesn't exist in target version + +### Language Switcher + +**File**: [`src/components/docs/LanguageSwitcher.vue`](../src/components/docs/LanguageSwitcher.vue) + +- Shows available languages +- Maintains same page when switching +- Falls back to English if translation missing + +### Version Banner + +**File**: [`src/components/docs/DocsVersionBanner.vue`](../src/components/docs/DocsVersionBanner.vue) + +- Shows when viewing an older version +- Provides link to latest version +- Dismissible by user + +--- + +## 7. Search Engine Integration + +### Updated Search Index + +```typescript +interface SearchIndexEntry { + id: string; // Format: "{version}-{language}-{section}-{slug}" + version: string; + language: string; + // ... other fields +} +``` + +### Search Filtering + +Search results are filtered by: + +- Current language +- Current version + +```typescript +const results = searchEngine.search('button', { + language: 'en', + version: 'v1' +}); +``` + +--- + +## 8. Canonical URLs & SEO + +### Canonical URL Logic + +**File**: [`src/lib/docs/canonical.ts`](../src/lib/docs/canonical.ts) + +Canonical URLs always point to: + +- Current version +- Same language (or default if English) + +```typescript +// English page +getCanonicalUrl({ + version: 'v1', + language: 'en', + section: 'components', + slug: 'button' +}); +// → https://docs.azion.com/components/button + +// Portuguese page +getCanonicalUrl({ + version: 'v1', + language: 'pt', + section: 'components', + slug: 'button' +}); +// → https://docs.azion.com/pt/components/button +``` + +### hreflang Tags + +```html + + + +``` + +--- + +## 9. Routing Architecture + +### Current Routes + +``` +/pages/ +├── components/[slug].astro +├── foundations/[slug].astro +├── tokens/[slug].astro +└── ... +``` + +### Future Unified Route + +``` +/pages/ +└── docs/[...path].astro +``` + +This catch-all route handles: + +1. Parse URL to extract version, language, section, slug +2. Resolve content using `resolveDoc()` +3. Handle fallbacks +4. Render with SEO metadata + +--- + +## 10. Adding a New Version + +### Step 1: Update Configuration + +```typescript +// src/config/docs-versions.ts +export const DOCS_VERSIONS = { + current: 'v2', + versions: ['v2', 'v1'], + labels: { + v2: 'Latest', + v1: 'Legacy', + }, +}; +``` + +### Step 2: Create Content Directory + +```bash +mkdir -p src/content/docs/v2/en +mkdir -p src/content/docs/v2/pt +``` + +### Step 3: Copy and Evolve Content + +```bash +cp -r src/content/docs/v1/en/* src/content/docs/v2/en/ +``` + +### Step 4: Update Frontmatter + +Update version field in all v2 content files. + +--- + +## 11. Adding a New Language + +### Step 1: Update Configuration + +```typescript +// src/config/docs-languages.ts +export const DOCS_LANGUAGES = { + default: 'en', + supported: ['en', 'pt', 'es'], + labels: { + en: 'English', + pt: 'Português', + es: 'Español', + }, +}; +``` + +### Step 2: Create Content Directory + +```bash +mkdir -p src/content/docs/v1/es +``` + +### Step 3: Translate Content + +Copy English content and translate. + +--- + +## 12. Engineering Principles + +1. **URLs must remain stable**: Once published, URLs should not change +2. **Default language has shortest URLs**: English uses `/section/page` format +3. **Translations gracefully fallback**: Missing translations show English content +4. **Versioning doesn't break navigation**: Switching versions maintains context +5. **Content is easy to maintain**: Clear structure for writers +6. **No unnecessary runtime complexity**: Most logic is build-time + +--- + +## 13. File Reference + +| File | Purpose | +|------|---------| +| [`src/config/docs-versions.ts`](../src/config/docs-versions.ts) | Version configuration | +| [`src/config/docs-languages.ts`](../src/config/docs-languages.ts) | Language configuration | +| [`src/lib/docs/resolveDoc.ts`](../src/lib/docs/resolveDoc.ts) | Content resolution | +| [`src/lib/docs/canonical.ts`](../src/lib/docs/canonical.ts) | SEO utilities | +| [`src/components/docs/VersionSwitcher.vue`](../src/components/docs/VersionSwitcher.vue) | Version switcher UI | +| [`src/components/docs/LanguageSwitcher.vue`](../src/components/docs/LanguageSwitcher.vue) | Language switcher UI | +| [`src/components/docs/DocsVersionBanner.vue`](../src/components/docs/DocsVersionBanner.vue) | Version banner | +| [`src/content/config.ts`](../src/content/config.ts) | Content schema | +| [`src/lib/search/types.ts`](../src/lib/search/types.ts) | Search types | +| [`src/lib/search/searchEngine.ts`](../src/lib/search/searchEngine.ts) | Search engine | + +--- + +## 14. Future Considerations + +- **Content Translation Workflow**: Integration with translation management systems +- **Automated Translation Status**: Track translation completeness +- **Version Diff**: Show differences between versions +- **Migration Guides**: Auto-generate migration guides between versions +- **Language-specific Search**: Separate search indices per language diff --git a/apps/ds-docs/docs/icon-integration-architecture.md b/apps/ds-docs/docs/icon-integration-architecture.md new file mode 100644 index 00000000..61d603bf --- /dev/null +++ b/apps/ds-docs/docs/icon-integration-architecture.md @@ -0,0 +1,351 @@ +# Icon Integration Architecture + +This document describes the architecture and implementation of the `@aziontech/icons` integration into the Azion Design System documentation platform. + +## Overview + +The icon integration provides a scalable, accessible, and maintainable way to use icons throughout the documentation platform. It serves as the foundation for: + +1. **Icon usage in documentation components** - Header, sidebar, callouts, etc. +2. **Icon gallery page** - A dedicated `/icons` page for browsing and discovering icons +3. **Future icon documentation** - Extensible architecture for enhanced icon features + +## Package Analysis + +### `@aziontech/icons` Package Structure + +The `@aziontech/icons` package is a dual icon font library: + +| Font | Prefix | Icons | Description | +|------|--------|-------|-------------| +| **azionicons** | `ai` | 87 | Azion product, platform, and ecosystem icons | +| **primeicons** | `pi` | 315 | General-purpose UI icons (PrimeIcons set) | + +### Package Exports + +```js +// Main CSS import (both icon sets) +import '@aziontech/icons'; + +// Individual icon sets +import '@aziontech/icons/azionicons'; +import '@aziontech/icons/primeicons'; + +// Icon catalog (JSON metadata) +import iconsCatalog from '@aziontech/icons/catalog.json'; +``` + +### Catalog Structure + +The `catalog.json` provides basic icon metadata: + +```json +[ + { + "icon": "ai ai-azion", + "keywords": "", + "name": "ai-azion" + } +] +``` + +## Integration Architecture + +### 1. CSS Import + +Icons are imported globally in `DocsLayout.astro`: + +```astro +import '@aziontech/icons'; +``` + +This loads both `azionicons.css` and `primeicons.css`, which include: +- `@font-face` declarations for woff2 fonts +- Base icon class styles (`.ai`, `.pi`) +- Individual icon class rules (`.ai-azion::before`, etc.) + +### 2. Icon Registry + +The icon registry (`src/data/icons-registry.ts`) provides: + +- **Normalized IconEntry interface** - Consistent structure for all icons +- **Category mapping** - Logical grouping for Azion icons +- **Keyword enrichment** - Enhanced searchability +- **Utility functions** - Search, filter, and retrieve icons + +```typescript +interface IconEntry { + name: string; // "azion" + fullName: string; // "ai-azion" + prefix: 'ai' | 'pi'; + className: string; // "ai ai-azion" + keywords: string[]; + category: IconCategory; +} +``` + +### 3. Icon usage (direct from library) + +**Note:** The `DocsIcon.vue` component was removed. Icons are used directly from `@aziontech/icons`: + +- **PrimeIcons:** `