@mbao01/common 0.0.6 → 0.0.8

package/src/components/Form/Textarea/index.ts

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

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

@@ -0,0 +1,8 @@
+import { type VariantProps } from "../../../libs";
+import { getTextareaClasses } from "./constants";
+
+export type TextareaProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size" | "ref"
+> &
+  VariantProps<typeof getTextareaClasses>;

package/src/components/Form/components/FormControl/FormControl.tsx

@@ -0,0 +1,21 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { As, FormControlProps } from "./types";
+import { getFormControlClasses } from "./constants";
+import { cn } from "../../../../utilities";
+import { Label } from "../Label";
+
+export const FormControl = <T extends As>({
+  as,
+  children,
+  className,
+  ...props
+}: FormControlProps<T>) => {
+  const SlotChild = !as || as === "label" ? Label : as;
+
+  return (
+    <Slot className={cn(getFormControlClasses(), className)} {...props}>
+      {/* slot merges it's prop into it's immediate child */}
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};

package/src/components/Form/components/FormControl/constants.ts

@@ -0,0 +1,3 @@
+import { cva } from "../../../../libs";
+
+export const getFormControlClasses = cva("form-control w-full");

package/src/components/Form/components/FormControl/index.ts

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

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from "../../../../libs";
+import { getFormControlClasses } from "./constants";
+
+export type As = "div" | "span" | "label";
+
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+
+export type FormControlProps<T extends As> = (T extends "label"
+  ? React.LabelHTMLAttributes<HTMLLabelElement>
+  : React.HTMLAttributes<HTMLElement & AllowedElements[T]>) &
+  VariantProps<typeof getFormControlClasses> & {
+    as?: T;
+  };

package/src/components/Form/components/Label/Label.tsx

@@ -0,0 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type { LabelProps, LabelTextProps } from "./types";
+import { cn } from "../../../../utilities";
+import { getLabelClasses } from "./constants";
+
+const Label = ({ className, ...props }: LabelProps) => (
+  <LabelPrimitive.Root
+    className={cn(getLabelClasses(), className)}
+    {...props}
+  />
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+const LabelText = ({ className, ...props }: LabelTextProps) => (
+  <span className={cn("label-text", className)} {...props}>
+    Pick the best fantasy franchise
+  </span>
+);
+
+Label.Text = LabelText;
+
+export { Label };

package/src/components/Form/components/Label/constants.ts

@@ -0,0 +1,3 @@
+import { cva } from "../../../../libs";
+
+export const getLabelClasses = cva("label");

package/src/components/Form/components/Label/index.ts

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

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

@@ -0,0 +1,10 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "../../../../libs";
+import { getLabelClasses } from "./constants";
+
+export type LabelProps = React.ComponentPropsWithoutRef<
+  typeof LabelPrimitive.Root
+> &
+  VariantProps<typeof getLabelClasses>;
+
+export type LabelTextProps = React.HTMLAttributes<HTMLSpanElement>;

package/src/components/Form/index.ts

@@ -0,0 +1,11 @@
+export { Input } from "./Input";
+export { Phone } from "./Phone";
+export { Radio } from "./Radio";
+export { Range } from "./Range";
+export { Select } from "./Select";
+export { Slider } from "./Slider";
+export { Checkbox } from "./Checkbox";
+export { Textarea } from "./Textarea";
+export { TextField } from "./TextField";
+export { Label } from "./components/Label";
+export { FormControl } from "./components/FormControl";

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { getPopoverContentClasses } from "./constants";
+import { cn } from "../../utilities";
+import { PopoverContentProps, PopoverProps } from "./types";
+
+const Popover = (props: PopoverProps) => <PopoverPrimitive.Root {...props} />;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(getPopoverContentClasses(), className)}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+Popover.Content = PopoverContent;
+Popover.Trigger = PopoverPrimitive.Trigger;
+
+export { Popover };

package/src/components/Popover/constants.ts

@@ -0,0 +1,5 @@
+import { cva } from "../../libs";
+
+export const getPopoverContentClasses = cva(
+  "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+);

package/src/components/Popover/index.ts

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

package/src/components/Popover/types.ts

@@ -0,0 +1,12 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type VariantProps } from "../../libs";
+import { getPopoverContentClasses } from "./constants";
+
+export type PopoverProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Root
+>;
+
+export type PopoverContentProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> &
+  VariantProps<typeof getPopoverContentClasses>;

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type ProgressProps } from "./types";
+import { cn } from "../../utilities";
+import { getProgressClasses, getProgressIndicatorClasses } from "./constants";
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, max = 100, variant, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    max={max}
+    value={value}
+    className={cn(getProgressClasses({ variant }), className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(getProgressIndicatorClasses({ variant }))}
+      style={{
+        transform: `translateX(-${
+          (100 * (max - Math.max(Math.min(value ?? 0, max), 0))) / max
+        }%)`,
+      }}
+    />
+  </ProgressPrimitive.Root>
+));
+
+Progress.displayName = ProgressPrimitive.Root.displayName;

