opui-css 5.1.2 → 5.3.0

package/components/Button/types.astro.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & HTMLAttributes<"button">)
+  | (Base.Props & { as?: "a" } & HTMLAttributes<"a">)

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/Button/types.solid.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  (
+    | ({ as?: "button" } & JSX.ButtonHTMLAttributes<HTMLButtonElement>)
+    | ({ as?: "a" } & JSX.AnchorHTMLAttributes<HTMLAnchorElement>)
+  )

package/components/Button/types.svelte.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props =
+  | (Base.Props & { as?: "button" } & SvelteHTMLElements["button"])
+  | (Base.Props & { as?: "a" } & SvelteHTMLElements["a"])

package/components/Button/types.ts

@@ -0,0 +1,16 @@
+export type Props = {
+  color?: "critical" | "primary"
+  size?: "x-small" | "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+} & (
+  | {
+      as?: "a"
+      href: string
+      disabled?: never
+    }
+  | {
+      as?: "button"
+      href?: never
+      disabled?: boolean
+    }
+)

package/components/ButtonGroup/ButtonGroup.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  color?: "critical" | "primary"
-  orientation?: "vertical"
-  size?: "small" | "large"
-  variant?: "outlined" | "tonal" | "filled"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Button Group"
 

package/components/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const props = defineProps<Props>()
+defineSlots<Slots>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'ui-button-group',
+      props.color && `ui-${props.color}`,
+      props.size && `ui-${props.size}`,
+      props.variant && `ui-${props.variant}`,
+      props.orientation && `ui-${props.orientation}`,
+      props.class,
+    ]"
+    role="group"
+  >
+    <slot></slot>
+  </div>
+</template>

package/components/ButtonGroup/types.astro.ts

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

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}

package/components/ButtonGroup/types.solid.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>

package/components/ButtonGroup/types.svelte.ts

@@ -0,0 +1,4 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["div"]

package/components/ButtonGroup/types.ts

@@ -0,0 +1,7 @@
+export type Props = {
+  [key: string]: any
+  color?: "critical" | "primary"
+  orientation?: "vertical"
+  size?: "small" | "large"
+  variant?: "outlined" | "tonal" | "filled"
+}

package/components/Callout/Callout.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  severity?: "critical" | "info" | "neutral" | "success" | "warning"
-  variant?: "tonal" | "outlined"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Callout"
 
@@ -13,7 +8,12 @@ const { class: className, severity, variant, ...rest } = Astro.props
 
 <article
   role="note"
-  class:list={["ui-callout", variant && `ui-${variant}`, severity && `ui-${severity}`, className]}
+  class:list={[
+    "ui-callout",
+    variant && `ui-${variant}`,
+    severity && `ui-${severity}`,
+    className,
+  ]}
   {...rest}
 >
   <slot name="icon">
@@ -66,8 +66,9 @@ const { class: className, severity, variant, ...rest } = Astro.props
   <div class="ui-content">
     {
       Astro.slots.has("title") && (
-        <!-- prettier-ignore -->
-        <h3 class="ui-title"><slot name="title" /></h3>
+        <h3 class="ui-title">
+          <slot name="title" />
+        </h3>
       )
     }
     <slot />

package/components/Callout/Callout.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Props, Slots } from "./types.d.vue"
+
+const { severity, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <article
+    role="note"
+    :class="[
+      'ui-callout',
+      variant && `ui-${variant}`,
+      severity && `ui-${severity}`,
+      $props.class,
+    ]"
+  >
+    <slot name="icon">
+      <svg
+        v-if="severity === 'info'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M16 13a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0v-9a1 1 0 0 1 1-1m0-2a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12s12-5.373 12-12S22.627 4 16 4"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'warning'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+      >
+        <path
+          fill="currentColor"
+          d="M17.25 22a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M16 9a1 1 0 0 0-1 1v8a1 1 0 1 0 2 0v-8a1 1 0 0 0-1-1m-3.064-5.191c1.332-2.41 4.796-2.41 6.128 0l10.493 18.999C30.846 25.14 29.158 28 26.494 28H5.507c-2.665 0-4.352-2.86-3.064-5.192zm4.377.967a1.5 1.5 0 0 0-2.626 0L4.194 23.775A1.5 1.5 0 0 0 5.507 26h20.987a1.5 1.5 0 0 0 1.313-2.225z"
+        />
+      </svg>
+      <svg
+        v-if="severity === 'critical'"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 48 48"
+      >
+        <path
+          fill="currentColor"
+          d="M24 13c.69 0 1.25.56 1.25 1.25v12.5a1.25 1.25 0 1 1-2.5 0v-12.5c0-.69.56-1.25 1.25-1.25m0 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4M4 24C4 12.954 12.954 4 24 4s20 8.954 20 20s-8.954 20-20 20S4 35.046 4 24M24 6.5C14.335 6.5 6.5 14.335 6.5 24S14.335 41.5 24 41.5S41.5 33.665 41.5 24S33.665 6.5 24 6.5"
+        />
+      </svg>
+    </slot>
+    <div class="ui-content">
+      <h3 v-if="slots.title" class="ui-title">
+        <slot name="title"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </article>
+</template>

