### Basic Pagination Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pagination/index.md

Demonstrates a standard pagination setup. Ensure the component is provided with 'page', 'per-page', and 'total' props.

```vue
<template>
  <Pagination
    :page="page"
    :per-page="perPage"
    :total="total"
  />
</template>

<script setup>
import Pagination from "./components/Pagination.vue";

const page = 1;
const perPage = 10;
const total = 100;
</script>
```

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

### Basic Container Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/container.md

Demonstrates the basic usage of the Container component. No specific setup or imports are required beyond including the component itself.

```vue
<template>
  <Container>This is basic content inside the container.</Container>
</template>

<script lang="ts" setup>
import Container from "./components/layout/container.vue";
</script>
```

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

### Basic Filter Bar Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/filter/bar.md

Demonstrates a basic filter bar setup with a search input and filters. This example shows how to integrate the filter bar into a view.

```vue
<template>
    <VFilterBar
        v-model="state"
        :search="search"
        @update:model-value="state = $event"
        @update:search="search = $event"
    />
</template>

<script setup lang="ts">
import { VFilterBar } from '@von Braun/flux'
import type { FluxFilterState } from '@von Braun/flux'

const state = ref<FluxFilterState>({})
const search = ref('')
</script>
```

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

### Basic Color Picker Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/color/picker.md

Demonstrates a basic color picker that is displayed directly. No specific setup is required beyond including the component.

```vue
<template>
  <VColorPicker v-model="color" />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('#000000')
</script>
```

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

### Basic Input Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/form/input/index.md

Demonstrates a simple form input field. No specific setup is required beyond including the component.

```vue
<template>
    <FluxInput v-model="value" />
</template>

<script setup lang="ts">
import { FluxInput } from "@/components/form/input/";
import { ref } from "vue";

const value = ref("");
</script>
```

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

### Compact Pagination Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pagination/index.md

A compact example of how to use the Pagination component.

```APIDOC
::: example Compact || A compact pagination.
example=../../code/components/pagination/compact.vue
:::
```

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

### Install @flux-ui/statistics and @flux-ui/components

Source: https://context7.com/basmilius/flux/llms.txt

Install the necessary packages using bun. Ensure both statistics and components packages are added.

```bash
bun add @flux-ui/statistics @flux-ui/components
```

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

### Vue Script Setup with Type Imports

Source: https://github.com/basmilius/flux/blob/main/CLAUDE.md

Example of a Vue component using `<script lang="ts" setup>` with type-only imports from a shared types package.

```vue
<script lang="ts" setup>
    import type { FluxFooEmits, FluxFooProps, FluxFooSlots } from '@flux-ui/types';

    defineEmits<FluxFooEmits>();
    defineProps<FluxFooProps>();
    defineSlots<FluxFooSlots>();
</script>
```

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

### Basic Pagination Bar Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pagination/bar.md

A simple implementation of the pagination bar. No specific setup is required beyond including the component.

```vue
<template>
  <p class="mb-4">
    Showing {{ perPage }} of {{ total }} items.
  </p>

  <PaginationBar
    :total="total"
    :per-page="perPage"
    :page="page"
    :limits="[5, 10, 25, 50, 100]"
    @navigate="page = $event"
    @limit="perPage = $event"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

import PaginationBar from './bar.vue'

const page = ref(1)
const perPage = ref(10)
const total = ref(100)
</script>
```

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

### Basic Spinner Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/spinner.md

A basic spinner component. No specific setup is required beyond importing the component.

```vue
<template>
  <Spinner />
</template>

<script setup>
import Spinner from "../code/components/spinner/preview.vue";
</script>
```

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

### Basic Usage Example

Source: https://github.com/basmilius/flux/blob/main/docs/internals/composables/useInView.md

An example demonstrating how to import and use the useInView composable in a Vue component.

```APIDOC
## Usage

```ts
import { useInView } from '@flux-ui/internals';
import { useTemplateRef } from 'vue';

const element = useTemplateRef('element');

useInView(element, {
    threshold: 1
});
```

This example shows how to create a template ref for an element and then pass it to `useInView` with a specific `threshold` option.
```

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

### Install Flux UI Core Package (Bun)

Source: https://context7.com/basmilius/flux/llms.txt

Install the core Flux UI components package using Bun.

```bash
bun add @flux-ui/components
```

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

### Basic Pagination Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pagination/index.md

A basic example of how to use the Pagination component.

```APIDOC
::: example Basic || A basic pagination.
example=../../code/components/pagination/basic.vue
:::
```

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

### Basic Window Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/window.md

Demonstrates a basic implementation of the Window component.

```vue
<template>
    <Window>
        <template #default>
            <div class="p-4">Default Slot Content</div>
        </template>
        <template #filters>
            <div class="p-4">Filters Slot Content</div>
        </template>
    </Window>
</template>

<script setup lang="ts">
import Window from "./window.vue";
</script>
```

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

### Basic Kanban Board Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/kanban/index.md

