@starwind-ui/core 1.15.1 → 1.15.2

package/dist/src/components/radio-group/RadioGroup.astro

@@ -0,0 +1,162 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"fieldset"> & {
+  /**
+   * Value for the radio group
+   */
+  value?: string;
+  /**
+   * Default value for the radio group
+   */
+  defaultValue?: string;
+  /**
+   * Legend for the radio group
+   */
+  legend?: string;
+  /**
+   * Whether the radio group is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Orientation of the radio group
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+export const radioGroup = tv({
+  base: "starwind-radio-group disabled:cursor-not-allowed disabled:opacity-70",
+  variants: {
+    orientation: {
+      vertical: "grid gap-3",
+      horizontal: "flex flex-row items-center gap-3",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+const {
+  class: className,
+  value,
+  defaultValue,
+  legend,
+  disabled = false,
+  orientation = "vertical",
+  ...rest
+} = Astro.props;
+---
+
+<fieldset
+  class:list={[radioGroup({ orientation, class: className })]}
+  data-value={value || defaultValue}
+  disabled={disabled}
+  data-slot="radio-group"
+  {...rest}
+>
+  {legend && <legend class="sr-only">{legend}</legend>}
+  <slot />
+</fieldset>
+
+<script>
+  import type { RadioGroupChangeEvent } from "./RadioGroupTypes";
+
+  class RadioGroupHandler {
+    private radioGroup: HTMLFieldSetElement;
+    private radioInputs: NodeListOf<HTMLInputElement> | undefined;
+    private radioGroupId: string | undefined;
+
+    constructor(radioGroup: HTMLFieldSetElement, idx: number) {
+      this.radioGroup = radioGroup;
+      this.radioGroupId = radioGroup.id || `starwind-radio-group-${idx}`;
+      this.radioInputs = radioGroup.querySelectorAll<HTMLInputElement>('input[type="radio"]');
+      this.init();
+    }
+
+    private init() {
+      // Initialize checked state based on data-value
+      this.syncWithDataValue();
+
+      // Setup event listeners
+      this.setupEvents();
+    }
+
+    private syncWithDataValue() {
+      const initialValue = this.radioGroup.dataset.value;
+      if (!initialValue || !this.radioInputs) return;
+
+      // Find the radio input with the matching value and check it
+      this.radioInputs.forEach((input) => {
+        if (input.value === initialValue) {
+          input.checked = true;
+        } else {
+          input.checked = false;
+        }
+      });
+    }
+
+    private setupEvents() {
+      // Listen for changes to update the fieldset's data-value attribute
+      this.radioGroup.addEventListener("change", this.handleChange.bind(this));
+    }
+
+    private handleChange(e: Event) {
+      const target = e.target as HTMLInputElement;
+      // console.log("target", target);
+      if (target.type !== "radio") return;
+
+      // Update the data-value attribute
+      this.radioGroup.dataset.value = target.value;
+
+      // Ensure all other radio buttons in the group are unchecked
+      if (this.radioInputs) {
+        this.radioInputs.forEach((radio) => {
+          if (radio !== target) {
+            radio.checked = false;
+          }
+        });
+      }
+
+      // Explicitly mark the clicked radio as checked
+      target.checked = true;
+
+      // Dispatch custom event for external listeners
+      this.dispatchChangeEvent(target.value);
+    }
+
+    private dispatchChangeEvent(value: string) {
+      const event = new CustomEvent<RadioGroupChangeEvent["detail"]>("starwind:value-change", {
+        bubbles: true,
+        detail: {
+          value: value,
+          radioGroupId: this.radioGroupId,
+        },
+      });
+      this.radioGroup.dispatchEvent(event);
+    }
+  }
+
+  // Store instances in a WeakMap to avoid memory leaks
+  const radioGroupInstances = new WeakMap<HTMLElement, RadioGroupHandler>();
+  let radioGroupCounter = 0;
+
+  const setupRadioGroups = () => {
+    document
+      .querySelectorAll<HTMLFieldSetElement>(".starwind-radio-group")
+      .forEach((radioGroup) => {
+        if (!radioGroupInstances.has(radioGroup)) {
+          radioGroupInstances.set(
+            radioGroup,
+            new RadioGroupHandler(radioGroup, radioGroupCounter++),
+          );
+        }
+      });
+  };
+
+  // Initialize on page load and after Astro view transitions
+  setupRadioGroups();
+  document.addEventListener("astro:after-swap", setupRadioGroups);
+  document.addEventListener("starwind:init", setupRadioGroups);
+</script>

package/dist/src/components/radio-group/RadioGroupItem.astro

@@ -0,0 +1,129 @@
+---
+import CircleFilled from "@tabler/icons/filled/circle.svg";
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"input"> &
+  VariantProps<typeof radioWrapper> &
+  VariantProps<typeof radioControl> & {
+    /**
+     * Value of the radio item
+     */
+    value: string;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional ID for the radio item
+     */
+    id?: string;
+    /**
+     * Name to group radio inputs
+     */
+    name?: string;
+    /**
+     * Whether the radio is checked (only for initial state)
+     */
+    checked?: boolean;
+  };
+
+export const radioWrapper = tv({
+  base: "relative isolate flex shrink-0",
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const radioItem = tv({
+  base: [
+    "starwind-radio-item peer z-10 h-full w-full",
+    "absolute inset-0 cursor-pointer opacity-0 outline-none focus:outline-none focus-visible:outline-none",
+    "disabled:cursor-not-allowed",
+  ],
+});
+
+export const radioControl = tv({
+  base: [
+    "starwind-radio-control",
+    "border-input bg-background dark:bg-input/30",
+    "outline-none peer-focus-visible:ring-3",
+    "absolute inset-0 rounded-full border shadow-xs",
+    "transition-[color,box-shadow] peer-checked:[&>svg]:opacity-100",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+    "peer-aria-invalid:border-error peer-focus-visible:peer-aria-invalid:ring-error/40",
+    "flex items-center justify-center",
+  ],
+  variants: {
+    variant: {
+      default:
+        "peer-checked:border-foreground [&>svg]:fill-foreground peer-focus-visible:ring-outline/50",
+      primary:
+        "peer-checked:border-primary [&>svg]:fill-primary peer-focus-visible:ring-primary/50",
+      secondary:
+        "peer-checked:border-secondary [&>svg]:fill-secondary peer-focus-visible:ring-secondary/50",
+      info: "peer-checked:border-info [&>svg]:fill-info peer-focus-visible:ring-info/50",
+      success:
+        "peer-checked:border-success [&>svg]:fill-success peer-focus-visible:ring-success/50",
+      warning:
+        "peer-checked:border-warning [&>svg]:fill-warning peer-focus-visible:ring-warning/50",
+      error: "peer-checked:border-error [&>svg]:fill-error peer-focus-visible:ring-error/50",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+export const radioIndicator = tv({
+  base: ["starwind-radio-indicator", "opacity-0 transition-opacity"],
+  variants: {
+    size: {
+      sm: "size-2",
+      md: "size-3",
+      lg: "size-4",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const {
+  value,
+  name,
+  disabled = false,
+  checked = false,
+  id,
+  class: className,
+  size = "md",
+  variant = "default",
+  ...rest
+} = Astro.props;
+---
+
+<div class={radioWrapper({ size })} data-slot="radio-group-item-wrapper">
+  <input
+    type="radio"
+    class={radioItem()}
+    name={name}
+    id={id}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    data-slot="radio-group-item"
+    {...rest}
+  />
+  <span class={radioControl({ variant, class: className })} data-slot="radio-group-item-control">
+    <slot name="icon">
+      <CircleFilled class={radioIndicator({ size })} />
+    </slot>
+  </span>
+</div>

package/dist/src/components/radio-group/RadioGroupTypes.ts

@@ -0,0 +1,6 @@
+export interface RadioGroupChangeEvent extends CustomEvent {
+  detail: {
+    value: string;
+    radioGroupId?: string;
+  };
+}

package/dist/src/components/radio-group/index.ts

@@ -0,0 +1,23 @@
+import RadioGroup, { radioGroup } from "./RadioGroup.astro";
+import RadioGroupItem, {
+  radioControl,
+  radioIndicator,
+  radioItem,
+  radioWrapper,
+} from "./RadioGroupItem.astro";
+import type { RadioGroupChangeEvent } from "./RadioGroupTypes";
+
+const RadioGroupVariants = {
+  radioGroup,
+  radioWrapper,
+  radioItem,
+  radioControl,
+  radioIndicator,
+};
+
+export { RadioGroup, type RadioGroupChangeEvent, RadioGroupItem, RadioGroupVariants };
+
+export default {
+  Root: RadioGroup,
+  Item: RadioGroupItem,
+};