@madecki/ui 2.0.0 → 2.1.0

package/dist/index.d.cts

@@ -179,6 +179,23 @@ interface SpinnerOverlayProps extends SpinnerProps {
 }
 declare const SpinnerOverlay: ({ isVisible, size, className, }: SpinnerOverlayProps) => react_jsx_runtime.JSX.Element | null;
 
+type ToastVariant = "danger" | "success" | "info";
+type ToastPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastProps {
+    children: ReactNode;
+    variant?: ToastVariant;
+    placement?: ToastPlacement;
+    /**
+     * Time in milliseconds before the toast dismisses itself.
+     * Pass `0` to disable auto-close. Default: `5000`.
+     */
+    autoCloseMs?: number;
+    /** Called after the user closes the toast or auto-close fires. */
+    onClose?: () => void;
+    className?: string;
+}
+declare const Toast: ({ children, variant, placement, autoCloseMs, onClose, className, }: ToastProps) => react_jsx_runtime.JSX.Element | null;
+
 interface BlockQuoteProps {
     children: ReactNode;
     className?: string;
@@ -190,14 +207,31 @@ interface HrProps {
 }
 declare const Hr: ({ className }: HrProps) => react_jsx_runtime.JSX.Element;
 
+type ContentBoxVariant = "info" | "warning" | "success" | "danger";
+
 interface ContentBoxProps {
     children: ReactNode;
-    variant?: "info" | "warning" | "success" | "danger";
+    variant?: ContentBoxVariant;
     icon?: ReactNode;
     className?: string;
 }
 declare const ContentBox: ({ children, variant, icon, className, }: ContentBoxProps) => react_jsx_runtime.JSX.Element;
 
+interface DetailsPanelProps {
+    /** Label / title row for the native `<summary>` element. */
+    summary: ReactNode;
+    /** Shown when the panel is expanded (native `<details>` body). */
+    children: ReactNode;
+    variant?: ContentBoxVariant;
+    /** Optional icon before the summary text (ContentBox-style affordance, inline). */
+    icon?: ReactNode;
+    /** Initial open state; panel remains toggleable (state synced via `onToggle`). */
+    defaultOpen?: boolean;
+    className?: string;
+    id?: string;
+}
+declare const DetailsPanel: ({ summary, children, variant, icon, defaultOpen, className, id, }: DetailsPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface ContainerProps {
     children: ReactNode;
     size?: "sm" | "md" | "lg" | "xl" | "full";
@@ -295,4 +329,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, DetailsPanel, type DetailsPanelProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, Toast, type ToastPlacement, type ToastProps, type ToastVariant, TwitterIcon, Warning, type WarningProps };

package/dist/index.d.ts

@@ -179,6 +179,23 @@ interface SpinnerOverlayProps extends SpinnerProps {
 }
 declare const SpinnerOverlay: ({ isVisible, size, className, }: SpinnerOverlayProps) => react_jsx_runtime.JSX.Element | null;
 
+type ToastVariant = "danger" | "success" | "info";
+type ToastPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastProps {
+    children: ReactNode;
+    variant?: ToastVariant;
+    placement?: ToastPlacement;
+    /**
+     * Time in milliseconds before the toast dismisses itself.
+     * Pass `0` to disable auto-close. Default: `5000`.
+     */
+    autoCloseMs?: number;
+    /** Called after the user closes the toast or auto-close fires. */
+    onClose?: () => void;
+    className?: string;
+}
+declare const Toast: ({ children, variant, placement, autoCloseMs, onClose, className, }: ToastProps) => react_jsx_runtime.JSX.Element | null;
+
 interface BlockQuoteProps {
     children: ReactNode;
     className?: string;
@@ -190,14 +207,31 @@ interface HrProps {
 }
 declare const Hr: ({ className }: HrProps) => react_jsx_runtime.JSX.Element;
 
+type ContentBoxVariant = "info" | "warning" | "success" | "danger";
+
 interface ContentBoxProps {
     children: ReactNode;
-    variant?: "info" | "warning" | "success" | "danger";
+    variant?: ContentBoxVariant;
     icon?: ReactNode;
     className?: string;
 }
 declare const ContentBox: ({ children, variant, icon, className, }: ContentBoxProps) => react_jsx_runtime.JSX.Element;
 
+interface DetailsPanelProps {
+    /** Label / title row for the native `<summary>` element. */
+    summary: ReactNode;
+    /** Shown when the panel is expanded (native `<details>` body). */
+    children: ReactNode;
+    variant?: ContentBoxVariant;
+    /** Optional icon before the summary text (ContentBox-style affordance, inline). */
+    icon?: ReactNode;
+    /** Initial open state; panel remains toggleable (state synced via `onToggle`). */
+    defaultOpen?: boolean;
+    className?: string;
+    id?: string;
+}
+declare const DetailsPanel: ({ summary, children, variant, icon, defaultOpen, className, id, }: DetailsPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface ContainerProps {
     children: ReactNode;
     size?: "sm" | "md" | "lg" | "xl" | "full";
@@ -295,4 +329,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, DetailsPanel, type DetailsPanelProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, Toast, type ToastPlacement, type ToastProps, type ToastVariant, TwitterIcon, Warning, type WarningProps };

package/dist/index.js

@@ -1012,6 +1012,93 @@ var SpinnerOverlay = ({
     }
   );
 };
+
+// src/components/contentBoxVariants.ts
+var contentBoxVariantBorderClasses = {
+  info: "border-blue",
+  warning: "border-warning",
+  success: "border-success",
+  danger: "border-danger"
+};
+var placementClassNames = {
+  "top-left": "top-5 left-5",
+  "top-right": "top-5 right-5",
+  "bottom-left": "bottom-5 left-5",
+  "bottom-right": "bottom-5 right-5"
+};
+function CloseIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+var Toast = ({
+  children,
+  variant = "info",
+  placement = "bottom-right",
+  autoCloseMs = 5e3,
+  onClose,
+  className = ""
+}) => {
+  const [open, setOpen] = useState(true);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const dismiss = useCallback(() => {
+    setOpen(false);
+    onCloseRef.current?.();
+  }, []);
+  useEffect(() => {
+    if (!open || autoCloseMs <= 0) {
+      return;
+    }
+    const id = window.setTimeout(dismiss, autoCloseMs);
+    return () => window.clearTimeout(id);
+  }, [open, autoCloseMs, dismiss]);
+  if (!open) {
+    return null;
+  }
+  const border = contentBoxVariantBorderClasses[variant];
+  const live = variant === "danger" ? "assertive" : "polite";
+  const role = variant === "danger" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role,
+      "aria-live": live,
+      className: `fixed z-50 flex max-w-sm gap-3 rounded-md border-2 bg-darkgray p-5 text-md text-white shadow-lg dark:bg-gray ${placementClassNames[placement]} ${border} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: dismiss,
+            className: "shrink-0 rounded-sm p-2 text-icongray transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
 var BlockQuote = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx(
     "blockquote",
@@ -1025,12 +1112,6 @@ var Hr = ({ className = "" }) => {
   const defaultClassNames = "border border-gray my-4";
   return /* @__PURE__ */ jsx("hr", { className: `${defaultClassNames} ${className}` });
 };
-var variantStyles = {
-  info: "border-blue",
-  warning: "border-warning",
-  success: "border-success",
-  danger: "border-danger"
-};
 var ContentBox = ({
   children,
   variant = "info",
@@ -1040,7 +1121,7 @@ var ContentBox = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `relative border rounded-md my-9 ${variantStyles[variant]} ${className}`,
+      className: `relative border rounded-md my-9 ${contentBoxVariantBorderClasses[variant]} ${className}`,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "absolute flex items-center justify-center p-3 -top-6 right-8 bg-primary border border-darkgray", children: icon }),
         /* @__PURE__ */ jsx("div", { className: "m-7", children })
@@ -1048,6 +1129,65 @@ var ContentBox = ({
     }
   );
 };
+function ChevronDown2({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 7.5L10 12.5L15 7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var DetailsPanel = ({
+  summary,
+  children,
+  variant = "info",
+  icon,
+  defaultOpen = false,
+  className = "",
+  id
+}) => {
+  const border = contentBoxVariantBorderClasses[variant];
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      id,
+      className: `group relative border rounded-md my-9 ${border} ${className}`,
+      open,
+      onToggle: (e) => setOpen(e.currentTarget.open),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "summary",
+          {
+            className: "flex cursor-pointer list-none items-center gap-3 p-7 text-white outline-none transition-colors hover:bg-darkgray/40 dark:hover:bg-white/5 focus-visible:ring-2 focus-visible:ring-blue group-open:pb-3 [&::-webkit-details-marker]:hidden",
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown2, { className: "size-5 shrink-0 text-icongray transition-transform group-open:rotate-180" }),
+              icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-md font-medium text-white dark:text-white", children: summary })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-gray px-7 pb-7 pt-3 dark:border-gray", children })
+      ]
+    }
+  );
+};
 var sizeStyles2 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -1580,6 +1720,6 @@ var InstagramIcon = ({
   return icon;
 };
 
-export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, Textarea, TwitterIcon, Warning };
+export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, DetailsPanel, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, Textarea, Toast, TwitterIcon, Warning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map