@vaneui/ui 0.0.7 → 0.0.8

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -18,10 +21,10 @@
       "types": "./dist/components/complex/index.d.ts"
     },
     "./css/ui": {
-      "css": "./dist/ui.css"
+      "import": "./dist/ui.css"
     },
     "./css/complex": {
-      "css": "./dist/complex.css"
+      "import": "./dist/complex.css"
     }
   },
   "scripts": {
@@ -53,4 +56,4 @@
     "tslib": "^2.8.1",
     "typescript": "^5.8.2"
   }
-}
+}

package/.github/workflows/npm-publish.yml

@@ -1,65 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Npm publish on push
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Build Package
-        run: npm run build
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Check if Version Already Published
-        id: check_version
-        run: |
-          # Get version from package.json
-          VERSION=$(node -p "require('./package.json').version")
-          echo "Local package version: $VERSION"
-          # Get published version for the package (@vaneui/ui) or "none" if not published.
-          PUBLISHED_VERSION=$(npm view @vaneui/ui version || echo "none")
-          echo "Published package version: $PUBLISHED_VERSION"
-          if [ "$VERSION" = "$PUBLISHED_VERSION" ]; then
-            echo "Version already published. Skipping publish step."
-            echo "shouldPublish=false" >> $GITHUB_OUTPUT
-          else
-            echo "Version is new. Proceeding with publish."
-            echo "shouldPublish=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Publish Package to npm
-        if: steps.check_version.outputs.shouldPublish == 'true'
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "cSpell.words": [
-    "vaneui"
-  ]
-}

package/rollup.config.mjs

@@ -1,45 +0,0 @@
-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-typescript2";
-import pkg from "./package.json";
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: pkg.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: pkg.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-    ],
-  },
-  {
-    input: "src/components/complex/index.ts",
-    output: [
-      {
-        file: "dist/components/complex/index.js",
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.complex.json" }),
-    ],
-  },
-];

package/src/components/complex/index.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/components/complex/index.ts

@@ -1 +0,0 @@
-export { SocialShare } from "./sharer";

package/src/components/complex/sharer.tsx

@@ -1,216 +0,0 @@
-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('&')
-    : '';
-};
-
-export 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>
-  );
-};

package/src/components/ui/badge.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/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/button.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/props";
-
-export const Button: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "button", "w-fit h-fit cursor-pointer flex justify-center items-center border border-gray-200 transition-all duration-300")
-    .withSizes({
-      xs: "px-2 py-1 rounded-sm text-xs",
-      sm: "px-3 py-1 rounded-md text-sm",
-      md: "px-4 py-2 rounded-md text-base",
-      lg: "px-6 py-3 rounded-lg text-lg",
-      xl: "px-8 py-4 rounded-xl text-xl",
-    })
-    .withSizes({
-      xs: "shadow-xs hover:shadow-sm",
-      sm: "shadow-xs hover:shadow-sm",
-      md: "shadow-sm hover:shadow-md",
-      lg: "shadow-md hover:shadow-lg",
-      xl: "shadow-lg hover:shadow-xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true },
-    })
-    .build();

package/src/components/ui/chip.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "./../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/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();

package/src/components/ui/divider.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "./../utils/componentBuilder";
-import { BaseComponentProps } from "./props/props";
-
-export const Divider: React.FC<BaseComponentProps> = (props) =>
-  componentBuilder(props, "div", "bg-gray-200 w-full h-px")
-    .build();

