opui-css 5.4.3 → 6.0.0-rc.1

package/components/Tabs/TabsItem.astro

@@ -1,40 +1,28 @@
----
-import type { TabsItemProps as Props } from "./types.astro"
-
-const { $id } = Astro.locals
-const {
-  class: className,
-  name,
-  open,
-  tabId = $id("tab"),
-  panelId = $id("panel"),
-  ...rest
-} = Astro.props
-
-const tabsGroupName = name || Astro.locals.tabsGroupName
-const originalGroupName = Astro.locals.tabsGroupName
-Astro.locals.tabsGroupName = tabsGroupName
-
-const originalTabId = Astro.locals.currentTabId
-const originalPanelId = Astro.locals.currentPanelId
-
-Astro.locals.currentTabId = tabId
-Astro.locals.currentPanelId = panelId
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.currentTabId = originalTabId
-Astro.locals.currentPanelId = originalPanelId
-Astro.locals.tabsGroupName = originalGroupName
----
-
-<input
-  aria-controls={panelId}
-  checked={open}
-  class:list={["ui-tab-input", className]}
-  id={tabId}
-  name={tabsGroupName}
-  type="radio"
-  {...rest}
-/>
-<Fragment set:html={html} />
+---
+import type { TabsItemProps as Props } from "./types.astro"
+import { createId } from "../id"
+import { isSelected } from "../ToggleGroup/selection"
+import { tabsContext } from "./context.astro"
+
+const $id = createId(Astro.locals)
+const { checked, class: className, id, name, value, ...rest } = Astro.props
+
+const parent = tabsContext.get()
+const groupName = name || parent?.groupName || $id("tabs")
+const tabId = id || $id("tab")
+const grouped = isSelected(parent?.value, value)
+const html = await tabsContext.provide({ groupName, tabId }, () =>
+  Astro.slots.render("default"),
+)
+---
+
+<input
+  checked={grouped ?? checked}
+  class:list={["ui-input", className]}
+  id={tabId}
+  name={groupName}
+  type="radio"
+  value={value}
+  {...rest}
+/>
+<Fragment set:html={html} />