package/components/Callout/types.astro.ts

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

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = BaseSlots<Slot> & {
+  default?: Slot
+}

package/components/Callout/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.HTMLAttributes<HTMLElement>

package/components/Callout/types.svelte.ts

@@ -0,0 +1,7 @@
+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["article"]

package/components/Callout/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  [key: string]: any
+  severity?: "critical" | "info" | "neutral" | "success" | "warning"
+  variant?: "tonal" | "outlined"
+}
+
+export type Slots<S> = {
+  icon?: S
+  title?: S
+}

package/components/Card/Card.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  actionsAlign?: "start" | "end"
-  variant?: "text" | "outlined" | "elevated" | "tonal"
-  [key: string]: any
-}
+import type { Props } from "./types.astro"
 
 export const title = "Card"
 

package/components/Card/Card.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useSlots } from "vue"
+import type { Props, Slots } from "./types.d.vue"
+
+const { actionsAlign, variant } = defineProps<Props>()
+const slots = defineSlots<Slots>()
+</script>
+
+<template>
+  <div :class="['ui-card', variant && `ui-${variant}`, $props.class]">
+    <hgroup v-if="slots.header">
+      <slot name="header"></slot>
+    </hgroup>
+
+    <div v-if="slots.content" class="ui-content">
+      <slot name="content"></slot>
+    </div>
+
+    <slot></slot>
+
+    <div
+      v-if="slots.actions"
+      :class="['ui-actions', actionsAlign && `ui-align-${actionsAlign}`]"
+    >
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>

package/components/Card/types.astro.ts

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

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { Props as BaseProps, Slots as BaseSlots } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = BaseSlots<Slot> & {
+  default?: Slot
+}

package/components/Card/types.solid.ts

@@ -0,0 +1,6 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Partial<Base.Slots<JSX.Element>> &
+  JSX.HTMLAttributes<HTMLDivElement>

package/components/Card/types.svelte.ts

@@ -0,0 +1,7 @@
+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["div"]

package/components/Card/types.ts

@@ -0,0 +1,11 @@
+export type Props = {
+  actionsAlign?: "start" | "end"
+  variant?: "text" | "outlined" | "elevated" | "tonal"
+}
+
+export type Slots<S> = {
+  actions?: S
+  children?: S
+  content?: S
+  header?: S
+}

package/components/Checkbox/Checkbox.astro

@@ -1,39 +1,18 @@
 ---
+import type { CheckboxProps as Props } from "./types.astro"
 import CheckboxInput from "./CheckboxInput.astro"
 
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  error?: boolean
-  disabled?: boolean
-  hideLabel?: boolean
-  id?: string
-  indeterminate?: boolean
-  name?: string
-  required?: boolean
-  size?: "small" | "large"
-  spread?: boolean
-  stack?: boolean
-  value?: string
-}
-
 export const title = "Checkbox"
 
 const {
-  checked,
   class: className,
   error,
   disabled,
   hideLabel,
-  id,
-  indeterminate,
   name,
-  required,
   size,
   spread,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -55,22 +34,13 @@ const finalName = name || currentFieldName
   ]}
   data-invalid={error || undefined}
 >
-  <CheckboxInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    {indeterminate}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
-  <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
+  <CheckboxInput aria-describedby={endTextId} name={finalName} {...rest} />
+  <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>
   {
     Astro.slots.has("end-text") && (
-      <!-- prettier-ignore -->
-      <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
     )
   }
 </label>

