@olwiba/cn 0.1.14 → 0.1.17

package/README.md

@@ -27,15 +27,19 @@
 
 ## What This Is
 
-`@olwiba/cn` is a custom shadcn component registry. It contains beautifully designed, copy-paste ready primitive components built on React 19 and Tailwind CSS v4.
+`@olwiba/cn` is a custom shadcn component registry.  
+It contains beautifully designed, copy-paste ready primitive components built on React 19 and Tailwind CSS v4.
 
 Primitives are the individual lego pieces for building on the web.
 
 If you're interested in composite components, these are prebuilt, opinionated combinations of primitives that solve specific UI problems. They're coming soon in `@olwiba/ui`.
 
-The project introduces the idea of a `mode` prop, this lets you dial in the visual personality without touching variants or structure. Pair that with seven built-in color themes and you get a design system that can conform to your project.
+The project introduces the idea of a `mode` prop, this lets you dial in the visual personality without touching variants or structure.  
+Pair that with seven built-in color themes and you get a design system that can conform to your project.
 
-It ships two ways — as an installable package or as a shadcn registry you can copy directly into your project.
+It ships two ways: 
+1. As an installable package
+2. As a shadcn registry you can copy directly into your project
 
 ## Installation
 
@@ -114,4 +118,4 @@ Open an issue first for anything beyond a small fix.
 
 <p align="center">
   <a href="https://buymeacoffee.com/olwiba"><img src="https://img.shields.io/badge/Buy%20Me%20A%20Coffee-FFDD00?logo=buymeacoffee&logoColor=black" alt="Buy Me A Coffee" /></a>
-</p>
+</p>

package/dist/email/index.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BodyProps, HeadProps, PreviewProps, HtmlProps, ContainerProps, SectionProps, TextProps, HeadingProps, LinkProps, ButtonProps } from '@react-email/components';
+
+declare const emailTheme: {
+    readonly pageBackground: "#f4f4f5";
+    readonly cardBackground: "#ffffff";
+    readonly cardBorder: "#e4e4e7";
+    readonly mutedBackground: "#fafafa";
+    readonly text: "#18181b";
+    readonly mutedText: "#71717a";
+    readonly link: "#10b981";
+    readonly buttonText: "#ffffff";
+    readonly defaultBrandColor: "#10b981";
+    readonly fontFamily: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif";
+};
+type EmailTheme = typeof emailTheme;
+
+type EmailRootProps = HtmlProps;
+type EmailHeadProps = HeadProps;
+type EmailBodyProps = BodyProps;
+type EmailPreviewProps = PreviewProps;
+declare function EmailRoot(props: EmailRootProps): react_jsx_runtime.JSX.Element;
+declare function EmailHead(props: EmailHeadProps): react_jsx_runtime.JSX.Element;
+declare function EmailBody(props: EmailBodyProps): react_jsx_runtime.JSX.Element;
+declare function EmailPreview(props: EmailPreviewProps): react_jsx_runtime.JSX.Element;
+
+type EmailContainerProps = ContainerProps;
+declare function EmailContainer(props: EmailContainerProps): react_jsx_runtime.JSX.Element;
+
+type EmailSectionProps = SectionProps;
+declare function EmailSection(props: EmailSectionProps): react_jsx_runtime.JSX.Element;
+
+type EmailTextProps = TextProps & {
+    variant?: 'default' | 'muted' | 'caption';
+};
+declare function EmailText({ variant, style, ...props }: EmailTextProps): react_jsx_runtime.JSX.Element;
+
+type EmailHeadingProps = HeadingProps;
+declare function EmailHeading({ style, ...props }: EmailHeadingProps): react_jsx_runtime.JSX.Element;
+
+type EmailLinkProps = LinkProps & {
+    brandColor?: string;
+};
+declare function EmailLink({ brandColor, style, ...props }: EmailLinkProps): react_jsx_runtime.JSX.Element;
+
+interface EmailButtonProps extends Omit<ButtonProps, 'children'> {
+    label: string;
+    brandColor?: string;
+}
+declare function EmailButton({ label, brandColor, style, ...props }: EmailButtonProps): react_jsx_runtime.JSX.Element;
+
+export { EmailBody, type EmailBodyProps, EmailButton, type EmailButtonProps, EmailContainer, type EmailContainerProps, EmailHead, type EmailHeadProps, EmailHeading, type EmailHeadingProps, EmailLink, type EmailLinkProps, EmailPreview, type EmailPreviewProps, EmailRoot, type EmailRootProps, EmailSection, type EmailSectionProps, EmailText, type EmailTextProps, type EmailTheme, emailTheme };

