### Initialize Svelte-UX Theme with Settings Component

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

An alternative method for theme initialization, this example uses the `<Settings>` component. This component internally handles the setup of `<ThemeInit>`, simplifying the process for developers. It's also typically placed in the root `+layout.svelte`.

```svelte
<script>
  import { Settings } from 'svelte-ux';
</script>

<Settings />
```

--------------------------------

### Basic Svelte-UX Pagination Component Usage

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Demonstrates the fundamental setup and integration of the Svelte-UX Pagination component, including initializing the `paginationStore` and rendering the component.

```svelte
<script lang="ts">
  import { Pagination, paginationStore } from 'svelte-ux';

  const pagination = paginationStore();
  pagination.setTotal(100);
</script>

<Pagination {pagination} />
```

--------------------------------

### Define Locale Formats and Dictionary for Internationalization

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This example demonstrates how to configure `localeFormats` within the `settings()` function for internationalization. It shows how to define locale-specific date and number formats, including currency defaults, and how to create a dictionary for translations, which is utilized by the `format()` utility and date components.

```js
settings({
  // ...

  // fallbackLocale: 'fr',
  localeFormats: {
    fr: createLocaleSettings({
      locale: 'fr',

      formats: {
        dates: {
          baseParsing: 'dd/MM/yyyy',
          ordinalSuffixes: {
            one: 'er',
          },
        },

        numbers: {
          defaults: {
            currency: 'EUR',
          },
        },
      },

      dictionary: {
        Ok: 'Valider',
        Cancel: 'Annuler',

        Date: {
          Start: 'Début',
          End: 'Fin',

          Day: 'Jour',
          DayTime: 'Jour & Heure',
          Time: 'Heure',
          Week: 'Semaine',
          Month: 'Mois',
          Quarter: 'Trimestre',
          CalendarYear: 'Année',
          FiscalYearOct: 'Année fiscale (octobre)',
          BiWeek: 'Bi-hebdomadaire',

          //...
        },
      },
    }),
  },
});
```

--------------------------------

### Run Svelte UX Development Server

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

These commands navigate into the `svelte-ux` package directory and then start its development server, allowing for local testing and development of the Svelte UX components.

```Shell
cd packages/svelte-ux
pnpm dev
```

--------------------------------

### Install Project Dependencies with pnpm

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

This command installs all necessary project dependencies using pnpm, a fast and disk-space efficient package manager, typically run at the root of the monorepo.

```Shell
pnpm i
```

--------------------------------

### Configure Svelte UX Settings to Register Custom Themes

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This Svelte script demonstrates how to update the Svelte UX `settings()` function to register newly defined custom themes. Themes are categorized into 'light' and 'dark' arrays, ensuring proper system/browser preference handling. The `light` and `dark` arrays should always start with 'light' and 'dark' respectively for correct initialization.

```Svelte
<script>
  import { settings } from 'svelte-ux';

  settings({
    themes: {
      light: ['light', 'winter'],
      dark: ['dark', 'black', 'dracula'],
    },
  });
</script>
```

--------------------------------

### Basic AppLayout with Full Height Navigation

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/AppLayout/+page.md

This snippet illustrates the fundamental usage of the AppLayout component, setting up a standard application structure with a dedicated slot for a full-height navigation menu and an AppBar for the main content area.

```svelte
<AppLayout>
  <svelte:fragment slot="nav">
    <!-- Nav menu -->
  </svelte:fragment>

  <AppBar title="Example">
    <div slot="actions">
      <!-- App actions -->
    </div>
  </AppBar>

  <main>
    <slot />
  </main>
</AppLayout>
```

--------------------------------

### AppLayout with Custom Full Width Layout Areas

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/AppLayout/+page.md

This example demonstrates how to customize the layout of the AppLayout component using the 'areas' prop. It defines a two-row, two-column grid structure ('header header' and 'aside main') to achieve a full-width layout, providing flexibility in component placement.

