const e = `
<Box className="flex flex-col gap-[var(--spacing-4)]">
  {/* Field-level loading — all controls show skeleton */}
  <Field isLoading>
    <FieldLabel htmlFor="loading-field">Field-level loading</FieldLabel>
    <FieldControl>
      <Input id="loading-field" type="email" placeholder="Shows skeleton" />
    </FieldControl>
    <FieldDescription>isLoading on Field propagates via context</FieldDescription>
  </Field>

  {/* FieldControl-level loading — only this control shows skeleton */}
  <Field>
    <FieldLabel htmlFor="ctrl-loading">FieldControl-level loading</FieldLabel>
    <FieldControl isLoading>
      <Input id="ctrl-loading" placeholder="Shows skeleton" />
    </FieldControl>
  </Field>

  {/* Opt-out — FieldControl overrides Field isLoading */}
  <Field isLoading>
    <FieldLabel htmlFor="opt-out">Opt-out (isLoading=false on FieldControl)</FieldLabel>
    <FieldControl isLoading={false}>
      <Input id="opt-out" placeholder="Renders normally" />
    </FieldControl>
  </Field>

  {/* Render-prop loading — Switch shows a pill skeleton */}
  <Field
    name="newsletter"
    isLoading
    render={({ fieldState, isLoading: loading }) => (
      <Box className="flex flex-row items-center justify-between gap-[var(--spacing-4)]">
        <Box className="flex flex-col gap-[var(--spacing-1)]">
          <FieldLabel isError={Boolean(fieldState?.error)}>Render-prop loading (Switch)</FieldLabel>
          <FieldDescription>isLoading is forwarded to the render function</FieldDescription>
        </Box>
        {loading ? <BaseSkeleton className="h-[var(--spacing-6)] w-[var(--spacing-10)] rounded-full" /> : <Switch />}
      </Box>
    )}
  />

  {/* Render-prop loading — Checkbox shows a square skeleton */}
  <Field
    name="terms"
    isLoading
    render={({ fieldState, isLoading: loading }) => (
      <Box className="flex flex-row items-center gap-[var(--spacing-3)]">
        {loading ? (
          <BaseSkeleton className="h-[var(--spacing-5)] w-[var(--spacing-5)] rounded-[var(--border-radius-sm)]" />
        ) : (
          <Checkbox id="terms-loading" />
        )}
        <Box className="flex flex-col gap-[var(--spacing-1)]">
          <FieldLabel htmlFor="terms-loading" isError={Boolean(fieldState?.error)}>
            Render-prop loading (Checkbox)
          </FieldLabel>
          <FieldDescription>isLoading is forwarded to the render function</FieldDescription>
        </Box>
      </Box>
    )}
  />

  {/* Render-prop loading — Switch group shows skeleton rows */}
  <Field
    name="notifications"
    isLoading
    render={({ fieldState, isLoading: loading }) => (
      <Box className="flex flex-col gap-[var(--spacing-2)]">
        <FieldLabel isError={Boolean(fieldState?.error)}>Render-prop loading (Switch group)</FieldLabel>
        <FieldDescription>isLoading is forwarded to the render function</FieldDescription>
        <Box className="flex flex-col gap-[var(--spacing-3)]" role="group" aria-label="Notification preferences">
          {loading ? (
            <>
              <BaseSkeleton className="h-[var(--spacing-8)] w-full rounded-[var(--border-radius-md)]" />
              <BaseSkeleton className="h-[var(--spacing-8)] w-full rounded-[var(--border-radius-md)]" />
              <BaseSkeleton className="h-[var(--spacing-8)] w-full rounded-[var(--border-radius-md)]" />
            </>
          ) : (
            <>
              <Box className="flex flex-row items-center justify-between">
                <Text>Email notifications</Text>
                <Switch aria-label="Email notifications" />
              </Box>
              <Box className="flex flex-row items-center justify-between">
                <Text>SMS notifications</Text>
                <Switch aria-label="SMS notifications" />
              </Box>
              <Box className="flex flex-row items-center justify-between">
                <Text>Push notifications</Text>
                <Switch aria-label="Push notifications" />
              </Box>
            </>
          )}
        </Box>
      </Box>
    )}
  />

  {/* Render-prop loading — CheckboxGroup shows a tall skeleton block */}
  <Field
    name="interests"
    isLoading
    render={({ fieldState, isLoading: loading }) => (
      <Box className="flex flex-col gap-[var(--spacing-2)]">
        <FieldLabel isError={Boolean(fieldState?.error)}>Render-prop loading (CheckboxGroup)</FieldLabel>
        {loading ? (
          <BaseSkeleton className="h-[var(--spacing-20)] w-full rounded-[var(--border-radius-md)]" />
        ) : (
          <CheckboxGroup value={[]}>
            {[
              { value: 'tech', label: 'Technology' },
              { value: 'design', label: 'Design' },
              { value: 'marketing', label: 'Marketing' },
            ].map(opt => (
              <Box className="flex flex-row items-center gap-[var(--spacing-2)]" key={opt.value}>
                <Checkbox value={opt.value} id={\`interests-loading-\${opt.value}\`} />
                <Label variant="subtitle" htmlFor={\`interests-loading-\${opt.value}\`}>
                  {opt.label}
                </Label>
              </Box>
            ))}
          </CheckboxGroup>
        )}
        <FieldDescription>isLoading is forwarded to the render function</FieldDescription>
      </Box>
    )}
  />
</Box>
`;
export {
  e as default
};
//# sourceMappingURL=loadingSource.js.map
