@vaneui/ui 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -51,8 +51,8 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",

package/rollup.config.mjs

@@ -1,22 +1,22 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import pkg from "./package.json";
-
-export default {
-  input: "src/index.ts", // your library entry point
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs",
-      sourcemap: true,
-    },
-    {
-      file: pkg.module,
-      format: "esm",
-      sourcemap: true,
-    },
-  ],
-  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
-};
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import pkg from "./package.json";
+
+export default {
+  input: "src/index.ts", // your library entry point
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+      sourcemap: true,
+    },
+    {
+      file: pkg.module,
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
+};

package/src/components/complex/sharer.tsx

@@ -1,220 +1,220 @@
-'use client';
-
-import React from 'react';
-
-type Platform = 'fb' | 'li' | 'x' | 'th' | 'em' | 'wa' | 'tg' | 're';
-
-interface SocialShareCommonProps {
-  url?: string;
-  text?: string;
-  width?: number;
-  height?: number;
-  isLink?: boolean;
-  isBlank?: boolean;
-  platforms?: Platform[];
-  containerComponent?: React.ElementType;
-  buttonComponent?: React.ElementType;
-  buttonComponents?: Partial<Record<Platform, React.ElementType>>;
-}
-
-interface FacebookShareProps {
-  hashtag?: string;
-}
-
-interface TwitterShareProps {
-  hashtags?: string;
-  via?: string;
-  related?: string;
-  inReplyTo?: string;
-}
-
-interface EmailShareProps {
-  title?: string;
-  to?: string;
-}
-
-interface WhatsAppShareProps {
-  to?: string;
-  web?: boolean;
-}
-
-interface SocialShareProps extends SocialShareCommonProps {
-  facebookProps?: FacebookShareProps;
-  twitterProps?: TwitterShareProps;
-  emailProps?: EmailShareProps;
-  whatsappProps?: WhatsAppShareProps;
-}
-
-interface ShareConfig {
-  shareUrl: string;
-  getParams: () => { [key: string]: string | number | boolean | undefined };
-}
-
-const buildQueryString = (
-  params: { [key: string]: string | number | boolean | undefined }
-): string => {
-  const validKeys = Object.keys(params).filter(
-    key => params[key] !== undefined && params[key] !== ''
-  );
-  return validKeys.length > 0
-    ? '?' +
-        validKeys
-          .map(key => `${key}=${encodeURIComponent(String(params[key]))}`)
-          .join('&')
-    : '';
-};
-
-const SocialShare: React.FC<SocialShareProps> = ({
-  url = window.location.href,
-  text = '',
-  width = 600,
-  height = 480,
-  isLink = false,
-  isBlank = true,
-  platforms,
-  containerComponent,
-  buttonComponent,
-  buttonComponents,
-  facebookProps = {},
-  twitterProps = {},
-  emailProps = {},
-  whatsappProps = {},
-}) => {
-  const shareConfigs: { [key in Platform]: ShareConfig } = {
-    fb: {
-      shareUrl: 'https://www.facebook.com/sharer/sharer.php',
-      getParams: () => ({
-        u: url,
-        hashtag: facebookProps.hashtag
-          ? facebookProps.hashtag.startsWith('#')
-            ? facebookProps.hashtag
-            : `#${facebookProps.hashtag}`
-          : '',
-        quote: text,
-      }),
-    },
-    li: {
-      shareUrl: 'https://www.linkedin.com/shareArticle',
-      getParams: () => ({
-        url,
-      }),
-    },
-    x: {
-      shareUrl: 'https://x.com/intent/tweet',
-      getParams: () => ({
-        text,
-        url,
-        hashtags: twitterProps.hashtags,
-        via: twitterProps.via,
-        related: twitterProps.related,
-        in_reply_to: twitterProps.inReplyTo,
-      }),
-    },
-    th: {
-      shareUrl: 'https://threads.net/intent/post',
-      getParams: () => ({
-        text: `${text} ${url}`,
-      }),
-    },
-    em: {
-      shareUrl: 'mailto:' + (emailProps.to || ''),
-      getParams: () => ({
-        subject: emailProps.title,
-        body: `${text}\n${url}`,
-      }),
-    },
-    wa: {
-      shareUrl: whatsappProps.web
-        ? 'https://web.whatsapp.com/send'
-        : 'https://wa.me/',
-      getParams: () => ({
-        phone: whatsappProps.to,
-        text: `${text} ${url}`,
-      }),
-    },
-    tg: {
-      shareUrl: 'https://t.me/share',
-      getParams: () => ({
-        text,
-        url,
-      }),
-    },
-    re: {
-      shareUrl: 'https://www.reddit.com/submit',
-      getParams: () => ({
-        url,
-        title: text,
-      }),
-    },
-  };
-
-  const platformLabels: { [key in Platform]: string } = {
-    fb: 'Facebook',
-    li: 'LinkedIn',
-    x: 'X',
-    th: 'Threads',
-    em: 'Email',
-    wa: 'WhatsApp',
-    tg: 'Telegram',
-    re: 'Reddit',
-  };
-
-  const buildShareUrl = (config: ShareConfig): string => {
-    const params = config.getParams();
-    const queryString = buildQueryString(params);
-    return config.shareUrl + queryString;
-  };
-
-  const openShareWindow = (shareUrl: string): void => {
-    if (isLink) {
-      if (isBlank) {
-        window.open(shareUrl, '_blank');
-      } else {
-        window.location.href = shareUrl;
-      }
-    } else {
-      const left = window.innerWidth / 2 - width / 2 + window.screenX;
-      const top = window.innerHeight / 2 - height / 2 + window.screenY;
-      const popParams = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
-      const newWindow = window.open(shareUrl, '', popParams);
-      if (newWindow) {
-        newWindow.focus();
-      }
-    }
-  };
-
-  const handleShare = (key: Platform): void => {
-    const config = shareConfigs[key];
-    if (!config) return;
-    const shareUrl = buildShareUrl(config);
-    openShareWindow(shareUrl);
-  };
-
-  // Use the provided container component or default to 'div'
-  const Container = containerComponent || 'div';
-  // Default button component to use if no platform-specific component is provided
-  const DefaultButton = buttonComponent || 'button';
-  const platformsToShow: Platform[] =
-    platforms || (Object.keys(shareConfigs) as Platform[]);
-
-  return (
-    <Container>
-      {platformsToShow.map(key => {
-        // Use a specific button component if defined for the key
-        const Button = (buttonComponents && buttonComponents[key]) || DefaultButton;
-        const label = platformLabels[key] || key;
-        return (
-          <Button
-            key={key}
-            onClick={() => handleShare(key)}
-            title={`Share on ${label}`}
-          >
-            {label}
-          </Button>
-        );
-      })}
-    </Container>
-  );
-};
-
-export default SocialShare;
+'use client';
+
+import React from 'react';
+
+type Platform = 'fb' | 'li' | 'x' | 'th' | 'em' | 'wa' | 'tg' | 're';
+
+interface SocialShareCommonProps {
+  url?: string;
+  text?: string;
+  width?: number;
+  height?: number;
+  isLink?: boolean;
+  isBlank?: boolean;
+  platforms?: Platform[];
+  containerComponent?: React.ElementType;
+  buttonComponent?: React.ElementType;
+  buttonComponents?: Partial<Record<Platform, React.ElementType>>;
+}
+
+interface FacebookShareProps {
+  hashtag?: string;
+}
+
+interface TwitterShareProps {
+  hashtags?: string;
+  via?: string;
+  related?: string;
+  inReplyTo?: string;
+}
+
+interface EmailShareProps {
+  title?: string;
+  to?: string;
+}
+
+interface WhatsAppShareProps {
+  to?: string;
+  web?: boolean;
+}
+
+interface SocialShareProps extends SocialShareCommonProps {
+  facebookProps?: FacebookShareProps;
+  twitterProps?: TwitterShareProps;
+  emailProps?: EmailShareProps;
+  whatsappProps?: WhatsAppShareProps;
+}
+
+interface ShareConfig {
+  shareUrl: string;
+  getParams: () => { [key: string]: string | number | boolean | undefined };
+}
+
+const buildQueryString = (
+  params: { [key: string]: string | number | boolean | undefined }
+): string => {
+  const validKeys = Object.keys(params).filter(
+    key => params[key] !== undefined && params[key] !== ''
+  );
+  return validKeys.length > 0
+    ? '?' +
+        validKeys
+          .map(key => `${key}=${encodeURIComponent(String(params[key]))}`)
+          .join('&')
+    : '';
+};
+
+const SocialShare: React.FC<SocialShareProps> = ({
+  url = window.location.href,
+  text = '',
+  width = 600,
+  height = 480,
+  isLink = false,
+  isBlank = true,
+  platforms,
+  containerComponent,
+  buttonComponent,
+  buttonComponents,
+  facebookProps = {},
+  twitterProps = {},
+  emailProps = {},
+  whatsappProps = {},
+}) => {
+  const shareConfigs: { [key in Platform]: ShareConfig } = {
+    fb: {
+      shareUrl: 'https://www.facebook.com/sharer/sharer.php',
+      getParams: () => ({
+        u: url,
+        hashtag: facebookProps.hashtag
+          ? facebookProps.hashtag.startsWith('#')
+            ? facebookProps.hashtag
+            : `#${facebookProps.hashtag}`
+          : '',
+        quote: text,
+      }),
+    },
+    li: {
+      shareUrl: 'https://www.linkedin.com/shareArticle',
+      getParams: () => ({
+        url,
+      }),
+    },
+    x: {
+      shareUrl: 'https://x.com/intent/tweet',
+      getParams: () => ({
+        text,
+        url,
+        hashtags: twitterProps.hashtags,
+        via: twitterProps.via,
+        related: twitterProps.related,
+        in_reply_to: twitterProps.inReplyTo,
+      }),
+    },
+    th: {
+      shareUrl: 'https://threads.net/intent/post',
+      getParams: () => ({
+        text: `${text} ${url}`,
+      }),
+    },
+    em: {
+      shareUrl: 'mailto:' + (emailProps.to || ''),
+      getParams: () => ({
+        subject: emailProps.title,
+        body: `${text}\n${url}`,
+      }),
+    },
+    wa: {
+      shareUrl: whatsappProps.web
+        ? 'https://web.whatsapp.com/send'
+        : 'https://wa.me/',
+      getParams: () => ({
+        phone: whatsappProps.to,
+        text: `${text} ${url}`,
+      }),
+    },
+    tg: {
+      shareUrl: 'https://t.me/share',
+      getParams: () => ({
+        text,
+        url,
+      }),
+    },
+    re: {
+      shareUrl: 'https://www.reddit.com/submit',
+      getParams: () => ({
+        url,
+        title: text,
+      }),
+    },
+  };
+
+  const platformLabels: { [key in Platform]: string } = {
+    fb: 'Facebook',
+    li: 'LinkedIn',
+    x: 'X',
+    th: 'Threads',
+    em: 'Email',
+    wa: 'WhatsApp',
+    tg: 'Telegram',
+    re: 'Reddit',
+  };
+
+  const buildShareUrl = (config: ShareConfig): string => {
+    const params = config.getParams();
+    const queryString = buildQueryString(params);
+    return config.shareUrl + queryString;
+  };
+
+  const openShareWindow = (shareUrl: string): void => {
+    if (isLink) {
+      if (isBlank) {
+        window.open(shareUrl, '_blank');
+      } else {
+        window.location.href = shareUrl;
+      }
+    } else {
+      const left = window.innerWidth / 2 - width / 2 + window.screenX;
+      const top = window.innerHeight / 2 - height / 2 + window.screenY;
+      const popParams = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
+      const newWindow = window.open(shareUrl, '', popParams);
+      if (newWindow) {
+        newWindow.focus();
+      }
+    }
+  };
+
+  const handleShare = (key: Platform): void => {
+    const config = shareConfigs[key];
+    if (!config) return;
+    const shareUrl = buildShareUrl(config);
+    openShareWindow(shareUrl);
+  };
+
+  // Use the provided container component or default to 'div'
+  const Container = containerComponent || 'div';
+  // Default button component to use if no platform-specific component is provided
+  const DefaultButton = buttonComponent || 'button';
+  const platformsToShow: Platform[] =
+    platforms || (Object.keys(shareConfigs) as Platform[]);
+
+  return (
+    <Container>
+      {platformsToShow.map(key => {
+        // Use a specific button component if defined for the key
+        const Button = (buttonComponents && buttonComponents[key]) || DefaultButton;
+        const label = platformLabels[key] || key;
+        return (
+          <Button
+            key={key}
+            onClick={() => handleShare(key)}
+            title={`Share on ${label}`}
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </Container>
+  );
+};
+
+export default SocialShare;

package/src/components/ui/badge.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-import { componentBuilder } from "./utils";
-import { TypographyComponentProps } from "./props";
-
-export const Badge: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "span", "rounded-full w-fit")
-    .withSizes({
-      xs: "px-2 py-1 text-xs",
-      sm: "px-3 py-1 text-sm",
-      md: "px-4 py-2 text-base",
-      lg: "px-5 py-2 text-lg",
-      xl: "px-6 py-3 text-xl",
-    })
-    .withAppearance({
-      default: "bg-gray-200",
-      accent: "bg-gray-200",
-      primary: "bg-blue-200",
-      secondary: "bg-gray-200",
-      tertiary: "bg-gray-200",
-      success: "bg-green-200",
-      danger: "bg-red-200",
-      warning: "bg-yellow-200",
-      info: "bg-blue-200"
-    }, {})
-    .withTypography({
-      fontWeight: { semibold: true },
-      fontFamily: { mono: true },
-      textTransform: { uppercase: true },
-      textAppearance: { secondary: true },
-    })
-    .build();
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { TypographyComponentProps } from "./props";
+
+export const Badge: React.FC<TypographyComponentProps> = (props) =>
+  componentBuilder(props, "span", "rounded-full w-fit")
+    .withSizes({
+      xs: "px-2 py-1 text-xs",
+      sm: "px-3 py-1 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-5 py-2 text-lg",
+      xl: "px-6 py-3 text-xl",
+    })
+    .withAppearance({
+      default: "bg-gray-200",
+      accent: "bg-gray-200",
+      primary: "bg-blue-200",
+      secondary: "bg-gray-200",
+      tertiary: "bg-gray-200",
+      success: "bg-green-200",
+      danger: "bg-red-200",
+      warning: "bg-yellow-200",
+      info: "bg-blue-200"
+    }, {})
+    .withTypography({
+      fontWeight: { semibold: true },
+      fontFamily: { mono: true },
+      textTransform: { uppercase: true },
+      textAppearance: { secondary: true },
+    })
+    .build();
     

package/src/components/ui/chip.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { componentBuilder } from "./utils";
-import { TypographyComponentProps } from "./props";
-
-export const Chip: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "span", "rounded-full w-fit h-fit border")
-    .withSizes({
-      xs: "px-1 py-1 rounded-sm text-xs",
-      sm: "px-2 py-1 rounded-md text-sm",
-      md: "px-2 py-1 rounded-lg text-base",
-      lg: "px-3 py-2 rounded-xl text-lg",
-      xl: "px-4 py-3 rounded-2xl text-xl",
-    })
-    .withAppearance({
-      default: "bg-gray-100",
-      accent: "bg-gray-200",
-      primary: "bg-blue-200",
-      secondary: "bg-gray-200",
-      tertiary: "bg-gray-200",
-      success: "bg-green-200",
-      danger: "bg-red-200",
-      warning: "bg-yellow-200",
-      info: "bg-blue-200"
-    }, {})
-    .withTypography({
-      fontFamily: { mono: true },
-      textAppearance: { secondary: true },
-    })
-    .build();
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { TypographyComponentProps } from "./props";
+
+export const Chip: React.FC<TypographyComponentProps> = (props) =>
+  componentBuilder(props, "span", "rounded-full w-fit h-fit border")
+    .withSizes({
+      xs: "px-1 py-1 rounded-sm text-xs",
+      sm: "px-2 py-1 rounded-md text-sm",
+      md: "px-2 py-1 rounded-lg text-base",
+      lg: "px-3 py-2 rounded-xl text-lg",
+      xl: "px-4 py-3 rounded-2xl text-xl",
+    })
+    .withAppearance({
+      default: "bg-gray-100",
+      accent: "bg-gray-200",
+      primary: "bg-blue-200",
+      secondary: "bg-gray-200",
+      tertiary: "bg-gray-200",
+      success: "bg-green-200",
+      danger: "bg-red-200",
+      warning: "bg-yellow-200",
+      info: "bg-blue-200"
+    }, {})
+    .withTypography({
+      fontFamily: { mono: true },
+      textAppearance: { secondary: true },
+    })
+    .build();