opui-css 5.4.2 → 6.0.0-rc.1

package/components/ToggleButton/ToggleButton.react.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { cx } from "../cx"
+import { warnGroupedChecked } from "../dev"
+import { useFieldGroupContext } from "../FieldGroup/context.react"
+import { useToggleGroupContext } from "../ToggleGroup/context.react"
+import { isSelected } from "../ToggleGroup/selection"
+import type { Props } from "./types.react"
+
+export default function ToggleButton({
+  checked,
+  className,
+  defaultChecked,
+  label,
+  name,
+  onChange,
+  size,
+  style,
+  type,
+  value,
+  children,
+  ...rest
+}: Props) {
+  const field = useFieldGroupContext()
+  const group = useToggleGroupContext()
+
+  const finalName = name || group?.groupName || field?.name
+  const finalType =
+    group?.inputType === "radio" ? "radio" : (type ?? "checkbox")
+  const grouped = isSelected(group?.value, value)
+  warnGroupedChecked("ToggleButton", grouped, checked ?? defaultChecked)
+
+  return (
+    <label
+      className={cx([
+        "ui-toggle-button",
+        size && size !== "medium" && `ui-${size}`,
+        className,
+      ])}
+      style={style}
+    >
+      <input
+        checked={grouped ?? checked}
+        defaultChecked={grouped === undefined ? defaultChecked : undefined}
+        name={finalName}
+        type={finalType}
+        value={value}
+        {...rest}
+        onChange={(event) => {
+          group?.change(event.currentTarget)
+          onChange?.(event)
+        }}
+      />
+      {children ?? label}
+    </label>
+  )
+}

