@primereact/mcp 11.0.0 → 11.2.0

package/data/llms/styled/add-ons/designer/overview.md

@@ -0,0 +1,194 @@
+# Theme Designer
+
+Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant.
+
+<img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/hero.png" alt="PrimeReact Theme Designer" className="w-full rounded-[50px] mb-8!" />
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="flex flex-col gap-20">
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-1.png" alt="Visual Editor" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">POWERFUL</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Visual Editor</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Transform your PrimeReact components with our advanced visual editor. Design, customize, and preview changes in real-time, all within an intuitive interface.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Intelligent Completion</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Entire Collections</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Custom Tokens</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Light and Dark Modes</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Real Time Preview</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Starter Kits</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-2.png" alt="Figma to Theme Code" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">AUTOMATED</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Figma to Theme Code</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Sync design tokens from Figma to theme code with ease. Export token.json to the Visual Editor or generate and sync themes directly to your repository via the Figma plugin, eliminating manual steps and speeding up your workflow.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Automatic Mapping</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Eliminate Handoff</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">CI Pipeline</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Live Preview</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Maintain Perfect Fidelity</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Verify Synchronization</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-3.png" alt="Migration Assistant" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">INTELLIGENT</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Migration Assistant</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Update your existing themes and design tokens into the latest version effortlessly. Our intelligent migration assistant handles the heavy lifting, ensuring a smooth transition for your design system.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Automatic Updates</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Preview Changes</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-4.png" alt="Cloud Storage" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">REMOTE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Cloud Storage</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Store and manage your themes securely in the cloud. Access your design system from anywhere with enterprise-grade cloud storage.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Access Anywhere</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Multiple Themes</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-2">Pricing</div>
+    <div className="text-center text-lg text-surface-600 dark:text-surface-300 mb-8">Choose the right plan for your business. Whether you are an individual or a member of a team, Designer is available for affordable prices. <a href="#terms">View Terms and Conditions</a>.</div>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Basic</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex items-baseline gap-1"><span className="text-2xl font-bold text-surface-900 dark:text-surface-0">$249</span><span className="text-sm text-surface-500 dark:text-surface-400">/ year</span></div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-times-circle text-red-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Figma to Theme Code</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Up to 2 Themes</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Service</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Visual Editor</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Migration Assistant</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Cloud Storage</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/designer" className="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Extended</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For teams with UI/UX designers</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex items-baseline gap-1"><span className="text-2xl font-bold text-surface-900 dark:text-surface-0">$990</span><span className="text-sm text-surface-500 dark:text-surface-400">/ year</span></div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Figma to Theme Code</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Up to 10 Themes</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Service</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Visual Editor</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Migration Assistant</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Cloud Storage</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/designer" className="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Enterprise</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For custom requirements</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">Exclusive Deals</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Figma to Theme Code</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Custom Theme Limit</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Multi Year Service</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Visual Editor</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Migration Assistant</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Cloud Storage</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="mailto:contact@primetek.com.tr" className="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Contact Us</a>
+        </div>
+    </div>
+</div>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-8">Frequently Asked Questions</div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What do I get when I purchase a plan?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">A license key to unlock the features based on your plan.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Is there a recurring fee or is the license perpetual?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Designer license key is valid for 1 year with no auto renewals.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What happens after the 1 year period is concluded?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">License key will expire and a new one needs to be renewed to continue using the tool. Downloaded themes can be used indefinitely.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I have trial access to the Designer?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Visual Editor is available for trial purposes; features such as downloads, migration assistant and cloud storage are disabled.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I create multiple themes?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Yes, based on the theme limit of your plan.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I update my theme?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">The Migration Assistant automatically scans your theme and adds missing tokens for the latest version.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Does Designer require a separate purchase from the UI Kit?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Yes, Figma UI Kit and Designer are different products. It is recommended to purchase both for an efficient workflow.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I include a generated theme in an open source project?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Yes, the generated theme is suitable for usage in an open source project.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I get support?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY">Discord</a> and <a href="https://github.com/orgs/primefaces/discussions/categories/theme-designer">Forum</a>.</p>
+        </div>
+    </div>
+</div>
+
+<div id="terms" className="card rounded-[50px]! p-8! md:p-12! mb-8! scroll-mt-24">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-2">Terms and Conditions</div>
+    <div className="text-center text-surface-500 dark:text-surface-400 mb-8">Effective Date: April 7, 2025</div>
+    <div className="flex flex-col gap-5 text-sm text-surface-600 dark:text-surface-300">
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">1. Acceptance of Terms</span> — By purchasing and using the PrimeReact Theme Designer, you acknowledge that you have read, understood, and agree to be bound by these Terms and Conditions.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">2. Subscription Plans</span> — Upon purchase, PrimeTek grants you non-exclusive, non-transferable access to use the Theme Designer in accordance with the selected plan. Each plan is valid for one year from the date of purchase and does not auto-renew. Themes generated during the active plan period can be used indefinitely.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">3. Usage Restrictions</span> — You may not use the Theme Designer to develop themes for applications that violate any laws or regulations.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">4. Intellectual Property</span> — All intellectual property rights in the Theme Designer service are owned by PrimeTek. The ownership of intellectual property rights for the generated themes shall vest in the Client.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">5. Support and Updates</span> — PrimeTek offers assistance with account management and licensing issues. Technical support or consulting is not provided. Updates are provided at PrimeTek's discretion.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">6. Refunds</span> — Due to the digital nature of the Theme Designer, all sales are final except as required by applicable law.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">7. Limitation of Liability</span> — To the maximum extent permitted by law, PrimeTek shall not be liable for any indirect, incidental, special, consequential, or punitive damages.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">8. Amendments</span> — PrimeTek reserves the right to modify these Terms at any time. Continued use constitutes your consent to such changes.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">9. Governing Law</span> — These Terms are governed by and construed in accordance with the laws of the Republic of Turkiye.</div>
+        <div><span className="font-semibold text-surface-900 dark:text-surface-0">10. Contact Information</span> — For any questions regarding these Terms, please contact us through our official channels as listed on our website.</div>
+    </div>
+</div>

