@ayasofyazilim/ui 0.0.0

package/__mocks__/canvas.ts

@@ -0,0 +1,8 @@
+// Mock canvas module to avoid native dependencies in tests
+const mockCanvas = {
+  createCanvas: () => ({}),
+  createImageData: () => ({}),
+  loadImage: () => Promise.resolve({}),
+};
+
+export default mockCanvas;

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@repo/ayasofyazilim-ui/components",
+    "custom": "@repo/ayasofyazilim-ui/custom",
+    "utils": "@repo/ayasofyazilim-ui/lib/utils",
+    "hooks": "@repo/ayasofyazilim-ui/hooks",
+    "lib": "@repo/ayasofyazilim-ui/lib",
+    "ui": "@repo/ayasofyazilim-ui/components"
+  }
+}

package/eslint.config.js

@@ -0,0 +1,4 @@
+import { config } from "@workspace/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/jest-environment.js

@@ -0,0 +1,37 @@
+const JSDOMEnvironment = require("jest-environment-jsdom").default;
+
+// Mock canvas before jsdom loads it
+const mockCanvas = () => ({});
+Object.defineProperty(mockCanvas, "createCanvas", {
+  value: () => ({}),
+});
+Object.defineProperty(mockCanvas, "loadImage", {
+  value: () => Promise.resolve({}),
+});
+
+module.exports = class CustomJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(config, context) {
+    // Mock canvas module globally before parent constructor
+    if (typeof global !== "undefined") {
+      const Module = require("module");
+      const originalRequire = Module.prototype.require;
+
+      Module.prototype.require = function (id) {
+        if (id === "canvas") {
+          return mockCanvas;
+        }
+        return originalRequire.apply(this, arguments);
+      };
+    }
+
+    super(config, context);
+  }
+
+  async setup() {
+    await super.setup();
+  }
+
+  async teardown() {
+    await super.teardown();
+  }
+};

package/jest.config.ts

@@ -0,0 +1,47 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "<rootDir>/jest-environment.js",
+  roots: ["<rootDir>/src"],
+  testMatch: ["**/__tests__/**/*.{ts,tsx}", "**/*.{spec,test}.{ts,tsx}"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@repo/ayasofyazilim-ui/(.*)$": "<rootDir>/src/$1",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  transform: {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        tsconfig: {
+          jsx: "react-jsx",
+        },
+      },
+    ],
+    "^.+\\.(js|jsx)$": [
+      "ts-jest",
+      {
+        tsconfig: {
+          allowJs: true,
+          jsx: "react-jsx",
+        },
+      },
+    ],
+  },
+  collectCoverageFrom: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.d.ts",
+    "!src/**/*.stories.{ts,tsx}",
+    "!src/**/index.{ts,tsx}",
+  ],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  testPathIgnorePatterns: ["/node_modules/", "/dist/"],
+  coveragePathIgnorePatterns: ["/node_modules/", "/dist/"],
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-phone-number-input|lucide-react)/)",
+  ],
+};
+
+export default config;

package/jest.setup.ts

