@luscii-healthtech/web-ui 48.2.0 → 48.3.0

package/dist/index.development.js

@@ -3486,6 +3486,99 @@ const Tabs = {
   LabelText: TabLabelText
 };
 
+const PrimaryTabBarRoot = React.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return jsxRuntime.jsx(TabsPrimitive__namespace.Root, Object.assign({ ref, className: classNames__default.default("ui:pt-f_l", className) }, props));
+});
+PrimaryTabBarRoot.displayName = "PrimaryTabBar.Root";
+
+const PrimaryTabBarList = React.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return jsxRuntime.jsx(TabsPrimitive__namespace.List, Object.assign({ ref, className: classNames__default.default("ui:flex ui:items-end ui:px-f_l", "ui:border-b ui:border-border-neutral-secondary-default", className), loop: true }, props));
+});
+PrimaryTabBarList.displayName = "PrimaryTabBar.List";
+
+function splitChildren(children) {
+  const text = [];
+  const elements = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child)) {
+      elements.push(child);
+    } else if (child !== null && child !== false && child !== true) {
+      text.push(child);
+    }
+  });
+  return { text, elements };
+}
+const PrimaryTabBarTrigger = React.forwardRef((_a, ref) => {
+  var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+  const { text, elements } = splitChildren(children);
+  return jsxRuntime.jsxs(TabsPrimitive__namespace.Trigger, Object.assign({ ref, className: classNames__default.default(
+    // Layout
+    "ui:relative ui:inline-flex ui:items-center ui:gap-f_l ui:py-f_m ui:px-f_l",
+    // Sizing
+    "ui:max-w-[250px] ui:min-w-[100px] ui:shrink",
+    // Shape
+    "ui:rounded-tl-[var(--ui-semantic-radius-l)] ui:rounded-tr-[var(--ui-semantic-radius-l)]",
+    // Typography
+    "ui-typo-h4 ui:transition-[color]",
+    // Focus ring
+    "ui:outline-offset-2",
+    // Border — all sides transparent except bottom; overlaps List border via -mb-px
+    "ui:border ui:border-transparent ui:border-b-border-neutral-secondary-default ui:-mb-px",
+    // Inactive state
+    "ui:text-text-neutral-primary-disabled",
+    "ui:data-[state=inactive]:[&>div]:opacity-50",
+    // Active state
+    "ui:data-[state=active]:z-[1]",
+    "ui:data-[state=active]:border-border-neutral-secondary-default",
+    "ui:data-[state=active]:border-b-transparent",
+    "ui:data-[state=active]:bg-background-neutral-secondary-default",
+    "ui:data-[state=active]:text-text-neutral-primary-default",
+    // Scallops (inverse border-radius) — shared pseudo-element base
+    "ui:before:absolute ui:before:bottom-[-1px] ui:before:hidden ui:before:h-[var(--ui-semantic-radius-l)] ui:before:w-[var(--ui-semantic-radius-l)] ui:before:content-['']",
+    "ui:after:absolute ui:after:bottom-[-1px] ui:after:hidden ui:after:h-[var(--ui-semantic-radius-l)] ui:after:w-[var(--ui-semantic-radius-l)] ui:after:content-['']",
+    "ui:data-[state=active]:before:block ui:data-[state=active]:after:block",
+    // Left scallop
+    "ui:before:left-[calc(var(--ui-semantic-radius-l)*-1)] ui:before:rounded-br-[var(--ui-semantic-radius-l)]",
+    "ui:before:border-b ui:before:border-r ui:before:border-border-neutral-secondary-default",
+    "ui:before:shadow-[3px_3px_0_2px_var(--ui-color-background-neutral-secondary-default)]",
+    // Right scallop
+    "ui:after:right-[calc(var(--ui-semantic-radius-l)*-1)] ui:after:rounded-bl-[var(--ui-semantic-radius-l)]",
+    "ui:after:border-b ui:after:border-l ui:after:border-border-neutral-secondary-default",
+    "ui:after:shadow-[-3px_3px_0_2px_var(--ui-color-background-neutral-secondary-default)]",
+    className
+  ) }, props, { children: [text.length > 0 && jsxRuntime.jsx("span", { className: "ui:truncate", children: text }), elements] }));
+});
+PrimaryTabBarTrigger.displayName = "PrimaryTabBar.Trigger";
+
+const PrimaryTabBarContent = React.forwardRef((_a, ref) => {
+  var { className } = _a, props = __rest(_a, ["className"]);
+  return jsxRuntime.jsx(TabsPrimitive__namespace.Content, Object.assign({ ref, className: classNames__default.default("ui:relative ui:z-[1]", className), tabIndex: -1 }, props));
+});
+PrimaryTabBarContent.displayName = "PrimaryTabBar.Content";
+
+const PrimaryTabBarOverflowIndicator = React.forwardRef((_a, ref) => {
+  var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+  return jsxRuntime.jsx("span", Object.assign({ ref, className: classNames__default.default("ui-typo-body-small-regular", "ui:text-text-neutral-secondary-disabled", "ui:self-center ui:whitespace-nowrap", className) }, props, { children }));
+});
+PrimaryTabBarOverflowIndicator.displayName = "PrimaryTabBar.OverflowIndicator";
+
+const PrimaryTabBarExtras = React.forwardRef((_a, ref) => {
+  var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+  return jsxRuntime.jsx("div", Object.assign({ ref, className: classNames__default.default("ui:flex ui:items-center ui:self-center ui:gap-f_base ui:mx-f_l", className) }, props, { children }));
+});
+PrimaryTabBarExtras.displayName = "PrimaryTabBar.Extras";
+
+const PrimaryTabBar = {
+  Root: PrimaryTabBarRoot,
+  List: PrimaryTabBarList,
+  Trigger: PrimaryTabBarTrigger,
+  Content: PrimaryTabBarContent,
+  OverflowIndicator: PrimaryTabBarOverflowIndicator,
+  Extras: PrimaryTabBarExtras
+};
+
 const Line = ({ left, right, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -7090,6 +7183,7 @@ exports.PlusIcon = PlusIcon;
 exports.PreviewPhone = PreviewPhone;
 exports.PrimaryButton = PrimaryButton;
 exports.PrimaryIconButton = PrimaryIconButton;
+exports.PrimaryTabBar = PrimaryTabBar;
 exports.PrintIcon = PrinterIcon;
 exports.PrinterIcon = PrinterIcon;
 exports.RadioGroupV2 = RadioGroupV2;