@ngrok/mantle 0.79.2 → 0.80.0
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/accordion.d.ts +169 -12
- package/dist/accordion.js +1 -1
- package/dist/agent.json +1 -1
- package/dist/alert-dialog.d.ts +496 -30
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.d.ts +129 -9
- package/dist/alert.js +1 -1
- package/dist/anchor-_2meGDfj.js +1 -0
- package/dist/anchor.d.ts +2 -2
- package/dist/anchor.js +1 -1
- package/dist/as-child-D23mGo4f.d.ts +49 -0
- package/dist/badge.d.ts +44 -5
- package/dist/badge.js +1 -1
- package/dist/breadcrumb.d.ts +214 -14
- package/dist/breadcrumb.js +1 -1
- package/dist/button-5WsvzIQ6.js +1 -0
- package/dist/{button-DcXOWUYo.d.ts → button-BPMwa2jN.d.ts} +3 -3
- package/dist/button-D9n09xUg.js +1 -0
- package/dist/button.d.ts +3 -3
- package/dist/button.js +1 -1
- package/dist/calendar.d.ts +0 -3
- package/dist/calendar.js +1 -1
- package/dist/card.d.ts +146 -9
- package/dist/card.js +1 -1
- package/dist/centered-layout.d.ts +224 -8
- package/dist/centered-layout.js +1 -1
- package/dist/checkbox-Cq17y0-R.js +1 -0
- package/dist/checkbox.d.ts +12 -10
- package/dist/checkbox.js +1 -1
- package/dist/choice-Cc8dA5r8.js +1 -0
- package/dist/choice-Ct0KK8jw.d.ts +269 -0
- package/dist/choice.d.ts +1 -252
- package/dist/choice.js +1 -1
- package/dist/code-block.d.ts +270 -50
- package/dist/code-block.js +6 -6
- package/dist/code-block_highlight-utils.js +1 -1
- package/dist/code.d.ts +3 -2
- package/dist/code.js +1 -1
- package/dist/combobox.d.ts +190 -11
- package/dist/combobox.js +1 -1
- package/dist/command.d.ts +285 -81
- package/dist/command.js +1 -1
- package/dist/compose-refs-BdBMM9ga.js +1 -0
- package/dist/data-table.d.ts +33 -5
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +79 -6
- package/dist/description-list.js +1 -1
- package/dist/dialog-CQ2C6vkE.js +1 -0
- package/dist/dialog.d.ts +239 -18
- package/dist/dialog.js +1 -1
- package/dist/dropdown-menu-CSCDdA3K.js +1 -0
- package/dist/{dropdown-menu-DP_Ne9Mr.d.ts → dropdown-menu-CoyozLzy.d.ts} +170 -29
- package/dist/dropdown-menu.d.ts +2 -2
- package/dist/dropdown-menu.js +1 -1
- package/dist/empty.d.ts +1 -1
- package/dist/empty.js +1 -1
- package/dist/field.d.ts +596 -45
- package/dist/field.js +1 -1
- package/dist/flag.d.ts +0 -3
- package/dist/flag.js +1 -1
- package/dist/hooks.d.ts +3 -4
- package/dist/hooks.js +1 -1
- package/dist/hover-card.d.ts +54 -4
- package/dist/hover-card.js +1 -1
- package/dist/{icon-Cevjo93X.d.ts → icon-BDqpcZ-n.d.ts} +1 -1
- package/dist/icon-CGgMKpJg.js +1 -0
- package/dist/{icon-button-B7uEj1qq.d.ts → icon-button-C1AfGnQx.d.ts} +11 -60
- package/dist/icon-button-DiOhreJD.js +1 -0
- package/dist/icon.d.ts +2 -2
- package/dist/icon.js +1 -1
- package/dist/icons.d.ts +5 -13
- package/dist/icons.js +1 -1
- package/dist/{in-view-nkSOdED2.d.ts → in-view-DDEGUKDR.d.ts} +17 -9
- package/dist/index-B8mIWKIU.d.ts +211 -0
- package/dist/{index-Rv8RL7xy.d.ts → index-BtwKJTLq.d.ts} +1 -1
- package/dist/{index-BivvYYs-.d.ts → index-C2jj8U4a.d.ts} +8 -5
- package/dist/index-CdPXa9h1.d.ts +1 -0
- package/dist/{index-D47aqlpz.d.ts → index-DA4ig3gj.d.ts} +1 -1
- package/dist/input-CVyAVbim.js +1 -0
- package/dist/{types-C19IR7jf.d.ts → input-DV9M6K4v.d.ts} +42 -2
- package/dist/input.d.ts +4 -55
- package/dist/input.js +1 -1
- package/dist/{label-v2-bv98k.d.ts → label-C6YH9skg.d.ts} +8 -6
- package/dist/label-D-D11mlp.js +1 -0
- package/dist/label.d.ts +1 -1
- package/dist/label.js +1 -1
- package/dist/list.d.ts +150 -6
- package/dist/list.js +1 -1
- package/dist/llms.txt +1 -1
- package/dist/main.d.ts +20 -4
- package/dist/main.js +1 -1
- package/dist/mantle.css +21 -7
- package/dist/media-object.d.ts +27 -4
- package/dist/media-object.js +1 -1
- package/dist/multi-select.d.ts +312 -15
- package/dist/multi-select.js +1 -1
- package/dist/otp-input.d.ts +129 -5
- package/dist/otp-input.js +1 -1
- package/dist/pagination.d.ts +70 -6
- package/dist/pagination.js +1 -1
- package/dist/popover-CBMADtjV.js +1 -0
- package/dist/popover.d.ts +1 -181
- package/dist/popover.js +1 -1
- package/dist/primitive-CJRIlrLz.d.ts +31 -0
- package/dist/primitive-DCPHJsRs.js +1 -0
- package/dist/progress.js +1 -1
- package/dist/qr-code.d.ts +113 -5
- package/dist/qr-code.js +1 -1
- package/dist/radio-group.d.ts +128 -23
- package/dist/radio-group.js +1 -1
- package/dist/{resolve-pre-rendered-props-C3e5Auo3.js → resolve-pre-rendered-props-C9uaM9-V.js} +1 -1
- package/dist/sandboxed-on-click.d.ts +2 -2
- package/dist/sandboxed-on-click.js +1 -1
- package/dist/select-SR_9-bxA.js +1 -0
- package/dist/select-idm1jy7y.d.ts +600 -0
- package/dist/select.d.ts +1 -1
- package/dist/select.js +1 -1
- package/dist/selectable-list.d.ts +252 -298
- package/dist/selectable-list.js +1 -1
- package/dist/separator-B5UmkVRL.d.ts +75 -0
- package/dist/separator-bpE_kooz.js +1 -0
- package/dist/separator.d.ts +1 -52
- package/dist/separator.js +1 -1
- package/dist/sheet.d.ts +295 -21
- package/dist/sheet.js +1 -1
- package/dist/skeleton-CsbUHbBA.js +1 -0
- package/dist/skeleton.d.ts +4 -7
- package/dist/skeleton.js +1 -1
- package/dist/skip-to-main-link.d.ts +24 -4
- package/dist/skip-to-main-link.js +1 -1
- package/dist/slot-CDk0Bb9z.js +1 -0
- package/dist/slot.d.ts +1 -1
- package/dist/slot.js +1 -1
- package/dist/{sort-BPX2Fk9t.js → sort-B_DDQcVD.js} +1 -1
- package/dist/split-button.d.ts +28 -13
- package/dist/split-button.js +1 -1
- package/dist/{svg-only-BFeFS1aa.d.ts → svg-only-CdI_v82i.d.ts} +1 -1
- package/dist/svg-only-d-nMCfAI.js +1 -0
- package/dist/switch.d.ts +9 -6
- package/dist/switch.js +1 -1
- package/dist/table-DUSvU_Jw.d.ts +875 -0
- package/dist/table-GDkapNFi.js +1 -0
- package/dist/table.d.ts +1 -1
- package/dist/table.js +1 -1
- package/dist/tabs.d.ts +139 -12
- package/dist/tabs.js +1 -1
- package/dist/text-area.d.ts +1 -1
- package/dist/text-area.js +1 -1
- package/dist/theme-provider-BftkIiZn.js +1 -0
- package/dist/theme-switcher.d.ts +110 -29
- package/dist/theme-switcher.js +1 -1
- package/dist/theme-wVnzzx2F.js +1 -0
- package/dist/theme.d.ts +53 -14
- package/dist/theme.js +1 -1
- package/dist/toast-DKgMRv4F.js +1 -0
- package/dist/toast.d.ts +98 -10
- package/dist/toast.js +1 -1
- package/dist/tooltip.d.ts +28 -1
- package/dist/tooltip.js +1 -1
- package/dist/{traffic-policy-file-0g5RXFqu.js → traffic-policy-file-CF1lbWtp.js} +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/virtual-UrzmaSQm.js +1 -0
- package/dist/well.d.ts +3 -3
- package/dist/well.js +1 -1
- package/package.json +5 -5
- package/dist/anchor-C_tjSVy6.js +0 -1
- package/dist/as-child-CYEVu1WY.d.ts +0 -23
- package/dist/button-5t6-JS_I.js +0 -1
- package/dist/button-ClC60Nzg.js +0 -1
- package/dist/checkbox-DJ2xl7Rc.js +0 -1
- package/dist/choice-DOdyNzFC.js +0 -1
- package/dist/compose-refs-Cjf2gfB8.js +0 -1
- package/dist/dialog-ZCgG41hx.js +0 -1
- package/dist/dropdown-menu-Bt1aKF1g.js +0 -1
- package/dist/icon-CDtYjF_H.js +0 -1
- package/dist/icon-button-DV2-GZHf.js +0 -1
- package/dist/index-g2rfwNCH.d.ts +0 -1
- package/dist/input-Ct1YOqSy.js +0 -1
- package/dist/label-BMlHW_2D.js +0 -1
- package/dist/popover-D5WxxnBY.js +0 -1
- package/dist/primitive-C64-m48O.d.ts +0 -13
- package/dist/primitive-M-kZdNIS.js +0 -1
- package/dist/select-Bwt2YduR.d.ts +0 -345
- package/dist/select-D-5u0Blc.js +0 -1
- package/dist/separator-kBnnv3Cw.js +0 -1
- package/dist/skeleton-Bu3tgNcW.js +0 -1
- package/dist/slot-DmPrjM7N.js +0 -1
- package/dist/svg-only-DDx6FtJd.js +0 -1
- package/dist/table-CPH2md2-.js +0 -1
- package/dist/table-CwFHXC-G.d.ts +0 -414
- package/dist/theme-D8kZCOzM.js +0 -1
- package/dist/theme-provider-Djj_jBo6.js +0 -1
- package/dist/toast-D3ntBmn4.js +0 -1
- package/dist/virtual-DZMBu7Ch.js +0 -1
package/dist/selectable-list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./checkbox-
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{n as t,t as n}from"./checkbox-Cq17y0-R.js";import{t as r}from"./choice-Cc8dA5r8.js";import{n as i,t as a}from"./input-CVyAVbim.js";import{n as o,r as s,t as c}from"./virtual-UrzmaSQm.js";import{cloneElement as l,createContext as u,isValidElement as d,useCallback as f,useContext as p,useId as m,useMemo as h,useState as g}from"react";import _ from"tiny-invariant";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{MagnifyingGlassIcon as b}from"@phosphor-icons/react/MagnifyingGlass";function x(e){return e.labelText==null?typeof e.label==`string`?e.label:``:e.labelText}function S(e,t){let n=t.trim().toLowerCase();return n===``?e:e.filter(e=>x(e).toLowerCase().includes(n))}function C(e,t){return e.includes(t)?e.filter(e=>e!==t):[...e,t]}function w(e,t){let n=0,r=0;for(let i of e)i.disabled||(n+=1,t.has(i.value)&&(r+=1));return n===0?{allSelected:!1,someSelected:!1}:{allSelected:r===n,someSelected:r>0}}const T=u(null);function E(e){let t=p(T);return _(t,`SelectableList.${e} must be rendered inside SelectableList.Root.`),t}const D=[],O=({className:t,defaultQuery:n,defaultValue:r,filter:i,onQueryChange:a,onValueChange:o,options:s,query:c,ref:l,value:u,...d})=>{let p=m(),_=u!=null,[y,b]=g(r??D),x=_?u:y,w=c!=null,[E,O]=g(n??``),k=w?c:E,A=f(e=>{_||b(e),o?.(e)},[_,o]),j=f(e=>{w||O(e),a?.(e)},[w,a]),M=h(()=>new Set(x),[x]),N=h(()=>new Set(s.filter(e=>e.disabled).map(e=>e.value)),[s]),P=h(()=>i==null?S(s,k):s.filter(e=>i(e,k)),[s,k,i]),F=h(()=>({listId:p,filteredOptions:P,query:k,setQuery:j,selectedValues:x,selectedSet:M,disabledSet:N,toggle:e=>{N.has(e)||A(C(x,e))},setSelection:A}),[p,P,k,j,x,M,N,A]);return v(T.Provider,{value:F,children:v(`div`,{ref:l,"data-slot":`selectable-list`,className:e(`flex w-full flex-col gap-3`,t),...d})})};O.displayName=`SelectableListRoot`;const k=({"aria-label":e=`Filter`,ref:t,...n})=>{let{query:r,setQuery:o}=E(`Filter`);return y(a,{ref:t,type:`text`,"data-slot":`selectable-list-filter`,"aria-label":e,value:r,onChange:e=>o(e.target.value),...n,children:[v(b,{}),v(i,{})]})};k.displayName=`SelectableListFilter`;const A=({children:r,className:i,ref:a,...o})=>{let{filteredOptions:s,selectedValues:c,selectedSet:l,setSelection:u}=E(`SelectAll`),d=m(),{allSelected:f,someSelected:p}=w(s,l),h=t({allSelected:f,someSelected:p}),g=s.some(e=>!e.disabled),_=()=>{let e=s.filter(e=>!e.disabled).map(e=>e.value);if(f){let t=new Set(e);u(c.filter(e=>!t.has(e)));return}u([...new Set([...c,...e])])};return y(`label`,{ref:a,htmlFor:d,"data-slot":`selectable-list-select-all`,className:e(`text-strong flex cursor-pointer items-center gap-2 text-sm font-medium font-sans`,i),...o,children:[v(n,{id:d,checked:h,onChange:_,disabled:!g}),r]})};A.displayName=`SelectableListSelectAll`;function j(e,t){return`${e}-control-${encodeURIComponent(t)}`}const M=({children:t,className:i,ref:a,value:s,...c})=>{let{listId:l,selectedSet:u,disabledSet:d,toggle:f}=E(`Item`),p=j(l,s),m=u.has(s),h=d.has(s);return v(o,{ref:a,asChild:!0,selected:m,disabled:h,className:e(`px-2 py-1.5 text-sm`,`cursor-pointer aria-disabled:cursor-default`,i),...c,"data-slot":`selectable-list-item`,"data-value":s,children:y(r.Root,{id:p,disabled:h,children:[v(r.Indicator,{role:`gridcell`,children:v(n,{checked:m,onChange:()=>f(s),tabIndex:-1})}),v(r.Content,{role:`gridcell`,children:t})]})})};M.displayName=`SelectableListItem`;const N=e=>v(r.Label,{"data-slot":`selectable-list-item-title`,...e});N.displayName=`SelectableListItemTitle`;const P=e=>v(r.Description,{"data-slot":`selectable-list-item-description`,...e});P.displayName=`SelectableListItemDescription`;function F(e){return y(M,{value:e.value,children:[v(N,{children:e.label}),e.description!=null&&v(P,{children:e.description})]})}function I(e,t){let n=[],r=[];for(let i of e){let e=t(i);d(e)&&(n.push(l(e,{key:i.value})),r.push(i))}return{items:n,options:r}}function L(e,t){let{filteredOptions:n,listId:r,toggle:i}=E(e),a=t??F,{items:o,options:s}=h(()=>I(n,a),[n,a]),c=f(e=>{let t=s[e];t!=null&&i(t.value)},[s,i]),l=f(e=>{let t=s[e];return t==null?``:j(r,t.value)},[s,r]),u=f(e=>s[e]?.disabled===!0,[s]);return{isEmpty:o.length===0,isItemDisabled:u,onActivate:c,itemId:l,items:o}}const R=({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:c}=L(`Viewport`,e);return r?null:v(s,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:c})};R.displayName=`SelectableListViewport`;const z=({children:e,ref:t,...n})=>{let{isEmpty:r,isItemDisabled:i,onActivate:a,itemId:o,items:s}=L(`VirtualViewport`,e);return r?null:v(c,{ref:t,"data-slot":`selectable-list-viewport`,semantics:`grid`,...n,"aria-multiselectable":!0,isItemDisabled:i,onActivate:a,itemId:o,children:s})};z.displayName=`SelectableListVirtualViewport`;const B=({children:t,className:n,ref:r,...i})=>{let{filteredOptions:a}=E(`Empty`),o=a.length===0;return v(`div`,{ref:r,"data-slot":`selectable-list-empty`,role:`status`,className:e(!o&&`sr-only`,o&&`text-muted border-popover bg-popover flex items-center justify-center rounded-md border px-3 py-8 text-center text-sm`,n),...i,children:o?t:null})};B.displayName=`SelectableListEmpty`;const V={Root:O,Filter:k,SelectAll:A,Viewport:R,VirtualViewport:z,Item:M,ItemTitle:N,ItemDescription:P,Empty:B};export{V as SelectableList,S as filterSelectableOptions,x as optionLabelText,w as summarizeSelection,C as toggleSelectionValue};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { n as WithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
+
import { ComponentProps, HTMLAttributes } from "react";
|
|
3
|
+
//#region src/components/separator/separator.d.ts
|
|
4
|
+
declare const orientations: readonly ["horizontal", "vertical"];
|
|
5
|
+
type Orientation = (typeof orientations)[number];
|
|
6
|
+
/**
|
|
7
|
+
* A container to layout a group of horizontal separators and other children.
|
|
8
|
+
* Overrides all children `Separator`s to be `orientation="horizontal"`.
|
|
9
|
+
*
|
|
10
|
+
* @see https://mantle.ngrok.com/components/structure/separator
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <HorizontalSeparatorGroup>
|
|
15
|
+
* <Separator />
|
|
16
|
+
* <h3>ngrok mantle</h3>
|
|
17
|
+
* <Separator />
|
|
18
|
+
* </HorizontalSeparatorGroup>
|
|
19
|
+
*
|
|
20
|
+
* <HorizontalSeparatorGroup>
|
|
21
|
+
* <h3>ngrok mantle</h3>
|
|
22
|
+
* <Separator />
|
|
23
|
+
* </HorizontalSeparatorGroup>
|
|
24
|
+
*
|
|
25
|
+
* <HorizontalSeparatorGroup>
|
|
26
|
+
* <Separator />
|
|
27
|
+
* <h3>ngrok mantle</h3>
|
|
28
|
+
* </HorizontalSeparatorGroup>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
declare const HorizontalSeparatorGroup: ({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild) => import("react").JSX.Element;
|
|
32
|
+
type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
|
|
33
|
+
/**
|
|
34
|
+
* Either `horizontal` or `vertical`.
|
|
35
|
+
*
|
|
36
|
+
* @default "horizontal"
|
|
37
|
+
*/
|
|
38
|
+
orientation?: Orientation;
|
|
39
|
+
/**
|
|
40
|
+
* If `true`, the separator will be rendered with all accessibility-related attributes and role="separator".
|
|
41
|
+
* If `false`, the separator is purely decorative and all accessibility-related attributes
|
|
42
|
+
* are updated so that that the rendered element is removed from the accessibility tree.
|
|
43
|
+
*
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
semantic?: boolean;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Visually or semantically separates content.
|
|
50
|
+
*
|
|
51
|
+
* Rendered in the shared `separator` color token (`gray-500/20` in light,
|
|
52
|
+
* `gray-600/20` in dark, `black` in high contrast). Reuse that exact color on
|
|
53
|
+
* your own dividers with `bg-separator` / `border-separator` / `divide-separator`
|
|
54
|
+
* so they stay consistent with separators across the system.
|
|
55
|
+
*
|
|
56
|
+
* @see https://mantle.ngrok.com/components/structure/separator
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```tsx
|
|
60
|
+
* <Separator className="my-4" />
|
|
61
|
+
*
|
|
62
|
+
* <Separator className="my-4" semantic />
|
|
63
|
+
*
|
|
64
|
+
* <div className="flex h-5 items-center gap-4 text-sm">
|
|
65
|
+
* Blog
|
|
66
|
+
* <Separator orientation="vertical" />
|
|
67
|
+
* Docs
|
|
68
|
+
* <Separator orientation="vertical" />
|
|
69
|
+
* Source
|
|
70
|
+
* </div>
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
73
|
+
declare const Separator: ({ asChild, children, className, orientation: propOrientation, ref, semantic, ...props }: SeparatorProps) => import("react").JSX.Element;
|
|
74
|
+
//#endregion
|
|
75
|
+
export { Separator as n, HorizontalSeparatorGroup as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{createContext as n,useContext as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=[`horizontal`,`vertical`],o=n({}),s={orientation:`horizontal`},c=({className:n,children:r,asChild:a,...c})=>{let l=a?t:`div`;return i(o.Provider,{value:s,children:i(l,{"data-slot":`horizontal-separator-group`,"data-horizontal-separator-group":!0,className:e(`group flex items-center gap-2 [&>*:not([data-separator])]:shrink-0`,n),...c,children:r})})},l=({asChild:n=!1,children:a,className:s,orientation:c,ref:l,semantic:d=!1,...f})=>{let p=n?t:`div`,m=r(o).orientation??(u(c)?c:`horizontal`),h=d?{"aria-orientation":m===`vertical`?m:void 0,role:`separator`}:{role:`none`};return i(p,{"data-slot":`separator`,className:e(`separator`,`bg-separator`,m===`horizontal`?`h-px w-full group-data-horizontal-separator-group:flex-1`:`h-full w-px`,s),"data-orientation":m,"data-separator":!0,...h,ref:l,...n?{children:a}:{},...f})};function u(e){return typeof e==`string`&&a.includes(e)}export{l as n,c as t};
|
package/dist/separator.d.ts
CHANGED
|
@@ -1,53 +1,2 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
import { ComponentProps, HTMLAttributes } from "react";
|
|
3
|
-
//#region src/components/separator/separator.d.ts
|
|
4
|
-
declare const orientations: readonly ["horizontal", "vertical"];
|
|
5
|
-
type Orientation = (typeof orientations)[number];
|
|
6
|
-
declare function HorizontalSeparatorGroup({ className, children, asChild, ...props }: HTMLAttributes<HTMLDivElement> & WithAsChild): import("react").JSX.Element;
|
|
7
|
-
declare namespace HorizontalSeparatorGroup {
|
|
8
|
-
var displayName: string;
|
|
9
|
-
}
|
|
10
|
-
type SeparatorProps = ComponentProps<"div"> & WithAsChild & {
|
|
11
|
-
/**
|
|
12
|
-
* Either `horizontal` or `vertical`.
|
|
13
|
-
*
|
|
14
|
-
* @default "horizontal"
|
|
15
|
-
*/
|
|
16
|
-
orientation?: Orientation;
|
|
17
|
-
/**
|
|
18
|
-
* If `true`, the separator will be rendered with all accessibility-related attributes and role="separator".
|
|
19
|
-
* If `false`, the separator is purely decorative and all accessibility-related attributes
|
|
20
|
-
* are updated so that that the rendered element is removed from the accessibility tree.
|
|
21
|
-
*
|
|
22
|
-
* @default false
|
|
23
|
-
*/
|
|
24
|
-
semantic?: boolean;
|
|
25
|
-
};
|
|
26
|
-
/**
|
|
27
|
-
* Visually or semantically separates content.
|
|
28
|
-
*
|
|
29
|
-
* Rendered in the shared `separator` color token (`gray-500/20` in light,
|
|
30
|
-
* `gray-600/20` in dark, `black` in high contrast). Reuse that exact color on
|
|
31
|
-
* your own dividers with `bg-separator` / `border-separator` / `divide-separator`
|
|
32
|
-
* so they stay consistent with separators across the system.
|
|
33
|
-
*
|
|
34
|
-
* @see https://mantle.ngrok.com/components/structure/separator
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```tsx
|
|
38
|
-
* <Separator className="my-4" />
|
|
39
|
-
*
|
|
40
|
-
* <Separator className="my-4" semantic />
|
|
41
|
-
*
|
|
42
|
-
* <div className="flex h-5 items-center gap-4 text-sm">
|
|
43
|
-
* Blog
|
|
44
|
-
* <Separator orientation="vertical" />
|
|
45
|
-
* Docs
|
|
46
|
-
* <Separator orientation="vertical" />
|
|
47
|
-
* Source
|
|
48
|
-
* </div>
|
|
49
|
-
* ```
|
|
50
|
-
*/
|
|
51
|
-
declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
52
|
-
//#endregion
|
|
1
|
+
import { n as Separator, t as HorizontalSeparatorGroup } from "./separator-B5UmkVRL.js";
|
|
53
2
|
export { HorizontalSeparatorGroup, Separator };
|
package/dist/separator.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{n as e,t}from"./separator-
|
|
1
|
+
import{n as e,t}from"./separator-bpE_kooz.js";export{t as HorizontalSeparatorGroup,e as Separator};
|
package/dist/sheet.d.ts
CHANGED
|
@@ -1,9 +1,83 @@
|
|
|
1
1
|
import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
|
|
2
|
-
import {
|
|
3
|
-
import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-
|
|
4
|
-
import { HTMLAttributes } from "react";
|
|
2
|
+
import { a as Root, n as Content$1, o as Title$1, r as Description$1 } from "./primitive-CJRIlrLz.js";
|
|
3
|
+
import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-C1AfGnQx.js";
|
|
4
|
+
import { ComponentProps, HTMLAttributes } from "react";
|
|
5
5
|
import { VariantProps } from "class-variance-authority";
|
|
6
6
|
//#region src/components/sheet/sheet.d.ts
|
|
7
|
+
declare const SheetVariants: (props?: ({
|
|
8
|
+
side?: "left" | "right" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
type SheetContentProps = ComponentProps<typeof Content$1> & VariantProps<typeof SheetVariants> & {
|
|
11
|
+
/**
|
|
12
|
+
* The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.
|
|
13
|
+
*
|
|
14
|
+
* By default, a `Sheet`'s content width is responsive with a default
|
|
15
|
+
* preferred width: the maximum width of the `Sheet.Content` when the window
|
|
16
|
+
* viewport is larger than the mobile breakpoint (`sm`).
|
|
17
|
+
*
|
|
18
|
+
* @default `sm:max-w-[30rem]`
|
|
19
|
+
*/
|
|
20
|
+
preferredWidth?: `sm:max-w-${string}`;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.
|
|
24
|
+
* Renders on top of the overlay backdrop.
|
|
25
|
+
* Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.
|
|
26
|
+
*
|
|
27
|
+
* `Sheet.Content` renders its floating layer at Tailwind `z-50`, Mantle's
|
|
28
|
+
* shared floating z-index. When multiple shared layers are open, the most
|
|
29
|
+
* recently mounted layer renders on top.
|
|
30
|
+
*
|
|
31
|
+
* @see https://mantle.ngrok.com/components/overlays/sheet#sheetcontent
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* // Sheet without a trigger (e.g. router controlled)
|
|
36
|
+
* <Sheet open onOpenChange={() => onClose()}>
|
|
37
|
+
* <Sheet.Content>
|
|
38
|
+
* <Sheet.Header>
|
|
39
|
+
* <Sheet.TitleGroup>
|
|
40
|
+
* <Sheet.Title>Are you absolutely sure?</Sheet.Title>
|
|
41
|
+
* <Sheet.Actions>
|
|
42
|
+
* <IconButton
|
|
43
|
+
* appearance="ghost"
|
|
44
|
+
* intent="neutral"
|
|
45
|
+
* type="button"
|
|
46
|
+
* icon={<TrashSimple />}
|
|
47
|
+
* label="Delete"
|
|
48
|
+
* />
|
|
49
|
+
* <Separator orientation="vertical" className="h-[80%]" />
|
|
50
|
+
* <Sheet.CloseIconButton />
|
|
51
|
+
* </Sheet.Actions>
|
|
52
|
+
* </Sheet.TitleGroup>
|
|
53
|
+
* <Sheet.Description>
|
|
54
|
+
* This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
55
|
+
* </Sheet.Description>
|
|
56
|
+
* </Sheet.Header>
|
|
57
|
+
* <Sheet.Body>
|
|
58
|
+
* <p>
|
|
59
|
+
* Consequat do voluptate culpa fugiat consequat nostrud duis
|
|
60
|
+
* aliqua minim. Tempor voluptate cillum elit velit. Voluptate
|
|
61
|
+
* aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
|
|
62
|
+
* proident amet.
|
|
63
|
+
* </p>
|
|
64
|
+
* </Sheet.Body>
|
|
65
|
+
* <Sheet.Footer>
|
|
66
|
+
* <Sheet.Close asChild>
|
|
67
|
+
* <Button type="button" appearance="outlined" intent="neutral">Close</Button>
|
|
68
|
+
* </Sheet.Close>
|
|
69
|
+
* <Button type="button" appearance="filled" intent="neutral">
|
|
70
|
+
* Save
|
|
71
|
+
* </Button>
|
|
72
|
+
* </Sheet.Footer>
|
|
73
|
+
* </Sheet.Content>
|
|
74
|
+
* </Sheet.Root>
|
|
75
|
+
* ```
|
|
76
|
+
*/
|
|
77
|
+
declare const Content: {
|
|
78
|
+
({ children, className, preferredWidth, side, ref, ...props }: SheetContentProps): import("react").JSX.Element;
|
|
79
|
+
displayName: string;
|
|
80
|
+
};
|
|
7
81
|
type SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon" | "appearance" | "intent">> & {
|
|
8
82
|
/**
|
|
9
83
|
* The visual style of the close icon button. Optional here —
|
|
@@ -240,6 +314,219 @@ declare const Footer: {
|
|
|
240
314
|
({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
|
|
241
315
|
displayName: string;
|
|
242
316
|
};
|
|
317
|
+
/**
|
|
318
|
+
* The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.
|
|
319
|
+
* Defaults to an `h2` element, but can be changed via the `asChild` prop.
|
|
320
|
+
*
|
|
321
|
+
* @see https://mantle.ngrok.com/components/overlays/sheet#sheettitle
|
|
322
|
+
*
|
|
323
|
+
* @example
|
|
324
|
+
* ```tsx
|
|
325
|
+
* // Sheet without a trigger (e.g. router controlled)
|
|
326
|
+
* <Sheet open onOpenChange={() => onClose()}>
|
|
327
|
+
* <Sheet.Content>
|
|
328
|
+
* <Sheet.Header>
|
|
329
|
+
* <Sheet.TitleGroup>
|
|
330
|
+
* <Sheet.Title>Are you absolutely sure?</Sheet.Title>
|
|
331
|
+
* <Sheet.Actions>
|
|
332
|
+
* <IconButton
|
|
333
|
+
* appearance="ghost"
|
|
334
|
+
* intent="neutral"
|
|
335
|
+
* type="button"
|
|
336
|
+
* icon={<TrashSimple />}
|
|
337
|
+
* label="Delete"
|
|
338
|
+
* />
|
|
339
|
+
* <Separator orientation="vertical" className="h-[80%]" />
|
|
340
|
+
* <Sheet.CloseIconButton />
|
|
341
|
+
* </Sheet.Actions>
|
|
342
|
+
* </Sheet.TitleGroup>
|
|
343
|
+
* <Sheet.Description>
|
|
344
|
+
* This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
345
|
+
* </Sheet.Description>
|
|
346
|
+
* </Sheet.Header>
|
|
347
|
+
* <Sheet.Body>
|
|
348
|
+
* <p>
|
|
349
|
+
* Consequat do voluptate culpa fugiat consequat nostrud duis
|
|
350
|
+
* aliqua minim. Tempor voluptate cillum elit velit. Voluptate
|
|
351
|
+
* aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
|
|
352
|
+
* proident amet.
|
|
353
|
+
* </p>
|
|
354
|
+
* </Sheet.Body>
|
|
355
|
+
* <Sheet.Footer>
|
|
356
|
+
* <Sheet.Close asChild>
|
|
357
|
+
* <Button type="button" appearance="outlined" intent="neutral">Close</Button>
|
|
358
|
+
* </Sheet.Close>
|
|
359
|
+
* <Button type="button" appearance="filled" intent="neutral">
|
|
360
|
+
* Save
|
|
361
|
+
* </Button>
|
|
362
|
+
* </Sheet.Footer>
|
|
363
|
+
* </Sheet.Content>
|
|
364
|
+
* </Sheet.Root>
|
|
365
|
+
* ```
|
|
366
|
+
*/
|
|
367
|
+
declare const Title: {
|
|
368
|
+
({ className, ref, ...props }: ComponentProps<typeof Title$1>): import("react").JSX.Element;
|
|
369
|
+
displayName: string | undefined;
|
|
370
|
+
};
|
|
371
|
+
/**
|
|
372
|
+
* A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.
|
|
373
|
+
*
|
|
374
|
+
* @see https://mantle.ngrok.com/components/overlays/sheet#sheettitlegroup
|
|
375
|
+
*
|
|
376
|
+
* @example
|
|
377
|
+
* ```tsx
|
|
378
|
+
* // Sheet without a trigger (e.g. router controlled)
|
|
379
|
+
* <Sheet open onOpenChange={() => onClose()}>
|
|
380
|
+
* <Sheet.Content>
|
|
381
|
+
* <Sheet.Header>
|
|
382
|
+
* <Sheet.TitleGroup>
|
|
383
|
+
* <Sheet.Title>Are you absolutely sure?</Sheet.Title>
|
|
384
|
+
* <Sheet.Actions>
|
|
385
|
+
* <IconButton
|
|
386
|
+
* appearance="ghost"
|
|
387
|
+
* intent="neutral"
|
|
388
|
+
* type="button"
|
|
389
|
+
* icon={<TrashSimple />}
|
|
390
|
+
* label="Delete"
|
|
391
|
+
* />
|
|
392
|
+
* <Separator orientation="vertical" className="h-[80%]" />
|
|
393
|
+
* <Sheet.CloseIconButton />
|
|
394
|
+
* </Sheet.Actions>
|
|
395
|
+
* </Sheet.TitleGroup>
|
|
396
|
+
* <Sheet.Description>
|
|
397
|
+
* This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
398
|
+
* </Sheet.Description>
|
|
399
|
+
* </Sheet.Header>
|
|
400
|
+
* <Sheet.Body>
|
|
401
|
+
* <p>
|
|
402
|
+
* Consequat do voluptate culpa fugiat consequat nostrud duis
|
|
403
|
+
* aliqua minim. Tempor voluptate cillum elit velit. Voluptate
|
|
404
|
+
* aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
|
|
405
|
+
* proident amet.
|
|
406
|
+
* </p>
|
|
407
|
+
* </Sheet.Body>
|
|
408
|
+
* <Sheet.Footer>
|
|
409
|
+
* <Sheet.Close asChild>
|
|
410
|
+
* <Button type="button" appearance="outlined" intent="neutral">Close</Button>
|
|
411
|
+
* </Sheet.Close>
|
|
412
|
+
* <Button type="button" appearance="filled" intent="neutral">
|
|
413
|
+
* Save
|
|
414
|
+
* </Button>
|
|
415
|
+
* </Sheet.Footer>
|
|
416
|
+
* </Sheet.Content>
|
|
417
|
+
* </Sheet.Root>
|
|
418
|
+
* ```
|
|
419
|
+
*/
|
|
420
|
+
declare const TitleGroup: {
|
|
421
|
+
({ children, className, ref, ...props }: ComponentProps<"div">): import("react").JSX.Element;
|
|
422
|
+
displayName: string;
|
|
423
|
+
};
|
|
424
|
+
/**
|
|
425
|
+
* A description for a sheet. Typically rendered as a child of `Sheet.Header`.
|
|
426
|
+
*
|
|
427
|
+
* @see https://mantle.ngrok.com/components/overlays/sheet#sheetdescription
|
|
428
|
+
*
|
|
429
|
+
* @example
|
|
430
|
+
* ```tsx
|
|
431
|
+
* // Sheet without a trigger (e.g. router controlled)
|
|
432
|
+
* <Sheet open onOpenChange={() => onClose()}>
|
|
433
|
+
* <Sheet.Content>
|
|
434
|
+
* <Sheet.Header>
|
|
435
|
+
* <Sheet.TitleGroup>
|
|
436
|
+
* <Sheet.Title>Are you absolutely sure?</Sheet.Title>
|
|
437
|
+
* <Sheet.Actions>
|
|
438
|
+
* <IconButton
|
|
439
|
+
* appearance="ghost"
|
|
440
|
+
* intent="neutral"
|
|
441
|
+
* type="button"
|
|
442
|
+
* icon={<TrashSimple />}
|
|
443
|
+
* label="Delete"
|
|
444
|
+
* />
|
|
445
|
+
* <Separator orientation="vertical" className="h-[80%]" />
|
|
446
|
+
* <Sheet.CloseIconButton />
|
|
447
|
+
* </Sheet.Actions>
|
|
448
|
+
* </Sheet.TitleGroup>
|
|
449
|
+
* <Sheet.Description>
|
|
450
|
+
* This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
451
|
+
* </Sheet.Description>
|
|
452
|
+
* </Sheet.Header>
|
|
453
|
+
* <Sheet.Body>
|
|
454
|
+
* <p>
|
|
455
|
+
* Consequat do voluptate culpa fugiat consequat nostrud duis
|
|
456
|
+
* aliqua minim. Tempor voluptate cillum elit velit. Voluptate
|
|
457
|
+
* aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
|
|
458
|
+
* proident amet.
|
|
459
|
+
* </p>
|
|
460
|
+
* </Sheet.Body>
|
|
461
|
+
* <Sheet.Footer>
|
|
462
|
+
* <Sheet.Close asChild>
|
|
463
|
+
* <Button type="button" appearance="outlined" intent="neutral">Close</Button>
|
|
464
|
+
* </Sheet.Close>
|
|
465
|
+
* <Button type="button" appearance="filled" intent="neutral">
|
|
466
|
+
* Save
|
|
467
|
+
* </Button>
|
|
468
|
+
* </Sheet.Footer>
|
|
469
|
+
* </Sheet.Content>
|
|
470
|
+
* </Sheet.Root>
|
|
471
|
+
* ```
|
|
472
|
+
*/
|
|
473
|
+
declare const Description: {
|
|
474
|
+
({ className, ref, ...props }: ComponentProps<typeof Description$1>): import("react").JSX.Element;
|
|
475
|
+
displayName: string;
|
|
476
|
+
};
|
|
477
|
+
/**
|
|
478
|
+
* A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.
|
|
479
|
+
*
|
|
480
|
+
* @see https://mantle.ngrok.com/components/overlays/sheet#sheetactions
|
|
481
|
+
*
|
|
482
|
+
* @example
|
|
483
|
+
* ```tsx
|
|
484
|
+
* // Sheet without a trigger (e.g. router controlled)
|
|
485
|
+
* <Sheet open onOpenChange={() => onClose()}>
|
|
486
|
+
* <Sheet.Content>
|
|
487
|
+
* <Sheet.Header>
|
|
488
|
+
* <Sheet.TitleGroup>
|
|
489
|
+
* <Sheet.Title>Are you absolutely sure?</Sheet.Title>
|
|
490
|
+
* <Sheet.Actions>
|
|
491
|
+
* <IconButton
|
|
492
|
+
* appearance="ghost"
|
|
493
|
+
* intent="neutral"
|
|
494
|
+
* type="button"
|
|
495
|
+
* icon={<TrashSimple />}
|
|
496
|
+
* label="Delete"
|
|
497
|
+
* />
|
|
498
|
+
* <Separator orientation="vertical" className="h-[80%]" />
|
|
499
|
+
* <Sheet.CloseIconButton />
|
|
500
|
+
* </Sheet.Actions>
|
|
501
|
+
* </Sheet.TitleGroup>
|
|
502
|
+
* <Sheet.Description>
|
|
503
|
+
* This action cannot be undone. This will permanently delete your account and remove your data from our servers.
|
|
504
|
+
* </Sheet.Description>
|
|
505
|
+
* </Sheet.Header>
|
|
506
|
+
* <Sheet.Body>
|
|
507
|
+
* <p>
|
|
508
|
+
* Consequat do voluptate culpa fugiat consequat nostrud duis
|
|
509
|
+
* aliqua minim. Tempor voluptate cillum elit velit. Voluptate
|
|
510
|
+
* aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
|
|
511
|
+
* proident amet.
|
|
512
|
+
* </p>
|
|
513
|
+
* </Sheet.Body>
|
|
514
|
+
* <Sheet.Footer>
|
|
515
|
+
* <Sheet.Close asChild>
|
|
516
|
+
* <Button type="button" appearance="outlined" intent="neutral">Close</Button>
|
|
517
|
+
* </Sheet.Close>
|
|
518
|
+
* <Button type="button" appearance="filled" intent="neutral">
|
|
519
|
+
* Save
|
|
520
|
+
* </Button>
|
|
521
|
+
* </Sheet.Footer>
|
|
522
|
+
* </Sheet.Content>
|
|
523
|
+
* </Sheet.Root>
|
|
524
|
+
* ```
|
|
525
|
+
*/
|
|
526
|
+
declare const Actions: {
|
|
527
|
+
({ children, className, ref, ...props }: ComponentProps<"div">): import("react").JSX.Element;
|
|
528
|
+
displayName: string;
|
|
529
|
+
};
|
|
243
530
|
/**
|
|
244
531
|
* A container that overlays the current view from the edge of the screen.
|
|
245
532
|
* It is a lightweight way of allowing users to complete a task without losing
|
|
@@ -443,7 +730,7 @@ declare const Sheet: {
|
|
|
443
730
|
* </Sheet.Root>
|
|
444
731
|
* ```
|
|
445
732
|
*/
|
|
446
|
-
readonly Actions:
|
|
733
|
+
readonly Actions: typeof Actions;
|
|
447
734
|
/**
|
|
448
735
|
* The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.
|
|
449
736
|
* Should be rendered as a child of `Sheet.Content`.
|
|
@@ -604,20 +891,7 @@ declare const Sheet: {
|
|
|
604
891
|
* </Sheet.Root>
|
|
605
892
|
* ```
|
|
606
893
|
*/
|
|
607
|
-
readonly Content:
|
|
608
|
-
side?: "left" | "right" | null | undefined;
|
|
609
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
610
|
-
/**
|
|
611
|
-
* The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.
|
|
612
|
-
*
|
|
613
|
-
* By default, a `Sheet`'s content width is responsive with a default
|
|
614
|
-
* preferred width: the maximum width of the `Sheet.Content` when the window
|
|
615
|
-
* viewport is larger than the mobile breakpoint (`sm`).
|
|
616
|
-
*
|
|
617
|
-
* @default `sm:max-w-[30rem]`
|
|
618
|
-
*/
|
|
619
|
-
preferredWidth?: `sm:max-w-${string}`;
|
|
620
|
-
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
894
|
+
readonly Content: typeof Content;
|
|
621
895
|
/**
|
|
622
896
|
* A description for a sheet. Typically rendered as a child of `Sheet.Header`.
|
|
623
897
|
*
|
|
@@ -654,7 +928,7 @@ declare const Sheet: {
|
|
|
654
928
|
* </Sheet.Root>
|
|
655
929
|
* ```
|
|
656
930
|
*/
|
|
657
|
-
readonly Description:
|
|
931
|
+
readonly Description: typeof Description;
|
|
658
932
|
/**
|
|
659
933
|
* The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
|
|
660
934
|
* Should be rendered as a child of `Sheet.Content`.
|
|
@@ -768,7 +1042,7 @@ declare const Sheet: {
|
|
|
768
1042
|
* </Sheet.Root>
|
|
769
1043
|
* ```
|
|
770
1044
|
*/
|
|
771
|
-
readonly Title:
|
|
1045
|
+
readonly Title: typeof Title;
|
|
772
1046
|
/**
|
|
773
1047
|
* A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.
|
|
774
1048
|
*
|
|
@@ -805,7 +1079,7 @@ declare const Sheet: {
|
|
|
805
1079
|
* </Sheet.Root>
|
|
806
1080
|
* ```
|
|
807
1081
|
*/
|
|
808
|
-
readonly TitleGroup:
|
|
1082
|
+
readonly TitleGroup: typeof TitleGroup;
|
|
809
1083
|
/**
|
|
810
1084
|
* The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.
|
|
811
1085
|
* Renders an unstyled button by default, but can be customized with the `asChild` prop.
|
package/dist/sheet.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-button-
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-button-DiOhreJD.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-DCPHJsRs.js";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{XIcon as f}from"@phosphor-icons/react/X";import{cva as p}from"class-variance-authority";const m=o;m.displayName=`Sheet`;const h=r;h.displayName=`SheetTrigger`;const g=l;g.displayName=`SheetClose`;const _=n;_.displayName=`SheetPortal`;const v=({className:t,ref:n,...r})=>u(i,{"data-slot":`sheet-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n});v.displayName=i.displayName;const y=p(`bg-dialog border-dialog inset-y-0 h-full w-full fixed z-50 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in`,{variants:{side:{left:`data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r`,right:`data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l`}},defaultVariants:{side:`right`}}),b=({children:t,className:n,preferredWidth:r=`sm:max-w-[30rem]`,side:i=`right`,ref:o,...s})=>d(_,{children:[u(v,{}),u(a,{"data-slot":`sheet-content`,"data-mantle-modal-content":!0,className:e(y({side:i}),r,n),ref:o,...s,children:t})]});b.displayName=a.displayName;const x=({size:e=`md`,type:n=`button`,label:r=`Close Sheet`,appearance:i=`ghost`,intent:a=`neutral`,...o})=>u(l,{asChild:!0,children:u(t,{"data-slot":`sheet-close-icon-button`,appearance:i,icon:u(f,{}),intent:a,label:r,size:e,type:n,...o})});x.displayName=`SheetCloseIconButton`;const S=({className:t,...n})=>u(`div`,{"data-slot":`sheet-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`SheetBody`;const C=({className:t,...n})=>u(`div`,{"data-slot":`sheet-header`,className:e(`border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4`,`has-[.icon-button]:pr-4`,t),...n});C.displayName=`SheetHeader`;const w=({className:t,...n})=>u(`div`,{"data-slot":`sheet-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5`,t),...n});w.displayName=`SheetFooter`;const T=({className:t,ref:n,...r})=>u(c,{"data-slot":`sheet-title`,ref:n,className:e(`text-strong flex-1 truncate text-lg font-medium`,t),...r});T.displayName=c.displayName;const E=({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-title-group`,className:e(`flex items-center justify-between gap-2`,n),...i,ref:r,children:t});E.displayName=`SheetTitleGroup`;const D=({className:t,ref:n,...r})=>u(s,{"data-slot":`sheet-description`,ref:n,className:e(`text-body text-sm`,t),...r});D.displayName=s.displayName;const O=({children:t,className:n,ref:r,...i})=>u(`div`,{"data-slot":`sheet-actions`,className:e(`flex h-full items-center gap-2`,n),...i,ref:r,children:t});O.displayName=`SheetActions`;const k={Root:m,Actions:O,Body:S,Close:g,CloseIconButton:x,Content:b,Description:D,Footer:w,Header:C,Title:T,TitleGroup:E,Trigger:h};export{k as Sheet};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-CDk0Bb9z.js";import{jsx as n}from"react/jsx-runtime";const r=({asChild:r=!1,className:i,ref:a,...o})=>n(r?t:`div`,{"data-slot":`skeleton`,className:e(`dark-high-contrast:bg-black/30 high-contrast:bg-black/30 h-4 animate-pulse rounded-md bg-gray-300/25 dark:bg-gray-950/10`,i),ref:a,...o});export{r as t};
|
package/dist/skeleton.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import { t as SelfClosingWithAsChild } from "./as-child-D23mGo4f.js";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
1
3
|
//#region src/components/skeleton/skeleton.d.ts
|
|
4
|
+
type Props = Exclude<ComponentProps<"div">, "children"> & SelfClosingWithAsChild;
|
|
2
5
|
/**
|
|
3
6
|
* A skeleton is a placeholder for content that is loading. By rendering a
|
|
4
7
|
* neutral block where real content will eventually appear, you give the
|
|
@@ -44,12 +47,6 @@
|
|
|
44
47
|
* </div>
|
|
45
48
|
* ```
|
|
46
49
|
*/
|
|
47
|
-
declare const Skeleton:
|
|
48
|
-
asChild: true;
|
|
49
|
-
children: import("react").ReactNode;
|
|
50
|
-
}, "ref"> | Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
51
|
-
asChild?: false | undefined;
|
|
52
|
-
children?: undefined;
|
|
53
|
-
}, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
|
|
50
|
+
declare const Skeleton: ({ asChild, className, ref, ...props }: Props) => import("react").JSX.Element;
|
|
54
51
|
//#endregion
|
|
55
52
|
export { Skeleton };
|
package/dist/skeleton.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./skeleton-
|
|
1
|
+
import{t as e}from"./skeleton-CsbUHbBA.js";export{e as Skeleton};
|
|
@@ -10,9 +10,29 @@ type SkipToMainLinkProps = Omit<ComponentProps<"a">, "href"> & {
|
|
|
10
10
|
*/
|
|
11
11
|
targetId?: string;
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
/**
|
|
14
|
+
* A visually-hidden-until-focused "skip link" that lets keyboard users jump
|
|
15
|
+
* past repeated navigation and land directly on the page's main content
|
|
16
|
+
* landmark. When activated, it updates the URL hash and focuses the element
|
|
17
|
+
* identified by `targetId` (defaulting to `"main"`) without scrolling. It
|
|
18
|
+
* still renders a plain anchor with `href="#${targetId}"` to preserve link
|
|
19
|
+
* semantics, support copy-link / no-JavaScript fallback behavior, and avoid
|
|
20
|
+
* any router dependency in React Router, Next.js, or plain HTML.
|
|
21
|
+
*
|
|
22
|
+
* Pair with the `<Main>` component (or any element with a matching `id`
|
|
23
|
+
* and `tabIndex={-1}`) so it can receive focus.
|
|
24
|
+
*
|
|
25
|
+
* @see https://mantle.ngrok.com/components/primitives/skip-to-main-link
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* <SkipToMainLink />
|
|
30
|
+
* <Header />
|
|
31
|
+
* <Main>
|
|
32
|
+
* <h1>Page title</h1>
|
|
33
|
+
* </Main>
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
declare const SkipToMainLink: ({ children, className, onClick, targetId, ...props }: SkipToMainLinkProps) => import("react").JSX.Element;
|
|
17
37
|
//#endregion
|
|
18
38
|
export { SkipToMainLink };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./anchor-
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./anchor-_2meGDfj.js";import{jsx as n}from"react/jsx-runtime";const r=({children:r=`Skip to main content`,className:i,onClick:a,targetId:o=`main`,...s})=>n(t,{...s,"data-slot":`skip-to-main-link`,href:`#${o}`,onClick:e=>{e.preventDefault(),window.history.replaceState(null,``,`#${o}`),document.getElementById(o)?.focus({preventScroll:!0}),a?.(e)},className:e(`not-focus:sr-only bg-card fixed top-2 left-2 z-max px-4 py-2 shadow-lg`,i),children:r});export{r as SkipToMainLink};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./cx-IiQEAKf5.js";import{Children as t,cloneElement as n,isValidElement as r}from"react";import{jsx as i}from"react/jsx-runtime";import{Slot as a}from"@radix-ui/react-slot";function o(...e){let t=e.filter(e=>e!=null&&e!==``).join(` `);return t===``?void 0:t}const s=({children:s,className:c,"data-slot":l,ref:u,...d})=>r(s)?i(a,{ref:u,...d,children:n(s,{...s.props,className:e(c,s.props.className),"data-slot":o(l,s.props[`data-slot`])})}):t.only(s);export{o as n,s as t};
|
package/dist/slot.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Slot } from "./index-
|
|
1
|
+
import { t as Slot } from "./index-BtwKJTLq.js";
|
|
2
2
|
export { Slot };
|
package/dist/slot.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./slot-
|
|
1
|
+
import{t as e}from"./slot-CDk0Bb9z.js";export{e as Slot};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{i as e}from"./direction-Wa9W2F61.js";import{jsx as t}from"react/jsx-runtime";import{SortAscendingIcon as n}from"@phosphor-icons/react/SortAscending";import{SortDescendingIcon as r}from"@phosphor-icons/react/SortDescending";const i=({mode:i,direction:a,...o})=>{switch(i){case`alphanumeric`:switch(a){case`asc`:return t(n,{...o});case`desc`:return t(r,{...o});default:throw Error(`Invalid alphanumeric sorting direction given: "${a}"`)}case`time`:switch(e(a)){case`oldest-to-newest`:return t(r,{...o});case`newest-to-oldest`:return t(n,{...o});default:throw Error(`Invalid time sorting direction given: "${a}"`)}}};
|
|
1
|
+
import{i as e}from"./direction-Wa9W2F61.js";import{jsx as t}from"react/jsx-runtime";import{SortAscendingIcon as n}from"@phosphor-icons/react/SortAscending";import{SortDescendingIcon as r}from"@phosphor-icons/react/SortDescending";const i=({mode:i,direction:a,...o})=>{switch(i){case`alphanumeric`:switch(a){case`asc`:return t(n,{...o});case`desc`:return t(r,{...o});default:throw Error(`Invalid alphanumeric sorting direction given: "${a}"`)}case`time`:switch(e(a)){case`oldest-to-newest`:return t(r,{...o});case`newest-to-oldest`:return t(n,{...o});default:throw Error(`Invalid time sorting direction given: "${a}"`)}}};export{i as t};
|