@mbao01/ui 0.1.2 → 0.1.4

package/README.md

@@ -3,7 +3,7 @@ So here it is, I have gotten really bored creating UI component from scratch for
 It is high time I have a unified component library - so here it is.
 I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, and react.
 
-I believe in future this UI component library may extend to meta frameworks like [Next.js](https://nextjs.org/), [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).
+I believe in future this UI component library may extend to meta frameworks like [Remix](https://remix.run/) and even [Nuxt](https://nuxt.com/) (and naturally [Vue.js](https://vuejs.org/) as well).
 
 
 # Description
@@ -32,11 +32,11 @@ npm install @mbao01/ui
 ```typescript
 export default {
   content: [
-    "node_modules/@mbao01/ui/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
+    "node_modules/@mbao01/(common|ui)/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
     ...
   ],
   "plugins": [
-    require("@mbao01/ui/plugin"), // -> import the library plugin
+    require("@mbao01/common/plugin"), // -> import the tailwind library plugin
     ...
   ]
 }

package/dist/types/index.d.ts

@@ -1,8 +1,3 @@
-export * from "./components/Badge";
+export * from "@mbao01/common";
 export * from "./components/Breadcrumbs";
-export * from "./components/Button";
-export * from "./components/Card";
-export * from "./components/Detail";
 export * from "./components/Link";
-export * from "./components/Text";
-export * from "./components/Tooltip";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/ui",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -16,8 +16,6 @@
   "types": "dist/types/index.d.ts",
   "files": [
     "src",
-    "plugin.js",
-    "plugin.d.ts",
     "dist/types"
   ],
   "bugs": "https://github.com/mbao01/mbao01/issues",
@@ -26,11 +24,14 @@
     "type": "git",
     "url": "git+https://github.com/mbao01/mbao01.git"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build -o ../../docs/storybook/ui",
+    "postbuild-storybook": "cp -R ../../docs/storybook/ui/* ../../docs/storybook/ && rm -rf ../../docs/storybook/ui",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest run",
@@ -39,59 +40,52 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.16",
-    "clsx": "^2.0.0",
-    "daisyui": "^4.4.24"
+    "@heroicons/react": "^2.1.1",
+    "@mbao01/common": "^0.0.3",
+    "clsx": "^2.1.0"
   },
   "devDependencies": {
-    "@heroicons/react": "^2.1.1",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/addon-themes": "^7.6.6",
-    "@storybook/blocks": "^7.6.6",
-    "@storybook/react": "^7.6.6",
-    "@storybook/react-vite": "^7.6.6",
-    "@storybook/test": "^7.6.6",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/addon-themes": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-vite": "^7.6.14",
+    "@storybook/test": "^7.6.14",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.1.1",
-    "@vitest/ui": "^1.1.1",
-    "eslint": "^8.55.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.15",
-    "jsdom": "^23.0.1",
+    "jsdom": "^23.2.0",
     "path": "^0.12.7",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3",
-    "storybook": "^7.6.10",
+    "react-router-dom": "^6.22.0",
+    "storybook": "^7.6.14",
     "storybook-addon-react-router-v6": "^2.0.10",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.1.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^3.7.2",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "@heroicons/react": "^2.1.1",
-    "postcss": "^8.4.32",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.2.2"
+    "react-router-dom": "^6.22.0"
   },
-  "gitHead": "e26f7f8d25548953200a785f448d5ec25895ea22"
+  "gitHead": "fb1542aac0eb979dd16d8d4448e4380726e4e330"
 }

package/src/index.ts

@@ -1,8 +1,4 @@
-export * from "./components/Badge";
+export * from "@mbao01/common";
+
 export * from "./components/Breadcrumbs";
-export * from "./components/Button";
-export * from "./components/Card";
-export * from "./components/Detail";
 export * from "./components/Link";
-export * from "./components/Text";
-export * from "./components/Tooltip";

package/dist/types/components/Badge/Badge.d.ts

@@ -1,2 +0,0 @@
-import { type BadgeProps } from "./types";
-export declare const Badge: ({ size, outline, variant, children, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Badge/constants.d.ts

@@ -1,5 +0,0 @@
-import type { BadgeSize, BadgeVariant } from "./types";
-export declare const getBadgeClasses: ({ size, variant, }: {
-    size?: BadgeSize | undefined;
-    variant?: BadgeVariant | undefined;
-}) => string;

package/dist/types/components/Badge/index.d.ts

@@ -1 +0,0 @@
-export { Badge } from './Badge';

package/dist/types/components/Badge/types.d.ts

@@ -1,7 +0,0 @@
-export type BadgeSize = "xs" | "sm" | "md" | "lg";
-export type BadgeVariant = "neutral" | "primary" | "secondary" | "accent" | "ghost" | "info" | "success" | "warning" | "error";
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-    size?: BadgeSize;
-    outline?: boolean;
-    variant?: BadgeVariant;
-};

package/dist/types/components/Button/Button.d.ts

@@ -1,2 +0,0 @@
-import { type ButtonProps } from "./types";
-export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Button/constants.d.ts

@@ -1,8 +0,0 @@
-import type { ButtonSize, ButtonVariant } from './types';
-export declare const getButtonClasses: ({ size, wide, loading, outline, variant, }: {
-    size?: ButtonSize | undefined;
-    wide?: boolean | undefined;
-    loading?: boolean | undefined;
-    outline?: boolean | undefined;
-    variant?: ButtonVariant | undefined;
-}) => string;

package/dist/types/components/Button/index.d.ts

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

package/dist/types/components/Button/types.d.ts

@@ -1,12 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
-export type ButtonProps = {
-    size?: ButtonSize;
-    wide?: boolean;
-    label: ReactNode;
-    loading?: boolean;
-    outline?: boolean;
-    variant?: ButtonVariant;
-    disabled?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/types/components/Card/Card.d.ts

@@ -1,8 +0,0 @@
-import { CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardImageProps, CardProps } from "./types";
-declare const Card: ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-declare const CardHeader: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
-declare const CardDescription: ({ className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-declare const CardContent: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
-declare const CardImage: ({ className, src, alt, ...props }: CardImageProps) => import("react/jsx-runtime").JSX.Element;
-declare const CardFooter: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardFooter, CardDescription, CardContent, CardImage, };

package/dist/types/components/Card/index.d.ts

@@ -1 +0,0 @@
-export * from "./Card";

package/dist/types/components/Card/types.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-export type CardProps = {
-    /**
-     * applies smaller padding to the card.
-     */
-    compact?: boolean;
-    /**
-     * applies border to the card.
-     */
-    bordered?: boolean;
-    /**
-     * shows the card horizontally with image to the right or left of it.
-     */
-    horizontal?: boolean;
-    /**
-     * overlay is used to make the image full width with the content on top.
-     */
-    overlay?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/dist/types/components/Detail/Detail.d.ts

@@ -1,2 +0,0 @@
-import { type DetailProps } from './types';
-export declare const Detail: ({ term, children }: DetailProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Detail/index.d.ts

@@ -1 +0,0 @@
-export { Detail } from './Detail';

package/dist/types/components/Detail/types.d.ts

@@ -1,5 +0,0 @@
-import { type ReactNode } from 'react';
-export type DetailProps = {
-    term: string;
-    children: ReactNode;
-};

package/dist/types/components/Text/Text.d.ts

@@ -1,4 +0,0 @@
-import { type TextProps } from './types';
-export declare const Text: ({ as, size, variant, children, className }: TextProps) => import("react").DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;

package/dist/types/components/Text/constants.d.ts

@@ -1,5 +0,0 @@
-import type { TextSize, TextVariant } from './types';
-export declare const getTextClasses: ({ size, variant }: {
-    size?: TextSize | undefined;
-    variant?: TextVariant | undefined;
-}) => string;

package/dist/types/components/Text/index.d.ts

@@ -1 +0,0 @@
-export { Text } from './Text';

package/dist/types/components/Text/types.d.ts

@@ -1,10 +0,0 @@
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
-export type TextVariant = 'info' | 'error' | 'success' | 'warning' | 'primary' | 'secondary' | 'accent' | 'neutral';
-export type TextProps = {
-    as?: TextTag;
-    size?: TextSize;
-    variant?: TextVariant;
-    children: React.ReactNode;
-    className?: string;
-};

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,2 +0,0 @@
-import { type TooltipProps } from './types';
-export declare const Tooltip: ({ tip, children, variant, position, className }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Tooltip/constants.d.ts

@@ -1,5 +0,0 @@
-import type { TooltipPosition, TooltipVariant } from "./types";
-export declare const getTooltipClasses: ({ variant, position, }: {
-    variant?: TooltipVariant | undefined;
-    position?: TooltipPosition | undefined;
-}) => string;

package/dist/types/components/Tooltip/index.d.ts

@@ -1 +0,0 @@
-export { Tooltip } from './Tooltip';

package/dist/types/components/Tooltip/types.d.ts

@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipVariant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'info' | 'success' | 'warning' | 'error';
-export type TooltipProps = {
-    tip: string;
-    children: ReactNode;
-    variant?: TooltipVariant;
-    position?: TooltipPosition;
-    className?: string;
-};

package/plugin.d.ts

@@ -1,4 +0,0 @@
-import type { Config } from "tailwindcss";
-
-declare const plugin: { handler: () => void; config?: Config };
-export = plugin;

package/plugin.js

@@ -1,3 +0,0 @@
-const daisyui = require("daisyui");
-
-module.exports = daisyui;

package/src/components/Badge/Badge.tsx

@@ -1,28 +0,0 @@
-import c from "clsx";
-import { getBadgeClasses } from "./constants";
-import { type BadgeProps } from "./types";
-
-export const Badge = ({
-  size,
-  outline,
-  variant = "ghost",
-  children,
-  className,
-  ...props
-}: BadgeProps) => {
-  return (
-    <span
-      {...props}
-      className={c(
-        getBadgeClasses({ size, variant }),
-        {
-          "badge-outline": outline,
-          "text-base-200": !["ghost", "neutral"].includes(variant),
-        },
-        className
-      )}
-    >
-      {children}
-    </span>
-  );
-};

package/src/components/Badge/constants.ts

@@ -1,31 +0,0 @@
-import c from "clsx";
-import type { BadgeSize, BadgeVariant } from "./types";
-
-const BADGE_SIZE = {
-  xs: c("badge-xs"),
-  sm: c("badge-sm"),
-  md: c("badge-md"),
-  lg: c("badge-lg"),
-} satisfies Record<BadgeSize, string>;
-
-const BADGE_VARIANTS = {
-  accent: c("badge-accent"),
-  error: c("badge-error"),
-  ghost: c("badge-ghost"),
-  info: c("badge-info"),
-  neutral: c("badge-neutral"),
-  primary: c("badge-primary"),
-  secondary: c("badge-secondary"),
-  success: c("badge-success"),
-  warning: c("badge-warning"),
-} satisfies Record<BadgeVariant, string>;
-
-export const getBadgeClasses = ({
-  size,
-  variant,
-}: {
-  size?: BadgeSize;
-  variant?: BadgeVariant;
-}) => {
-  return c("badge", BADGE_VARIANTS[variant!], BADGE_SIZE[size!]);
-};

package/src/components/Badge/index.ts

@@ -1 +0,0 @@
-export { Badge } from './Badge';

package/src/components/Badge/types.ts

@@ -1,18 +0,0 @@
-export type BadgeSize = "xs" | "sm" | "md" | "lg";
-
-export type BadgeVariant =
-  | "neutral"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "ghost"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
-
-export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
-  size?: BadgeSize;
-  outline?: boolean;
-  variant?: BadgeVariant;
-};

package/src/components/Button/Button.tsx

@@ -1,40 +0,0 @@
-import c from "clsx";
-import { getButtonClasses } from "./constants";
-import { type ButtonProps } from "./types";
-
-export const Button = (props: ButtonProps) => {
-  const {
-    className,
-    outline,
-    label,
-    disabled,
-    onClick,
-    loading,
-    variant,
-    size,
-    wide,
-    ...rest
-  } = props;
-
-  return (
-    <button
-      {...rest}
-      onClick={onClick}
-      disabled={disabled}
-      className={c(
-        getButtonClasses({ size, wide, outline, variant, loading }),
-        className
-      )}
-    >
-      {label}
-      {loading ? (
-        <span
-          className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-[inherit]"
-          data-testid="loading"
-        >
-          <span className="loading loading-spinner" />
-        </span>
-      ) : null}
-    </button>
-  );
-};

package/src/components/Button/constants.ts

@@ -1,44 +0,0 @@
-import c from 'clsx';
-import type { ButtonSize, ButtonVariant } from './types';
-
-const BUTTON_SIZE = {
-  xs: c('btn-xs'),
-  sm: c('btn-sm'),
-  md: c('btn-md'),
-  lg: c('btn-lg'),
-} satisfies Record<ButtonSize, string>;
-
-const BUTTON_VARIANTS = {
-  accent: c('btn-accent'),
-  default: c('btn-default'),
-  error: c('btn-error'),
-  ghost: c('btn-ghost'),
-  info: c('btn-info'),
-  link: c('btn-link'),
-  neutral: c('btn-neutral'),
-  primary: c('btn-primary'),
-  secondary: c('btn-secondary'),
-  success: c('btn-success'),
-  warning: c('btn-warning'),
-} satisfies Record<ButtonVariant, string>;
-
-export const getButtonClasses = ({
-  size,
-  wide,
-  loading,
-  outline,
-  variant,
-}: {
-  size?: ButtonSize;
-  wide?: boolean;
-  loading?: boolean;
-  outline?: boolean;
-  variant?: ButtonVariant;
-}) => {
-  return c('btn', BUTTON_VARIANTS[variant!], BUTTON_SIZE[size!], {
-    'btn-outline': outline,
-    'btn-wide': wide,
-    'relative overflow-hidden': loading,
-    'min-h-fit h-10': !size,
-  });
-};

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -1,26 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
-export type ButtonVariant =
-  | 'default'
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'ghost'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error';
-
-export type ButtonProps = {
-  size?: ButtonSize;
-  wide?: boolean;
-  label: ReactNode;
-  loading?: boolean;
-  outline?: boolean;
-  variant?: ButtonVariant;
-  disabled?: boolean;
-} & ButtonHTMLAttributes<HTMLButtonElement>;

package/src/components/Card/Card.tsx

@@ -1,64 +0,0 @@
-import c from "clsx";
-import {
-  CardContentProps,
-  CardDescriptionProps,
-  CardFooterProps,
-  CardHeaderProps,
-  CardImageProps,
-  CardProps,
-} from "./types";
-
-const Card = ({
-  compact,
-  bordered,
-  horizontal,
-  overlay,
-  className,
-  ...props
-}: CardProps) => (
-  <div
-    className={c(
-      "card",
-      {
-        "card-bordered": bordered,
-        "card-compact": compact,
-        "card-normal": !compact,
-        "image-full": overlay,
-        "card-side": horizontal,
-      },
-      className
-    )}
-    {...props}
-  />
-);
-
-const CardHeader = ({ className, ...props }: CardHeaderProps) => (
-  <h3 className={c("card-title", className)} {...props} />
-);
-
-const CardDescription = ({ className, ...props }: CardDescriptionProps) => (
-  <p className={c("text-sm text-muted-foreground", className)} {...props} />
-);
-
-const CardContent = ({ className, ...props }: CardContentProps) => (
-  <div className={c("card-body p-6 pt-0", className)} {...props} />
-);
-
-const CardImage = ({ className, src, alt, ...props }: CardImageProps) => (
-  <figure>
-    <img className={className} src={src} alt={alt} {...props} />
-  </figure>
-);
-
-const CardFooter = ({ className, ...props }: CardFooterProps) => (
-  <div className={c("card-actions", className)} {...props} />
-);
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardDescription,
-  CardContent,
-  CardImage,
-};

package/src/components/Card/index.ts

@@ -1 +0,0 @@
-export * from "./Card";

package/src/components/Card/types.ts

@@ -1,26 +0,0 @@
-import React from "react";
-
-export type CardProps = {
-  /**
-   * applies smaller padding to the card.
-   */
-  compact?: boolean;
-  /**
-   * applies border to the card.
-   */
-  bordered?: boolean;
-  /**
-   * shows the card horizontally with image to the right or left of it.
-   */
-  horizontal?: boolean;
-  /**
-   * overlay is used to make the image full width with the content on top.
-   */
-  overlay?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
-export type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

package/src/components/Detail/Detail.tsx

@@ -1,10 +0,0 @@
-import { type DetailProps } from './types';
-
-export const Detail = ({ term, children }: DetailProps) => {
-  return (
-    <dl>
-      <dt className="mb-1 py-2 text-sm font-medium">{term}</dt>
-      <dd className="text-base">{children}</dd>
-    </dl>
-  );
-};

package/src/components/Detail/index.ts

@@ -1 +0,0 @@
-export { Detail } from './Detail';

package/src/components/Detail/types.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-
-export type DetailProps = {
-  term: string;
-  children: ReactNode;
-};

package/src/components/Text/Text.tsx

@@ -1,12 +0,0 @@
-import c from 'clsx';
-import { createElement } from 'react';
-import { type TextProps } from './types';
-import { getTextClasses } from './constants';
-
-export const Text = ({ as = 'span', size, variant, children, className }: TextProps) => {
-  return createElement(
-    as,
-    { className: c(getTextClasses({ size, variant }), className) },
-    children
-  );
-};

package/src/components/Text/constants.ts

@@ -1,29 +0,0 @@
-import c from 'clsx';
-import type { TextSize, TextVariant } from './types';
-
-const TEXT_SIZE = {
-  xs: c('text-xs'),
-  sm: c('text-sm'),
-  base: c('text-base'),
-  lg: c('text-lg'),
-  xl: c('text-xl'),
-  '2xl': c('text-2xl'),
-  '3xl': c('text-3xl'),
-  '4xl': c('text-4xl'),
-  '5xl': c('text-5xl'),
-} satisfies Record<TextSize, string>;
-
-const TEXT_VARIANT = {
-  info: c('text-info'),
-  error: c('text-error'),
-  success: c('text-success'),
-  warning: c('text-warning'),
-  primary: c('text-primary'),
-  secondary: c('text-secondary'),
-  accent: c('text-accent'),
-  neutral: c('text-neutral'),
-} satisfies Record<TextVariant, string>;
-
-export const getTextClasses = ({ size, variant }: { size?: TextSize; variant?: TextVariant }) => {
-  return c(TEXT_VARIANT[variant!], TEXT_SIZE[size!]);
-};

package/src/components/Text/index.ts

@@ -1 +0,0 @@
-export { Text } from './Text';

package/src/components/Text/types.ts

@@ -1,21 +0,0 @@
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-
-export type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span';
-
-export type TextVariant =
-  | 'info'
-  | 'error'
-  | 'success'
-  | 'warning'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'neutral';
-
-export type TextProps = {
-  as?: TextTag;
-  size?: TextSize;
-  variant?: TextVariant;
-  children: React.ReactNode;
-  className?: string;
-};

package/src/components/Tooltip/Tooltip.tsx

@@ -1,11 +0,0 @@
-import c from 'clsx';
-import { getTooltipClasses } from './constants';
-import { type TooltipProps } from './types';
-
-export const Tooltip = ({ tip, children, variant, position, className }: TooltipProps) => {
-  return (
-    <div className={c(getTooltipClasses({ variant, position }), className)} data-tip={tip}>
-      {children}
-    </div>
-  );
-};

package/src/components/Tooltip/constants.ts

@@ -1,33 +0,0 @@
-import c from "clsx";
-import type { TooltipPosition, TooltipVariant } from "./types";
-
-const TOOLTIP_POSITION = {
-  top: c("tooltip-top"),
-  right: c("tooltip-right"),
-  bottom: c("tooltip-bottom"),
-  left: c("tooltip-left"),
-} satisfies Record<TooltipPosition, string>;
-
-const TOOLTIP_VARIANTS = {
-  accent: c("tooltip-accent"),
-  default: c("tooltip-default"),
-  error: c("tooltip-error"),
-  ghost: c("tooltip-ghost"),
-  info: c("tooltip-info"),
-  link: c("tooltip-link"),
-  neutral: c("tooltip-neutral"),
-  primary: c("tooltip-primary"),
-  secondary: c("tooltip-secondary"),
-  success: c("tooltip-success"),
-  warning: c("tooltip-warning"),
-} satisfies Record<TooltipVariant, string>;
-
-export const getTooltipClasses = ({
-  variant,
-  position,
-}: {
-  variant?: TooltipVariant;
-  position?: TooltipPosition;
-}) => {
-  return c("tooltip", TOOLTIP_VARIANTS[variant!], TOOLTIP_POSITION[position!]);
-};

package/src/components/Tooltip/index.ts

@@ -1 +0,0 @@
-export { Tooltip } from './Tooltip';

package/src/components/Tooltip/types.ts

@@ -1,24 +0,0 @@
-import { type ReactNode } from 'react';
-
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export type TooltipVariant =
-  | 'default'
-  | 'neutral'
-  | 'primary'
-  | 'secondary'
-  | 'accent'
-  | 'ghost'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error';
-
-export type TooltipProps = {
-  tip: string;
-  children: ReactNode;
-  variant?: TooltipVariant;
-  position?: TooltipPosition;
-  className?: string;
-};