@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/hooks/use-debounce.js

@@ -0,0 +1,18 @@
+"use client";
+import { useState, useEffect } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+export {
+  useDebounce
+};
+//# sourceMappingURL=use-debounce.js.map

package/dist/hooks/use-debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-debounce.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState, useEffect } from \"react\";\r\n\r\nexport function useDebounce<T>(value: T, delay: number) {\r\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\r\n\r\n  useEffect(() => {\r\n    const handler = setTimeout(() => {\r\n      setDebouncedValue(value);\r\n    }, delay);\r\n\r\n    return () => {\r\n      clearTimeout(handler);\r\n    };\r\n  }, [value, delay]);\r\n\r\n  return debouncedValue;\r\n}\r\n"],"mappings":";AAEA,SAAS,UAAU,iBAAiB;AAE7B,SAAS,YAAe,OAAU,OAAe;AACtD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAY,KAAK;AAE7D,YAAU,MAAM;AACd,UAAM,UAAU,WAAW,MAAM;AAC/B,wBAAkB,KAAK;AAAA,IACzB,GAAG,KAAK;AAER,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,SAAO;AACT;","names":[]}

package/dist/hooks/use-is-visible.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect, useState } from "react";
+function useIsVisible(ref, threshold = 0.3) {
+  const [isIntersecting, setIntersecting] = useState(false);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry?.isIntersecting || false);
+      },
+      { threshold }
+    );
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, threshold]);
+  return isIntersecting;
+}
+export {
+  useIsVisible
+};
+//# sourceMappingURL=use-is-visible.js.map

package/dist/hooks/use-is-visible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-is-visible.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nexport function useIsVisible(ref: any, threshold = 0.3) {\r\n  const [isIntersecting, setIntersecting] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const observer = new IntersectionObserver(\r\n      ([entry]) => {\r\n        setIntersecting(entry?.isIntersecting || false);\r\n      },\r\n      { threshold }\r\n    );\r\n\r\n    observer.observe(ref.current);\r\n    return () => {\r\n      observer.disconnect();\r\n    };\r\n  }, [ref, threshold]);\r\n\r\n  return isIntersecting;\r\n}\r\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,SAAS,aAAa,KAAU,YAAY,KAAK;AACtD,QAAM,CAAC,gBAAgB,eAAe,IAAI,SAAS,KAAK;AAExD,YAAU,MAAM;AACd,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,CAAC,KAAK,MAAM;AACX,wBAAgB,OAAO,kBAAkB,KAAK;AAAA,MAChD;AAAA,MACA,EAAE,UAAU;AAAA,IACd;AAEA,aAAS,QAAQ,IAAI,OAAO;AAC5B,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB,SAAO;AACT;","names":[]}

package/dist/hooks/use-media-query.js

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+function useMediaQuery(query) {
+  const [value, setValue] = React.useState(false);
+  React.useEffect(() => {
+    function onChange(event) {
+      setValue(event.matches);
+    }
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+  return value;
+}
+export {
+  useMediaQuery
+};
+//# sourceMappingURL=use-media-query.js.map

package/dist/hooks/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-media-query.ts"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nexport function useMediaQuery(query: string) {\r\n  const [value, setValue] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    function onChange(event: MediaQueryListEvent) {\r\n      setValue(event.matches);\r\n    }\r\n\r\n    const result = matchMedia(query);\r\n    result.addEventListener(\"change\", onChange);\r\n    setValue(result.matches);\r\n\r\n    return () => result.removeEventListener(\"change\", onChange);\r\n  }, [query]);\r\n\r\n  return value;\r\n}\r\n"],"mappings":";AAEA,YAAY,WAAW;AAEhB,SAAS,cAAc,OAAe;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,KAAK;AAE9C,QAAM,UAAU,MAAM;AACpB,aAAS,SAAS,OAA4B;AAC5C,eAAS,MAAM,OAAO;AAAA,IACxB;AAEA,UAAM,SAAS,WAAW,KAAK;AAC/B,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,aAAS,OAAO,OAAO;AAEvB,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;","names":[]}

