opui-css 5.4.2 → 6.0.0-rc.1

package/components/Table/types.astro.ts

@@ -3,14 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 export type Props = Base.Props & HTMLAttributes<"table">
 
-export type SectionProps = Base.SectionProps &
-  (
-    | HTMLAttributes<"tr">
-    | HTMLAttributes<"tbody">
-    | HTMLAttributes<"thead">
-    | HTMLAttributes<"th">
-    | HTMLAttributes<"td">
-    | HTMLAttributes<"colgroup">
-  )
-
-export type ColumnProps = Base.ColumnProps & HTMLAttributes<"col">
+export type TableBodyProps = HTMLAttributes<"tbody">
+
+export type TableCaptionProps = HTMLAttributes<"caption">
+
+export type TableCellProps = Base.TableCellProps & HTMLAttributes<"td">
+
+export type TableColumnGroupProps = HTMLAttributes<"colgroup">
+
+export type TableColumnProps = Base.TableColumnProps & HTMLAttributes<"col">
+
+export type TableFootProps = HTMLAttributes<"tfoot">
+
+export type TableHeaderCellProps = Base.TableCellProps & HTMLAttributes<"th">
+
+export type TableHeadProps = HTMLAttributes<"thead">
+
+export type TableRowProps = HTMLAttributes<"tr">

package/components/Table/types.react.ts

@@ -0,0 +1,22 @@
+import type * as Base from "./types"
+import type { ComponentProps } from "react"
+
+export type Props = Base.Props & ComponentProps<"table">
+
+export type TableBodyProps = ComponentProps<"tbody">
+
+export type TableCaptionProps = ComponentProps<"caption">
+
+export type TableCellProps = Base.TableCellProps & ComponentProps<"td">
+
+export type TableColumnGroupProps = ComponentProps<"colgroup">
+
+export type TableColumnProps = Base.TableColumnProps & ComponentProps<"col">
+
+export type TableFootProps = ComponentProps<"tfoot">
+
+export type TableHeaderCellProps = Base.TableCellProps & ComponentProps<"th">
+
+export type TableHeadProps = ComponentProps<"thead">
+
+export type TableRowProps = ComponentProps<"tr">

package/components/Table/types.svelte.ts

@@ -1,11 +1,23 @@
 import type * as Base from "./types"
 import type { SvelteHTMLElements } from "svelte/elements"
 
-export type ColumnProps = Base.ColumnProps & SvelteHTMLElements["col"]
 export type Props = Base.Props & SvelteHTMLElements["table"]
-export type SectionProps = Base.SectionProps &
-  (
-    | SvelteHTMLElements["tbody"]
-    | SvelteHTMLElements["tfoot"]
-    | SvelteHTMLElements["thead"]
-  )
+
+export type TableBodyProps = SvelteHTMLElements["tbody"]
+
+export type TableCaptionProps = SvelteHTMLElements["caption"]
+
+export type TableCellProps = Base.TableCellProps & SvelteHTMLElements["td"]
+
+export type TableColumnGroupProps = SvelteHTMLElements["colgroup"]
+
+export type TableColumnProps = Base.TableColumnProps & SvelteHTMLElements["col"]
+
+export type TableFootProps = SvelteHTMLElements["tfoot"]
+
+export type TableHeaderCellProps = Base.TableCellProps &
+  SvelteHTMLElements["th"]
+
+export type TableHeadProps = SvelteHTMLElements["thead"]
+
+export type TableRowProps = SvelteHTMLElements["tr"]

package/components/Table/types.ts

@@ -1,9 +1,14 @@
 export type Props = {
-  variant?: "dense" | "spacious"
+  density?: "dense" | "normal" | "spacious"
+  flush?: boolean
+  overflow?: "scroll" | "wrap"
+  stickyHeader?: boolean
 }
 
-export type SectionProps = {}
+export type TableCellProps = {
+  numeric?: boolean
+}
 
