opui-css 5.4.3 → 6.0.0-rc.1

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.astro.ts

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

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> &
-  Omit<SvelteHTMLElements["div"], "size">
-
-export type { ToggleContext } from "./types"
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props &
+  Base.Selection<{ value?: string }, { value?: string[] }> &
+  Omit<SvelteHTMLElements["div"], "size">

package/components/ToggleGroup/types.ts

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

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

package/components/Tooltip/Tooltip.vue

@@ -1,22 +1,21 @@
-<script setup lang="ts">
-import Anchor from "../Anchor/Anchor.vue"
-import type { Props, Slots } from "./types.d.vue"
-
-const { alignment, arrow, id, label } = defineProps<Props>()
-defineSlots<Slots>()
-</script>
-
-<template>
-  <Anchor
-    :alignment="alignment"
-    :class="['ui-tooltip', { 'ui-with-arrow': arrow }, $props.class]"
-    :id="id"
-    trigger="hover"
-  >
-    <slot></slot>
-    <template #anchored>
-      {{ label }}
-      <slot name="content"></slot>
-    </template>
-  </Anchor>
-</template>
+<script setup lang="ts">
+import Anchor from "../Anchor/Anchor.vue"
+import { warnMissingId } from "../dev"
+import type { Props, Slots } from "./types.vue-props"
+
+const { arrow, id, positionArea } = defineProps<Props>()
+defineSlots<Slots>()
+
+warnMissingId("Tooltip", id, "interestfor")
+</script>
+
+<template>
+  <Anchor
+    :class="['ui-tooltip', { 'ui-arrow': arrow }, $props.class]"
+    :id="id"
+    :positionArea="positionArea"
+    trigger="hover"
+  >
+    <slot></slot>
+  </Anchor>
+</template>

package/components/Tooltip/types.astro.ts

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

package/components/Tooltip/types.react.ts

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

package/components/Tooltip/types.svelte.ts

@@ -1,7 +1,4 @@
-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 & Snippets & SvelteHTMLElements["span"]
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["span"]

package/components/Tooltip/types.ts

@@ -1,11 +1,5 @@
-export type Props = {
-  [key: string]: any
-  alignment?: string
-  arrow?: boolean
-  id?: string
-  label?: string
-}
-
-export type Slots<S> = {
-  content?: S
-}
+export type Props = {
+  arrow?: boolean
+  id: string
+  positionArea?: string
+}