@@ -0,0 +1,69 @@
+import "@testing-library/jest-dom";
+import React from "react";
+
+// Mock canvas to avoid native dependency issues
+jest.mock("canvas", () => ({}), { virtual: true });
+
+// Minimal lucide-react mock - returns actual SVG elements
+jest.mock("lucide-react", () => {
+  return new Proxy(
+    {},
+    {
+      get: (target, prop) => {
+        // Return a component that renders an SVG
+        return React.forwardRef((props: any, ref: any) =>
+          React.createElement(
+            "svg",
+            {
+              ref,
+              ...props,
+              "data-lucide": prop,
+              "data-testid": `lucide-${String(prop)
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase()
+                .slice(1)}`,
+            },
+            React.createElement("path", { d: "M0 0" })
+          )
+        );
+      },
+    }
+  );
+});
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+
+global.localStorage = localStorageMock as any;
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+} as any;
+
+// Mock scrollIntoView
+Element.prototype.scrollIntoView = jest.fn();
+
+// Reset mocks before each test
+beforeEach(() => {
+  jest.clearAllMocks();
+  localStorageMock.getItem.mockReturnValue("TR");
+});

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@ayasofyazilim/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint .",
+    "type-check": "tsc --noEmit",
+    "test": "jest --no-cache",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "@headless-tree/core": "^1.5.1",
+    "@headless-tree/react": "^1.5.1",
+    "@hookform/resolvers": "5.2.2",
+    "@internationalized/date": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@rjsf/core": "6.1.1",
+    "@rjsf/shadcn": "6.1.1",
+    "@rjsf/utils": "6.1.1",
+    "@rjsf/validator-ajv8": "6.1.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@types/google-libphonenumber": "^7.4.30",
+    "@types/lodash": "^4.17.20",
+    "ajv": "^8.17.1",
+    "canvas": "3.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "emblor": "^1.4.8",
+    "eslint": "^9.32.0",
+    "google-libphonenumber": "^3.2.43",
+    "input-otp": "^1.4.2",
+    "jsdom": "26.1.0",
+    "json-edit-react": "^1.29.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.562.0",
+    "motion": "^12.34.1",
+    "next": "^16.0.10",
+    "next-themes": "^0.4.6",
+    "opencv-ts": "^1.3.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.1.1",
+    "react-aria-components": "^1.6.0",
+    "react-day-picker": "^9.11.1",
+    "react-doc-viewer": "^0.1.15",
+    "react-dom": "^19.1.1",
+    "react-dropzone": "^14.3.8",
+    "react-hook-form": "^7.68.0",
+    "react-international-phone": "^4.6.0",
+    "react-pdf": "^10.2.0",
+    "react-phone-number-input": "^3.4.12",
+    "react-resizable-panels": "^3.0.6",
+    "react-webcam": "^7.2.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.6",
+    "vaul": "^1.1.2",
+    "zod": "4.1.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@turbo/gen": "^2.5.5",
+    "@types/jest": "^29.5.14",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.19.9",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "tailwindcss": "^4.1.11",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.9.2"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./aria/*": "./src/aria/*.tsx",
+    "./custom/*": [
+      "./src/custom/*.tsx",
+      "./src/custom/*/index.tsx",
+      "./src/custom/*.ts",
+      "./src/custom/*/index.ts"
+    ],
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/src/aria/index.tsx

@@ -0,0 +1 @@
+export * from "react-aria-components";

package/src/aria/number-field.tsx

@@ -0,0 +1,41 @@
+import { MinusIcon, PlusIcon } from "lucide-react";
+import {
+  Button,
+  Group,
+  Input,
+  NumberField,
+  NumberFieldProps,
+} from "react-aria-components";
+import { cn } from "../lib/utils";
+
+export function NumberFieldWithIndicators({
+  containerClassName,
+  ...props
+}: NumberFieldProps & {
+  containerClassName?: string;
+}) {
+  return (
+    <NumberField defaultValue={2048} minValue={0} {...props}>
+      <Group
+        className={cn(
+          "border-input data-focus-within:border-ring data-focus-within:ring-ring/50 data-focus-within:has-aria-invalid:ring-destructive/20 dark:data-focus-within:has-aria-invalid:ring-destructive/40 data-focus-within:has-aria-invalid:border-destructive relative inline-flex h-9 w-full items-center overflow-hidden rounded-md border text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none data-disabled:opacity-50 data-focus-within:ring-[3px]",
+          containerClassName
+        )}
+      >
+        <Button
+          slot="decrement"
+          className="border-input bg-background text-muted-foreground/80 hover:bg-accent hover:text-foreground -ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-md border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <MinusIcon size={16} aria-hidden="true" />
+        </Button>
+        <Input className="bg-background text-foreground w-full grow px-3 py-2 text-center tabular-nums" />
+        <Button
+          slot="increment"
+          className="border-input bg-background text-muted-foreground/80 hover:bg-accent hover:text-foreground -me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-md border text-sm transition-[color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <PlusIcon size={16} aria-hidden="true" />
+        </Button>
+      </Group>
+    </NumberField>
+  );
+}

package/src/components/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { buttonVariants } from "@repo/ayasofyazilim-ui/components/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/alert.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        success:
+          "border-green-500/50 text-green-500 dark:border-green-500 [&>svg]:text-green-500",
+        information:
+          "border-blue-500/50 text-blue-500 dark:border-blue-500 [&>svg]:text-blue-500",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };