react-modular-datepicker 0.0.3 → 0.0.5-canary.0

package/README.md

@@ -17,6 +17,20 @@ A modular, lightweight, and type-safe React datepicker library. Whether you need
 
 ---
 
+## Installation
+
+```bash
+npm install react-modular-datepicker dayjs
+# or
+pnpm add react-modular-datepicker dayjs
+# or
+yarn add react-modular-datepicker dayjs
+```
+
+> **Note on Peer Dependencies**: `dayjs` is configured as an optional peer dependency. By default, `react-modular-datepicker` uses the built-in `DayjsAdapter`, so `dayjs` must be installed in your project. However, if you bring your own date management library (such as `date-fns` or Luxon), you can implement a custom `DateAdapter` and pass it to the `adapter` prop without needing `dayjs`.
+
+---
+
 ## API Reference
 
 ### Imports
@@ -90,6 +104,29 @@ Represents a month grid.
 - `year`: `number`
 - `weeks`: `(DateObj | null)[][]`
 
+#### `DateAdapter`
+Pluggable interface for date operations:
+```typescript
+export interface DateAdapter<T = any> {
+  date(value?: any): T;
+  add(date: T, amount: number, unit: 'day' | 'month' | 'year'): T;
+  subtract(date: T, amount: number, unit: 'day' | 'month' | 'year'): T;
+  startOf(date: T, unit: 'day' | 'month' | 'year'): T;
+  endOf(date: T, unit: 'day' | 'month' | 'year'): T;
+  isBefore(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
+  isAfter(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
+  isSame(date: T, comparison: T, unit?: 'day' | 'month' | 'year'): boolean;
+  set(date: T, unit: 'day' | 'month' | 'year', value: number): T;
+  get(date: T, unit: 'day' | 'month' | 'year'): number;
+  format(date: T, formatStr: string, locale?: string): string;
+  getDaysInMonth(date: T): number;
+  toDate(date: T): Date;
+  diff(date: T, comparison: T, unit: 'month' | 'year'): number;
+  getMonths(locale?: string): string[];
+  getWeekdays(locale?: string): string[];
+}
+```
+
 ---
 
 ## Recipes
