opui-css 5.4.1 → 5.4.3

package/components/Tabs/Tabs.astro

@@ -1,24 +1,24 @@
----
-import type { Props } from "./types.astro"
-
-export const title = "Tabs"
-
-const { $id } = Astro.locals
-const { class: className, name, ...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
----
-
-<div
-  class:list={["ui-tabs", className]}
-  role="tablist"
-  {...rest}
-  set:html={html}
-/>
+---
+import type { Props } from "./types.astro"
+
+export const title = "Tabs"
+
+const { $id } = Astro.locals
+const { class: className, name, ...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
+---
+
+<div
+  class:list={["ui-tabs", className]}
+  role="tablist"
+  {...rest}
+  set:html={html}
+/>

package/components/Tabs/Tabs.vue

@@ -1,20 +1,20 @@
-<script setup lang="ts">
-import { provide, useId } from "vue"
-import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
-
-const { name } = defineProps<Props>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const groupName = name || useId()
-provide(TabsGroupNameKey, groupName)
-</script>
-
-<template>
-  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
-    <slot></slot>
-  </div>
-</template>
+<script setup lang="ts">
+import { provide, useId } from "vue"
+import { TabsGroupNameKey, type Props, type Slots } from "./types.d.vue"
+
+const { name } = defineProps<Props>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const groupName = name || useId()
+provide(TabsGroupNameKey, groupName)
+</script>
+
+<template>
+  <div :class="['ui-tabs', $props.class]" role="tablist" v-bind="$attrs">
+    <slot></slot>
+  </div>
+</template>

package/components/Tabs/TabsItem.astro

@@ -1,40 +1,40 @@
----
-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"
+
+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} />

package/components/Tabs/TabsItem.vue

@@ -1,39 +1,39 @@
-<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 { 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>

package/components/Tabs/TabsPanel.astro

@@ -1,16 +1,16 @@
----
-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, 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>

package/components/Tabs/TabsPanel.vue

@@ -1,31 +1,31 @@
-<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 { 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>

package/components/Tabs/TabsTab.astro

@@ -1,15 +1,15 @@
----
-import type { TabsTabProps as Props } from "./types.astro"
-
-const { class: className, tabId, ...rest } = Astro.props
-const { currentTabId } = Astro.locals
----
-
-<label
-  for={tabId || currentTabId}
-  class:list={["ui-tab-label", className]}
-  role="tab"
-  {...rest}
->
-  <slot />
-</label>
+---
+import type { TabsTabProps as Props } from "./types.astro"
+
+const { class: className, tabId, ...rest } = Astro.props
+const { currentTabId } = Astro.locals
+---
+
+<label
+  for={tabId || currentTabId}
+  class:list={["ui-tab-label", className]}
+  role="tab"
+  {...rest}
+>
+  <slot />
+</label>

package/components/Tabs/TabsTab.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-import { inject } from "vue"
-import { CurrentTabIdKey, type Slots, type TabsTabProps } from "./types.d.vue"
-
-const { tabId } = defineProps<TabsTabProps>()
-defineSlots<Slots>()
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const currentTabId = inject(CurrentTabIdKey, undefined)
-</script>
-
-<template>
-  <label
-    :for="tabId || currentTabId"
-    :class="['ui-tab-label', $props.class]"
-    role="tab"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </label>
-</template>
+<script setup lang="ts">
+import { inject } from "vue"
+import { CurrentTabIdKey, type Slots, type TabsTabProps } from "./types.d.vue"
+
+const { tabId } = defineProps<TabsTabProps>()
+defineSlots<Slots>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const currentTabId = inject(CurrentTabIdKey, undefined)
+</script>
+
+<template>
+  <label
+    :for="tabId || currentTabId"
+    :class="['ui-tab-label', $props.class]"
+    role="tab"
+    v-bind="$attrs"
+  >
+    <slot></slot>
+  </label>
+</template>

package/components/Tabs/index.ts

@@ -1,14 +1,14 @@
-import TabsOrig from "./Tabs.astro"
-import TabsItem from "./TabsItem.astro"
-import TabsTab from "./TabsTab.astro"
-import TabsPanel from "./TabsPanel.astro"
-
-export { TabsItem, TabsTab as Tab, TabsPanel as Panel }
-
-const Tabs = Object.assign(TabsOrig, {
-  Item: TabsItem,
-  Tab: TabsTab,
-  Panel: TabsPanel,
-})
-
-export default Tabs as any
+import TabsOrig from "./Tabs.astro"
+import TabsItem from "./TabsItem.astro"
+import TabsTab from "./TabsTab.astro"
+import TabsPanel from "./TabsPanel.astro"
+
+export { TabsItem, TabsTab as Tab, TabsPanel as Panel }
+
+const Tabs = Object.assign(TabsOrig, {
+  Item: TabsItem,
+  Tab: TabsTab,
+  Panel: TabsPanel,
+})
+
+export default Tabs as any

package/components/Tabs/types.astro.ts

@@ -1,11 +1,11 @@
-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 & 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">

package/components/Tabs/types.d.vue.ts

@@ -1,31 +1,31 @@
-import type { HTMLAttributes, InjectionKey, Slot } from "vue"
-import type {
-  Props as BaseProps,
-  TabsItemProps as BaseTabsItemProps,
-  TabsPanelProps as BaseTabsPanelProps,
-  TabsTabProps as BaseTabsTabProps,
-} from "./types"
-
-export type Props = BaseProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type TabsItemProps = BaseTabsItemProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type TabsPanelProps = BaseTabsPanelProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type TabsTabProps = BaseTabsTabProps & {
-  class?: HTMLAttributes["class"]
-}
-
-export type Slots = {
-  default?: Slot
-}
-
-export const TabsGroupNameKey = Symbol() as InjectionKey<string>
-export const CurrentTabIdKey = Symbol() as InjectionKey<string>
-export const CurrentPanelIdKey = Symbol() as InjectionKey<string>
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type {
+  Props as BaseProps,
+  TabsItemProps as BaseTabsItemProps,
+  TabsPanelProps as BaseTabsPanelProps,
+  TabsTabProps as BaseTabsTabProps,
+} from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsItemProps = BaseTabsItemProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsPanelProps = BaseTabsPanelProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsTabProps = BaseTabsTabProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const TabsGroupNameKey = Symbol() as InjectionKey<string>
+export const CurrentTabIdKey = Symbol() as InjectionKey<string>
+export const CurrentPanelIdKey = Symbol() as InjectionKey<string>

package/components/Tabs/types.solid.ts

@@ -1,12 +1,12 @@
-import type * as Base from "./types"
-import type { JSX } from "solid-js"
-
-export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
-export type TabsItemProps = Base.TabsItemProps &
-  JSX.InputHTMLAttributes<HTMLInputElement>
-export type TabsTabProps = Base.TabsTabProps &
-  Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & {
-    for?: string
-  }
-export type TabsPanelProps = Base.TabsPanelProps &
-  JSX.HTMLAttributes<HTMLDivElement>
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
+export type TabsItemProps = Base.TabsItemProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+export type TabsTabProps = Base.TabsTabProps &
+  Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & {
+    for?: string
+  }
+export type TabsPanelProps = Base.TabsPanelProps &
+  JSX.HTMLAttributes<HTMLDivElement>

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 & 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
+  }

package/components/Tabs/types.ts

@@ -1,19 +1,19 @@
-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
+}
+
+export type TabsItemProps = {
+  name?: string
+  open?: boolean
+  panelId?: string
+  tabId?: string
+}
+
+export type TabsTabProps = {
+  tabId?: string
+}
+
+export type TabsPanelProps = {
+  panelId?: string
+  tabId?: string
+}