dialog-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-example",
  "title": "Dialog",
  "registryDependencies": [
    "button",
    "checkbox",
    "dialog",
    "field",
    "input",
    "input-group",
    "kbd",
    "native-select",
    "select",
    "switch",
    "tabs",
    "textarea",
    "tooltip",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-lyra/examples/dialog-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}