@ayasofyazilim/ui 0.0.0 → 0.0.1

package/src/custom/date-picker/calendar-rac.tsx

@@ -1,109 +1,109 @@
-"use client";
-
-import { getLocalTimeZone, today } from "@internationalized/date";
-import { ComponentProps } from "react";
-import {
-  Button as ButtonRac,
-  CalendarCell as CalendarCellRac,
-  CalendarGridBody as CalendarGridBodyRac,
-  CalendarGridHeader as CalendarGridHeaderRac,
-  CalendarGrid as CalendarGridRac,
-  CalendarHeaderCell as CalendarHeaderCellRac,
-  Calendar as CalendarRac,
-  Heading as HeadingRac,
-  RangeCalendar as RangeCalendarRac,
-  composeRenderProps,
-} from "react-aria-components";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-
-interface BaseCalendarProps {
-  className?: string;
-}
-
-type CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps;
-type RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &
-  BaseCalendarProps;
-
-const CalendarHeader = () => (
-  <header className="pb-1 grid">
-    <div className="flex w-full items-center gap-1 ">
-      <ButtonRac
-        slot="previous"
-        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
-      >
-        <ChevronLeftIcon strokeWidth={2} />
-      </ButtonRac>
-      <HeadingRac className="grow text-center text-sm font-medium" />
-      <ButtonRac
-        slot="next"
-        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none  data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
-      >
-        <ChevronRightIcon strokeWidth={2} />
-      </ButtonRac>
-    </div>
-  </header>
-);
-
-const CalendarGridComponent = ({ isRange = false }: { isRange?: boolean }) => {
-  const now = today(getLocalTimeZone());
-
-  return (
-    <CalendarGridRac>
-      <CalendarGridHeaderRac>
-        {(day) => (
-          <CalendarHeaderCellRac className="size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80">
-            {day}
-          </CalendarHeaderCellRac>
-        )}
-      </CalendarGridHeaderRac>
-      <CalendarGridBodyRac className="[&_td]:px-0">
-        {(date) => (
-          <CalendarCellRac
-            date={date}
-            className={cn(
-              "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg border border-transparent p-0 text-sm font-normal text-foreground outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow] focus:outline-none data-disabled:pointer-events-none data-unavailable:pointer-events-none data-focus-visible:z-10 data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-unavailable:line-through data-disabled:opacity-30 data-unavailable:opacity-30 data-focus-visible:outline-2 data-focus-visible:outline-ring/70",
-              // Range-specific styles
-              isRange &&
-                "data-selected:rounded-none data-selection-end:rounded-e-lg data-selection-start:rounded-s-lg data-invalid:bg-red-100 data-selected:bg-accent data-selected:text-foreground data-invalid:data-selection-end:[&:not([data-hover])]:bg-destructive data-invalid:data-selection-start:[&:not([data-hover])]:bg-destructive data-selection-end:[&:not([data-hover])]:bg-primary data-selection-start:[&:not([data-hover])]:bg-primary data-invalid:data-selection-end:[&:not([data-hover])]:text-destructive-foreground data-invalid:data-selection-start:[&:not([data-hover])]:text-destructive-foreground data-selection-end:[&:not([data-hover])]:text-primary-foreground data-selection-start:[&:not([data-hover])]:text-primary-foreground",
-              // Today indicator styles
-              date.compare(now) === 0 &&
-                cn(
-                  "after:pointer-events-none after:absolute after:bottom-1 after:start-1/2 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full after:bg-primary",
-                  isRange
-                    ? "data-selection-end:[&:not([data-hover])]:after:bg-background data-selection-start:[&:not([data-hover])]:after:bg-background"
-                    : "data-selected:after:bg-background"
-                )
-            )}
-          />
-        )}
-      </CalendarGridBodyRac>
-    </CalendarGridRac>
-  );
-};
-
-const Calendar = ({ className, ...props }: CalendarProps) => (
-  <CalendarRac
-    {...props}
-    className={composeRenderProps(className, (className) =>
-      cn("w-fit", className)
-    )}
-  >
-    <CalendarHeader />
-    <CalendarGridComponent />
-  </CalendarRac>
-);
-
-const RangeCalendar = ({ className, ...props }: RangeCalendarProps) => (
-  <RangeCalendarRac
-    {...props}
-    className={composeRenderProps(className, (className) =>
-      cn("w-fit", className)
-    )}
-  >
-    <CalendarHeader />
-    <CalendarGridComponent isRange />
-  </RangeCalendarRac>
-);
-
-export { Calendar, RangeCalendar };
+"use client";
+
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { ComponentProps } from "react";
+import {
+  Button as ButtonRac,
+  CalendarCell as CalendarCellRac,
+  CalendarGridBody as CalendarGridBodyRac,
+  CalendarGridHeader as CalendarGridHeaderRac,
+  CalendarGrid as CalendarGridRac,
+  CalendarHeaderCell as CalendarHeaderCellRac,
+  Calendar as CalendarRac,
+  Heading as HeadingRac,
+  RangeCalendar as RangeCalendarRac,
+  composeRenderProps,
+} from "react-aria-components";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+interface BaseCalendarProps {
+  className?: string;
+}
+
+type CalendarProps = ComponentProps<typeof CalendarRac> & BaseCalendarProps;
+type RangeCalendarProps = ComponentProps<typeof RangeCalendarRac> &
+  BaseCalendarProps;
+
+const CalendarHeader = () => (
+  <header className="pb-1 grid">
+    <div className="flex w-full items-center gap-1 ">
+      <ButtonRac
+        slot="previous"
+        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+      >
+        <ChevronLeftIcon strokeWidth={2} />
+      </ButtonRac>
+      <HeadingRac className="grow text-center text-sm font-medium" />
+      <ButtonRac
+        slot="next"
+        className="flex size-9 items-center justify-center rounded-lg text-muted-foreground/80 outline-offset-2 transition-colors hover:bg-accent hover:text-foreground focus:outline-none  data-focus-visible:outline-2 data-focus-visible:outline-ring/70"
+      >
+        <ChevronRightIcon strokeWidth={2} />
+      </ButtonRac>
+    </div>
+  </header>
+);
+
+const CalendarGridComponent = ({ isRange = false }: { isRange?: boolean }) => {
+  const now = today(getLocalTimeZone());
+
+  return (
+    <CalendarGridRac>
+      <CalendarGridHeaderRac>
+        {(day) => (
+          <CalendarHeaderCellRac className="size-9 rounded-lg p-0 text-xs font-medium text-muted-foreground/80">
+            {day}
+          </CalendarHeaderCellRac>
+        )}
+      </CalendarGridHeaderRac>
+      <CalendarGridBodyRac className="[&_td]:px-0">
+        {(date) => (
+          <CalendarCellRac
+            date={date}
+            className={cn(
+              "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg border border-transparent p-0 text-sm font-normal text-foreground outline-offset-2 duration-150 [transition-property:color,background-color,border-radius,box-shadow] focus:outline-none data-disabled:pointer-events-none data-unavailable:pointer-events-none data-focus-visible:z-10 data-hovered:bg-accent data-selected:bg-primary data-hovered:text-foreground data-selected:text-primary-foreground data-unavailable:line-through data-disabled:opacity-30 data-unavailable:opacity-30 data-focus-visible:outline-2 data-focus-visible:outline-ring/70",
+              // Range-specific styles
+              isRange &&
+                "data-selected:rounded-none data-selection-end:rounded-e-lg data-selection-start:rounded-s-lg data-invalid:bg-red-100 data-selected:bg-accent data-selected:text-foreground data-invalid:data-selection-end:[&:not([data-hover])]:bg-destructive data-invalid:data-selection-start:[&:not([data-hover])]:bg-destructive data-selection-end:[&:not([data-hover])]:bg-primary data-selection-start:[&:not([data-hover])]:bg-primary data-invalid:data-selection-end:[&:not([data-hover])]:text-destructive-foreground data-invalid:data-selection-start:[&:not([data-hover])]:text-destructive-foreground data-selection-end:[&:not([data-hover])]:text-primary-foreground data-selection-start:[&:not([data-hover])]:text-primary-foreground",
+              // Today indicator styles
+              date.compare(now) === 0 &&
+                cn(
+                  "after:pointer-events-none after:absolute after:bottom-1 after:start-1/2 after:z-10 after:size-[3px] after:-translate-x-1/2 after:rounded-full after:bg-primary",
+                  isRange
+                    ? "data-selection-end:[&:not([data-hover])]:after:bg-background data-selection-start:[&:not([data-hover])]:after:bg-background"
+                    : "data-selected:after:bg-background"
+                )
+            )}
+          />
+        )}
+      </CalendarGridBodyRac>
+    </CalendarGridRac>
+  );
+};
+
+const Calendar = ({ className, ...props }: CalendarProps) => (
+  <CalendarRac
+    {...props}
+    className={composeRenderProps(className, (className) =>
+      cn("w-fit", className)
+    )}
+  >
+    <CalendarHeader />
+    <CalendarGridComponent />
+  </CalendarRac>
+);
+
+const RangeCalendar = ({ className, ...props }: RangeCalendarProps) => (
+  <RangeCalendarRac
+    {...props}
+    className={composeRenderProps(className, (className) =>
+      cn("w-fit", className)
+    )}
+  >
+    <CalendarHeader />
+    <CalendarGridComponent isRange />
+  </RangeCalendarRac>
+);
+
+export { Calendar, RangeCalendar };