```svelte
<AppLayout areas="'header header' 'aside main'">
  <svelte:fragment slot="nav">
    <!-- Nav menu -->
  </svelte:fragment>

  <AppBar title="Example">
    <div slot="actions">
      <!-- App actions -->
    </div>
  </AppBar>

  <main>
    <slot />
  </main>
</AppLayout>
```

--------------------------------

### Apply Global CSS to a Specific Svelte UX Component Variant

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

Demonstrates how to target and style a specific variant of a Svelte UX component globally using CSS, for example, adding a 2px border to the 'outline' variant of the Button.

```css
:global(.Button.variant-outline) {
  border-width: 2px;
}
```

--------------------------------

### Initialize Svelte-UX Theme with settings() and ThemeInit

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This snippet demonstrates the recommended way to initialize the Svelte-UX theme in a Svelte application, typically within `+layout.svelte`. It uses the `settings()` function to set up the theme store and the `<ThemeInit>` component to handle server-side rendering (SSR) theme initialization from `localStorage`.

```svelte
<script>
  import { settings, ThemeInit } from 'svelte-ux';

  settings();
</script>

<ThemeInit />
```

--------------------------------

### Render Svelte UX Button with Built-in Variants

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

Illustrates the usage of various `variant` props for the Svelte UX Button component, including 'fill', 'fill-light', 'outline', and 'none', to achieve different visual styles.

```svelte
<Button variant="fill" />
<Button variant="fill-light" />
<Button variant="outline" />
```

```svelte
<Button variant="none" />
```

--------------------------------

### Svelte-UX Paginate Example with Custom Items Per Page

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md

Shows how to configure the `Paginate` component to display a specific number of items per page (e.g., 5 items) using the `perPage` prop. It continues to render items with `ListItem` and provides `Pagination` controls, adapting to the new page size.

```svelte
<Paginate {data} perPage={5} let:pageData let:pagination>
	{#each pageData as d}
		<ListItem title={d.name} />
	{/each}
	{#if pageData.length > 0}
		<Pagination {pagination} />
	{/if}
</Paginate>
```

--------------------------------

### Configure Svelte UX Component Defaults via settings()

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

Shows how to programmatically override default component settings using the `settings()` function, applying a custom class and setting a default variant for the Button component.

```js
settings({
  components: {
    Button: {
      classes: '[&.variant-outline]:border-2',
      variant: 'outline'
    }
  }
});
```

--------------------------------

### Svelte-UX Pagination for Table Data

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Provides an example of configuring the Pagination component for use with tables, including options for 'per page' selection and specific control visibility.

```svelte
<Pagination {pagination} show={['perPage', 'pagination', 'prevPage', 'nextPage']} classes={{ perPage: 'flex-1 text-right', pagination: 'px-8' }} />
```

--------------------------------

### Define Svelte UX Themes in Tailwind CSS Configuration

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This JavaScript configuration block for `tailwind.config.cjs` demonstrates how to define custom light and dark themes using the `ux.themes` property. Colors can be specified in various formats like `oklch()`, `rgb()`, `hsl()`, or hex codes. This setup enables robust styling and theme switching within Svelte UX applications.

```javascript
module.exports = {
  ux: {
    themes: {
      // light mode
      light: {
        primary: 'oklch(49.12% 0.3096 275.75)',
        secondary: 'oklch(69.71% 0.329 342.55)',
        'secondary-content': 'oklch(98.71% 0.0106 342.55)',
        accent: 'oklch(76.76% 0.184 183.61)',
        neutral: '#2B3440',
        'neutral-content': '#D7DDE4',
        'surface-100': 'oklch(100% 0 0)',
        'surface-200': '#F2F2F2',
        'surface-300': '#E5E6E6',
        'surface-content': '#1f2937'
      },

      // dark mode
      dark: {
        primary: 'oklch(65.69% 0.196 275.75)',
        secondary: 'oklch(74.8% 0.26 342.55)',
        accent: 'oklch(74.51% 0.167 183.61)',
        neutral: '#2a323c',
        'neutral-content': '#A6ADBB',
        'surface-100': '#1d232a',
        'surface-200': '#191e24',
        'surface-300': '#15191e',
        'surface-content': '#A6ADBB'
      }
    }
  }
};
```