package/components/Checkbox/Checkbox.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import CheckboxInput from "./CheckboxInput.vue"
+import type { CheckboxProps, Slots } from "./types.d.vue"
+import { useId } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<CheckboxProps>()
+defineSlots<Slots>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const endTextId = useId()
+</script>
+
+<template>
+  <label
+    :class="[
+      'ui-checkbox',
+      props.size && `ui-${props.size}`,
+      {
+        'ui-stack': props.stack,
+        'ui-spread': props.spread,
+      },
+      props.class,
+    ]"
+    :data-invalid="props.error || undefined"
+  >
+    <CheckboxInput
+      v-bind="$attrs"
+      v-model="modelValue"
+      :aria-describedby="$slots['end-text'] ? endTextId : undefined"
+      :indeterminate="props.indeterminate"
+    />
+    <span :class="[props.hideLabel ? 'ui-sr-only' : 'ui-label']"
+      ><slot></slot
+    ></span>
+    <span :id="endTextId" class="ui-end-text" v-if="$slots['end-text']">
+      <slot name="end-text"></slot>
+    </span>
+  </label>
+</template>

package/components/Checkbox/CheckboxInput.astro

@@ -1,28 +1,12 @@
 ---
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  disabled?: boolean
-  id?: string
-  indeterminate?: boolean
-  name?: string
-  required?: boolean
-  value?: string
-}
+import type { CheckboxInputProps as Props } from "./types.astro"
 
-const { checked, disabled, id, indeterminate, name, required, value, ...rest } =
-  Astro.props
+const { indeterminate, ...rest } = Astro.props as Props
 ---
 
 <input
   type="checkbox"
   data-indeterminate={indeterminate || undefined}
-  {checked}
-  {disabled}
-  {id}
-  {name}
-  {required}
-  {value}
   {...rest}
 />
 

package/components/Checkbox/CheckboxInput.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { CheckboxInputProps } from "./types"
+import { useAttrs, useTemplateRef, watchPostEffect } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const props = defineProps<CheckboxInputProps>()
+const modelValue = defineModel<boolean | (string | number)[]>()
+
+const input = useTemplateRef<HTMLInputElement>("input")
+
+if (modelValue.value === undefined && attrs.checked !== undefined) {
+  modelValue.value = attrs.checked !== false
+}
+
+watchPostEffect(() => {
+  if (input.value) input.value.indeterminate = Boolean(props.indeterminate)
+})
+</script>
+
+<template>
+  <input
+    ref="input"
+    type="checkbox"
+    :data-indeterminate="props.indeterminate || undefined"
+    v-bind="$attrs"
+    v-model="modelValue"
+  />
+</template>

package/components/Checkbox/types.astro.ts

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type CheckboxProps = Base.CheckboxProps &
+  Omit<HTMLAttributes<"input">, "size">
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  HTMLAttributes<"input">

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { CheckboxProps as BaseCheckboxProps } from "./types"
+
+export type CheckboxProps = BaseCheckboxProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+}

package/components/Checkbox/types.solid.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+
+export type CheckboxProps = Base.CheckboxProps &
+  Partial<Base.CheckboxSlots<JSX.Element>> &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size">

package/components/Checkbox/types.svelte.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type Snippets = Base.CheckboxSlots<Snippet>
+
+export type CheckboxProps = Omit<Base.CheckboxProps, keyof Snippets> &
+  Snippets &
+  Omit<SvelteHTMLElements["input"], "size">
+
+export type CheckboxInputProps = Base.CheckboxInputProps &
+  SvelteHTMLElements["input"]

package/components/Checkbox/types.ts

@@ -0,0 +1,16 @@
+export type CheckboxProps = {
+  error?: boolean
+  hideLabel?: boolean
+  indeterminate?: boolean
+  size?: "small" | "large"
+  spread?: boolean
+  stack?: boolean
+}
+
+export type CheckboxSlots<S> = {
+  endText?: string | S
+}
+
+export type CheckboxInputProps = {
+  indeterminate?: boolean
+}

package/components/Chip/Chip.astro

@@ -1,13 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  as?: "a" | "button" | "div" | string
-  class?: string
-  label?: string
-  multiline?: boolean
-  size?: "small"
-  variant?: "tonal" | "outlined"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Chip"
 
@@ -22,7 +14,6 @@ const {
 } = Astro.props
 ---
 
-<!-- prettier-ignore -->
 <Tag
   class:list={[
     "ui-chip",
@@ -33,5 +24,8 @@ const {
     variant && `ui-${variant}`,
     className,
   ]}
-  {...rest}
-><slot name="start" /><slot />{label && <span class="ui-text">{label}</span>}<slot name="end" /></Tag>
+  {...rest as any}
+  ><slot name="start" /><slot />{
+    label && <span class="ui-text">{label}</span>
+  }<slot name="end" /></Tag
+>