@ayasofyazilim/ui 0.0.0

package/src/components/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { toggleVariants } from "@repo/ayasofyazilim-ui/components/toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/components/toggle.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow
+          className="-my-px border-none fill-(--tooltip-color) "
+          width={12}
+          height={7}
+          aria-hidden="true"
+        />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/custom/action-button.tsx

@@ -0,0 +1,48 @@
+import {
+  Button,
+  buttonVariants,
+} from "@repo/ayasofyazilim-ui/components/button";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { VariantProps } from "class-variance-authority";
+import React, { ComponentType } from "react";
+
+export function ActionList({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "justify-end gap-2 rounded-md border p-2 has-[*]:flex hidden",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ActionButton({
+  loading,
+  onClick,
+  text,
+  icon: Icon,
+  variant = "outline",
+}: {
+  loading: boolean;
+  onClick?: () => void;
+  text: string;
+  icon: ComponentType<{ className?: string }>;
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+}) {
+  return (
+    <Button disabled={loading} onClick={onClick} variant={variant}>
+      <Icon className="mr-2 size-4" />
+      <span className="sr-only">{text}</span>
+      <span className="sm:hidden md:block">{text}</span>
+    </Button>
+  );
+}

package/src/custom/async-select.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { CheckIcon, ChevronDown, XCircle, XIcon } from "lucide-react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command as Cmd,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { useDebounce } from "../hooks/use-debounce";
+
+type SearchItem = { id: string; name: string };
+
+function CommandGroupItem({
+  items,
+  id,
+  title,
+  onChange,
+  value,
+  multiple,
+}: {
+  title: string;
+  id: string;
+  items: SearchItem[];
+  value: SearchItem[];
+  onChange: (value: SearchItem[]) => void;
+  multiple: boolean;
+}) {
+  return (
+    <CommandGroup heading={title}>
+      {items?.map((currentItem, index) => (
+        <CommandItem
+          id={`${id}_${index}`}
+          key={currentItem.id}
+          onSelect={() => {
+            if (value.find((i) => i.id === currentItem.id)) {
+              return onChange(value.filter((i) => i.id !== currentItem.id));
+            }
+            if (multiple) {
+              return onChange([...value, currentItem]);
+            }
+            return onChange([currentItem]);
+          }}
+          value={`${currentItem.id}__${currentItem.name}`}
+        >
+          {currentItem.name}
+          {value.find((i) => i.id === currentItem.id) && (
+            <CheckIcon className={cn("ml-auto h-4 w-4")} />
+          )}
+        </CommandItem>
+      ))}
+    </CommandGroup>
+  );
+}
+
+export type AsyncSelectType = {
+  suggestions?: SearchItem[];
+  data?: SearchItem[];
+  value: SearchItem[];
+  onChange: (value: SearchItem[]) => void;
+  fetchAction: (search: string) => Promise<SearchItem[]>;
+  resultText?: string;
+  searchText?: string;
+  noResultText?: string;
+  disabled?: boolean;
+  closeOnSelect?: boolean;
+  multiple?: boolean;
+  id: string;
+  classNames?: {
+    trigger?: string;
+  };
+};
+
+export function AsyncSelectBase({
+  suggestions = [],
+  data,
+  value,
+  fetchAction,
+  onChange,
+  resultText = "Results",
+  searchText = "Search",
+  noResultText = "No result",
+  disabled = false,
+  multiple = true,
+  closeOnSelect = false,
+  id,
+  setIsPopoverOpen,
+}: Omit<AsyncSelectType, "classNames"> & {
+  setIsPopoverOpen: Dispatch<SetStateAction<boolean>>;
+}) {
+  const [loading, setLoading] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
+  const searchValue = useDebounce(searchInput, 500);
+
+  const [items, setItems] = useState<SearchItem[]>(data || []);
+  const showableItems = items.filter(
+    (item) => !value.find((i) => i.id === item.id)
+  );
+  const showableSuggestions = suggestions.filter(
+    (item) => !value.find((i) => i.id === item.id)
+  );
+  function onSearch(search: string) {
+    setSearchInput(search);
+    setLoading(true);
+    setItems([]);
+  }
+  function handleOnChange(value: SearchItem[]) {
+    if (disabled) return;
+    onChange(value);
+  }
+
+  useEffect(() => {
+    if (searchValue === "" && searchInput === "") {
+      setLoading(true);
+      fetchAction("").then((res) => {
+        setItems(res);
+        setLoading(false);
+      });
+      return;
+    }
+    if (searchValue !== searchInput) return;
+
+    fetchAction(searchValue).then((res) => {
+      setItems(res);
+      setLoading(false);
+    });
+  }, [searchValue, searchInput, fetchAction]);
+
+  return (
+    <Cmd aria-disabled={disabled}>
+      <CommandInput
+        id={`${id}_input`}
+        data-testid={`${id}_input`}
+        placeholder={searchText}
+        onValueChange={(search) => onSearch(search)}
+        disabled={disabled}
+      />
+
+      <CommandList className="overflow-y-auto max-h-48">
+        {loading && (
+          <div className="p-1 text-sm">
+            <Skeleton className="h-7 w-full mb-1" />
+          </div>
+        )}
+
+        {!loading && items.length === 0 && searchValue.length > 0 && (
+          <div className="text-sm p-2">{noResultText}</div>
+        )}
+
+        {value.length > 0 && (
+          <CommandGroupItem
+            items={value}
+            id={`${id}_selected`}
+            data-testid={`${id}_selected`}
+            value={value}
+            title="Selected"
+            onChange={(value) => {
+              handleOnChange(value);
+              if (closeOnSelect) setIsPopoverOpen(false);
+            }}
+            multiple={multiple}
+          />
+        )}
+
+        {!loading &&
+          searchValue.length === 0 &&
+          showableSuggestions?.length > 0 && (
+            <CommandGroupItem
+              id={`${id}_item`}
+              items={showableSuggestions}
+              value={value}
+              title="Suggestions"
+              onChange={(value) => {
+                handleOnChange(value);
+                if (closeOnSelect) setIsPopoverOpen(false);
+              }}
+              multiple={multiple}
+            />
+          )}
+
+        {!loading && showableItems.length > 0 && (
+          <CommandGroupItem
+            id={`${id}_item`}
+            items={showableItems}
+            value={value}
+            title={resultText}
+            onChange={(value) => {
+              handleOnChange(value);
+              if (closeOnSelect) setIsPopoverOpen(false);
+            }}
+            multiple={multiple}
+          />
+        )}
+      </CommandList>
+    </Cmd>
+  );
+}
+export default function AsyncSelect(props: AsyncSelectType) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  return (
+    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <PopoverTrigger asChild className="w-full">
+        <Button
+          id={props.id}
+          data-testid={props.id}
+          disabled={props.disabled}
+          type="button"
+          onClick={() => setIsPopoverOpen(true)}
+          className={cn(
+            "flex w-full p-1 rounded-md border items-center justify-between bg-inherit hover:bg-inherit",
+            props.classNames?.trigger
+          )}
+        >
+          {props.value.length > 0 ? (
+            <div className="flex justify-between items-center w-full">
+              <div className="flex flex-wrap items-center">
+                {props.value.slice(0, 3).map((value) => (
+                  <Badge
+                    key={value.id}
+                    data-testid={`${props.id}_badge_${value.name}`}
+                    className="m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 border-foreground/10 text-foreground bg-card hover:bg-card/80"
+                    onClick={() => {
+                      props.onChange(
+                        props.value.filter((i) => i.id !== value.id)
+                      );
+                    }}
+                  >
+                    {value.name}
+                    <XCircle className="ml-2 h-4 w-4 cursor-pointer" />
+                  </Badge>
+                ))}
+                {props.value.length > 3 && (
+                  <Badge
+                    className={cn(
+                      "bg-transparent text-foreground border-foreground/1 hover:bg-transparent"
+                    )}
+                  >
+                    {props.value.length - 3} more
+                  </Badge>
+                )}
+              </div>
+              <div className="flex items-center justify-between">
+                <XIcon
+                  className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                  onClick={() => {
+                    props.onChange([]);
+                  }}
+                />
+                <Separator
+                  orientation="vertical"
+                  className="flex min-h-6 h-full"
+                />
+                <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between w-full mx-auto">
+              <span className="text-sm text-black mx-3 font-normal">
+                {props.searchText}
+              </span>
+              <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+            </div>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        align="start"
+        onEscapeKeyDown={() => setIsPopoverOpen(false)}
+      >
+        <AsyncSelectBase {...props} setIsPopoverOpen={setIsPopoverOpen} />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/custom/awesome-not-found.tsx

@@ -0,0 +1,116 @@
+"use client";
+import {
+  ButtonProps,
+  buttonVariants,
+} from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@repo/ayasofyazilim-ui/components/empty";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { motion } from "motion/react";
+import Link from "next/link";
+
+const PRIMARY_ORB_HORIZONTAL_OFFSET = 40;
+const PRIMARY_ORB_VERTICAL_OFFSET = 20;
+
+export function AwesomeNotFound({
+  title = "404",
+  description = "The page you are looking for does not exist.",
+  actions = [],
+}: {
+  title?: string;
+  description?: string;
+  actions?: {
+    label: string;
+    href: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+    icon?: React.ComponentType;
+  }[];
+}) {
+  return (
+    <div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.1),transparent_70%)] text-foreground">
+      <div
+        aria-hidden={true}
+        className="-z-10 absolute inset-0 overflow-hidden"
+      >
+        <motion.div
+          animate={{
+            x: [
+              0,
+              PRIMARY_ORB_HORIZONTAL_OFFSET,
+              -PRIMARY_ORB_HORIZONTAL_OFFSET,
+              0,
+            ],
+            y: [
+              0,
+              PRIMARY_ORB_VERTICAL_OFFSET,
+              -PRIMARY_ORB_VERTICAL_OFFSET,
+              0,
+            ],
+            rotate: [0, 10, -10, 0],
+          }}
+          className="absolute top-1/2 left-1/3 size-90 rounded-full bg-linear-to-tr from-purple-500/20 to-blue-500/20 blur-3xl"
+          transition={{
+            repeat: Number.POSITIVE_INFINITY,
+            duration: 4,
+            ease: "easeInOut",
+          }}
+        />
+        <motion.div
+          animate={{
+            x: [
+              0,
+              -PRIMARY_ORB_HORIZONTAL_OFFSET,
+              PRIMARY_ORB_HORIZONTAL_OFFSET,
+              0,
+            ],
+            y: [
+              0,
+              -PRIMARY_ORB_VERTICAL_OFFSET,
+              PRIMARY_ORB_VERTICAL_OFFSET,
+              0,
+            ],
+          }}
+          className="absolute right-1/4 bottom-1/3 size-120 rounded-full bg-linear-to-br from-indigo-400/10 to-pink-400/10 blur-3xl"
+          transition={{
+            repeat: Number.POSITIVE_INFINITY,
+            duration: 4,
+            ease: "easeInOut",
+          }}
+        />
+      </div>
+
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle className="font-extrabold text-8xl">{title}</EmptyTitle>
+          <EmptyDescription className="text-nowrap">
+            {description}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <div className="flex gap-2">
+            {actions.map((action) => (
+              <Link
+                href={action.href}
+                className={cn(
+                  buttonVariants({
+                    variant: action.variant || "default",
+                    size: action.size || "default",
+                  })
+                )}
+                key={action.label}
+              >
+                {action.icon && <action.icon />} {action.label}
+              </Link>
+            ))}
+          </div>
+        </EmptyContent>
+      </Empty>
+    </div>
+  );
+}