--------------------------------

### Svelte-UX Paginate Default Example with List Items

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md

Illustrates the default behavior of the `Paginate` component, rendering each paginated item using a `ListItem` component and displaying the standard `Pagination` controls at the bottom. It includes a conditional check to only show pagination if there's data.

```svelte
<Paginate {data} let:pageData let:pagination>
	{#each pageData as d}
		<ListItem title={d.name} />
	{/each}
	{#if pageData.length > 0}
		<Pagination {pagination} />
	{/if}
</Paginate>
```

--------------------------------

### Apply Tailwind CSS Classes to Internal Elements with 'classes' Prop

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This example demonstrates the Svelte-UX specific `classes` prop, which provides granular control over styling internal elements of a component. It allows passing an object where keys correspond to internal element names (e.g., `icon`) and values are Tailwind CSS classes.

```svelte
<Button icon={mdiMagnify} classes={{ icon: 'opacity-50' }}>Click me</Button>
```

--------------------------------

### Implement Custom Theme Selection Logic with getSettings()

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This code shows how to access the `currentTheme` store from `getSettings()` to build custom theme selection functionality. It demonstrates how to retrieve the current theme, programmatically change it using `setTheme()`, and check if the current theme is a dark color scheme.

```svelte
<script>
  import { getSettings } from 'svelte-ux';

  const { currentTheme, themes } = getSettings();

  // Current theme
  $currentTheme.theme;

  // Change theme
  currentTheme.setTheme('my-theme');

  // Is current theme dark color scheme
  $currentTheme.dark;
</script>
```

--------------------------------

### Define Custom Svelte UX Themes in JSON Configuration

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This JSON configuration snippet illustrates how to define additional light and dark themes for Svelte UX. Each theme object specifies its `color-scheme` and can include further theme-specific properties. This structure is used to extend the default theme options.

```JSON
{
  "light": {
    "color-scheme": "light",
    // ...
  },
  "dark": {
    "color-scheme": "dark",
    // ...
  },
  "winter": {
    "color-scheme": "light",
    // ...
  },
  "black": {
    "color-scheme": "dark",
    // ...
  },
  "dracula": {
    "color-scheme": "dark",
    // ...
  },
}
```

--------------------------------

### Svelte Toggle Component Controlling a Dialog

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Toggle/+page.md

This snippet illustrates how to use the `<Toggle>` component to manage the open state of a `<Dialog>`. The `let:on`, `let:toggle`, and `let:toggleOff` directives from `<Toggle>` provide the necessary state and functions to control the dialog's visibility.

```svelte
<Toggle let:on={open} let:toggle let:toggleOff>
  <Button on:click={toggle}>Show dialog</Button>

  <Dialog {open} on:close={toggleOff}>
    <!-- render contents -->
  </Dialog>
</Toggle>
```

--------------------------------

### Apply Global CSS to Svelte UX Button

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

Demonstrates how to apply global CSS rules to the Svelte UX Button component using its auto-generated class name, allowing for custom styling across the application.

```css
:global(.Button) {
  background-color: red;
}
```

--------------------------------

### Reference Svelte UX Theme Colors with Tailwind and CSS Variables

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This snippet demonstrates how to reference Svelte UX theme colors using Tailwind CSS utility classes with the `theme()` function, allowing for dynamic color application and opacity control. It also shows how to set CSS variables directly using the `theme()` function within a `<style>` block for more granular control.

```HTML
<div class="[--text-color:theme(colors.primary)]" />
<div class="[--text-color:theme(colors.primary/50%)]" />

<style>
  div {
    --text-color: theme(colors.primary);
    --bg-color: theme(colors.primary / 50%);
  }
</style>
```

--------------------------------

### Configure Global Component Defaults with settings()

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This snippet illustrates how to use the `settings()` function to apply global default configurations to Svelte-UX components. It allows setting default Tailwind CSS classes for root elements or specific internal parts, and defining default `variant` or `labelPlacement` properties for components like `Button` and `Field`.

