@camstack/ui-library 1.2.271 → 1.2.272
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +7 -5
- package/dist/index.js +7 -5
- package/dist/primitives/tabs.d.ts +8 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -32023,7 +32023,7 @@ function useTabsContext() {
|
|
|
32023
32023
|
if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
|
|
32024
32024
|
return ctx;
|
|
32025
32025
|
}
|
|
32026
|
-
function Tabs({ value: controlledValue, onValueChange, defaultValue = "", className, ...props }) {
|
|
32026
|
+
function Tabs({ value: controlledValue, onValueChange, defaultValue = "", appearance = "underline", className, ...props }) {
|
|
32027
32027
|
const [uncontrolledValue, setUncontrolledValue] = (0, react$1.useState)(defaultValue);
|
|
32028
32028
|
const value = controlledValue ?? uncontrolledValue;
|
|
32029
32029
|
const setValue = (0, react$1.useCallback)((next) => {
|
|
@@ -32033,7 +32033,8 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
|
|
|
32033
32033
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsContext.Provider, {
|
|
32034
32034
|
value: {
|
|
32035
32035
|
value,
|
|
32036
|
-
setValue
|
|
32036
|
+
setValue,
|
|
32037
|
+
appearance
|
|
32037
32038
|
},
|
|
32038
32039
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
32039
32040
|
className,
|
|
@@ -32059,14 +32060,15 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
|
|
|
32059
32060
|
* pinned to `hidden` makes it impossible here.
|
|
32060
32061
|
*/
|
|
32061
32062
|
function TabsList({ className, ...props }) {
|
|
32063
|
+
const { appearance } = useTabsContext();
|
|
32062
32064
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
32063
32065
|
role: "tablist",
|
|
32064
|
-
className: cn("flex flex-row overflow-x-auto overflow-y-hidden border-b border-border-subtle", className),
|
|
32066
|
+
className: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
|
|
32065
32067
|
...props
|
|
32066
32068
|
});
|
|
32067
32069
|
}
|
|
32068
32070
|
function TabsTrigger({ value, className, ...props }) {
|
|
32069
|
-
const { value: activeValue, setValue } = useTabsContext();
|
|
32071
|
+
const { value: activeValue, setValue, appearance } = useTabsContext();
|
|
32070
32072
|
const isActive = value === activeValue;
|
|
32071
32073
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
32072
32074
|
type: "button",
|
|
@@ -32074,7 +32076,7 @@ function TabsTrigger({ value, className, ...props }) {
|
|
|
32074
32076
|
"aria-selected": isActive,
|
|
32075
32077
|
"aria-controls": `tabpanel-${value}`,
|
|
32076
32078
|
tabIndex: isActive ? 0 : -1,
|
|
32077
|
-
className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
|
|
32079
|
+
className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", appearance === "pills" ? isActive ? "rounded-md bg-primary/10 font-medium text-primary" : "rounded-md text-foreground-muted hover:bg-surface-hover hover:text-foreground" : isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
|
|
32078
32080
|
onClick: () => setValue(value),
|
|
32079
32081
|
...props
|
|
32080
32082
|
});
|
package/dist/index.js
CHANGED
|
@@ -31999,7 +31999,7 @@ function useTabsContext() {
|
|
|
31999
31999
|
if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
|
|
32000
32000
|
return ctx;
|
|
32001
32001
|
}
|
|
32002
|
-
function Tabs({ value: controlledValue, onValueChange, defaultValue = "", className, ...props }) {
|
|
32002
|
+
function Tabs({ value: controlledValue, onValueChange, defaultValue = "", appearance = "underline", className, ...props }) {
|
|
32003
32003
|
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
|
|
32004
32004
|
const value = controlledValue ?? uncontrolledValue;
|
|
32005
32005
|
const setValue = useCallback((next) => {
|
|
@@ -32009,7 +32009,8 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
|
|
|
32009
32009
|
return /* @__PURE__ */ jsx(TabsContext.Provider, {
|
|
32010
32010
|
value: {
|
|
32011
32011
|
value,
|
|
32012
|
-
setValue
|
|
32012
|
+
setValue,
|
|
32013
|
+
appearance
|
|
32013
32014
|
},
|
|
32014
32015
|
children: /* @__PURE__ */ jsx("div", {
|
|
32015
32016
|
className,
|
|
@@ -32035,14 +32036,15 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
|
|
|
32035
32036
|
* pinned to `hidden` makes it impossible here.
|
|
32036
32037
|
*/
|
|
32037
32038
|
function TabsList({ className, ...props }) {
|
|
32039
|
+
const { appearance } = useTabsContext();
|
|
32038
32040
|
return /* @__PURE__ */ jsx("div", {
|
|
32039
32041
|
role: "tablist",
|
|
32040
|
-
className: cn("flex flex-row overflow-x-auto overflow-y-hidden border-b border-border-subtle", className),
|
|
32042
|
+
className: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
|
|
32041
32043
|
...props
|
|
32042
32044
|
});
|
|
32043
32045
|
}
|
|
32044
32046
|
function TabsTrigger({ value, className, ...props }) {
|
|
32045
|
-
const { value: activeValue, setValue } = useTabsContext();
|
|
32047
|
+
const { value: activeValue, setValue, appearance } = useTabsContext();
|
|
32046
32048
|
const isActive = value === activeValue;
|
|
32047
32049
|
return /* @__PURE__ */ jsx("button", {
|
|
32048
32050
|
type: "button",
|
|
@@ -32050,7 +32052,7 @@ function TabsTrigger({ value, className, ...props }) {
|
|
|
32050
32052
|
"aria-selected": isActive,
|
|
32051
32053
|
"aria-controls": `tabpanel-${value}`,
|
|
32052
32054
|
tabIndex: isActive ? 0 : -1,
|
|
32053
|
-
className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
|
|
32055
|
+
className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", appearance === "pills" ? isActive ? "rounded-md bg-primary/10 font-medium text-primary" : "rounded-md text-foreground-muted hover:bg-surface-hover hover:text-foreground" : isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
|
|
32054
32056
|
onClick: () => setValue(value),
|
|
32055
32057
|
...props
|
|
32056
32058
|
});
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { type JSX, type ButtonHTMLAttributes, type HTMLAttributes } from "react";
|
|
2
|
+
export type TabsAppearance = "underline" | "pills";
|
|
2
3
|
interface TabsProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
4
|
value?: string;
|
|
4
5
|
onValueChange?: (value: string) => void;
|
|
5
6
|
defaultValue?: string;
|
|
7
|
+
/**
|
|
8
|
+
* `underline` — border-b active (default, dialog editors).
|
|
9
|
+
* `pills` — chip active fill; scrollbar sits under chips so it cannot
|
|
10
|
+
* cover a bottom underline (Rules area strip).
|
|
11
|
+
*/
|
|
12
|
+
appearance?: TabsAppearance;
|
|
6
13
|
}
|
|
7
|
-
export declare function Tabs({ value: controlledValue, onValueChange, defaultValue, className, ...props }: TabsProps): JSX.Element | null;
|
|
14
|
+
export declare function Tabs({ value: controlledValue, onValueChange, defaultValue, appearance, className, ...props }: TabsProps): JSX.Element | null;
|
|
8
15
|
/**
|
|
9
16
|
* The strip SCROLLS sideways; it never squashes and never clips.
|
|
10
17
|
*
|