Demonstrates a simple Kanban board with draggable items. This example sets up the basic structure for task management.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { FluxKanbanMoveEvent } from '@flux-ui/components'

interface Task {
    id: number
    title: string
    description: string
}

interface Column {
    id: number
    title: string
    items: Task[]
}

const columns = ref<Column[]>([
    {
        id: 0,
        title: 'To Do',
        items: [
            {
                id: 0,
                title: 'Implement feature X',
                description: 'Add new feature X to the project.'
            },
            {
                id: 1,
                title: 'Fix bug Y',
                description: 'Resolve the critical bug Y in the main branch.'
            }
        ]
    },
    {
        id: 1,
        title: 'In Progress',
        items: [
            {
                id: 2,
                title: 'Refactor code',
                description: 'Improve the existing codebase structure.'
            }
        ]
    },
    {
        id: 2,
        title: 'Done',
        items: []
    }
])

function onMove({ itemId, fromColumnId, toColumnId, beforeItemId }: FluxKanbanMoveEvent) {
    const fromColumn = columns.value.find(c => c.id === fromColumnId)
    const toColumn = columns.value.find(c => c.id === toColumnId)
    const itemIndex = fromColumn?.items.findIndex(i => i.id === itemId)

    if (!fromColumn || !toColumn || itemIndex === undefined)
        return

    const item = fromColumn.items.splice(itemIndex, 1)[0]

    let toIndex = toColumn.items.length
    if (beforeItemId !== undefined) {
        toIndex = toColumn.items.findIndex(i => i.id === beforeItemId)
    }

    toColumn.items.splice(toIndex, 0, item)
}
</script>

<template>
    <FluxKanban :columns="columns" @move="onMove" />
</template>
```

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

### Basic Toolbar Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/toolbar/index.md

Demonstrates a basic implementation of the Toolbar component.

```vue
<template>
  <v-toolbar>
    <v-toolbar-title>Toolbar Title</v-toolbar-title>
    <v-spacer />
    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-toolbar>
</template>

<script setup>
// Script setup for basic toolbar
</script>
```

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

### Install Vite Preset and Flux Components

Source: https://context7.com/basmilius/flux/llms.txt

Install Flux UI components, Sass embedded, and the Vite preset for source-level customization.

```bash
bun add @flux-ui/components sass-embedded @basmilius/vite-preset
```

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

### Basic Action Bar

Source: https://github.com/basmilius/flux/blob/main/docs/components/action-bar.md

A simple and basic action bar example. No specific setup is required beyond including the component.

```vue
<template>
  <ActionBar>
    <template #primary>
      <Button>Primary action</Button>
    </template>
  </ActionBar>
</template>

```

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

### Basic Timeline Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/timeline/index.md

A simple demonstration of the Timeline component.

```vue
<template>
  <FluxTimeline>
    <FluxTimelineItem title="Step 1">Content 1</FluxTimelineItem>
    <FluxTimelineItem title="Step 2">Content 2</FluxTimelineItem>
    <FluxTimelineItem title="Step 3">Content 3</FluxTimelineItem>
  </FluxTimeline>
</template>

```

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

### Basic Ticks Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/ticks.md

A basic example demonstrating the Ticks component.

```vue
<template>
  <div class="w-full">
    <div class="flex justify-between px-2">
      <span>0</span>
      <span>100</span>
    </div>
    <Ticks :lower="0" :upper="100" />
  </div>
</template>

<script setup lang="ts">
import Ticks from "./Ticks.vue";
</script>
```

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

### Responsive Layout Example

Source: https://github.com/basmilius/flux/blob/main/docs/guide/composables/useBreakpoints.md

This example demonstrates how to create a responsive layout that adapts its direction based on the active breakpoint, switching from horizontal to vertical at the 'md' breakpoint.

```vue
<template>
  <v-stack :direction="md ? 'vertical' : 'horizontal'">
    <v-card>
      <v-card-content>Card 1</v-card-content>
    </v-card>
    <v-card>
      <v-card-content>Card 2</v-card-content>
    </v-card>
  </v-stack>
</template>

<script setup lang="ts">
import { useBreakpoints } from '@flux-ui/components';

const { md } = useBreakpoints();
</script>
```

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

### Install Flux Components

Source: https://github.com/basmilius/flux/blob/main/docs/index.md

Install the Flux components package using your preferred package manager.

```shell
bun add @flux-ui/components
```

```shell
pnpm install @flux-ui/components
```

```shell
yarn add @flux-ui/components
```

```shell
npm install @flux-ui/components
```

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

### Re-authentication Overlay Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/overlay.md

An example of an overlay used for re-authentication purposes.

```vue
<template>
  <Overlay>
    <template #default>
      <div class="p-4">
        <p>Please re-authenticate to continue.</p>
        <button class="mt-2 btn btn-primary">Re-authenticate</button>
      </div>
    </template>
  </Overlay>
</template>

