@starwind-ui/core 1.6.2 → 1.7.0

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

@@ -0,0 +1,125 @@
+---
+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;
+  };
+
+const radioWrapper = tv({
+  base: "relative isolate flex shrink-0",
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+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",
+  ],
+});
+
+const radioControl = tv({
+  base: [
+    "starwind-radio-control",
+    "border-input bg-background",
+    "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:transition-none",
+    "absolute inset-0 rounded-full border shadow-xs",
+    "starwind-transition-colors 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:outline-outline",
+      primary:
+        "peer-checked:border-primary [&>svg]:fill-primary peer-focus-visible:outline-primary",
+      secondary:
+        "peer-checked:border-secondary [&>svg]:fill-secondary peer-focus-visible:outline-secondary",
+      info: "peer-checked:border-info [&>svg]:fill-info peer-focus-visible:outline-info",
+      success:
+        "peer-checked:border-success [&>svg]:fill-success peer-focus-visible:outline-success",
+      warning:
+        "peer-checked:border-warning [&>svg]:fill-warning peer-focus-visible:outline-warning",
+      error: "peer-checked:border-error [&>svg]:fill-error peer-focus-visible:outline-error",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+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 })}>
+  <input
+    type="radio"
+    class={radioItem()}
+    name={name}
+    id={id}
+    value={value}
+    checked={checked}
+    disabled={disabled}
+    {...rest}
+  />
+  <span class={radioControl({ variant, class: className })}>
+    <CircleFilled class={radioIndicator({ size })} />
+  </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,10 @@
+import RadioGroup from "./RadioGroup.astro";
+import RadioGroupItem from "./RadioGroupItem.astro";
+import type { RadioGroupChangeEvent } from "./RadioGroupTypes";
+
+export { RadioGroup, type RadioGroupChangeEvent, RadioGroupItem };
+
+export default {
+  Root: RadioGroup,
+  Item: RadioGroupItem,
+};