- "content": "import type { Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DialogPrimitive from \"@kobalte/core/dialog\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal: Component<DialogPrimitive.DialogPortalProps> = (props) => {\n const [, rest] = splitProps(props, [\"children\"])\n return (\n <DialogPrimitive.Portal {...rest}>\n <div class=\"fixed inset-0 z-50 flex items-start justify-center sm:items-center\">\n {props.children}\n </div>\n </DialogPrimitive.Portal>\n )\n}\n\ntype DialogOverlayProps<T extends ValidComponent = \"div\"> =\n DialogPrimitive.DialogOverlayProps<T> & { class?: string | undefined }\n\nconst DialogOverlay = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, DialogOverlayProps<T>>\n) => {\n const [, rest] = splitProps(props as DialogOverlayProps, [\"class\"])\n return (\n <DialogPrimitive.Overlay\n class={cn(\n \"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0\",\n props.class\n )}\n {...rest}\n />\n )\n}\n\ntype DialogContentProps<T extends ValidComponent = \"div\"> =\n DialogPrimitive.DialogContentProps<T> & {\n class?: string | undefined\n children?: JSX.Element\n }\n\nconst DialogContent = <T extends ValidComponent = \"div\">(\n props: PolymorphicProps<T, DialogContentProps<T>>\n) => {\n const [, rest] = splitProps(props as DialogContentProps, [\"class\", \"children\"])\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n class={cn(\n \"fixed left-1/2 top-1/2 z-50 grid max-h-screen w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto border bg-background p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg\",\n props.class\n )}\n {...rest}\n >\n {props.children}\n <DialogPrimitive.CloseButton class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"size-4\"\n >\n <path d=\"M18 6l-12 12\" />\n <path d=\"M6 6l12 12\" />\n </svg>\n <span class=\"sr-only\">Close</span>\n </DialogPrimitive.CloseButton>\n </DialogPrimitive.Content>\n </DialogPortal>\n )\n}\n\nconst DialogHeader: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <div class={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", props.class)} {...rest} />\n )\n}\n\nconst DialogFooter: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <div\n class={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", props.class)}\n {...rest}\n />\n )\n}\n\ntype DialogTitleProps<T extends ValidComponent = \"h2\"> = DialogPrimitive.DialogTitleProps<T> & {\n class?: string | undefined\n}\n\nconst DialogTitle = <T extends ValidComponent = \"h2\">(\n props: PolymorphicProps<T, DialogTitleProps<T>>\n) => {\n const [, rest] = splitProps(props as DialogTitleProps, [\"class\"])\n return (\n <DialogPrimitive.Title\n class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n {...rest}\n />\n )\n}\n\ntype DialogDescriptionProps<T extends ValidComponent = \"p\"> =\n DialogPrimitive.DialogDescriptionProps<T> & {\n class?: string | undefined\n }\n\nconst DialogDescription = <T extends ValidComponent = \"p\">(\n props: PolymorphicProps<T, DialogDescriptionProps<T>>\n) => {\n const [, rest] = splitProps(props as DialogDescriptionProps, [\"class\"])\n return (\n <DialogPrimitive.Description\n class={cn(\"text-sm text-muted-foreground\", props.class)}\n {...rest}\n />\n )\n}\n\nexport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription\n}\n"
0 commit comments