package/src/custom/date-picker/datefield-rac.tsx

@@ -1,84 +1,84 @@
-"use client";
-
-import {
-  DateFieldProps,
-  DateField as DateFieldRac,
-  DateInputProps as DateInputPropsRac,
-  DateInput as DateInputRac,
-  DateSegmentProps,
-  DateSegment as DateSegmentRac,
-  DateValue as DateValueRac,
-  TimeFieldProps,
-  TimeField as TimeFieldRac,
-  TimeValue as TimeValueRac,
-  composeRenderProps,
-} from "react-aria-components";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-
-const DateField = <T extends DateValueRac>({
-  className,
-  children,
-  ...props
-}: DateFieldProps<T>) => (
-  <DateFieldRac
-    className={composeRenderProps(className, (className) =>
-      cn("space-y-2", className)
-    )}
-    {...props}
-  >
-    {children}
-  </DateFieldRac>
-);
-
-const TimeField = <T extends TimeValueRac>({
-  className,
-  children,
-  ...props
-}: TimeFieldProps<T>) => (
-  <TimeFieldRac
-    className={composeRenderProps(className, (className) =>
-      cn("space-y-2", className)
-    )}
-    {...props}
-  >
-    {children}
-  </TimeFieldRac>
-);
-
-const DateSegment = ({ className, ...props }: DateSegmentProps) => (
-  <DateSegmentRac
-    className={composeRenderProps(className, (className) =>
-      cn(
-        "inline rounded p-0.5 text-foreground caret-transparent outline-0 data-disabled:cursor-not-allowed data-focused:bg-accent data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-focused:data-placeholder:text-foreground data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-[type=literal]:text-muted-foreground/70 data-disabled:opacity-50",
-        className
-      )
-    )}
-    {...props}
-  />
-);
-
-const dateInputStyle =
-  "relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-[focus-within]:outline-none data-[focus-within]:ring-[3px] data-[focus-within]:ring-ring/20";
-
-interface DateInputProps extends DateInputPropsRac {
-  className?: string;
-  unstyled?: boolean;
-}
-
-const DateInput = ({
-  className,
-  unstyled = false,
-  ...props
-}: Omit<DateInputProps, "children">) => (
-  <DateInputRac
-    className={composeRenderProps(className, (className) =>
-      cn(!unstyled && dateInputStyle, className)
-    )}
-    {...props}
-  >
-    {(segment) => <DateSegment segment={segment} />}
-  </DateInputRac>
-);
-
-export { DateField, DateInput, DateSegment, TimeField, dateInputStyle };
-export type { DateInputProps };
+"use client";
+
+import {
+  DateFieldProps,
+  DateField as DateFieldRac,
+  DateInputProps as DateInputPropsRac,
+  DateInput as DateInputRac,
+  DateSegmentProps,
+  DateSegment as DateSegmentRac,
+  DateValue as DateValueRac,
+  TimeFieldProps,
+  TimeField as TimeFieldRac,
+  TimeValue as TimeValueRac,
+  composeRenderProps,
+} from "react-aria-components";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+const DateField = <T extends DateValueRac>({
+  className,
+  children,
+  ...props
+}: DateFieldProps<T>) => (
+  <DateFieldRac
+    className={composeRenderProps(className, (className) =>
+      cn("space-y-2", className)
+    )}
+    {...props}
+  >
+    {children}
+  </DateFieldRac>
+);
+
+const TimeField = <T extends TimeValueRac>({
+  className,
+  children,
+  ...props
+}: TimeFieldProps<T>) => (
+  <TimeFieldRac
+    className={composeRenderProps(className, (className) =>
+      cn("space-y-2", className)
+    )}
+    {...props}
+  >
+    {children}
+  </TimeFieldRac>
+);
+
+const DateSegment = ({ className, ...props }: DateSegmentProps) => (
+  <DateSegmentRac
+    className={composeRenderProps(className, (className) =>
+      cn(
+        "inline rounded p-0.5 text-foreground caret-transparent outline-0 data-disabled:cursor-not-allowed data-focused:bg-accent data-invalid:data-focused:bg-destructive data-[type=literal]:px-0 data-focused:data-placeholder:text-foreground data-focused:text-foreground data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-placeholder:text-muted-foreground/70 data-[type=literal]:text-muted-foreground/70 data-disabled:opacity-50",
+        className
+      )
+    )}
+    {...props}
+  />
+);
+
+const dateInputStyle =
+  "relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-[focus-within]:outline-none data-[focus-within]:ring-[3px] data-[focus-within]:ring-ring/20";
+
+interface DateInputProps extends DateInputPropsRac {
+  className?: string;
+  unstyled?: boolean;
+}
+
+const DateInput = ({
+  className,
+  unstyled = false,
+  ...props
+}: Omit<DateInputProps, "children">) => (
+  <DateInputRac
+    className={composeRenderProps(className, (className) =>
+      cn(!unstyled && dateInputStyle, className)
+    )}
+    {...props}
+  >
+    {(segment) => <DateSegment segment={segment} />}
+  </DateInputRac>
+);
+
+export { DateField, DateInput, DateSegment, TimeField, dateInputStyle };
+export type { DateInputProps };