@@ -363,6 +400,101 @@ const { calendars, getBackProps, getForwardProps, getDateProps } = useDates({
 
 </details>
 
+<details>
+<summary><b>Custom Date Adapter (e.g. date-fns)</b></summary>
+Replace the default `DayjsAdapter` with a custom adapter using `date-fns` (or any date library).
+
+```tsx
+import { Calendar, DateAdapter } from 'react-modular-datepicker';
+import {
+  addDays, addMonths, addYears,
+  subDays, subMonths, subYears,
+  startOfDay, startOfMonth, startOfYear,
+  endOfDay, endOfMonth, endOfYear,
+  isBefore, isAfter, isSameDay, isSameMonth, isSameYear,
+  setDate, setMonth, setYear,
+  getDate, getMonth, getYear,
+  format, getDaysInMonth,
+  differenceInCalendarMonths, differenceInCalendarYears
+} from 'date-fns';
+
+class DateFnsAdapter implements DateAdapter<Date> {
+  date(value?: any): Date { return value ? new Date(value) : new Date(); }
+  add(date: Date, amount: number, unit: 'day' | 'month' | 'year'): Date {
+    if (unit === 'day') return addDays(date, amount);
+    if (unit === 'month') return addMonths(date, amount);
+    return addYears(date, amount);
+  }
+  subtract(date: Date, amount: number, unit: 'day' | 'month' | 'year'): Date {
+    if (unit === 'day') return subDays(date, amount);
+    if (unit === 'month') return subMonths(date, amount);
+    return subYears(date, amount);
+  }
+  startOf(date: Date, unit: 'day' | 'month' | 'year'): Date {
+    if (unit === 'day') return startOfDay(date);
+    if (unit === 'month') return startOfMonth(date);
+    return startOfYear(date);
+  }
+  endOf(date: Date, unit: 'day' | 'month' | 'year'): Date {
+    if (unit === 'day') return endOfDay(date);
+    if (unit === 'month') return endOfMonth(date);
+    return endOfYear(date);
+  }
+  isBefore(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
+    if (unit === 'day') return startOfDay(date) < startOfDay(comparison);
+    if (unit === 'month') return startOfMonth(date) < startOfMonth(comparison);
+    if (unit === 'year') return startOfYear(date) < startOfYear(comparison);
+    return date < comparison;
+  }
+  isAfter(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
+    if (unit === 'day') return startOfDay(date) > startOfDay(comparison);
+    if (unit === 'month') return startOfMonth(date) > startOfMonth(comparison);
+    if (unit === 'year') return startOfYear(date) > startOfYear(comparison);
+    return date > comparison;
+  }
+  isSame(date: Date, comparison: Date, unit?: 'day' | 'month' | 'year'): boolean {
+    if (unit === 'day') return isSameDay(date, comparison);
+    if (unit === 'month') return isSameMonth(date, comparison);
+    if (unit === 'year') return isSameYear(date, comparison);
+    return date.getTime() === comparison.getTime();
+  }
+  set(date: Date, unit: 'day' | 'month' | 'year', value: number): Date {
+    if (unit === 'day') return setDate(date, value);
+    if (unit === 'month') return setMonth(date, value);
+    return setYear(date, value);
+  }
+  get(date: Date, unit: 'day' | 'month' | 'year'): number {
+    if (unit === 'day') return getDate(date);
+    if (unit === 'month') return getMonth(date);
+    return getYear(date);
+  }
+  format(date: Date, formatStr: string): string {
+    const f = formatStr.replace(/YYYY/g, 'yyyy').replace(/YY/g, 'yy').replace(/D/g, 'd');
+    return format(date, f);
+  }
+  getDaysInMonth(date: Date): number { return getDaysInMonth(date); }
+  toDate(date: Date): Date { return date; }
+  diff(date: Date, comparison: Date, unit: 'month' | 'year'): number {
+    if (unit === 'month') return differenceInCalendarMonths(date, comparison);
+    return differenceInCalendarYears(date, comparison);
+  }
+  getMonths(): string[] {
+    return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  }
+  getWeekdays(): string[] {
+    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+  }
+}
+
+const customAdapter = new DateFnsAdapter();
+
+function CustomAdapterExample() {
+  return <Calendar adapter={customAdapter} onChange={(date) => console.log(date)} />;
+}
+```
+
+</details>
+
 ---
 
 ## Contributors

package/dist/index.css

@@ -1,10 +1,11 @@
-/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Noto Color Emoji";
     --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
@@ -122,7 +123,7 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
@@ -174,7 +175,7 @@
     border-color: inherit;
     border-collapse: collapse;
   }
-  :-moz-focusring {
+  :-moz-focusring:where(:not(iframe)) {
     outline: auto;
   }
   progress {
@@ -272,11 +273,14 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .inset-0 {
-    inset: calc(var(--spacing) * 0);
+    inset: 0px;
   }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
@@ -291,14 +295,11 @@
     bottom: 100%;
   }
   .left-0 {
-    left: calc(var(--spacing) * 0);
+    left: 0px;
   }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
-  .isolate {
-    isolation: isolate;
-  }
   .z-10 {
     z-index: 10;
   }
@@ -318,7 +319,7 @@
     margin-top: calc(var(--spacing) * 6);
   }
   .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
+    margin-bottom: var(--spacing);
   }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