<script setup lang="ts">
import Overlay from "./overlay.vue";
</script>
```

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

### Basic Input Group Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/form/input/group.md

A basic and simple example of an input group.

```vue
<template>
  <VInputGroup>
    <template #default="{ id, labelClass, ...attrs }">
      <VInput
        :id="id"
        :label-class="labelClass"
        v-bind="attrs"
      />
    </template>

    <template #append>
      <VBtn
        icon="search"
        variant="text"
      />
    </template>
  </VInputGroup>
</template>

```

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

### Install Flux UI Core Package (PNPM/Yarn/NPM)

Source: https://context7.com/basmilius/flux/llms.txt

Install the core Flux UI components package using PNPM, Yarn, or NPM.

```bash
pnpm install @flux-ui/components
```

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

### Basic Publish Button

Source: https://github.com/basmilius/flux/blob/main/docs/components/button/publish.md

A basic example of how to use the publish button.

```vue
<template>
  <FluxButton
    type="button"
    label="Publish"
    icon-leading="cloud-upload"
  />
</template>

<script lang="ts" setup>
import { FluxButton } from '@flux/ui'
</script>
```

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

### Basic Link Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/link.md

Demonstrates a basic usage of the Link component.

```APIDOC
## Basic Link

### Description
A simple link with default styling.

### Example
```vue
<template>
  <Link label="Learn More" />
</template>
```
```

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

### Chip List Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/chip.md

Chips can be placed within stacks to create a list. This example demonstrates basic chip usage in a list format.

```vue
<template>
  <FluxStack direction="row" gap="sm">
    <FluxChip label="Chip 1" />
    <FluxChip label="Chip 2" />
    <FluxChip label="Chip 3" />
  </FluxStack>
</template>
```

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

### Basic Tab Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/tabs/tab.md

A basic example demonstrating the usage of the Tab component. Ensure this component is used within the Tabs component for proper rendering.

```vue
<template>
  <Tabs>
    <Tab label="Tab 1">
      Content 1
    </Tab>
    <Tab label="Tab 2">
      Content 2
    </Tab>
  </Tabs>
</template>

<script setup lang="ts">
import {
  Tabs,
  Tab
} from "@/components/tabs";
</script>
```

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

### Install Flux Statistics with Package Managers

Source: https://github.com/basmilius/flux/blob/main/docs/statistics/introduction/installation.md

Use your preferred package manager to add Flux Statistics and components to your project. This is the recommended installation method.

```shell
bun add @flux-ui/statistics @flux-ui/components
```

```shell
pnpm install @flux-ui/statistics @flux-ui/components
```

```shell
yarn add @flux-ui/statistics @flux-ui/components
```

```shell
npm install @flux-ui/statistics @flux-ui/components
```

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

### Basic Link Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/link.md

A simple link component for internal navigation.

```vue
<template>
  <Link label="Go to Home" to="/" />
</template>

<script lang="ts" setup>
import Link from "./link.vue";
</script>
```

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

### Install Flux with Vite Preset (Yarn)

Source: https://github.com/basmilius/flux/blob/main/docs/guide/introduction/installation/nuxt.md

Install Flux UI components, sass-embedded, and the Vite preset using Yarn for advanced configuration.

```shell
yarn add @flux-ui/components sass-embedded @basmilius/vite-preset
```

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

### Free Grid Pattern Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/visual/grid-pattern.md

This example shows the grid pattern used without specific size constraints, allowing it to fill its parent container freely. It demonstrates the default behavior when no explicit dimensions are provided.

```vue
<template>
  <div class="w-full h-full">
    <GridPattern />
  </div>
</template>

<script setup lang="ts">
import GridPattern from "../../components/visual/grid-pattern/index.vue";
</script>

```

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

### Basic Slide Over Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/slide-over.md

A simple implementation of the slide over component.

```vue
<template>
  <SlideOver>
    <template #default>
      <div>Slide over content</div>
    </template>
  </SlideOver>
</template>

<script setup>
import SlideOver from "../code/components/slide-over/preview.vue";
</script>
```

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

### Link with Icon Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/link.md

Shows how to add an icon to the Link component.

```APIDOC
## Link with Icon

### Description
A link that includes an icon at the beginning.

### Example
```vue
<template>
  <Link label="Explore" icon="arrow-right-long" />
</template>
```
```

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

### Border Shine Button Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/visual/border-shine.md

Use this snippet on buttons to visually guide users towards subscription actions.

```vue
<template>
  <div class="flex items-center justify-center p-4">
    <BorderShine
      class="text-white"
      colors="['#9333ea', 'transparent', '#ea580c', 'transparent', '#db2777', 'transparent', '#9333ea']"
      :duration="5"
      :offset="1"
      :radius="10"
      :width="3"
    >
      <button
        class="px-4 py-2 rounded-lg bg-gradient-to-br from-purple-600 to-orange-500"
      >
        Subscribe
      </button>
    </BorderShine>
  </div>
</template>

<script setup lang="ts">
import BorderShine from "./border-shine.vue";
</script>

