@luscii-healthtech/web-ui 54.7.2 → 55.0.0

package/dist/src/components/PageHeader/PageHeader.types.d.ts

@@ -1,9 +1,30 @@
 import type { FC, ReactNode } from "react";
 import type { BreadcrumbProps } from "../Breadcrumbs";
 import { type NotificationBannerColor } from "../NotificationBanner/NotificationBanner";
-import type { TabbarProps } from "../Tabbar/Tabbar";
 import { type IconProps } from "../Icons/types/IconProps.type";
 type Nil = null | undefined;
+/**
+ * A single tab in the page header's navigation bar.
+ */
+export interface PageHeaderNavigationTab<T extends object = Record<string, unknown>> {
+    title: string | JSX.Element;
+    badgeCount?: number;
+    isLoading?: boolean;
+    dataTestId?: string;
+    extra?: T;
+}
+/**
+ * Tabbed navigation rendered at the bottom of the page header.
+ */
+export interface PageHeaderNavigation<T extends object = Record<string, unknown>> {
+    tabs?: PageHeaderNavigationTab<T>[];
+    selectedIndex?: number;
+    onSelect?: (params: {
+        index: number;
+        selectedTab: PageHeaderNavigationTab<T>;
+    }) => void;
+    className?: string;
+}
 type WithPageHeaderBanner = {
     banner?: Nil | {
         title?: string;
@@ -32,10 +53,10 @@ type WithBreadcrumbProps = {
 }>;
 export type PageHeaderProps = {
     /**
-     * These are props passed to the `Tabbar` component. The name
+     * Tabbed navigation rendered at the bottom of the page header. The name
      * `navigation` does not convey this well.
      */
-    navigation?: Omit<TabbarProps, "withoutPadding">;
+    navigation?: PageHeaderNavigation;
     dataTestId?: string;
     title: string | ReactNode;
     isPolling?: boolean;

package/dist/src/generated/components/PageHeader/PageHeader.types.d.ts

@@ -1,9 +1,30 @@
 import type { FC, ReactNode } from "react";
 import type { BreadcrumbProps } from "../Breadcrumbs";
 import { type NotificationBannerColor } from "../NotificationBanner/NotificationBanner";
-import type { TabbarProps } from "../Tabbar/Tabbar";
 import { type IconProps } from "../Icons/types/IconProps.type";
 type Nil = null | undefined;
+/**
+ * A single tab in the page header's navigation bar.
+ */
+export interface PageHeaderNavigationTab<T extends object = Record<string, unknown>> {
+    title: string | JSX.Element;
+    badgeCount?: number;
+    isLoading?: boolean;
+    dataTestId?: string;
+    extra?: T;
+}
+/**
+ * Tabbed navigation rendered at the bottom of the page header.
+ */
+export interface PageHeaderNavigation<T extends object = Record<string, unknown>> {
+    tabs?: PageHeaderNavigationTab<T>[];
+    selectedIndex?: number;
+    onSelect?: (params: {
+        index: number;
+        selectedTab: PageHeaderNavigationTab<T>;
+    }) => void;
+    className?: string;
+}
 type WithPageHeaderBanner = {
     banner?: Nil | {
         title?: string;
@@ -32,10 +53,10 @@ type WithBreadcrumbProps = {
 }>;
 export type PageHeaderProps = {
     /**
-     * These are props passed to the `Tabbar` component. The name
+     * Tabbed navigation rendered at the bottom of the page header. The name
      * `navigation` does not convey this well.
      */
-    navigation?: Omit<TabbarProps, "withoutPadding">;
+    navigation?: PageHeaderNavigation;
     dataTestId?: string;
     title: string | ReactNode;
     isPolling?: boolean;

package/dist/src/generated/index.d.ts

@@ -90,7 +90,6 @@ export { default as Image } from "./components/Image/Image";
 export { MediaPicker, type TargetProps, } from "./components/MediaPicker/MediaPicker";
 export { Stack } from "./components/Stack/Stack";
 export { Box } from "./components/Box/Box";
-export { default as Tabbar, type TabbarProps, type TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";

package/dist/src/index.d.ts

@@ -90,7 +90,6 @@ export { default as Image } from "./components/Image/Image";
 export { MediaPicker, type TargetProps, } from "./components/MediaPicker/MediaPicker";
 export { Stack } from "./components/Stack/Stack";
 export { Box } from "./components/Box/Box";
-export { default as Tabbar, type TabbarProps, type TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";

package/dist/stories/Tabs.stories.d.ts

@@ -45,42 +45,34 @@ export declare const Base: Story;
 export declare const WithDisabledTab: Story;
 export declare const Controlled: Story;
 /**
- * Legacy `TabItemDetails.badgeCount` parity. `Tabbar` rendered a
- * counter badge next to the label when `badgeCount > 0`. With `Tabs`
- * the consumer composes a `<Badge>` inside `Tabs.Trigger`.
+ * Compose a counter `<Badge>` inside `Tabs.Trigger`. Render the badge
+ * only when there is a value to show.
  */
 export declare const WithBadge: Story;
 /**
- * Legacy `TabItemDetails.isLoading` parity. `Tabbar` rendered a small
- * spinner next to the label when `isLoading` was true. With `Tabs` the
- * consumer composes a `<LoadingIndicator>` inside `Tabs.Trigger`.
+ * Compose a `<LoadingIndicator>` inside `Tabs.Trigger` to show a small
+ * inline spinner next to the label while that tab's data loads.
  */
 export declare const WithLoadingIndicator: Story;
 /**
- * Legacy `TabItemDetails.title` parity when `title` was a `JSX.Element`
- * rather than a string. In `Tabbar` the rich node replaced the default
- * `<Text>` label. In `Tabs` the trigger simply accepts any ReactNode as
- * children — `Tabs.LabelText` is optional.
+ * `Tabs.Trigger` accepts any ReactNode as children, so a trigger can
+ * render rich content — an icon, a colored indicator, etc. —
+ * alongside or instead of `Tabs.LabelText`.
  */
 export declare const TitleAsJsxElement: Story;
 /**
- * Legacy `TabItemDetails.dataTestId` parity. `Tabbar` set a
- * `data-test-id` attribute on the tab button. With `Tabs.Trigger` the
- * same attribute can be passed directly — Radix forwards unknown props
- * to the underlying button.
+ * `Tabs.Trigger` forwards unknown props to the underlying `<button>`,
+ * so attributes such as `data-test-id` can be passed directly.
  */
 export declare const WithDataTestId: Story;
 /**
- * Legacy `TabItemDetails.extra<T>` parity. `Tabbar` attached a typed
- * `extra` payload to each tab and returned it in `onSelect`. `Tabs`
- * does not own that data — the consumer keeps its own mapping keyed by
- * the tab `value` and resolves it on `onValueChange`.
+ * `Tabs` does not carry arbitrary metadata on the component itself.
+ * Keep your own mapping keyed by the tab `value` and resolve it on
+ * `onValueChange`.
  */
 export declare const WithExtraMetadata: Story;
 /**
- * Legacy behavior where `selectedIndex` was set to a value outside the
- * tab array (e.g. `selectedIndex: 8` with four tabs) — no tab was
- * active on mount. `Tabs` matches that behavior when `defaultValue` /
- * `value` does not match any trigger.
+ * When `defaultValue` (or `value`) does not match any `Tabs.Trigger`,
+ * no tab is active on mount.
  */
 export declare const NoDefaultSelected: Story;

package/dist/web-ui-tailwind.css

@@ -2803,18 +2803,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:border-b-border-neutral-secondary-default {
   border-bottom-color: var(--ui-primitive-color-grey-500);
 }
-.ui\:border-b-primary {
-  border-bottom-color: var(--ui-color-blue-800);
-}
 .ui\:border-b-slate-100 {
   border-bottom-color: var(--ui-color-slate-100);
 }
 .ui\:border-b-slate-200 {
   border-bottom-color: var(--ui-color-slate-200);
 }
-.ui\:border-b-transparent {
-  border-bottom-color: transparent;
-}
 .ui\:bg-amber-50 {
   background-color: var(--ui-color-amber-50);
 }