@@ -353,6 +354,9 @@
   .inline-block {
     display: inline-block;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -375,7 +379,7 @@
     max-height: 300px;
   }
   .min-h-0 {
-    min-height: calc(var(--spacing) * 0);
+    min-height: 0px;
   }
   .min-h-\[120px\] {
     min-height: 120px;
@@ -491,7 +495,7 @@
     justify-content: center;
   }
   .gap-1 {
-    gap: calc(var(--spacing) * 1);
+    gap: var(--spacing);
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
@@ -505,22 +509,21 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
   .gap-px {
     gap: 1px;
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .space-y-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
   .truncate {
     overflow: hidden;
@@ -860,7 +863,7 @@
     background-clip: text;
   }
   .p-1 {
-    padding: calc(var(--spacing) * 1);
+    padding: var(--spacing);
   }
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
@@ -887,7 +890,7 @@
     padding: 1px;
   }
   .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
+    padding-inline: var(--spacing);
   }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
@@ -905,7 +908,7 @@
     padding-block: calc(var(--spacing) * 0.5);
   }
   .py-1 {
-    padding-block: calc(var(--spacing) * 1);
+    padding-block: var(--spacing);
   }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
@@ -926,7 +929,7 @@
     padding-right: calc(var(--spacing) * 2);
   }
   .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
+    padding-bottom: var(--spacing);
   }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
@@ -1237,259 +1240,163 @@
     --tw-outline-style: none;
     outline-style: none;
   }
-  .group-focus-within\:visible {
-    &:is(:where(.group):focus-within *) {
-      visibility: visible;
+  .group-focus-within\:visible:is(:where(.group):focus-within *) {
+    visibility: visible;
+  }
+  .group-focus-within\:scale-100:is(:where(.group):focus-within *) {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 100%;
+  }
+  @media (hover: hover) {
+    .group-hover\:block:is(:where(.group):hover *) {
+      display: block;
     }
   }
-  .group-focus-within\:scale-100 {
-    &:is(:where(.group):focus-within *) {
-      --tw-scale-x: 100%;
-      --tw-scale-y: 100%;
-      --tw-scale-z: 100%;
+  .last\:border-r-0:last-child {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  @media (hover: hover) {
+    .hover\:scale-110:hover {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
-  }
-  .group-focus-within\:opacity-100 {
-    &:is(:where(.group):focus-within *) {
-      opacity: 100%;
+    .hover\:border-amber-400:hover {
+      border-color: var(--color-amber-400);
     }
-  }
-  .group-hover\:block {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        display: block;
-      }
+    .hover\:border-cyan-400:hover {
+      border-color: var(--color-cyan-400);
     }
-  }
-  .last\:border-r-0 {
-    &:last-child {
-      border-right-style: var(--tw-border-style);
-      border-right-width: 0px;
+    .hover\:bg-amber-100\/50:hover {
+      background-color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 50%, transparent);
     }
-  }
-  .hover\:scale-110 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 110%;
-        --tw-scale-y: 110%;
-        --tw-scale-z: 110%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-amber-100\/50:hover {
+        background-color: color-mix(in oklab, var(--color-amber-100) 50%, transparent);
       }
     }
-  }
-  .hover\:border-amber-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-amber-400);
-      }
+    .hover\:bg-brand-gray-light:hover {
+      background-color: var(--color-brand-gray-light);
     }
-  }
-  .hover\:border-cyan-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-cyan-400);
-      }
+    .hover\:bg-cyan-400:hover {
+      background-color: var(--color-cyan-400);
     }
-  }
-  .hover\:bg-amber-100\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-amber-100) 50%, transparent);
-        }
-      }
+    .hover\:bg-cyan-950:hover {
+      background-color: var(--color-cyan-950);
     }
-  }
-  .hover\:bg-brand-gray-light {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-brand-gray-light);
-      }
+    .hover\:bg-gray-50:hover {
+      background-color: var(--color-gray-50);
     }
-  }
-  .hover\:bg-cyan-400 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-cyan-400);
-      }
+    .hover\:bg-gray-50\/50:hover {
+      background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
     }
-  }
-  .hover\:bg-cyan-950 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-cyan-950);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-50\/50:hover {
+        background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
       }
     }
-  }
-  .hover\:bg-gray-50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-50);
-      }
+    .hover\:bg-gray-100:hover {
+      background-color: var(--color-gray-100);
     }
