singularity-components 0.1.140 → 0.1.193

package/README.md

@@ -1,6 +1,8 @@
 ## Build
 
-npm run build
+```bash
+pnpm build
+```
 
 ### Include component in build
 
@@ -8,12 +10,42 @@ Export from main.ts
 
 ## Publish to npm
 
-npm publish
+```bash
+pnpm login (if needed)
+pnpm publish
+```
 
 ## Start Storybook:
 
-npm run storybook
+```bash
+pnpm storybook
+```
 
 ## Pack locally
 
-npm pack singularity-components
+```bash
+pnpm pack singularity-components
+```
+
+OR
+
+```bash
+pnpm pack
+```
+
+Can check with `pnpm pack --dry-run`
+Or run `pnpm pack`
+
+Creates a `singularity-components-1.0.0.tgz`
+
+In other proj add:
+
+```json
+{
+  "dependencies": {
+    "singularity-components": "file:../path-to-tarball/singularity-components-1.X.X.tgz"
+  }
+}
+```
+
+and `pnpm install`

package/dist/components/blocks/cards/blogpost-card.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    id: number;
+    image: string;
+    categories: string[];
+    date: string;
+    title: string;
+    excerpt: string;
+}
+declare function BlogPostCard({ id, image, title, categories, date, excerpt, }: Props): react_jsx_runtime.JSX.Element;
+
+export { BlogPostCard as default };