```svelte
<script>
  import { settings } from 'svelte-ux';

  settings({
    components: {
      Button: {
        // same as <Button class="flex-2">
        classes: 'flex-2',
        // All component that wrap Button will also use this variant by default,
        variant: 'outline',
      },
      Field: {
        // All components based on Field will use this as well.
        labelPlacement: 'top',
      },
      TextField: {
        classes: {
          // same as <TextField classes={{ container: '...' }}>
          container: 'hover:shadow-none group-focus-within:shadow-none',
        },
      },
    },
  });
</script>
```

--------------------------------

### Apply Tailwind CSS Classes Using the 'class' Prop

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This snippet shows the standard way to apply Tailwind CSS utility classes directly to a Svelte-UX component using the `class` prop. This allows for straightforward styling of the component's root element.

```svelte
<Button class="px-4">Click me</Button>
```

--------------------------------

### Svelte-UX State Component Usage

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/State/+page.md

This snippet illustrates the usage of a Svelte-UX `State` component to manage a selected value. It iterates through an `items` array, rendering a `Button` for each item. Clicking a button calls the `set` function, updating the `value` bound to the `State` component. This pattern is common for selecting an item from a list.

```svelte
<State initial={selected} let:value let:set>
	{#each items as item}
		<Button on:click={set(item)}>
			{item.name}
		</Button>
	{#/each}
</Toggle>
```

--------------------------------

### Reference External Themes File in Tailwind CSS Configuration

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This JavaScript snippet demonstrates how to externalize Svelte UX theme definitions by referencing a `themes.json` file within `tailwind.config.cjs`. This approach helps manage large collections of themes by keeping them in a separate, dedicated file, improving configuration readability and organization.

```javascript
module.exports = {
  ux: {
    themes: require('./themes.json')
  }
};
```

--------------------------------

### Define Svelte UX Themes using Tailwind CSS Colors

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This JavaScript configuration illustrates how to define Svelte UX themes within `tailwind.config.cjs` by leveraging the `tailwindcss/colors` package. It demonstrates setting primary, secondary, and surface colors for both light and dark modes using predefined Tailwind color palettes, simplifying theme creation.

```javascript
const colors = require('tailwindcss/colors');

module.exports = {
  // ...
  ux: {
    themes: {
      light: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': 'white',
        'surface-200': colors['gray']['100'],
        'surface-300': colors['gray']['300'],
        'surface-content': colors['gray']['900']
      },
      dark: {
        primary: colors['orange']['500'],
        'primary-content': 'white',
        secondary: colors['blue']['500'],
        'surface-100': colors['zinc']['800'],
        'surface-200': colors['zinc']['900'],
        'surface-300': colors['zinc']['950'],
        'surface-content': colors['zinc']['100']
      }
    }
  }
};
```

--------------------------------

### Configure Svelte UX Tailwind Plugin Color Space

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/customization/+page.md

This JavaScript snippet shows how to configure the Svelte UX Tailwind plugin by passing an options object to `layerstack()`. Specifically, it sets the `colorSpace` to `oklch`, allowing the plugin to translate defined colors into the specified color space for increased gamut and consistent color rendering.

```javascript
const layerstack = require('@layerstack/tailwind/plugin');

module.exports = {
  // ...
  plugins: [layerstack({ colorSpace: 'oklch' })]
};
```

--------------------------------

### Svelte UX Publishing Workflow

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/README.md

This section outlines the step-by-step process for publishing new versions of the Svelte UX package to npm and GitHub, utilizing `npm run` commands and Git.

```Shell
npm run changeset
```

```Shell
npm run version
```

```Shell
npm run publish
```

```Shell
git push --tags
```

--------------------------------

### Svelte-UX Pagination Data Initialization

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md

Initializes a sample array of 100 items with unique names to simulate data for pagination demonstrations within a Svelte component. This data is then used by the `Paginate` component.

```typescript
import { ListItem, Pagination, Paginate } from 'svelte-ux';

import Preview from '$lib/components/Preview.svelte';

const data = Array(100).fill(null).map((x, i) => ({ name: `Item: ${i + 1}`}))
```

--------------------------------

