@ngrok/mantle 0.61.3 → 0.62.1
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/README.md +1 -1
- package/dist/alert-dialog.d.ts +4 -4
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.js +1 -1
- package/dist/{button-CGzhQiwo.d.ts → button-DQcrsUyD.d.ts} +3 -3
- package/dist/button.d.ts +1 -1
- package/dist/button.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/chunk-J35VI33Z.js +2 -0
- package/dist/chunk-J35VI33Z.js.map +1 -0
- package/dist/command.d.ts +1 -1
- package/dist/command.js +1 -1
- package/dist/data-table.d.ts +1 -1
- package/dist/data-table.js +1 -1
- package/dist/description-list.d.ts +95 -0
- package/dist/description-list.js +2 -0
- package/dist/description-list.js.map +1 -0
- package/dist/dialog.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/sheet.js +1 -1
- package/dist/types.d.ts +36 -2
- package/dist/types.js +1 -1
- package/package.json +9 -4
- package/dist/chunk-4LSFAAZW.js +0 -1
- package/dist/chunk-4LSFAAZW.js.map +0 -1
package/README.md
CHANGED
|
@@ -40,4 +40,4 @@ Next, check out the [Overview & Setup](https://mantle.ngrok.com/) docs and start
|
|
|
40
40
|
|
|
41
41
|
## Contributing
|
|
42
42
|
|
|
43
|
-
Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md).
|
|
43
|
+
Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md) and [conventions](https://github.com/ngrok-oss/mantle/blob/main/CONVENTIONS.md).
|
package/dist/alert-dialog.d.ts
CHANGED
|
@@ -143,7 +143,7 @@ declare const AlertDialog: {
|
|
|
143
143
|
* ```
|
|
144
144
|
*/
|
|
145
145
|
readonly Action: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
146
|
-
appearance?: "
|
|
146
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
147
147
|
isLoading?: boolean | null | undefined;
|
|
148
148
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
149
149
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
@@ -153,7 +153,7 @@ declare const AlertDialog: {
|
|
|
153
153
|
asChild: true;
|
|
154
154
|
type?: ComponentProps<"button">["type"];
|
|
155
155
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
156
|
-
appearance?: "
|
|
156
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
157
157
|
isLoading?: boolean | null | undefined;
|
|
158
158
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
159
159
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
@@ -200,7 +200,7 @@ declare const AlertDialog: {
|
|
|
200
200
|
* ```
|
|
201
201
|
*/
|
|
202
202
|
readonly Cancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
203
|
-
appearance?: "
|
|
203
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
204
204
|
isLoading?: boolean | null | undefined;
|
|
205
205
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
206
206
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
@@ -210,7 +210,7 @@ declare const AlertDialog: {
|
|
|
210
210
|
asChild: true;
|
|
211
211
|
type?: ComponentProps<"button">["type"];
|
|
212
212
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
213
|
-
appearance?: "
|
|
213
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
214
214
|
isLoading?: boolean | null | undefined;
|
|
215
215
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
216
216
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-NQZYWYVH.js";import{d as f}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{a as d}from"./chunk-SK2YHT6N.js";import"./chunk-
|
|
1
|
+
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-NQZYWYVH.js";import{d as f}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{a as d}from"./chunk-SK2YHT6N.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as p}from"./chunk-ODDNPNLN.js";import{a as g}from"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:r="max-w-md",...l},m)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:m,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",r,t),onInteractOutside:s=>{f(s),e?.(s)},onPointerDownOutside:s=>{f(s),o?.(s)},...l})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex-1 space-y-4",e),ref:r,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),ref:r,...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),ref:r,...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let r=N(),l="default";return r.priority==="danger"&&(l="danger"),i(d,{appearance:t,priority:l,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...r},l)=>i(c,{asChild:!0,children:i(d,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:l,...r})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},r)=>{let l=N(),m=l.priority==="danger"?"text-danger-600":"text-accent-600",s=l.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:r,className:a("size-12 sm:size-7",m,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=c;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
package/dist/alert.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-
|
|
1
|
+
import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as l}from"./chunk-ODDNPNLN.js";import{a as d}from"./chunk-NZ6DRFAL.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as C}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as P}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as w}from"class-variance-authority";import{createContext as R,forwardRef as c,useContext as D,useMemo as T}from"react";import B from"tiny-invariant";import{jsx as r}from"react/jsx-runtime";var u=R(null);function f(){let t=D(u);return B(t,"useAlertContext hook used outside of Alert parent!"),t}var H=w("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-accent-500/50 bg-accent-500/10 text-accent-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),g=c(({appearance:t="default",className:o,priority:e,...n},s)=>{let a=T(()=>({priority:e}),[e]);return r(u.Provider,{value:a,children:r("div",{ref:s,className:i(H({appearance:t,priority:e}),o),...n})})});g.displayName="Alert";var M={danger:r(I,{}),info:r(P,{}),success:r(C,{}),warning:r(N,{})},y=c(({className:t,svg:o,...e},n)=>{let s=f(),a=M[s.priority];return r(d,{ref:n,className:i("size-5",t),svg:o??a,...e})});y.displayName="AlertIcon";var x=c(({className:t,...o},e)=>r("div",{ref:e,className:i("min-w-0 flex-1 has-data-alert-dismiss:pr-6",t),...o}));x.displayName="AlertContent";var A=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?l:"div",{ref:n,className:i("text-sm",o),...e}));b.displayName="AlertDescription";var v=({size:t="sm",type:o="button",label:e="Dismiss Alert",appearance:n="ghost",className:s,...a})=>{let p=f();return r(m,{appearance:n,icon:r(h,{}),label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute",{"text-danger-700 not-disabled:hover:text-danger-800 not-disabled:active:text-danger-900":p.priority==="danger","text-accent-700 not-disabled:hover:text-accent-800 not-disabled:active:text-accent-900":p.priority==="info","text-success-700 not-disabled:hover:text-success-800 not-disabled:active:text-success-900":p.priority==="success","text-warning-700 not-disabled:hover:text-warning-800 not-disabled:active:text-warning-900":p.priority==="warning"},s),type:o,...a})};v.displayName="AlertDismissIconButton";var V={Root:g,Content:x,Description:b,DismissIconButton:v,Icon:y,Title:A};export{V as Alert};
|
|
2
2
|
//# sourceMappingURL=alert.js.map
|
|
@@ -6,7 +6,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
6
6
|
import { V as VariantProps } from './variant-props-oDo2u-We.js';
|
|
7
7
|
|
|
8
8
|
declare const buttonVariants: (props?: ({
|
|
9
|
-
appearance?: "
|
|
9
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
10
10
|
isLoading?: boolean | null | undefined;
|
|
11
11
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
12
12
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -90,7 +90,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
|
|
|
90
90
|
* ```
|
|
91
91
|
*/
|
|
92
92
|
declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
93
|
-
appearance?: "
|
|
93
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
94
94
|
isLoading?: boolean | null | undefined;
|
|
95
95
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
96
96
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
|
@@ -136,7 +136,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
|
|
|
136
136
|
*/
|
|
137
137
|
type?: ComponentProps<"button">["type"];
|
|
138
138
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
139
|
-
appearance?: "
|
|
139
|
+
appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
|
|
140
140
|
isLoading?: boolean | null | undefined;
|
|
141
141
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
142
142
|
} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
|
package/dist/button.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { B as Button, a as ButtonProps } from './button-
|
|
1
|
+
export { B as Button, a as ButtonProps } from './button-DQcrsUyD.js';
|
|
2
2
|
export { I as IconButton, a as IconButtonProps } from './icon-button-D4BTvC7F.js';
|
|
3
3
|
export { B as ButtonGroup, a as ButtonGroupProps } from './button-group-7oT-O90J.js';
|
|
4
4
|
import './deep-non-nullable-SmpSvoSd.js';
|
package/dist/button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as c}from"./chunk-Y7RHMF43.js";import{c as a}from"./chunk-ZCTK5X4D.js";import{a as b}from"./chunk-SK2YHT6N.js";import"./chunk-
|
|
1
|
+
import{a as c}from"./chunk-Y7RHMF43.js";import{c as a}from"./chunk-ZCTK5X4D.js";import{a as b}from"./chunk-SK2YHT6N.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{b as Button,c as ButtonGroup,a as IconButton};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
package/dist/calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b as o}from"./chunk-ZCTK5X4D.js";import"./chunk-
|
|
1
|
+
import{a,b as o}from"./chunk-ZCTK5X4D.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import{a as r}from"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as e}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as p}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";import{DayPicker as u}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function d({className:l,classNames:s,showOutsideDays:i=!1,...n}){return t(u,{animate:!1,components:{Chevron:c=>{let m=c.orientation==="left"?t(p,{}):t(f,{});return t(r,{svg:m,className:"size-4"})}},classNames:{root:e("isolate",l),button_next:e(a,o({appearance:"ghost",size:"sm"}),"absolute right-0"),button_previous:e(a,o({appearance:"ghost",size:"sm"}),"absolute left-0"),caption_label:"text-sm font-medium",day:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md",n.mode==="range"?"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md":""),day_button:"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15",disabled:"text-muted opacity-50",hidden:"invisible",month:"space-y-4",month_caption:"flex justify-center pt-1 relative items-center",month_grid:"w-full border-collapse space-y-1",months:"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min",nav:"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10",outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",range_middle:"day-range-middle not-disabled:aria-selected:bg-filled-accent/15 aria-selected:text-strong rounded-none not-disabled:aria-selected:hover:bg-filled-accent/25",range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",selected:"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent",today:"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md",week:"flex w-full mt-1",weekday:"text-body w-7 text-[0.8rem] text-center font-normal",weekdays:"flex",...s},showOutsideDays:i,...n})}d.displayName="Calendar";export{d as Calendar};
|
|
2
2
|
//# sourceMappingURL=calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/types/css-properties.ts"],"sourcesContent":["import type { CSSProperties as ReactCSSProperties } from \"react\";\n\n/**\n * A CSS custom property (CSS variable) name.\n *\n * CSS variables must start with `--`, e.g. `--brand-color` or `--spacing-2`.\n * This template-literal type lets TypeScript recognize those keys as valid\n * style keys when building objects for `style={...}`.\n */\ntype CssVariableName = `--${string}`;\n\n/**\n * React-compatible CSS properties plus support for CSS custom properties.\n *\n * React's `CSSProperties` type does not allow arbitrary property names by\n * default, so keys like `--foo` would normally be rejected by TypeScript.\n *\n * This type extends React's `CSSProperties` and additionally permits any\n * CSS variable name (keys starting with `--`) with values that match what\n * CSS variables accept in React style objects: `string | number`.\n */\ntype CssProperties = ReactCSSProperties & Record<CssVariableName, string | number>;\n\n/**\n * Helper to type-check a style object while preserving its exact inferred type.\n *\n * Why not just annotate with `CssProperties`?\n * - Annotating forces the value to be treated as the *wider* `CssProperties` type,\n * which can lose useful inference (literal values, narrow unions, etc.).\n *\n * This function validates that `input` conforms to `CssProperties` (including\n * CSS variables like `--foo`) and returns it unchanged, keeping inference intact.\n *\n * @example\n * const styles = $cssProperties({ display: \"block\", \"--gap\": 8 });\n */\nconst $cssProperties = <T extends CssProperties = CssProperties>(input: T) => input;\n\nexport { type CssProperties, $cssProperties };\n"],"mappings":"AAoCA,IAAMA,EAA2DC,GAAaA","names":["$cssProperties","input"]}
|
package/dist/command.d.ts
CHANGED
|
@@ -224,7 +224,7 @@ declare const Command: {
|
|
|
224
224
|
ref?: React.Ref<HTMLDivElement>;
|
|
225
225
|
} & {
|
|
226
226
|
asChild?: boolean;
|
|
227
|
-
}, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>>, "
|
|
227
|
+
}, "key" | "asChild" | keyof react.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
|
|
228
228
|
disabled?: boolean;
|
|
229
229
|
onSelect?: (value: string) => void;
|
|
230
230
|
value?: string;
|
package/dist/command.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as c}from"./chunk-JQ5D5YZR.js";import{a as r}from"./chunk-CMHMGZJJ.js";import"./chunk-NQZYWYVH.js";import"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-ZCTK5X4D.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as b}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(i,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var u=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:R=!0,title:P="Command Palette",...N})=>p(r.Root,{...N,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:P}),a(r.Description,{children:t})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),R&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});u.displayName="CommandDialog";var f=n(({className:o,...e},t)=>p("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(k,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",o),...e})]}));f.displayName="CommandInput";var g=n(({className:o,...e},t)=>a(i.List,{ref:t,"data-slot":"command-list",className:m("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));g.displayName="CommandList";var C=n(({className:o,...e},t)=>a(i.Empty,{ref:t,"data-slot":"command-empty",className:m("py-6 text-center text-sm",o),...e}));C.displayName="CommandEmpty";var h=n(({className:o,...e},t)=>a(i.Group,{ref:t,"data-slot":"command-group",className:m("**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",o),...e}));h.displayName="CommandGroup";var y=n(({className:o,...e},t)=>a(i.Separator,{ref:t,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",o),...e}));y.displayName="CommandSeparator";var v=n(({className:o,...e},t)=>a(i.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",o),...e}));v.displayName="CommandItem";var x=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));x.displayName="CommandShortcut";var D={Root:l,Dialog:u,Input:f,List:g,Empty:C,Group:h,Item:v,Shortcut:x,Separator:y};import{useEffect as w,useState as _}from"react";import{jsx as A,jsxs as G}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=_("\u2303");w(()=>{s(W())},[]);let d=t==="\u2318"?"Command":"Control";return G(c,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[A("span",{className:"sr-only",children:d}),t]})}function S(o){return"userAgentData"in o}function W(){if(typeof navigator>"u")return"\u2303";let o="";return S(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,b as useCommandState};
|
|
2
2
|
//# sourceMappingURL=command.js.map
|
package/dist/data-table.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import * as react from 'react';
|
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
5
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
6
|
import { d as SortingMode } from './direction-DHheuUag.js';
|
|
7
|
-
import { B as Button } from './button-
|
|
7
|
+
import { B as Button } from './button-DQcrsUyD.js';
|
|
8
8
|
import { Table } from './table.js';
|
|
9
9
|
import './deep-non-nullable-SmpSvoSd.js';
|
|
10
10
|
import 'class-variance-authority';
|
package/dist/data-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-U5GD6FHU.js";import{a as b}from"./chunk-HL2HWYKP.js";import{m}from"./chunk-7MJQGBE4.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-SK2YHT6N.js";import"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-U5GD6FHU.js";import{a as b}from"./chunk-HL2HWYKP.js";import{m}from"./chunk-7MJQGBE4.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-SK2YHT6N.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as c}from"./chunk-PFXFESEN.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var _=["unsorted","asc","desc"],A=["unsorted","desc","asc"];function f(t,o){return V(o==="alphanumeric"?_:A,t)??"unsorted"}function V(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:v,onClick:B,...k}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",O=v?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none not-disabled:active:scale-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:O,iconPlacement:l,onClick:T=>{B?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",...k,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-data-table-header-action:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-sticky-active/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0/15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
|
|
2
2
|
//# sourceMappingURL=data-table.js.map
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
|
|
4
|
+
|
|
5
|
+
type DescriptionListProps = ComponentProps<"dl"> & WithAsChild;
|
|
6
|
+
type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
|
|
7
|
+
type DescriptionListLabelProps = ComponentProps<"dt"> & WithAsChild;
|
|
8
|
+
type DescriptionListValueProps = ComponentProps<"dd"> & WithAsChild;
|
|
9
|
+
/**
|
|
10
|
+
* A semantically correct description list built on the HTML `<dl>` element.
|
|
11
|
+
* Renders a list of label/value pairs with alternating row backgrounds,
|
|
12
|
+
* commonly used in detail views to display metadata about a resource
|
|
13
|
+
* (e.g., API keys, secrets, domains).
|
|
14
|
+
*
|
|
15
|
+
* Compose with `DescriptionList.Item`, `DescriptionList.Label`, and
|
|
16
|
+
* `DescriptionList.Value` as direct children.
|
|
17
|
+
*
|
|
18
|
+
* @see https://mantle.ngrok.com/components/description-list
|
|
19
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <DescriptionList.Root>
|
|
24
|
+
* <DescriptionList.Item>
|
|
25
|
+
* <DescriptionList.Label>Name</DescriptionList.Label>
|
|
26
|
+
* <DescriptionList.Value>my-api-key</DescriptionList.Value>
|
|
27
|
+
* </DescriptionList.Item>
|
|
28
|
+
* <DescriptionList.Item>
|
|
29
|
+
* <DescriptionList.Label>ID</DescriptionList.Label>
|
|
30
|
+
* <DescriptionList.Value>
|
|
31
|
+
* aigk_2fKm9x8Hn3QpYT7zKlR0vW5
|
|
32
|
+
* </DescriptionList.Value>
|
|
33
|
+
* </DescriptionList.Item>
|
|
34
|
+
* </DescriptionList.Root>
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
declare const DescriptionList: {
|
|
38
|
+
/**
|
|
39
|
+
* The root container for a description list. Renders a `<dl>` element.
|
|
40
|
+
*
|
|
41
|
+
* @see https://mantle.ngrok.com/components/description-list#api-description-list-root
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* <DescriptionList.Root>
|
|
46
|
+
* <DescriptionList.Item>
|
|
47
|
+
* <DescriptionList.Label>Name</DescriptionList.Label>
|
|
48
|
+
* <DescriptionList.Value>my-api-key</DescriptionList.Value>
|
|
49
|
+
* </DescriptionList.Item>
|
|
50
|
+
* </DescriptionList.Root>
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
readonly Root: react.ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & react.RefAttributes<HTMLDListElement>>;
|
|
54
|
+
/**
|
|
55
|
+
* A wrapper that groups a label/value pair. Renders a `<div>` with a default
|
|
56
|
+
* subgrid layout.
|
|
57
|
+
*
|
|
58
|
+
* @see https://mantle.ngrok.com/components/description-list#api-description-list-item
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```tsx
|
|
62
|
+
* <DescriptionList.Item>
|
|
63
|
+
* <DescriptionList.Label>ID</DescriptionList.Label>
|
|
64
|
+
* <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>
|
|
65
|
+
* </DescriptionList.Item>
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
readonly Item: react.ForwardRefExoticComponent<Omit<DescriptionListItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
/**
|
|
70
|
+
* The label for a description list item. Renders a `<dt>` element.
|
|
71
|
+
*
|
|
72
|
+
* @see https://mantle.ngrok.com/components/description-list#api-description-list-label
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* <DescriptionList.Label>Name</DescriptionList.Label>
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
readonly Label: react.ForwardRefExoticComponent<Omit<DescriptionListLabelProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
80
|
+
/**
|
|
81
|
+
* The value for a description list item. Renders a `<dd>` element.
|
|
82
|
+
*
|
|
83
|
+
* @see https://mantle.ngrok.com/components/description-list#api-description-list-value
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```tsx
|
|
87
|
+
* <DescriptionList.Value>
|
|
88
|
+
* aigk_2fKm9x8Hn3QpYT7zKlR0vW5
|
|
89
|
+
* </DescriptionList.Value>
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
readonly Value: react.ForwardRefExoticComponent<Omit<DescriptionListValueProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export { DescriptionList, type DescriptionListProps };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as p}from"./chunk-ODDNPNLN.js";import{a as i}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as m}from"react/jsx-runtime";var l=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dl",{ref:n,className:i("relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1",t),...s,children:e}));l.displayName="DescriptionList";var c=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"div",{ref:n,className:i("rounded-xs col-span-full grid grid-cols-subgrid items-center",t),...s,children:e}));c.displayName="DescriptionListItem";var a=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dt",{ref:n,className:i("text-muted text-sm font-sans font-semibold min-w-36 p-3",t),...s,children:e}));a.displayName="DescriptionListLabel";var f=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dd",{ref:n,className:i("text-body font-mono text-mono p-3",t),...s,children:e}));f.displayName="DescriptionListValue";var C={Root:l,Item:c,Label:a,Value:f};export{C as DescriptionList};
|
|
2
|
+
//# sourceMappingURL=description-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/description-list/description-list.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#api-description-list-root\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#api-description-list-item\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"rounded-xs col-span-full grid grid-cols-subgrid items-center\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#api-description-list-label\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-semibold min-w-36 p-3\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#api-description-list-value\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-body font-mono text-mono p-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n * <DescriptionList.Item>\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n * </DescriptionList.Item>\n * <DescriptionList.Item>\n * <DescriptionList.Label>ID</DescriptionList.Label>\n * <DescriptionList.Value>\n * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#api-description-list-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#api-description-list-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t * <DescriptionList.Label>ID</DescriptionList.Label>\n\t * <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#api-description-list-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#api-description-list-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t * aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QA8BxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CACA,IAAKD,EACL,UAAWE,EACV,wJACAL,CACD,EACC,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,kBAmBnB,IAAMS,EAAOR,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,+DAAgEL,CAAS,EACtF,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAK,EAAK,YAAc,sBAcnB,IAAMC,EAAQT,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,0DAA2DL,CAAS,EACjF,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAM,EAAM,YAAc,uBAkBpB,IAAMC,EAAQV,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,oCAAqCL,CAAS,EAAI,GAAGE,EACtF,SAAAD,EACF,CAGH,EACAO,EAAM,YAAc,uBA8BpB,IAAMC,EAAkB,CAgBvB,KAAAZ,EAeA,KAAAS,EAWA,MAAAC,EAaA,MAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","rest","ref","Slot","cx","Item","Label","Value","DescriptionList"]}
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-CMHMGZJJ.js";import{i as o}from"./chunk-NQZYWYVH.js";import"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-ZCTK5X4D.js";import"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-CMHMGZJJ.js";import{i as o}from"./chunk-NQZYWYVH.js";import"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-ZCTK5X4D.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Dialog,o as isDialogOverlayTarget};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/pagination.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as p}from"./chunk-ERCBHCUY.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-Y7RHMF43.js";import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-SK2YHT6N.js";import"./chunk-
|
|
1
|
+
import{a as p}from"./chunk-ERCBHCUY.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-Y7RHMF43.js";import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-SK2YHT6N.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as z}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
|
|
2
2
|
//# sourceMappingURL=pagination.js.map
|
package/dist/sheet.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-ZCTK5X4D.js";import"./chunk-
|
|
1
|
+
import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-ZCTK5X4D.js";import"./chunk-J35VI33Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("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-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 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"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
|
|
2
2
|
//# sourceMappingURL=sheet.js.map
|
package/dist/types.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { W as WithAsChild } from './as-child-DJ7x3JFV.js';
|
|
|
2
2
|
export { W as WithStyleProps } from './with-style-props-VnLWm0Yd.js';
|
|
3
3
|
export { V as VariantProps } from './variant-props-oDo2u-We.js';
|
|
4
4
|
export { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
|
|
5
|
-
import 'react';
|
|
5
|
+
import { CSSProperties } from 'react';
|
|
6
6
|
import 'class-variance-authority';
|
|
7
7
|
|
|
8
8
|
type Booleanish = boolean | "true" | "false";
|
|
@@ -12,4 +12,38 @@ type Booleanish = boolean | "true" | "false";
|
|
|
12
12
|
*/
|
|
13
13
|
declare function parseBooleanish(value: Booleanish | (string & {}) | undefined | null): boolean;
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
/**
|
|
16
|
+
* A CSS custom property (CSS variable) name.
|
|
17
|
+
*
|
|
18
|
+
* CSS variables must start with `--`, e.g. `--brand-color` or `--spacing-2`.
|
|
19
|
+
* This template-literal type lets TypeScript recognize those keys as valid
|
|
20
|
+
* style keys when building objects for `style={...}`.
|
|
21
|
+
*/
|
|
22
|
+
type CssVariableName = `--${string}`;
|
|
23
|
+
/**
|
|
24
|
+
* React-compatible CSS properties plus support for CSS custom properties.
|
|
25
|
+
*
|
|
26
|
+
* React's `CSSProperties` type does not allow arbitrary property names by
|
|
27
|
+
* default, so keys like `--foo` would normally be rejected by TypeScript.
|
|
28
|
+
*
|
|
29
|
+
* This type extends React's `CSSProperties` and additionally permits any
|
|
30
|
+
* CSS variable name (keys starting with `--`) with values that match what
|
|
31
|
+
* CSS variables accept in React style objects: `string | number`.
|
|
32
|
+
*/
|
|
33
|
+
type CssProperties = CSSProperties & Record<CssVariableName, string | number>;
|
|
34
|
+
/**
|
|
35
|
+
* Helper to type-check a style object while preserving its exact inferred type.
|
|
36
|
+
*
|
|
37
|
+
* Why not just annotate with `CssProperties`?
|
|
38
|
+
* - Annotating forces the value to be treated as the *wider* `CssProperties` type,
|
|
39
|
+
* which can lose useful inference (literal values, narrow unions, etc.).
|
|
40
|
+
*
|
|
41
|
+
* This function validates that `input` conforms to `CssProperties` (including
|
|
42
|
+
* CSS variables like `--foo`) and returns it unchanged, keeping inference intact.
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* const styles = $cssProperties({ display: "block", "--gap": 8 });
|
|
46
|
+
*/
|
|
47
|
+
declare const $cssProperties: <T extends CssProperties = CssProperties>(input: T) => T;
|
|
48
|
+
|
|
49
|
+
export { $cssProperties, type Booleanish, type CssProperties, parseBooleanish };
|
package/dist/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"./chunk-
|
|
1
|
+
import{a as b}from"./chunk-J35VI33Z.js";import{a}from"./chunk-OP6JMBKJ.js";export{b as $cssProperties,a as parseBooleanish};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.62.1",
|
|
4
4
|
"description": "mantle is ngrok's UI library and design system.",
|
|
5
5
|
"homepage": "https://mantle.ngrok.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -119,6 +119,11 @@
|
|
|
119
119
|
"import": "./dist/data-table.js"
|
|
120
120
|
},
|
|
121
121
|
"./date-picker": {},
|
|
122
|
+
"./description-list": {
|
|
123
|
+
"types": "./dist/description-list.d.ts",
|
|
124
|
+
"@ngrok/mantle/source": "./src/components/description-list/index.ts",
|
|
125
|
+
"import": "./dist/description-list.js"
|
|
126
|
+
},
|
|
122
127
|
"./dialog": {
|
|
123
128
|
"types": "./dist/dialog.d.ts",
|
|
124
129
|
"@ngrok/mantle/source": "./src/components/dialog/index.ts",
|
|
@@ -302,12 +307,12 @@
|
|
|
302
307
|
"@testing-library/jest-dom": "6.9.1",
|
|
303
308
|
"@testing-library/react": "16.3.2",
|
|
304
309
|
"@testing-library/user-event": "14.6.1",
|
|
305
|
-
"@types/prismjs": "1.26.
|
|
306
|
-
"@types/react": "18.3.
|
|
310
|
+
"@types/prismjs": "1.26.6",
|
|
311
|
+
"@types/react": "18.3.28",
|
|
307
312
|
"@types/react-dom": "18.3.7",
|
|
308
313
|
"browserslist": "4.28.1",
|
|
309
314
|
"date-fns": "4.1.0",
|
|
310
|
-
"happy-dom": "20.
|
|
315
|
+
"happy-dom": "20.6.1",
|
|
311
316
|
"react": "18.3.1",
|
|
312
317
|
"react-dom": "18.3.1",
|
|
313
318
|
"react-router": "7.13.0",
|
package/dist/chunk-4LSFAAZW.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-4LSFAAZW.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|