package/components/ToggleButton/ToggleButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnGroupedChecked } from "../dev"
+  import { getFieldGroupContext } from "../FieldGroup/context.svelte"
+  import { getToggleGroupContext } from "../ToggleGroup/context.svelte"
+  import { isSelected } from "../ToggleGroup/selection"
+  import type { Props } from "./types.svelte"
+
+  let {
+    checked = $bindable(),
+    class: className,
+    label,
+    name,
+    onchange,
+    size,
+    style,
+    type,
+    value,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const field = getFieldGroupContext()
+  const group = getToggleGroupContext()
+
+  const finalName = $derived(name || group?.groupName || field?.name)
+  const finalType = $derived(
+    group?.inputType === "radio" ? "radio" : (type ?? "checkbox"),
+  )
+  const grouped = $derived(isSelected(group?.value, value))
+
+  untrack(() => warnGroupedChecked("ToggleButton", grouped, checked))
+</script>
+
+<label
+  class={[
+    "ui-toggle-button",
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  {style}
+>
+  <input
+    checked={grouped ?? checked}
+    name={finalName}
+    type={finalType}
+    {value}
+    {...rest}
+    onchange={(event) => {
+      if (grouped === undefined) checked = event.currentTarget.checked
+      group?.change(event.currentTarget)
+      onchange?.(event)
+    }}
+  />
+  {#if children}{@render children()}{:else}{label}{/if}
+</label>

package/components/ToggleButton/ToggleButton.vue

@@ -1,41 +1,65 @@
 <script setup lang="ts">
-import { inject, useId } from "vue"
-import { ToggleGroupKey } from "../ToggleGroup/types.d.vue"
-import type { Props, Slots } from "./types.d.vue"
+import { computed, inject, useAttrs, watchEffect } from "vue"
+import { useInputAttrs } from "../vue"
+import { warnGroupedChecked } from "../dev"
+import { FieldGroupKey } from "../FieldGroup/context.vue"
+import { ToggleGroupKey } from "../ToggleGroup/context.vue"
+import { isSelected } from "../ToggleGroup/selection"
+import type { Props, Slots } from "./types.vue-props"
 
-const { disabled, id, label, name, pressed, size, type, value } =
-  defineProps<Props>()
+const {
+  checked: checkedProp = undefined,
+  label,
+  name,
+  size,
+  type,
+  value,
+} = defineProps<Props>()
 defineSlots<Slots>()
+const model = defineModel<boolean | undefined>({ default: undefined })
 
 defineOptions({
   inheritAttrs: false,
 })
 
+const attrs = useAttrs()
+const inputAttrs = useInputAttrs()
+
+const field = inject(FieldGroupKey, undefined)
 const group = inject(ToggleGroupKey, undefined)
-const finalName = name || group?.name
-const finalType = type || group?.type || "checkbox"
-const inputId = id || useId()
+const finalName = computed(() => name || group?.groupName || field?.name)
+const finalType = computed(() =>
+  group?.inputType === "radio" ? "radio" : (type ?? "checkbox"),
+)
+const grouped = computed(() => isSelected(group?.value, value))
+watchEffect(() =>
+  warnGroupedChecked("ToggleButton", grouped.value, checkedProp ?? model.value),
+)
+const checked = computed(() => grouped.value ?? model.value ?? checkedProp)
+const change = (event: Event) => {
+  const input = event.currentTarget as HTMLInputElement
+  if (grouped.value === undefined) model.value = input.checked
+  group?.change(input)
+}
 </script>
 
 <template>
   <label
     :class="[
       'ui-toggle-button',
-      { 'ui-disabled': disabled },
-      size && `ui-${size}`,
+      size && size !== 'medium' && `ui-${size}`,
       $props.class,
     ]"
+    :style="$attrs.style"
   >
     <input
-      :aria-pressed="finalType === 'checkbox' ? pressed : undefined"
-      :checked="pressed"
-      :disabled="disabled"
-      :id="inputId"
+      :checked="checked"
       :name="finalName"
       :type="finalType"
-      :value="value || label"
-      v-bind="$attrs"
+      :value="value"
+      @change="change"
+      v-bind="inputAttrs"
     />
-    <slot></slot>
+    <slot>{{ label }}</slot>
   </label>
 </template>

package/components/ToggleButton/types.react.ts

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

package/components/ToggleButton/types.svelte.ts

@@ -1,7 +1,5 @@
-import type { Snippet } from "svelte"
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
 export type Props = Base.Props &
-  Base.Slots<Snippet> &
   Omit<SvelteHTMLElements["input"], "size" | "type">

package/components/ToggleButton/types.ts

@@ -1,10 +1,6 @@
 export type Props = {
+  checked?: boolean
   label?: string
-  pressed?: boolean
-  size?: "small" | "x-small"
+  size?: "x-small" | "small" | "medium" | "large"
   type?: "checkbox" | "radio"
 }
-
-export type Slots<S> = {
-  children?: S
-}

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

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps &
+  Class & {
+    name?: InputHTMLAttributes["name"]
+    value?: InputHTMLAttributes["value"]
+  }
+
+export type Slots = DefaultSlots

package/components/ToggleGroup/ToggleGroup.astro

@@ -1,41 +1,39 @@
 ---
 import type { Props } from "./types.astro"
+import { createId } from "../id"
+import { toggleGroupContext } from "./context.astro"
 
 export const title = "Toggle Group"
 
 const {
   class: className,
+  multiple,
   name,
   orientation,
-  selection = "multiple",
-  size = "default",
+  overflow,
+  size,
   ...rest
 } = Astro.props
 
-const { $id } = Astro.locals
+const $id = createId(Astro.locals)
 const groupName = name || $id("toggle-group")
-const inputType = selection === "single" ? "radio" : "checkbox"
-
-const originalName = Astro.locals.currentToggleGroupName
-const originalType = Astro.locals.currentToggleGroupType
-
-Astro.locals.currentToggleGroupName = groupName
-Astro.locals.currentToggleGroupType = inputType
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.currentToggleGroupName = originalName
-Astro.locals.currentToggleGroupType = originalType
+const inputType = multiple ? "checkbox" : "radio"
+const html = await toggleGroupContext.provide({ groupName, inputType }, () =>
+  Astro.slots.render("default"),
+)
 ---
 
 <div
   class:list={[
     "ui-toggle-group",
-    size !== "default" && size && `ui-${size}`,
-    orientation && `ui-${orientation}`,
+    {
+      "ui-vertical": orientation === "vertical",
+    },
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    size && size !== "medium" && `ui-${size}`,
     className,
   ]}
-  role={selection === "single" ? "radiogroup" : "group"}
+  role={multiple ? "group" : "radiogroup"}
   {...rest}
 >
   <Fragment set:html={html} />

package/components/ToggleGroup/ToggleGroup.react.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { useId, useState } from "react"
+import { cx } from "../cx"
+import { ToggleGroupContext } from "./context.react"
+import { selectionOf } from "./selection"
+import type { Props } from "./types.react"
+
+export default function ToggleGroup({
+  className,
+  defaultValue,
+  multiple,
+  name,
+  onValueChange,
+  orientation,
+  overflow,
+  size,
+  value,
+  children,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const groupName = name || `toggle-group-${uid}`
+  const inputType = multiple ? "checkbox" : "radio"
+  const [inner, setInner] = useState(defaultValue)
+
+  const change = (input: HTMLInputElement) => {
+    const next = selectionOf(input, multiple)
+    if (inner !== undefined) setInner(next)
+    onValueChange?.(next as never)
+  }
+
+  return (
+    <ToggleGroupContext
+      value={{ change, groupName, inputType, value: value ?? inner }}
+    >
+      <div
+        className={cx([
+          "ui-toggle-group",
+          {
+            "ui-vertical": orientation === "vertical",
+          },
+          overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+          size && size !== "medium" && `ui-${size}`,
+          className,
+        ])}
+        role={multiple ? "group" : "radiogroup"}
+        {...rest}
+      >
+        {children}
+      </div>
+    </ToggleGroupContext>
+  )
+}

package/components/ToggleGroup/ToggleGroup.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { setToggleGroupContext } from "./context.svelte"
+  import { selectionOf } from "./selection"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    multiple,
+    name,
+    orientation,
+    overflow,
+    size,
+    value = $bindable(),
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const groupName = $derived(name || `toggle-group-${uid}`)
+  const inputType = $derived(multiple ? "checkbox" : "radio")
+
+  setToggleGroupContext({
+    change(input) {
+      if (value !== undefined) value = selectionOf(input, multiple)
+    },
+    get groupName() {
+      return groupName
+    },
+    get inputType() {
+      return inputType
+    },
+    get value() {
+      return value
+    },
+  })
+</script>
+
+<div
+  class={[
+    "ui-toggle-group",
+    {
+      "ui-vertical": orientation === "vertical",
+    },
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    size && size !== "medium" && `ui-${size}`,
+    className,
+  ]}
+  role={multiple ? "group" : "radiogroup"}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/ToggleGroup/ToggleGroup.vue

@@ -1,35 +1,44 @@
-<script setup lang="ts">
-import { provide, useId } from "vue"
-import { ToggleGroupKey, type Props, type Slots } from "./types.d.vue"
+<script setup lang="ts" generic="Multiple extends boolean = false">
+import { computed, provide, reactive, useId } from "vue"
+import { ToggleGroupKey } from "./context.vue"
+import { selectionOf } from "./selection"
+import type { Props, Slots } from "./types.vue-props"
 
-const {
-  name,
-  orientation,
-  selection = "multiple",
-  size = "default",
-} = defineProps<Props>()
-defineSlots<Slots>()
+type Model = Multiple extends true ? string[] : string
 
-defineOptions({
-  inheritAttrs: false,
-})
+const { multiple, name, orientation, overflow, size } = defineProps<
+  Props & { multiple?: Multiple }
+>()
+defineSlots<Slots>()
+const model = defineModel<Model>()
 
-const groupName = name || useId()
-const inputType = selection === "single" ? "radio" : "checkbox"
+const uid = useId()
+const groupName = computed(() => name || `toggle-group-${uid}`)
+const inputType = computed(() => (multiple ? "checkbox" : "radio"))
+const change = (input: HTMLInputElement) => {
+  if (model.value !== undefined) {
+    model.value = selectionOf(input, multiple) as Model
+  }
+}
 
-provide(ToggleGroupKey, { name: groupName, type: inputType })
+provide(
+  ToggleGroupKey,
+  reactive({ change, groupName, inputType, value: model }),
+)
 </script>
 
 <template>
   <div
     :class="[
       'ui-toggle-group',
-      size !== 'default' && size && `ui-${size}`,
-      orientation && `ui-${orientation}`,
+      {
+        'ui-vertical': orientation === 'vertical',
+      },
+      overflow && overflow !== 'wrap' && `ui-overflow-${overflow}`,
+      size && size !== 'medium' && `ui-${size}`,
       $props.class,
     ]"
-    :role="selection === 'single' ? 'radiogroup' : 'group'"
-    v-bind="$attrs"
+    :role="multiple ? 'group' : 'radiogroup'"
   >
     <slot></slot>
   </div>

package/components/ToggleGroup/context.astro.ts

@@ -0,0 +1,5 @@
+import { createContext } from "../context.astro"
+import type { Context } from "./types"
+
+export const toggleGroupContext =
+  createContext<Pick<Context, "groupName" | "inputType">>()

package/components/ToggleGroup/context.react.ts

@@ -0,0 +1,8 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { Context } from "./types"
+
+export const ToggleGroupContext = createContext<Context | undefined>(undefined)
+
+export const useToggleGroupContext = () => useContext(ToggleGroupContext)

package/components/ToggleGroup/context.svelte.ts

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte"
+import type { Context } from "./types"
+
+const key = Symbol()
+
+export const getToggleGroupContext = () => getContext<Context | undefined>(key)
+export const setToggleGroupContext = (context: Context) =>
+  setContext(key, context)

package/components/ToggleGroup/context.vue.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+import type { Context } from "./types"
+
+export const ToggleGroupKey = Symbol() as InjectionKey<Context>

package/components/ToggleGroup/selection.ts

@@ -0,0 +1,12 @@
+export const isSelected = (
+  selected: string | string[] | undefined,
+  value: unknown,
+) =>
+  selected === undefined ? undefined : [selected].flat().includes(String(value))
+
+export const selectionOf = (input: HTMLInputElement, multiple?: boolean) =>
+  multiple
+    ? [...(input.closest(".ui-toggle-group")?.querySelectorAll("input") ?? [])]
+        .filter((item) => item.checked && item.name === input.name)
+        .map((item) => item.value)
+    : input.value

package/components/ToggleGroup/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+type Model<T> = {
+  defaultValue?: T
+  onValueChange?: (value: T) => void
+  value?: T
+}
+
+export type Props = Base.Props &
+  Base.Selection<Model<string>, Model<string[]>> &
+  Omit<ComponentProps<"div">, "defaultValue" | "size">

package/components/ToggleGroup/types.svelte.ts

@@ -1,9 +1,6 @@
-import type { Snippet } from "svelte"
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
 export type Props = Base.Props &
-  Base.Slots<Snippet> &
+  Base.Selection<{ value?: string }, { value?: string[] }> &
   Omit<SvelteHTMLElements["div"], "size">
-
-export type { ToggleContext } from "./types"

package/components/ToggleGroup/types.ts

@@ -1,15 +1,17 @@
 export type Props = {
+  multiple?: boolean
   name?: string
-  orientation?: "vertical"
-  selection?: "single" | "multiple"
-  size?: "default" | "small" | "x-small"
+  orientation?: "horizontal" | "vertical"
+  overflow?: "scroll" | "shrink" | "wrap"
+  size?: "x-small" | "small" | "medium" | "large"
 }
 
-export type Slots<S> = {
-  children: S
-}
-
-export type ToggleContext = {
+export type Context = {
+  change: (input: HTMLInputElement) => void
   groupName: string
-  inputType: "radio" | "checkbox"
+  inputType: "checkbox" | "radio"
+  value?: string | string[]
 }
+
+export type Selection<Single, Multiple> =
+  ({ multiple?: false } & Single) | ({ multiple: true } & Multiple)

package/components/ToggleGroup/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/Tooltip/Tooltip.astro

@@ -2,22 +2,21 @@
 import type { Props } from "./types.astro"
 
 import Anchor from "../Anchor/Anchor.astro"
+import { warnMissingId } from "../dev"
 
 export const title = "Tooltip"
 
-const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
+const { arrow, class: className, id, positionArea, ...rest } = Astro.props
+
+warnMissingId("Tooltip", id, "interestfor")
 ---
 
 <Anchor
-  alignment={alignment}
-  class:list={["ui-tooltip", { "ui-with-arrow": arrow }, className]}
+  class:list={["ui-tooltip", { "ui-arrow": arrow }, className]}
   id={id}
+  positionArea={positionArea}
   trigger="hover"
   {...rest}
 >
   <slot />
-  <Fragment slot="anchored">
-    {label}
-    <slot name="content" />
-  </Fragment>
 </Anchor>

package/components/Tooltip/Tooltip.react.tsx

@@ -0,0 +1,24 @@
+import Anchor from "../Anchor/Anchor.react"
+import { cx } from "../cx"
+import { warnMissingId } from "../dev"
+import type { Props } from "./types.react"
+
+export default function Tooltip({
+  arrow,
+  className,
+  id,
+  positionArea,
+  ...rest
+}: Props) {
+  warnMissingId("Tooltip", id, "interestfor")
+
+  return (
+    <Anchor
+      className={cx(["ui-tooltip", { "ui-arrow": arrow }, className])}
+      id={id}
+      positionArea={positionArea}
+      trigger="hover"
+      {...rest}
+    />
+  )
+}

package/components/Tooltip/Tooltip.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import Anchor from "../Anchor/Anchor.svelte"
+  import { warnMissingId } from "../dev"
+  import type { Props } from "./types.svelte"
+
+  let {
+    arrow,
+    class: className,
+    id,
+    positionArea,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  untrack(() => warnMissingId("Tooltip", id, "interestfor"))
+</script>
+
+<Anchor
+  class={["ui-tooltip", { "ui-arrow": arrow }, className]}
+  {id}
+  {positionArea}
+  trigger="hover"
+  {...rest}
+>
+  {@render children?.()}
+</Anchor>