package/dist/hooks/use-mobile.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(
+    void 0
+  );
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+export {
+  useIsMobile
+};
+//# sourceMappingURL=use-mobile.js.map

package/dist/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\nexport function useIsMobile() {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\r\n    undefined\r\n  );\r\n\r\n  React.useEffect(() => {\r\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return !!isMobile;\r\n}\r\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,MAAM,oBAAoB;AAEnB,SAAS,cAAc;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM;AAAA,IACpC;AAAA,EACF;AAEA,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,OAAO,WAAW,eAAe,oBAAoB,CAAC,KAAK;AACvE,UAAM,WAAW,MAAM;AACrB,kBAAY,OAAO,aAAa,iBAAiB;AAAA,IACnD;AACA,QAAI,iBAAiB,UAAU,QAAQ;AACvC,gBAAY,OAAO,aAAa,iBAAiB;AACjD,WAAO,MAAM,IAAI,oBAAoB,UAAU,QAAQ;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,CAAC;AACX;","names":[]}

package/dist/hooks/use-on-window-resize.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+const useOnWindowResize = (handler) => {
+  React.useEffect(() => {
+    const handleResize = () => {
+      handler();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [handler]);
+};
+export {
+  useOnWindowResize
+};
+//# sourceMappingURL=use-on-window-resize.js.map

package/dist/hooks/use-on-window-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-on-window-resize.ts"],"sourcesContent":["// Tremor Raw useOnWindowResize [v0.0.0]\r\n\r\nimport * as React from \"react\";\r\n\r\nexport const useOnWindowResize = (handler: { (): void }) => {\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      handler();\r\n    };\r\n    handleResize();\r\n    window.addEventListener(\"resize\", handleResize);\r\n\r\n    return () => window.removeEventListener(\"resize\", handleResize);\r\n  }, [handler]);\r\n};\r\n"],"mappings":"AAEA,YAAY,WAAW;AAEhB,MAAM,oBAAoB,CAAC,YAA0B;AAC1D,QAAM,UAAU,MAAM;AACpB,UAAM,eAAe,MAAM;AACzB,cAAQ;AAAA,IACV;AACA,iBAAa;AACb,WAAO,iBAAiB,UAAU,YAAY;AAE9C,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAChE,GAAG,CAAC,OAAO,CAAC;AACd;","names":[]}

package/dist/hooks/use-scroll.js

@@ -0,0 +1,20 @@
+"use client";
+import React from "react";
+function useScroll(threshold) {
+  const [scrolled, setScrolled] = React.useState(false);
+  const onScroll = React.useCallback(() => {
+    setScrolled(window.scrollY > threshold);
+  }, [threshold]);
+  React.useEffect(() => {
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [onScroll]);
+  React.useEffect(() => {
+    onScroll();
+  }, [onScroll]);
+  return scrolled;
+}
+export {
+  useScroll
+};
+//# sourceMappingURL=use-scroll.js.map

package/dist/hooks/use-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-scroll.tsx"],"sourcesContent":["\"use client\";\r\nimport React from \"react\";\r\n\r\nexport function useScroll(threshold: number) {\r\n  const [scrolled, setScrolled] = React.useState(false);\r\n\r\n  const onScroll = React.useCallback(() => {\r\n    setScrolled(window.scrollY > threshold);\r\n  }, [threshold]);\r\n\r\n  React.useEffect(() => {\r\n    window.addEventListener(\"scroll\", onScroll);\r\n    return () => window.removeEventListener(\"scroll\", onScroll);\r\n  }, [onScroll]);\r\n\r\n  // also check on first load\r\n  React.useEffect(() => {\r\n    onScroll();\r\n  }, [onScroll]);\r\n\r\n  return scrolled;\r\n}\r\n"],"mappings":";AACA,OAAO,WAAW;AAEX,SAAS,UAAU,WAAmB;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,WAAW,MAAM,YAAY,MAAM;AACvC,gBAAY,OAAO,UAAU,SAAS;AAAA,EACxC,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,UAAU,MAAM;AACpB,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,UAAU,MAAM;AACpB,aAAS;AAAA,EACX,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;","names":[]}

package/dist/lib/utils.js

@@ -0,0 +1,48 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import _ from "lodash";
+const lodash = _;
+export * from "class-variance-authority";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function formatBytes(bytes, opts = {}) {
+  const { decimals = 0, sizeType = "normal" } = opts;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const accurateSizes = ["Bytes", "KiB", "MiB", "GiB", "TiB"];
+  if (bytes === 0) return "0 Byte";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${sizeType === "accurate" ? accurateSizes[i] ?? "Bytest" : sizes[i] ?? "Bytes"}`;
+}
+function replacePlaceholders(string, replacements) {
+  if (!string || !replacements || replacements.length === 0) {
+    return [];
+  }
+  let result = [string];
+  replacements.forEach(({ holder, replacement }) => {
+    const updatedResult = [];
+    result.forEach((element) => {
+      if (typeof element === "string") {
+        const parts = element.split(holder);
+        parts.forEach((part, i) => {
+          if (i !== parts.length - 1) {
+            updatedResult.push(part, replacement);
+          } else {
+            updatedResult.push(part);
+          }
+        });
+      } else {
+        updatedResult.push(element);
+      }
+    });
+    result = updatedResult;
+  });
+  return result;
+}
+export {
+  cn,
+  formatBytes,
+  lodash,
+  replacePlaceholders
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { JSX } from \"react\";\r\nimport { twMerge } from \"tailwind-merge\";\r\nimport _ from \"lodash\";\r\nexport const lodash = _;\r\nexport * from \"class-variance-authority\";\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n\r\nexport function formatBytes(\r\n  bytes: number,\r\n  opts: {\r\n    decimals?: number;\r\n    sizeType?: \"accurate\" | \"normal\";\r\n  } = {}\r\n) {\r\n  const { decimals = 0, sizeType = \"normal\" } = opts;\r\n\r\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\r\n  const accurateSizes = [\"Bytes\", \"KiB\", \"MiB\", \"GiB\", \"TiB\"];\r\n  if (bytes === 0) return \"0 Byte\";\r\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\r\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\r\n    sizeType === \"accurate\" ? accurateSizes[i] ?? \"Bytest\" : sizes[i] ?? \"Bytes\"\r\n  }`;\r\n}\r\n\r\nexport function replacePlaceholders(\r\n  string: string,\r\n  replacements: { holder: string; replacement: string | React.ReactNode }[]\r\n): (string | React.ReactNode | JSX.Element)[] {\r\n  if (!string || !replacements || replacements.length === 0) {\r\n    return [];\r\n  }\r\n\r\n  let result: (string | React.ReactNode | JSX.Element)[] = [string];\r\n\r\n  replacements.forEach(({ holder, replacement }) => {\r\n    const updatedResult: (string | React.ReactNode)[] = [];\r\n\r\n    result.forEach((element) => {\r\n      if (typeof element === \"string\") {\r\n        const parts: string[] = (element as string).split(holder);\r\n        parts.forEach((part, i) => {\r\n          if (i !== parts.length - 1) {\r\n            updatedResult.push(part, replacement);\r\n          } else {\r\n            updatedResult.push(part);\r\n          }\r\n        });\r\n      } else {\r\n        updatedResult.push(element);\r\n      }\r\n    });\r\n\r\n    result = updatedResult;\r\n  });\r\n\r\n  return result;\r\n}\r\n"],"mappings":"AAAA,SAAS,YAA6B;AAEtC,SAAS,eAAe;AACxB,OAAO,OAAO;AACP,MAAM,SAAS;AACtB,cAAc;AACP,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEO,SAAS,YACd,OACA,OAGI,CAAC,GACL;AACA,QAAM,EAAE,WAAW,GAAG,WAAW,SAAS,IAAI;AAE9C,QAAM,QAAQ,CAAC,SAAS,MAAM,MAAM,MAAM,IAAI;AAC9C,QAAM,gBAAgB,CAAC,SAAS,OAAO,OAAO,OAAO,KAAK;AAC1D,MAAI,UAAU,EAAG,QAAO;AACxB,QAAM,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC;AACrD,SAAO,IAAI,QAAQ,KAAK,IAAI,MAAM,CAAC,GAAG,QAAQ,QAAQ,CAAC,IACrD,aAAa,aAAa,cAAc,CAAC,KAAK,WAAW,MAAM,CAAC,KAAK,OACvE;AACF;AAEO,SAAS,oBACd,QACA,cAC4C;AAC5C,MAAI,CAAC,UAAU,CAAC,gBAAgB,aAAa,WAAW,GAAG;AACzD,WAAO,CAAC;AAAA,EACV;AAEA,MAAI,SAAqD,CAAC,MAAM;AAEhE,eAAa,QAAQ,CAAC,EAAE,QAAQ,YAAY,MAAM;AAChD,UAAM,gBAA8C,CAAC;AAErD,WAAO,QAAQ,CAAC,YAAY;AAC1B,UAAI,OAAO,YAAY,UAAU;AAC/B,cAAM,QAAmB,QAAmB,MAAM,MAAM;AACxD,cAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,cAAI,MAAM,MAAM,SAAS,GAAG;AAC1B,0BAAc,KAAK,MAAM,WAAW;AAAA,UACtC,OAAO;AACL,0BAAc,KAAK,IAAI;AAAA,UACzB;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AACL,sBAAc,KAAK,OAAO;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,aAAS;AAAA,EACX,CAAC;AAED,SAAO;AACT;","names":[]}

package/dist/lib/zod.js

@@ -0,0 +1,7 @@
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+export {
+  z,
+  zodResolver
+};
+//# sourceMappingURL=zod.js.map

package/dist/lib/zod.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/zod.ts"],"sourcesContent":["export { z } from \"zod\";\r\nexport { zodResolver } from \"@hookform/resolvers/zod\";\r\n"],"mappings":"AAAA,SAAS,SAAS;AAClB,SAAS,mBAAmB;","names":[]}

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@ayasofyazilim/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint .",
     "type-check": "tsc --noEmit",
     "test": "jest --no-cache",
@@ -98,27 +104,47 @@
     "@types/node": "^20.19.9",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
-    "@workspace/eslint-config": "workspace:*",
-    "@workspace/typescript-config": "workspace:*",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-turbo": "^2.3.3",
+    "globals": "^15.14.0",
     "identity-obj-proxy": "^3.0.0",
+    "typescript-eslint": "^8.18.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "tailwindcss": "^4.1.11",
     "ts-jest": "^29.2.5",
+    "tsup": "^8.3.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",
+    "./lib/*": [
+      "./dist/lib/*.js",
+      "./src/lib/*.ts"
+    ],
+    "./components/*": [
+      "./dist/components/*.js",
+      "./src/components/*.tsx"
+    ],
+    "./aria/*": [
+      "./dist/aria/*.js",
+      "./src/aria/*.tsx"
+    ],
     "./custom/*": [
+      "./dist/custom/*.js",
+      "./dist/custom/*/index.js",
       "./src/custom/*.tsx",
       "./src/custom/*/index.tsx",
       "./src/custom/*.ts",
       "./src/custom/*/index.ts"
     ],
-    "./hooks/*": "./src/hooks/*.ts"
+    "./hooks/*": [
+      "./dist/hooks/*.js",
+      "./src/hooks/*.ts"
+    ]
   }
-}
+}

package/src/aria/index.tsx

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

package/src/aria/number-field.tsx

@@ -1,41 +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>
-  );
-}
+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

@@ -1,66 +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 };
+"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 };