```

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

### Vue Component Setup with Flux UI Imports

Source: https://github.com/basmilius/flux/blob/main/docs/playground.md

This script block sets up a Vue 3 component using the Composition API with `<script setup>`. It imports numerous components from the '@flux-ui/components' library and initializes reactive state variables using `ref` for managing component visibility, such as overlays.

```typescript
import {
    FluxAction,
    FluxAvatar,
    FluxBoxedIcon,
    FluxButtonGroup,
    FluxCheckbox,
    FluxFormInput,
    FluxFormInputAddition,
    FluxFormInputGroup,
    FluxFormSelect,
    FluxGallery,
    FluxGalleryItem,
    FluxIcon,
    FluxInfo,
    FluxInfoStack,
    FluxItem,
    FluxItemActions,
    FluxItemContent,
    FluxItemMedia,
    FluxItemStack,
    FluxNotice,
    FluxOverlay,
    FluxPane,
    FluxPaneBody,
    FluxPaneFooter,
    FluxPaneHeader,
    FluxPrimaryLinkButton,
    FluxProgressBar,
    FluxFormPinInput,
    FluxQuantitySelector,
    FluxSecondaryButton,
    FluxSecondaryLinkButton,
    FluxSegmentedControl,
    FluxSeparator,
    FluxSpacer,
    FluxSpinner,
    FluxFlex,
    FluxStatistic,
    FluxTabBar,
    FluxTabBarItem,
    FluxTimeline,
    FluxTimelineItem,
    FluxToggle,
    FluxToolbar,
    FluxToolbarGroup,
    FluxTooltip
} from '@flux-ui/components';
import { ref } from 'vue';

const isOverlayOpen = ref(false);
const isOverlay2Open = ref(false);
```

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

### Basic Stepper Steps Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/stepper/steps.md

Demonstrates a basic implementation of the stepper steps component. Ensure the Icon component is available for use.

```vue
<template>
  <StepperSteps :amount="3" :current="1" />
</template>

<script setup lang="ts">
import StepperSteps from "./steps.vue";
</script>

```

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

### Basic Overlay Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/overlay.md

A simple demonstration of how to use the basic overlay component.

```vue
<template>
  <Overlay>
    <template #default>
      <div class="p-4">
        <p>This is the overlay content.</p>
      </div>
    </template>
  </Overlay>
</template>

<script setup lang="ts">
import Overlay from "./overlay.vue";
</script>
```

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

### Tabs with Icon and Label Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/tabs/index.md

Shows how to combine both icons and labels for tabs.

```vue
<template>
  <FluxTabs v-model="activeTab">
    <FluxTab icon="home" label="Home">
      Content 1
    </FluxTab>
    <FluxTab icon="settings" label="Settings">
      Content 2
    </FluxTab>
    <FluxTab icon="user" label="Profile">
      Content 3
    </FluxTab>
  </FluxTabs>
</template>

<script setup lang="ts">
import { FluxTabs, FluxTab } from '@flux/ui'
import { ref } from 'vue'

const activeTab = ref(0)
</script>
```

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

### Basic Notice Stack Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/flex/notice.md

Demonstrates a basic implementation of the notice stack component.

```vue
<template>
  <Flex
    class="notice-stack"
    flex-direction="column"
    gap="1rem"
  >
    <slot />
  </Flex>
</template>

<script lang="ts" setup>
import Flex from "../flex.vue";
</script>

<style scoped>
.notice-stack {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

```

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

### Basic FluxStepper Implementation

Source: https://github.com/basmilius/flux/blob/main/docs/guide/patterns/stepper-wizard.md

This example demonstrates a typical stepper wizard with three steps for setting up a workspace. It uses v-model to control the current step and includes navigation buttons.

```vue
<template>
    <FluxPane>
        <FluxPaneHeader title="Set up your workspace"/>

        <FluxStepper v-model="current">
            <div :key="0">
                <FluxPaneBody>
                    <FluxFormField label="Workspace name">
                        <FluxFormInput
                            v-model="form.name"
                            placeholder="E.g. Acme Inc."/>
                    </FluxFormField>
                </FluxPaneBody>

                <FluxPaneFooter>
                    <FluxSpacer/>
                    <FluxPrimaryButton
                        label="Next"
                        :disabled="!form.name"
                        @click="next"/>
                </FluxPaneFooter>
            </div>

            <div :key="1">
                <FluxPaneBody>
                    <FluxFormField label="Invite team members">
                        <FluxFormTextArea
                            v-model="form.invites"
                            placeholder="One email per line"/>
                    </FluxFormField>
                </FluxPaneBody>

                <FluxPaneFooter>
                    <FluxSecondaryButton
                        label="Back"
                        @click="back"/>
                    <FluxSpacer/>
                    <FluxPrimaryButton
                        label="Next"
                        @click="next"/>
                </FluxPaneFooter>
            </div>

            <div :key="2">
                <FluxPaneBody>
                    <p>Workspace <strong>{{ form.name }}</strong> is ready to go.</p>
                </FluxPaneBody>

                <FluxPaneFooter>
                    <FluxSecondaryButton
                        label="Back"
                        @click="back"/>
                    <FluxSpacer/>
                    <FluxPrimaryButton
                        label="Finish"
                        icon-leading="circle-check"
                        @click="finish"/>
                </FluxPaneFooter>
            </div>
        </FluxStepper>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxFormField, FluxFormInput, FluxFormTextArea, FluxPane, FluxPaneBody, FluxPaneFooter, FluxPaneHeader, FluxPrimaryButton, FluxSecondaryButton, FluxSpacer, FluxStepper } from '@flux-ui/components';
    import { reactive, ref } from 'vue';

    const current = ref(0);

    const form = reactive({
        name: '',
        invites: ''
    });

    function back(): void {
        current.value = Math.max(0, current.value - 1);
    }

    function next(): void {
        current.value += 1;
    }

    function finish(): void {
        // ... persist the wizard result.
    }
