@plexui/ui 0.20.1 → 0.20.3

package/dist/es/components/Dialog/Dialog.js

@@ -31,12 +31,12 @@ export const Dialog = ({ open: controlledOpen, onOpenChange: controlledOnOpenCha
 const Trigger = ({ children }) => {
     return _jsx(RadixDialog.Trigger, { asChild: true, children: children });
 };
-const Content = ({ children, width = 480, showClose = true, className, placement = "center", mobilePlacement, onOpenAutoFocus, onCloseAutoFocus, }) => {
+const Content = ({ children, width = 480, showClose = true, pill = false, className, placement = "center", mobilePlacement, onOpenAutoFocus, onCloseAutoFocus, }) => {
     const { open, setOpen } = useDialogContext();
     useEscCloseStack(open, () => {
         setOpen(false);
     });
-    return (_jsx(RadixDialog.Portal, { forceMount: true, children: _jsx(TransitionGroup, { enterDuration: 250, exitDuration: 150, className: s.Transition, disableAnimations: true, children: open && (_jsxs("div", { children: [_jsx(RadixDialog.Overlay, { className: s.Overlay }), _jsx(RadixDialog.Content, { forceMount: true, className: s.Content, style: toCssVariables({ "dialog-width": width }), "data-placement": placement === "center" ? undefined : placement, "data-mobile-placement": mobilePlacement, onEscapeKeyDown: preventDefaultHandler, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, children: _jsxs("div", { className: clsx(s.Panel, className), children: [showClose && (_jsx(RadixDialog.Close, { asChild: true, children: _jsx("button", { type: "button", className: s.CloseButton, "aria-label": "Close dialog", children: _jsx("svg", { className: s.CloseIcon, viewBox: "0 0 20 20", width: "20", height: "20", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06" }) }) }) })), children] }) })] }, "dialog")) }) }));
+    return (_jsx(RadixDialog.Portal, { forceMount: true, children: _jsx(TransitionGroup, { enterDuration: 250, exitDuration: 150, className: s.Transition, disableAnimations: true, children: open && (_jsxs("div", { children: [_jsx(RadixDialog.Overlay, { className: s.Overlay }), _jsx(RadixDialog.Content, { forceMount: true, className: s.Content, style: toCssVariables({ "dialog-width": width }), "data-placement": placement === "center" ? undefined : placement, "data-mobile-placement": mobilePlacement, "data-pill": pill ? "" : undefined, onEscapeKeyDown: preventDefaultHandler, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, children: _jsxs("div", { className: clsx(s.Panel, className), children: [showClose && (_jsx(RadixDialog.Close, { asChild: true, children: _jsx("button", { type: "button", className: s.CloseButton, "aria-label": "Close dialog", children: _jsx("svg", { className: s.CloseIcon, viewBox: "0 0 20 20", width: "20", height: "20", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06" }) }) }) })), children] }) })] }, "dialog")) }) }));
 };
 const Header = ({ children, className }) => {
     return _jsx("div", { className: clsx(s.Header, className), children: children });

package/dist/es/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Dialog as RadixDialog } from \"radix-ui\"\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\ntype DialogContextValue = {\n  open: boolean\n  setOpen: (nextState: boolean) => void\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null)\n\nconst useDialogContext = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\nexport type DialogProps = {\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  children: ReactNode\n}\n\nexport const Dialog = ({\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n  children,\n}: DialogProps) => {\n  const [open, setOpen] = useState<boolean>(false)\n  const isOpen = controlledOpen ?? open\n\n  const handleOpenChange = useCallback(\n    (nextState: boolean) => {\n      controlledOnOpenChange?.(nextState)\n      setOpen(nextState)\n    },\n    [controlledOnOpenChange],\n  )\n\n  const store = useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      setOpen: handleOpenChange,\n    }),\n    [isOpen, handleOpenChange],\n  )\n\n  return (\n    <DialogContext value={store}>\n      <RadixDialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n      </RadixDialog.Root>\n    </DialogContext>\n  )\n}\n\nconst Trigger = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Trigger asChild>{children}</RadixDialog.Trigger>\n}\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\nexport type DialogContentProps = {\n  children: ReactNode\n  width?: number | string\n  showClose?: boolean\n  className?: string\n  /**\n   * Where the panel sits: centered, near the top (search, command lists),\n   * a sheet along the bottom, a full-height panel on the start or end side,\n   * or the whole screen.\n   * @default center\n   */\n  placement?: DialogPlacement\n  /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n  mobilePlacement?: Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">\n  /**\n   * Called when focus moves into the dialog on open. Call\n   * `event.preventDefault()` to focus something else yourself.\n   */\n  onOpenAutoFocus?: (event: Event) => void\n  /** Called when focus returns on close. Call `event.preventDefault()` to keep it elsewhere. */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\nconst Content = ({\n  children,\n  width = 480,\n  showClose = true,\n  className,\n  placement = \"center\",\n  mobilePlacement,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n}: DialogContentProps) => {\n  const { open, setOpen } = useDialogContext()\n\n  useEscCloseStack(open, () => {\n    setOpen(false)\n  })\n\n  return (\n    <RadixDialog.Portal forceMount>\n      <TransitionGroup\n        enterDuration={250}\n        exitDuration={150}\n        className={s.Transition}\n        disableAnimations\n      >\n        {open && (\n          <div key=\"dialog\">\n            <RadixDialog.Overlay className={s.Overlay} />\n            <RadixDialog.Content\n              forceMount\n              className={s.Content}\n              style={toCssVariables({ \"dialog-width\": width })}\n              data-placement={placement === \"center\" ? undefined : placement}\n              data-mobile-placement={mobilePlacement}\n              onEscapeKeyDown={preventDefaultHandler}\n              onOpenAutoFocus={onOpenAutoFocus}\n              onCloseAutoFocus={onCloseAutoFocus}\n            >\n              <div className={clsx(s.Panel, className)}>\n                {showClose && (\n                  <RadixDialog.Close asChild>\n                    <button type=\"button\" className={s.CloseButton} aria-label=\"Close dialog\">\n                      <svg\n                        className={s.CloseIcon}\n                        viewBox=\"0 0 20 20\"\n                        width=\"20\"\n                        height=\"20\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          fill=\"currentColor\"\n                          d=\"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\"\n                        />\n                      </svg>\n                    </button>\n                  </RadixDialog.Close>\n                )}\n                {children}\n              </div>\n            </RadixDialog.Content>\n          </div>\n        )}\n      </TransitionGroup>\n    </RadixDialog.Portal>\n  )\n}\n\ntype DialogSlotProps = {\n  children: ReactNode\n  className?: string\n}\n\nconst Header = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Header, className)}>{children}</div>\n}\n\n/** The scrolling part between Header and Footer: with it, only the body scrolls */\nconst Body = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Body, className)}>{children}</div>\n}\n\nconst Footer = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Footer, className)}>{children}</div>\n}\n\nconst Title = ({ children, className }: DialogSlotProps) => {\n  return <RadixDialog.Title className={clsx(s.Title, className)}>{children}</RadixDialog.Title>\n}\n\nconst Description = ({ children, className }: DialogSlotProps) => {\n  return (\n    <RadixDialog.Description className={clsx(s.Description, className)}>\n      {children}\n    </RadixDialog.Description>\n  )\n}\n\nconst Close = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Close asChild>{children}</RadixDialog.Close>\n}\n\nDialog.Trigger = Trigger\nDialog.Content = Content\nDialog.Header = Header\nDialog.Body = Body\nDialog.Footer = Footer\nDialog.Title = Title\nDialog.Description = Description\nDialog.Close = Close\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Dialog as RadixDialog } from \"radix-ui\"\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { preventDefaultHandler, toCssVariables } from \"../../lib/helpers\"\nimport { TransitionGroup } from \"../Transition\"\nimport s from \"@plexui/styles/components/Dialog/Dialog.module.css\"\n\ntype DialogContextValue = {\n  open: boolean\n  setOpen: (nextState: boolean) => void\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null)\n\nconst useDialogContext = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw new Error(\"Dialog compound components must be used inside <Dialog>\")\n  }\n\n  return context\n}\n\nexport type DialogProps = {\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  children: ReactNode\n}\n\nexport const Dialog = ({\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n  children,\n}: DialogProps) => {\n  const [open, setOpen] = useState<boolean>(false)\n  const isOpen = controlledOpen ?? open\n\n  const handleOpenChange = useCallback(\n    (nextState: boolean) => {\n      controlledOnOpenChange?.(nextState)\n      setOpen(nextState)\n    },\n    [controlledOnOpenChange],\n  )\n\n  const store = useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      setOpen: handleOpenChange,\n    }),\n    [isOpen, handleOpenChange],\n  )\n\n  return (\n    <DialogContext value={store}>\n      <RadixDialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n        {children}\n      </RadixDialog.Root>\n    </DialogContext>\n  )\n}\n\nconst Trigger = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Trigger asChild>{children}</RadixDialog.Trigger>\n}\n\nexport type DialogPlacement = \"center\" | \"top\" | \"bottom\" | \"start\" | \"end\" | \"fullscreen\"\n\nexport type DialogContentProps = {\n  children: ReactNode\n  width?: number | string\n  showClose?: boolean\n  /**\n   * Rounder panel and a round close button, for dialogs that sit beside pill controls.\n   * @default false\n   */\n  pill?: boolean\n  className?: string\n  /**\n   * Where the panel sits: centered, near the top (search, command lists),\n   * a sheet along the bottom, a full-height panel on the start or end side,\n   * or the whole screen.\n   * @default center\n   */\n  placement?: DialogPlacement\n  /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */\n  mobilePlacement?: Extract<DialogPlacement, \"center\" | \"bottom\" | \"fullscreen\">\n  /**\n   * Called when focus moves into the dialog on open. Call\n   * `event.preventDefault()` to focus something else yourself.\n   */\n  onOpenAutoFocus?: (event: Event) => void\n  /** Called when focus returns on close. Call `event.preventDefault()` to keep it elsewhere. */\n  onCloseAutoFocus?: (event: Event) => void\n}\n\nconst Content = ({\n  children,\n  width = 480,\n  showClose = true,\n  pill = false,\n  className,\n  placement = \"center\",\n  mobilePlacement,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n}: DialogContentProps) => {\n  const { open, setOpen } = useDialogContext()\n\n  useEscCloseStack(open, () => {\n    setOpen(false)\n  })\n\n  return (\n    <RadixDialog.Portal forceMount>\n      <TransitionGroup\n        enterDuration={250}\n        exitDuration={150}\n        className={s.Transition}\n        disableAnimations\n      >\n        {open && (\n          <div key=\"dialog\">\n            <RadixDialog.Overlay className={s.Overlay} />\n            <RadixDialog.Content\n              forceMount\n              className={s.Content}\n              style={toCssVariables({ \"dialog-width\": width })}\n              data-placement={placement === \"center\" ? undefined : placement}\n              data-mobile-placement={mobilePlacement}\n              data-pill={pill ? \"\" : undefined}\n              onEscapeKeyDown={preventDefaultHandler}\n              onOpenAutoFocus={onOpenAutoFocus}\n              onCloseAutoFocus={onCloseAutoFocus}\n            >\n              <div className={clsx(s.Panel, className)}>\n                {showClose && (\n                  <RadixDialog.Close asChild>\n                    <button type=\"button\" className={s.CloseButton} aria-label=\"Close dialog\">\n                      <svg\n                        className={s.CloseIcon}\n                        viewBox=\"0 0 20 20\"\n                        width=\"20\"\n                        height=\"20\"\n                        aria-hidden=\"true\"\n                      >\n                        <path\n                          fill=\"currentColor\"\n                          d=\"M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06\"\n                        />\n                      </svg>\n                    </button>\n                  </RadixDialog.Close>\n                )}\n                {children}\n              </div>\n            </RadixDialog.Content>\n          </div>\n        )}\n      </TransitionGroup>\n    </RadixDialog.Portal>\n  )\n}\n\ntype DialogSlotProps = {\n  children: ReactNode\n  className?: string\n}\n\nconst Header = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Header, className)}>{children}</div>\n}\n\n/** The scrolling part between Header and Footer: with it, only the body scrolls */\nconst Body = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Body, className)}>{children}</div>\n}\n\nconst Footer = ({ children, className }: DialogSlotProps) => {\n  return <div className={clsx(s.Footer, className)}>{children}</div>\n}\n\nconst Title = ({ children, className }: DialogSlotProps) => {\n  return <RadixDialog.Title className={clsx(s.Title, className)}>{children}</RadixDialog.Title>\n}\n\nconst Description = ({ children, className }: DialogSlotProps) => {\n  return (\n    <RadixDialog.Description className={clsx(s.Description, className)}>\n      {children}\n    </RadixDialog.Description>\n  )\n}\n\nconst Close = ({ children }: { children: ReactNode }) => {\n  return <RadixDialog.Close asChild>{children}</RadixDialog.Close>\n}\n\nDialog.Trigger = Trigger\nDialog.Content = Content\nDialog.Header = Header\nDialog.Body = Body\nDialog.Footer = Footer\nDialog.Title = Title\nDialog.Description = Description\nDialog.Close = Close\n"]}

package/dist/types/components/Dialog/Dialog.d.ts

@@ -9,7 +9,7 @@ export declare const Dialog: {
     Trigger: ({ children }: {
         children: ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ children, width, showClose, className, placement, mobilePlacement, onOpenAutoFocus, onCloseAutoFocus, }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, width, showClose, pill, className, placement, mobilePlacement, onOpenAutoFocus, onCloseAutoFocus, }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
     Body: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
     Footer: ({ children, className }: DialogSlotProps) => import("react/jsx-runtime").JSX.Element;
@@ -24,6 +24,11 @@ export type DialogContentProps = {
     children: ReactNode;
     width?: number | string;
     showClose?: boolean;
+    /**
+     * Rounder panel and a round close button, for dialogs that sit beside pill controls.
+     * @default false
+     */
+    pill?: boolean;
     className?: string;
     /**
      * Where the panel sits: centered, near the top (search, command lists),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",