blodemd 0.0.4 → 0.0.6

package/docs/components/ui/field.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+import { useMemo } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const FieldSet = ({
+  className,
+  ...props
+}: React.ComponentProps<"fieldset">) => (
+  <fieldset
+    className={cn(
+      "flex flex-col gap-6",
+      "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+      className
+    )}
+    data-slot="field-set"
+    {...props}
+  />
+);
+
+const FieldLegend = ({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) => (
+  <legend
+    className={cn(
+      "mb-3 font-medium",
+      "data-[variant=legend]:text-base",
+      "data-[variant=label]:text-sm",
+      className
+    )}
+    data-slot="field-legend"
+    data-variant={variant}
+    {...props}
+  />
+);
+
+const FieldGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+      className
+    )}
+    data-slot="field-group"
+    {...props}
+  />
+);
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    defaultVariants: {
+      orientation: "vertical",
+    },
+    variants: {
+      orientation: {
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "@md/field-group:flex-row flex-col @md/field-group:items-center @md/field-group:[&>*]:w-auto [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+      },
+    },
+  }
+);
+
+const Field = ({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) => (
+  <div
+    className={cn(fieldVariants({ orientation }), className)}
+    data-orientation={orientation}
+    data-slot="field"
+    role="group"
+    {...props}
+  />
+);
+
+const FieldContent = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+      className
+    )}
+    data-slot="field-content"
+    {...props}
+  />
+);
+
+const FieldLabel = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) => (
+  <Label
+    className={cn(
+      "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+      "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+      "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+      className
+    )}
+    data-slot="field-label"
+    {...props}
+  />
+);
+
+const FieldTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
+  <div
+    className={cn(
+      "flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50",
+      className
+    )}
+    data-slot="field-label"
+    {...props}
+  />
+);
+
+const FieldDescription = ({
+  className,
+  ...props
+}: React.ComponentProps<"p">) => (
+  <p
+    className={cn(
+      "font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+      "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+      "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+      className
+    )}
+    data-slot="field-description"
+    {...props}
+  />
+);
+
+const FieldSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) => (
+  <div
+    className={cn(
+      "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+      className
+    )}
+    data-content={!!children}
+    data-slot="field-separator"
+    {...props}
+  >
+    <Separator className="absolute inset-0 top-1/2" />
+    {children && (
+      <span
+        className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+        data-slot="field-separator-content"
+      >
+        {children}
+      </span>
+    )}
+  </div>
+);
+
+const FieldError = ({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: ({ message?: string } | undefined)[];
+}) => {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error) =>
+            error?.message && <li key={error.message}>{error.message}</li>
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("font-normal text-destructive text-sm", className)}
+      data-slot="field-error"
+      role="alert"
+      {...props}
+    >
+      {content}
+    </div>
+  );
+};
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

package/docs/components/ui/input.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { CircleXFilledIcon } from "blode-icons-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  clearable?: boolean;
+  clearClassName?: string;
+  hasError?: boolean;
+  leftAddon?: React.ReactNode | null;
+  leftControl?: React.ReactNode | null;
+  onClear?: () => void;
+  rightAddon?: React.ReactNode | null;
+  rightControl?: React.ReactNode | null;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      clearClassName,
+      hasError,
+      clearable,
+      onClear,
+      leftAddon,
+      rightAddon,
+      leftControl,
+      rightControl,
+      ...props
+    },
+    ref
+  ) => (
+    <label
+      className={cn("relative w-full", {
+        "input-group": !!leftAddon || !!rightAddon,
+      })}
+    >
+      {leftAddon && (
+        <span className="shrink-0 cursor-pointer">{leftAddon}</span>
+      )}
+
+      {leftControl && (
+        <div className="absolute top-0 left-0 flex h-full flex-row place-items-center items-center justify-center">
+          {leftControl}
+        </div>
+      )}
+
+      <div className="w-full">
+        <input
+          className={cn(
+            "input flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+            {
+              "border-destructive-foreground": hasError,
+              "hover:border-input! focus:border-input!": props.readOnly,
+              "pr-12": clearable && !!props.value && rightControl,
+              "pr-9": clearable && !!props.value,
+            },
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+
+        {clearable && !!props.value && (
+          <div className="absolute top-0 right-0 flex flex-row gap-1 pr-3">
+            <button
+              aria-label="clear input"
+              className={cn(
+                "flex h-[var(--field-height)] cursor-pointer items-center justify-center p-0! text-muted-foreground",
+                clearClassName
+              )}
+              onClick={onClear}
+              tabIndex={-1}
+              type="button"
+            >
+              <CircleXFilledIcon className="size-5 text-muted-foreground/50" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {rightControl && (
+        <div
+          className={cn(
+            "absolute top-0 right-0 flex h-full flex-row place-items-center items-center justify-center",
+            {
+              "right-9": clearable && !!props.value,
+            }
+          )}
+        >
+          {rightControl}
+        </div>
+      )}
+
+      {rightAddon && (
+        <span className="shrink-0 cursor-pointer">{rightAddon}</span>
+      )}
+    </label>
+  )
+);
+Input.displayName = "Input";
+
+export { Input };

package/docs/components/ui/label.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Label as LabelPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Label = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
+  <LabelPrimitive.Root
+    data-slot="label"
+    className={cn(
+      "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+);
+
+export { Label };

package/docs/components/ui/popover.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = ({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) => (
+  <PopoverPrimitive.Root data-slot="popover" {...props} />
+);
+
+const PopoverTrigger = ({
+  asChild = false,
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  asChild?: boolean;
+}) => {
+  const render =
+    asChild && children && typeof children === "object"
+      ? (children as React.ReactElement)
+      : undefined;
+
+  return (
+    <PopoverPrimitive.Trigger
+      data-slot="popover-trigger"
+      render={render}
+      {...props}
+    >
+      {asChild ? null : children}
+    </PopoverPrimitive.Trigger>
+  );
+};
+
+const PopoverContent = ({
+  children,
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Popup> &
+  Pick<
+    React.ComponentProps<typeof PopoverPrimitive.Positioner>,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Positioner
+      align={align}
+      alignOffset={alignOffset}
+      className="isolate z-50"
+      side={side}
+      sideOffset={sideOffset}
+    >
+      <PopoverPrimitive.Popup
+        className={cn(
+          "z-50 w-72 origin-(--transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-soft outline-hidden data-closed:animate-out data-open:animate-in data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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",
+          className
+        )}
+        data-slot="popover-content"
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Popup>
+    </PopoverPrimitive.Positioner>
+  </PopoverPrimitive.Portal>
+);
+
+export { Popover, PopoverTrigger, PopoverContent };