package/data/llms/styled/add-ons/uikit/guide/v3.md

@@ -0,0 +1,182 @@
+# PrimeOne Guide v3
+
+PrimeOne is PrimeTek's official Figma UI Kit, built to work seamlessly with the Prime UI Suites.
+
+> **Legacy Notice:** UI Kit v3 is deprecated due to its dependency on the Tokens Studio Plugin. We strongly recommend migrating to UI Kit v4, which uses native Figma variables for significantly improved performance and eliminates third-party dependencies.
+
+## Overview
+
+PrimeOne is the official Figma library of UI components designed to match the implementations in the Prime UI Suites. The current iteration of PrimeOne is structured around the **Aura Light** and **Aura Dark** themes.
+
+## Resources
+
+PrimeOne for Figma takes full advantage of powerful Figma features such as components, variants, auto layout, styles, interactivity, and design tokens via Tokens Studio.
+
+If you're new to Figma or want to get the most out of PrimeOne, we recommend exploring the following resources:
+
+- [Tokens Studio Documentation](https://docs.tokens.studio/) - PrimeOne uses Tokens Studio for design token management. Visit the official docs to understand how it works and how to use it effectively.
+- [Figma's Best Practice Guides](https://www.figma.com/best-practices/) - Learn how to work efficiently with components, variants, and layouts.
+- [Figma's Official YouTube Channel](https://www.youtube.com/figmadesign) - Tutorials and feature walkthroughs from the Figma team.
+- [Figmalion Newsletter](https://figmalion.com/) - Stay updated with curated insights from the Figma community.
+
+## Installation
+
+### Importing
+
+- **Download the latest .fig UI Kit** - From your PrimeStore panel, download the latest PrimeOne package. The archive contains the .fig UI Kit.
+- **Open Figma in Google Chrome** - Launch Figma in Chrome (or another supported browser). Avoid using the Desktop app for this import. It's more reliable in-browser.
+- **Import into your Team project** - Navigate to the Teams section in the left sidebar. Select your Team project where you want PrimeOne. Drag and drop the .fig file into the project folder in the browser UI. Figma will upload it, showing a new file card once complete.
+
+![Importing PrimeOne](https://primefaces.org/cdn/uikit/installation-1.png)
+
+### Publishing
+
+To make PrimeOne available as a shared library:
+
+- Open the imported PrimeOne .fig file.
+- Go to **Assets → Manage Libraries**.
+- Click **"Publish..."** to share PrimeOne with your team, then confirm by clicking the "Publish" button in the modal.
+
+![Publishing PrimeOne](https://primefaces.org/cdn/uikit/installation-2.png)
+
+### Enabling
+
+If you want to enable PrimeOne across all files in your team, follow these steps:
+
+- Navigate to **All Projects** from the Teams section.
+- Go to **View Settings → View Team Libraries**. You can find this option in the dropdown menu next to your team name.
+- Toggle PrimeOne "On" to make it available globally.
+
+![Enabling PrimeOne](https://primefaces.org/cdn/uikit/installation-3.png)
+
+## Suggested Workflow
+
+PrimeOne uses Tokens Studio as its primary tool for design token management. To leverage the benefits of Figma Variables, these variables have also been exported from Tokens Studio and included in the file. This setup, while powerful, can make design changes somewhat complex and less fluid due to the way the tools interact. Although the provided guide outlines the recommended steps, we acknowledge that the workflow may feel unintuitive or slow at times. We're actively exploring improvements, and in the meantime, suggest following the guide as a baseline while adapting it to your team's needs where necessary.
+
+### Tokens Studio Setup
+
+- **Set sync provider via Tokens Studio** - Figma plugins are limited to sharing a maximum of 100KB of data through their APIs. Because PrimeOne's token data exceeds this limit, using tokens locally within your Figma file may lead to performance issues. To avoid this, you should first configure and switch to a remote sync provider. You can follow the official [Tokens Studio guide](https://docs.tokens.studio/token-storage/remote) for setting up remote storage.
+- **Push tokens to your sync provider** - Once you've successfully switched to your new sync provider, push the token data from your local file to the new provider to ensure everything stays in sync.
+- **Set Base Font Size to `{app.font.size}` in Tokens Studio Settings** - PrimeOne uses a base font size of 14px, aligning with the default in Prime UI libraries. In Tokens Studio, go to the Settings tab and set the Base font size to `{app.font.size}`.
+- If you wish to change this value, you can [update](https://docs.tokens.studio/manage-settings/base-font-size) the corresponding token in the app set.
+
+### CI Pipeline
+
+Theme Designer offers an API that can be utilized to implement continuous integration pipelines to automate Figma to theme code generation whenever you push updates to the repository from Figma. Visit the [CI Pipeline](/docs/styled/add-ons/designer/ci) documentation for comprehensive information.
+
+### Design Changes
+
+- **Change on Tokens Studio** - The first step when planning a design change is to identify which tokens need to be modified within Tokens Studio. Use the **Inspect** tab in Tokens Studio to locate the relevant tokens, then apply your changes directly via the plugin. After making the updates, don't forget to push the changes to your Sync Provider.
+- **Change on Figma Variables** - After making changes in Tokens Studio, you also need to apply these updates in Figma Variables. There are two options:
+    - Manually update the variables one by one, or
+    - Use the **Export to Styles & Variables** feature in Tokens Studio.
+
+    In our own workflow, we prefer to update the variables manually, as the export feature can be unstable with large files like PrimeOne. We recommend this manual approach for reliability. However, if you choose to use the export feature, make sure the settings match the screenshot provided. Specifically, ensure the "**Themes (Pro)**" tab is selected during the second step. Don't worry, even though it says "Pro," you don't need a Pro license to access this feature in Tokens Studio. If you notice missing or incomplete exports on your first attempt, try running the export again from the beginning. This is a known issue with Tokens Studio and often resolves on the second attempt. For more detailed guidance, see the [official documentation](https://docs.tokens.studio/figma/export).
+
+    ![Design changes export settings](https://primefaces.org/cdn/uikit/designchanges-1.png)
+
+- **Get Updates on Consumer Files** - We do not recommend making design changes directly in consumer files, as this goes against best practices. Instead, apply all design updates in the main UI Kit file, then publish the library and accept the updates in any consumer files that rely on it.
+
+## Token Sets
+
+- **Primitive** - This set contains the most foundational tokens, such as base colors and border radius, elements that are considered "primitive" by nature.
+- **Semantic** - Includes essential system-wide tokens like primary, surface, and other shared design values. It also defines tokens used across multiple component groups. For example, tokens under `{form.field.*}` are referenced by component-level tokens in InputText, MultiSelect, Checkbox, and other form components, enabling consistent styling across the board.
+- **Component** - These tokens are defined specifically for each component to allow deep customization. While we've aimed to create dedicated tokens for every component state, many of them still reference the semantic or primitive tokens, allowing you to make global updates from a single place when needed.
+- **App** - Tokens in this set are not part of the [PrimeUIX](https://github.com/primefaces/primeuix) system. They are intended for values defined in your own application. The same applies to tokens used in our UI library showcases. For example, there is no dedicated font size token in **PrimeUIX** because font styles are not part of the design system. UI components inherit their font settings from the application.
+- **Custom** - If you're using the Figma to Theme feature and want your newly created custom tokens to appear in your Theme Designer themes, place them in this set. Even if you're not using the Theme Designer, we still recommend creating a separate set — or using the existing "Custom" set — for your own tokens. Making changes to the default sets, especially deleting tokens or altering reference values, can lead to inconsistencies with the library tokens and cause additional work during development.
+
+## Update PrimeOne
+
+When a new version of PrimeOne is released, follow the steps below to update your files:
+
+- Download the latest version of PrimeOne from PrimeStore.
+- Unzip the file and upload it to your Figma workspace.
+- Publish the newly uploaded file as a library.
+- In all consumer files, use **Swap Library** to point to the new version.
+- Once the transition is complete, you can safely unpublish the old PrimeOne library.
+
+Before each update, it's a good idea to review the **Changelog** on the Get Started page of the PrimeOne Figma file.
+
+Keep in mind that while Swap Library will update most components, any customized components may require manual review and adjustment.
+
+## Adding PrimeIcons
+
+PrimeOne uses PrimeIcons, the official icon library by PrimeTek. To use it effectively within your design system, you need to add PrimeIcons to your Figma environment by following these steps:
+
+- Open the [PrimeIcons](https://www.figma.com/community/file/1354343849355792252/primeicons) file in Figma and move it to your team project.
+
+    ![Adding PrimeIcons - step 1](https://primefaces.org/cdn/uikit/primeicons-1.png)
+
+- Publish the PrimeIcons file and enable it for all team files in your Team Settings.
+
+    ![Adding PrimeIcons - step 2](https://primefaces.org/cdn/uikit/primeicons-2.png)
+
+- Return to your PrimeOne file. In the Libraries panel, click on the banner that says "Includes X missing libraries."
+
+    ![Adding PrimeIcons - step 3](https://primefaces.org/cdn/uikit/primeicons-3.png)
+
+- From the dropdown, select "**PrimeIcons (Community)**" and click the **Swap Library** button.
+
+    ![Adding PrimeIcons - step 4](https://primefaces.org/cdn/uikit/primeicons-4.png)
+
+## FAQ
+
+### Usage
+
+**What should we do after purchasing? I can't publish the Preview file?**
+
+The Preview file is **view-only**, so it can't be published. To use the library, download the .fig file from PrimeStore and import it into your Figma workspace. Once imported, you'll be able to open the file and publish it as a library for use in your projects.
+
+**How to change theme?**
+
+After exporting your tokens as Figma Variables using the Themes option in Tokens Studio, theme switching must be handled using Figma's native **Mode Switching** feature. The Theme Switcher within the Tokens Studio plugin will no longer function once themes are bound to a Variable Collection — this applies to PrimeOne as well. Therefore, to switch between Light and Dark modes, you should always use Figma's built-in Mode Switching interface.
+
+### Components
+
+**How to change base font size?**
+
+The base font size used in PrimeOne is 14px. Similar to how rem works in CSS, this is controlled by the `{app.font.size}` token located under the "app" set in Tokens Studio. When you change the value of this token, all size calculations will adjust accordingly based on the new value.
+
+To apply this change, you need to use the "Apply" function in Tokens Studio. However, we do not recommend using the "**Apply to Document**" option if the change affects the entire library, as it may lead to unexpected errors. Instead, go page by page and review the updates carefully before applying changes.
+
+Also note: not all token values in the library may be linked to `{app.font.size}`. So it's important to check components individually. After completing each page, verify the updated values under Local Variables and make manual adjustments if needed. Alternatively, you can use **Export Styles & Variables** to Figma in Tokens Studio to sync the updated values.
+
+### Tokens
+
+**Is Tokens Studio too slow?**
+
+This might be caused by using the wrong Apply method when pushing your changes. Since PrimeOne is a large file, using **Apply to Document** can result in very long processing times. We recommend using **Apply to Selection** or **Apply to Page** instead for better performance.
+
+### Updates
+
+**Will there be a completely new Figma file with each update, or will the current PrimeOne file be modified and versioned?**
+
+Each update will come as a new Figma file—an updated version of the previous one. You can seamlessly transition to the new version in your consumer files using Figma's **Swap Library** feature.
+
+**Will the PrimeOne UI Kit stay in sync with ongoing updates to the Prime UI Libraries?**
+
+The PrimeOne UI Kit does not update in real time alongside the libraries. However, we regularly release updates to bridge the gap and ensure alignment with key changes.
+
+**How will users receive new components when they're added?**
+
+New components will be included in future updates to the UI Kit. Please note that these updates may not coincide immediately with library changes and may take some time to roll out.
+
+**How frequently is the PrimeOne UI Kit updated?**
+
+We don't follow a fixed release schedule. Updates are made as needed, based on significant changes or additions to the Prime UI libraries.
+
+### Roadmap
+
+**Are there plans to add a Tailwind theme to the UI Kit?**
+
+At this time, we do not plan to include Tailwind theme support in the Figma UI Kit.
+
+### Licence
+
+**Will purchasing a PrimeBlocks license include access to PrimeOne components?**
+
+No. The PrimeBlocks license does not grant access to the PrimeOne UI Kit. They are separate products with individual licenses.
+
+## Support
+
+The community gathers on [GitHub Discussions](https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit) and [Discord](https://discord.gg/gzKFYnpmCY) to ask questions, share ideas, and discuss the technology. For direct inquiries or suggestions, feel free to contact us at [contact@primetek.com.tr](mailto:contact@primetek.com.tr).

package/data/llms/styled/add-ons/uikit/guide/v4.md

@@ -0,0 +1,163 @@
+# PrimeOne Guide
+
+PrimeOne is a strong UI component library that gets even better with a great Figma UI Kit. It is PrimeTek's official Figma UI Kit, built to work seamlessly with the Prime UI Suites.
+
+## Overview
+
+PrimeOne is the official Figma library of UI components designed to match the implementations in the Prime UI Suites. The current iteration of PrimeOne is structured around the **Aura Light** and **Aura Dark** themes.
+
+## Important Notice
+
+Starting from PrimeOne UI Kit version 4.0, the Tokens Studio plugin is no longer used. We've fully migrated to Figma's native variable features, which now power the system. If you prefer to continue working with Tokens Studio, please use PrimeOne UI Kit version 3.2, which still supports the plugin.
+
+## Resources
+
+PrimeOne for Figma takes full advantage of powerful Figma features such as components, variants, auto layout, styles, prototypes, and variables.
+
+If you're new to Figma or want to get the most out of PrimeOne, we recommend exploring the following resources:
+
+- [Variables](https://help.figma.com/hc/en-us/sections/14506605769879-Variables) - PrimeOne uses Figma Variables for design token management. Visit the official docs to understand how it works and how to use it effectively.
+- [Figma's Best Practice Guides](https://www.figma.com/best-practices/) - Learn how to work efficiently with components, variants, and layouts.
+- [Figma's Official YouTube Channel](https://www.youtube.com/figmadesign) - Tutorials and feature walkthroughs from the Figma team.
+- [Figmalion Newsletter](https://figmalion.com/) - Stay updated with curated insights from the Figma community.
+
+## Installation
+
+### Importing
+
+- **Download the latest .fig UI Kit** - From your PrimeStore panel, download the latest PrimeOne package. The archive contains the .fig UI Kit.
+- **Open Figma in Google Chrome** - Launch Figma in Chrome (or another supported browser). Avoid using the Desktop app for this import. It's more reliable in-browser.
+- **Import into your Team project** - Navigate to the Teams section in the left sidebar. Select your Team project where you want PrimeOne. Drag and drop the .fig file into the project folder in the browser UI. Figma will upload it, showing a new file card once complete.
+
+![Importing PrimeOne](https://primefaces.org/cdn/uikit/installation-1.png)
+
+### Publishing
+
+To make PrimeOne available as a shared library:
+
+- Open the imported PrimeOne .fig file.
+- Go to **Assets → Manage Libraries**.
+- Click **"Publish..."** to share PrimeOne with your team, then confirm by clicking the "Publish" button in the modal.
+
+![Publishing PrimeOne](https://primefaces.org/cdn/uikit/installation-2.png)
+
+### Enabling
+
+If you want to enable PrimeOne across all files in your team, follow these steps:
+
+- Navigate to **All Projects** from the Teams section.
+- Go to **View Settings → View Team Libraries**. You can find this option in the dropdown menu next to your team name.
+- Toggle PrimeOne "On" to make it available globally.
+
+![Enabling PrimeOne](https://primefaces.org/cdn/uikit/installation-3.png)
+
+## Collections
+
+- **Primitive** — This collection contains the most foundational variables, such as base colors and border radius, elements that are considered "primitive" by nature.
+- **Semantic Common & Semantic Color Scheme** — Includes essential system-wide variables like primary, surface, and other shared design values. It also defines variables used across multiple component groups. For example, variables under form/field are referenced by component-level variables in InputText, MultiSelect, Checkbox, and other form components, enabling consistent styling across the board.
+- **Component Common & Component Color Scheme** — These variables are defined specifically for each component to allow deep customization. While we've aimed to create dedicated variables for every component state, many of them still reference the semantic or primitive variables, allowing you to make global updates from a single place when needed.
+- **App** — Variables in this collection are not part of the [PrimeUIX](https://github.com/primefaces/primeuix) system. They are intended for values defined in your own application. The same applies to variables used in our UI library showcases. For example, there is no dedicated font size variable in **PrimeUIX** because font styles are not part of the design system. UI components inherit their font settings from the application.
+- **Custom** — If you're using the Figma to Theme feature and want your newly created custom variables to appear in your Theme Designer themes, place them in this collection. Even if you're not using the Theme Designer, we still recommend creating a separate collection — or using the existing "Custom" collection — for your own variables. Making changes to the default collections, especially deleting variables or altering reference values, can lead to inconsistencies with the library variables and cause additional work during development.
+
+## PrimeUI Figma Plugin
+
+PrimeUI Theme Generator Figma plugin is the official tool developed by PrimeTek that provides built-in synchronization capabilities to automate the theme code generation process. Visit the [plugin website](https://www.figma.com/community/plugin/1592914021886732603/primeui-theme-generator) to learn more about this workflow.
+
+## Update PrimeOne
+
+When a new version of PrimeOne is released, follow the steps below to update your files:
+
+- Download the latest version of PrimeOne from PrimeStore.
+- Unzip the file and upload it to your Figma workspace.
+- Publish the newly uploaded file as a library.
+- In all consumer files, use **Swap Library** to point to the new version.
+- Once the transition is complete, you can safely unpublish the old PrimeOne library.
+
+Before each update, it's a good idea to review the **Changelog** on the Get Started page of the PrimeOne Figma file.
+
+Keep in mind that while Swap Library will update most components, any customized components may require manual review and adjustment.
+
+## Adding PrimeIcons
+
+PrimeOne uses PrimeIcons, the official icon library by PrimeTek. To use it effectively within your design system, you need to add PrimeIcons to your Figma environment by following these steps:
+
+- Open the [PrimeIcons](https://www.figma.com/community/file/1354343849355792252/primeicons) file in Figma and move it to your team project.
+
+    ![Adding PrimeIcons - step 1](https://primefaces.org/cdn/uikit/primeicons-1.png)
+
+- Publish the PrimeIcons file and enable it for all team files in your Team Settings.
+
+    ![Adding PrimeIcons - step 2](https://primefaces.org/cdn/uikit/primeicons-2.png)
+
+- Return to your PrimeOne file. In the Libraries panel, click on the banner that says "Includes X missing libraries."
+
+    ![Adding PrimeIcons - step 3](https://primefaces.org/cdn/uikit/primeicons-3.png)
+
+- From the dropdown, select "**PrimeIcons (Community)**" and click the **Swap Library** button.
+
+    ![Adding PrimeIcons - step 4](https://primefaces.org/cdn/uikit/primeicons-4.png)
+
+## FAQ
+
+### Usage
+
+**What should we do after purchasing? I can't publish the Preview file?**
+
+The Preview file is **view-only**, so it can't be published. To use the library, download the .fig file from PrimeStore and import it into your Figma workspace. Once imported, you'll be able to open the file and publish it as a library for use in your projects.
+
+**How to change theme?**
+
+To enable theme switching in PrimeOne, you need to set up the Variable modes. Select the layers you want to switch between Light or Dark. Then, under Appearance, use the Apply variable modes icon to assign both the Semantic and Component modes to the target theme.
+
+### Components
+
+**How to change base font size?**
+
+The base font size used in PrimeOne is 14px. Similar to how rem works in CSS, this is controlled by the scale/\* variables located under the "Primitive" collection in Variables.
+
+When you change the values of these variables, all size calculations will adjust accordingly.
+
+Note that not all variables in the library may be linked to scale/\* variables. So it's essential to check components individually.
+
+### Updates
+
+**Will there be a completely new Figma file with each update, or will the current PrimeOne file be modified and versioned?**
+
+Each update will come as a new Figma file—an updated version of the previous one. You can seamlessly transition to the new version in your consumer files using Figma's **Swap Library** feature.
+
+**Will the PrimeOne UI Kit stay in sync with ongoing updates to the Prime UI Libraries?**
+
+The PrimeOne UI Kit does not update in real time alongside the libraries. However, we regularly release updates to bridge the gap and ensure alignment with key changes.
+
+**How will users receive new components when they're added?**
+
+New components will be included in future updates to the UI Kit. Please note that these updates may not coincide immediately with library changes and may take some time to roll out.
+
+**How frequently is the PrimeOne UI Kit updated?**
+
+We don't follow a fixed release schedule. Updates are made as needed, based on significant changes or additions to the Prime UI libraries.
+
+### Roadmap
+
+**Are there plans to add a Tailwind theme to the UI Kit?**
+
+At this time, we do not plan to include Tailwind theme support in the Figma UI Kit.
+
+### Licence
+
+**Will purchasing a PrimeBlocks license include access to PrimeOne components?**
+
+No. The PrimeBlocks license does not grant access to the PrimeOne UI Kit. They are separate products with individual licenses.
+
+## Limitations
+
+Current known technical limitations are listed at this section.
+
+- **Multiple-value variables** - Figma currently supports only a single value per variable. For this reason, multi-value tokens defined in PrimeUIX—such as padding or margin, which can contain multiple values—are represented in Figma as separate variables for each side (top/right/bottom/left) or axis (x/y), unlike the combined multi-value CSS definitions in PrimeUIX.
+- **Calculations** - Since Figma does not yet allow calculations within variable definitions, values that rely on expressions like calc() cannot function dynamically. In these cases, any adjustments you make may require manual updates.
+- **Focus Rings** - In Tokens Studio, focus rings could be positioned by calculating the outer stroke distance using expressions such as focus.ring.width + focus.ring.offset. Since Figma Variables do not support arithmetic operations, these calculations cannot be reproduced. As a result, focus ring width values are no longer dynamically linked and must be handled as static values.
+- **Color Mix** - Figma Variables do not currently support color mix modifiers. Values in PrimeUIX that rely on color mixing have therefore been converted into raw hex values when brought into Figma Variables.
+
+## Support
+
+The community gathers on [GitHub Discussions](https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit) and [Discord](https://discord.gg/gzKFYnpmCY) to ask questions, share ideas, and discuss the technology. For direct inquiries or suggestions, feel free to contact us at [contact@primetek.com.tr](mailto:contact@primetek.com.tr).