@mbao01/common 0.0.3 → 0.0.5

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

@@ -1,8 +1,10 @@
 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, };
+declare const Card: {
+    ({ compact, bordered, horizontal, overlay, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ className, src, alt, ...props }: CardImageProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Card };

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

@@ -0,0 +1,7 @@
+import type { DescriptionProps, DescriptionTermProps, DescriptionDetailProps } from "./types";
+declare const Description: {
+    (props: DescriptionProps): import("react/jsx-runtime").JSX.Element;
+    Term: (props: DescriptionTermProps) => import("react/jsx-runtime").JSX.Element;
+    Detail: (props: DescriptionDetailProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Description };

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

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

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

@@ -0,0 +1,3 @@
+export type DescriptionProps = React.HTMLAttributes<HTMLDListElement>;
+export type DescriptionTermProps = React.HTMLAttributes<HTMLElement>;
+export type DescriptionDetailProps = React.HTMLAttributes<HTMLElement>;

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

@@ -0,0 +1,2 @@
+import { type SkeletonProps } from "./types";
+export declare const Skeleton: ({ className, round, width, height, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { Size } from "./types";
+export declare const getSkeletonSize: ({ width, height, }: {
+    width?: Size | undefined;
+    height?: Size | undefined;
+}) => string;

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

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

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

@@ -0,0 +1,7 @@
+export type Size = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | "full";
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+    width?: Size;
+    height?: Size;
+    round?: boolean;
+    className?: string;
+};

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

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

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

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

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

@@ -1,8 +1,8 @@
 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;
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {
+    content: string;
     children: ReactNode;
     variant?: TooltipVariant;
     position?: TooltipPosition;

package/dist/types/index.d.ts

@@ -1,6 +1,11 @@
-export * from "./components/Badge";
+/** actions */
 export * from "./components/Button";
+/** data display */
+export * from "./components/Badge";
 export * from "./components/Card";
-export * from "./components/Detail";
+export * from "./components/Description";
 export * from "./components/Text";
+/** data input */
+/** feedback */
+export * from "./components/Skeleton";
 export * from "./components/Tooltip";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "vitest.config.ts"
   ],
   "bugs": "https://github.com/mbao01/mbao01/issues",
-  "homepage": "https://shared.ayomidebakare.site",
+  "homepage": "https://ui.ayomidebakare.site/common/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mbao01/mbao01.git"
@@ -107,5 +107,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "fb1542aac0eb979dd16d8d4448e4380726e4e330"
+  "gitHead": "d40fb1867ee09180de85ab18ffe74c4436e43413"
 }

package/src/components/Card/Card.tsx

@@ -54,11 +54,10 @@ const CardFooter = ({ className, ...props }: CardFooterProps) => (
   <div className={c("card-actions", className)} {...props} />
 );
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardDescription,
-  CardContent,
-  CardImage,
-};
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Description = CardDescription;
+Card.Image = CardImage;
+Card.Footer = CardFooter;
+
+export { Card };

package/src/components/Description/Description.tsx

@@ -0,0 +1,29 @@
+import c from "clsx";
+import type {
+  DescriptionProps,
+  DescriptionTermProps,
+  DescriptionDetailProps,
+} from "./types";
+
+const Description = (props: DescriptionProps) => {
+  return <dl role="list" {...props} />;
+};
+
+const DescriptionTerm = (props: DescriptionTermProps) => {
+  return (
+    <dt
+      {...props}
+      role="listitem"
+      className={c("mb-1 py-2 text-sm font-medium", props.className)}
+    />
+  );
+};
+
+const DescriptionDetail = (props: DescriptionDetailProps) => {
+  return <dd {...props} className={c("text-base", props.className)} />;
+};
+
+Description.Term = DescriptionTerm;
+Description.Detail = DescriptionDetail;
+
+export { Description };

package/src/components/Description/index.ts

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

package/src/components/Description/types.ts

@@ -0,0 +1,5 @@
+export type DescriptionProps = React.HTMLAttributes<HTMLDListElement>;
+
+export type DescriptionTermProps = React.HTMLAttributes<HTMLElement>;
+
+export type DescriptionDetailProps = React.HTMLAttributes<HTMLElement>;

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,26 @@
+import c from "clsx";
+import { type SkeletonProps } from "./types";
+import { getSkeletonSize } from "./constants";
+
+export const Skeleton = ({
+  className,
+  round,
+  width,
+  height,
+  ...props
+}: SkeletonProps) => {
+  return (
+    <div
+      {...props}
+      className={c(
+        "skeleton",
+        getSkeletonSize({ width, height }),
+        {
+          "rounded-md": !round,
+          "rounded-full": round,
+        },
+        className
+      )}
+    />
+  );
+};

package/src/components/Skeleton/constants.ts

@@ -0,0 +1,38 @@
+import c from "clsx";
+import { Size } from "./types";
+
+const WIDTH_SIZES = {
+  2: c("w-2"),
+  4: c("w-4"),
+  8: c("w-8"),
+  12: c("w-12"),
+  16: c("w-16"),
+  24: c("w-24"),
+  32: c("w-32"),
+  48: c("w-48"),
+  64: c("w-64"),
+  full: c("w-full"),
+} satisfies Record<Size, string>;
+
+const HEIGHT_SIZES = {
+  2: c("h-2"),
+  4: c("h-4"),
+  8: c("h-8"),
+  12: c("h-12"),
+  16: c("h-16"),
+  24: c("h-24"),
+  32: c("h-32"),
+  48: c("h-48"),
+  64: c("h-64"),
+  full: c("h-full"),
+} satisfies Record<Size, string>;
+
+export const getSkeletonSize = ({
+  width,
+  height,
+}: {
+  width?: Size;
+  height?: Size;
+}) => {
+  return c(WIDTH_SIZES[width!] ?? "w-full", HEIGHT_SIZES[height!] ?? "h-4");
+};

package/src/components/Skeleton/index.ts

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

package/src/components/Skeleton/types.ts

@@ -0,0 +1,8 @@
+export type Size = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | "full";
+
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+  width?: Size;
+  height?: Size;
+  round?: boolean;
+  className?: string;
+};

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/types.ts

@@ -15,8 +15,8 @@ export type TooltipVariant =
   | 'warning'
   | 'error';
 
-export type TooltipProps = {
-  tip: string;
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {
+  content: string;
   children: ReactNode;
   variant?: TooltipVariant;
   position?: TooltipPosition;

package/src/index.ts

@@ -1,6 +1,14 @@
-export * from "./components/Badge";
+/** actions */
 export * from "./components/Button";
+
+/** data display */
+export * from "./components/Badge";
 export * from "./components/Card";
-export * from "./components/Detail";
+export * from "./components/Description";
 export * from "./components/Text";
+
+/** data input */
+
+/** feedback */
+export * from "./components/Skeleton";
 export * from "./components/Tooltip";

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/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;
-};