opui-css 5.4.2 → 6.0.0-rc.1

package/components/Progress/Progress.astro

@@ -3,29 +3,18 @@ import type { Props } from "./types.astro"
 
 export const title = "Progress"
 
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  class: className,
-  id,
-  max,
-  value,
-  variant,
-  ...rest
-} = Astro.props
+const { class: className, max, style, value, variant, ...rest } = Astro.props
 ---
 
-<div class:list={["ui-progress", className, variant && `ui-${variant}`]}>
-  <progress
-    aria-busy={ariaBusy}
-    aria-describedby={ariaDescribedby}
-    aria-label={ariaLabel}
-    id={id}
-    max={max}
-    value={value}
-    {...rest}
-  >
+<div
+  class:list={[
+    "ui-progress",
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  style={style}
+>
+  <progress max={max} value={value} {...rest}>
     <slot />
   </progress>
 </div>

package/components/Progress/Progress.react.tsx

@@ -0,0 +1,27 @@
+import { cx } from "../cx"
+import type { Props } from "./types.react"
+
+export default function Progress({
+  className,
+  max,
+  style,
+  value,
+  variant,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <div
+      className={cx([
+        "ui-progress",
+        variant && variant !== "tonal" && `ui-${variant}`,
+        className,
+      ])}
+      style={style}
+    >
+      <progress max={max} value={value} {...rest}>
+        {children}
+      </progress>
+    </div>
+  )
+}

package/components/Progress/Progress.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    max,
+    style,
+    value,
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div
+  class={[
+    "ui-progress",
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {style}
+>
+  {#key value == null}
+    <progress {max} {value} {...rest}>
+      {@render children?.()}
+    </progress>
+  {/key}
+</div>

package/components/Progress/Progress.vue

@@ -1,33 +1,29 @@
 <script setup lang="ts">
-import type { Props, Slots } from "./types.d.vue"
+import { useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import type { Props, Slots } from "./types.vue-props"
+
+const { max, value, variant } = defineProps<Props>()
+defineSlots<Slots>()
 
 defineOptions({
   inheritAttrs: false,
 })
 
-defineSlots<Slots>()
-const {
-  "aria-busy": ariaBusy,
-  "aria-describedby": ariaDescribedby,
-  "aria-label": ariaLabel,
-  id,
-  max,
-  value,
-  variant,
-} = defineProps<Props>()
+const attrs = useAttrs()
+const progressAttrs = useInputAttrs()
 </script>
 
 <template>
-  <div :class="['ui-progress', variant && `ui-${variant}`, $props.class]">
-    <progress
-      v-bind="$attrs"
-      :aria-busy="ariaBusy"
-      :aria-describedby="ariaDescribedby"
-      :aria-label="ariaLabel"
-      :id="id"
-      :max="max"
-      :value="value"
-    >
+  <div
+    :class="[
+      'ui-progress',
+      variant && variant !== 'tonal' && `ui-${variant}`,
+      $props.class,
+    ]"
+    :style="$attrs.style"
+  >
+    <progress v-bind="progressAttrs" :max="max" :value="value">
       <slot></slot>
     </progress>
   </div>

package/components/Progress/types.astro.ts

@@ -1,4 +1,5 @@
 import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
-export type Props = Base.Props & HTMLAttributes<"progress">
+export type Props = Base.Props &
+  Omit<HTMLAttributes<"progress">, "max" | "value">

package/components/Progress/types.react.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props &
+  Omit<ComponentProps<"progress">, "max" | "value">

package/components/Progress/types.svelte.ts

@@ -1,4 +1,5 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
-export type Props = Base.Props & SvelteHTMLElements["progress"]
+export type Props = Base.Props &
+  Omit<SvelteHTMLElements["progress"], "max" | "value">

package/components/Progress/types.ts

@@ -1,10 +1,5 @@
 export type Props = {
-  [key: string]: any
-  "aria-busy"?: "true" | "false" | boolean
-  "aria-describedby"?: string
-  "aria-label"?: string
-  id?: string
   max?: number | string
   value?: number | string
-  variant?: "filled" | "default" | "tonal"
+  variant?: "filled" | "tonal"
 }

package/components/Progress/types.vue-props.ts

@@ -0,0 +1,6 @@
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & Class
+
+export type Slots = DefaultSlots

package/components/Radio/Radio.astro

@@ -1,42 +1,56 @@
 ---
-import type { RadioProps as Props } from "./types.astro"
+import type { Props } from "./types.astro"
+import { hasName, warnUnnamed } from "../dev"
 import RadioInput from "./RadioInput.astro"
 
 export const title = "Radio"
 
 const {
+  "aria-invalid": ariaInvalid,
+  card,
   class: className,
-  disabled,
+  endText,
   error,
   hideLabel,
-  name,
+  label,
+  orientation,
   size,
-  stack,
+  spread,
+  style,
+  variant,
   ...rest
 } = Astro.props
 
-const { $id, currentFieldName } = Astro.locals
-const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
-
-const finalName = name || currentFieldName
+warnUnnamed("Radio", hasName(Astro.props, Astro.slots.has("default")))
 ---
 
 <label
   class:list={[
     "ui-radio",
-    size && `ui-${size}`,
     {
-      "ui-stack": stack,
+      "ui-card": card,
+      "ui-spread": spread,
     },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  data-invalid={error || undefined}
+  style={style}
 >
-  <RadioInput aria-describedby={endTextId} name={finalName} {...rest} />
-  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <RadioInput {...rest} aria-invalid={error ? "true" : ariaInvalid} />
+  {
+    (label || Astro.slots.has("default")) && (
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        {label}
+        <slot />
+      </span>
+    )
+  }
   {
-    Astro.slots.has("end-text") && (
-      <span id={endTextId} class="ui-end-text">
+    (endText || Astro.slots.has("end-text")) && (
+      <span class="ui-end-text">
+        {endText}
         <slot name="end-text" />
       </span>
     )

package/components/Radio/Radio.react.tsx

@@ -0,0 +1,51 @@
+import { cx } from "../cx"
+import { hasName, warnUnnamed } from "../dev"
+import RadioInput from "./RadioInput.react"
+import type { Props } from "./types.react"
+
+export default function Radio({
+  card,
+  className,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  style,
+  variant,
+  children,
+  endText,
+  ...rest
+}: Props) {
+  warnUnnamed("Radio", hasName({ ...rest, label }, children))
+
+  return (
+    <label
+      className={cx([
+        "ui-radio",
+        {
+          "ui-card": card,
+          "ui-spread": spread,
+        },
+        card && variant && variant !== "outlined" && `ui-${variant}`,
+        orientation && orientation !== "horizontal" && `ui-${orientation}`,
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      <RadioInput
+        {...rest}
+        aria-invalid={error ? "true" : rest["aria-invalid"]}
+      />
+      {(label || children) && (
+        <span className={hideLabel ? "ui-sr-only" : "ui-label"}>
+          {label}
+          {children}
+        </span>
+      )}
+      {endText && <span className="ui-end-text">{endText}</span>}
+    </label>
+  )
+}

package/components/Radio/Radio.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { hasName, warnUnnamed } from "../dev"
+  import RadioInput from "./RadioInput.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    card,
+    class: className,
+    error,
+    group = $bindable(),
+    hideLabel,
+    label,
+    orientation,
+    size,
+    spread,
+    style,
+    variant,
+
+    // Snippets
+    children,
+    endText,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnUnnamed("Radio", hasName({ ...rest, label }, children)))
+</script>
+
+<label
+  class={[
+    "ui-radio",
+    {
+      "ui-card": card,
+      "ui-spread": spread,
+    },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  <RadioInput
+    {...rest}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    bind:group
+  />
+  {#if label || children}
+    <span class={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+      {label}{@render children?.()}
+    </span>
+  {/if}
+  {#if endText}
+    <span class="ui-end-text">
+      {@render content(endText)}
+    </span>
+  {/if}
+</label>

package/components/Radio/Radio.vue

@@ -1,41 +1,62 @@
 <script setup lang="ts">
 import RadioInput from "./RadioInput.vue"
-import type { RadioProps, Slots } from "./types.d.vue"
-import { useId } from "vue"
+import type { Props, Slots } from "./types.vue-props"
+import { type InputHTMLAttributes, useAttrs } from "vue"
+import { useInputAttrs } from "../vue"
+import { hasName, warnUnnamed } from "../dev"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<RadioProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<string | number | boolean>()
+const {
+  card,
+  endText,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const modelValue = defineModel<string | number | boolean | undefined>({
+  default: undefined,
+})
 
-const endTextId = useId()
+warnUnnamed("Radio", hasName({ ...attrs, label }, slots.default))
 </script>
 
 <template>
   <label
     :class="[
       'ui-radio',
-      props.size && `ui-${props.size}`,
       {
-        'ui-stack': props.stack,
+        'ui-card': card,
+        'ui-spread': spread,
       },
-      props.class,
+      card && variant && variant !== 'outlined' && `ui-${variant}`,
+      orientation && orientation !== 'horizontal' && `ui-${orientation}`,
+      size && size !== 'medium' && `ui-${size}`,
+      $props.class,
     ]"
-    :data-invalid="props.error || undefined"
+    :style="$attrs.style"
   >
     <RadioInput
-      v-bind="$attrs"
+      v-bind="inputAttrs"
       v-model="modelValue"
-      :aria-describedby="endTextId"
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
     />
-    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
-      ><slot></slot
+    <span
+      v-if="label || $slots.default"
+      :class="[hideLabel ? 'ui-sr-only' : 'ui-label']"
+      >{{ label }}<slot></slot
     ></span>
-    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
-      <slot name="end-text"></slot>
+    <span v-if="endText || $slots['end-text']" class="ui-end-text">
+      {{ endText }}<slot name="end-text"></slot>
     </span>
   </label>
 </template>

package/components/Radio/RadioInput.astro

@@ -1,7 +1,10 @@
 ---
 import type { RadioInputProps as Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
 
-const { ...props } = Astro.props
+const { name, ...rest } = Astro.props as Props
+
+const field = fieldGroupContext.get()
 ---
 
-<input type="radio" {...props} />
+<input type="radio" name={name ?? field?.name} {...rest} />

package/components/Radio/RadioInput.react.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import type { RadioInputProps as Props } from "./types.react"
+
+export default function RadioInput({ name, ...rest }: Props) {
+  const field = useFieldGroupContext()
+
+  return <input type="radio" name={name ?? field?.name} {...rest} />
+}

package/components/Radio/RadioInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import type { RadioInputProps as Props } from "./types.svelte"
+
+  let {
+    checked,
+    group = $bindable(),
+    name,
+    onchange,
+    value,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+</script>
+
+<input
+  type="radio"
+  checked={(checked ?? group === (value ?? true)) || undefined}
+  name={name ?? field?.name}
+  onchange={(event) => {
+    group = value ?? true
+    onchange?.(event)
+  }}
+  {value}
+  {...rest}
+/>

package/components/Radio/RadioInput.vue

@@ -1,14 +1,39 @@
 <script setup lang="ts">
-import type { RadioInputProps } from "./types"
+import { computed, inject, type InputHTMLAttributes, useAttrs } from "vue"
+import type { RadioInputProps } from "./types.vue-props"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
 
 defineOptions({
   inheritAttrs: false,
 })
 
 defineProps<RadioInputProps>()
-const modelValue = defineModel<string | number | boolean>()
+const attrs = useAttrs() as InputHTMLAttributes
+const modelValue = defineModel<string | number | boolean | undefined>({
+  default: undefined,
+})
+const field = inject(FieldGroupKey, undefined)
+
+const unchecked = Symbol()
+const model = computed({
+  get: () =>
+    modelValue.value ??
+    (attrs.checked !== undefined && attrs.checked !== false
+      ? attrs.value
+      : unchecked),
+  set: (value: string | number | boolean | undefined) => {
+    modelValue.value = value
+  },
+})
 </script>
 
 <template>
-  <input type="radio" v-bind="$attrs" v-model="modelValue" />
+  <input
+    type="radio"
+    :class="$props.class"
+    v-bind="$attrs"
+    :name="attrs.name ?? field?.name"
+    :value="attrs.value"
+    v-model="model"
+  />
 </template>

package/components/Radio/types.astro.ts

@@ -1,6 +1,7 @@
 import type * as Base from "./types"
 import type { HTMLAttributes } from "astro/types"
 
-export type RadioProps = Base.RadioProps & HTMLAttributes<"input">
+export type Props = Base.Props & Omit<HTMLAttributes<"input">, "size" | "type">
+
 export type RadioInputProps = Base.RadioInputProps &
   Omit<HTMLAttributes<"input">, "type">

package/components/Radio/types.react.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { ComponentProps, ReactNode } from "react"
+
+type Slots = Base.Slots<ReactNode>
+
+export type Props = Omit<Base.Props, keyof Slots> &
+  Slots &
+  Omit<ComponentProps<"input">, "size" | "type">
+
+export type RadioInputProps = Base.RadioInputProps &
+  Omit<ComponentProps<"input">, "type">

package/components/Radio/types.svelte.ts

@@ -2,11 +2,15 @@ import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 import type { Snippet } from "svelte"
 
-type Snippets = Base.RadioSlots<Snippet>
+type Snippets = Base.Slots<Snippet>
 
-export type RadioInputProps = Base.RadioInputProps &
-  Omit<SvelteHTMLElements["input"], "type">
+type Group = { group?: string | number | boolean }
 
-export type RadioProps = Omit<Base.RadioProps, keyof Snippets> &
+export type Props = Omit<Base.Props, keyof Snippets> &
   Snippets &
-  Omit<SvelteHTMLElements["input"], "size">
+  Group &
+  Omit<SvelteHTMLElements["input"], "size" | "type">
+
+export type RadioInputProps = Base.RadioInputProps &
+  Group &
+  Omit<SvelteHTMLElements["input"], "type">

package/components/Radio/types.ts

@@ -1,12 +1,17 @@
-export type RadioProps = {
+export type Props = {
+  card?: boolean
+  endText?: string
   error?: boolean
   hideLabel?: boolean
-  size?: "small" | "large"
-  stack?: boolean
+  label?: string
+  orientation?: "horizontal" | "vertical"
+  size?: "x-small" | "small" | "medium" | "large"
+  spread?: boolean
+  variant?: "elevated" | "outlined" | "tonal"
 }
 
 export type RadioInputProps = {}
 
-export type RadioSlots<S> = {
+export type Slots<S> = {
   endText?: string | S
 }

package/components/Radio/types.vue-props.ts

@@ -0,0 +1,15 @@
+import type { Slot } from "vue"
+import type { Class } from "../vue"
+import type {
+  Props as BaseProps,
+  RadioInputProps as BaseRadioInputProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type RadioInputProps = BaseRadioInputProps & Class
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+}