4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T20ab,import { useEffect, useState } from 'react' import { Controller, useForm, useWatch } from 'react-hook-form' import { Card } from '../surface' import { Shell, Sidebar, Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Field, Input, Textarea } from '../Input' import { Button } from '../Button' import { Switch, TooltipProvider } from '../controls' import { Slider } from '../slider' import { RadioGroup } from '../radiogroup' import { Tabs } from '../disclosure' import { Separator } from '../separator' import { Badge, Blob } from '../media' import { NavLink } from '../NavLink' import { BottomNav, type NavItem } from '../BottomNav' const NAV: NavItem[] = [ { href: '/', label: 'Overview', icon: 'overview', tone: 'purple' }, { href: '/inbox', label: 'Inbox', icon: 'mail', tone: 'blue' }, { href: '/board', label: 'Board', icon: 'log', tone: 'mint' }, { href: '/messages', label: 'Messages', icon: 'comment', tone: 'pink' }, { href: '/settings', label: 'Settings', icon: 'settings', tone: 'orange' }, ] const HERE = '/settings' /** Every value the form owns, in one object — so "has anything changed?" is a * single comparison against the last saved copy rather than six `useState` * flags that drift out of sync the moment a seventh field is added. */ interface Settings { name: string bio: string emailNotif: boolean pushNotif: boolean density: string volume: number } const INITIAL: Settings = { name: 'Ada Lovelace', bio: 'Building puffy interfaces.', emailNotif: true, pushNotif: false, density: 'comfortable', volume: 60, } /** An example settings screen: app shell, tabbed sections of 1st-Pouf form * controls, and a save bar that only wakes up when something actually * changed — Cancel restores the last saved values, Save commits them. */ export function SettingsBlock() { const [tab, setTab] = useState('profile') const [saved, setSaved] = useState(INITIAL) const [justSaved, setJustSaved] = useState(false) const { control, handleSubmit, reset, formState: { isDirty }, } = useForm({ defaultValues: INITIAL }) const form = useWatch({ control }) useEffect(() => { if (!isDirty) return const warn = (event: BeforeUnloadEvent) => { event.preventDefault() event.returnValue = '' } window.addEventListener('beforeunload', warn) return () => window.removeEventListener('beforeunload', warn) }, [isDirty]) const save = handleSubmit((values) => { setSaved(values) reset(values) setJustSaved(true) }) function changed(onChange: (value: T) => void) { return (value: T) => { onChange(value) setJustSaved(false) } } const profile = ( {(id, describedBy) => ( ( )} /> )} {(id, describedBy) => ( (

)}
          />
        )}
      </Field>
      <Field label="Density">
        {() => (
          <Controller
            name="density"
            control={control}
            render={({ field }) => (
              <RadioGroup
                label="Density"
                value={field.value}
                onChange={changed(field.onChange)}
                options={[
                  { value: 'comfortable', label: 'Comfortable' },
                  { value: 'compact', label: 'Compact' },
                ]}
              />
            )}
          />
        )}
      </Field>
    </Stack>
  )

const notifications = (
    <Stack gap={4}>
      <Row justify="between">
        <Stack gap={1}>
          <Text>Email notifications</Text>
          <Text size="sm" muted>Product news and account activity.</Text>
        </Stack>
        <Controller
          name="emailNotif"
          control={control}
          render={({ field }) => (
            <Switch
              checked={field.value}
              onChange={changed(field.onChange)}
              label="Email notifications"
            />
          )}
        />
      </Row>
      <Separator />
      <Row justify="between">
        <Stack gap={1}>
          <Text>Push notifications</Text>
          <Text size="sm" muted>Sent to your devices in real time.</Text>
        </Stack>
        <Controller
          name="pushNotif"
          control={control}
          render={({ field }) => (
            <Switch
              checked={field.value}
              onChange={changed(field.onChange)}
              label="Push notifications"
            />
          )}
        />
      </Row>
      <Separator />
      <Stack gap={2}>
        <Row justify="between">
          <Text>Alert volume</Text>
          <Text size="sm" muted num>{form.volume}</Text>
        </Row>
        <Controller
          name="volume"
          control={control}
          render={({ field }) => (
            <Slider
              value={[field.value]}
              onChange={(value) => changed(field.onChange)(value[0] ?? 0)}
              label="Alert volume"
            />
          )}
        />
      </Stack>
    </Stack>
  )

return (
    <TooltipProvider>
      <Shell>
        <Sidebar mobile="hide">
          <Row gap={2} wrap={false}>
            <Blob icon="target" tone="purple" size="sm" />
            <Heading level={3}>Acme</Heading>
          </Row>
          {NAV.map((item) => (
            <NavLink key={item.href} href={item.href} currentPath={HERE} icon={item.icon} tone={item.tone}>
              {item.label}
            </NavLink>
          ))}
        </Sidebar>

<Stack gap={5}>
          <Row justify="between">
            <Stack gap={1}>
              <Eyebrow>Account</Eyebrow>
              <Heading level={1}>Settings</Heading>
            </Stack>
            {isDirty ? (
              <Badge tone="yellow">Unsaved changes</Badge>
            ) : justSaved ? (
              <Badge tone="mint">Saved</Badge>
            ) : null}
          </Row>

<Card>
            <form onSubmit={save}>
              <Stack gap={5}>
                <Tabs
                  value={tab}
                  onChange={setTab}
                  tabs={[
                    { value: 'profile', label: 'Profile', content: profile },
                    { value: 'notifications', label: 'Notifications', content: notifications },
                  ]}
                />
                <Separator />
                <Row justify="between">
                  <Text size="sm" muted>
                    {isDirty ? 'You have unsaved changes.' : 'Everything is up to date.'}
                  </Text>
                  <Row gap={2} wrap={false}>
                    <Button
                      variant="quiet"
                      disabled={!isDirty}
                      onClick={() => {
                        reset(saved)
                        setJustSaved(false)
                      }}
                    >
                      Cancel
                    </Button>
                    <Button type="submit" tone="mint" disabled={!isDirty}>
                      Save changes
                    </Button>
                  </Row>
                </Row>
              </Stack>
            </form>
          </Card>
          <Spacer />
        </Stack>
      </Shell>
      <BottomNav primary={NAV.slice(0, 4)} groups={[{ title: 'App', items: NAV }]} currentPath={HERE} />
    </TooltipProvider>
  )
}
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-hook-form",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form"}]]}]}]]}],["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/controls.json","https://1st-pouf.worksonmy.dev/r/disclosure.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/radio-group.json","https://1st-pouf.worksonmy.dev/r/separator.json","https://1st-pouf.worksonmy.dev/r/slider.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/settings.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/settings.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>