@nimbus-ds/patterns 1.35.1-rc.10 → 1.35.1-rc.12
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/CHANGELOG.md +0 -6
- package/dist/BottomSheet/index.d.ts +184 -0
- package/dist/BottomSheet/index.js +2 -0
- package/dist/CHANGELOG.md +0 -6
- package/dist/NavTabs/index.d.ts +7 -25
- package/dist/NavTabs/index.js +1 -1
- package/dist/index.d.ts +180 -25
- package/dist/index.js +1 -1
- package/package.json +5 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
|
|
4
4
|
|
|
5
|
-
## 2026-07-15 `1.37.0`
|
|
6
|
-
|
|
7
|
-
#### 🎉 New features
|
|
8
|
-
|
|
9
|
-
- `NavTabs`: Added an `appearance` prop to `NavTabs.Item`, with an `"ai-generative"` variant that renders a gradient border and a fixed AI icon for AI entry points such as an assistant button. ([#176](https://github.com/TiendaNube/nimbus-patterns/pull/176) by [@jffs](https://github.com/jffs))
|
|
10
|
-
|
|
11
5
|
## 2026-06-25 `1.36.0`
|
|
12
6
|
|
|
13
7
|
#### 🎉 New features
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
// Generated by dts-bundle-generator v8.1.2
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
5
|
+
|
|
6
|
+
export type BottomSheetPadding = "none" | "base";
|
|
7
|
+
/**
|
|
8
|
+
* A snap point expressed as a viewport-height percentage (e.g. "60%") or the
|
|
9
|
+
* keyword "full" (which stops just below the status bar, not full-bleed).
|
|
10
|
+
*/
|
|
11
|
+
export type BottomSheetSnapPoint = `${number}%` | "full";
|
|
12
|
+
/**
|
|
13
|
+
* Predicate variant of `closeOnOutsidePress`: receives the DOM event and
|
|
14
|
+
* returns `true` to allow closing, `false` to ignore the press.
|
|
15
|
+
*/
|
|
16
|
+
export type CloseOnOutsidePress = (event: PointerEvent | MouseEvent) => boolean;
|
|
17
|
+
export interface BottomSheetProperties {
|
|
18
|
+
/**
|
|
19
|
+
* Determines if the bottom sheet is shown or not.
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
open?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Callback fired when the component requests to be closed (overlay press,
|
|
25
|
+
* close control, Escape, or a downward dismiss gesture).
|
|
26
|
+
* () => void;
|
|
27
|
+
*/
|
|
28
|
+
onRemove?: () => void;
|
|
29
|
+
/**
|
|
30
|
+
* Ordered list of heights the sheet can snap to. Each entry is a
|
|
31
|
+
* viewport-height percentage (e.g. "60%") or the keyword "full".
|
|
32
|
+
* @default ["60%", "90%", "full"]
|
|
33
|
+
*/
|
|
34
|
+
snapPoints?: BottomSheetSnapPoint[];
|
|
35
|
+
/**
|
|
36
|
+
* Index within `snapPoints` used as the initial snap point.
|
|
37
|
+
* @default 0
|
|
38
|
+
*/
|
|
39
|
+
defaultSnap?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Content of the sheet. Compose with BottomSheet.Header, BottomSheet.Body
|
|
42
|
+
* and BottomSheet.Footer.
|
|
43
|
+
* @TJS-type React.ReactNode
|
|
44
|
+
*/
|
|
45
|
+
children?: ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* Controls whether pressing outside should close the sheet.
|
|
48
|
+
* - boolean: enable/disable dismissal on outside press
|
|
49
|
+
* - function: receive the DOM event and return true to allow closing
|
|
50
|
+
* @default true
|
|
51
|
+
*/
|
|
52
|
+
closeOnOutsidePress?: boolean | CloseOnOutsidePress;
|
|
53
|
+
/**
|
|
54
|
+
* The attribute name to ignore when checking for outside presses, so
|
|
55
|
+
* portaled Popover/Modal content does not close the sheet.
|
|
56
|
+
* @default "data-nimbus-outside-press-ignore"
|
|
57
|
+
*/
|
|
58
|
+
ignoreAttributeName?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Determines if background scroll is locked while the sheet is open.
|
|
61
|
+
* @default true
|
|
62
|
+
*/
|
|
63
|
+
needRemoveScroll?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Explicit z-index for the sheet layer. Omitted by default: like Nimbus's
|
|
66
|
+
* own Sidebar/Modal/Popover, the sheet relies on DOM mount order rather
|
|
67
|
+
* than a z-index. Its portal mounts into the nearest Nimbus
|
|
68
|
+
* <ThemeProvider>'s own wrapper element (the same container
|
|
69
|
+
* Sidebar/Modal/Popover portal into), falling back to document.body only
|
|
70
|
+
* when no ThemeProvider is present. In both cases, later-mounted siblings
|
|
71
|
+
* paint on top of earlier ones as long as neither sets a z-index, so this
|
|
72
|
+
* keeps the sheet correctly stacked against Popover and other BottomSheet
|
|
73
|
+
* instances. Only set this to force a specific stacking order against
|
|
74
|
+
* something outside that convention.
|
|
75
|
+
*/
|
|
76
|
+
zIndex?: number;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Public props for `BottomSheet`. Combines `BottomSheetProperties` (the
|
|
80
|
+
* sheet's own behavior — visibility, snap points, dismissal, stacking) with
|
|
81
|
+
* `root` and every native `div` attribute except `color`.
|
|
82
|
+
*/
|
|
83
|
+
export type BottomSheetProps = BottomSheetProperties & {
|
|
84
|
+
/**
|
|
85
|
+
* Root element where the portal should be mounted. When provided and not
|
|
86
|
+
* null, the portal renders inside this element. Otherwise it renders into
|
|
87
|
+
* the nearest Nimbus <ThemeProvider>'s own wrapper element (same as
|
|
88
|
+
* Sidebar/Modal/Popover), so it inherits the active theme's CSS custom
|
|
89
|
+
* properties and stacks correctly against them; it falls back to
|
|
90
|
+
* document.body only when no ThemeProvider is present. Useful to scope the
|
|
91
|
+
* sheet within a container (e.g., AppShell.Chat).
|
|
92
|
+
*/
|
|
93
|
+
root?: HTMLElement | null;
|
|
94
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, "color">;
|
|
95
|
+
export interface BottomSheetHeaderProperties {
|
|
96
|
+
/**
|
|
97
|
+
* The content of the sheet header. Accepts any node (title, actions, icons).
|
|
98
|
+
* @TJS-type React.ReactNode
|
|
99
|
+
*/
|
|
100
|
+
children?: ReactNode;
|
|
101
|
+
/**
|
|
102
|
+
* The padding around the header content area.
|
|
103
|
+
* @default base
|
|
104
|
+
*/
|
|
105
|
+
padding?: BottomSheetPadding;
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Public props for `BottomSheet.Header`. Combines `BottomSheetHeaderProperties`
|
|
109
|
+
* with every native element attribute except `color` (same reason as
|
|
110
|
+
* `BottomSheetProps`: it conflicts with Box's own color-token sprinkle).
|
|
111
|
+
*/
|
|
112
|
+
export type BottomSheetHeaderProps = BottomSheetHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
113
|
+
export interface BottomSheetBodyProperties {
|
|
114
|
+
/**
|
|
115
|
+
* The scrollable content of the sheet.
|
|
116
|
+
* @TJS-type React.ReactNode
|
|
117
|
+
*/
|
|
118
|
+
children: ReactNode;
|
|
119
|
+
/**
|
|
120
|
+
* The padding around the body content area.
|
|
121
|
+
* @default base
|
|
122
|
+
*/
|
|
123
|
+
padding?: BottomSheetPadding;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Public props for `BottomSheet.Body`. Combines `BottomSheetBodyProperties`
|
|
127
|
+
* (`children` is required, unlike `Header`'s) with every native element
|
|
128
|
+
* attribute except `color`.
|
|
129
|
+
*/
|
|
130
|
+
export type BottomSheetBodyProps = BottomSheetBodyProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
131
|
+
export interface BottomSheetFooterProperties {
|
|
132
|
+
/**
|
|
133
|
+
* The content of the sheet footer.
|
|
134
|
+
* @TJS-type React.ReactNode
|
|
135
|
+
*/
|
|
136
|
+
children: ReactNode;
|
|
137
|
+
/**
|
|
138
|
+
* The padding around the footer content area.
|
|
139
|
+
* @default base
|
|
140
|
+
*/
|
|
141
|
+
padding?: BottomSheetPadding;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Public props for `BottomSheet.Footer`. Combines `BottomSheetFooterProperties`
|
|
145
|
+
* (`children` is required, same as `Body`) with every native element
|
|
146
|
+
* attribute except `color`. `BottomSheet.Footer` itself is optional to
|
|
147
|
+
* render at all — omitting it entirely is how a sheet renders without a
|
|
148
|
+
* footer region.
|
|
149
|
+
*/
|
|
150
|
+
export type BottomSheetFooterProps = BottomSheetFooterProperties & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
151
|
+
declare const BottomSheetBody: React.FC<BottomSheetBodyProps>;
|
|
152
|
+
declare const BottomSheetFooter: React.FC<BottomSheetFooterProps>;
|
|
153
|
+
declare const BottomSheetHeader: React.FC<BottomSheetHeaderProps>;
|
|
154
|
+
declare const BottomSheetBase: React.FC<BottomSheetProps>;
|
|
155
|
+
/**
|
|
156
|
+
* A mobile-first modal sheet that slides up from the bottom edge, with
|
|
157
|
+
* configurable snap points and a pointer-driven drag gesture to resize
|
|
158
|
+
* between them or dismiss by dragging down.
|
|
159
|
+
*
|
|
160
|
+
* Controlled via `open`/`onRemove`, the same contract as `Sidebar`: the
|
|
161
|
+
* component never changes its own visibility, it only requests to close (via
|
|
162
|
+
* overlay press, Escape, or a downward dismiss gesture) — the consumer sets
|
|
163
|
+
* `open` to `false` in response.
|
|
164
|
+
*
|
|
165
|
+
* Compose with `BottomSheet.Header` (optional), `BottomSheet.Body`
|
|
166
|
+
* (required), and `BottomSheet.Footer` (optional) as `children`.
|
|
167
|
+
*
|
|
168
|
+
* Behaves as a modal: renders as `role="dialog"`/`aria-modal="true"`, dims
|
|
169
|
+
* and blocks the background, traps focus while open, and restores it to the
|
|
170
|
+
* previously focused element on close. Automatically labels the dialog via
|
|
171
|
+
* `aria-labelledby` pointing at `BottomSheet.Header` when one is present;
|
|
172
|
+
* pass an explicit `aria-label`/`aria-labelledby` to override that.
|
|
173
|
+
*/
|
|
174
|
+
export declare const BottomSheet: typeof BottomSheetBase & {
|
|
175
|
+
Header: typeof BottomSheetHeader;
|
|
176
|
+
Body: typeof BottomSheetBody;
|
|
177
|
+
Footer: typeof BottomSheetFooter;
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
export {
|
|
181
|
+
BottomSheet as default,
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("@nimbus-ds/components"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","react-dom","@nimbus-ds/components","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("react-dom"),require("@nimbus-ds/components"),require("@nimbus-ds/styles")):e["@nimbus-ds/patterns"]=t(e.react,e["react-dom"],e["@nimbus-ds/components"],e["@nimbus-ds/styles"])}(global,((e,t,n,r)=>(()=>{"use strict";var o={8446:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BottomSheet=void 0;const r=n(5163).__importStar(n(8156)),o=n(7111),i=n(5280),a=n(7990),s=n(9096),u=n(3687),c=n(8555),l=n(3040),f=n(7370),d=n(3636),p=n(749),m=n(9628),y=n(8002),b=n(1051),h=n(9773),v=(e,t)=>Math.min(Math.max(e,0),Math.max(t-1,0));let _=0;t.BottomSheet=({open:e=!1,onRemove:t,snapPoints:n=[...s.DEFAULT_SNAP_POINTS],defaultSnap:m=s.DEFAULT_SNAP_INDEX,children:y,closeOnOutsidePress:g=!0,ignoreAttributeName:S=s.DEFAULT_IGNORE_ATTRIBUTE_NAME,needRemoveScroll:w=!0,zIndex:E,root:O,...T})=>{const[P,x]=(0,r.useState)((()=>v(m,n.length))),D=(0,r.useRef)(null),I=(0,r.useRef)(null),A=(0,r.useRef)(null),j=(0,r.useRef)(null);j.current=O??null;const L=(0,r.useRef)(void 0);L.current||(_+=1,L.current=`bottom-sheet-header-${_}`);const M=(0,r.useRef)(!1);(0,r.useEffect)((()=>{e?(M.current?x((e=>v(e,n.length))):x(v(m,n.length)),M.current=!0):M.current=!1}),[e,n.length]);const{snaps:N,containerHeight:R}=(0,p.useSnapPoints)(n,j),B=(0,f.useKeyboardInset)(e),{refThemeProvider:H}=(0,a.useTheme)(),C=()=>t?.(),{offset:k,isDragging:F,grabberHandlers:G}=(0,c.useDragGesture)({snaps:N,snapIndex:P,containerHeight:R,onSnapChange:x,onDismiss:C});if((0,d.useScrollLock)(e&&w),(0,l.useFocusTrap)(I,e),(0,u.useDismissHandlers)({enabled:e,panelRef:I,overlayRef:D,closeOnOutsidePress:g,ignoreAttributeName:S,onRequestClose:C}),!e)return null;const z=Math.max(0,R-k-B),U="undefined"!=typeof document?O??H?.current??document.body:null;if(!U)return null;const{style:Y,...K}=T,q="aria-label"in K||"aria-labelledby"in K;let V;const X=q?y:r.default.Children.map(y,(e=>{if(r.default.isValidElement(e)&&e.type===b.BottomSheetHeader){const t=e;return V=t.props.id??L.current,r.default.cloneElement(t,{id:V})}return e})),$={[S]:""};return(0,o.createPortal)(r.default.createElement(r.default.Fragment,null,r.default.createElement("div",{ref:D,...$,style:{position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"var(--nimbus-colors-neutral-textHigh)",opacity:.4,zIndex:E}}),r.default.createElement("div",{ref:I,role:"dialog","aria-modal":"true","aria-labelledby":q?void 0:V,tabIndex:-1,...$,...K,style:{...Y,position:"fixed",left:0,right:0,display:"flex",flexDirection:"column",backgroundColor:"var(--nimbus-colors-neutral-background)",boxSizing:"border-box",bottom:B,height:z,zIndex:E,borderTopLeftRadius:"var(--nimbus-shape-border-radius-6)",borderTopRightRadius:"var(--nimbus-shape-border-radius-6)",transition:F?"none":s.SETTLE_TRANSITION}},r.default.createElement(h.Grabber,{ref:A,onPointerDown:G.onPointerDown,snapIndex:P,snapCount:N.length,onSnapChange:x}),r.default.createElement(i.Box,{display:"flex",flexDirection:"column",flex:"1",minHeight:"0"},X))),U)},t.BottomSheet.Header=b.BottomSheetHeader,t.BottomSheet.Body=m.BottomSheetBody,t.BottomSheet.Footer=y.BottomSheetFooter,t.BottomSheet.displayName="BottomSheet"},9096:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_IGNORE_ATTRIBUTE_NAME=t.PADDING_TOKEN_MAP=t.SETTLE_TRANSITION=t.DISMISS_VELOCITY_THRESHOLD=t.DISMISS_DISTANCE_THRESHOLD=t.FULL_TOP_GAP_RATIO=t.DEFAULT_SNAP_INDEX=t.DEFAULT_SNAP_POINTS=void 0,t.DEFAULT_SNAP_POINTS=["60%","90%","full"],t.DEFAULT_SNAP_INDEX=0,t.FULL_TOP_GAP_RATIO=.053,t.DISMISS_DISTANCE_THRESHOLD=96,t.DISMISS_VELOCITY_THRESHOLD=.5,t.SETTLE_TRANSITION="height 300ms cubic-bezier(0.32, 0.72, 0, 1), bottom 300ms cubic-bezier(0.32, 0.72, 0, 1)",t.PADDING_TOKEN_MAP={none:"none",base:"4"},t.DEFAULT_IGNORE_ATTRIBUTE_NAME="data-nimbus-outside-press-ignore"},3687:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useDismissHandlers=void 0;const r=n(8156),o=[];t.useDismissHandlers=({enabled:e,panelRef:t,overlayRef:n,closeOnOutsidePress:i=!0,ignoreAttributeName:a,onRequestClose:s})=>{(0,r.useEffect)((()=>{if(!e||"undefined"==typeof document)return;const r={};o.push(r);const u=e=>{const r=e.target;if(!r)return;if(t.current?.contains(r))return;!(n.current?.contains(r)??!1)&&r instanceof Element&&r.closest(`[${a}], [data-floating-ui-portal]`)||(e=>"function"==typeof i?i(e):i)(e)&&s()},c=e=>{"Escape"===e.key&&o.at(-1)===r&&s()};return document.addEventListener("pointerdown",u,!0),document.addEventListener("keydown",c),()=>{document.removeEventListener("pointerdown",u,!0),document.removeEventListener("keydown",c);const e=o.indexOf(r);-1!==e&&o.splice(e,1)}}),[e,t,n,i,a,s])}},8555:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useDragGesture=void 0;const r=n(8156),o=n(9096),i=e=>e.map(((e,t)=>({...e,index:t}))).sort(((e,t)=>e.height-t.height));t.useDragGesture=({snaps:e,snapIndex:t,containerHeight:n,onSnapChange:a,onDismiss:s})=>{const u=e[t],[c,l]=(0,r.useState)(null),[f,d]=(0,r.useState)(!1),p=(0,r.useRef)(null),m=(0,r.useRef)(null),y=()=>{const e=m.current;e&&(document.removeEventListener("pointermove",e.move),document.removeEventListener("pointerup",e.up),document.removeEventListener("pointercancel",e.cancel),m.current=null)},b=(0,r.useCallback)((t=>{const r=i(e),a=r.at(-1)?.offset??0,s=(r[0]?.offset??n)+2*o.DISMISS_DISTANCE_THRESHOLD;return Math.min(Math.max(t,a),s)}),[e,n]),h=(0,r.useCallback)((e=>{if(!p.current)return;const t=e.timeStamp,n=t-p.current.lastTime||1,r=e.clientY-p.current.lastClientY;p.current.velocity=r/n,p.current.lastClientY=e.clientY,p.current.lastTime=t;const o=p.current.startOffset+(e.clientY-p.current.startClientY),i=b(o);p.current.currentOffset=i,l(i)}),[b]),v=(0,r.useCallback)((()=>{const n=p.current;if(p.current=null,d(!1),l(null),!n)return;const r=((e,t,n)=>{const r=i(n),a=r[0],s=e>a.offset+o.DISMISS_DISTANCE_THRESHOLD,u=t>o.DISMISS_VELOCITY_THRESHOLD&&e>=a.offset;if(s||u)return{dismiss:!0};let c=r.reduce(((t,n)=>Math.abs(e-n.offset)<Math.abs(e-t.offset)?n:t),r[0]);if(Math.abs(t)>o.DISMISS_VELOCITY_THRESHOLD){const e=r.findIndex((e=>e.index===c.index));if(t>0&&e>0){const t=r[e-1];t.height<c.height&&(c=t)}else if(t<0&&e<r.length-1){const t=r[e+1];t.height>c.height&&(c=t)}}return{dismiss:!1,index:c.index}})(n.currentOffset,n.velocity,e);r.dismiss?s():r.index!==t&&a(r.index),y()}),[e,t,a,s]),_=(0,r.useCallback)((()=>{p.current=null,d(!1),l(null),y()}),[]),g=(0,r.useCallback)((e=>{u&&(p.current={startClientY:e.clientY,startOffset:u.offset,lastClientY:e.clientY,lastTime:e.timeStamp,velocity:0,currentOffset:u.offset},d(!0),document.addEventListener("pointermove",h),document.addEventListener("pointerup",v),document.addEventListener("pointercancel",_),m.current={move:h,up:v,cancel:_})}),[u,h,v,_]);(0,r.useEffect)((()=>()=>{y(),p.current=null}),[]);const S=c??u?.offset??0;return(0,r.useMemo)((()=>({offset:S,isDragging:f,grabberHandlers:{onPointerDown:g}})),[S,f,g])}},3040:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useFocusTrap=void 0;const r=n(8156),o=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(","),i=e=>Array.from(e.querySelectorAll(o));t.useFocusTrap=(e,t)=>{(0,r.useEffect)((()=>{const n=e.current;if(!t||!n||"undefined"==typeof document)return;const r=document.activeElement;((e,t)=>e.find((e=>"separator"!==e.getAttribute("role")))??e[0]??t)(i(n),n).focus();const o=e=>{if("Tab"!==e.key)return;const t=i(n);if(0===t.length)return void e.preventDefault();const r=t[0],o=t.at(-1),a=document.activeElement;e.shiftKey&&a===r?(e.preventDefault(),o.focus()):e.shiftKey||a!==o||(e.preventDefault(),r.focus())};return n.addEventListener("keydown",o),()=>{n.removeEventListener("keydown",o),r?.focus?.()}}),[e,t])}},7370:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useKeyboardInset=void 0;const r=n(8156);t.useKeyboardInset=e=>{const[t,n]=(0,r.useState)(0);return(0,r.useEffect)((()=>{if(!e||"undefined"==typeof window||!window.visualViewport)return void n(0);const t=window.visualViewport,r=()=>{const e=window.innerHeight-t.height-t.offsetTop;n(Math.max(0,Math.round(e)))};return r(),t.addEventListener("resize",r),t.addEventListener("scroll",r),()=>{t.removeEventListener("resize",r),t.removeEventListener("scroll",r),n(0)}}),[e]),t}},3636:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useScrollLock=void 0;const r=n(8156);let o=0,i="";t.useScrollLock=e=>{(0,r.useEffect)((()=>{if(e&&"undefined"!=typeof document)return 0===o&&(i=document.body.style.overflow,document.body.style.overflow="hidden"),o+=1,()=>{o-=1,0===o&&(document.body.style.overflow=i)}}),[e])}},749:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useSnapPoints=void 0;const r=n(8156),o=n(9096);t.useSnapPoints=(e,t)=>{const[n,i]=(0,r.useState)(0),a=(0,r.useCallback)((()=>{const e=t.current?.clientHeight??("undefined"!=typeof window?window.innerHeight:0);i(e)}),[t]);(0,r.useEffect)((()=>{if(a(),"undefined"!=typeof window)return window.addEventListener("resize",a),window.addEventListener("orientationchange",a),()=>{window.removeEventListener("resize",a),window.removeEventListener("orientationchange",a)}}),[a]);return{snaps:e.map((e=>{const t=((e,t)=>{if("full"===e)return t*(1-o.FULL_TOP_GAP_RATIO);const n=/^(\d+(?:\.\d+)?)%$/.exec(e.trim());return t*(n?Number(n[1])/100:0)})(e,n);return{point:e,height:t,offset:n-t}})),containerHeight:n}}},9628:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BottomSheetBody=void 0;const r=n(5163).__importDefault(n(8156)),o=n(5280),i=n(9096);t.BottomSheetBody=({children:e,padding:t="base",...n})=>r.default.createElement(o.Box,{padding:i.PADDING_TOKEN_MAP[t],flex:"1",minHeight:"0",overflowY:"auto",...n},e),t.BottomSheetBody.displayName="BottomSheetBody"},8002:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BottomSheetFooter=void 0;const r=n(5163).__importDefault(n(8156)),o=n(5280),i=n(9096);t.BottomSheetFooter=({children:e,padding:t="base",...n})=>r.default.createElement(o.Box,{padding:i.PADDING_TOKEN_MAP[t],flex:"none",display:"flex",gap:"2",justifyContent:"flex-end",...n},e),t.BottomSheetFooter.displayName="BottomSheetFooter"},1051:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.BottomSheetHeader=void 0;const r=n(5163).__importDefault(n(8156)),o=n(5280),i=n(9096);t.BottomSheetHeader=({children:e,padding:t="base",...n})=>r.default.createElement(o.Box,{padding:i.PADDING_TOKEN_MAP[t],flex:"none",...n},e),t.BottomSheetHeader.displayName="BottomSheetHeader"},9773:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Grabber=void 0;const r=n(5163).__importStar(n(8156)),o=n(5280);t.Grabber=(0,r.forwardRef)((({onPointerDown:e,snapIndex:t,snapCount:n,onSnapChange:i},a)=>{const s=Math.max(n-1,0),u=e=>Math.min(Math.max(e,0),s);return r.default.createElement("div",{ref:a,onPointerDown:e,onKeyDown:e=>{switch(e.key){case"ArrowUp":e.preventDefault(),i(u(t+1));break;case"ArrowDown":e.preventDefault(),i(u(t-1));break;case"Home":e.preventDefault(),i(0);break;case"End":e.preventDefault(),i(s)}},role:"separator","aria-orientation":"horizontal","aria-label":"Drag to resize or dismiss","aria-valuenow":t,"aria-valuemin":0,"aria-valuemax":s,tabIndex:0,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",paddingTop:"var(--nimbus-spacing-2)",paddingBottom:"var(--nimbus-spacing-2)",touchAction:"none",cursor:"grab",boxSizing:"border-box"}},r.default.createElement(o.Box,{width:"44px",height:"4px",backgroundColor:"neutral-surfaceHighlight",borderRadius:"full"}))})),t.Grabber.displayName="Grabber"},5163:(e,t,n)=>{n.r(t),n.d(t,{__assign:()=>i,__asyncDelegator:()=>T,__asyncGenerator:()=>O,__asyncValues:()=>P,__await:()=>E,__awaiter:()=>m,__classPrivateFieldGet:()=>j,__classPrivateFieldIn:()=>M,__classPrivateFieldSet:()=>L,__createBinding:()=>b,__decorate:()=>s,__esDecorate:()=>c,__exportStar:()=>h,__extends:()=>o,__generator:()=>y,__importDefault:()=>A,__importStar:()=>I,__makeTemplateObject:()=>x,__metadata:()=>p,__param:()=>u,__propKey:()=>f,__read:()=>_,__rest:()=>a,__runInitializers:()=>l,__setFunctionName:()=>d,__spread:()=>g,__spreadArray:()=>w,__spreadArrays:()=>S,__values:()=>v});var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},i.apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function s(e,t,n,r){var o,i=arguments.length,a=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}function u(e,t){return function(n,r){t(n,r,e)}}function c(e,t,n,r,o,i){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,u=r.kind,c="getter"===u?"get":"setter"===u?"set":"value",l=!t&&e?r.static?e:e.prototype:null,f=t||(l?Object.getOwnPropertyDescriptor(l,r.name):{}),d=!1,p=n.length-1;p>=0;p--){var m={};for(var y in r)m[y]="access"===y?{}:r[y];for(var y in r.access)m.access[y]=r.access[y];m.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(e||null))};var b=(0,n[p])("accessor"===u?{get:f.get,set:f.set}:f[c],m);if("accessor"===u){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(s=a(b.get))&&(f.get=s),(s=a(b.set))&&(f.set=s),(s=a(b.init))&&o.push(s)}else(s=a(b))&&("field"===u?o.push(s):f[c]=s)}l&&Object.defineProperty(l,r.name,f),d=!0}function l(e,t,n){for(var r=arguments.length>2,o=0;o<t.length;o++)n=r?t[o].call(e,n):t[o].call(e);return r?n:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,n){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:n?"".concat(n," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function m(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{u(r.next(e))}catch(e){i(e)}}function s(e){try{u(r.throw(e))}catch(e){i(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}u((r=r.apply(e,t||[])).next())}))}function y(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,s[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,r=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],r=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}var b=Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]};function h(e,t){for(var n in e)"default"===n||Object.prototype.hasOwnProperty.call(t,n)||b(t,e,n)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function _(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(_(arguments[t]));return e}function S(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),o=0;for(t=0;t<n;t++)for(var i=arguments[t],a=0,s=i.length;a<s;a++,o++)r[o]=i[a];return r}function w(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}function E(e){return this instanceof E?(this.v=e,this):new E(e)}function O(e,t,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,o=n.apply(e,t||[]),i=[];return r={},a("next"),a("throw"),a("return"),r[Symbol.asyncIterator]=function(){return this},r;function a(e){o[e]&&(r[e]=function(t){return new Promise((function(n,r){i.push([e,t,n,r])>1||s(e,t)}))})}function s(e,t){try{(n=o[e](t)).value instanceof E?Promise.resolve(n.value.v).then(u,c):l(i[0][2],n)}catch(e){l(i[0][3],e)}var n}function u(e){s("next",e)}function c(e){s("throw",e)}function l(e,t){e(t),i.shift(),i.length&&s(i[0][0],i[0][1])}}function T(e){var t,n;return t={},r("next"),r("throw",(function(e){throw e})),r("return"),t[Symbol.iterator]=function(){return this},t;function r(r,o){t[r]=e[r]?function(t){return(n=!n)?{value:E(e[r](t)),done:!1}:o?o(t):t}:o}}function P(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,n=e[Symbol.asyncIterator];return n?n.call(e):(e=v(e),t={},r("next"),r("throw"),r("return"),t[Symbol.asyncIterator]=function(){return this},t);function r(n){t[n]=e[n]&&function(t){return new Promise((function(r,o){(function(e,t,n,r){Promise.resolve(r).then((function(t){e({value:t,done:n})}),t)})(r,o,(t=e[n](t)).done,t.value)}))}}}function x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var D=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function I(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&b(t,e,n);return D(t,e),t}function A(e){return e&&e.__esModule?e:{default:e}}function j(e,t,n,r){if("a"===n&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?r:"a"===n?r.call(e):r?r.value:t.get(e)}function L(e,t,n,r,o){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?o.call(e,n):o?o.value=n:t.set(e,n),n}function M(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},5280:e=>{e.exports=n},7990:e=>{e.exports=r},8156:t=>{t.exports=e},7111:e=>{e.exports=t}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var n=i[e]={exports:{}};return o[e](n,n.exports,a),n.exports}a.d=(e,t)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{var e=s;Object.defineProperty(e,"__esModule",{value:!0}),e.BottomSheet=void 0;const t=a(8446);var n=a(8446);Object.defineProperty(e,"BottomSheet",{enumerable:!0,get:function(){return n.BottomSheet}}),e.default=t.BottomSheet})(),s})()));
|
package/dist/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
|
|
4
4
|
|
|
5
|
-
## 2026-07-15 `1.37.0`
|
|
6
|
-
|
|
7
|
-
#### 🎉 New features
|
|
8
|
-
|
|
9
|
-
- `NavTabs`: Added an `appearance` prop to `NavTabs.Item`, with an `"ai-generative"` variant that renders a gradient border and a fixed AI icon for AI entry points such as an assistant button. ([#176](https://github.com/TiendaNube/nimbus-patterns/pull/176) by [@jffs](https://github.com/jffs))
|
|
10
|
-
|
|
11
5
|
## 2026-06-25 `1.36.0`
|
|
12
6
|
|
|
13
7
|
#### 🎉 New features
|
package/dist/NavTabs/index.d.ts
CHANGED
|
@@ -4,7 +4,12 @@ import { BoxProperties } from '@nimbus-ds/components';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
6
6
|
|
|
7
|
-
export interface
|
|
7
|
+
export interface NavTabsItemProperties {
|
|
8
|
+
/**
|
|
9
|
+
* Icon element to be rendered inside the button.
|
|
10
|
+
* @TJS-type React.ReactNode
|
|
11
|
+
*/
|
|
12
|
+
icon: ReactNode;
|
|
8
13
|
/**
|
|
9
14
|
* Controls whether the button is active or not.
|
|
10
15
|
*/
|
|
@@ -23,30 +28,7 @@ export interface NavTabsItemBaseProperties {
|
|
|
23
28
|
*/
|
|
24
29
|
ariaLabel: string;
|
|
25
30
|
}
|
|
26
|
-
export
|
|
27
|
-
/**
|
|
28
|
-
* Visual variant of the button.
|
|
29
|
-
* "ai-generative" renders a fixed AI icon with a gradient border and does not accept a custom `icon`.
|
|
30
|
-
* @default "neutral"
|
|
31
|
-
*/
|
|
32
|
-
appearance?: "neutral";
|
|
33
|
-
/**
|
|
34
|
-
* Icon element to be rendered inside the button.
|
|
35
|
-
* @TJS-type React.ReactNode
|
|
36
|
-
*/
|
|
37
|
-
icon: ReactNode;
|
|
38
|
-
}
|
|
39
|
-
export interface NavTabsItemAIGenerativeProperties extends Omit<NavTabsItemBaseProperties, "active"> {
|
|
40
|
-
/**
|
|
41
|
-
* Visual variant of the button.
|
|
42
|
-
* "ai-generative" renders a fixed AI icon with a gradient border and does not accept a custom `icon`.
|
|
43
|
-
*/
|
|
44
|
-
appearance: "ai-generative";
|
|
45
|
-
icon?: never;
|
|
46
|
-
active?: never;
|
|
47
|
-
}
|
|
48
|
-
export type NavTabsItemVariantProperties = NavTabsItemNeutralProperties | NavTabsItemAIGenerativeProperties;
|
|
49
|
-
export type NavTabsItemProps = NavTabsItemVariantProperties & Omit<BoxProperties, "onClick"> & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
31
|
+
export type NavTabsItemProps = NavTabsItemProperties & Omit<BoxProperties, "onClick"> & Omit<HTMLAttributes<HTMLElement>, "color">;
|
|
50
32
|
export declare const NavTabsItem: React.FC<NavTabsItemProps>;
|
|
51
33
|
export interface NavTabsComponents {
|
|
52
34
|
Item: typeof NavTabsItem;
|