-export type ColumnProps = {
+export type TableColumnProps = {
   width?: string
 }

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

@@ -0,0 +1,28 @@
+import type { Class, DefaultSlots } from "../vue"
+import type {
+  Props as BaseProps,
+  TableCellProps as BaseTableCellProps,
+  TableColumnProps as BaseTableColumnProps,
+} from "./types"
+
+export type Props = BaseProps & Class
+
+export type TableBodyProps = Class
+
+export type TableCaptionProps = Class
+
+export type TableCellProps = BaseTableCellProps & Class
+
+export type TableColumnGroupProps = Class
+
+export type TableColumnProps = BaseTableColumnProps & Class
+
+export type TableFootProps = Class
+
+export type TableHeaderCellProps = BaseTableCellProps & Class
+
+export type TableHeadProps = Class
+
+export type TableRowProps = Class
+
+export type Slots = DefaultSlots

package/components/Tabs/Tabs.astro

@@ -1,24 +1,34 @@
 ---
 import type { Props } from "./types.astro"
+import { createId } from "../id"
+import { tabsContext } from "./context.astro"
 
 export const title = "Tabs"
 
-const { $id } = Astro.locals
-const { class: className, name, ...rest } = Astro.props
+const $id = createId(Astro.locals)
+const {
+  class: className,
+  name,
+  overflow,
+  value,
+  variant,
+  ...rest
+} = Astro.props
 
 const groupName = name || $id("tabs")
-
-const originalGroupName = Astro.locals.tabsGroupName
-Astro.locals.tabsGroupName = groupName
-
-const html = await Astro.slots.render("default")
-
-Astro.locals.tabsGroupName = originalGroupName
+const html = await tabsContext.provide({ groupName, value }, () =>
+  Astro.slots.render("default"),
+)
 ---
 
 <div
-  class:list={["ui-tabs", className]}
-  role="tablist"
+  class:list={[
+    "ui-tabs",
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
   {...rest}
-  set:html={html}
-/>
+>
+  <Fragment set:html={html} />
+</div>

package/components/Tabs/Tabs.react.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useId, useState } from "react"
+import { cx } from "../cx"
+import { TabsContext } from "./context.react"
+import type { Props } from "./types.react"
+
+export default function Tabs({
+  className,
+  defaultValue,
+  name,
+  onValueChange,
+  overflow,
+  value,
+  variant,
+  children,
+  ...rest
+}: Props) {
+  const uid = useId()
+  const groupName = name || `tabs-${uid}`
+  const [inner, setInner] = useState(defaultValue)
+
+  const change = (input: HTMLInputElement) => {
+    if (inner !== undefined) setInner(input.value)
+    onValueChange?.(input.value)
+  }
+
+  return (
+    <TabsContext value={{ change, groupName, value: value ?? inner }}>
+      <div
+        className={cx([
+          "ui-tabs",
+          overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+          variant && variant !== "tonal" && `ui-${variant}`,
+          className,
+        ])}
+        {...rest}
+      >
+        {children}
+      </div>
+    </TabsContext>
+  )
+}

package/components/Tabs/Tabs.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { setTabsContext } from "./context.svelte"
+  import type { Props } from "./types.svelte"
+
+  let {
+    class: className,
+    name,
+    overflow,
+    value = $bindable(),
+    variant,
+
+    // Snippets
+    children,
+    ...rest
+  }: Props = $props()
+
+  const uid = $props.id()
+  const groupName = $derived(name || `tabs-${uid}`)
+
+  setTabsContext({
+    change(input) {
+      if (value !== undefined) value = input.value
+    },
+    get groupName() {
+      return groupName
+    },
+    get value() {
+      return value
+    },
+  })
+</script>
+
+<div
+  class={[
+    "ui-tabs",
+    overflow && overflow !== "wrap" && `ui-overflow-${overflow}`,
+    variant && variant !== "tonal" && `ui-${variant}`,
+    className,
+  ]}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/components/Tabs/Tabs.vue

@@ -1,20 +1,30 @@
 <script setup lang="ts">
-import { provide, useId } from "vue"
-import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
+import { computed, provide, reactive, useId } from "vue"
+import { TabsKey } from "./context.vue"
+import type { Props, Slots } from "./types.vue-props"
 
-const { name } = defineProps<Props>()
+const { name, overflow, variant } = defineProps<Props>()
 defineSlots<Slots>()
+const model = defineModel<string>()
 
-defineOptions({
-  inheritAttrs: false,
-})
+const uid = useId()
+const groupName = computed(() => name || `tabs-${uid}`)
+const change = (input: HTMLInputElement) => {
+  if (model.value !== undefined) model.value = input.value
+}
 
-const groupName = name || useId()
-provide(TabsGroupNameKey, groupName)
+provide(TabsKey, reactive({ change, groupName, value: model }))
 </script>
 
 <template>
-  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
+  <div
+    :class="[
+      'ui-tabs',
+      overflow && overflow !== 'wrap' && `ui-overflow-${overflow}`,
+      variant && variant !== 'tonal' && `ui-${variant}`,
+      $props.class,
+    ]"
+  >
     <slot></slot>
   </div>
 </template>

package/components/Tabs/TabsItem.astro

@@ -1,40 +1,28 @@
 ---
 import type { TabsItemProps as Props } from "./types.astro"
+import { createId } from "../id"
+import { isSelected } from "../ToggleGroup/selection"
+import { tabsContext } from "./context.astro"
 
-const { $id } = Astro.locals
-const {
-  class: className,
-  name,
-  open,
-  tabId = $id("tab"),
-  panelId = $id("panel"),
-  ...rest
-} = Astro.props
+const $id = createId(Astro.locals)
+const { checked, class: className, id, name, value, ...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
+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
-  aria-controls={panelId}
-  checked={open}
-  class:list={["ui-tab-input", className]}
+  checked={grouped ?? checked}
+  class:list={["ui-input", className]}
   id={tabId}
-  name={tabsGroupName}
+  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,38 +1,40 @@
 <script setup lang="ts">
-import { inject, provide, useId } from "vue"
-import {
-  CurrentPanelIdKey,
-  CurrentTabIdKey,
-  TabsGroupNameKey,
-  type Slots,
-  type TabsItemProps,
-} from "./types.d.vue"
+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 { name, open, panelId, tabId } = defineProps<TabsItemProps>()
+const { checked = undefined, id, name, value } = defineProps<TabsItemProps>()
 defineSlots<Slots>()
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const tabsGroupName = name || inject(TabsGroupNameKey, undefined) || useId()
-provide(TabsGroupNameKey, tabsGroupName)
+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)
 
-const computedTabId = tabId || useId()
-const computedPanelId = panelId || useId()
-
-provide(CurrentTabIdKey, computedTabId)
-provide(CurrentPanelIdKey, computedPanelId)
+provide(TabsKey, reactive({ groupName, tabId }))
 </script>
 
 <template>
   <input
-    :aria-controls="computedPanelId"
-    :checked="open"
-    :class="['ui-tab-input', $props.class]"
-    :id="computedTabId"
-    :name="tabsGroupName"
+    :checked="grouped ?? checked"
+    :class="['ui-input', $props.class]"
+    :id="tabId"
+    :name="groupName"
     type="radio"
+    :value="value"
+    @change="change"
     v-bind="$attrs"
   />
   <slot></slot>

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
+const { class: className, ...rest } = Astro.props
 ---
 
-<div
-  id={panelId || currentPanelId}
-  class:list={["ui-tab-panel", className]}
-  role="tabpanel"
-  aria-labelledby={tabId || currentTabId}
-  {...rest}
->
+<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>