opui-css 5.1.1 → 5.2.0

package/components/Switch/Switch.astro

@@ -1,37 +1,17 @@
 ---
 import SwitchInput from "./SwitchInput.astro"
-
-type Props = {
-  [key: string]: any
-  checked?: boolean
-  class?: string
-  disabled?: boolean
-  error?: boolean
-  hideLabel?: boolean
-  id?: string
-  name?: string
-  required?: boolean
-  small?: boolean
-  spread?: boolean
-  stack?: boolean
-  value?: string
-}
+import type { SwitchProps as Props } from "./types.astro"
 
 export const title = "Switch"
 
 const {
-  checked,
   class: className,
-  disabled,
   error,
   hideLabel,
-  id,
   name,
-  required,
   small,
   spread,
   stack,
-  value,
   ...rest
 } = Astro.props
 
@@ -47,7 +27,7 @@ if (
   !Astro.props["aria-labelledby"]
 ) {
   console.warn(
-    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`."
+    "[OPUI Switch] Missing accessible name. Provide a default slot, `aria-label`, or `aria-labelledby`.",
   )
 }
 ---
@@ -78,24 +58,19 @@ if (
       </span>
     )
   }
-  <SwitchInput
-    aria-describedby={endTextId}
-    {checked}
-    {disabled}
-    {id}
-    name={finalName}
-    {required}
-    {value}
-    {...rest}
-  />
+  <SwitchInput aria-describedby={endTextId} name={finalName} {...rest} />
   {
     Astro.slots.has("default") && (
-    <!-- prettier-ignore --><span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}><slot /></span>)
+      <span class:list={[hideLabel ? "ui-sr-only" : "ui-label"]}>
+        <slot />
+      </span>
+    )
+  }
+  {
+    Astro.slots.has("end-text") && (
+      <span id={endTextId} class="ui-end-text">
+        <slot name="end-text" />
+      </span>
+    )
   }
-    {
-      Astro.slots.has("end-text") && (
-        <!-- prettier-ignore -->
-        <span id={endTextId} class="ui-end-text"><slot name="end-text" /></span>
-      )
-    }
 </label>

package/components/Switch/SwitchInput.astro

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

package/components/Switch/types.astro.ts

@@ -0,0 +1,5 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type SwitchProps = Base.SwitchProps & HTMLAttributes<"input">
+export type SwitchInputProps = Base.SwitchInputProps & HTMLAttributes<"input">

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

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, Slot } from "vue"
+import type { SwitchProps as BaseSwitchProps } from "./types"
+
+export type SwitchProps = BaseSwitchProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+  "end-text"?: Slot
+  "icon-checked"?: Slot
+  "icon-unchecked"?: Slot
+}

package/components/Switch/types.solid.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type SwitchProps = Base.SwitchProps &
+  JSX.InputHTMLAttributes<HTMLInputElement> &
+  Base.SwitchSlots<JSX.Element>
+
+export type SwitchInputProps = Base.SwitchInputProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>

package/components/Switch/types.svelte.ts

@@ -0,0 +1,9 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+export type SwitchProps = Base.SwitchProps &
+  Base.SwitchSlots<Snippet> &
+  SvelteHTMLElements["input"]
+export type SwitchInputProps = Base.SwitchInputProps &
+  SvelteHTMLElements["input"]

package/components/Switch/types.ts

@@ -0,0 +1,16 @@
+export type SwitchProps = {
+  error?: boolean
+  hideLabel?: boolean
+  small?: boolean
+  spread?: boolean
+  stack?: boolean
+}
+
+export type SwitchSlots<S> = {
+  children?: S
+  endText?: string | S
+  iconUnchecked?: S
+  iconChecked?: S
+}
+
+export type SwitchInputProps = {}

package/components/Table/Body.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Body"
 

package/components/Table/Cell.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Cell"
 

package/components/Table/Column.astro

@@ -1,8 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  width?: string
-}
+import type { ColumnProps as Props } from "./types.astro"
 
 export const title = "Table Column"
 

package/components/Table/ColumnGroup.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Column Group"
 

package/components/Table/Head.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Head"
 

package/components/Table/HeaderCell.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Header Cell"
 

package/components/Table/Row.astro

@@ -1,7 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-}
+import type { SectionProps as Props } from "./types.astro"
 
 export const title = "Table Row"
 

package/components/Table/Table.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  variant?: "dense" | "spacious"
-}
+import type { Props } from "./types.astro"
 
 export const title = "Table"
 

package/components/Table/types.astro.ts

@@ -0,0 +1,16 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"table">
+
+export type SectionProps = Base.SectionProps &
+  (
+    | HTMLAttributes<"tr">
+    | HTMLAttributes<"tbody">
+    | HTMLAttributes<"thead">
+    | HTMLAttributes<"th">
+    | HTMLAttributes<"td">
+    | HTMLAttributes<"colgroup">
+  )
+
+export type ColumnProps = Base.ColumnProps & HTMLAttributes<"col">

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

@@ -0,0 +1,8 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLTableElement>
+export type SectionProps = Base.SectionProps &
+  JSX.HTMLAttributes<HTMLTableSectionElement>
+export type ColumnProps = Base.ColumnProps &
+  JSX.HTMLAttributes<HTMLTableColElement>

package/components/Table/types.svelte.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type ColumnProps = Base.ColumnProps & SvelteHTMLElements["col"]
+export type Props = Base.Props & SvelteHTMLElements["table"]
+export type SectionProps = Base.SectionProps &
+  (
+    | SvelteHTMLElements["tbody"]
+    | SvelteHTMLElements["tfoot"]
+    | SvelteHTMLElements["thead"]
+  )

package/components/Table/types.ts

@@ -0,0 +1,9 @@
+export type Props = {
+  variant?: "dense" | "spacious"
+}
+
+export type SectionProps = {}
+
+export type ColumnProps = {
+  width?: string
+}

package/components/Tabs/Tabs.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  class?: string
-  name?: string
-}
+import type { Props } from "./types.astro"
 
 export const title = "Tabs"
 

package/components/Tabs/TabsItem.astro

@@ -1,12 +1,5 @@
 ---
-type Props = {
-  class?: string
-  name?: string
-  open?: boolean
-  tabId?: string
-  panelId?: string
-  [key: string]: any
-}
+import type { TabsItemProps as Props } from "./types.astro"
 
 const { $id } = Astro.locals
 const {

package/components/Tabs/TabsPanel.astro

@@ -1,10 +1,5 @@
 ---
-type Props = {
-  class?: string
-  panelId?: string
-  tabId?: string
-  [key: string]: any
-}
+import type { TabsPanelProps as Props } from "./types.astro"
 
 const { class: className, panelId, tabId, ...rest } = Astro.props
 const { currentPanelId, currentTabId } = Astro.locals

package/components/Tabs/TabsTab.astro

@@ -1,9 +1,5 @@
 ---
-type Props = {
-  class?: string
-  tabId?: string
-  [key: string]: any
-}
+import type { TabsTabProps as Props } from "./types.astro"
 
 const { class: className, tabId, ...rest } = Astro.props
 const { currentTabId } = Astro.locals

package/components/Tabs/types.astro.ts

@@ -0,0 +1,11 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+export type Props = Base.Props & HTMLAttributes<"div">
+
+export type TabsItemProps = Base.TabsItemProps &
+  Omit<HTMLAttributes<"input">, "type">
+
+export type TabsTabProps = Base.TabsTabProps & HTMLAttributes<"label">
+
+export type TabsPanelProps = Base.TabsPanelProps & HTMLAttributes<"div">

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, InjectionKey, Slot } from "vue"
+import type {
+  Props as BaseProps,
+  TabsItemProps as BaseTabsItemProps,
+  TabsPanelProps as BaseTabsPanelProps,
+  TabsTabProps as BaseTabsTabProps,
+} from "./types"
+
+export type Props = BaseProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsItemProps = BaseTabsItemProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsPanelProps = BaseTabsPanelProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type TabsTabProps = BaseTabsTabProps & {
+  class?: HTMLAttributes["class"]
+}
+
+export type Slots = {
+  default?: Slot
+}
+
+export const TabsGroupNameKey = Symbol() as InjectionKey<string>
+export const CurrentTabIdKey = Symbol() as InjectionKey<string>
+export const CurrentPanelIdKey = Symbol() as InjectionKey<string>

package/components/Tabs/types.solid.ts

@@ -0,0 +1,12 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props & JSX.HTMLAttributes<HTMLDivElement>
+export type TabsItemProps = Base.TabsItemProps &
+  JSX.InputHTMLAttributes<HTMLInputElement>
+export type TabsTabProps = Base.TabsTabProps &
+  Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "for"> & {
+    for?: string
+  }
+export type TabsPanelProps = Base.TabsPanelProps &
+  JSX.HTMLAttributes<HTMLDivElement>

package/components/Tabs/types.svelte.ts

@@ -0,0 +1,10 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+
+export type Props = Base.Props & SvelteHTMLElements["div"]
+export type TabsItemProps = Base.TabsItemProps & SvelteHTMLElements["input"]
+export type TabsPanelProps = Base.TabsPanelProps & SvelteHTMLElements["div"]
+export type TabsTabProps = Base.TabsTabProps &
+  Omit<SvelteHTMLElements["label"], "for"> & {
+    for?: string
+  }

package/components/Tabs/types.ts

@@ -0,0 +1,19 @@
+export type Props = {
+  name?: string
+}
+
+export type TabsItemProps = {
+  name?: string
+  open?: boolean
+  panelId?: string
+  tabId?: string
+}
+
+export type TabsTabProps = {
+  tabId?: string
+}
+
+export type TabsPanelProps = {
+  panelId?: string
+  tabId?: string
+}

package/components/TextField/TextField.astro

@@ -1,42 +1,5 @@
 ---
-type Props = {
-  [key: string]: any
-  autoFit?: boolean
-  class?: string
-  error?: 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
-}
+import type { Props } from "./types.astro"
 
 export const title = "Text Field"
 
@@ -87,14 +50,18 @@ const fieldName = name || currentFieldName
 >
   {
     (label || Astro.slots.has("label")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-label">{label}<slot name="label" /></span>
+      <span class="ui-label">
+        {label}
+        <slot name="label" />
+      </span>
     )
   }
   {
     (startTextValue || Astro.slots.has("description")) && (
-      <!-- prettier-ignore -->
-      <span class="ui-start-text">{startTextValue}<slot name="description" /></span>
+      <span class="ui-start-text">
+        {startTextValue}
+        <slot name="description" />
+      </span>
     )
   }
   <span class="ui-field">
@@ -113,15 +80,44 @@ const fieldName = name || currentFieldName
       type={type === "numeric" ? "text" : type}
       value={value}
     />
-    {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>}
+    {
+      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>
+    (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/TextField/types.astro.ts

@@ -0,0 +1,17 @@
+import type * as Base from "./types"
+import type { HTMLAttributes } from "astro/types"
+
+type InputProps = {
+  // Add 'numeric' as valid input type
+  type?: HTMLAttributes<"input">["type"] | "numeric"
+} &
+  // include the rest
+  Pick<HTMLAttributes<"input">, Exclude<Base.InputProps, "type">>
+
+export type Props =
+  // Unique component props
+  Base.Props &
+    // All html label attributes
+    HTMLAttributes<"label"> &
+    // Input attributes
+    InputProps

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

@@ -0,0 +1,22 @@
+import type * as Base from "./types"
+import type { JSX } from "solid-js"
+
+export type Props = Base.Props &
+  Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    type?:
+      | "text"
+      | "password"
+      | "email"
+      | "number"
+      | "numeric"
+      | "search"
+      | "tel"
+      | "url"
+      | "date"
+      | "time"
+      | "datetime-local"
+      | "month"
+      | "week"
+      | "color"
+      | string
+  } & Partial<Base.Slots<JSX.Element>>

package/components/TextField/types.svelte.ts

@@ -0,0 +1,22 @@
+import type * as Base from "./types"
+import type { SvelteHTMLElements } from "svelte/elements"
+import type { Snippet } from "svelte"
+
+type InputProps = {
+  // Add 'numeric' as valid input type
+  type?: SvelteHTMLElements["input"]["type"] | "numeric"
+} &
+  // include the rest
+  Pick<SvelteHTMLElements["input"], Exclude<Base.InputProps, "type">>
+
+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"> &
+    // Input attributes
+    InputProps &
+    // Snippets
+    Snippets