@ropav/styles 0.3.0

package/dist/components/radio-group.css

@@ -0,0 +1,49 @@
+/* Radio Group base styles */
+.radio-group {
+  @apply flex flex-col;
+
+  /* Default orientation */
+  &[data-orientation="vertical"] {
+    [data-slot="radio"] {
+      @apply mt-4;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    @apply flex-row flex-wrap gap-4;
+  }
+}
+
+/* Variant property definitions */
+.radio-group--primary {
+  /* Default styles */
+}
+
+.radio-group--secondary .radio__control {
+  @apply shadow-none;
+  background-color: var(--radio-control-bg);
+
+  --radio-control-bg: var(--default);
+  --radio-control-bg-hover: var(--default-hover);
+
+  /* Hover state */
+  .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
+  .radio [data-slot="radio-content"][data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+
+  /* Default indicator color (unselected) */
+  .radio:not([data-selected]):not(:has(input:checked)) & .radio__indicator:empty::before {
+    background-color: var(--radio-control-bg);
+  }
+
+  /* Hover indicator color (unselected) */
+  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
+      :has(input:checked)
+    )
+    & {
+    .radio__indicator:empty::before {
+      background-color: var(--radio-control-bg-hover);
+    }
+  }
+}

package/dist/components/radio.css

@@ -0,0 +1,183 @@
+/* ==========================================================================
+   Base radio styles
+
+   Structure (explicit composition):
+     .radio                      → RadioField wrapper (column)
+       .radio__content            → RadioButton: the clickable row (control + label)
+         .radio__control
+         [data-slot="label"]
+       [data-slot="description"] → field-level sibling, below the row
+       [data-slot="field-error"]
+   ========================================================================== */
+
+.radio {
+  @apply flex flex-col items-start gap-1 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  [data-slot="label"] {
+    @apply select-none;
+  }
+
+  .radio__content [data-slot="label"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  /* Field-level help text (siblings of the button), indented to align under the label */
+  & > [data-slot="description"],
+  & > [data-slot="field-error"] {
+    @apply w-full min-w-0 cursor-default ps-7 text-xs text-wrap wrap-break-word text-muted select-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="description"],
+    [data-slot="field-error"] {
+      @apply status-disabled;
+    }
+  }
+}
+
+/* Radio content — the clickable label (control + label text) */
+.radio__content {
+  @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
+}
+
+/* ==========================================================================
+   Radio control (the circular button)
+   ========================================================================== */
+
+.radio__control {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 200ms var(--ease-out),
+    border-color 200ms var(--ease-out),
+    transform 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Interactive states */
+  /* Focus */
+  .radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
+  .radio [data-slot="radio-content"][data-focus-visible="true"] & {
+    @apply status-focused;
+  }
+
+  /* Hover */
+  .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
+  .radio [data-slot="radio-content"][data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+
+  /* Hover - only when not selected */
+  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
+      :has(input:checked)
+    )
+    & {
+    .radio__indicator:empty::before {
+      @apply bg-field-hover;
+    }
+  }
+
+  /* Pressed */
+  .radio:has([data-slot="radio-content"][data-pressed="true"]) &,
+  .radio [data-slot="radio-content"][data-pressed="true"] & {
+    @apply scale-95;
+  }
+
+  /* Selection states */
+  /* Selected */
+  .radio[data-selected] &,
+  .radio:has([data-slot="radio-content"][aria-checked="true"]) &,
+  .radio:has(input:checked) & {
+    @apply border-transparent bg-accent;
+  }
+
+  /* Selected + Pressed */
+  .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
+  .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
+  .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid */
+  .radio[data-invalid="true"] &,
+  .radio[aria-invalid="true"] & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .radio[data-invalid="true"][data-selected] &,
+  .radio[aria-invalid="true"][data-selected] &,
+  .radio[data-invalid="true"]:has(input:checked) &,
+  .radio[aria-invalid="true"]:has(input:checked) & {
+    @apply status-invalid-field;
+  }
+}
+
+/* ==========================================================================
+   Radio indicator (the inner dot)
+   ========================================================================== */
+
+.radio__indicator {
+  @apply absolute inset-0 flex items-center justify-center;
+
+  pointer-events: none;
+}
+
+/* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
+   (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
+.radio__indicator:empty::before {
+  content: "";
+  @apply rounded-lg bg-field;
+
+  width: 100%;
+  height: 100%;
+  scale: 1;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    scale 200ms var(--ease-out),
+    background-color 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+/* Selected state */
+.radio[data-selected] .radio__indicator:empty::before,
+.radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty::before,
+.radio:has(input:checked) .radio__indicator:empty::before {
+  @apply bg-accent-foreground;
+  scale: 0.4286; /* 6px */
+}
+
+/* Selected + Pressed state */
+.radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
+  .radio__indicator:empty::before,
+.radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
+  .radio__indicator:empty::before,
+.radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
+  .radio__indicator:empty::before {
+  scale: 0.5714; /* 8px */
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.radio--disabled {
+  @apply status-disabled;
+}

package/dist/components/range-calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./range-calendar.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/range-calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/dist/components/range-calendar/index.js

@@ -0,0 +1,2 @@
+import { rangeCalendarVariants } from "./range-calendar.styles.js";
+export { rangeCalendarVariants };

package/dist/components/range-calendar/range-calendar.styles.d.ts

@@ -0,0 +1,79 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, undefined, {}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{}, {
+    /** Root range calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}>>;
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;
+//# sourceMappingURL=range-calendar.styles.d.ts.map

package/dist/components/range-calendar/range-calendar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,qBAAqB;IAG9B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;GAI/B,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/range-calendar/range-calendar.styles.js

@@ -0,0 +1,34 @@
+import { tv } from "tailwind-variants";
+//#region src/components/range-calendar/range-calendar.styles.ts
+const rangeCalendarVariants = tv({
+	defaultVariants: {},
+	slots: {
+		/** Root range calendar container */
+		base: "range-calendar",
+		/** Calendar cell (td) */
+		cell: "range-calendar__cell",
+		/** Cell indicator (small dot at bottom of cell) */
+		cellIndicator: "range-calendar__cell-indicator",
+		/** Calendar grid (table) */
+		grid: "range-calendar__grid",
+		/** Grid body (tbody) */
+		gridBody: "range-calendar__grid-body",
+		/** Grid header (thead) */
+		gridHeader: "range-calendar__grid-header",
+		/** Grid row (tr) */
+		gridRow: "range-calendar__grid-row",
+		/** Calendar header containing heading and navigation */
+		header: "range-calendar__header",
+		/** Header cell (th - day names) */
+		headerCell: "range-calendar__header-cell",
+		/** Month/year heading text */
+		heading: "range-calendar__heading",
+		/** Previous/Next navigation button */
+		navButton: "range-calendar__nav-button",
+		/** Navigation button icon */
+		navButtonIcon: "range-calendar__nav-button-icon"
+	},
+	variants: {}
+});
+//#endregion
+export { rangeCalendarVariants };