@starwind-ui/core 1.11.2 → 1.12.1

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

@@ -1,157 +0,0 @@
----
-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>();
-
-  const setupRadioGroups = () => {
-    document
-      .querySelectorAll<HTMLFieldSetElement>(".starwind-radio-group")
-      .forEach((radioGroup, idx) => {
-        if (!radioGroupInstances.has(radioGroup)) {
-          radioGroupInstances.set(radioGroup, new RadioGroupHandler(radioGroup, idx));
-        }
-      });
-  };
-
-  // Initialize on page load and after Astro view transitions
-  setupRadioGroups();
-  document.addEventListener("astro:after-swap", setupRadioGroups);
-</script>

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

@@ -1,129 +0,0 @@
----
-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",
-    "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:transition-none",
-    "outline-none peer-focus-visible:ring-3",
-    "absolute inset-0 rounded-full border shadow-xs",
-    "transition-all peer-checked:[&>svg]:opacity-100",
-    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-    "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

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

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

@@ -1,23 +0,0 @@
-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,
-};