package/components/Tooltip/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/content.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte"
+
+  export { content }
+</script>
+
+{#snippet content(
+  part: string | Snippet,
+)}{#if typeof part === "string"}{part}{:else}{@render part()}{/if}{/snippet}

package/components/context.astro.ts

@@ -0,0 +1,15 @@
+import { AsyncLocalStorage } from "node:async_hooks"
+
+const storage = new AsyncLocalStorage<Map<symbol, unknown>>()
+
+export const createContext = <T>() => {
+  const key = Symbol()
+  return {
+    get: () => storage.getStore()?.get(key) as T | undefined,
+    provide: (value: T, render: () => Promise<string>) => {
+      const store = new Map(storage.getStore())
+      store.set(key, value)
+      return storage.run(store, render)
+    },
+  }
+}

package/components/cx.ts

@@ -0,0 +1,12 @@
+type ClassValue =
+  ClassValue[] | Record<string, unknown> | string | false | null | undefined
+
+const flatten = (value: ClassValue): string[] => {
+  if (!value) return []
+  if (typeof value === "string") return [value]
+  if (Array.isArray(value)) return value.flatMap(flatten)
+  return Object.keys(value).filter((key) => value[key])
+}
+
+export const cx = (values: ClassValue[]) =>
+  flatten(values).join(" ") || undefined

package/components/dev.ts

@@ -0,0 +1,63 @@
+declare const process: { env: { NODE_ENV?: string } }
+
+const DEV =
+  (import.meta as { env?: { DEV?: boolean } }).env?.DEV ??
+  (typeof process !== "undefined" && process.env.NODE_ENV !== "production")
+
+export const hasName = (
+  props: {
+    "aria-label"?: unknown
+    "aria-labelledby"?: unknown
+    label?: unknown
+  },
+  slot: unknown,
+) =>
+  Boolean(
+    props.label || slot || props["aria-label"] || props["aria-labelledby"],
+  )
+
+export const warnGroupedChecked = (
+  component: string,
+  grouped: unknown,
+  checked: unknown,
+  group = "ToggleGroup",
+) => {
+  if (DEV && grouped !== undefined && checked !== undefined) {
+    console.warn(
+      `[OPUI ${component}] \`checked\` is ignored inside a ${group} that has a \`value\`. Set the group's \`value\` instead.`,
+    )
+  }
+}
+
+export const warnMissingId = (
+  component: string,
+  id: unknown,
+  attribute = "commandfor",
+) => {
+  if (DEV && !id) {
+    console.warn(
+      `[OPUI ${component}] Missing \`id\`. Pass one and point the trigger at it with \`${attribute}\`.`,
+    )
+  }
+}
+
+export const warnReplacedId = (
+  component: string,
+  root: string,
+  id: unknown,
+  generatedId: unknown,
+) => {
+  if (DEV && id && generatedId) {
+    console.warn(
+      `[OPUI ${component}] \`id\` is replaced by the ${root.toLowerCase()}'s generated id; pass \`aria-labelledby\` on the ${root} to keep it.`,
+    )
+  }
+}
+
+export const warnUnnamed = (component: string, named: unknown) => {
+  if (DEV && !named) {
+    console.warn(
+      `[OPUI ${component}] Missing accessible name. Provide a default slot, and set \`hideLabel\` to hide it visually.`,
+    )
+  }
+}

package/components/group.ts

@@ -0,0 +1,2 @@
+export const toggleInGroup = <T>(group: T[], value: T, on: boolean) =>
+  on ? [...group, value] : group.filter((item) => item !== value)

package/components/id.ts

@@ -0,0 +1,9 @@
+export const createId = (locals: { $id?: (prefix: string) => string }) =>
+  locals.$id ??
+  ((prefix: string) => `${prefix}-${crypto.randomUUID().slice(0, 8)}`)
+
+export const autoLabelledBy = (attrs: Record<string, unknown>, id: string) =>
+  attrs["aria-label"] || attrs["aria-labelledby"] ? undefined : id
+
+export const idRefs = (...ids: (string | false | null | undefined)[]) =>
+  ids.filter(Boolean).join(" ") || undefined

package/components/style.ts

@@ -0,0 +1,33 @@
+type Vars = Record<string, number | string | undefined>
+
+const definedVars = (vars: Vars) =>
+  Object.entries(vars).filter(
+    ([, value]) => value !== undefined && value !== "",
+  )
+
+export const styleVars = (vars: Vars) =>
+  definedVars(vars)
+    .map(([name, value]) => `${name}: ${value};`)
+    .join(" ")
+
+export function mergeStyle(
+  vars: Vars,
+  style?: string | null,
+): string | undefined
+export function mergeStyle<S extends object>(
+  vars: Vars,
+  style: S,
+): S | undefined
+export function mergeStyle(
+  vars: Vars,
+  style?: object | string | null,
+): Record<string, unknown> | string | undefined
+export function mergeStyle(vars: Vars, style?: object | string | null) {
+  if (typeof style === "object" && style !== null) {
+    const entries = definedVars(vars)
+    return entries.length || Object.keys(style).length
+      ? { ...Object.fromEntries(entries), ...style }
+      : undefined
+  }
+  return [styleVars(vars), style].filter(Boolean).join(" ") || undefined
+}

package/components/tag.ts

@@ -0,0 +1,6 @@
+export const tagAttrs = (tag: string, disabled?: boolean, href?: string) => ({
+  "aria-disabled": tag === "a" && disabled ? ("true" as const) : undefined,
+  disabled: tag === "button" ? disabled : undefined,
+  href: tag === "a" && !disabled ? href : undefined,
+  type: tag === "button" ? ("button" as const) : undefined,
+})

package/components/vue.ts

@@ -0,0 +1,18 @@
+import { computed, type HTMLAttributes, type Slot, useAttrs } from "vue"
+
+export type Class = {
+  class?: HTMLAttributes["class"]
+}
+
+export type DefaultSlots = {
+  default?: Slot
+}
+
+export const useInputAttrs = () => {
+  const attrs = useAttrs()
+  return computed(() =>
+    Object.fromEntries(
+      Object.entries(attrs).filter(([key]) => key !== "style"),
+    ),
+  )
+}