opui-css 5.4.2 → 6.0.0-rc.1

package/components/Card/types.react.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"div">
+
+export type CardActionsProps = Base.CardActionsProps & ComponentProps<"div">
+
+export type CardContentProps = Base.CardContentProps & ComponentProps<"div">
+
+export type CardHeaderProps = Base.CardHeaderProps & ComponentProps<"hgroup">

package/components/Card/types.svelte.ts

@@ -1,7 +1,11 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
-import type { Snippet } from "svelte"
 
-type Snippets = Base.Slots<Snippet>
+export type Props = Base.Props & SvelteHTMLElements["div"]
 
-export type Props = Base.Props & Snippets & SvelteHTMLElements["div"]
+export type CardActionsProps = Base.CardActionsProps & SvelteHTMLElements["div"]
+
+export type CardContentProps = Base.CardContentProps & SvelteHTMLElements["div"]
+
+export type CardHeaderProps = Base.CardHeaderProps &
+  SvelteHTMLElements["hgroup"]

package/components/Card/types.ts

@@ -1,11 +1,11 @@
 export type Props = {
-  actionsAlign?: "start" | "end"
-  variant?: "text" | "outlined" | "elevated" | "tonal"
+  variant?: "elevated" | "outlined" | "plain" | "tonal" | "transparent"
 }
 
