@mbao01/ui 0.1.1 → 0.1.2

package/README.md

@@ -30,13 +30,14 @@ npm install @mbao01/ui
 3. Configure tailwind
 
 ```typescript
-const plugin = require("@mbao01/ui/plugin") // -> import the library plugin
-
 export default {
-  ...plugin.config, // -> add the library plugin config
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "node_modules/@mbao01/ui/src/**/*.{js,ts,jsx,tsx,mdx}" // -> ensure to add this to allow tailwind to scan the library for classes
+    "node_modules/@mbao01/ui/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
+    ...
+  ],
+  "plugins": [
+    require("@mbao01/ui/plugin"), // -> import the library plugin
+    ...
   ]
 }
 ```

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,5 @@
+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

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

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

@@ -0,0 +1,7 @@
+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/Card/Card.d.ts

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,2 @@
+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

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

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

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

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,5 @@
+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

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

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

@@ -0,0 +1,10 @@
+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/dist/types/index.d.ts

@@ -1,4 +1,8 @@
+export * from "./components/Badge";
 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.1",
+  "version": "0.1.2",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -93,5 +93,5 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "a8f9e309d549d280a3c3b1048ab7946d554744bd"
+  "gitHead": "e26f7f8d25548953200a785f448d5ec25895ea22"
 }

package/plugin.js

@@ -1,10 +1,3 @@
-const plugin = require("tailwindcss/plugin");
-const config = require("./tailwind.config");
+const daisyui = require("daisyui");
 
-const { theme, plugins, daisyui } = config;
-
-module.exports = plugin(() => null, {
-  theme,
-  plugins,
-  daisyui,
-});
+module.exports = daisyui;

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,31 @@
+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

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

package/src/components/Badge/types.ts

@@ -0,0 +1,18 @@
+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/Card/Card.tsx

@@ -0,0 +1,64 @@
+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

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

package/src/components/Card/types.ts

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/src/components/Detail/types.ts

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

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,33 @@
+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

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

package/src/components/Tooltip/types.ts

@@ -0,0 +1,24 @@
+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/src/index.ts

@@ -1,4 +1,8 @@
+export * from "./components/Badge";
 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";