package/components/Tabs/TabsItem.react.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { useId } from "react"
+import { cx } from "../cx"
+import { warnGroupedChecked } from "../dev"
+import { isSelected } from "../ToggleGroup/selection"
+import { TabsContext, useTabsContext } from "./context.react"
+import type { TabsItemProps as Props } from "./types.react"
+
+export default function TabsItem({
+  checked,
+  className,
+  defaultChecked,
+  id,
+  name,
+  onChange,
+  value,
+  children,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const parent = useTabsContext()
+  const groupName = name || parent?.groupName || `tabs-${uid}`
+  const tabId = id || `tab-${uid}`
+  const grouped = isSelected(parent?.value, value)
+  warnGroupedChecked("TabsItem", grouped, checked ?? defaultChecked, "Tabs")
+
+  return (
+    <TabsContext value={{ groupName, tabId }}>
+      <input
+        checked={grouped ?? checked}
+        className={cx(["ui-input", className])}
+        defaultChecked={grouped === undefined ? defaultChecked : undefined}
+        id={tabId}
+        name={groupName}
+        type="radio"
+        value={value}
+        {...rest}
+        onChange={(event) => {
+          parent?.change?.(event.currentTarget)
+          onChange?.(event)
+        }}
+      />
+      {children}
+    </TabsContext>
+  )
+}

package/components/Tabs/TabsItem.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { untrack } from "svelte"
+  import { warnGroupedChecked } from "../dev"
+  import { isSelected } from "../ToggleGroup/selection"
+  import { getTabsContext, setTabsContext } from "./context.svelte"
+  import type { TabsItemProps as Props } from "./types.svelte"
+
+  let {
+    checked,
+    class: className,
+    id,
+    name,
+    onchange,
+    value,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const parent = getTabsContext()
+  const groupName = $derived(name || parent?.groupName || `tabs-${uid}`)
+  const tabId = $derived(id || `tab-${uid}`)
+  const grouped = $derived(isSelected(parent?.value, value))
+
+  untrack(() => warnGroupedChecked("TabsItem", grouped, checked, "Tabs"))
+
+  setTabsContext({
+    get groupName() {
+      return groupName
+    },
+    get tabId() {
+      return tabId
+    },
+  })
+</script>
+
+<input
+  checked={grouped ?? checked}
+  class={["ui-input", className]}
+  id={tabId}
+  name={groupName}
+  type="radio"
+  {value}
+  {...rest}
+  onchange={(event) => {
+    parent?.change?.(event.currentTarget)
+    onchange?.(event)
+  }}
+/>
+{@render children?.()}

package/components/Tabs/TabsItem.vue

@@ -1,39 +1,41 @@
-<script setup lang="ts">
-import { inject, provide, useId } from "vue"
-import {
-  CurrentPanelIdKey,
-  CurrentTabIdKey,
-  TabsGroupNameKey,
-  type Slots,
-  type TabsItemProps,
-} from "./types.d.vue"
-
-const { name, open, panelId, tabId } = defineProps<TabsItemProps>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const tabsGroupName = name || inject(TabsGroupNameKey, undefined) || useId()
-provide(TabsGroupNameKey, tabsGroupName)
-
-const computedTabId = tabId || useId()
-const computedPanelId = panelId || useId()
-
-provide(CurrentTabIdKey, computedTabId)
-provide(CurrentPanelIdKey, computedPanelId)
-</script>
-
-<template>
-  <input
-    :aria-controls="computedPanelId"
-    :checked="open"
-    :class="['ui-tab-input', $props.class]"
-    :id="computedTabId"
-    :name="tabsGroupName"
-    type="radio"
-    v-bind="$attrs"
-  />
-  <slot></slot>
-</template>
+<script setup lang="ts">
+import { computed, inject, provide, reactive, useId, watchEffect } from "vue"
+import { warnGroupedChecked } from "../dev"
+import { isSelected } from "../ToggleGroup/selection"
+import { TabsKey } from "./context.vue"
+import type { Slots, TabsItemProps } from "./types.vue-props"
+
+const { checked = undefined, id, name, value } = defineProps<TabsItemProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const uid = useId()
+const parent = inject(TabsKey, undefined)
+const groupName = computed(() => name || parent?.groupName || `tabs-${uid}`)
+const tabId = computed(() => id || `tab-${uid}`)
+const grouped = computed(() => isSelected(parent?.value, value))
+watchEffect(() =>
+  warnGroupedChecked("TabsItem", grouped.value, checked, "Tabs"),
+)
+const change = (event: Event) =>
+  parent?.change?.(event.currentTarget as HTMLInputElement)
+
+provide(TabsKey, reactive({ groupName, tabId }))
+</script>
+
+<template>
+  <input
+    :checked="grouped ?? checked"
+    :class="['ui-input', $props.class]"
+    :id="tabId"
+    :name="groupName"
+    type="radio"
+    :value="value"
+    @change="change"
+    v-bind="$attrs"
+  />
+  <slot></slot>
+</template>

package/components/Tabs/TabsLabel.astro

@@ -0,0 +1,16 @@
+---
+import type { TabsLabelProps as Props } from "./types.astro"
+import { tabsContext } from "./context.astro"
+
+const { class: className, for: htmlFor, ...rest } = Astro.props
+
+const tabs = tabsContext.get()
+---
+
+<label
+  for={htmlFor || tabs?.tabId}
+  class:list={["ui-label", className]}
+  {...rest}
+>
+  <slot />
+</label>

package/components/Tabs/TabsLabel.react.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { cx } from "../cx"
+import { useTabsContext } from "./context.react"
+import type { TabsLabelProps as Props } from "./types.react"
+
+export default function TabsLabel({ className, htmlFor, ...rest }: Props) {
+  const tabs = useTabsContext()
+
+  return (
+    <label
+      className={cx(["ui-label", className])}
+      htmlFor={htmlFor || tabs?.tabId}
+      {...rest}
+    />
+  )
+}

package/components/Tabs/TabsLabel.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getTabsContext } from "./context.svelte"
+  import type { TabsLabelProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+    for: htmlFor,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const tabs = getTabsContext()
+</script>
+
+<label for={htmlFor || tabs?.tabId} class={["ui-label", className]} {...rest}>
+  {@render children?.()}
+</label>

package/components/Tabs/TabsLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import { TabsKey } from "./context.vue"
+import type { Slots, TabsLabelProps } from "./types.vue-props"
+
+const { for: htmlFor } = defineProps<TabsLabelProps>()
+defineSlots<Slots>()
+
+const tabs = inject(TabsKey, undefined)
+</script>
+
+<template>
+  <label :for="htmlFor || tabs?.tabId" :class="['ui-label', $props.class]">
+    <slot></slot>
+  </label>
+</template>

package/components/Tabs/TabsPanel.astro

@@ -1,16 +1,9 @@
----
-import type { TabsPanelProps as Props } from "./types.astro"
-
-const { class: className, panelId, tabId, ...rest } = Astro.props
-const { currentPanelId, currentTabId } = Astro.locals
----
-
-<div
-  id={panelId || currentPanelId}
-  class:list={["ui-tab-panel", className]}
-  role="tabpanel"
-  aria-labelledby={tabId || currentTabId}
-  {...rest}
->
-  <slot />
-</div>
+---
+import type { TabsPanelProps as Props } from "./types.astro"
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={["ui-panel", className]} {...rest}>
+  <slot />
+</div>

package/components/Tabs/TabsPanel.react.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../cx"
+import type { TabsPanelProps as Props } from "./types.react"
+
+export default function TabsPanel({ className, ...rest }: Props) {
+  return <div className={cx(["ui-panel", className])} {...rest} />
+}

package/components/Tabs/TabsPanel.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { TabsPanelProps as Props } from "./types.svelte"
+
+  let {
+    class: className,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<div class={["ui-panel", className]} {...rest}>
+  {@render children?.()}
+</div>

package/components/Tabs/TabsPanel.vue

@@ -1,31 +1,12 @@
-<script setup lang="ts">
-import { inject } from "vue"
-import {
-  CurrentPanelIdKey,
-  CurrentTabIdKey,
-  type Slots,
-  type TabsPanelProps,
-} from "./types.d.vue"
-
-const { panelId, tabId } = defineProps<TabsPanelProps>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const currentPanelId = inject(CurrentPanelIdKey, undefined)
-const currentTabId = inject(CurrentTabIdKey, undefined)
-</script>
-
-<template>
-  <div
-    :id="panelId || currentPanelId"
-    :class="['ui-tab-panel', $props.class]"
-    role="tabpanel"
-    :aria-labelledby="tabId || currentTabId"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import type { Slots, TabsPanelProps } from "./types.vue-props"
+
+defineProps<TabsPanelProps>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-panel', $props.class]">
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/context.astro.ts

@@ -0,0 +1,4 @@
+import { createContext } from "../context.astro"
+import type { Context } from "./types"
+
+export const tabsContext = createContext<Context>()

package/components/Tabs/context.react.ts

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

package/components/Tabs/context.svelte.ts

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

package/components/Tabs/context.vue.ts

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

package/components/Tabs/types.astro.ts

@@ -1,11 +1,13 @@
-import type * as Base from "./types"
-import type { HTMLAttributes } from "astro/types"
-
-export type Props = Base.Props & HTMLAttributes<"div">
-
-export type TabsItemProps = Base.TabsItemProps &
-  Omit<HTMLAttributes<"input">, "type">
-
-export type TabsTabProps = Base.TabsTabProps & HTMLAttributes<"label">
-
-export type TabsPanelProps = Base.TabsPanelProps & HTMLAttributes<"div">
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & {
+  value?: string
+} & HTMLAttributes<"div">
+
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<HTMLAttributes<"input">, "type">
+
+export type TabsPanelProps = Base.TabsPanelProps & HTMLAttributes<"div">
+
+export type TabsLabelProps = Base.TabsLabelProps & HTMLAttributes<"label">

package/components/Tabs/types.react.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & {
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  value?: string
+} & Omit<ComponentProps<"div">, "defaultValue">
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<ComponentProps<"input">, "type">
+export type TabsPanelProps = Base.TabsPanelProps & ComponentProps<"div">
+export type TabsLabelProps = Base.TabsLabelProps & ComponentProps<"label">

package/components/Tabs/types.svelte.ts

@@ -1,10 +1,10 @@
-import type * as Base from "./types"
-import type { SvelteHTMLElements } from "svelte/elements"
-
-export type Props = Base.Props & SvelteHTMLElements["div"]
-export type TabsItemProps = Base.TabsItemProps & SvelteHTMLElements["input"]
-export type TabsPanelProps = Base.TabsPanelProps & SvelteHTMLElements["div"]
-export type TabsTabProps = Base.TabsTabProps &
-  Omit<SvelteHTMLElements["label"], "for"> & {
-    for?: string
-  }
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & {
+  value?: string
+} & SvelteHTMLElements["div"]
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<SvelteHTMLElements["input"], "type">
+export type TabsPanelProps = Base.TabsPanelProps & SvelteHTMLElements["div"]
+export type TabsLabelProps = Base.TabsLabelProps & SvelteHTMLElements["label"]

package/components/Tabs/types.ts

@@ -1,19 +1,21 @@
-export type Props = {
-  name?: string
-}
-
-export type TabsItemProps = {
-  name?: string
-  open?: boolean
-  panelId?: string
-  tabId?: string
-}
-
-export type TabsTabProps = {
-  tabId?: string
-}
-
-export type TabsPanelProps = {
-  panelId?: string
-  tabId?: string
-}
+export type Props = {
+  name?: string
+  overflow?: "scroll" | "wrap"
+  variant?: "filled" | "line" | "outlined" | "tonal"
+}
+
+export type TabsItemProps = {
+  checked?: boolean
+  name?: string
+}
+
+export type TabsPanelProps = {}
+
+export type TabsLabelProps = {}
+
+export type Context = {
+  change?: (input: HTMLInputElement) => void
+  groupName?: string
+  tabId?: string
+  value?: string
+}

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

@@ -0,0 +1,25 @@
+import type { InputHTMLAttributes, LabelHTMLAttributes } from "vue"
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  Props as BaseProps,
+  TabsItemProps as BaseTabsItemProps,
+  TabsPanelProps as BaseTabsPanelProps,
+  TabsLabelProps as BaseTabsLabelProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type TabsItemProps = BaseTabsItemProps &
+  Class & {
+    id?: InputHTMLAttributes["id"]
+    value?: InputHTMLAttributes["value"]
+  }
+
+export type TabsPanelProps = BaseTabsPanelProps & Class
+
+export type TabsLabelProps = BaseTabsLabelProps &
+  Class & {
+    for?: LabelHTMLAttributes["for"]
+  }
+
+export type Slots = DefaultSlots