package/src/components/Progress/constants.ts

@@ -0,0 +1,49 @@
+import { cva } from "../../libs";
+
+export const getProgressClasses = cva(
+  "relative h-2 w-full overflow-hidden rounded-full",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent/20",
+        base: "bg-base-content/20",
+        error: "bg-error/20",
+        ghost: "bg-ghost/20",
+        info: "bg-info/20",
+        link: "bg-link/20",
+        neutral: "bg-neutral/20",
+        primary: "bg-primary/20",
+        secondary: "bg-secondary/20",
+        success: "bg-success/20",
+        warning: "bg-warning/20",
+      },
+    },
+    defaultVariants: {
+      variant: "base",
+    },
+  }
+);
+
+export const getProgressIndicatorClasses = cva(
+  "h-full w-full flex-1 transition-all",
+  {
+    variants: {
+      variant: {
+        accent: "bg-accent",
+        base: "bg-base-content",
+        error: "bg-error",
+        ghost: "bg-ghost",
+        info: "bg-info",
+        link: "bg-link",
+        neutral: "bg-neutral",
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        success: "bg-success",
+        warning: "bg-warning",
+      },
+    },
+    defaultVariants: {
+      variant: "base",
+    },
+  }
+);

package/src/components/Progress/index.ts

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

package/src/components/Progress/types.ts

@@ -0,0 +1,9 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type VariantProps } from "../../libs";
+import { getProgressClasses } from "./constants";
+
+export type ProgressProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
+  "asChild"
+> &
+  VariantProps<typeof getProgressClasses>;

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { type SeparatorProps } from "./types";
+import { getSeparatorClasses } from "./constants";
+import { cn } from "../../utilities";
+
+export const Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: SeparatorProps) => (
+  <SeparatorPrimitive.Root
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(getSeparatorClasses({ orientation }), className)}
+    {...props}
+  />
+);

package/src/components/Separator/constants.ts

@@ -0,0 +1,10 @@
+import { cva } from "../../libs";
+
+export const getSeparatorClasses = cva("shrink-0 bg-base-300", {
+  variants: {
+    orientation: {
+      horizontal: "h-[1px] w-full",
+      vertical: "h-full w-[1px]",
+    },
+  },
+});

package/src/components/Separator/index.ts

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

package/src/components/Separator/types.ts

@@ -0,0 +1,5 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+export type SeparatorProps = React.ComponentPropsWithoutRef<
+  typeof SeparatorPrimitive.Root
+>;

package/src/components/Text/Text.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { type TextProps } from "./types";
+import type { As, TextProps } from "./types";
 import { getTextClasses } from "./constants";
 import { cn } from "../../utilities";
 import { Slot } from "@radix-ui/react-slot";
 
-export const Text = ({
+export const Text = <T extends As>({
   as,
   size,
   variant,
   children,
   className,
   ...props
-}: TextProps) => {
+}: TextProps<T>) => {
   const Comp = as ? Slot : "span";
   const SlotChild = as ? as : React.Fragment;
 

package/src/components/Text/types.ts

@@ -1,10 +1,13 @@
 import { type VariantProps } from "../../libs";
 import { getTextClasses } from "./constants";
 
-export type TextProps = React.HTMLAttributes<HTMLSpanElement> &
+export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
+
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+
+export type TextProps<T extends As> = React.HTMLAttributes<
+  HTMLElement & AllowedElements[T]
+> &
   VariantProps<typeof getTextClasses> & {
-    as?: keyof Pick<
-      JSX.IntrinsicElements,
-      "h1" | "h2" | "h3" | "h4" | "h5" | "p"
-    >;
+    as?: As;
   };

package/src/index.ts

@@ -3,14 +3,24 @@ export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 
 /** data display */
+export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Description";
+export * from "./components/Progress";
+export * from "./components/Separator";
 export * from "./components/Text";
 
 /** data input */
+export * from "./components/Form";
+export * from "./components/Combobox";
 
 /** feedback */
 export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";
+
+/** composable */
+export * from "./components/Dialog";
+export * from "./components/Command";
+export * from "./components/Popover";