@rimelight/ui 0.0.1

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

@@ -0,0 +1,162 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-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 = cv({
+  base: "starwind-radio-group disabled:cursor-not-allowed disabled:op-70",
+  variants: {
+    orientation: {
+      vertical: "grid gap-4xs",
+      horizontal: "flex flex-row items-center gap-4xs",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+const {
+  class: className,
+  value,
+  defaultValue,
+  legend,
+  disabled = false,
+  orientation = "vertical",
+  ...rest
+} = Astro.props;
+---
+
+<fieldset
+  class:list={[radioGroup({ orientation, className })]}
+  data-value={value || defaultValue}
+  disabled={disabled}
+  {...rest}
+  data-slot="radio-group"
+>
+  {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;
+
+    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/src/components/radio-group/RadioGroupItem.astro

@@ -0,0 +1,133 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconCircleDot from "~icons/lucide/circle-dot";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+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 = cv({
+  base: "relative isolate flex shrink-0",
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const radioItem = cv({
+  base: [
+    "starwind-radio-item peer z-10 h-full w-full",
+    "absolute inset-0 cursor-pointer op-0 outline-none focus:outline-none focus-visible:outline-none",
+    "disabled:cursor-not-allowed",
+  ],
+});
+
+export const radioControl = cv({
+  base: [
+    "starwind-radio-control",
+    "border-input bg-background dark:bg-input/30",
+    "outline-none peer-focus-visible:ring-3",
+    "absolute inset-0 rounded-full b shadow-xs",
+    "transition-[color,box-shadow] peer-checked:[&>svg]:op-100",
+    "peer-disabled:cursor-not-allowed peer-disabled:op-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 = cv({
+  base: ["starwind-radio-indicator", "op-0 transition-op"],
+  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}
+    {...rest}
+    data-slot="radio-group-item"
+  />
+  <span class:list={[radioControl({ variant }), className]} data-slot="radio-group-item-control">
+    <slot name="icon">
+      <span class={radioIndicator({ size })}>
+        <IconCircleDot />
+      </span>
+    </slot>
+  </span>
+</div>

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

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

package/src/components/section/Section.astro

@@ -0,0 +1,167 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+import type { button } from "../button/Button.astro";
+import Button from "../button/Button.astro";
+
+export interface SectionAction {
+  text: string;
+  href: string;
+  variant?: NonNullable<Parameters<typeof button>[0]>["variant"];
+  icon?: any;
+}
+
+export interface SectionProps extends HTMLAttributes<"section">, NonNullable<Parameters<typeof sectionVariants>[0]> {
+  /** Main title text */
+  title?: string;
+  /** Description text */
+  description?: string;
+  /** Action buttons */
+  actions?: SectionAction[];
+}
+
+type Props = SectionProps;
+
+const sectionVariants = cv({
+  base: "container py-5xl",
+
+  variants: {
+    orientation: {
+      vertical: "flex flex-col gap-4xl",
+      horizontal: "flex flex-col gap-3xl items-center lg:grid lg:grid-cols-2 lg:items-center lg:gap-5xl",
+    },
+    alignment: {
+      left: "text-start items-start",
+      center: "text-center items-center",
+      right: "text-end items-end",
+    },
+    inverted: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      inverted: true,
+      className: "flex-col-reverse",
+    },
+    {
+      orientation: "vertical",
+      inverted: false,
+      className: "flex-col",
+    },
+    {
+      orientation: "horizontal",
+      inverted: false,
+      className: "lg:[&_.section-content]:order-1 lg:[&_.section-image]:order-2",
+    },
+    {
+      orientation: "horizontal",
+      inverted: true,
+      className: "lg:[&_.section-image]:order-1 lg:[&_.section-content]:order-2",
+    },
+    {
+      orientation: "horizontal",
+      className: "[&_.section-content]:text-start [&_.section-content]:items-start lg:text-start lg:items-start",
+    },
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    alignment: "center",
+    inverted: false,
+  },
+});
+
+const {
+  title,
+  description,
+  actions = [],
+  orientation = "vertical",
+  alignment = "center",
+  inverted = false,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const effectiveAlignment = orientation === "horizontal" ? "left" : alignment;
+---
+
+<section class="relative w-full overflow-hidden" {...rest}>
+  <div class="absolute inset-0 -z-10" aria-hidden="true">
+    <slot name="bg" />
+  </div>
+
+  <div class:list={[sectionVariants({ orientation, alignment, inverted }), className]}>
+    <div
+      class:list={[
+        "section-content flex flex-col w-full",
+        orientation === "vertical" && [
+          effectiveAlignment === "center" && "mx-auto",
+          effectiveAlignment === "left" && "mr-auto",
+          effectiveAlignment === "right" && "ml-auto",
+        ],
+        effectiveAlignment === "center" && "text-center items-center",
+        effectiveAlignment === "left" && "text-start items-start",
+        effectiveAlignment === "right" && "text-end items-end",
+      ]}
+      data-slot="content"
+    >
+      {
+        title && (
+          <h2 class="font-heading text-4xl font-bold tracking-tight text-pretty lg:text-5xl xl:text-6xl">
+            {title}
+          </h2>
+        )
+      }
+      {
+        description && (
+          <p class="text-muted-foreground mt-2xl text-pretty lg:text-lg">
+            {description}
+          </p>
+        )
+      }
+      {
+        actions.length > 0 && (
+          <div
+            class:list={[
+              "mt-3xl flex w-full flex-wrap gap-3xs md:w-fit",
+              effectiveAlignment === "center" && "justify-center mx-auto",
+              effectiveAlignment === "left" && "justify-start",
+              effectiveAlignment === "right" && "justify-end md:ml-auto",
+            ]}
+          >
+            {actions.map(({ text, href, variant, icon: Icon }) => (
+              <Button variant={variant} class="group w-full md:w-auto" href={href}>
+                {text}
+                {Icon && (
+                  <Icon class="transition-transform group-hover:translate-x-5xs" />
+                )}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+
+    <div class="section-image w-full">
+      <slot />
+    </div>
+
+    {Astro.slots.has("image") && (
+      <div 
+        class:list={[
+          "section-image w-full flex",
+          effectiveAlignment === "center" && "justify-center",
+          effectiveAlignment === "left" && "justify-start",
+          effectiveAlignment === "right" && "justify-end",
+        ]} 
+        data-slot="image"
+      >
+        <slot name="image" />
+      </div>
+    )}
+  </div>
+</section>
+