opui-css 4.1.0 → 5.0.1

package/components/Switch/SwitchInput.astro

@@ -1,25 +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}
-/>
+---
+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

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

package/components/Table/Cell.astro

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

package/components/Table/Column.astro

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

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

package/components/Table/Head.astro

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

package/components/Table/HeaderCell.astro

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

package/components/Table/Row.astro

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

package/components/Table/Table.astro

@@ -1,15 +1,18 @@
----
-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>
+---
+type Props = {
+  [key: string]: any
+  class?: string
+  variant?: "dense" | "spacious"
+}
+
+export const title = "Table"
+
+const { class: className, variant, ...rest } = Astro.props
+---
+
+<table
+  class:list={["ui-table", className, variant && `ui-${variant}`]}
+  {...rest}
+>
+  <slot />
+</table>

package/components/Table/index.ts

@@ -1,20 +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,
-})
+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

@@ -1,28 +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}
-/>
+---
+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={["ui-tabs", className]}
+  role="tablist"
+  {...rest}
+  set:html={html}
+/>

package/components/Tabs/TabsItem.astro

@@ -1,47 +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} />
+---
+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={["ui-tab-input", className]}
+  id={tabId}
+  name={tabsGroupName}
+  type="radio"
+  {...rest}
+/>
+<Fragment set:html={html} />

package/components/Tabs/TabsPanel.astro

@@ -1,21 +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>
+---
+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={["ui-tab-panel", className]}
+  role="tabpanel"
+  aria-labelledby={tabId || currentTabId}
+  {...rest}
+>
+  <slot />
+</div>

package/components/Tabs/TabsTab.astro

@@ -1,19 +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>
+---
+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={["ui-tab-label", className]}
+  role="tab"
+  {...rest}
+>
+  <slot />
+</label>

package/components/Tabs/index.ts

@@ -1,14 +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
+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