</script>
```

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

### FluxApplicationTop.vue Example

Source: https://github.com/basmilius/flux/blob/main/docs/application/components/top.md

This snippet demonstrates the basic usage of the FluxApplicationTop component, including slots for start and end content, and a FluxTabBar for view navigation.

```vue
<template>
    <FluxApplicationTop
        icon="home"
        title="Application"
    >
        <template #start>
            <FluxMenuToggle />
        </template>

        <template #end>
            <FluxSpacer />
            <FluxLayoutSpacer />
            <FluxLink href="#/">
                <template #icon>
                    <FluxIcon type="cog" />
                </template>
                Settings
            </FluxLink>
        </template>

        <template #tabs>
            <FluxTabBar>
                <FluxTabBarItem :link="{ href: '#/' }">
                    Home
                </FluxTabBarItem>
                <FluxTabBarItem :link="{ href: '#/about' }">
                    About
                </FluxTabBarItem>
            </FluxTabBar>
        </template>
    </FluxApplicationTop>

    <FluxContent>
        <router-view />
    </FluxContent>
</template>

<script setup lang="ts">
import {
    FluxApplicationTop,
    FluxContent,
    FluxIcon,
    FluxLink,
    FluxMenuToggle,
    FluxSpacer,
    FluxTabBar,
    FluxTabBarItem,
} from '@flux/vue'
import { FluxLayoutSpacer } from '@flux/vue/components/layout'
</script>

```

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

### Using useDisabled Composable

Source: https://github.com/basmilius/flux/blob/main/docs/guide/composables/useDisabled.md

Import and use the `useDisabled` composable to manage a component's disabled state, merging local and inherited states. This example shows how to integrate it within a Vue component's setup.

```typescript
import { useDisabled } from '@flux-ui/components';
import { toRef } from 'vue';

const { disabled: componentDisabled } = defineProps<{ 
    disabled?: boolean;
}>();

const disabled = useDisabled(toRef(() => componentDisabled));
```

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

### Utilize useBreakpoints for Responsive Layouts

Source: https://context7.com/basmilius/flux/llms.txt

Employ the useBreakpoints composable to get reactive boolean references for common viewport sizes (xs, sm, md, lg, xl). Use these refs to conditionally render or style components based on the current screen size. Ensure @flux-ui/components is installed.

```vue
<template>
    <FluxFlex :direction="md ? 'horizontal' : 'vertical'" :gap="18">
        <FluxPane style="flex: 1">
            <FluxPaneBody>Main content</FluxPaneBody>
        </FluxPane>
        <FluxPane v-if="md" style="width: 280px">
            <FluxPaneBody>Sidebar</FluxPaneBody>
        </FluxPane>
    </FluxFlex>
</template>