package/dist/components/blocks/cards/blogpost-card.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from "./card.js";
+import { Link } from "../../primitives/link/link.js";
+import {
+  TextTime,
+  Heading,
+  Text,
+  TextSpan,
+  Badges,
+  Badge,
+  Icon,
+  UiImage
+} from "../../primitives/index.js";
+function BlogPostCard({
+  id,
+  image,
+  title,
+  categories,
+  date,
+  excerpt
+}) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      to: `/posts/${id}`,
+      variant: "no-decoration",
+      className: "sg:group sg:block sg:h-full",
+      children: /* @__PURE__ */ jsxs(Card, { className: "sg:overflow-hidden sg:transition-shadow sg:hover:shadow-lg sg:h-full sg:flex sg:flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "sg:aspect-16/10 sg:overflow-hidden", children: /* @__PURE__ */ jsx(
+          UiImage,
+          {
+            src: image,
+            alt: title,
+            className: "sg:h-full sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105",
+            loading: "lazy"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "sg:p-5 sg:flex sg:flex-col sg:grow", children: [
+          categories && categories.length > 0 && /* @__PURE__ */ jsx(Badges, { className: "sg:mb-2", children: categories.map((cat) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: cat }, cat)) }),
+          /* @__PURE__ */ jsx(TextTime, { size: "xs", foreground: "muted-foreground", children: date }),
+          /* @__PURE__ */ jsx(
+            Heading,
+            {
+              variant: "h6",
+              as: "h3",
+              className: "sg:mt-1 sg:group-hover:text-primary sg:transition-colors",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              foreground: "muted-foreground",
+              className: "sg:mt-2 sg:line-clamp-2",
+              children: excerpt
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            TextSpan,
+            {
+              size: "sm",
+              foreground: "primary",
+              className: "sg:mt-auto sg:pt-3 sg:inline-flex sg:items-center sg:gap-1",
+              children: [
+                "Read more ",
+                /* @__PURE__ */ jsx(Icon, { icon: "ArrowRight", size: "xs" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  BlogPostCard as default
+};
+//# sourceMappingURL=blogpost-card.js.map

package/dist/components/blocks/cards/blogpost-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/cards/blogpost-card.tsx"],"sourcesContent":["import { Card, CardContent } from \"./card\";\r\nimport { Link } from \"../../primitives/link/link\";\r\nimport {\r\n  TextTime,\r\n  Heading,\r\n  Text,\r\n  TextSpan,\r\n  Badges,\r\n  Badge,\r\n  Icon,\r\n  UiImage,\r\n} from \"../../primitives/index\";\r\n\r\ninterface Props {\r\n  id: number;\r\n  image: string;\r\n  categories: string[];\r\n  date: string;\r\n  title: string;\r\n  excerpt: string;\r\n}\r\n\r\nexport default function BlogPostCard({\r\n  id,\r\n  image,\r\n  title,\r\n  categories,\r\n  date,\r\n  excerpt,\r\n}: Props) {\r\n  return (\r\n    <Link\r\n      to={`/posts/${id}`}\r\n      variant=\"no-decoration\"\r\n      className=\"sg:group sg:block sg:h-full\"\r\n    >\r\n      <Card className=\"sg:overflow-hidden sg:transition-shadow sg:hover:shadow-lg sg:h-full sg:flex sg:flex-col\">\r\n        <div className=\"sg:aspect-16/10 sg:overflow-hidden\">\r\n          <UiImage\r\n            src={image}\r\n            alt={title}\r\n            className=\"sg:h-full sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105\"\r\n            loading=\"lazy\"\r\n          />\r\n        </div>\r\n        <CardContent className=\"sg:p-5 sg:flex sg:flex-col sg:grow\">\r\n          {categories && categories.length > 0 && (\r\n            <Badges className=\"sg:mb-2\">\r\n              {categories.map((cat) => (\r\n                <Badge key={cat} variant=\"secondary\">\r\n                  {cat}\r\n                </Badge>\r\n              ))}\r\n            </Badges>\r\n          )}\r\n          <TextTime size=\"xs\" foreground=\"muted-foreground\">\r\n            {date}\r\n          </TextTime>\r\n          <Heading\r\n            variant=\"h6\"\r\n            as=\"h3\"\r\n            className=\"sg:mt-1 sg:group-hover:text-primary sg:transition-colors\"\r\n          >\r\n            {title}\r\n          </Heading>\r\n          <Text\r\n            size=\"sm\"\r\n            foreground=\"muted-foreground\"\r\n            className=\"sg:mt-2 sg:line-clamp-2\"\r\n          >\r\n            {excerpt}\r\n          </Text>\r\n          <TextSpan\r\n            size=\"sm\"\r\n            foreground=\"primary\"\r\n            className=\"sg:mt-auto sg:pt-3 sg:inline-flex sg:items-center sg:gap-1\"\r\n          >\r\n            Read more <Icon icon=\"ArrowRight\" size=\"xs\" />\r\n          </TextSpan>\r\n        </CardContent>\r\n      </Card>\r\n    </Link>\r\n  );\r\n}\r\n"],"mappings":"AAsCU,cAkCA,YAlCA;AAtCV,SAAS,MAAM,mBAAmB;AAClC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWQ,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,UAAU,EAAE;AAAA,MAChB,SAAQ;AAAA,MACR,WAAU;AAAA,MAEV,+BAAC,QAAK,WAAU,4FACd;AAAA,4BAAC,SAAI,WAAU,sCACb;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAQ;AAAA;AAAA,QACV,GACF;AAAA,QACA,qBAAC,eAAY,WAAU,sCACpB;AAAA,wBAAc,WAAW,SAAS,KACjC,oBAAC,UAAO,WAAU,WACf,qBAAW,IAAI,CAAC,QACf,oBAAC,SAAgB,SAAQ,aACtB,iBADS,GAEZ,CACD,GACH;AAAA,UAEF,oBAAC,YAAS,MAAK,MAAK,YAAW,oBAC5B,gBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,IAAG;AAAA,cACH,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAW;AAAA,cACX,WAAU;AAAA,cACX;AAAA;AAAA,gBACW,oBAAC,QAAK,MAAK,cAAa,MAAK,MAAK;AAAA;AAAA;AAAA,UAC9C;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/blocks/cards/card.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/blocks/cards/card.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../utils/index.js";
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "sg:ring-foreground/10 sg:bg-card sg:gap-6 sg:overflow-hidden sg:rounded-2xl sg:ring-1 sg:has-[>img:first-child]:pt-0 sg:data-[size=sm]:gap-4 sg:data-[size=sm]:py-4 sg:*:[img:first-child]:rounded-t-xl sg:*:[img:last-child]:rounded-b-xl sg:group/card sg:flex sg:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "sg:gap-2 sg:rounded-t-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-b]:pb-6 sg:group-data-[size=sm]/card:[.border-b]:pb-4 sg:group/card-header sg:@container/card-header sg:grid sg:auto-rows-min sg:items-start sg:has-data-[slot=card-action]:grid-cols-[1fr_auto] sg:has-data-[slot=card-description]:grid-rows-[auto_auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-title", ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-description", ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "sg:col-start-2 sg:row-span-2 sg:row-start-1 sg:self-start sg:justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("sg:px-6 sg:group-data-[size=sm]/card:px-4", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "sg:rounded-b-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-t]:pt-6 sg:group-data-[size=sm]/card:[.border-t]:pt-4 sg:flex sg:items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};
+//# sourceMappingURL=card.js.map

package/dist/components/blocks/cards/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/cards/card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils/index\";\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"sg:ring-foreground/10 sg:bg-card sg:gap-6 sg:overflow-hidden sg:rounded-2xl sg:ring-1 sg:has-[>img:first-child]:pt-0 sg:data-[size=sm]:gap-4 sg:data-[size=sm]:py-4 sg:*:[img:first-child]:rounded-t-xl sg:*:[img:last-child]:rounded-b-xl sg:group/card sg:flex sg:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"sg:gap-2 sg:rounded-t-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-b]:pb-6 sg:group-data-[size=sm]/card:[.border-b]:pb-4 sg:group/card-header sg:@container/card-header sg:grid sg:auto-rows-min sg:items-start sg:has-data-[slot=card-action]:grid-cols-[1fr_auto] sg:has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-title\" {...props} />;\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-description\" {...props} />;\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"sg:col-start-2 sg:row-span-2 sg:row-start-1 sg:self-start sg:justify-self-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"sg:px-6 sg:group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"sg:rounded-b-xl sg:px-6 sg:group-data-[size=sm]/card:px-4 sg:[.border-t]:pt-6 sg:group-data-[size=sm]/card:[.border-t]:pt-4 sg:flex sg:items-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"],"mappings":"AASI;AATJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAEnB,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA8D;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAgC;AACvE,SAAO,oBAAC,SAAI,aAAU,cAAc,GAAG,OAAO;AAChD;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC7E,SAAO,oBAAC,SAAI,aAAU,oBAAoB,GAAG,OAAO;AACtD;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6CAA6C,SAAS;AAAA,MACnE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/blocks/empty-state/EmptyState.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { icons } from 'lucide-react';
+
+interface Props {
+    icon?: keyof typeof icons;
+    title: string;
+    description?: string;
+    actionLabel?: string;
+    actionTo?: string;
+    onAction?: () => void;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, actionLabel, actionTo, onAction, className, }: Props): react_jsx_runtime.JSX.Element;
+
+export { EmptyState as default };

package/dist/components/blocks/empty-state/EmptyState.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../primitives/buttons/button.js";
+import { LinkButton } from "../../primitives/buttons/link-button.js";
+import { Heading, Text } from "../../primitives/index.js";
+import { cn } from "../../../utils/index.js";
+import { icons } from "lucide-react";
+function EmptyState({
+  icon,
+  title,
+  description,
+  actionLabel,
+  actionTo,
+  onAction,
+  className = ""
+}) {
+  const Icon = icon && icons[icon];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "sg:flex sg:flex-col sg:items-center sg:justify-center sg:py-16 sg:text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sg:rounded-full sg:bg-muted sg:p-4 sg:mb-4", children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsx(Heading, { variant: "h3", className: "sg:mb-1", children: title }),
+        description && /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", className: "sg:max-w-sm", children: description }),
+        actionLabel && (actionTo || onAction) && /* @__PURE__ */ jsx("div", { className: "sg:mt-5", children: actionTo ? /* @__PURE__ */ jsx(LinkButton, { to: actionTo, children: actionLabel }) : /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onAction, children: actionLabel }) })
+      ]
+    }
+  );
+}
+export {
+  EmptyState as default
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/blocks/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/empty-state/EmptyState.tsx"],"sourcesContent":["import { Button } from \"../../primitives/buttons/button\";\r\nimport { LinkButton } from \"../../primitives/buttons/link-button\";\r\nimport { Heading, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\nimport { icons } from \"lucide-react\";\r\n\r\ninterface Props {\r\n  icon?: keyof typeof icons;\r\n  title: string;\r\n  description?: string;\r\n  actionLabel?: string;\r\n  actionTo?: string;\r\n  onAction?: () => void;\r\n  className?: string;\r\n}\r\n\r\nexport default function EmptyState({\r\n  icon,\r\n  title,\r\n  description,\r\n  actionLabel,\r\n  actionTo,\r\n  onAction,\r\n  className = \"\",\r\n}: Props) {\r\n  const Icon = icon && icons[icon];\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"sg:flex sg:flex-col sg:items-center sg:justify-center sg:py-16 sg:text-center\",\r\n        className,\r\n      )}\r\n    >\r\n      <div className=\"sg:rounded-full sg:bg-muted sg:p-4 sg:mb-4\">\r\n        {Icon && <Icon />}\r\n      </div>\r\n      <Heading variant=\"h3\" className=\"sg:mb-1\">\r\n        {title}\r\n      </Heading>\r\n      {description && (\r\n        <Text size=\"sm\" foreground=\"muted-foreground\" className=\"sg:max-w-sm\">\r\n          {description}\r\n        </Text>\r\n      )}\r\n      {actionLabel && (actionTo || onAction) && (\r\n        <div className=\"sg:mt-5\">\r\n          {actionTo ? (\r\n            <LinkButton to={actionTo}>{actionLabel}</LinkButton>\r\n          ) : (\r\n            <Button variant=\"outline\" onClick={onAction}>\r\n              {actionLabel}\r\n            </Button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"AA2BI,SAOa,KAPb;AA3BJ,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,SAAS,YAAY;AAC9B,SAAS,UAAU;AACnB,SAAS,aAAa;AAYP,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAU;AACR,QAAM,OAAO,QAAQ,MAAM,IAAI;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,8CACZ,kBAAQ,oBAAC,QAAK,GACjB;AAAA,QACA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC7B,iBACH;AAAA,QACC,eACC,oBAAC,QAAK,MAAK,MAAK,YAAW,oBAAmB,WAAU,eACrD,uBACH;AAAA,QAED,gBAAgB,YAAY,aAC3B,oBAAC,SAAI,WAAU,WACZ,qBACC,oBAAC,cAAW,IAAI,UAAW,uBAAY,IAEvC,oBAAC,UAAO,SAAQ,WAAU,SAAS,UAChC,uBACH,GAEJ;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/blocks/index.d.ts

@@ -0,0 +1,5 @@
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './cards/card.js';
+export { PostListWithFilters } from './post-list/post-list-with-filters.js';
+import 'react/jsx-runtime';
+import 'react';
+import '../../data/posts.js';

package/dist/components/blocks/index.js

@@ -0,0 +1,5 @@
+export * from "./cards/blogpost-card.js";
+export * from "./cards/card.js";
+export * from "./empty-state/EmptyState.js";
+export * from "./post-list/post-list-with-filters.js";
+//# sourceMappingURL=index.js.map

package/dist/components/blocks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/blocks/index.ts"],"sourcesContent":["/**\n * Blocks index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./cards/blogpost-card\";\nexport * from \"./cards/card\";\nexport * from \"./empty-state/EmptyState\";\nexport * from \"./post-list/post-list-with-filters\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/blocks/post-list/post-filters.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SortOption = "newest" | "oldest" | "a-z" | "z-a";
+interface FilterControlsProps {
+    categories: string[];
+    authors: string[];
+    selectedCategories: string[];
+    selectedAuthors: string[];
+    toggleCategory: (cat: string) => void;
+    toggleAuthor: (author: string) => void;
+    clearFilters: () => void;
+    activeCount: number;
+    sortBy: SortOption;
+    setSortBy: (s: SortOption) => void;
+    hideAuthorFilter?: boolean;
+}
+declare function FilterControls({ categories, authors, selectedCategories, selectedAuthors, toggleCategory, toggleAuthor, clearFilters, activeCount, sortBy, setSortBy, hideAuthorFilter, }: FilterControlsProps): react_jsx_runtime.JSX.Element;
+
+export { FilterControls };

package/dist/components/blocks/post-list/post-filters.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack, Text } from "../../primitives/index.js";
+import { Button } from "../../primitives/buttons/button.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../primitives/forms/select.js";
+function FilterControls({
+  categories,
+  authors,
+  selectedCategories,
+  selectedAuthors,
+  toggleCategory,
+  toggleAuthor,
+  clearFilters,
+  activeCount,
+  sortBy,
+  setSortBy,
+  hideAuthorFilter
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 5, alignItems: "start", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fontweight: "medium", className: "sg:mb-2", children: "Categories" }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", wrap: "wrap", gap: 2, children: categories.map((cat) => {
+        const isSelected = selectedCategories.includes(cat);
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: isSelected ? "default" : "outline",
+            size: "xs",
+            onClick: () => toggleCategory(cat),
+            children: cat
+          },
+          cat
+        );
+      }) })
+    ] }),
+    !hideAuthorFilter && authors.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fontweight: "medium", className: "sg:mb-2", children: "Authors" }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", wrap: "wrap", gap: 2, children: authors.map((author) => {
+        const isSelected = selectedAuthors.includes(author);
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: isSelected ? "default" : "outline",
+            size: "xs",
+            onClick: () => toggleAuthor(author),
+            children: author
+          },
+          author
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          id: "sortby_dropdown",
+          size: "sm",
+          fontweight: "medium",
+          className: "sg:mb-2",
+          children: "Sort by"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: sortBy,
+          onValueChange: (v) => setSortBy(v),
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                className: "sg:w-full",
+                "aria-labelledby": "sortby_dropdown",
+                children: /* @__PURE__ */ jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs(SelectContent, { children: [
+              /* @__PURE__ */ jsx(SelectItem, { value: "newest", children: "Newest first" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "oldest", children: "Oldest first" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "a-z", children: "Title A\u2013Z" }),
+              /* @__PURE__ */ jsx(SelectItem, { value: "z-a", children: "Title Z\u2013A" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    activeCount > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: clearFilters, iconStart: "X", children: "Clear all filters" })
+  ] });
+}
+export {
+  FilterControls
+};
+//# sourceMappingURL=post-filters.js.map

