@madecki/ui 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.1.0](https://github.com/madecki/ui/compare/v2.0.0...v2.1.0) (2026-04-08)
+
+### Features
+
+* add DetailsPanel native details/summary disclosure ([d1d24d9](https://github.com/madecki/ui/commit/d1d24d989537fe1845aeb5059b3f59d745357c23))
+* add Toast with placement, auto-close, and variants ([5874709](https://github.com/madecki/ui/commit/587470962cf265eafe8cc9659b78b073f6ef1756))
+
 ## [2.0.0](https://github.com/madecki/ui/compare/v1.5.0...v2.0.0) (2026-04-08)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -424,6 +424,47 @@ Full-screen loading overlay.
 <SpinnerOverlay isVisible={isLoading} />
 ```
 
+#### Toast
+
+Fixed-position message in any screen corner, with configurable auto-dismiss (milliseconds) and a close control. Border colors match semantic tokens (`info` uses the same blue accent as `ContentBox`).
+
+```tsx
+import { Toast } from "@madecki/ui";
+import { useState } from "react";
+
+function Example() {
+  const [toastKey, setToastKey] = useState(0);
+
+  return (
+    <>
+      <button type="button" onClick={() => setToastKey((n) => n + 1)}>
+        Save
+      </button>
+      {toastKey > 0 ? (
+        <Toast
+          key={toastKey}
+          variant="success"
+          placement="bottom-right"
+          autoCloseMs={4000}
+          onClose={() => setToastKey(0)}
+        >
+          <p className="text-white">Saved.</p>
+        </Toast>
+      ) : null}
+    </>
+  );
+}
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | (required) | Message body (use `Text` / markup as needed). |
+| `variant` | `"info"` \| `"success"` \| `"danger"` | `"info"` | Semantic style (border / live region). |
+| `placement` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` | `"bottom-right"` | Viewport corner (`fixed`, offset with spacing token `5`). |
+| `autoCloseMs` | `number` | `5000` | Auto-dismiss delay in ms; use `0` to disable. |
+| `onClose` | `() => void` | — | Fired when the toast is dismissed (timer or close control). |
+| `className` | `string` | `""` | Extra classes on the root element. |
+
 ### Content Components
 
 #### BlockQuote
@@ -452,6 +493,37 @@ import { ContentBox, Info, Warning } from "@madecki/ui";
 </ContentBox>
 ```
 
+#### DetailsPanel
+
+Collapsible panel using native **`<details>`** and **`<summary>`** (accessible disclosure), with the same border variants as `ContentBox`.
+
+```tsx
+import { DetailsPanel, Info } from "@madecki/ui";
+
+<DetailsPanel variant="info" summary="Show more">
+  <p className="text-white">Extra content appears here when expanded.</p>
+</DetailsPanel>
+
+<DetailsPanel
+  variant="warning"
+  icon={<Info />}
+  defaultOpen
+  summary="Important details"
+>
+  <p className="text-white">Initially open; still toggles like a normal details element.</p>
+</DetailsPanel>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `ReactNode` | (required) | Content of the `<summary>` row (click to toggle). |
+| `children` | `ReactNode` | (required) | Panel body shown when open. |
+| `variant` | `"info"` \| `"warning"` \| `"success"` \| `"danger"` | `"info"` | Border color (matches `ContentBox`). |
+| `icon` | `ReactNode` | — | Optional icon before the summary text. |
+| `defaultOpen` | `boolean` | `false` | Initial open state; toggling still uses native `<details>` behavior (open state is synced in React so `defaultOpen` works reliably). |
+| `className` | `string` | `""` | Extra classes on `<details>`. |
+| `id` | `string` | — | `id` on `<details>`. |
+
 #### Hr
 
 Styled horizontal rule.
@@ -589,6 +661,7 @@ There is **no** separate manual changelog step: if it is not described in a merg
 This project uses [Conventional Commits](https://www.conventionalcommits.org/) enforced by [commitlint](https://commitlint.js.org/):
 
 - **Locally:** Husky runs **`commitlint`** on the **`commit-msg`** hook, so **`git commit` fails** if the message does not follow the rules (bypass only with **`git commit --no-verify`**).
+- **Locally:** Husky runs **`npm run precheck`** on **`pre-push`** (typecheck, lint, build, tests, Storybook build — same as CI/Release). Bypass with **`git push --no-verify`** if you must.
 - **On `main`:** CI runs commitlint on **every push** for the commits in that push, so bad messages are caught even if someone skipped the hook.
 
 **Format:** `type(scope?): description`

package/cursor-rule-template.md

@@ -44,7 +44,7 @@ This file contains:
 ## Import Pattern
 
 \`\`\`tsx
-import { Container, Stack, Heading, Text, Button } from "@madecki/ui";
+import { Container, Stack, Heading, Text, Button, DetailsPanel, Toast } from "@madecki/ui";
 import { Heart, Info } from "@madecki/ui";
 \`\`\`
 

package/dist/index.cjs

@@ -1014,6 +1014,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__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(true);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
+  const dismiss = react.useCallback(() => {
+    setOpen(false);
+    onCloseRef.current?.();
+  }, []);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
 var BlockQuote = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "blockquote",
@@ -1027,12 +1114,6 @@ var Hr = ({ className = "" }) => {
   const defaultClassNames = "border border-gray my-4";
   return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: `${defaultClassNames} ${className}` });
 };
-var variantStyles = {
-  info: "border-blue",
-  warning: "border-warning",
-  success: "border-success",
-  danger: "border-danger"
-};
 var ContentBox = ({
   children,
   variant = "info",
@@ -1042,7 +1123,7 @@ var ContentBox = ({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute flex items-center justify-center p-3 -top-6 right-8 bg-primary border border-darkgray", children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-7", children })
@@ -1050,6 +1131,65 @@ var ContentBox = ({
     }
   );
 };
+function ChevronDown2({ className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = react.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "details",
+    {
+      id,
+      className: `group relative border rounded-md my-9 ${border} ${className}`,
+      open,
+      onToggle: (e) => setOpen(e.currentTarget.open),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronDown2, { className: "size-5 shrink-0 text-icongray transition-transform group-open:rotate-180" }),
+              icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 text-md font-medium text-white dark:text-white", children: summary })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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",
@@ -1587,6 +1727,7 @@ exports.Button = Button;
 exports.ButtonTransparent = ButtonTransparent;
 exports.Container = Container;
 exports.ContentBox = ContentBox;
+exports.DetailsPanel = DetailsPanel;
 exports.GradientButton = GradientButton;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
@@ -1608,6 +1749,7 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.Toast = Toast;
 exports.TwitterIcon = TwitterIcon;
 exports.Warning = Warning;
 //# sourceMappingURL=index.cjs.map