-export type Slots<S> = {
-  actions?: S
-  children?: S
-  content?: S
-  header?: S
+export type CardActionsProps = {
+  align?: "start" | "end"
 }
+
+export type CardContentProps = {}
+
+export type CardHeaderProps = {}

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

@@ -0,0 +1,17 @@
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  CardActionsProps as BaseCardActionsProps,
+  CardContentProps as BaseCardContentProps,
+  CardHeaderProps as BaseCardHeaderProps,
+  Props as BaseProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type CardActionsProps = BaseCardActionsProps & Class
+
+export type CardContentProps = BaseCardContentProps & Class
+
+export type CardHeaderProps = BaseCardHeaderProps & Class
+
+export type Slots = DefaultSlots

package/components/Carousel/Carousel.astro

@@ -0,0 +1,44 @@
+---
+import type { Props } from "./types.astro"
+import { mergeStyle } from "../style"
+
+export const title = "Carousel"
+
+const {
+  align,
+  aspectRatio,
+  buttons,
+  class: className,
+  itemsPerView,
+  markers,
+  orientation,
+  peek,
+  persistentButtons,
+  stretch,
+  style,
+  ...rest
+} = Astro.props
+---
+
+<ul
+  class:list={[
+    "ui-carousel",
+    {
+      "ui-persistent-buttons": persistentButtons,
+      "ui-peek": peek,
+      "ui-stretch": stretch,
+      "ui-vertical": orientation === "vertical",
+      "ui-markers": markers,
+    },
+    align && align !== "start" && `ui-align-${align}`,
+    buttons && buttons !== "inside" && `ui-buttons-${buttons}`,
+    className,
+  ]}
+  style={mergeStyle(
+    { "--_items-per-view": itemsPerView, "--_media-aspect-ratio": aspectRatio },
+    style,
+  )}
+  {...rest}
+>
+  <slot />
+</ul>

package/components/Carousel/Carousel.react.tsx

@@ -0,0 +1,47 @@
+import { cx } from "../cx"
+import { mergeStyle } from "../style"
+import type { Props } from "./types.react"
+
+export default function Carousel({
+  align,
+  aspectRatio,
+  buttons,
+  className,
+  itemsPerView,
+  markers,
+  orientation,
+  peek,
+  persistentButtons,
+  stretch,
+  style,
+  children,
+  ...rest
+}: Props) {
+  return (
+    <ul
+      className={cx([
+        "ui-carousel",
+        {
+          "ui-persistent-buttons": persistentButtons,
+          "ui-peek": peek,
+          "ui-stretch": stretch,
+          "ui-vertical": orientation === "vertical",
+          "ui-markers": markers,
+        },
+        align && align !== "start" && `ui-align-${align}`,
+        buttons && buttons !== "inside" && `ui-buttons-${buttons}`,
+        className,
+      ])}
+      style={mergeStyle(
+        {
+          "--_items-per-view": itemsPerView,
+          "--_media-aspect-ratio": aspectRatio,
+        },
+        style ?? {},
+      )}
+      {...rest}
+    >
+      {children}
+    </ul>
+  )
+}

package/components/Carousel/Carousel.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { mergeStyle } from "../style"
+  import type { Props } from "./types.svelte"
+
+  let {
+    align,
+    aspectRatio,
+    buttons,
+    class: className,
+    itemsPerView,
+    markers,
+    orientation,
+    peek,
+    persistentButtons,
+    stretch,
+    style,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<ul
+  class={[
+    "ui-carousel",
+    {
+      "ui-persistent-buttons": persistentButtons,
+      "ui-peek": peek,
+      "ui-stretch": stretch,
+      "ui-vertical": orientation === "vertical",
+      "ui-markers": markers,
+    },
+    align && align !== "start" && `ui-align-${align}`,
+    buttons && buttons !== "inside" && `ui-buttons-${buttons}`,
+    className,
+  ]}
+  style={mergeStyle(
+    { "--_items-per-view": itemsPerView, "--_media-aspect-ratio": aspectRatio },
+    style,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</ul>

package/components/Carousel/Carousel.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.vue-props"
+
+const {
+  align,
+  aspectRatio,
+  buttons,
+  itemsPerView,
+  markers,
+  orientation,
+  peek,
+  persistentButtons,
+  stretch,
+} = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <ul
+    :class="[
+      'ui-carousel',
+      {
+        'ui-persistent-buttons': persistentButtons,
+        'ui-peek': peek,
+        'ui-stretch': stretch,
+        'ui-vertical': orientation === 'vertical',
+        'ui-markers': markers,
+      },
+      align && align !== 'start' && `ui-align-${align}`,
+      buttons && buttons !== 'inside' && `ui-buttons-${buttons}`,
+      $props.class,
+    ]"
+    :style="
+      itemsPerView || aspectRatio
+        ? {
+            '--_items-per-view': itemsPerView,
+            '--_media-aspect-ratio': aspectRatio,
+          }
+        : undefined
+    "
+  >
+    <slot></slot>
+  </ul>
+</template>

package/components/Carousel/types.astro.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"ul">

package/components/Carousel/types.react.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"ul">

package/components/Carousel/types.svelte.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["ul"]

package/components/Carousel/types.ts

@@ -0,0 +1,11 @@
+export type Props = {
+  align?: "start" | "center"
+  aspectRatio?: number | string
+  buttons?: "inside" | "none" | "outside"
+  itemsPerView?: number
+  markers?: boolean
+  orientation?: "horizontal" | "vertical"
+  peek?: boolean
+  persistentButtons?: boolean
+  stretch?: boolean
+}

package/components/Carousel/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/Checkbox/Checkbox.astro

@@ -1,44 +1,56 @@
 ---
-import type { CheckboxProps as Props } from "./types.astro"
+import type { Props } from "./types.astro"
+import { hasName, warnUnnamed } from "../dev"
 import CheckboxInput from "./CheckboxInput.astro"
 
 export const title = "Checkbox"
 
 const {
+  "aria-invalid": ariaInvalid,
+  card,
   class: className,
+  endText,
   error,
-  disabled,
   hideLabel,
-  name,
+  label,
+  orientation,
   size,
   spread,
-  stack,
+  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("Checkbox", hasName(Astro.props, Astro.slots.has("default")))
 ---
 
 <label
   class:list={[
     "ui-checkbox",
-    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}
 >
-  <CheckboxInput aria-describedby={endTextId} name={finalName} {...rest} />
-  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <CheckboxInput {...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/Checkbox/Checkbox.react.tsx

@@ -0,0 +1,51 @@
+import { cx } from "../cx"
+import { hasName, warnUnnamed } from "../dev"
+import CheckboxInput from "./CheckboxInput.react"
+import type { Props } from "./types.react"
+
+export default function Checkbox({
+  card,
+  className,
+  error,
+  hideLabel,
+  label,
+  orientation,
+  size,
+  spread,
+  style,
+  variant,
+  children,
+  endText,
+  ...rest
+}: Props) {
+  warnUnnamed("Checkbox", hasName({ ...rest, label }, children))
+
+  return (
+    <label
+      className={cx([
+        "ui-checkbox",
+        {
+          "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}
+    >
+      <CheckboxInput
+        {...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/Checkbox/Checkbox.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { content } from "../content.svelte"
+  import { hasName, warnUnnamed } from "../dev"
+  import CheckboxInput from "./CheckboxInput.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    card,
+    checked = $bindable(),
+    class: className,
+    error,
+    group = $bindable(),
+    hideLabel,
+    label,
+    orientation,
+    size,
+    spread,
+    style,
+    variant,
+
+    // Snippets
+    children,
+    endText,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnUnnamed("Checkbox", hasName({ ...rest, label }, children)))
+</script>
+
+<label
+  class={[
+    "ui-checkbox",
+    {
+      "ui-card": card,
+      "ui-spread": spread,
+    },
+    card && variant && variant !== "outlined" && `ui-${variant}`,
+    orientation && orientation !== "horizontal" && `ui-${orientation}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  <CheckboxInput
+    {...rest}
+    aria-invalid={error ? "true" : rest["aria-invalid"]}
+    bind:checked
+    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/Checkbox/Checkbox.vue

@@ -1,43 +1,64 @@
 <script setup lang="ts">
 import CheckboxInput from "./CheckboxInput.vue"
-import type { CheckboxProps, 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<CheckboxProps>()
-defineSlots<Slots>()
-const modelValue = defineModel<boolean | (string | number)[]>()
+const {
+  card,
+  endText,
+  error,
+  hideLabel,
+  indeterminate,
+  label,
+  orientation,
+  size,
+  spread,
+  variant,
+} = defineProps<Props>()
+const slots = defineSlots<Slots>()
+const attrs = useAttrs() as InputHTMLAttributes
+const inputAttrs = useInputAttrs()
+const modelValue = defineModel<boolean | (string | number)[] | undefined>({
+  default: undefined,
+})
 
-const endTextId = useId()
+warnUnnamed("Checkbox", hasName({ ...attrs, label }, slots.default))
 </script>
 
 <template>
   <label
     :class="[
       'ui-checkbox',
-      props.size && `ui-${props.size}`,
       {
-        'ui-stack': props.stack,
-        'ui-spread': props.spread,
+        '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"
   >
     <CheckboxInput
-      v-bind="$attrs"
+      v-bind="inputAttrs"
       v-model="modelValue"
-      :aria-describedby="$slots['end-text'] ? endTextId : undefined"
-      :indeterminate="props.indeterminate"
+      :aria-invalid="error ? 'true' : attrs['aria-invalid']"
+      :indeterminate="indeterminate"
     />
-    <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/Checkbox/CheckboxInput.astro

@@ -1,12 +1,16 @@
 ---
 import type { CheckboxInputProps as Props } from "./types.astro"
+import { fieldGroupContext } from "../FieldGroup/context.astro"
 
-const { indeterminate, ...rest } = Astro.props as Props
+const { indeterminate, name, ...rest } = Astro.props as Props
+
+const field = fieldGroupContext.get()
 ---
 
 <input
   type="checkbox"
-  data-indeterminate={indeterminate || undefined}
+  data-indeterminate={indeterminate ? "" : undefined}
+  name={name ?? field?.name}
   {...rest}
 />
 

package/components/Checkbox/CheckboxInput.react.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { useCallback, useLayoutEffect, useRef } from "react"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import type { CheckboxInputProps as Props } from "./types.react"
+
+export default function CheckboxInput({
+  indeterminate,
+  name,
+  ref,
+  ...rest
+}: Props) {
+  const field = useFieldGroupContext()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useLayoutEffect(() => {
+    if (inputRef.current)
+      inputRef.current.indeterminate = Boolean(indeterminate)
+  }, [indeterminate])
+
+  const setRef = useCallback(
+    (input: HTMLInputElement | null) => {
+      inputRef.current = input
+      if (typeof ref === "function") return ref(input)
+      if (ref) ref.current = input
+    },
+    [ref],
+  )
+
+  return (
+    <input
+      type="checkbox"
+      data-indeterminate={indeterminate ? "" : undefined}
+      name={name ?? field?.name}
+      ref={setRef}
+      {...rest}
+    />
+  )
+}

package/components/Checkbox/CheckboxInput.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { toggleInGroup } from "../group"
+  import type { CheckboxInputProps as Props } from "./types.svelte"
+
+  let {
+    checked = $bindable(),
+    group = $bindable(),
+    indeterminate,
+    name,
+    value,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+
+  const getChecked = () => (group ? group.includes(value) : !!checked)
+  const setChecked = (isChecked: boolean) => {
+    if (group) group = toggleInGroup(group, value, isChecked)
+    else checked = isChecked
+  }
+</script>
+
+<input
+  type="checkbox"
+  bind:checked={getChecked, setChecked}
+  {@attach (input) => {
+    input.indeterminate = Boolean(indeterminate)
+  }}
+  data-indeterminate={indeterminate ? "" : undefined}
+  name={name ?? field?.name}
+  {value}
+  {...rest}
+/>