@rimelight/ui 0.0.5 → 0.0.7

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

@@ -1,162 +0,0 @@
----
-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

@@ -1,133 +0,0 @@
----
-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

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

package/src/components/section/Section.astro

@@ -1,167 +0,0 @@
----
-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>
-