opui-css 3.3.5 → 4.0.0

package/components/Tabs/TabsItem.astro

@@ -0,0 +1,47 @@
+---
+type Props = {
+  class?: string
+  name?: string
+  open?: boolean
+  tabId?: string
+  panelId?: string
+  [key: string]: any
+}
+
+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={["tab-input", className]}
+  id={tabId}
+  name={tabsGroupName}
+  type="radio"
+  {...rest}
+/>
+<Fragment set:html={html} />

package/components/Tabs/TabsPanel.astro

@@ -0,0 +1,21 @@
+---
+type Props = {
+  class?: string
+  panelId?: string
+  tabId?: string
+  [key: string]: any
+}
+
+const { class: className, panelId, tabId, ...rest } = Astro.props
+const { currentPanelId, currentTabId } = Astro.locals
+---
+
+<div
+  id={panelId || currentPanelId}
+  class:list={["tab-panel", className]}
+  role="tabpanel"
+  aria-labelledby={tabId || currentTabId}
+  {...rest}
+>
+  <slot />
+</div>

package/components/Tabs/TabsTab.astro

@@ -0,0 +1,19 @@
+---
+type Props = {
+  class?: string
+  tabId?: string
+  [key: string]: any
+}
+
+const { class: className, tabId, ...rest } = Astro.props
+const { currentTabId } = Astro.locals
+---
+
+<label
+  for={tabId || currentTabId}
+  class:list={["tab-label", className]}
+  role="tab"
+  {...rest}
+>
+  <slot />
+</label>

package/components/Tabs/index.ts

@@ -0,0 +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

package/components/TextField/TextField.astro

@@ -0,0 +1,128 @@
+---
+type Props = {
+  [key: string]: any
+  autoFit?: boolean
+  class?: string
+  critical?: boolean
+  description?: string
+  disabled?: boolean
+  endText?: string
+  filled?: boolean
+  id?: string
+  label?: string
+  list?: string
+  max?: number | string
+  min?: number | string
+  name?: string
+  placeholder?: string
+  required?: boolean
+  small?: boolean
+  spread?: boolean
+  startText?: string
+  step?: number | string
+  type?:
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "month"
+    | "numeric"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week"
+  value?: string | number
+}
+
+export const title = "Text Field"
+
+const {
+  autoFit,
+  class: className,
+  critical,
+  description,
+  disabled,
+  endText,
+  filled,
+  id,
+  label,
+  list,
+  max,
+  min,
+  name,
+  placeholder,
+  required,
+  small,
+  spread,
+  startText,
+  step,
+  type = "text",
+  value,
+  ...rest
+} = Astro.props
+
+const startTextValue = description || startText
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("text-field")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "text-field",
+    {
+      "auto-fit": autoFit,
+      filled,
+      spread,
+      small,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+  {...rest}
+>
+  {
+    (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="label">{label}<slot name="label" /></span>
+    )
+  }
+  {
+    (startTextValue || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="start-text">{startTextValue}<slot name="description" /></span>
+    )
+  }
+  <span class="field">
+    <input
+      disabled={disabled}
+      id={fieldId}
+      inputmode={type === "numeric" ? "numeric" : undefined}
+      list={list}
+      max={max}
+      min={min}
+      name={fieldName}
+      pattern={type === "numeric" ? "[0-9]*" : undefined}
+      placeholder={placeholder}
+      required={required}
+      step={step}
+      type={type === "numeric" ? "text" : type}
+      value={value}
+    />
+    {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") || Astro.slots.has("supporting-text")) && (
+      <!-- prettier-ignore -->
+      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+    )
+  }
+  <slot />
+</label>

package/components/Textarea/Textarea.astro

@@ -0,0 +1,106 @@
+---
+type Props = {
+  [key: string]: any
+  autoFit?: boolean
+  class?: string
+  cols?: number
+  description?: string
+  disabled?: boolean
+  critical?: boolean
+  filled?: boolean
+  id?: string
+  label?: string
+  maxlength?: number
+  minlength?: number
+  name?: string
+  spread?: boolean
+  placeholder?: string
+  required?: boolean
+  rows?: number
+  small?: boolean
+  endText?: string
+  value?: string
+}
+
+export const title = "Textarea"
+
+const {
+  autoFit,
+  class: className,
+  cols,
+  description,
+  disabled,
+  critical,
+  filled,
+  id,
+  label,
+  maxlength,
+  minlength,
+  name,
+  spread,
+  placeholder,
+  required,
+  rows,
+  small,
+  endText,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentFieldName } = Astro.locals
+const fieldId = id || $id("textarea")
+const fieldName = name || currentFieldName
+---
+
+<label
+  class:list={[
+    "textarea",
+    {
+      "auto-fit": autoFit,
+      filled,
+      spread,
+      small,
+    },
+    className,
+  ]}
+  data-invalid={critical || undefined}
+  {...rest}
+>
+{
+  (label || Astro.slots.has("label")) && (
+      <!-- prettier-ignore -->
+      <span class="label">{label}<slot name="label" /></span>
+    )
+  }
+
+{
+  (description || Astro.slots.has("description")) && (
+      <!-- prettier-ignore -->
+      <span class="start-text">{description}<slot name="description" /></span>
+    )
+  }
+  <span class="field">
+    <textarea
+      cols={cols}
+      disabled={disabled}
+      id={fieldId}
+      maxlength={maxlength}
+      minlength={minlength}
+      name={fieldName}
+      placeholder={placeholder}
+      required={required}
+      rows={rows}
+      value={value}></textarea>
+    {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") || Astro.slots.has("supporting-text")) && (
+      <!-- prettier-ignore -->
+      <span class="end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+    )
+  }
+  <slot />
+</label>

