@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/NotificationCardSection-Ct2oUuXB.mjs

@@ -0,0 +1,153 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { T as r, C as t, a as o, a5 as n, B as d, c as p } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+import { a as l } from "./1-Df9CGZha.mjs";
+const b = () => /* @__PURE__ */ a(c, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "NotificationCard" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A notification card component for displaying user activity notifications with avatar, action type, and timestamp."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Followed Notification" }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          type: "followed",
+          actor: { name: "john_doe", avatar: l },
+          time: "2 hours ago",
+          url: "/profile/john_doe",
+          notifier: "you"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          type: "liked",
+          actor: { name: "jane_smith", avatar: l },
+          time: "5 minutes ago",
+          url: "/post/123",
+          notifier: "your post"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          type: "purchased",
+          actor: { name: "alice_wonder", avatar: l },
+          time: "1 day ago",
+          url: "/item/456",
+          notifier: "your item"
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (i) => {
+        const s = String(i);
+        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "type",
+      type: "'followed' | 'liked' | 'purchased'",
+      default: "required",
+      description: "Type of notification"
+    },
+    {
+      prop: "actor",
+      type: "{ name: string; avatar: string }",
+      default: "required",
+      description: "Actor information"
+    },
+    {
+      prop: "time",
+      type: "string",
+      default: "required",
+      description: "Time of the notification"
+    },
+    {
+      prop: "url",
+      type: "string",
+      default: "required",
+      description: "Link URL"
+    },
+    {
+      prop: "notifier",
+      type: "string",
+      default: "required",
+      description: "What was notified"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      language: "tsx",
+      code: `import { NotificationCard } from '@e-burgos/tucu-ui';
+
+// Followed notification
+<NotificationCard
+  type="followed"
+  actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
+  time="2 hours ago"
+  url="/profile/john_doe"
+  notifier="you"
+/>
+
+// Liked notification
+<NotificationCard
+  type="liked"
+  actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
+  time="5 minutes ago"
+  url="/post/123"
+  notifier="your post"
+/>
+
+// Purchased notification
+<NotificationCard
+  type="purchased"
+  actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
+  time="1 day ago"
+  url="/item/456"
+  notifier="your item"
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  b as default
+};

package/PanelActionCardSection-BgWaRFVD.mjs

@@ -0,0 +1,138 @@
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as a, C as n, a as i, u as s, B as c, c as d } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PanelActionCard" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A panel card component with a scrollable content area and action buttons at the bottom."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(n, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Panel with Actions" }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          title: "Panel Title",
+          actions: [
+            {
+              label: "Cancel",
+              variant: "ghost",
+              onClick: () => console.log("Cancel")
+            },
+            {
+              label: "Save",
+              variant: "solid",
+              color: "primary",
+              onClick: () => console.log("Save")
+            }
+          ],
+          children: /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ e(a, { tag: "p", children: "Content line 1" }),
+            /* @__PURE__ */ e(a, { tag: "p", children: "Content line 2" }),
+            /* @__PURE__ */ e(a, { tag: "p", children: "Content line 3" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(n, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Without Actions" }),
+      /* @__PURE__ */ e(s, { title: "Panel Without Actions", children: /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(a, { tag: "p", children: "This panel has no action buttons." }) }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const r = String(l);
+        return r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "title",
+      type: "string",
+      default: "required",
+      description: "Title of the panel"
+    },
+    {
+      prop: "actions",
+      type: "Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",
+      default: "-",
+      description: "Array of action buttons"
+    },
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "required",
+      description: "Content to display in the scrollable area"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      language: "tsx",
+      code: `import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
+
+// With actions
+<PanelActionCard
+  title="Panel Title"
+  actions={[
+    {
+      label: 'Cancel',
+      variant: 'ghost',
+      onClick: () => handleCancel(),
+    },
+    {
+      label: 'Save',
+      variant: 'solid',
+      color: 'primary',
+      onClick: () => handleSave(),
+    },
+  ]}
+>
+  <div className="space-y-2">
+    <Typography tag="p">Content here</Typography>
+  </div>
+</PanelActionCard>
+
+// Without actions
+<PanelActionCard title="Panel Title">
+  <Typography tag="p">Content without actions</Typography>
+</PanelActionCard>`
+    }
+  ) }) }) })
+] });
+export {
+  b as default
+};

package/PanelActionCardSection-Dpkzx-FH.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"actions",type:"Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",default:"-",description:"Array of action buttons"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"PanelActionCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A panel card component with a scrollable content area and action buttons at the bottom."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:n,data:r})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
+
+// With actions
+<PanelActionCard
+  title="Panel Title"
+  actions={[
+    {
+      label: 'Cancel',
+      variant: 'ghost',
+      onClick: () => handleCancel(),
+    },
+    {
+      label: 'Save',
+      variant: 'solid',
+      color: 'primary',
+      onClick: () => handleSave(),
+    },
+  ]}
+>
+  <div className="space-y-2">
+    <Typography tag="p">Content here</Typography>
+  </div>
+</PanelActionCard>
+
+// Without actions
+<PanelActionCard title="Panel Title">
+  <Typography tag="p">Content without actions</Typography>
+</PanelActionCard>`})})})})]})};exports.default=s;

package/PanelCardSection-DtwFeOlW.js

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],s=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel Card"}),e.jsx(a.PanelCard,{title:"Panel Title",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"}),e.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:s})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PanelCard, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<PanelCard title="Panel Title">
+  <div className="space-y-2">
+    <Typography tag="p">Content line 1</Typography>
+    <Typography tag="p">Content line 2</Typography>
+    <Typography tag="p">Content line 3</Typography>
+  </div>
+</PanelCard>
+
+// With custom className
+<PanelCard title="Custom Panel" className="max-w-md">
+  <Typography tag="p">Custom styled panel</Typography>
+</PanelCard>`})})})})]})};exports.default=n;

package/PanelCardSection-g8jYQ2i1.mjs

@@ -0,0 +1,96 @@
+import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as a, C as r, a as n, v as d, B as c, c as p } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ l(i, { children: [
+  /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PanelCard" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A simple panel card component with a title header and scrollable content area."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ l(r, { className: "p-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Panel Card" }),
+    /* @__PURE__ */ e(d, { title: "Panel Title", children: /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 1" }),
+      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 2" }),
+      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 3" }),
+      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 4" }),
+      /* @__PURE__ */ e(a, { tag: "p", children: "Content line 5" })
+    ] }) })
+  ] }) }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => {
+        const s = String(t);
+        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "title",
+      type: "string",
+      default: "required",
+      description: "Title of the panel"
+    },
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "required",
+      description: "Content to display in the scrollable area"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      language: "tsx",
+      code: `import { PanelCard, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<PanelCard title="Panel Title">
+  <div className="space-y-2">
+    <Typography tag="p">Content line 1</Typography>
+    <Typography tag="p">Content line 2</Typography>
+    <Typography tag="p">Content line 3</Typography>
+  </div>
+</PanelCard>
+
+// With custom className
+<PanelCard title="Custom Panel" className="max-w-md">
+  <Typography tag="p">Custom styled panel</Typography>
+</PanelCard>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};