@mbao01/common 0.2.2 → 0.2.3

package/src/components/Form/Validator/types.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from "react";
+import React from "react";
+import { type VariantProps } from "../../../libs";
+import { Text } from "../../Text";
+import { getValidatorClasses, getValidatorHintClasses } from "./constants";
+
+type FormElements = "input" | "select" | "textarea";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type As<P = any> =
+  | FormElements
+  | React.ComponentType<P>
+  | React.ForwardRefExoticComponent<P>;
+
+type AllowedElements = Pick<React.JSX.IntrinsicElements, FormElements>;
+
+export type ValidatorProps<T extends As> = (T extends FormElements
+  ? AllowedElements[T]
+  : T extends React.ForwardRefExoticComponent<infer P>
+    ? P
+    : T extends React.ComponentType<infer P>
+      ? P
+      : never) &
+  VariantProps<typeof getValidatorClasses> & {
+    as: T;
+    children?: ReactNode;
+    className?: string;
+  };
+
+export type ValidatorHintProps = ComponentProps<typeof Text> &
+  VariantProps<typeof getValidatorHintClasses>;

package/src/components/Form/components/Fieldset/types.ts

@@ -10,7 +10,7 @@ type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 
 export type FieldsetLabelProps<T extends As> = (T extends "label"
   ? React.LabelHTMLAttributes<HTMLLabelElement>
-  : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) &
+  : AllowedElements[T]) &
   VariantProps<typeof getFieldsetLabelClasses> & {
     as?: T;
   };

package/src/components/Form/index.ts

@@ -12,5 +12,6 @@ export { Checkbox, CheckboxControlled } from "./Checkbox";
 export { TagsInput } from "./TagsInput";
 export { Textarea } from "./Textarea";
 export { TextField } from "./TextField";
+export { Validator } from "./Validator";
 export { Label } from "./components/Label";
 export { Fieldset } from "./components/Fieldset";