package/src/components/ui/index.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/components/ui/layout.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { GridProps, LayoutComponentProps, ColProps, RowProps } from "./props/props";
-import { componentBuilder } from "../utils/componentBuilder";
-
-const centeredClasses = {
-  centered: "items-center justify-center",
-  vCentered: "items-center",
-  hCentered: "justify-center"
-}
-
-export const Section: React.FC<LayoutComponentProps> = (props) =>
-  componentBuilder(props, "section", "w-full flex flex-col items-start")
-    .withCentered(centeredClasses)
-    .withSizes({
-      xs: "py-6  max-lg:py-4  max-md:py-2",
-      sm: "py-8  max-lg:py-6  max-md:py-4",
-      md: "py-10 max-lg:py-8  max-md:py-6",
-      lg: "py-12 max-lg:py-10 max-md:py-8",
-      xl: "py-14 max-lg:py-12 max-md:py-10",
-    })
-    .withSizes({
-      xs: "px-4  max-lg:px-2  max-md:px-0",
-      sm: "px-6  max-lg:px-6  max-md:px-2",
-      md: "px-8  max-lg:px-6  max-md:px-4",
-      lg: "px-10 max-lg:px-8  max-md:px-6",
-      xl: "px-12 max-lg:px-10 max-md:px-8",
-    })
-    .build();
-
-export const Container: React.FC<LayoutComponentProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-col mx-auto w-full")
-    .withCentered(centeredClasses)
-    .withSizes({
-      xs: "max-w-3xl gap-2  max-lg:gap-1",
-      sm: "max-w-4xl gap-4  max-lg:gap-3 max-md:gap-2",
-      md: "max-w-5xl gap-6  max-lg:gap-5 max-md:gap-4",
-      lg: "max-w-6xl gap-8  max-lg:gap-7 max-md:gap-6",
-      xl: "max-w-7xl gap-10 max-lg:gap-9 max-md:gap-8",
-    })
-    .build();
-
-const commonGaps = {
-  xs: "gap-1",
-  sm: "gap-2 max-lg:gap-1",
-  md: "gap-4 max-lg:gap-3 max-md:gap-2",
-  lg: "gap-6 max-lg:gap-5 max-md:gap-4",
-  xl: "gap-8 max-lg:gap-7 max-md:gap-6",
-}
-
-export const Col: React.FC<ColProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-col")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-      reverse: "flex-col-reverse"
-    })
-    .withCentered(centeredClasses)
-    .build();
-
-export const Row: React.FC<RowProps> = (props) =>
-  componentBuilder(props, "div", "flex flex-row")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-      reverse: "flex-row-reverse"
-    })
-    .withCentered(centeredClasses)
-    .withBreakpoints({
-      xsCol: "max-xs:flex-col",
-      smCol: "max-sm:flex-col",
-      mdCol: "max-md:flex-col",
-      lgCol: "max-lg:flex-col",
-      xlCol: "max-xl:flex-col"
-    })
-    .withBooleanProps({
-      justifyStart: "justify-start",
-      justifyEnd: "justify-end",
-      justifyCenter: "justify-center",
-      justifyBetween: "justify-between",
-      justifyAround: "justify-around",
-      justifyEvenly: "justify-evenly",
-      justifyStretch: "justify-stretch",
-      justifyBaseline: "justify-baseline",
-    })
-    .build();
-
-const gridGaps = {
-  xs: "gap-2",
-  sm: "gap-4  max-lg:gap-2",
-  md: "gap-6  max-lg:gap-4",
-  lg: "gap-8  max-lg:gap-6 max-md:gap-4",
-  xl: "gap-10 max-lg:gap-8 max-md:gap-6",
-}
-
-export const Grid3: React.FC<GridProps> = (props) =>
-  componentBuilder(props, "div", "w-full grid grid-cols-3 max-lg:grid-cols-2 max-md:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-
-export const Grid4: React.FC<GridProps> = (props) =>
-  componentBuilder(props, "div", "w-full grid grid-cols-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-

package/src/components/ui/props/commonValues.ts

@@ -1,51 +0,0 @@
-export const fontWeightClasses = {
-  thin: "font-thin",
-  extralight: "font-extralight",
-  light: "font-light",
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold",
-  extrabold: "font-extrabold",
-  black: "font-black",
-}
-
-export const fontStyleClasses = {
-  italic: "italic",
-  notItalic: "not-italic",
-}
-
-export const fontFamilyClasses = {
-  sans: "font-sans",
-  serif: "font-serif",
-  mono: "font-mono",
-}
-
-export const textDecorationClasses = {
-  underline: "underline",
-  lineThrough: "line-through",
-  noUnderline: "no-underline",
-  overline: "overline",
-}
-
-export const textTransformClasses = {
-  uppercase: "uppercase",
-  lowercase: "lowercase",
-  capitalize: "capitalize",
-  normalCase: "normal-case",
-}
-
-export const textAppearanceClasses = {
-  default: "text-(--text-color-default)",
-  primary: "text-(--text-color-primary)",
-  secondary: "text-(--text-color-secondary)",
-  tertiary: "text-(--text-color-tertiary)",
-  muted: "text-(--text-color-muted)",
-  link: "text-(--text-color-link)",
-
-  accent: "text-(--text-color-accent)",
-  success: "text-(--text-color-success)",
-  danger: "text-(--text-color-danger)",
-  warning: "text-(--text-color-warning)",
-  info: "text-(--text-color-info)",
-}

package/src/components/ui/props/props.ts

@@ -1,128 +0,0 @@
-export interface SizeProps {
-  xs?: boolean;
-  sm?: boolean;
-  md?: boolean;
-  lg?: boolean;
-  xl?: boolean;
-}
-
-export interface FontFamilyProps {
-  sans?: boolean;
-  serif?: boolean;
-  mono?: boolean;
-}
-
-export interface FontWeightProps {
-  thin?: boolean;
-  extralight?: boolean;
-  light?: boolean;
-  normal?: boolean;
-  medium?: boolean;
-  semibold?: boolean;
-  bold?: boolean;
-  extrabold?: boolean;
-  black?: boolean;
-}
-
-export interface FontStyleProps {
-  italic?: boolean;
-  notItalic?: boolean;
-}
-
-export interface TextDecorationProps {
-  underline?: boolean;
-  lineThrough?: boolean;
-  noUnderline?: boolean;
-  overline?: boolean;
-}
-
-export interface TextTransformProps {
-  uppercase?: boolean;
-  lowercase?: boolean;
-  capitalize?: boolean;
-  normalCase?: boolean;
-}
-
-export interface TextAppearanceProps {
-  muted?: boolean;
-  link?: boolean;
-}
-
-export interface CommonAppearanceProps {
-  default?: boolean;
-  accent?: boolean;
-  primary?: boolean;
-  secondary?: boolean;
-  tertiary?: boolean;
-  success?: boolean;
-  danger?: boolean;
-  warning?: boolean;
-  info?: boolean;
-}
-
-export interface BreakpointProps {
-  xsCol?: boolean;
-  smCol?: boolean;
-  mdCol?: boolean;
-  lgCol?: boolean;
-  xlCol?: boolean;
-}
-
-export interface HideProps {
-  xsHide?: boolean;
-  smHide?: boolean;
-  mdHide?: boolean;
-  lgHide?: boolean;
-  xlHide?: boolean;
-}
-
-export interface PositionProps {
-  relative?: boolean;
-  absolute?: boolean;
-  fixed?: boolean;
-  sticky?: boolean;
-  static?: boolean;
-}
-
-export interface TagProps {
-  tag?: React.ElementType | string;
-}
-
-export interface ReverseProps {
-  reverse?: boolean;
-}
-
-export interface GapProps {
-  noGap?: boolean;
-}
-
-export interface CenteredProps {
-  centered?: boolean;
-  vCentered?: boolean;
-  hCentered?: boolean;
-}
-
-export interface JustifyProps {
-  justifyStart?: boolean;
-  justifyEnd?: boolean;
-  justifyCenter?: boolean;
-  justifyBetween?: boolean;
-  justifyAround?: boolean;
-  justifyEvenly?: boolean;
-  justifyStretch?: boolean;
-  justifyBaseline?: boolean;
-}
-
-export type BaseComponentProps = TagProps & Partial<SizeProps & HideProps & PositionProps> & React.HTMLProps<HTMLElement>;
-
-export type LayoutComponentProps = BaseComponentProps & ReverseProps & CenteredProps;
-
-export type FontProps = FontWeightProps & FontStyleProps & TextDecorationProps & TextTransformProps & FontFamilyProps & TextAppearanceProps & CommonAppearanceProps;
-
-export type TypographyComponentProps = BaseComponentProps & FontProps;
-
-export type GridProps = BaseComponentProps & GapProps;
-
-export type RowProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps & BreakpointProps & JustifyProps;
-
-export type ColProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps;

package/src/components/ui/settings.ts

@@ -1,19 +0,0 @@
-import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props/props";
-
-export type CommonAppearanceSettings = { [key in keyof CommonAppearanceProps]: boolean; };
-
-export type FontFamilySettings = { [key in keyof FontFamilyProps]: boolean; };
-export type FontWeightSettings = { [key in keyof FontWeightProps]: boolean; };
-export type FontStyleSettings = { [key in keyof FontStyleProps]: boolean; };
-export type TextAppearanceSettings = { [key in keyof TextAppearanceProps & CommonAppearanceProps]: boolean; };
-export type TextDecorationSettings = { [key in keyof TextDecorationProps]: boolean; };
-export type TextTransformSettings = { [key in keyof TextTransformProps]: boolean; };
-
-export type TypographySettings = {
-  fontFamily?: FontFamilySettings;
-  fontWeight?: FontWeightSettings;
-  fontStyle?: FontStyleSettings;
-  textAppearance?: TextAppearanceSettings;
-  textDecoration?: TextDecorationSettings;
-  textTransform?: TextTransformSettings;
-};

package/src/components/ui/typography.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/props";
-
-export const PageTitle: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h1")
-    .withSizes({
-      xs: "text-3xl",
-      sm: "text-4xl",
-      md: "text-5xl",
-      lg: "text-6xl",
-      xl: "text-7xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const SectionTitle: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h2")
-    .withSizes({
-      xs: "text-2xl",
-      sm: "text-3xl",
-      md: "text-4xl",
-      lg: "text-5xl",
-      xl: "text-6xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const Title: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h3")
-    .withSizes({
-      xs: "text-lg",
-      sm: "text-xl",
-      md: "text-2xl",
-      lg: "text-3xl",
-      xl: "text-4xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const Text: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "p", "p-0 m-0")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({
-      textAppearance: { secondary: true }
-    })
-    .build();
-
-export const Link: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "a", "hover:underline")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({
-      textAppearance: { link: true }
-    })
-    .build();
-
-export const ListItem: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "li")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({})
-    .build();
-
-export const List: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "ul", "list-disc list-inside")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({})
-    .build();

package/src/components/utils/componentBuilder.tsx

@@ -1,124 +0,0 @@
-import { twMerge } from "tailwind-merge";
-import { BaseComponentProps, BreakpointProps, CenteredProps, CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, GapProps, HideProps, PositionProps, ReverseProps, ColProps, RowProps, TextAppearanceProps, TextDecorationProps, TextTransformProps, SizeProps } from "../ui/props/props";
-import { fontFamilyClasses, fontStyleClasses, fontWeightClasses, textAppearanceClasses, textDecorationClasses, textTransformClasses } from "../ui/props/commonValues";
-import { CommonAppearanceSettings, FontFamilySettings, FontStyleSettings, FontWeightSettings, TextAppearanceSettings, TextDecorationSettings, TextTransformSettings, TypographySettings } from "../ui/settings";
-
-function getBooleanClass<T extends Record<string, boolean | undefined>>(
-  props: T,
-  classes?: Record<keyof T, string>,
-  fallbackKey?: keyof T
-): string {
-  if (!classes) return "";
-  for (const key in props) {
-    if (Object.prototype.hasOwnProperty.call(props, key) && props[key]) {
-      return classes[key] ?? "";
-    }
-  }
-  return fallbackKey ? classes[fallbackKey] ?? "" : "";
-}
-
-export function componentBuilder(
-  baseProps: BaseComponentProps,
-  defaultTag: string,
-  baseClasses?: string
-) {
-  const extraClasses: string[] = [];
-  const { className, children, tag, ...other } = baseProps;
-  const otherProps: (typeof other) & Partial<ReverseProps & CenteredProps & GapProps & RowProps & ColProps> = { ...other };
-  const propsToRemove: string[] = []
-
-  const registerKeys = (keys: string[]) => {
-    keys.forEach((key) => propsToRemove.push(key));
-  };
-
-  const withBooleanProps = <T extends Record<string, string>>(
-    propMap: Record<keyof T, string>,
-    fallbackKey?: keyof T,
-    settings?: { [key: string]: boolean }
-  ) => {
-    // Build a subset of props from otherProps for the keys in the map.
-    const propsSubset: Partial<Record<keyof T, boolean>> = {} as Partial<Record<keyof T, boolean>>;
-    const keys = Object.keys(propMap) as (keyof T)[];
-    keys.forEach((key) => {
-      if (key in otherProps) {
-        propsSubset[key] = otherProps[key as keyof typeof otherProps];
-      }
-    });
-
-    if (settings) {
-      const settingsClass = getBooleanClass(settings || {}, propMap);
-      extraClasses.push(settingsClass);
-    }
-
-    // Compute the class.
-    const newClass = getBooleanClass(propsSubset, propMap, fallbackKey);
-    extraClasses.push(newClass);
-
-    // Register all keys found in the map.
-    registerKeys(keys as string[]);
-    return builder;
-  };
-
-  function finalize(): React.ReactElement {
-    const Tag = tag || defaultTag;
-    const merged = twMerge(baseClasses, ...extraClasses, className);
-
-    propsToRemove.forEach(key => delete otherProps[key as keyof typeof otherProps])
-
-    return (
-      <Tag className={merged} {...otherProps}>
-        {children}
-      </Tag>
-    );
-  }
-
-  const builder = {
-    withBooleanProps,
-
-    withSizes: (sizeMap: Record<keyof SizeProps, string>) => withBooleanProps(sizeMap, "md"),
-    withBreakpoints: (breakpointMap: Record<keyof BreakpointProps, string>) => withBooleanProps(breakpointMap),
-    withReverse: (reverseMap: Record<keyof ReverseProps, string>) => withBooleanProps(reverseMap),
-    withCentered: (centeredMap: Record<keyof CenteredProps, string>) => withBooleanProps(centeredMap),
-    withHide: (hideMap: Record<keyof HideProps, string>) => withBooleanProps(hideMap),
-    withPosition: (positionMap: Record<keyof PositionProps, string>) => withBooleanProps(positionMap),
-    withFontWeight: (fontWeight: Record<keyof FontWeightProps, string>, settings: FontWeightSettings) => withBooleanProps(fontWeight, undefined, settings),
-    withFontStyle: (fontStyle: Record<keyof FontStyleProps, string>, settings: FontStyleSettings) => withBooleanProps(fontStyle, undefined, settings),
-    withFontFamily: (fontFamily: Record<keyof FontFamilyProps, string>, settings: FontFamilySettings) => withBooleanProps(fontFamily, undefined, settings),
-    withTextDecoration: (textDecoration: Record<keyof TextDecorationProps, string>, settings: TextDecorationSettings) => withBooleanProps(textDecoration, undefined, settings),
-    withTextTransform: (textTransform: Record<keyof TextTransformProps, string>, settings: TextTransformSettings) => withBooleanProps(textTransform, undefined, settings),
-    withTextAppearance: (appearance: Record<keyof TextAppearanceProps & CommonAppearanceProps, string>, settings: TextAppearanceSettings) => withBooleanProps(appearance, "default", settings),
-
-    withGaps: (gapMap: Record<keyof GapProps, string>, sizeMap: Record<keyof SizeProps, string>) =>
-      otherProps.noGap !== undefined && otherProps.noGap ? withBooleanProps(gapMap) : builder.withSizes(sizeMap),
-
-    withTypography: (settings: TypographySettings) => builder
-      .withFontFamily(fontFamilyClasses, settings?.fontFamily ?? {})
-      .withFontStyle(fontStyleClasses, settings?.fontStyle ?? {})
-      .withFontWeight(fontWeightClasses, settings?.fontWeight ?? {})
-      .withTextDecoration(textDecorationClasses, settings?.textDecoration ?? {})
-      .withTextTransform(textTransformClasses, settings?.textTransform ?? {})
-      .withTextAppearance(textAppearanceClasses, settings?.textAppearance ?? {}),
-
-    withAppearance: (appearance: Record<keyof CommonAppearanceProps, string>, settings: CommonAppearanceSettings) => withBooleanProps(appearance, "default", settings),
-
-    build() {
-      builder.withHide({
-        xsHide: "max-xs:hidden",
-        smHide: "max-sm:hidden",
-        mdHide: "max-md:hidden",
-        lgHide: "max-lg:hidden",
-        xlHide: "max-xl:hidden"
-      })
-      builder.withPosition({
-        relative: "relative",
-        absolute: "absolute",
-        fixed: "fixed",
-        sticky: "sticky",
-        static: "static"
-      })
-      return finalize();
-    },
-  };
-
-  return builder;
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export { Button } from "./components/ui/button";
-export { Badge } from "./components/ui/badge";
-export { Divider } from "./components/ui/divider";
-export { Chip } from "./components/ui/chip";
-export { Section, Container, Col, Row, Grid3, Grid4 } from "./components/ui/layout";
-export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";

package/tsconfig.complex.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src/components/complex",
-    "outDir": "dist/components/complex",
-    "declarationDir": "dist/components/complex"
-  },
-  "include": [
-    "src/components/complex/**/*"
-  ]
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "module": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "jsx": "react-jsx",
-    "declaration": true,
-    "outDir": "dist",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "strict": true
-  },
-  "include": ["src"]
-}