cekat-ui 1.2.3 → 1.2.5

package/dist/components/TabBrowser/TabBrowser.d.ts

@@ -0,0 +1,4 @@
+import { TabBrowserProps } from './tabbrowser.types';
+import * as React from 'react';
+declare const TabBrowser: React.ForwardRefExoticComponent<TabBrowserProps & React.RefAttributes<HTMLButtonElement>>;
+export default TabBrowser;

package/dist/components/TabBrowser/TabBrowserBar.d.ts

@@ -0,0 +1,17 @@
+import { TabBrowserBarProps } from './tabbrowser.types';
+/**
+ * Pure layout for a row of TabBrowsers. It deliberately draws no divider — that belongs
+ * to whatever surface hosts the row, so it can span the full header width.
+ *
+ * No `gap` either: each tab reserves its own breathing room (see TAB_PADDING_X), which
+ * keeps spacing identical whether or not a tab is selected. A flex gap on top would read
+ * as dead space beside the selected tab only.
+ *
+ * Nor any height or leading space — how far the row sits from what's above it depends on
+ * the surface, so that stays with the caller.
+ */
+declare const TabBrowserBar: {
+    ({ children, separators, trailingSlot, className }: TabBrowserBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabBrowserBar;

package/dist/components/TabBrowser/index.d.ts

@@ -0,0 +1,4 @@
+import { default as TabBrowser } from './TabBrowser';
+import { default as TabBrowserBar } from './TabBrowserBar';
+export { TabBrowser, TabBrowserBar };
+export type { TabBrowserProps, TabBrowserBarProps, TabBrowserType } from './tabbrowser.types';

package/dist/components/TabBrowser/tabbrowser.styles.d.ts

@@ -0,0 +1,53 @@
+/** Radius every corner turns through, in px — top corners and bottom flares alike. */
+export declare const TAB_GIRTH = 9;
+/** Outline weight, in px. Also the divider's thickness, which the flares hand off to. */
+export declare const TAB_HAIRLINE = 1;
+/**
+ * Label inset from the tab's box edge, in px, split between the button's padding and the
+ * fill's. Both states leave the same hairline on the button, so the split lands the same
+ * either way — selecting a tab neither resizes it nor shifts the row. Keep it that way:
+ * `max-width` tabs are `flex-1`, and flex-grow divides a row from bases that already
+ * include each item's padding, so a state-dependent button padding resizes the tab.
+ */
+export declare const TAB_PADDING_X = 30;
+/**
+ * Silhouette of a tab, with bottom corners flaring *outward* into the divider line.
+ * A border can't survive a clip, so the outline is the gap between two clipped layers —
+ * a border-colored box wrapped around a white one, both tracing this path at a
+ * different `inset`. Three things keep that gap even; none are safe to tidy away:
+ *
+ *  - Only concentric arcs hold a constant weight through a turn, so the inner arc
+ *    shrinks on the convex top corners but *grows* on the flares, which curve the other
+ *    way. A uniformly inset box gets the flares ~40% bolder than the corners they meet.
+ *  - Left to itself a flare runs tangent to the bottom edge, where the two curves meet
+ *    at a point and the outline fades out short of the divider. The skirt lifts the
+ *    outer arc 1px clear so it lands at full weight, as Figma's assets do (`…H0 V7.5…`).
+ *  - Coordinates are box-relative, so the inner path leans 1px outside its own at the
+ *    bottom corners. The fill can't paint there, which trims the skirt back to 1px.
+ *
+ * Without `shape()` the declaration is dropped and tabs fall back to the `rounded-t-lg`
+ * top corners in TabBrowser's base classes, 1px padding standing in as a border.
+ *
+ * Technique: https://master.dev/blog/modern-css-round-out-tabs/
+ */
+export declare function tabOutlinePath(inset: number): string;
+export declare const TAB_CLIP_OUTER: string;
+export declare const TAB_CLIP_INNER: string;
+/**
+ * `default` tabs size to their own label and sit at the head of a page. `max-width` tabs
+ * divide a row equally between them and run shorter, for tighter surfaces like a side panel.
+ *
+ * `padX` is the label's inset from the tab's box edge, split between the button and the fill
+ * — see Tab's ACTIVE_FILL/INACTIVE_FILL. Equal-width tabs centre their label anyway, so
+ * theirs only has to clear the flare reserve.
+ */
+export declare const tabBrowserTypeMap: {
+    readonly default: {
+        readonly box: "h-12 shrink-0";
+        readonly padX: 30;
+    };
+    readonly 'max-width': {
+        readonly box: "h-9 min-w-px flex-1";
+        readonly padX: 9;
+    };
+};

package/dist/components/TabBrowser/tabbrowser.types.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+/**
+ * Sizing variant, mirroring the design system's Tab Browser Base. `default` sizes each tab
+ * to its own label; `max-width` makes them equal-width and lets the row divide itself
+ * between them, which also runs them shorter.
+ */
+export type TabBrowserType = 'default' | 'max-width';
+/**
+ * Everything a `<button>` takes comes through — `id`, `aria-controls`, `tabIndex`,
+ * `onKeyDown`, `data-*`. The tab carries `role="tab"` but leaves selection and panel wiring
+ * to the caller, so those are the props they build it out of.
+ *
+ * `type` is the exception: it names the sizing variant here, and the rendered button is
+ * pinned to `type="button"` so it never submits a form it happens to sit in.
+ */
+export interface TabBrowserProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Whether this tab is the currently selected one. */
+    active?: boolean;
+    type?: TabBrowserType;
+    /** Icon rendered before the label. */
+    iconLeft?: React.ReactNode;
+    /** Rendered after the label, e.g. a status Badge. */
+    trailing?: React.ReactNode;
+    /** Shorthand for the native `title`, which wins if both are given. */
+    tooltip?: string;
+    children: React.ReactNode;
+}
+export interface TabBrowserBarProps {
+    children: React.ReactNode;
+    /** Renders a vertical divider between adjacent tabs. */
+    separators?: boolean;
+    /** Extra content pinned to the end of the row, e.g. a "+" add button or CTA buttons. */
+    trailingSlot?: React.ReactNode;
+    className?: string;
+}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/AvatarGroup';
 export * from './components/AvatarLabelGroup';
 export * from './components/AvatarProfilePhoto';
 export * from './components/Tab';
+export * from './components/TabBrowser';
 export * from './components/Input';
 export * from './components/Textarea';
 export * from './components/MultiSelectInput';