package/dist/components/blocks/post-list/post-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/post-list/post-filters.tsx"],"sourcesContent":["\"use client\";\nimport { Stack, Text } from \"../../primitives/index\";\nimport { Button } from \"../../primitives/buttons/button\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../../primitives/forms/select\";\n\ntype SortOption = \"newest\" | \"oldest\" | \"a-z\" | \"z-a\";\n\ninterface FilterControlsProps {\n  categories: string[];\n  authors: string[];\n  selectedCategories: string[];\n  selectedAuthors: string[];\n  toggleCategory: (cat: string) => void;\n  toggleAuthor: (author: string) => void;\n  clearFilters: () => void;\n  activeCount: number;\n  sortBy: SortOption;\n  setSortBy: (s: SortOption) => void;\n  hideAuthorFilter?: boolean;\n}\n\nexport function FilterControls({\n  categories,\n  authors,\n  selectedCategories,\n  selectedAuthors,\n  toggleCategory,\n  toggleAuthor,\n  clearFilters,\n  activeCount,\n  sortBy,\n  setSortBy,\n  hideAuthorFilter,\n}: FilterControlsProps) {\n  return (\n    <Stack gap={5} alignItems=\"start\">\n      <div>\n        <Text size=\"sm\" fontweight=\"medium\" className=\"sg:mb-2\">\n          Categories\n        </Text>\n        <Stack direction=\"row\" wrap=\"wrap\" gap={2}>\n          {categories.map((cat) => {\n            const isSelected = selectedCategories.includes(cat);\n            return (\n              <Button\n                key={cat}\n                variant={isSelected ? \"default\" : \"outline\"}\n                size=\"xs\"\n                onClick={() => toggleCategory(cat)}\n              >\n                {cat}\n              </Button>\n            );\n          })}\n        </Stack>\n      </div>\n      {!hideAuthorFilter && authors.length > 1 && (\n        <div>\n          <Text size=\"sm\" fontweight=\"medium\" className=\"sg:mb-2\">\n            Authors\n          </Text>\n          <Stack direction=\"row\" wrap=\"wrap\" gap={2}>\n            {authors.map((author) => {\n              const isSelected = selectedAuthors.includes(author);\n              return (\n                <Button\n                  key={author}\n                  variant={isSelected ? \"default\" : \"outline\"}\n                  size=\"xs\"\n                  onClick={() => toggleAuthor(author)}\n                >\n                  {author}\n                </Button>\n              );\n            })}\n          </Stack>\n        </div>\n      )}\n      <div>\n        <Text\n          id=\"sortby_dropdown\"\n          size=\"sm\"\n          fontweight=\"medium\"\n          className=\"sg:mb-2\"\n        >\n          Sort by\n        </Text>\n        <Select\n          value={sortBy}\n          onValueChange={(v) => setSortBy(v as SortOption)}\n        >\n          <SelectTrigger\n            className=\"sg:w-full\"\n            aria-labelledby=\"sortby_dropdown\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"newest\">Newest first</SelectItem>\n            <SelectItem value=\"oldest\">Oldest first</SelectItem>\n            <SelectItem value=\"a-z\">Title A–Z</SelectItem>\n            <SelectItem value=\"z-a\">Title Z–A</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      {activeCount > 0 && (\n        <Button variant=\"ghost\" size=\"xs\" onClick={clearFilters} iconStart=\"X\">\n          Clear all filters\n        </Button>\n      )}\n    </Stack>\n  );\n}\n"],"mappings":";AA0CM,SACE,KADF;AAzCN,SAAS,OAAO,YAAY;AAC5B,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBA,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE,qBAAC,SAAM,KAAK,GAAG,YAAW,SACxB;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAK,MAAK,MAAK,YAAW,UAAS,WAAU,WAAU,wBAExD;AAAA,MACA,oBAAC,SAAM,WAAU,OAAM,MAAK,QAAO,KAAK,GACrC,qBAAW,IAAI,CAAC,QAAQ;AACvB,cAAM,aAAa,mBAAmB,SAAS,GAAG;AAClD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,aAAa,YAAY;AAAA,YAClC,MAAK;AAAA,YACL,SAAS,MAAM,eAAe,GAAG;AAAA,YAEhC;AAAA;AAAA,UALI;AAAA,QAMP;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,IACC,CAAC,oBAAoB,QAAQ,SAAS,KACrC,qBAAC,SACC;AAAA,0BAAC,QAAK,MAAK,MAAK,YAAW,UAAS,WAAU,WAAU,qBAExD;AAAA,MACA,oBAAC,SAAM,WAAU,OAAM,MAAK,QAAO,KAAK,GACrC,kBAAQ,IAAI,CAAC,WAAW;AACvB,cAAM,aAAa,gBAAgB,SAAS,MAAM;AAClD,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,aAAa,YAAY;AAAA,YAClC,MAAK;AAAA,YACL,SAAS,MAAM,aAAa,MAAM;AAAA,YAEjC;AAAA;AAAA,UALI;AAAA,QAMP;AAAA,MAEJ,CAAC,GACH;AAAA,OACF;AAAA,IAEF,qBAAC,SACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,YAAW;AAAA,UACX,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe,CAAC,MAAM,UAAU,CAAe;AAAA,UAE/C;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,mBAAgB;AAAA,gBAEhB,8BAAC,eAAY;AAAA;AAAA,YACf;AAAA,YACA,qBAAC,iBACC;AAAA,kCAAC,cAAW,OAAM,UAAS,0BAAY;AAAA,cACvC,oBAAC,cAAW,OAAM,UAAS,0BAAY;AAAA,cACvC,oBAAC,cAAW,OAAM,OAAM,4BAAS;AAAA,cACjC,oBAAC,cAAW,OAAM,OAAM,4BAAS;AAAA,eACnC;AAAA;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACC,cAAc,KACb,oBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,cAAc,WAAU,KAAI,+BAEvE;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/blocks/post-list/post-list-with-filters.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BlogPost } from '../../../data/posts.js';
+
+type LoadMode = "pagination" | "load-more";
+type FilterMode = "sidebar" | "drawer";
+interface PostListWithFiltersProps {
+    posts: BlogPost[];
+    /** Hide the search bar */
+    hideSearch?: boolean;
+    /** Hide the author filter badges */
+    hideAuthorFilter?: boolean;
+    /** "sidebar" = inline on desktop, sheet on mobile (default). "drawer" = always behind a button/sheet. */
+    filterMode?: FilterMode;
+    /** Default load mode. "load-more" (default) or "pagination". User can still toggle. */
+    defaultLoadMode?: LoadMode;
+}
+declare function PostListWithFilters({ posts: sourcePosts, hideSearch, hideAuthorFilter, filterMode, defaultLoadMode, }: PostListWithFiltersProps): react_jsx_runtime.JSX.Element;
+
+export { PostListWithFilters };