Progress

<script lang="ts">
  import { Progress as Primitive } from '@sveltery/base/progress';
  import { cn } from 'cn';
  import ProgressTrack from './ProgressTrack.svelte';
  import ProgressIndicator from './ProgressIndicator.svelte';
  import type { ProgressProps } from './types.js';
  let { children, class: classProp, value, ...props }: ProgressProps = $props();
</script>
<Primitive.Root {value} data-slot="progress" {...props} class={cn('flex flex-wrap gap-3', classProp)}>
  {@render children?.()}
  <ProgressTrack>
    <ProgressIndicator />
  </ProgressTrack>
</Primitive.Root>

<script lang="ts">
  import { Progress as Primitive } from '@sveltery/base/progress';
  import { cn } from 'cn';
  import type { ProgressIndicatorProps } from './types.js';
  let { children, class: classProp, ...props }: ProgressIndicatorProps = $props();
</script>
<Primitive.Indicator data-slot="progress-indicator" {children} {...props} class={cn('bg-primary h-full transition-all', classProp)} />

<script lang="ts">
  import { Progress as Primitive } from '@sveltery/base/progress';
  import { cn } from 'cn';
  import type { ProgressLabelProps } from './types.js';
  let { children, class: classProp, ...props }: ProgressLabelProps = $props();
</script>
<Primitive.Label data-slot="progress-label" {children} {...props} class={cn('text-sm font-medium', classProp)} />

<script lang="ts">
  import { Progress as Primitive } from '@sveltery/base/progress';
  import { cn } from 'cn';
  import type { ProgressTrackProps } from './types.js';
  let { children, class: classProp, ...props }: ProgressTrackProps = $props();
</script>
<Primitive.Track data-slot="progress-track" {children} {...props} class={cn('bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden', classProp)} />

<script lang="ts">
  import { Progress as Primitive } from '@sveltery/base/progress';
  import { cn } from 'cn';
  import type { ProgressValueProps } from './types.js';
  let { children, class: classProp, ...props }: ProgressValueProps = $props();
</script>
<Primitive.Value data-slot="progress-value" {children} {...props} class={cn('text-muted-foreground ml-auto text-sm tabular-nums', classProp)} />

export type {
  ProgressRootProps as ProgressProps,
  ProgressTrackProps,
  ProgressIndicatorProps,
  ProgressLabelProps,
  ProgressValueProps,
  ProgressState,
  ProgressStatus,
} from '@sveltery/base/progress';

export { default as Progress } from './Progress.svelte';
export { default as ProgressTrack } from './ProgressTrack.svelte';
export { default as ProgressIndicator } from './ProgressIndicator.svelte';
export { default as ProgressLabel } from './ProgressLabel.svelte';
export { default as ProgressValue } from './ProgressValue.svelte';
export type { ProgressProps, ProgressTrackProps, ProgressIndicatorProps, ProgressLabelProps, ProgressValueProps, ProgressState, ProgressStatus } from './types.js';