### Run Unit Tests for Svelte UX Package

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

These commands first change the directory to the `svelte-ux` package and then execute its unit tests, ensuring the package's individual functionality and stability.

```Shell
cd packages/svelte-ux
pnpm test:unit
```

--------------------------------

### Execute Script for Specific Package from Root

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

This command allows running a specific script (e.g., `dev`) for a particular package (e.g., `svelte-ux`) directly from the monorepo's root directory, simplifying development workflows.

```Shell
pnpm -F svelte-ux dev
```

--------------------------------

### Basic Svelte-UX Paginate Component Usage Structure

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md

Demonstrates the fundamental structure for integrating the `Paginate` and `Pagination` components from Svelte-UX into a Svelte application, showing how to iterate over paginated data and render pagination controls.

```svelte
<script lang="ts">
  import { Paginate, Pagination } from 'svelte-ux';
</script>

<Paginate {data} let:pageData let:pagination>
  {#each pageData as d}
    <!-- render item -->
  {/each}
  <Pagination {pagination} />
</Paginate>
```

--------------------------------

### Run Unit Tests for All Monorepo Packages

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

This command executes unit tests across all packages within the monorepo, ensuring comprehensive test coverage and overall project health.

```Shell
pnpm -r test:unit
```

--------------------------------

### Svelte-UX Pagination with First/Last Page Controls

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Illustrates how to configure the Pagination component to explicitly show 'first page' and 'last page' navigation buttons alongside standard controls.

```svelte
<Pagination {pagination} show={['firstPage', 'prevPage', 'pagination', 'nextPage', 'lastPage']} />
```

--------------------------------

### Add Changeset for Changelog and Versioning

Source: https://github.com/techniq/svelte-ux/blob/main/README.md

This command initiates the process of adding a changeset, which is used to generate changelog entries and determine the next version for packages in a monorepo, crucial for release management.

```Shell
pnpm changeset
```

--------------------------------

### Custom Formatting for Svelte-UX Pagination Display

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Shows how to use the `format` prop to provide a custom function for rendering the pagination text, allowing for tailored page information display.

```svelte
<Pagination {pagination} show={['firstPage', 'prevPage', 'pagination', 'nextPage', 'lastPage']} classes={{ pagination: 'flex-1 text-center' }} format={pagination => 'Page ' + pagination.page + ' of ' + pagination.totalPages} />
```

--------------------------------

### Default Svelte-UX Pagination Display

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Shows the Pagination component rendered with its default configuration, displaying standard navigation elements.

```svelte
<Pagination {pagination} />
```

--------------------------------

### Svelte-UX Pagination with Custom Actions Slot

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Demonstrates how to integrate custom actions, such as a button, into the Pagination component's layout using the `actions` slot, suitable for table-like interfaces.

```svelte
<Pagination {pagination} show={['actions', 'perPage', 'pagination', 'prevPage', 'nextPage']} classes={{ perPage: 'flex-1 text-right', pagination: 'px-8' }}>
		<div slot="actions">
			<Button variant="fill" color="primary">Click me</Button>
		</div>
	</Pagination>
```

--------------------------------

### Centering Svelte-UX Pagination Controls

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Demonstrates how to apply custom CSS classes to center the pagination controls within the component's layout.

```svelte
<Pagination {pagination} show={['firstPage', 'prevPage', 'pagination', 'nextPage', 'lastPage']} classes={{ pagination: 'flex-1 text-center' }} />
```

--------------------------------

### Customizing Svelte-UX Pagination Slot Content

Source: https://github.com/techniq/svelte-ux/blob/main/packages/svelte-ux/src/routes/docs/components/Pagination/+page.md

Explains how to utilize the `pagination` slot to completely customize the visual representation of the page number display, providing full control over its content and styling.

```svelte
<Pagination {pagination} show={['firstPage', 'prevPage', 'pagination', 'nextPage', 'lastPage']}>
		<div slot="pagination" class="text-sm flex-1 text-center" let:pagination>
			Page {pagination.page} of {pagination.totalPages}
		</div>
	</Pagination>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.