package/components/Toast/Toast.astro

@@ -0,0 +1,42 @@
+---
+export const title = "Toast"
+---
+
+<output aria-live="polite" id="toast-manager" popover="manual" role="status"
+></output>
+
+<template id="toast-template">
+  <div class="toast" role="alert">
+    <span class="icon" data-toast-icon></span>
+    <div class="content">
+      <div class="title" data-toast-title></div>
+      <div class="description" data-toast-description></div>
+    </div>
+    <button
+      aria-label="Close"
+      class="close-button"
+      data-toast-close
+      type="button"
+    >
+      <svg
+        fill="none"
+        height="20"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M18 6 6 18"></path>
+        <path d="m6 6 12 12"></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script>
+  import { initToastManager } from "../../css/js/toast.js"
+  initToastManager()
+</script>

package/components/ToggleButton/ToggleButton.astro

@@ -0,0 +1,53 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  disabled?: boolean
+  label?: string
+  name?: string
+  pressed?: boolean
+  size?: "small" | "x-small"
+  type?: "checkbox" | "radio"
+  value?: string
+}
+
+export const title = "Toggle Button"
+
+const {
+  class: className,
+  disabled,
+  label,
+  name,
+  pressed,
+  size,
+  type,
+  value,
+  ...rest
+} = Astro.props
+
+const { $id, currentToggleGroupName, currentToggleGroupType } = Astro.locals
+const finalName = name || currentToggleGroupName
+const finalType = type || currentToggleGroupType || "checkbox"
+const id = rest.id || $id("toggle")
+---
+
+<label
+  class:list={[
+    "toggle-button",
+    { selected: pressed, disabled },
+    size,
+    className,
+  ]}
+>
+  <input
+    aria-pressed={finalType === "checkbox" ? pressed : undefined}
+    checked={pressed}
+    disabled={disabled}
+    id={id}
+    name={finalName}
+    type={finalType}
+    value={value || label}
+    {...rest}
+  />
+  <slot />
+</label>

package/components/ToggleGroup/ToggleGroup.astro

@@ -0,0 +1,49 @@
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  name?: string
+  orientation?: "vertical"
+  selection?: "single" | "multiple"
+  size?: "default" | "small" | "x-small"
+}
+
+export const title = "Toggle Group"
+
+const {
+  class: className,
+  name,
+  orientation,
+  selection = "multiple",
+  size = "default",
+  ...rest
+} = Astro.props
+
+const { $id } = Astro.locals
+const groupName = name || $id("toggle-group")
+const inputType = selection === "single" ? "radio" : "checkbox"
+
+const originalName = Astro.locals.currentToggleGroupName
+const originalType = Astro.locals.currentToggleGroupType
+
+Astro.locals.currentToggleGroupName = groupName
+Astro.locals.currentToggleGroupType = inputType
+
+const html = await Astro.slots.render("default")
+
+Astro.locals.currentToggleGroupName = originalName
+Astro.locals.currentToggleGroupType = originalType
+---
+
+<div
+  class:list={[
+    "toggle-group",
+    size !== "default" && size,
+    orientation,
+    className,
+  ]}
+  role={selection === "single" ? "radiogroup" : "group"}
+  {...rest}
+>
+  <Fragment set:html={html} />
+</div>

package/components/Tooltip/Tooltip.astro

@@ -0,0 +1,30 @@
+---
+import Anchor from "../Anchor/Anchor.astro"
+
+type Props = {
+  [key: string]: any
+  alignment?: string
+  arrow?: boolean
+  class?: string
+  id?: string
+  label?: string
+}
+
+export const title = "Tooltip"
+
+const { alignment, arrow, class: className, id, label, ...rest } = Astro.props
+---
+
+<Anchor
+  alignment={alignment}
+  class:list={["tooltip", { "with-arrow": arrow }, className]}
+  id={id}
+  trigger="hover"
+  {...rest}
+>
+  <slot />
+  <Fragment slot="anchored">
+    {label}
+    <slot name="content" />
+  </Fragment>
+</Anchor>