package/src/components/Indicator/Indicator.tsx

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { As, IndicatorItemProps, IndicatorProps } from "./types";
+import { cn } from "../../utilities";
+import {
+  getIndicatorClasses,
+  getIndicatorItemClasses,
+  getIndicatorPositionClasses,
+} from "./constants";
+
+const Indicator = <T extends As>({
+  as,
+  position,
+  className,
+  children,
+  ...props
+}: IndicatorProps<T>) => {
+  const SlotChild = as;
+
+  return (
+    <Slot
+      className={cn(getIndicatorClasses(), getIndicatorPositionClasses({ position }), className)}
+      {...props}
+    >
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+const IndicatorItem = <T extends As>({
+  as,
+  className,
+  children,
+  ...props
+}: IndicatorItemProps<T>) => {
+  const SlotChild = as;
+
+  return (
+    <Slot className={cn(getIndicatorItemClasses(), className)} {...props}>
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+Indicator.Item = IndicatorItem;
+
+export { Indicator };

package/src/components/Indicator/constants.ts

@@ -0,0 +1,26 @@
+import { cva } from "../../libs";
+import { cn } from "../../utilities";
+
+export const getIndicatorClasses = cva("indicator");
+
+export const getIndicatorItemClasses = cva("indicator-item");
+
+const INDICATOR_POSITION_CLASS = {
+  center: cn("indicator-center"),
+  middle: cn("indicator-middle"),
+  start: cn("indicator-start"),
+  end: cn("indicator-end"),
+  top: cn("indicator-top"),
+  bottom: cn("indicator-bottom"),
+};
+
+type IndicatorPosition = keyof typeof INDICATOR_POSITION_CLASS;
+
+export const getIndicatorPositionClasses = ({
+  position = [],
+}: {
+  position: IndicatorPosition | IndicatorPosition[];
+}) => {
+  const positions = Array.isArray(position) ? position : [position];
+  return positions.map((p) => INDICATOR_POSITION_CLASS[p]).join(" ");
+};

package/src/components/Indicator/index.ts

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

package/src/components/Indicator/types.ts

@@ -0,0 +1,34 @@
+import { type VariantProps } from "../../libs";
+import {
+  getIndicatorClasses,
+  getIndicatorItemClasses,
+  getIndicatorPositionClasses,
+} from "./constants";
+
+type FormElements = keyof React.JSX.IntrinsicElements;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type As<P = any> =
+  | FormElements
+  | React.ComponentType<P>
+  | React.ForwardRefExoticComponent<P>;
+
+type AllowedElements = Pick<React.JSX.IntrinsicElements, FormElements>;
+
+type AsProps<T extends As> = T extends FormElements
+  ? AllowedElements[T]
+  : T extends React.ForwardRefExoticComponent<infer P>
+    ? P
+    : T extends React.ComponentType<infer P>
+      ? P
+      : never;
+
+export type IndicatorProps<T extends As> = AsProps<T> &
+  VariantProps<typeof getIndicatorClasses> & {
+    as: T;
+    position?: Parameters<typeof getIndicatorPositionClasses>[0]["position"];
+  };
+
+export type IndicatorItemProps<T extends As> = AsProps<T> &
+  VariantProps<typeof getIndicatorItemClasses> & {
+    as: T;
+  };

package/src/components/Join/Join.tsx

@@ -0,0 +1,28 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { As, JoinItemProps, JoinProps } from "./types";
+import { cn } from "../../utilities";
+import { getJoinClasses, getJoinItemClasses } from "./constants";
+
+const Join = <T extends As>({ as, className, children, ...props }: JoinProps<T>) => {
+  const SlotChild = as;
+
+  return (
+    <Slot className={cn(getJoinClasses(), className)} {...props}>
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+const JoinItem = <T extends As>({ as, className, children, ...props }: JoinItemProps<T>) => {
+  const SlotChild = as;
+
+  return (
+    <Slot className={cn(getJoinItemClasses(), className)} {...props}>
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+Join.Item = JoinItem;
+
+export { Join };

package/src/components/Join/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getJoinClasses = cva("join");
+
+export const getJoinItemClasses = cva("rounded-[auto] join-item");

package/src/components/Join/index.ts

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

package/src/components/Join/types.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from "../../libs";
+import { getJoinClasses, getJoinItemClasses } from "./constants";
+
+type FormElements = keyof React.JSX.IntrinsicElements;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type As<P = any> =
+  | FormElements
+  | React.ComponentType<P>
+  | React.ForwardRefExoticComponent<P>;
+
+type AllowedElements = Pick<React.JSX.IntrinsicElements, FormElements>;
+
+type AsProps<T extends As> = T extends FormElements
+  ? AllowedElements[T]
+  : T extends React.ForwardRefExoticComponent<infer P>
+    ? P
+    : T extends React.ComponentType<infer P>
+      ? P
+      : never;
+
+export type JoinProps<T extends As> = AsProps<T> &
+  VariantProps<typeof getJoinClasses> & {
+    as: T;
+  };
+
+export type JoinItemProps<T extends As> = AsProps<T> &
+  VariantProps<typeof getJoinItemClasses> & {
+    as: T;
+  };

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,7 @@
+import type { KbdProps } from "./types";
+import { cn } from "../../utilities";
+import { getKbdClasses } from "./constants";
+
+export const Kbd = ({ outline, variant, size, className, ...props }: KbdProps) => (
+  <kbd className={cn(getKbdClasses({ outline, variant, size }), className)} {...props} />
+);

package/src/components/Kbd/constants.ts

@@ -0,0 +1,40 @@
+import { cva } from "../../libs";
+
+export const getKbdClasses = cva("kbd", {
+  variants: {
+    variant: {
+      accent: "bg-accent text-accent-content border-accent",
+      default: "bg-default text-default-content border-default",
+      error: "bg-error text-error-content border-error",
+      ghost: "bg-ghost text-ghost-content border-transparent",
+      info: "bg-info text-info-content border-info",
+      neutral: "bg-neutral text-neutral-content border-neutral",
+      primary: "bg-primary text-primary-content border-primary",
+      secondary: "bg-secondary text-secondary-content border-secondary",
+      success: "bg-success text-success-content border-success",
+      warning: "bg-warning text-warning-content border-warning",
+    },
+    outline: {
+      true: "bg-default",
+    },
+    size: {
+      xs: "kbd-xs",
+      sm: "kbd-sm",
+      md: "kbd-md",
+      lg: "kbd-lg",
+      xl: "kbd-xl",
+    },
+  },
+  compoundVariants: [
+    { outline: true, variant: "accent", className: "text-accent" },
+    { outline: true, variant: "default", className: "text-default" },
+    { outline: true, variant: "error", className: "text-error" },
+    { outline: true, variant: "ghost", className: "text-ghost" },
+    { outline: true, variant: "info", className: "text-info" },
+    { outline: true, variant: "neutral", className: "text-neutral" },
+    { outline: true, variant: "primary", className: "text-primary" },
+    { outline: true, variant: "secondary", className: "text-secondary" },
+    { outline: true, variant: "success", className: "text-success" },
+    { outline: true, variant: "warning", className: "text-warning" },
+  ],
+});

package/src/components/Kbd/index.ts

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

package/src/components/Kbd/types.ts

@@ -0,0 +1,4 @@
+import { type VariantProps } from "../../libs";
+import { getKbdClasses } from "./constants";
+
+export type KbdProps = React.HTMLAttributes<HTMLElement> & VariantProps<typeof getKbdClasses>;

package/src/components/List/List.tsx

@@ -0,0 +1,35 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { ListColumnProps, ListItemProps, ListProps } from "./types";
+import { cn } from "../../utilities";
+import { getListClasses, getListColumnClasses, getListItemClasses } from "./constants";
+
+const List = ({ className, children, ...props }: ListProps) => (
+  <ul className={cn(getListClasses(), className)} {...props}>
+    {children}
+  </ul>
+);
+
+const ListItem = ({ className, children, ...props }: ListItemProps) => (
+  <li className={cn(getListItemClasses(), className)} {...props}>
+    {children}
+  </li>
+);
+
+const ListColumn = ({ flex, className, children, ...props }: ListColumnProps) => {
+  const SlotChild = ["string", "number", "boolean", "undefined"].includes(typeof children) ? (
+    <span>{children}</span>
+  ) : (
+    children
+  );
+
+  return (
+    <Slot className={cn(getListColumnClasses({ flex }), className)} {...props}>
+      {SlotChild}
+    </Slot>
+  );
+};
+
+List.Item = ListItem;
+List.Column = ListColumn;
+
+export { List };

package/src/components/List/constants.ts

@@ -0,0 +1,14 @@
+import { cva } from "../../libs";
+
+export const getListClasses = cva("list");
+
+export const getListItemClasses = cva("list-row");
+
+export const getListColumnClasses = cva("", {
+  variants: {
+    flex: {
+      grow: "list-col-grow",
+      wrap: "list-col-grow",
+    },
+  },
+});

package/src/components/List/index.ts

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

package/src/components/List/types.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { type VariantProps } from "../../libs";
+import { getListClasses, getListColumnClasses, getListItemClasses } from "./constants";
+
+export type ListProps = React.HTMLAttributes<HTMLUListElement> &
+  VariantProps<typeof getListClasses>;
+
+export type ListItemProps = React.HTMLAttributes<HTMLLIElement> &
+  VariantProps<typeof getListItemClasses>;
+
+export type ListColumnProps = React.HTMLAttributes<HTMLLIElement> &
+  VariantProps<typeof getListColumnClasses>;

package/src/components/Resizable/Resizable.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as ResizablePrimitive from "react-resizable-panels";
+import { GripVerticalIcon } from "lucide-react";
+import type { ResizableHandleProps, ResizableProps } from "./types";
+import { cn } from "../../utilities";
+import {
+  getResizableClasses,
+  getResizableHandleClasses,
+  getResizableHandleIconClasses,
+  getResizableHandleIconWrapperClasses,
+} from "./constants";
+
+const Resizable = ({ className, ...props }: ResizableProps) => (
+  <ResizablePrimitive.PanelGroup className={cn(getResizableClasses(), className)} {...props} />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({ withHandle, bordered, className, ...props }: ResizableHandleProps) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(getResizableHandleClasses({ bordered }), className)}
+    {...props}
+  >
+    {withHandle && (
+      <div className={getResizableHandleIconWrapperClasses()}>
+        <GripVerticalIcon className={getResizableHandleIconClasses()} />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+Resizable.Panel = ResizablePanel;
+Resizable.Handle = ResizableHandle;
+
+export { Resizable };

package/src/components/Resizable/constants.ts

@@ -0,0 +1,22 @@
+import { cva } from "../../libs";
+
+export const getResizableClasses = cva(
+  "flex h-full w-full data-[panel-group-direction=vertical]:flex-col"
+);
+
+export const getResizableHandleClasses = cva(
+  "relative flex w-px items-center justify-center border-primary after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+  {
+    variants: {
+      bordered: {
+        true: "border border-neutral-content",
+      },
+    },
+  }
+);
+
+export const getResizableHandleIconWrapperClasses = cva(
+  "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-base-100"
+);
+
+export const getResizableHandleIconClasses = cva("h-2.5 w-2.5");

package/src/components/Resizable/index.ts

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

package/src/components/Resizable/types.ts

@@ -0,0 +1,13 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+import { type VariantProps } from "../../libs";
+import { getResizableClasses, getResizableHandleClasses } from "./constants";
+
+export type ResizableProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup> &
+  VariantProps<typeof getResizableClasses>;
+
+export type ResizableHandleProps = React.ComponentProps<
+  typeof ResizablePrimitive.PanelResizeHandle
+> &
+  VariantProps<typeof getResizableHandleClasses> & {
+    withHandle?: boolean;
+  };

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,11 @@
+import type { StackProps } from "./types";
+import { cn } from "../../utilities";
+import { getStackClasses } from "./constants";
+
+export const Stack = ({ className, children, direction, ...props }: StackProps) => {
+  return (
+    <div className={cn(getStackClasses({ direction }), className)} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/components/Stack/constants.ts

@@ -0,0 +1,12 @@
+import { cva } from "../../libs";
+
+export const getStackClasses = cva("stack", {
+  variants: {
+    direction: {
+      start: "stack-start",
+      end: "stack-end",
+      top: "stack-top",
+      bottom: "stack-bottom",
+    },
+  },
+});

package/src/components/Stack/index.ts

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

package/src/components/Stack/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getStackClasses } from "./constants";
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStackClasses>;

package/src/components/Stat/Stat.tsx

@@ -0,0 +1,55 @@
+import type {
+  StatActionsProps,
+  StatDescriptionProps,
+  StatFigureProps,
+  StatProps,
+  StatsProps,
+  StatTitleProps,
+  StatValueProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getStatActionsClasses,
+  getStatClasses,
+  getStatDescriptionClasses,
+  getStatFigureClasses,
+  getStatsClasses,
+  getStatTitleClasses,
+  getStatValueClasses,
+} from "./constants";
+
+const Stats = ({ direction, className, ...props }: StatsProps) => (
+  <div className={cn(getStatsClasses({ direction }), className)} {...props} />
+);
+
+const Stat = ({ className, position, ...props }: StatProps) => (
+  <div className={cn(getStatClasses({ position }), className)} {...props} />
+);
+
+const StatTitle = ({ className, ...props }: StatTitleProps) => (
+  <div className={cn(getStatTitleClasses(), className)} {...props} />
+);
+
+const StatValue = ({ className, ...props }: StatValueProps) => (
+  <div className={cn(getStatValueClasses(), className)} {...props} />
+);
+
+const StatDescription = ({ className, ...props }: StatDescriptionProps) => (
+  <div className={cn(getStatDescriptionClasses(), className)} {...props} />
+);
+
+const StatFigure = ({ className, ...props }: StatFigureProps) => (
+  <div className={cn(getStatFigureClasses(), className)} {...props} />
+);
+
+const StatActions = ({ className, ...props }: StatActionsProps) => (
+  <div className={cn(getStatActionsClasses(), className)} {...props} />
+);
+
+Stat.Actions = StatActions;
+Stat.Description = StatDescription;
+Stat.Figure = StatFigure;
+Stat.Title = StatTitle;
+Stat.Value = StatValue;
+
+export { Stats, Stat };

package/src/components/Stat/constants.ts

@@ -0,0 +1,33 @@
+import { cva } from "../../libs";
+
+export const getStatsClasses = cva("stats", {
+  variants: {
+    direction: {
+      horizontal: "stats-horizontal",
+      vertical: "stats-vertical",
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+  },
+});
+
+export const getStatClasses = cva("stat", {
+  variants: {
+    position: {
+      center: "place-items-center",
+      start: "place-items-start",
+      end: "place-items-end",
+    },
+  },
+});
+
+export const getStatTitleClasses = cva("stat-title");
+
+export const getStatValueClasses = cva("stat-value");
+
+export const getStatDescriptionClasses = cva("stat-desc");
+
+export const getStatFigureClasses = cva("stat-figure");
+
+export const getStatActionsClasses = cva("stat-actions");

package/src/components/Stat/index.ts

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

package/src/components/Stat/types.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { type VariantProps } from "../../libs";
+import {
+  getStatActionsClasses,
+  getStatClasses,
+  getStatDescriptionClasses,
+  getStatFigureClasses,
+  getStatsClasses,
+  getStatTitleClasses,
+  getStatValueClasses,
+} from "./constants";
+
+export type StatsProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatsClasses>;
+
+export type StatProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatClasses>;
+
+export type StatActionsProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatActionsClasses>;
+
+export type StatDescriptionProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatDescriptionClasses>;
+
+export type StatFigureProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatFigureClasses>;
+
+export type StatTitleProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatTitleClasses>;
+
+export type StatValueProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getStatValueClasses>;

package/src/components/Status/Status.tsx

@@ -0,0 +1,7 @@
+import type { StatusProps } from "./types";
+import { cn } from "../../utilities";
+import { getStatusClasses } from "./constants";
+
+export const Status = ({ animate, variant, size, className, ...props }: StatusProps) => (
+  <span className={cn(getStatusClasses({ animate, variant, size }), className)} {...props} />
+);

package/src/components/Status/constants.ts

@@ -0,0 +1,31 @@
+import { cva } from "../../libs";
+
+export const getStatusClasses = cva("status", {
+  variants: {
+    variant: {
+      accent: "status-accent",
+      default: "",
+      error: "status-error",
+      ghost: "",
+      info: "status-info",
+      neutral: "status-neutral",
+      primary: "status-primary",
+      secondary: "status-secondary",
+      success: "status-success",
+      warning: "status-warning",
+    },
+    size: {
+      xs: "status-xs",
+      sm: "status-sm",
+      md: "status-md",
+      lg: "status-lg",
+      xl: "status-xl",
+    },
+    animate: {
+      bounce: "animate-bounce",
+      ping: "animate-ping",
+      pulse: "animate-pulse",
+      spin: "animate-spin",
+    },
+  },
+});

package/src/components/Status/index.ts

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

package/src/components/Status/types.ts

@@ -0,0 +1,5 @@
+import { type VariantProps } from "../../libs";
+import { getStatusClasses } from "./constants";
+
+export type StatusProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> &
+  VariantProps<typeof getStatusClasses>;

package/src/components/Text/types.ts

@@ -5,7 +5,7 @@ export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
 
 type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
 
-export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> &
+export type TextProps<T extends As> = AllowedElements[T] &
   VariantProps<typeof getTextClasses> & {
     as?: As;
   };