opui-css 5.1.2 → 5.2.0

package/components/TextField/types.ts

@@ -0,0 +1,35 @@
+export type Props = {
+  autoFit?: boolean
+  error?: boolean
+  description?: string
+  endText?: string
+  filled?: boolean
+  label?: string
+  small?: boolean
+  spread?: boolean
+  startText?: string
+}
+
+export type Slots<S> = {
+  description: string | S
+  endText: string | S
+  footer: string | S
+  header: string | S
+  label: string | S
+  prefix: string | S
+  startText: string | S
+  suffix: string | S
+  supportingText: string | S
+}
+
+export type InputProps =
+  | "disabled"
+  | "list"
+  | "max"
+  | "min"
+  | "name"
+  | "placeholder"
+  | "required"
+  | "step"
+  | "type"
+  | "value"

package/components/Textarea/Textarea.astro

@@ -1,26 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  cols?: number
-  description?: string
-  disabled?: boolean
-  error?: 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
-}
+import type { Props } from "./types.astro"
 
 export const title = "Textarea"
 
@@ -66,17 +45,21 @@ const fieldName = name || currentFieldName
   data-invalid={error || undefined}
   {...rest}
 >
-{
-  (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label">{label}<slot name="label" /></span>
+  {
+    (label || Astro.slots.has("label")) && (
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
 
-{
-  (description || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{description}<slot name="description" /></span>
+  {
+    (description || Astro.slots.has("description")) && (
+      <span class="ui-start-text">
+        {description}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
@@ -91,15 +74,44 @@ const fieldName = name || currentFieldName
       required={required}
       rows={rows}
       value={value}></textarea>
-    {Astro.slots.has("prefix") && <span class="ui-prefix"><slot name="prefix" /></span>}
-    {Astro.slots.has("suffix") && <span class="ui-suffix"><slot name="suffix" /></span>}
-    {Astro.slots.has("header") && <span class="ui-header"><slot name="header" /></span>}
-    {Astro.slots.has("footer") && <span class="ui-footer"><slot name="footer" /></span>}
-  </span>
     {
-      (endText || Astro.slots.has("end-text") || Astro.slots.has("supporting-text")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-end-text">{endText}<slot name="end-text" /><slot name="supporting-text" /></span>
+      Astro.slots.has("prefix") && (
+        <span class="ui-prefix">
+          <slot name="prefix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("suffix") && (
+        <span class="ui-suffix">
+          <slot name="suffix" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("header") && (
+        <span class="ui-header">
+          <slot name="header" />
+        </span>
+      )
+    }
+    {
+      Astro.slots.has("footer") && (
+        <span class="ui-footer">
+          <slot name="footer" />
+        </span>
+      )
+    }
+  </span>
+  {
+    (endText ||
+      Astro.slots.has("end-text") ||
+      Astro.slots.has("supporting-text")) && (
+      <span class="ui-end-text">
+        {endText}
+        <slot name="end-text" />
+        <slot name="supporting-text" />
+      </span>
     )
   }
   <slot />

package/components/Textarea/types.astro.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props =
+  // Unique component props
+  Base.Props &
+    // All html label attributes
+    HTMLAttributes<"label"> &
+    // Some input attributes for spreading
+    Pick<HTMLAttributes<"textarea">, Base.TextareaProps>

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

@@ -0,0 +1,18 @@
+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
+  description?: Slot
+  "end-text"?: Slot
+  footer?: Slot
+  header?: Slot
+  label?: Slot
+  prefix?: Slot
+  "supporting-text"?: Slot
+  suffix?: Slot
+}

package/components/Textarea/types.solid.ts

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

package/components/Textarea/types.svelte.ts

@@ -0,0 +1,21 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type InputProps = {
+  type?: SvelteHTMLElements["input"]["type"] | "numeric"
+}
+
+type Snippets = Base.Slots<Snippet>
+
+export type Props =
+  // Unique component props, except snippets
+  Omit<Base.Props, keyof Snippets> &
+    // All html label attributes, (except prefix)
+    Omit<SvelteHTMLElements["label"], "prefix"> &
+    // Some input attributes for spreading
+    Pick<SvelteHTMLElements["textarea"], Base.TextareaProps> &
+    // Special input type attribute with 'numeric'
+    InputProps &
+    // Snippets
+    Snippets

package/components/Textarea/types.ts

@@ -0,0 +1,33 @@
+export type Props = {
+  autoFit?: boolean
+  description?: string
+  error?: boolean
+  filled?: boolean
+  label?: string
+  spread?: boolean
+  small?: boolean
+  endText?: string
+}
+
+export type Slots<S> = {
+  description?: string | S
+  footer?: string | S
+  header?: string | S
+  label?: string | S
+  prefix?: string | S
+  startText?: string | S
+  suffix?: string | S
+  endText?: string | S
+  supportingText?: string | S
+}
+
+export type TextareaProps =
+  | "cols"
+  | "disabled"
+  | "maxlength"
+  | "minlength"
+  | "name"
+  | "placeholder"
+  | "required"
+  | "rows"
+  | "value"

package/components/ToggleButton/ToggleButton.astro

@@ -1,15 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  disabled?: boolean
-  label?: string
-  name?: string
-  pressed?: boolean
-  size?: "small" | "x-small"
-  type?: "checkbox" | "radio"
-  value?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Toggle Button"
 

package/components/ToggleButton/types.astro.ts

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

package/components/ToggleButton/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/ToggleButton/types.solid.ts

@@ -0,0 +1,7 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+    type?: "checkbox" | "radio"
+  }

package/components/ToggleButton/types.svelte.ts

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

package/components/ToggleButton/types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  label?: string
+  pressed?: boolean
+  size?: "small" | "x-small"
+  type?: "checkbox" | "radio"
+}
+
+export type Slots<S> = {
+  children?: S
+}

package/components/ToggleGroup/ToggleGroup.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  name?: string
-  orientation?: "vertical"
-  selection?: "single" | "multiple"
-  size?: "default" | "small" | "x-small"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Toggle Group"
 

package/components/ToggleGroup/types.astro.ts

@@ -0,0 +1,4 @@
+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.d.vue.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type { Props as BaseProps } from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const ToggleGroupKey = Symbol() as InjectionKey<{
+  name: string
+  type: "radio" | "checkbox"
+}>

package/components/ToggleGroup/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/ToggleGroup/types.svelte.ts

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

package/components/ToggleGroup/types.ts

@@ -0,0 +1,15 @@
+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"
+}

package/components/Tooltip/Tooltip.astro

@@ -1,14 +1,7 @@
 ---
-import Anchor from "../Anchor/Anchor.astro"
+import type { Props } from "./types.astro"
 
-type Props = {
-  [key: string]: any
-  alignment?: string
-  arrow?: boolean
-  class?: string
-  id?: string
-  label?: string
-}
+import Anchor from "../Anchor/Anchor.astro"
 
 export const title = "Tooltip"
 

package/components/Tooltip/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<"span">

package/components/Tooltip/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/Tooltip/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<HTMLSpanElement>

package/components/Tooltip/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["span"]

package/components/Tooltip/types.ts

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

package/css/theme.css

@@ -1,5 +1,4 @@
 @layer theme {
-
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;

package/dist/opui.css

@@ -1291,7 +1291,6 @@
 }
 
 @layer theme {
-
   /* 1. Color scheme */
   .ui-light {
     --color-scheme: light;