-  }
-  .hover\:bg-gray-50\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
-        }
-      }
+    .hover\:bg-gray-200:hover {
+      background-color: var(--color-gray-200);
     }
-  }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
+    .hover\:bg-green-200:hover {
+      background-color: var(--color-green-200);
     }
-  }
-  .hover\:bg-gray-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-200);
-      }
+    .hover\:bg-purple-500\/30:hover {
+      background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
     }
-  }
-  .hover\:bg-green-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-200);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-purple-500\/30:hover {
+        background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
       }
     }
-  }
-  .hover\:bg-purple-500\/30 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
-        }
-      }
+    .hover\:bg-purple-800\/40:hover {
+      background-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 40%, transparent);
     }
-  }
-  .hover\:bg-purple-800\/40 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 40%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-purple-800) 40%, transparent);
-        }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-purple-800\/40:hover {
+        background-color: color-mix(in oklab, var(--color-purple-800) 40%, transparent);
       }
     }
-  }
-  .hover\:bg-stone-200\/60 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(92.3% 0.003 48.717) 60%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-stone-200) 60%, transparent);
-        }
-      }
+    .hover\:bg-stone-200\/60:hover {
+      background-color: color-mix(in srgb, oklch(92.3% 0.003 48.717) 60%, transparent);
     }
-  }
-  .hover\:bg-stone-200\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(92.3% 0.003 48.717) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-stone-200) 80%, transparent);
-        }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-stone-200\/60:hover {
+        background-color: color-mix(in oklab, var(--color-stone-200) 60%, transparent);
       }
     }
-  }
-  .hover\:text-black {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-black);
-      }
+    .hover\:bg-stone-200\/80:hover {
+      background-color: color-mix(in srgb, oklch(92.3% 0.003 48.717) 80%, transparent);
     }
-  }
-  .hover\:text-stone-950 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-stone-950);
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-stone-200\/80:hover {
+        background-color: color-mix(in oklab, var(--color-stone-200) 80%, transparent);
       }
     }
-  }
-  .hover\:text-white {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
+    .hover\:text-black:hover {
+      color: var(--color-black);
     }
-  }
-  .hover\:underline {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
+    .hover\:text-stone-950:hover {
+      color: var(--color-stone-950);
     }
-  }
-  .hover\:brightness-95 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-brightness: brightness(95%);
-        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-      }
+    .hover\:text-white:hover {
+      color: var(--color-white);
     }
-  }
-  .focus\:border-brand-gold {
-    &:focus {
-      border-color: var(--color-brand-gold);
+    .hover\:underline:hover {
+      text-decoration-line: underline;
     }
-  }
-  .focus\:ring-2 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    .hover\:brightness-95:hover {
+      --tw-brightness: brightness(95%);
+      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     }
   }
-  .focus\:ring-brand-gold {
-    &:focus {
-      --tw-ring-color: var(--color-brand-gold);
-    }
+  .focus\:border-brand-gold:focus {
+    border-color: var(--color-brand-gold);
   }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
-    }
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .disabled\:opacity-30 {
-    &:disabled {
-      opacity: 30%;
-    }
+  .focus\:ring-brand-gold:focus {
+    --tw-ring-color: var(--color-brand-gold);
   }
-  .sm\:block {
-    @media (width >= 40rem) {
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+  .disabled\:opacity-30:disabled {
+    opacity: 30%;
+  }
+  @media (width >= 40rem) {
+    .sm\:block {
       display: block;
     }
-  }
-  .sm\:grid-cols-2 {
-    @media (width >= 40rem) {
+    .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
+  @media (width >= 48rem) {
+    .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-  }
-  .md\:flex-row {
-    @media (width >= 48rem) {
+    .md\:flex-row {
       flex-direction: row;
     }
   }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
+  @media (width >= 64rem) {
+    .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-  }
-  .lg\:grid-cols-4 {
-    @media (width >= 64rem) {
+    .lg\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }