diff --git a/README.md b/README.md index 1d675c39..ac154fdf 100644 --- a/README.md +++ b/README.md @@ -13,11 +13,11 @@ You can find the Storybook with an example for every component in this library [ ### How to use Faency ```sh -npm install @traefiklabs/faency@next +npm install @traefik-labs/faency@next # or -yarn add @traefiklabs/faency@next +yarn add @traefik-labs/faency@next ``` #### Using Stitches Components (Current) @@ -27,7 +27,7 @@ Wire up the FaencyProvider which will hold the context with the Theme configurat > The provider accepts one parameter besides the `children`, which is the `primaryColor`, that will be used to build the colors used on the Theme. This color can be one of the colors exported by the `Stitches` config, just by adding `$` as a prefix, or can be any string that represents a CSS color. ```jsx -import { FaencyProvider } from '@traefiklabs/faency'; +import { FaencyProvider } from '@traefik-labs/faency'; const App = () => {/* your app */}; ``` @@ -35,7 +35,7 @@ const App = () => {/* your app */} ( diff --git a/USER_GUIDE.md b/USER_GUIDE.md index ec196010..7463b6d1 100644 --- a/USER_GUIDE.md +++ b/USER_GUIDE.md @@ -20,10 +20,10 @@ Install Faency via npm or yarn: ```bash # npm -npm install @traefiklabs/faency +npm install @traefik-labs/faency # yarn -yarn add @traefiklabs/faency +yarn add @traefik-labs/faency ``` ### Peer Dependencies @@ -46,8 +46,8 @@ Wrap your application with the `FaencyProvider`: ```tsx import React from 'react'; -import { FaencyProvider } from '@traefiklabs/faency'; -import { Button, Box, Text } from '@traefiklabs/faency'; +import { FaencyProvider } from '@traefik-labs/faency'; +import { Button, Box, Text } from '@traefik-labs/faency'; function App() { return ( @@ -69,9 +69,9 @@ For Vanilla Extract components, import the CSS file and use the `VanillaExtractT ```tsx import React from 'react'; -import '@traefiklabs/faency/dist/style.css'; // Required for Vanilla Extract components -import { VanillaExtractThemeProvider } from '@traefiklabs/faency'; -import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency'; +import '@traefik-labs/faency/dist/style.css'; // Required for Vanilla Extract components +import { VanillaExtractThemeProvider } from '@traefik-labs/faency'; +import { BoxVanilla, BadgeVanilla } from '@traefik-labs/faency'; function App() { return ( @@ -97,7 +97,7 @@ Stitches components use runtime CSS-in-JS, so no separate CSS imports are needed Vanilla Extract components require importing the static CSS file. Add this import to your application's entry point (e.g., `App.tsx` or `index.tsx`): ```tsx -import '@traefiklabs/faency/dist/style.css'; +import '@traefik-labs/faency/dist/style.css'; ``` This CSS file contains all the styles for Vanilla Extract components (components with `Vanilla` suffix like `BadgeVanilla`, `BoxVanilla`, etc.). Without this import, these components will render as unstyled elements. @@ -119,7 +119,7 @@ Faency includes a powerful theming system with support for light/dark modes and For more control over theming, use the new Vanilla Extract theme provider: ```tsx -import { VanillaExtractThemeProvider } from '@traefiklabs/faency'; +import { VanillaExtractThemeProvider } from '@traefik-labs/faency'; function App() { return ( @@ -151,7 +151,7 @@ Faency supports 7 primary color themes: #### With Vanilla Extract Provider ```tsx -import { VanillaExtractThemeProvider } from '@traefiklabs/faency'; +import { VanillaExtractThemeProvider } from '@traefik-labs/faency'; function App() { return ( @@ -167,7 +167,7 @@ function App() { Access and control the theme using the `useVanillaExtractTheme` hook: ```tsx -import { useVanillaExtractTheme } from '@traefiklabs/faency'; +import { useVanillaExtractTheme } from '@traefik-labs/faency'; function ThemeToggle() { const { mode, resolvedTheme, primaryColor, setMode, setPrimaryColor } = useVanillaExtractTheme(); @@ -220,10 +220,10 @@ function ThemeToggle() { ```tsx // Import individual components -import { Button, Box, Text, Input, Badge } from '@traefiklabs/faency'; +import { Button, Box, Text, Input, Badge } from '@traefik-labs/faency'; // Or import everything -import * as Faency from '@traefiklabs/faency'; +import * as Faency from '@traefik-labs/faency'; ``` ### Basic Component Usage @@ -231,7 +231,7 @@ import * as Faency from '@traefiklabs/faency'; #### Button ```tsx -import { Button } from '@traefiklabs/faency'; +import { Button } from '@traefik-labs/faency';