fluentui-svelte 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,117 @@
+import type { AriaAttributes, SvelteHTMLElements } from 'svelte/elements';
+import type { Component } from 'svelte';
+export type NoUndefinedField<T> = {
+    [P in keyof T]-?: P extends Record<P, infer V> ? NoUndefinedField<NonNullable<V>> : NonNullable<T[P]>;
+};
+/** Omits all keys from `T` whose name starts with the prefix `K`. */
+export type OmitByWord<T, K extends string> = {
+    [P in keyof T as P extends `${K}${string}` ? never : P]: T[P];
+};
+/** Picks only the keys from `T` whose name starts with the prefix `K`. */
+export type PickByWord<T, K extends string> = {
+    [P in keyof T as P extends `${K}${string}` ? P : never]: T[P];
+};
+export type Sizes = 'small' | 'medium' | 'large';
+export type Shapes = 'circular' | 'rounded' | 'square';
+export type Appearances = 'accent' | 'standard' | 'subtle';
+export type Variants = 'filled' | 'outline' | 'ghost' | 'tint';
+export type Colors = 'information' | 'attention' | 'warning' | 'success' | 'critical';
+export type BeforeOrAfter = 'before' | 'after';
+export type ActiveOrInactive = 'active' | 'inactive';
+export type Statuses = 'available' | 'busy' | 'offline' | 'away' | 'do-not-disturb' | 'out-of-office' | 'unknown' | 'blocked';
+export type ProgressStatus = 'paused' | 'error';
+export type YAxis = 'top' | 'bottom';
+export type XAxis = 'left' | 'right';
+export type YDirection = 'up' | 'middle' | 'down';
+export type XDirection = 'start' | 'center' | 'end';
+export type EASING = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+export type THEME = 'light' | 'dark' | 'system';
+/** Props for a polymorphic component that can render different HTML elements.
+ * This remove "on:" and "aria" attributes due to "Expression produces a union type that is too complex to represent." error when using SvelteHTMLElements type.
+ * Then we add the AriaAttributes back and we no longer have the error
+ * @see https://github.com/sveltejs/svelte/issues/16046
+ * @see https://github.com/sveltejs/svelte/issues/16839
+ */
+export type PolymorphicProps<T extends keyof SvelteHTMLElements> = OmitByWord<SvelteHTMLElements[T], 'on:' | 'aria'> & AriaAttributes;
+/** Library maturity/status shown as a badge in the navigation. Not part of SEO/GEO. */
+export type ComponentStatus = 'New' | 'Beta' | 'WIP' | 'AI' | 'Experimental' | 'Prototype' | 'Empty';
+/** Open Graph metadata (https://ogp.me). Used to build `<meta property="og:*">` tags. */
+export type OpenGraphMeta = {
+    /** Overrides `Meta.title` for social shares. */
+    title?: string;
+    /** Overrides `Meta.description` for social shares. */
+    description?: string;
+    /** Open Graph object type, e.g. `website` or `article`. */
+    type?: 'website' | 'article' | (string & {});
+    /** Canonical URL of the page as shared. */
+    url?: string;
+    /** Absolute URL of the preview image. */
+    image?: string;
+    /** Alternative text describing `image`. */
+    imageAlt?: string;
+    /** Name of the overall site. */
+    siteName?: string;
+};
+/** Twitter/X card metadata. Used to build `<meta name="twitter:*">` tags. */
+export type TwitterMeta = {
+    card?: 'summary' | 'summary_large_image' | 'app' | 'player';
+    /** Overrides `Meta.title` for the card. */
+    title?: string;
+    /** Overrides `Meta.description` for the card. */
+    description?: string;
+    /** Absolute URL of the card image. */
+    image?: string;
+    /** Alternative text describing `image`. */
+    imageAlt?: string;
+    /** `@handle` of the website. */
+    site?: string;
+    /** `@handle` of the content author. */
+    creator?: string;
+};
+/** A single question/answer pair used for GEO grounding and FAQ structured data. */
+export type FaqEntry = {
+    question: string;
+    answer: string;
+};
+/** Search Engine Optimization metadata. */
+export type SeoMeta = {
+    /** Page title. Used for `<title>` and as the default OG/Twitter title. */
+    title: string;
+    /** Meta description. Used as the default OG/Twitter description. */
+    description: string;
+    /** Keywords describing the page. */
+    keywords: string[];
+    /** Absolute canonical URL of the page. */
+    canonical?: string;
+    /** Robots directive, e.g. `index, follow`. */
+    robots?: string;
+    /** Content locale, e.g. `en_US`. Used for `<meta property="og:locale">` and JSON-LD `inLanguage`. */
+    locale?: string;
+    openGraph?: OpenGraphMeta;
+    twitter?: TwitterMeta;
+};
+/**
+ * Metadata for a documentation page.
+ * Combines SEO + GEO fields with a couple of library-specific fields.
+ * `status` and `icon` are exclusive to this library (navigation badge + icon) and are unrelated to SEO/GEO.
+ */
+export type Meta = SeoMeta & {
+    /** URL slug for the component page (`/docs/components/{slug}`). */
+    slug: string;
+    /** Library maturity/status badge. Not part of SEO/GEO. */
+    status: ComponentStatus | (string & {});
+    /** Navigation icon. Not part of SEO/GEO. */
+    icon?: Component;
+};
+/** Documentation structure for a component configuration page. */
+export type ConfigDocs = {
+    meta: Meta;
+    /** Intro of the page: title, description and basic usage. */
+    docs: Component;
+    /** Usage examples covering the most important props. */
+    examples: Component[];
+    /** End of the page. The first element must be the component props table; extra info may follow. */
+    footer: Component;
+    /** Raw Markdown context for AI agents (union of docs/examples/footer, i18n resolved to English, no Svelte). */
+    llms: string;
+};

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,142 @@
+{
+	"name": "fluentui-svelte",
+	"version": "0.1.0",
+	"description": "Modern Fluent UI 2 Components for Svelte 5",
+	"author": {
+		"name": "Jorge Acosta",
+		"url": "https://github.com/JLAcostaEC"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/JLAcostaEC/fluentui-svelte.git"
+	},
+	"license": "MIT",
+	"keywords": [
+		"svelte",
+		"fluent",
+		"fluent-ui",
+		"fluentui",
+		"components",
+		"fluentui-components",
+		"svelte-components",
+		"svelte-5",
+		"svelte-5-components",
+		"winui",
+		"win-ui",
+		"windows-ui",
+		"microsoft-ui"
+	],
+	"scripts": {
+		"dev": "pnpm urls && vite dev",
+		"build:site": "pnpm urls && vite build && pnpm prepare",
+		"build": "vite build && npm run prepack",
+		"preview": "pnpm run build && wrangler pages dev",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright install && playwright test",
+		"deploy": "pnpm run build:site && wrangler pages deploy",
+		"urls": "node scripts/gen-urls.js",
+		"cf-typegen": "wrangler types src/worker-configuration.d.ts",
+		"changeset:version": "changeset version && git add --all",
+		"changeset:publish": "changeset publish"
+	},
+	"files": [
+		"dist",
+		"!dist/**/tests/**",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/**/docs/**",
+		"dist/**/docs/llms.md"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./theme.css": {
+			"import": "./dist/css/theme.css",
+			"default": "./dist/css/theme.css"
+		},
+		"./reset.css": {
+			"import": "./dist/css/reset.css",
+			"default": "./dist/css/reset.css"
+		},
+		"./typography.css": {
+			"import": "./dist/css/typography.css",
+			"default": "./dist/css/typography.css"
+		},
+		"./class-darkmode.css": {
+			"import": "./dist/css/class-darkmode.css",
+			"default": "./dist/css/class-darkmode.css"
+		},
+		"./media-darkmode.css": {
+			"import": "./dist/css/media-darkmode.css",
+			"default": "./dist/css/media-darkmode.css"
+		}
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.8.0",
+		"fluentui-icons-svelte": "^1.1.1",
+		"mode-watcher": "^1.1.0",
+		"runed": "^0.37.1",
+		"tabspot": "^0.8.0"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@changesets/changelog-github": "^1.0.0",
+		"@changesets/cli": "^3.0.1",
+		"@eslint/js": "^10.0.1",
+		"@humanspeak/svelte-virtual-list": "^0.5.14",
+		"@inlang/paraglide-js": "^2.24.1",
+		"@inlang/paraglide-js-svelte": "^1.0.4",
+		"@jlacostaec/propsmith": "^0.2.0",
+		"@playwright/test": "^1.62.1",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-cloudflare": "^7.2.9",
+		"@sveltejs/kit": "^2.70.3",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"@types/node": "^26.2.0",
+		"@vitest/browser-playwright": "^4.1.11",
+		"eslint": "^10.8.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.23.0",
+		"globals": "^17.11.0",
+		"mdsvex": "^0.12.8",
+		"panzoom": "^9.4.4",
+		"playwright": "^1.62.1",
+		"prettier": "^3.9.6",
+		"prettier-plugin-svelte": "^4.1.1",
+		"publint": "^0.3.24",
+		"rehype-class-names": "^2.0.0",
+		"rehype-slug": "^6.0.0",
+		"shiki": "^4.4.3",
+		"simplex-noise": "^4.0.3",
+		"svelte": "^5.56.9",
+		"svelte-check": "^4.7.6",
+		"typescript": "6.0.3",
+		"typescript-eslint": "^8.67.0",
+		"vite": "^8.2.1",
+		"vitest": "^4.1.11",
+		"vitest-browser-svelte": "^3.0.0",
+		"wrangler": "^4.124.0"
+	},
+	"engines": {
+		"node": ">=24"
+	},
+	"packageManager": "pnpm@11.4.0"
+}