package/dist/email/index.js

@@ -0,0 +1,122 @@
+import { Html, Head, Body, Preview, Container, Section, Text, Heading, Link, Button } from '@react-email/components';
+import { jsx } from 'react/jsx-runtime';
+
+// src/email/theme.ts
+var emailTheme = {
+  pageBackground: "#f4f4f5",
+  cardBackground: "#ffffff",
+  cardBorder: "#e4e4e7",
+  mutedBackground: "#fafafa",
+  text: "#18181b",
+  mutedText: "#71717a",
+  link: "#10b981",
+  buttonText: "#ffffff",
+  defaultBrandColor: "#10b981",
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif'
+};
+function EmailRoot(props) {
+  return /* @__PURE__ */ jsx(Html, { ...props });
+}
+function EmailHead(props) {
+  return /* @__PURE__ */ jsx(Head, { ...props });
+}
+function EmailBody(props) {
+  return /* @__PURE__ */ jsx(Body, { ...props });
+}
+function EmailPreview(props) {
+  return /* @__PURE__ */ jsx(Preview, { ...props });
+}
+function EmailContainer(props) {
+  return /* @__PURE__ */ jsx(Container, { ...props });
+}
+function EmailSection(props) {
+  return /* @__PURE__ */ jsx(Section, { ...props });
+}
+var variantStyles = {
+  default: {
+    color: emailTheme.text,
+    fontSize: "15px",
+    lineHeight: "24px"
+  },
+  muted: {
+    color: emailTheme.mutedText,
+    fontSize: "15px",
+    lineHeight: "24px"
+  },
+  caption: {
+    color: emailTheme.mutedText,
+    fontSize: "13px",
+    lineHeight: "20px"
+  }
+};
+function EmailText({
+  variant = "default",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Text, { style: { ...variantStyles[variant], ...style }, ...props });
+}
+function EmailHeading({ style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      style: {
+        margin: "0 0 12px",
+        fontSize: "24px",
+        fontWeight: 600,
+        lineHeight: "32px",
+        color: emailTheme.text,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function EmailLink({
+  brandColor = emailTheme.link,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      style: {
+        color: brandColor,
+        wordBreak: "break-all",
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function EmailButton({
+  label,
+  brandColor = emailTheme.defaultBrandColor,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      style: {
+        backgroundColor: brandColor,
+        borderRadius: "8px",
+        color: emailTheme.buttonText,
+        display: "inline-block",
+        fontSize: "14px",
+        fontWeight: 600,
+        lineHeight: "1",
+        padding: "12px 20px",
+        textDecoration: "none",
+        textAlign: "center",
+        ...style
+      },
+      ...props,
+      children: label
+    }
+  );
+}
+
+export { EmailBody, EmailButton, EmailContainer, EmailHead, EmailHeading, EmailLink, EmailPreview, EmailRoot, EmailSection, EmailText, emailTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/email/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/email/theme.ts","../../src/email/root.tsx","../../src/email/container.tsx","../../src/email/section.tsx","../../src/email/text.tsx","../../src/email/heading.tsx","../../src/email/link.tsx","../../src/email/button.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["export const emailTheme = {\n  pageBackground: '#f4f4f5',\n  cardBackground: '#ffffff',\n  cardBorder: '#e4e4e7',\n  mutedBackground: '#fafafa',\n  text: '#18181b',\n  mutedText: '#71717a',\n  link: '#10b981',\n  buttonText: '#ffffff',\n  defaultBrandColor: '#10b981',\n  fontFamily:\n    '-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif',\n} as const;\n\nexport type EmailTheme = typeof emailTheme;\n","import {\n  Body,\n  Head,\n  Html,\n  Preview,\n  type BodyProps,\n  type HeadProps,\n  type HtmlProps,\n  type PreviewProps,\n} from '@react-email/components';\n\nexport type EmailRootProps = HtmlProps;\nexport type EmailHeadProps = HeadProps;\nexport type EmailBodyProps = BodyProps;\nexport type EmailPreviewProps = PreviewProps;\n\nexport function EmailRoot(props: EmailRootProps) {\n  return <Html {...props} />;\n}\n\nexport function EmailHead(props: EmailHeadProps) {\n  return <Head {...props} />;\n}\n\nexport function EmailBody(props: EmailBodyProps) {\n  return <Body {...props} />;\n}\n\nexport function EmailPreview(props: EmailPreviewProps) {\n  return <Preview {...props} />;\n}\n","import { Container, type ContainerProps } from '@react-email/components';\n\nexport type EmailContainerProps = ContainerProps;\n\nexport function EmailContainer(props: EmailContainerProps) {\n  return <Container {...props} />;\n}\n","import { Section, type SectionProps } from '@react-email/components';\n\nexport type EmailSectionProps = SectionProps;\n\nexport function EmailSection(props: EmailSectionProps) {\n  return <Section {...props} />;\n}\n","import { Text, type TextProps } from '@react-email/components';\nimport { emailTheme } from './theme';\n\nexport type EmailTextProps = TextProps & {\n  variant?: 'default' | 'muted' | 'caption';\n};\n\nconst variantStyles = {\n  default: {\n    color: emailTheme.text,\n    fontSize: '15px',\n    lineHeight: '24px',\n  },\n  muted: {\n    color: emailTheme.mutedText,\n    fontSize: '15px',\n    lineHeight: '24px',\n  },\n  caption: {\n    color: emailTheme.mutedText,\n    fontSize: '13px',\n    lineHeight: '20px',\n  },\n} as const;\n\nexport function EmailText({\n  variant = 'default',\n  style,\n  ...props\n}: EmailTextProps) {\n  return <Text style={{ ...variantStyles[variant], ...style }} {...props} />;\n}\n","import { Heading, type HeadingProps } from '@react-email/components';\nimport { emailTheme } from './theme';\n\nexport type EmailHeadingProps = HeadingProps;\n\nexport function EmailHeading({ style, ...props }: EmailHeadingProps) {\n  return (\n    <Heading\n      style={{\n        margin: '0 0 12px',\n        fontSize: '24px',\n        fontWeight: 600,\n        lineHeight: '32px',\n        color: emailTheme.text,\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n","import { Link, type LinkProps } from '@react-email/components';\nimport { emailTheme } from './theme';\n\nexport type EmailLinkProps = LinkProps & {\n  brandColor?: string;\n};\n\nexport function EmailLink({\n  brandColor = emailTheme.link,\n  style,\n  ...props\n}: EmailLinkProps) {\n  return (\n    <Link\n      style={{\n        color: brandColor,\n        wordBreak: 'break-all',\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n","import { Button, type ButtonProps } from '@react-email/components';\nimport { emailTheme } from './theme';\n\nexport interface EmailButtonProps extends Omit<ButtonProps, 'children'> {\n  label: string;\n  brandColor?: string;\n}\n\nexport function EmailButton({\n  label,\n  brandColor = emailTheme.defaultBrandColor,\n  style,\n  ...props\n}: EmailButtonProps) {\n  return (\n    <Button\n      style={{\n        backgroundColor: brandColor,\n        borderRadius: '8px',\n        color: emailTheme.buttonText,\n        display: 'inline-block',\n        fontSize: '14px',\n        fontWeight: 600,\n        lineHeight: '1',\n        padding: '12px 20px',\n        textDecoration: 'none',\n        textAlign: 'center',\n        ...style,\n      }}\n      {...props}\n    >\n      {label}\n    </Button>\n  );\n}\n"]}

package/dist/index.js

@@ -6534,13 +6534,10 @@ function AsciiText({
     active: false
   });
   const wavesRef = useRef([]);
-  const render = useCallback(() => {
+  const colorsRef = useRef({ base: "#a3a3a3", accent: "#a3a3a3" });
+  const resolveColors = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const time = timeRef.current;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
     const root = document.documentElement;
     const rootStyle = getComputedStyle(root);
     const style = getComputedStyle(canvas);
@@ -6554,6 +6551,28 @@ function AsciiText({
         highlightColor = accentColor;
       }
     }
+    colorsRef.current = { base: baseColor, accent: highlightColor };
+  }, [color, accentColor]);
+  useEffect(() => {
+    resolveColors();
+  }, [resolveColors]);
+  useEffect(() => {
+    if (typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(() => resolveColors());
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "style"]
+    });
+    return () => observer.disconnect();
+  }, [resolveColors]);
+  const render = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const time = timeRef.current;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const { base: baseColor, accent: highlightColor } = colorsRef.current;
     renderAsciiFrameToContext(ctx, { cells, cols, rows }, {
       accentColumns: accentCols,
       color: baseColor,
@@ -6567,7 +6586,7 @@ function AsciiText({
       setIsCanvasReady(true);
     }
     wavesRef.current = wavesRef.current.filter((w) => time - w.t < 3);
-  }, [cells, accentCols, color, accentColor]);
+  }, [cells, accentCols, cols, rows]);
   useEffect(() => {
     hasPaintedRef.current = false;
     setIsCanvasReady(false);