opui-css 3.3.4 → 4.0.0

package/components/Progress/Progress.astro

@@ -0,0 +1,40 @@
+---
+type Props = {
+  [key: string]: any
+  "aria-busy"?: "true" | "false" | boolean
+  "aria-describedby"?: string
+  "aria-label"?: string
+  class?: string
+  id?: string
+  max?: number | string
+  value?: number | string
+  variant?: "filled" | "default" | "tonal"
+}
+
+export const title = "Progress"
+
+const {
+  "aria-busy": ariaBusy,
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  class: className,
+  id,
+  max,
+  value,
+  variant,
+  ...rest
+} = Astro.props
+---
+
+<progress
+  aria-busy={ariaBusy}
+  aria-describedby={ariaDescribedby}
+  aria-label={ariaLabel}
+  class:list={["progress", className, variant]}
+  id={id}
+  max={max}
+  value={value}
+  {...rest}
+>
+  <slot />
+</progress>

package/components/Radio/Radio.astro

@@ -0,0 +1,70 @@
+---
+import RadioInput from "./RadioInput.astro"
+
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  hideLabel?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  size?: "small" | "large"
+  stack?: boolean
+  value?: string
+}
+
+export const title = "Radio"
+
+const {
+  checked,
+  class: className,
+  disabled,
+  critical,
+  hideLabel,
+  id,
+  name,
+  required,
+  size,
+  stack,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
+
+const finalName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "radio",
+    size,
+    {
+      stack,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  <RadioInput
+    aria-describedby={endTextId}
+    {checked}
+    {disabled}
+    {id}
+    name={finalName}
+    {required}
+    {value}
+    {...rest}
+  />
+  <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>
+  {
+    Astro.slots.has("end-text") && (
+      <!-- prettier-ignore -->
+      <span id={endTextId} class="end-text"><slot name="end-text" /></span>
+    )
+  }
+</label>

package/components/Radio/RadioInput.astro

@@ -0,0 +1,24 @@
+---
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  value?: string
+}
+
+const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+---
+
+<input
+  type="radio"
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>

package/components/Range/Range.astro

@@ -0,0 +1,136 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  endText?: string
+  id?: string
+  label?: string
+  max?: number | string
+  min?: number | string
+  name?: string
+  spread?: boolean
+  startText?: string
+  step?: number | string
+  value?: number | string
+  valueSuffix?: string
+  variant?: "filled" | "default" | "tonal"
+} & (
+  | { list?: never; options?: never }
+  | {
+      list: string
+      options: (string | number | { value: string | number; label?: string })[]
+    }
+)
+
+export const title = "Range"
+
+const {
+  class: className,
+  disabled,
+  endText,
+  id,
+  label,
+  list,
+  max,
+  min,
+  name,
+  options,
+  spread,
+  startText,
+  step,
+  value,
+  valueSuffix,
+  variant,
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+
+const hasLabel = !!label || Astro.slots.has("default")
+const hasStartText = !!startText || Astro.slots.has("start-text")
+const hasEndText = !!endText || Astro.slots.has("end-text")
+const hasValue = valueSuffix !== undefined || Astro.slots.has("value")
+
+const inputId = id || $id("range")
+const labelId = hasLabel ? $id("range-label") : undefined
+const startTextId = hasStartText ? $id("range-start") : undefined
+const endTextId = hasEndText ? $id("range-end") : undefined
+
+const describedBy = [startTextId, endTextId].filter(Boolean).join(" ") || undefined
+---
+
+<label class:list={["range", variant, { spread }, className]}>
+  {
+    hasLabel && (
+      <!-- prettier-ignore -->
+      <span class="label" id={labelId}>{label}<slot /></span>
+    )
+  }
+  {
+    hasValue && (
+      <output class="value" for={inputId} data-suffix={valueSuffix}>
+        <slot name="value">{value}</slot>
+      </output>
+    )
+  }
+  {
+    hasStartText && (
+      <span class="start-text" id={startTextId}>
+        {startText}<slot name="start-text" />
+      </span>
+    )
+  }
+  <input
+    aria-describedby={describedBy}
+    aria-labelledby={labelId}
+    disabled={disabled}
+    id={inputId}
+    list={list}
+    max={max}
+    min={min}
+    name={name}
+    step={step}
+    type="range"
+    value={value}
+    {...rest}
+  />
+  {
+    (options || Astro.slots.has("datalist")) && (
+      <datalist id={list}>
+        {options?.map((option) =>
+          typeof option === "object" ? (
+            <option value={option.value} label={option.label} />
+          ) : (
+            <option value={option} />
+          )
+        )}
+        <slot name="datalist" />
+      </datalist>
+    )
+  }
+  {
+    hasEndText && (
+      <span class="end-text" id={endTextId}>
+        {endText}<slot name="end-text" />
+      </span>
+    )
+  }
+</label>
+
+<script>
+  // Mirror the slider's current value into its associated <output> on every
+  // input event. Idempotent: each .range is wired once, and ignores ranges
+  // without a value display.
+  for (const range of document.querySelectorAll<HTMLElement>(".range")) {
+    const input = range.querySelector<HTMLInputElement>('input[type="range"]')
+    const output = range.querySelector<HTMLOutputElement>(":scope > output.value")
+    if (!input || !output) continue
+    const suffix = output.dataset.suffix ?? ""
+    const update = () => {
+      output.textContent = `${input.value}${suffix}`
+    }
+    input.addEventListener("input", update)
+    update()
+  }
+</script>

package/components/Select/Select.astro

@@ -0,0 +1,106 @@
+---
+type Item = {
+  text: string
+  value: any
+}
+
+type Props = {
+  [key: string]: any
+  class?: string
+  description?: string
+  disabled?: boolean
+  critical?: boolean
+  dense?: boolean
+  id?: string
+  items?: Item[]
+  label?: string
+  name?: string
+  spread?: boolean
+  required?: boolean
+  size?: "small"
+  endText?: string
+  value?: any
+  variant?: "outlined" | "filled"
+}
+
+export const title = "Select"
+
+const {
+  class: className,
+  description,
+  disabled,
+  critical,
+  dense,
+  id,
+  items = [],
+  label,
+  name,
+  spread,
+  required,
+  size,
+  endText,
+  value,
+  variant = "outlined",
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const selectId = id || $id("select")
+const fieldName = name || currentFieldName
+const labelId = $id("select-label")
+---
+
+<label
+  class:list={[
+    "select",
+    size,
+    {
+      filled: variant === "filled",
+      spread,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="label" id={labelId}>{label}<slot name="label" /></span>
+    )
+  }
+  {
+    (description || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="start-text">{description}<slot name="description" /></span>
+    )
+  }
+  <span class="field">
+    <select
+      aria-labelledby={label ? labelId : undefined}
+      disabled={disabled}
+      id={selectId}
+      name={fieldName}
+      required={required}
+      value={value}
+      {...rest}
+    >
+      <button>
+        <selectedcontent></selectedcontent>
+      </button>
+      <div class:list={["list", { dense }]}>
+        {items.map((item) => <option value={item.value}>{item.text}</option>)}
+        <slot />
+      </div>
+    </select>
+    {Astro.slots.has("prefix") && <span class="prefix"><slot name="prefix" /></span>}
+    {Astro.slots.has("suffix") && <span class="suffix"><slot name="suffix" /></span>}
+    {Astro.slots.has("header") && <span class="header"><slot name="header" /></span>}
+    {Astro.slots.has("footer") && <span class="footer"><slot name="footer" /></span>}
+  </span>
+  {
+    (endText || Astro.slots.has("end-text")) && (
+      <!-- prettier-ignore -->
+      <span id={$id("end-text")} class="end-text">{endText}<slot name="end-text" /></span>
+    )
+  }
+</label>

package/components/Switch/Switch.astro

@@ -0,0 +1,101 @@
+---
+import SwitchInput from "./SwitchInput.astro"
+
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  class?: string
+  disabled?: boolean
+  critical?: boolean
+  hideLabel?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  small?: boolean
+  spread?: boolean
+  stack?: boolean
+  value?: string
+}
+
+export const title = "Switch"
+
+const {
+  checked,
+  class: className,
+  disabled,
+  critical,
+  hideLabel,
+  id,
+  name,
+  required,
+  small,
+  spread,
+  stack,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const endTextId = Astro.slots.has("end-text") ? $id("end-text") : undefined
+
+const finalName = name || currentFieldName
+
+if (
+  import.meta.env.DEV &&
+  !Astro.slots.has("default") &&
+  !Astro.props["aria-label"] &&
+  !Astro.props["aria-labelledby"]
+) {
+  console.warn(
+    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`."
+  )
+}
+---
+
+<label
+  class:list={[
+    "switch",
+    {
+      small,
+      stack,
+      spread,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+>
+  {
+    Astro.slots.has("icon-unchecked") && (
+      <span class="icon-unchecked" aria-hidden="true">
+        <slot name="icon-unchecked" />
+      </span>
+    )
+  }
+  {
+    Astro.slots.has("icon-checked") && (
+      <span class="icon-checked" aria-hidden="true">
+        <slot name="icon-checked" />
+      </span>
+    )
+  }
+  <SwitchInput
+    aria-describedby={endTextId}
+    {checked}
+    {disabled}
+    {id}
+    name={finalName}
+    {required}
+    {value}
+    {...rest}
+  />
+  {
+    Astro.slots.has("default") && (
+    <!-- prettier-ignore --><span class:list={[hideLabel ? "sr-only" : "label"]}><slot /></span>)
+  }
+    {
+      Astro.slots.has("end-text") && (
+        <!-- prettier-ignore -->
+        <span id={endTextId} class="end-text"><slot name="end-text" /></span>
+      )
+    }
+</label>

package/components/Switch/SwitchInput.astro

@@ -0,0 +1,25 @@
+---
+type Props = {
+  [key: string]: any
+  checked?: boolean
+  disabled?: boolean
+  id?: string
+  name?: string
+  required?: boolean
+  value?: string
+}
+
+const { checked, disabled, id, name, required, value, ...rest } = Astro.props
+---
+
+<input
+  type="checkbox"
+  role="switch"
+  {checked}
+  {disabled}
+  {id}
+  {name}
+  {required}
+  {value}
+  {...rest}
+/>

package/components/Table/Body.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Body"
+
+const { ...rest } = Astro.props
+---
+
+<tbody {...rest}>
+  <slot />
+</tbody>

package/components/Table/Cell.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Cell"
+
+const { ...rest } = Astro.props
+---
+
+<td {...rest}>
+  <slot />
+</td>

package/components/Table/Column.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  [key: string]: any
+  width?: string
+}
+
+export const title = "Table Column"
+
+const { width, ...rest } = Astro.props
+---
+
+<col
+  style={width ? (width.includes(":") ? width : `width: ${width}`) : undefined}
+  {...rest}
+/>

package/components/Table/ColumnGroup.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Column Group"
+
+const { ...rest } = Astro.props
+---
+
+<colgroup {...rest}>
+  <slot />
+</colgroup>

package/components/Table/Head.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Head"
+
+const { ...rest } = Astro.props
+---
+
+<thead {...rest}>
+  <slot />
+</thead>

package/components/Table/HeaderCell.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Header Cell"
+
+const { ...rest } = Astro.props
+---
+
+<th {...rest}>
+  <slot />
+</th>

package/components/Table/Row.astro

@@ -0,0 +1,13 @@
+---
+type Props = {
+  [key: string]: any
+}
+
+export const title = "Table Row"
+
+const { ...rest } = Astro.props
+---
+
+<tr {...rest}>
+  <slot />
+</tr>

package/components/Table/Table.astro

@@ -0,0 +1,15 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  variant?: "dense" | "spacious"
+}
+
+export const title = "Table"
+
+const { class: className, variant, ...rest } = Astro.props
+---
+
+<table class:list={[className, variant]} {...rest}>
+  <slot />
+</table>

package/components/Table/index.ts

@@ -0,0 +1,20 @@
+import Table from "./Table.astro"
+import Head from "./Head.astro"
+import Body from "./Body.astro"
+import Row from "./Row.astro"
+import HeaderCell from "./HeaderCell.astro"
+import Cell from "./Cell.astro"
+import Column from "./Column.astro"
+import ColumnGroup from "./ColumnGroup.astro"
+
+export { Head, Body, Row, HeaderCell, Cell, Column, ColumnGroup }
+
+export default Object.assign(Table, {
+  Head,
+  Body,
+  Row,
+  HeaderCell,
+  Cell,
+  Column,
+  ColumnGroup,
+})

package/components/Tabs/Tabs.astro

@@ -0,0 +1,28 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  name?: string
+}
+
+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={["tabs", className]}
+  role="tablist"
+  {...rest}
+  set:html={html}
+/>