<script lang="ts" setup>
import { FluxFlex, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { useBreakpoints } from '@flux-ui/components';

// xs=0px  sm=640px  md=768px  lg=1024px  xl=1280px
const { xs, sm, md, lg, xl, currentBreakpoint } = useBreakpoints();
</script>
```

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

### Responsive Grid Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/grid/index.md

Illustrates how to create a responsive grid layout using breakpoint props. The layout adapts to different viewport sizes (xs, sm, md, lg, xl). The class `column-example` is used for styling.

```vue
<template>
  <Grid>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">1</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">2</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">3</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">4</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">5</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">6</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">7</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">8</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">9</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">10</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">11</div>
    </GridItem>
    <GridItem :xs="{ span: 4 }" :sm="{ span: 3 }" :md="{ span: 2 }" :lg="{ span: 1 }" :xl="{ span: 1 }">
      <div class="column-example">12</div>
    </GridItem>
  </Grid>
</template>

<script setup lang="ts">
import Grid from "./grid.vue";
import GridItem from "./grid-item.vue";
</script>

<style>
.column-example {
  background-color: #3b82f6;
  color: #fff;
  padding: 1rem;
  text-align: center;
}
</style>
```

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

### Set up Flux Application Shell

Source: https://context7.com/basmilius/flux/llms.txt

Install and import the Flux Application shell components. This sets up the basic structure for a full application, including sidebar, top bar, and content areas.

```bash
bun add @flux-ui/application @flux-ui/components

```

```ts
// main.ts
import '@flux-ui/application/style.css';
import '@flux-ui/components/style.css';

```

```vue
<!-- App.vue -->
<template>
    <FluxApplication>
        <template #menu>
            <FluxApplicationMenu>
                <FluxMenuItem icon="house"     label="Dashboard" :to="{ name: 'dashboard' }"/>
                <FluxMenuItem icon="briefcase" label="Projects"  :to="{ name: 'projects' }"/>
                <FluxMenuItem icon="gear"      label="Settings"  :to="{ name: 'settings' }"/>
            </FluxApplicationMenu>
        </template>

        <FluxApplicationTop title="My App"/>

        <FluxApplicationContent>
            <RouterView v-slot="{ Component }">
                <FluxRouteTransition>
                    <component :is="Component"/>
                </FluxRouteTransition>
            </RouterView>
        </FluxApplicationContent>

        <template #side>
            <FluxApplicationSide>
                <!-- Contextual side panel content -->
            </FluxApplicationSide>
        </template>
    </FluxApplication>
</template>

<script lang="ts" setup>
import { FluxApplication, FluxApplicationContent, FluxApplicationMenu, FluxApplicationSide, FluxApplicationTop } from '@flux-ui/application';
import { FluxMenuItem, FluxRouteTransition } from '@flux-ui/components';
</script>

```

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

### Basic Pane Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pane/index.md

Demonstrates the fundamental usage of the Pane component to display content.

```vue
<template>
  <Pane>This is the content of the pane.</Pane>
</template>

<script setup>
import Pane from "./pane.vue";
</script>
```

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

### FluxTooltipTransition.vue Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/transitions/tooltip.md

This is an example of the FluxTooltipTransition component. It demonstrates how to use the component in a Vue application.

```vue
<template>
  <FluxTooltipTransition mode="in-out">
    <template #default="{ element, தயாராக }">
      <div v-if="தயாராக" class="tooltip-container">
        {{ element.text }}
      </div>
    </template>
  </FluxTooltipTransition>
</template>

<script setup lang="ts">
import { FluxTooltipTransition } from '../src/components/transitions/tooltip'
</script>

<style scoped>
.tooltip-container {
  padding: 8px;
  background-color: #333;
  color: white;
  border-radius: 4px;
}
</style>

```

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

### Install Vue Router

Source: https://github.com/basmilius/flux/blob/main/docs/guide/introduction/installation/vue-router.md

Install Vue Router using your preferred package manager.

```shell
bun add vue-router
```

```shell
pnpm install vue-router
```

```shell
yarn add vue-router
```

```shell
npm install vue-router
```

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

### Basic Action Stack Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/flex/action.md

Demonstrates a basic usage of the Action Stack component with action buttons.

```vue
<template>
  <VActionStack>
    <VButton>Button 1</VButton>
    <VButton>Button 2</VButton>
    <VButton>Button 3</VButton>
  </VActionStack>
</template>

<script setup lang="ts">
import { VActionStack, VButton } from '@...
</script>
```

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

### Basic Filter Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/filter/index.md

A fundamental example showcasing the basic usage of the Flux Filter component.

```vue
<script setup lang="ts">
import {
    FluxFilter,
    FluxFilterState
} from '@flux-ui/components';

const filterState = ref<FluxFilterState>([]);
</script>

<template>
    <FluxFilter v-model="filterState">
        <!-- Filters go here -->
    </FluxFilter>
</template>
```

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

### Basic Info Stack Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/flex/info.md

Demonstrates a simple usage of the Info Stack component to display a few informational messages.

```vue
<template>
  <VInfoStack>
    <VInfo
      title="Info title"
      text="Info text"
    />
    <VInfo
      title="Info title"
      text="Info text"
    />
    <VInfo
      title="Info title"
      text="Info text"
    />
  </VInfoStack>
</template>

<script lang="ts" setup>
import { VInfoStack, VInfo } from '@$/index'
</script>
```

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

### Editor Example for Focal Point Image Component

Source: https://github.com/basmilius/flux/blob/main/docs/components/focal-point/image.md

This example demonstrates the editor mode of the Focal Point Image component, allowing users to adjust the focal point. It uses the 'example' directive to load the editor implementation.

```vue
<template>
  <FocalPointImageEditor
    :focal-point="focalPoint"
    :src="src"
    :alt="alt"
    @update:focal-point="onUpdateFocalPoint"
  />
</template>

<script setup lang="ts">
import FocalPointImageEditor from "./image.vue";
import { ref } from "vue";

const focalPoint = ref({
  x: 0.5,
  y: 0.5,
});
const src = "/path/to/your/image.jpg";
const alt = "An example image";

const onUpdateFocalPoint = (newFocalPoint) => {
  focalPoint.value = newFocalPoint;
};
</script>

```

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

### Controlled Collapsible Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/menu/collapsible.md

An example demonstrating how to control the open state of the collapsible externally using `v-model:isOpened`.

```APIDOC
::: example Controlled || Control the open state from outside with v-model:isOpened.
example=../../code/components/menu/collapsible/controlled.vue
:::
```

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

### Install Flux Internals Package

Source: https://github.com/basmilius/flux/blob/main/docs/internals/index.md

Use the appropriate command for your package manager to install the Flux internals library.

```shell
bun add @flux-ui/internals
```

```shell
pnpm install @flux-ui/internals
```

```shell
yarn add @flux-ui/internals
```

```shell
npm install @flux-ui/internals
```

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

### Basic Action Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/action.md

A simple demonstration of how to use the Action component with a basic label.

```vue
<template>
  <FluxAction label="Click me" />
</template>

```

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

### Clickable Pane as Link Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pane/clickable.md

Example of using the Clickable Pane as an external link, opening a URL in a new tab.

```APIDOC
## Example: As Link

As link || A clickable pane that opens an external URL in a new tab.

```vue
<template>
  <Pane type="link" href="https://example.com" target="_blank">
    Visit our website
  </Pane>
</template>
```
```

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

### Basic Collapsible Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/menu/collapsible.md

A basic example of a collapsible group without its own route. Click the header to toggle its open state.

```APIDOC
::: example Basic || A collapsible group without its own route. Click the header to toggle.
example=../../code/components/menu/collapsible/basic.vue
:::
```

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

### Basic Aspect Ratio

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/aspect-ratio.md

A basic example of how to use the Aspect Ratio component.

```vue
<AspectRatio aspect-ratio="16 / 9">
  <img src="https://via.placeholder.com/1280x720" alt="Placeholder Image">
</AspectRatio>
```

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

### Basic Form Row Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/form/row.md

A basic example demonstrating the usage of the Form Row component to arrange fields horizontally.

```vue
<template>
  <FormRow>
    <FormInput label="First name" name="first_name" />
    <FormInput label="Last name" name="last_name" />
  </FormRow>
</template>

```

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

### Selectable Chip Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/chip.md

A chip that is selectable can be used in filters. This example shows how to implement a selectable chip with a selected state.

```vue
<template>
  <FluxStack direction="row" gap="sm">
    <FluxChip label="Filter 1" :is-selectable="true" :is-selected="isSelected1" @click="isSelected1 = !isSelected1" />
    <FluxChip label="Filter 2" :is-selectable="true" :is-selected="isSelected2" @click="isSelected2 = !isSelected2" />
    <FluxChip label="Filter 3" :is-selectable="true" :is-selected="isSelected3" @click="isSelected3 = !isSelected3" />
  </FluxStack>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isSelected1 = ref(false)
const isSelected2 = ref(true)
const isSelected3 = ref(false)
</script>
```

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

### Sticky Header Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/sticky.md

Demonstrates a typical sticky header implementation. Use this for headers that should stick to the top of the viewport.

```vue
<template>
  <Sticky>
    <template #default="{ isStuck }">
      <AppHeader :class="{ shadow: isStuck }" />
    </template>
  </Sticky>
</template>

<script setup lang="ts">
import Sticky from "./sticky.vue";
import AppHeader from "./app-header.vue";
</script>

<style>
.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
```

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

### Basic Gallery Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/gallery/index.md

Displays a simple gallery with a predefined set of items. Ensure the 'items' prop is correctly bound to an array of image URLs.

```vue
<script setup lang="ts">
import type FluxFocalPointObject from "../../../../src/types/FluxFocalPointObject";

const items: (string | FluxFocalPointObject & { readonly url: string; })[] = [
    "https://via.placeholder.com/300/aabbcc",
    "https://via.placeholder.com/300/ccbbaa",
    "https://via.placeholder.com/300/aabbff",
    "https://via.placeholder.com/300/ffbbaa",
];
</script>

<template>
    <Gallery :items="items" />
</template>
```

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

### Basic Command Palette Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/command-palette.md

A simple command palette with navigation and action items. Can be opened using the '⌘K' or 'Ctrl+K' shortcut or by clicking a button.

```vue
<script setup lang="ts">
import { ref } from 'vue'

import FluxCommandPalette, {
    FluxCommandSource,
    FluxCommandSourceItem
} from '@visue/flux-ui'

const sources: FluxCommandSource[] = [
    {
        key: 'navigation',
        label: 'Navigation',
        items: [
            {
                id: 'home',
                label: 'Home',
                onActivate: () => alert('Navigating to Home')
            },
            {
                id: 'about',
                label: 'About',
                onActivate: () => alert('Navigating to About')
            }
        ]
    },
    {
        key: 'actions',
        label: 'Actions',
        items: [
            {
                id: 'settings',
                label: 'Settings',
                onActivate: () => alert('Opening Settings')
            },
            {
                id: 'logout',
                label: 'Logout',
                onActivate: () => alert('Logging out')
            }
        ]
    }
]

const palette = ref<InstanceType<typeof FluxCommandPalette> | null>(null)
</script>

<template>
    <FluxCommandPalette
        ref="palette"
        :sources="sources"
        has-keyboard-shortcut
    />
    <FluxButton @click="palette?.open()">Open Palette</FluxButton>
</template>
```

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

### Basic Table Row Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/table/row.md

A basic example demonstrating the usage of the table row component. This component is intended for use within a Table.

```vue
<template>
  <Table>
    <TableRow>
      <TableCell>Cell 1</TableCell>
      <TableCell>Cell 2</TableCell>
      <TableCell>Cell 3</TableCell>
    </TableRow>
  </Table>
</template>

<script setup>
import { Table, TableRow, TableCell } from "@/components/table";
</script>
```

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

### Login Form Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/form/index.md

Demonstrates a basic login form structure using Flux components.

```vue
<template>
  <FluxForm>
    <FluxFormGrid>
      <FluxTextInput
        label="Username"
        placeholder="Your username"
      />
      <FluxPasswordInput
        label="Password"
        placeholder="Your password"
      />
    </FluxFormGrid>
    <FluxFormActions>
      <FluxButton>Login</FluxButton>
    </FluxFormActions>
  </FluxForm>
</template>

```

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

### Pane Media - Full Image Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/pane/media.md

Displays a media pane with a full image, utilizing the default configuration.

```vue
<PaneMedia
  image-alt="A beautiful landscape."
  image-focal-point="[0, 0.5]"
  image-url="/images/landscape.jpg"
/>
```

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

### Basic Toggle Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/form/toggle.md

Demonstrates a simple toggle component without any special configurations.

```vue
<template>
  <FluxToggle v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FluxToggle from '../../../../src/components/form/toggle.vue'

const value = ref(false)
</script>
```

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

### Install Flux with Vite Preset (NPM)

Source: https://github.com/basmilius/flux/blob/main/docs/guide/introduction/installation/nuxt.md

Install Flux UI components, sass-embedded, and the Vite preset using NPM for advanced configuration.

```shell
npm install @flux-ui/components sass-embedded @basmilius/vite-preset
```

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

### Basic Grid Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/layout/grid/index.md

Demonstrates a basic usage of the Grid component. This is a simple layout without any responsive adjustments.

```vue
<template>
  <Grid>
    <GridItem>
      <div class="column-example">1</div>
    </GridItem>
    <GridItem>
      <div class="column-example">2</div>
    </GridItem>
    <GridItem>
      <div class="column-example">3</div>
    </GridItem>
    <GridItem>
      <div class="column-example">4</div>
    </GridItem>
  </Grid>
</template>

<script setup lang="ts">
import Grid from "./grid.vue";
import GridItem from "./grid-item.vue";
</script>

<style>
.column-example {
  background-color: #3b82f6;
  color: #fff;
  padding: 1rem;
  text-align: center;
}
</style>
```

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

### Install Flux with Vite Preset (PNPM)

Source: https://github.com/basmilius/flux/blob/main/docs/guide/introduction/installation/nuxt.md

Install Flux UI components, sass-embedded, and the Vite preset using PNPM for advanced configuration.

```shell
pnpm install @flux-ui/components sass-embedded @basmilius/vite-preset
```

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

### Basic Toolbar Group Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/toolbar/group.md

Demonstrates a basic toolbar group with default styling and content.

```vue
<template>
  <section>
    <div class="toolbar-group">
      <slot />
    </div>
  </section>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: false,
  },
});
</script>

<style lang="scss" scoped>
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

```

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

### Incoming Comment Example

Source: https://github.com/basmilius/flux/blob/main/docs/components/comment.md

Demonstrates how to render an incoming comment within a message thread. This example utilizes the component's default slot for content.

```vue
<template>
  <Comment
    posted-by="Alice"
    posted-on="2021-08-17T11:30:00.000Z"
    avatar-src="/images/avatar.png"
  >
    <template #default>
      <p>Hey there!</p>
    </template>
  </Comment>
</template>

<script setup lang="ts">
import Comment from "../code/components/comment/incoming.vue";
</script>
```

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

### Install Vite-preset Packages (Bun)

Source: https://github.com/basmilius/flux/blob/main/docs/dashboard/introduction/installation.md

Use this command to add Flux Dashboard, its components, sass-embedded, and the Vite preset using Bun.

```shell
bun add @flux-ui/dashboard @flux-ui/components sass-embedded @basmilius/vite-preset
```

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

### Install Flux Application with Bun

Source: https://github.com/basmilius/flux/blob/main/docs/application/introduction/installation.md

Use this command to add Flux Application and components to your project using Bun.

```shell
bun add @flux-ui/application @flux-ui/components
```