create-strayl-web-app 1.0.0

package/template/src/components/ui/dialog.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+const DialogCreateHandle = DialogPrimitive.createHandle;
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogBackdrop({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function DialogViewport({
+  className,
+  ...props
+}: DialogPrimitive.Viewport.Props) {
+  return (
+    <DialogPrimitive.Viewport
+      className={cn(
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4",
+        className,
+      )}
+      data-slot="dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+function DialogPopup({
+  className,
+  children,
+  showCloseButton = true,
+  bottomStickOnMobile = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  bottomStickOnMobile?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogBackdrop />
+      <DialogViewport
+        className={cn(
+          bottomStickOnMobile &&
+            "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
+        )}
+      >
+        <DialogPrimitive.Popup
+          className={cn(
+            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            bottomStickOnMobile &&
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+            className,
+          )}
+          data-slot="dialog-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              aria-label="Close"
+              className="absolute end-2 top-2"
+              render={<Button size="icon" variant="ghost" />}
+            >
+              <XIcon />
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Popup>
+      </DialogViewport>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4",
+        className,
+      )}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
+        variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "bare" &&
+          "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",
+        className,
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        "font-heading font-semibold text-xl leading-none",
+        className,
+      )}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+function DialogPanel({
+  className,
+  scrollFade = true,
+  ...props
+}: React.ComponentProps<"div"> & { scrollFade?: boolean }) {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      <div
+        className={cn(
+          "p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",
+          className,
+        )}
+        data-slot="dialog-panel"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+export {
+  DialogCreateHandle,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogBackdrop,
+  DialogBackdrop as DialogOverlay,
+  DialogPopup,
+  DialogPopup as DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogPanel,
+  DialogViewport,
+};

package/template/src/components/ui/empty.tsx

@@ -0,0 +1,127 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12",
+        className,
+      )}
+      data-slot="empty"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex max-w-sm flex-col items-center text-center",
+        className,
+      )}
+      data-slot="empty-header"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5",
+      },
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      className={cn("relative mb-6", className)}
+      data-slot="empty-media"
+      data-variant={variant}
+      {...props}
+    >
+      {variant === "icon" && (
+        <>
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none",
+            )}
+          />
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none",
+            )}
+          />
+        </>
+      )}
+      <div
+        className={cn(emptyMediaVariants({ className, variant }))}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-heading font-semibold text-xl", className)}
+      data-slot="empty-title"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      className={cn(
+        "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1",
+        className,
+      )}
+      data-slot="empty-description"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className,
+      )}
+      data-slot="empty-content"
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/template/src/components/ui/field.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+
+import { cn } from "@/lib/utils";
+
+function Field({ className, ...props }: FieldPrimitive.Root.Props) {
+  return (
+    <FieldPrimitive.Root
+      className={cn("flex flex-col items-start gap-2", className)}
+      data-slot="field"
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
+  return (
+    <FieldPrimitive.Label
+      className={cn(
+        "inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
+  return (
+    <FieldPrimitive.Item
+      className={cn("flex", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({
+  className,
+  ...props
+}: FieldPrimitive.Description.Props) {
+  return (
+    <FieldPrimitive.Description
+      className={cn("text-muted-foreground text-xs", className)}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+function FieldError({ className, ...props }: FieldPrimitive.Error.Props) {
+  return (
+    <FieldPrimitive.Error
+      className={cn("text-destructive-foreground text-xs", className)}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+const FieldControl = FieldPrimitive.Control;
+const FieldValidity = FieldPrimitive.Validity;
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldControl,
+  FieldItem,
+  FieldValidity,
+};

package/template/src/components/ui/fieldset.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset";
+
+import { cn } from "@/lib/utils";
+
+function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
+  return (
+    <FieldsetPrimitive.Root
+      className={cn("flex w-full max-w-64 flex-col gap-6", className)}
+      data-slot="fieldset"
+      {...props}
+    />
+  );
+}
+function FieldsetLegend({
+  className,
+  ...props
+}: FieldsetPrimitive.Legend.Props) {
+  return (
+    <FieldsetPrimitive.Legend
+      className={cn("font-semibold text-foreground", className)}
+      data-slot="fieldset-legend"
+      {...props}
+    />
+  );
+}
+
+export { Fieldset, FieldsetLegend };

package/template/src/components/ui/form.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { Form as FormPrimitive } from "@base-ui/react/form";
+
+import { cn } from "@/lib/utils";
+
+function Form({ className, ...props }: FormPrimitive.Props) {
+  return (
+    <FormPrimitive
+      className={cn("flex w-full flex-col gap-4", className)}
+      data-slot="form"
+      {...props}
+    />
+  );
+}
+
+export { Form };

package/template/src/components/ui/frame.tsx

@@ -0,0 +1,82 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Frame({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col rounded-2xl bg-muted/72 p-1",
+        "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1",
+        className,
+      )}
+      data-slot="frame"
+      {...props}
+    />
+  );
+}
+
+function FramePanel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-xl border bg-background bg-clip-padding p-5 shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+        className,
+      )}
+      data-slot="frame-panel"
+      {...props}
+    />
+  );
+}
+
+function FrameHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return (
+    <header
+      className={cn("flex flex-col px-5 py-4", className)}
+      data-slot="frame-panel-header"
+      {...props}
+    />
+  );
+}
+
+function FrameTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-semibold text-sm", className)}
+      data-slot="frame-panel-title"
+      {...props}
+    />
+  );
+}
+
+function FrameDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="frame-panel-description"
+      {...props}
+    />
+  );
+}
+
+function FrameFooter({ className, ...props }: React.ComponentProps<"footer">) {
+  return (
+    <footer
+      className={cn("px-5 py-4", className)}
+      data-slot="frame-panel-footer"
+      {...props}
+    />
+  );
+}
+
+export {
+  Frame,
+  FramePanel,
+  FrameHeader,
+  FrameTitle,
+  FrameDescription,
+  FrameFooter,
+};

package/template/src/components/ui/group.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const groupVariants = cva(
+  "flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=button]:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:*:[[data-slot=separator]:has(~[data-slot=button]:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64",
+  {
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+    variants: {
+      orientation: {
+        horizontal:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none",
+        vertical:
+          "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none",
+      },
+    },
+  },
+);
+
+function Group({
+  className,
+  orientation,
+  children,
+  ...props
+}: {
+  className?: string;
+  orientation?: VariantProps<typeof groupVariants>["orientation"];
+  children: React.ReactNode;
+} & React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(groupVariants({ orientation }), className)}
+      data-orientation={orientation}
+      data-slot="group"
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function GroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const defaultProps = {
+    className: cn(
+      "relative inline-flex items-center whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-muted-foreground text-base sm:text-sm shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:-mx-0.5",
+      className,
+    ),
+    "data-slot": "group-text",
+  };
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(defaultProps, props),
+    render,
+  });
+}
+
+function GroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "[[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export {
+  Group,
+  Group as ButtonGroup,
+  GroupText,
+  GroupText as ButtonGroupText,
+  GroupSeparator,
+  GroupSeparator as ButtonGroupSeparator,
+  groupVariants,
+};