@ngrok/mantle 0.52.6 → 0.52.8
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/alert-dialog.d.ts +4 -4
- package/dist/alert-dialog.js +1 -1
- package/dist/alert.js +1 -1
- package/dist/{button-BvWgeelK.d.ts → button-CGzhQiwo.d.ts} +7 -7
- package/dist/button.d.ts +1 -1
- package/dist/button.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/calendar.js.map +1 -1
- package/dist/chunk-T5U5KWUW.js +2 -0
- package/dist/chunk-T5U5KWUW.js.map +1 -0
- package/dist/chunk-XTCU7MXB.js +2 -0
- package/dist/chunk-XTCU7MXB.js.map +1 -0
- package/dist/combobox.js +1 -1
- package/dist/combobox.js.map +1 -1
- package/dist/data-table.d.ts +1 -1
- package/dist/data-table.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/pagination.js +1 -1
- package/dist/sheet.js +1 -1
- package/package.json +4 -4
- package/dist/chunk-E6VQ7CJN.js +0 -2
- package/dist/chunk-E6VQ7CJN.js.map +0 -1
- package/dist/chunk-MGYWQQVZ.js +0 -2
- package/dist/chunk-MGYWQQVZ.js.map +0 -1
package/dist/alert-dialog.d.ts
CHANGED
|
@@ -151,7 +151,7 @@ declare const AlertDialog: {
|
|
|
151
151
|
iconPlacement?: "start" | "end";
|
|
152
152
|
} & {
|
|
153
153
|
asChild: true;
|
|
154
|
-
type?:
|
|
154
|
+
type?: ComponentProps<"button">["type"];
|
|
155
155
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
156
156
|
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
157
157
|
isLoading?: boolean | null | undefined;
|
|
@@ -161,7 +161,7 @@ declare const AlertDialog: {
|
|
|
161
161
|
iconPlacement?: "start" | "end";
|
|
162
162
|
} & {
|
|
163
163
|
asChild?: false | undefined;
|
|
164
|
-
type: Exclude<
|
|
164
|
+
type: Exclude<ComponentProps<"button">["type"], undefined>;
|
|
165
165
|
}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
|
|
166
166
|
/**
|
|
167
167
|
* Contains the main content of the alert dialog.
|
|
@@ -208,7 +208,7 @@ declare const AlertDialog: {
|
|
|
208
208
|
iconPlacement?: "start" | "end";
|
|
209
209
|
} & {
|
|
210
210
|
asChild: true;
|
|
211
|
-
type?:
|
|
211
|
+
type?: ComponentProps<"button">["type"];
|
|
212
212
|
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
213
213
|
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
214
214
|
isLoading?: boolean | null | undefined;
|
|
@@ -218,7 +218,7 @@ declare const AlertDialog: {
|
|
|
218
218
|
iconPlacement?: "start" | "end";
|
|
219
219
|
} & {
|
|
220
220
|
asChild?: false | undefined;
|
|
221
|
-
type: Exclude<
|
|
221
|
+
type: Exclude<ComponentProps<"button">["type"], undefined>;
|
|
222
222
|
}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
|
|
223
223
|
/**
|
|
224
224
|
* A button that closes the Alert Dialog. (Unstyled)
|
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as y,b as A,c as u,d,e as D,f as C,g as P,h as v}from"./chunk-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{
|
|
1
|
+
import{a as y,b as A,c as u,d,e as D,f as C,g as P,h as v}from"./chunk-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{a as m}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as g}from"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{Slot as f}from"@radix-ui/react-slot";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:l="max-w-md",...r},p)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:p,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",l,t),onInteractOutside:s=>{c(s),e?.(s)},onPointerDownOutside:s=>{c(s),o?.(s)},...r})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex-1 space-y-4",e),ref:l,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...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 l=N(),r="default";return l.priority==="danger"&&(r="danger"),i(m,{appearance:t,priority:r,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...l},r)=>i(d,{asChild:!0,children:i(m,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:r,...l})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},l)=>{let r=N(),p=r.priority==="danger"?"text-danger-600":"text-accent-600",s=r.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:l,className:a("size-12 sm:size-7",p,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=d;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{
|
|
1
|
+
import{c as d}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-NPTDRQT5.js";import{a as i}from"./chunk-AZ56JGNY.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{Slot as m}from"@radix-ui/react-slot";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(l,{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?m:"h5",{ref:n,className:i("font-medium",o),...e}));A.displayName="AlertTitle";var b=c(({asChild:t=!1,className:o,...e},n)=>r(t?m:"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(d,{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
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
|
|
2
2
|
import * as class_variance_authority from 'class-variance-authority';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { ReactNode, ComponentProps } from 'react';
|
|
5
5
|
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
|
|
|
@@ -55,7 +55,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
|
|
|
55
55
|
*
|
|
56
56
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
57
57
|
*/
|
|
58
|
-
type?:
|
|
58
|
+
type?: ComponentProps<"button">["type"];
|
|
59
59
|
} | {
|
|
60
60
|
asChild?: false | undefined;
|
|
61
61
|
/**
|
|
@@ -72,7 +72,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
|
|
|
72
72
|
*
|
|
73
73
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
74
74
|
*/
|
|
75
|
-
type: Exclude<
|
|
75
|
+
type: Exclude<ComponentProps<"button">["type"], undefined>;
|
|
76
76
|
});
|
|
77
77
|
/**
|
|
78
78
|
* Renders a button or a component that looks like a button, an interactive
|
|
@@ -89,7 +89,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
|
|
|
89
89
|
* </Button>
|
|
90
90
|
* ```
|
|
91
91
|
*/
|
|
92
|
-
declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
92
|
+
declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
93
93
|
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
94
94
|
isLoading?: boolean | null | undefined;
|
|
95
95
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
@@ -134,8 +134,8 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
|
|
|
134
134
|
*
|
|
135
135
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
136
136
|
*/
|
|
137
|
-
type?:
|
|
138
|
-
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
137
|
+
type?: ComponentProps<"button">["type"];
|
|
138
|
+
}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
|
|
139
139
|
appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
|
|
140
140
|
isLoading?: boolean | null | undefined;
|
|
141
141
|
priority?: "default" | "danger" | "neutral" | null | undefined;
|
|
@@ -167,7 +167,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
|
|
|
167
167
|
*
|
|
168
168
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type
|
|
169
169
|
*/
|
|
170
|
-
type: Exclude<
|
|
170
|
+
type: Exclude<ComponentProps<"button">["type"], undefined>;
|
|
171
171
|
}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
|
|
172
172
|
|
|
173
173
|
export { Button as B, type ButtonProps as a };
|
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-CGzhQiwo.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-3H3EUKI7.js";import{a}from"./chunk-
|
|
1
|
+
import{a as c}from"./chunk-3H3EUKI7.js";import{a as b}from"./chunk-T5U5KWUW.js";import{c as a}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.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}from"./chunk-
|
|
1
|
+
import{a,b as o}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import{a as r}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as e}from"./chunk-AZ56JGNY.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
|
package/dist/calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../src/components/calendar/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport type { ComponentProps } from \"react\";\nimport { DayPicker } from \"react-day-picker\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tbaseIconButtonClasses,\n\ticonButtonVariants,\n} from \"../button/icon-button.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype CalendarProps = ComponentProps<typeof DayPicker>;\n\n/**\n * A calendar component that allows users to select a date or a range of dates.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * @see https://mantle.ngrok.com/components/calendar#api-calendar\n *\n * @example\n * ```tsx\n * <Calendar\n * mode=\"single\"\n * selected={selectedDate}\n * onSelect={setSelectedDate}\n * />\n *\n * <Calendar\n * mode=\"range\"\n * selected={dateRange}\n * onSelect={setDateRange}\n * />\n * ```\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nfunction Calendar({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = false,\n\t...props\n}: CalendarProps) {\n\treturn (\n\t\t<DayPicker\n\t\t\tanimate={false}\n\t\t\tcomponents={{\n\t\t\t\tChevron: (iconProps) => {\n\t\t\t\t\tconst icon =\n\t\t\t\t\t\ticonProps.orientation === \"left\" ? (\n\t\t\t\t\t\t\t<CaretLeftIcon />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<CaretRightIcon />\n\t\t\t\t\t\t);\n\n\t\t\t\t\treturn <Icon svg={icon} className=\"size-4\" />;\n\t\t\t\t},\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cx(\"isolate\", className),\n\t\t\t\tbutton_next: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute right-0\",\n\t\t\t\t),\n\t\t\t\tbutton_previous: cx(\n\t\t\t\t\tbaseIconButtonClasses,\n\t\t\t\t\ticonButtonVariants({ appearance: \"ghost\", size: \"sm\" }),\n\t\t\t\t\t\"absolute left-0\",\n\t\t\t\t),\n\t\t\t\tcaption_label: \"text-sm font-medium\",\n\t\t\t\tday: cx(\n\t\t\t\t\t\"overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 size-7 rounded-md\",\n\t\t\t\t\tprops.mode === \"range\"\n\t\t\t\t\t\t? \"first:has-aria-selected:rounded-l-md last:has-aria-selected:rounded-r-md\"\n\t\t\t\t\t\t: \"\",\n\t\t\t\t),\n\t\t\t\tday_button:\n\t\t\t\t\t\"day size-full rounded-md not-aria-selected:not-disabled:hover:bg-filled-accent/15\",\n\t\t\t\tdisabled: \"text-muted opacity-50\",\n\t\t\t\thidden: \"invisible\",\n\t\t\t\tmonth: \"space-y-4\",\n\t\t\t\tmonth_caption: \"flex justify-center pt-1 relative items-center\",\n\t\t\t\tmonth_grid: \"w-full border-collapse space-y-1\",\n\t\t\t\tmonths:\n\t\t\t\t\t\"flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0 relative max-w-min\",\n\t\t\t\tnav: \"flex items-center absolute inset-x-0 top-1 h-5 justify-between z-10\",\n\t\t\t\toutside:\n\t\t\t\t\t\"day-outside aria-selected:text-on-filled opacity-50 text-muted\",\n\t\t\t\trange_end: \"day-range-end [&:not(.day-range-start)]:rounded-l-none\",\n\t\t\t\trange_middle:\n\t\t\t\t\t\"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\",\n\t\t\t\trange_start: \"day-range-start [&:not(.day-range-end)]:rounded-r-none\",\n\t\t\t\tselected:\n\t\t\t\t\t\"not-disabled:bg-filled-accent text-on-filled not-disabled:hover:bg-filled-accent\",\n\t\t\t\ttoday:\n\t\t\t\t\t\"not-aria-selected:not-disabled:text-accent-600 font-medium not-aria-selected:not-disabled:bg-filled-accent/10 rounded-md\",\n\t\t\t\tweek: \"flex w-full mt-1\",\n\t\t\t\tweekday: \"text-body w-7 text-[0.8rem] text-center font-normal\",\n\t\t\t\tweekdays: \"flex\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {\n\t//,\n\tCalendar,\n};\n\nexport type {\n\t//,\n\tCalendarProps,\n};\n\nexport type {\n\t//,\n\tDateRange,\n} from \"react-day-picker\";\n"],"mappings":"0OAEA,OAAS,iBAAAA,MAAqB,kCAC9B,OAAS,kBAAAC,MAAsB,mCAE/B,OAAS,aAAAC,MAAiB,mBAgDnB,cAAAC,MAAA,oBAbP,SAASC,EAAS,CACjB,UAAAC,EACA,WAAAC,EACA,gBAAAC,EAAkB,GAClB,GAAGC,CACJ,EAAkB,CACjB,OACCL,EAACM,EAAA,CACA,QAAS,GACT,WAAY,CACX,QAAUC,GAAc,CACvB,IAAMC,EACLD,EAAU,cAAgB,OACzBP,EAACS,EAAA,EAAc,EAEfT,EAACU,EAAA,EAAe,EAGlB,OAAOV,EAACW,EAAA,CAAK,IAAKH,EAAM,UAAU,SAAS,CAC5C,CACD,EACA,WAAY,CACX,KAAMI,EAAG,UAAWV,CAAS,EAC7B,YAAaU,EACZC,EACAC,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,kBACD,EACA,gBAAiBF,EAChBC,EACAC,EAAmB,CAAE,WAAY,QAAS,KAAM,IAAK,CAAC,EACtD,iBACD,EACA,cAAe,sBACf,IAAKF,EACJ,6GACAP,EAAM,OAAS,QACZ,2EACA,EACJ,EACA,WACC,oFACD,SAAU,wBACV,OAAQ,YACR,MAAO,YACP,cAAe,iDACf,WAAY,mCACZ,OACC,6EACD,IAAK,sEACL,QACC,iEACD,UAAW,yDACX,aACC,8JACD,YAAa,yDACb,SACC,mFACD,MACC,2HACD,KAAM,mBACN,QAAS,sDACT,SAAU,OACV,GAAGF,CACJ,EACA,gBAAiBC,EAChB,GAAGC,EACL,CAEF,CACAJ,EAAS,YAAc","names":["CaretLeftIcon","CaretRightIcon","DayPicker","jsx","Calendar","className","classNames","showOutsideDays","props","DayPicker","iconProps","icon","CaretLeftIcon","CaretRightIcon","Icon","cx","baseIconButtonClasses","iconButtonVariants"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as b}from"./chunk-3C5O3AQA.js";import{a as i}from"./chunk-I6T6YV2L.js";import{a as l}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as V}from"@phosphor-icons/react/CircleNotch";import{Slot as C}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import p from"clsx";import{Children as k,cloneElement as E,forwardRef as S,isValidElement as w}from"react";import I from"tiny-invariant";import{Fragment as j,jsx as o,jsxs as u}from"react/jsx-runtime";var R=N("",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),A=S(({"aria-disabled":g,appearance:d="outlined",asChild:f,children:e,className:v,disabled:m,icon:h,iconPlacement:a="start",isLoading:r=!1,priority:x="default",type:y,...B},P)=>{let n=b(g??m??r),t=r?o(V,{className:"animate-spin"}):h,s=t&&d!=="link",c={"aria-disabled":n,className:l("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]",R({appearance:d,priority:x,isLoading:r}),s&&a==="start"&&"ps-2.5",s&&a==="end"&&"pe-2.5",v),"data-disabled":n,"data-loading":r,disabled:n,ref:P,...B};return f?(I(w(e)&&k.only(e),"When using `asChild`, Button must be passed a single child as a JSX tag."),o(C,{...c,children:E(e,{},u(j,{children:[t&&o(i,{svg:t,className:p(a==="end"&&"order-last")}),e.props.children]}))})):u("button",{...c,type:y,children:[t&&o(i,{svg:t,className:p(a==="end"&&"order-last")}),e]})});A.displayName="Button";export{A as a};
|
|
2
|
+
//# sourceMappingURL=chunk-T5U5KWUW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst buttonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tfilled:\n\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\tghost:\n\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\toutlined:\n\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t * color and styling to communicate its purpose to the user\n\t\t */\n\t\tpriority: {\n\t\t\tdanger: \"\",\n\t\t\tdefault: \"\",\n\t\t\tneutral: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tisLoading: false,\n\t\tpriority: \"default\",\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"danger\",\n\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"ghost\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"outlined\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"filled\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass:\n\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t},\n\t\t{\n\t\t\tappearance: \"link\",\n\t\t\tpriority: \"neutral\",\n\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t},\n\t],\n});\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ComponentProps<\"button\">[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<ComponentProps<\"button\">[\"type\"], undefined>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n * Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md\",\n\t\t\t\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\"not-disabled:active:scale-[0.97]\",\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-loading\": isLoading,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && (\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{children.props.children}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t{icon && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tsvg={icon}\n\t\t\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n};\n\nexport type {\n\t//,\n\tButtonAppearance,\n\tButtonPriority,\n\tButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OAEjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBA0MnB,OAwCG,YAAAC,EAxCH,OAAAC,EAwCG,QAAAC,MAxCH,oBApMH,IAAMC,EAAiBC,EAAI,GAAI,CAC9B,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CAAC,EA0FKC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACV,+EACA,4CACA,8CACA,mCACAvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,gBAAiBS,EACjB,eAAgBL,EAChB,SAAAK,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHkB,EACCC,EAAelB,CAAQ,GAAKmB,EAAS,KAAKnB,CAAQ,EAClD,0EACD,EAGCT,EAAC6B,EAAA,CAAM,GAAGL,EACR,SAAAM,EACArB,EACA,CAAC,EACDR,EAAAF,EAAA,CACE,UAAAsB,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,EAAS,MAAM,UACjB,CACD,EACD,GAKDR,EAAC,UAAQ,GAAGuB,EAAa,KAAMR,EAC7B,UAAAK,GACArB,EAAC+B,EAAA,CACA,IAAKV,EACL,UAAWW,EAAKnB,IAAkB,OAAS,YAAY,EACxD,EAEAJ,GACF,CAEF,CACD,EACAL,EAAO,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","Fragment","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon","clsx"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as l}from"./chunk-3C5O3AQA.js";import{a}from"./chunk-I6T6YV2L.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as y}from"@phosphor-icons/react/CircleNotch";import{Slot as x}from"@radix-ui/react-slot";import{cva as I}from"class-variance-authority";import{clsx as C}from"clsx";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as V}from"react";import E from"tiny-invariant";import{jsx as t,jsxs as P}from"react/jsx-runtime";var N=C("icon-button","inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border","focus:outline-hidden focus-visible:ring-4","disabled:cursor-default disabled:opacity-50","not-disabled:active:scale-[0.97]"),A=I("",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),L=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:o,className:p,disabled:m,icon:f,isLoading:e=!1,label:v,size:s,type:g,...B},h)=>{let n=l(c??m??e),i=e?t(y,{className:"animate-spin"}):f,r={"aria-disabled":n,className:d(N,A({appearance:u,isLoading:e,size:s}),p),"data-disabled":n,"data-icon-button":!0,"data-loading":e,"data-size":s,disabled:n,ref:h,...B};return b?(E(V(o)&&H.only(o),"When using `asChild`, IconButton must be passed a single child as a JSX tag."),t(x,{...r,children:M(o,{},t(a,{svg:i}))})):P("button",{...r,type:g,children:[t("span",{className:"sr-only",children:v}),t(a,{svg:i})]})});L.displayName="IconButton";export{N as a,A as b,L as c};
|
|
2
|
+
//# sourceMappingURL=chunk-XTCU7MXB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst baseIconButtonClasses = clsx(\n\t\"icon-button\",\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border\",\n\t\"focus:outline-hidden focus-visible:ring-4\",\n\t\"disabled:cursor-default disabled:opacity-50\",\n\t\"not-disabled:active:scale-[0.97]\",\n);\n\nconst iconButtonVariants = cva(\"\", {\n\tvariants: {\n\t\t/**\n\t\t * Defines the visual style of the Button.\n\t\t */\n\t\tappearance: {\n\t\t\tghost:\n\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\toutlined:\n\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t},\n\t\t/**\n\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t * replace the `icon` with a spinner.\n\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t */\n\t\tisLoading: {\n\t\t\tfalse: \"\",\n\t\t\ttrue: \"opacity-50\",\n\t\t},\n\t\t/**\n\t\t * The size of the IconButton.\n\t\t */\n\t\tsize: {\n\t\t\txs: \"size-6\",\n\t\t\tsm: \"size-7\",\n\t\t\tmd: \"size-9\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tappearance: \"outlined\",\n\t\tsize: \"md\",\n\t},\n});\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbaseIconButtonClasses,\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tinvariant(\n\t\t\t\tisValidElement(children) && Children.only(children),\n\t\t\t\t\"When using `asChild`, IconButton must be passed a single child as a JSX tag.\",\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(children, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n\tbaseIconButtonClasses,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"mHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,QAAAC,MAAY,OACrB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAEnE,OAAOC,MAAe,iBAiKnB,cAAAC,EAmCA,QAAAC,MAnCA,oBA3JH,IAAMC,EAAwBC,EAC7B,cACA,8GACA,4CACA,8CACA,kCACD,EAEMC,EAAqBC,EAAI,GAAI,CAClC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CAAC,EA8FKC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZf,EAACwB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EACVxB,EACAE,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,gBAAiBS,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,OAAIT,GACHiB,EACCC,EAAejB,CAAQ,GAAKkB,EAAS,KAAKlB,CAAQ,EAClD,8EACD,EAGCX,EAAC8B,EAAA,CAAM,GAAGL,EACR,SAAAM,EAAapB,EAAU,CAAC,EAAGX,EAACgC,EAAA,CAAK,IAAKT,EAAM,CAAE,EAChD,GAKDtB,EAAC,UAAQ,GAAGwB,EAAa,KAAMP,EAC9B,UAAAlB,EAAC,QAAK,UAAU,UAAW,SAAAgB,EAAM,EACjChB,EAACgC,EAAA,CAAK,IAAKT,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","jsx","jsxs","baseIconButtonClasses","clsx","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","invariant","isValidElement","Children","Slot","cloneElement","Icon"]}
|
package/dist/combobox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as f}from"./chunk-J6ZF5J72.js";import{a as s}from"./chunk-AZ56JGNY.js";import*as i from"@ariakit/react";import{Slot as l}from"@radix-ui/react-slot";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md p-1 my-
|
|
1
|
+
import{b as f}from"./chunk-J6ZF5J72.js";import{a as s}from"./chunk-AZ56JGNY.js";import*as i from"@ariakit/react";import{Slot as l}from"@radix-ui/react-slot";import{createContext as I,forwardRef as b}from"react";import{jsx as t}from"react/jsx-runtime";var c=({children:o,...e})=>t(i.ComboboxProvider,{...e,children:o});c.displayName="Combobox";var x=b(({"aria-invalid":o,autoComplete:e="list",autoSelect:a="always",className:n,validation:r,...m},d)=>{let p=o!=null&&o!=="false"?"error":typeof r=="function"?r():r;return t(i.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:a,className:s("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-hidden focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]",n),"data-validation":p||void 0,ref:d,...m})});x.displayName="ComboboxInput";var C=b(({asChild:o=!1,children:e,className:a,sameWidth:n=!0,unmountOnHide:r=!0,...m},d)=>t(i.ComboboxPopover,{className:s("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden",a),ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,sameWidth:n,unmountOnHide:r,...m,children:e}));C.displayName="ComboboxContent";var w=I(void 0),v=b(({asChild:o=!1,children:e,className:a,focusOnHover:n=!0,value:r,...m},d)=>t(w.Provider,{value:r,children:t(i.ComboboxItem,{className:s("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",a),focusOnHover:n,ref:d,render:o?({ref:u,...p})=>t(l,{ref:u,...p}):void 0,value:r,...m,children:e})}));v.displayName="ComboboxItem";var P=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroup,{className:s("",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));P.displayName="ComboboxGroup";var y=b(({asChild:o=!1,children:e,className:a,...n},r)=>t(i.ComboboxGroupLabel,{className:s("text-muted px-2 py-1 text-xs font-medium",a),ref:r,render:o?({ref:m,...d})=>t(l,{ref:m,...d}):void 0,...n,children:e}));y.displayName="ComboboxGroupLabel";var g=b(({asChild:o=!1,className:e,...a},n)=>t(i.ComboboxItemValue,{className:s("*:data-[user-value]:font-bold flex-1 shrink-0 text-strong font-normal",e),ref:n,render:o?({ref:r,...m})=>t(l,{ref:r,...m}):void 0,...a}));g.displayName="ComboboxItemValue";var h=b(({className:o,...e},a)=>t(f,{ref:a,className:s("-mx-1.25 my-1 w-auto",o),...e}));h.displayName="ComboboxSeparator";var G={Root:c,Content:C,Group:P,GroupLabel:y,Input:x,Item:v,ItemValue:g,Separator:h};export{G as Combobox};
|
|
2
2
|
//# sourceMappingURL=combobox.js.map
|
package/dist/combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ElementRef,\n\tcreateContext,\n\tforwardRef,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn (\n\t\t<Primitive.ComboboxProvider {...props}>\n\t\t\t{children}\n\t\t</Primitive.ComboboxProvider>\n\t);\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> &\n\tWithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxPopover>,\n\tComboboxContentProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md p-1 my-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild\n\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> &\n\tWithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * <Combobox.Item value=\"Orange\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItem>,\n\tComboboxItemProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tfocusOnHover = true,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center\",\n\t\t\t\t\t\t\"data-active-item:bg-popover-hover\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> &\n\tWithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroup>,\n\tComboboxGroupProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroup\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroup>\n\t);\n});\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<\n\tPrimitive.ComboboxGroupLabelProps,\n\t\"render\"\n> &\n\tWithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<\n\tPrimitive.ComboboxItemValueProps<\"span\">,\n\t\"render\"\n> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\">\n * 🍎\n * <Combobox.ItemValue />\n * </Combobox.Item>\n * <Combobox.Item value=\"Banana\">\n * 🍌\n * <Combobox.ItemValue />\n * </Combobox.Item>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-[user-value]:font-bold flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * <Combobox.Separator />\n * <Combobox.Item>\n * Click me!\n * </Combobox.Item>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tElementRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-group-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * <Combobox.Item value=\"Orange\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-item-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\">\n\t * 🍎\n\t * <Combobox.ItemValue />\n\t * </Combobox.Item>\n\t * <Combobox.Item value=\"Banana\">\n\t * 🍌\n\t * <Combobox.ItemValue />\n\t * </Combobox.Item>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * <Combobox.Separator />\n\t * <Combobox.Item>\n\t * Click me!\n\t * </Combobox.Item>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"gFAEA,UAAYA,MAAe,iBAC3B,OAAS,QAAAC,MAAY,uBACrB,OAIC,iBAAAC,EACA,cAAAC,MACM,QAsBL,cAAAC,MAAA,oBAFF,IAAMC,EAAO,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAEjCH,EAAW,mBAAV,CAA4B,GAAGG,EAC9B,SAAAD,EACF,EAGFD,EAAK,YAAc,WAoBnB,IAAMG,EAAQC,EACb,CACC,CACC,eAAgBC,EAChB,aAAAC,EAAe,OACf,WAAAC,EAAa,SACb,UAAAC,EACA,WAAYC,EACZ,GAAGP,CACJ,EACAQ,IACI,CAEJ,IAAMC,EADYN,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOI,GAAgB,WACtBA,EAAY,EACZA,EAGJ,OACCV,EAAW,WAAV,CACA,eAJkBM,GAAgBM,IAAe,QAKjD,aAAcL,EACd,WAAYC,EACZ,UAAWK,EACV,uCACA,oFACA,+BACA,2BACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACA,yHACAJ,CACD,EACA,kBAAiBG,GAAc,OAC/B,IAAKD,EACJ,GAAGR,EACL,CAEF,CACD,EACAC,EAAM,YAAc,gBAiBpB,IAAMU,EAAUT,EAIf,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,UAAAO,EAAY,GACZ,cAAAC,EAAgB,GAChB,GAAGd,CACJ,EACAQ,IAGCX,EAAW,kBAAV,CACA,UAAWa,EACV,qHACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,UAAWF,EACX,cAAeC,EACd,GAAGd,EAEH,SAAAD,EACF,CAGH,EACAY,EAAQ,YAAc,kBAKtB,IAAMM,EAA2BC,EAAkC,MAAS,EAetEC,EAAOjB,EAIZ,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,aAAAc,EAAe,GACf,MAAAC,EACA,GAAGrB,CACJ,EACAQ,IAGCX,EAACoB,EAAyB,SAAzB,CAAkC,MAAOI,EACzC,SAAAxB,EAAW,eAAV,CACA,UAAWa,EACV,6EACA,oCACA,2BACAJ,CACD,EACA,aAAcc,EACd,IAAKZ,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,MAAOM,EACN,GAAGrB,EAEH,SAAAD,EACF,EACD,CAGH,EACAoB,EAAK,YAAc,eAwBnB,IAAMG,EAAQpB,EAGZ,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,gBAAV,CACA,UAAWa,EAAG,GAAIJ,CAAS,EAC3B,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDuB,EAAM,YAAc,gBA2BpB,IAAMC,EAAarB,EAGjB,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,qBAAV,CACA,UAAWa,EAAG,2CAA4CJ,CAAS,EACnE,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDwB,EAAW,YAAc,qBAmCzB,IAAMC,EAAYtB,EAGhB,CAAC,CAAE,QAAAU,EAAU,GAAO,UAAAN,EAAW,GAAGN,CAAM,EAAGQ,IAE3CX,EAAW,oBAAV,CACA,UAAWa,EACV,wEACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EACL,CAED,EACDwB,EAAU,YAAc,oBAoBxB,IAAMC,EAA6BvB,EAGjC,CAAC,CAAE,UAAAI,EAAW,GAAGN,CAAM,EAAGQ,IAC3BX,EAAC6B,EAAA,CACA,IAAKlB,EACL,UAAWE,EAAG,uBAAwBJ,CAAS,EAC9C,GAAGN,EACL,CACA,EACDyB,EAA2B,YAAc,oBAsBzC,IAAME,EAAW,CAiBhB,KAAA7B,EAiBA,QAAAa,EAoBA,MAAAW,EAoBA,WAAAC,EAiBA,MAAAtB,EAkBA,KAAAkB,EAuBA,UAAAK,EAuBA,UAAWC,CACZ","names":["Primitive","Slot","createContext","forwardRef","jsx","Root","children","props","Input","forwardRef","_ariaInvalid","autoComplete","autoSelect","className","_validation","ref","validation","cx","Content","asChild","sameWidth","unmountOnHide","childProps","Slot","ComboboxItemValueContext","createContext","Item","focusOnHover","value","Group","GroupLabel","ItemValue","ComboboxSeparatorComponent","Separator","Combobox"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as Primitive from \"@ariakit/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ElementRef,\n\tcreateContext,\n\tforwardRef,\n} from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype ComboboxProps = Primitive.ComboboxProviderProps;\n\n/**\n * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Root = ({ children, ...props }: ComboboxProps) => {\n\treturn (\n\t\t<Primitive.ComboboxProvider {...props}>\n\t\t\t{children}\n\t\t</Primitive.ComboboxProvider>\n\t);\n};\nRoot.displayName = \"Combobox\";\n\ntype ComboboxInputProps = Omit<\n\tPrimitive.ComboboxProps,\n\t\"render\" // we don't support a render prop for the combobox input\n> &\n\tWithValidation;\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Input = forwardRef<ComponentRef<\"input\">, ComboboxInputProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tautoComplete = \"list\",\n\t\t\tautoSelect = \"always\",\n\t\t\tclassName,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<Primitive.Combobox\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tautoComplete={autoComplete}\n\t\t\t\tautoSelect={autoSelect}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong\",\n\t\t\t\t\t\"placeholder:text-placeholder\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-hidden focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[var(--color-blue-50)] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"ComboboxInput\";\n\ntype ComboboxContentProps = Omit<Primitive.ComboboxPopoverProps, \"render\"> &\n\tWithAsChild;\n\n/**\n * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Content = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxPopover>,\n\tComboboxContentProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tsameWidth = true,\n\t\t\tunmountOnHide = true,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Primitive.ComboboxPopover\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] scrollbar overflow-y-scroll overflow-x-hidden rounded-md border shadow-md p-1 my-2 focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\trender={\n\t\t\t\t\tasChild\n\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tsameWidth={sameWidth}\n\t\t\t\tunmountOnHide={unmountOnHide}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Primitive.ComboboxPopover>\n\t\t);\n\t},\n);\nContent.displayName = \"ComboboxContent\";\n\ntype ComboboxItemProps = Omit<Primitive.ComboboxItemProps, \"render\"> &\n\tWithAsChild;\n\nconst ComboboxItemValueContext = createContext<string | undefined>(undefined);\n\n/**\n * Renders a combobox item inside a Combobox.Content component.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * <Combobox.Item value=\"Orange\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Item = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItem>,\n\tComboboxItemProps\n>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tfocusOnHover = true,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<ComboboxItemValueContext.Provider value={value}>\n\t\t\t\t<Primitive.ComboboxItem\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center\",\n\t\t\t\t\t\t\"data-active-item:bg-popover-hover\",\n\t\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tfocusOnHover={focusOnHover}\n\t\t\t\t\tref={ref}\n\t\t\t\t\trender={\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Primitive.ComboboxItem>\n\t\t\t</ComboboxItemValueContext.Provider>\n\t\t);\n\t},\n);\nItem.displayName = \"ComboboxItem\";\n\ntype ComboboxGroupProps = Omit<Primitive.ComboboxGroupProps, \"render\"> &\n\tWithAsChild;\n\n/**\n * Renders a group for Combobox.Item elements.\n *\n * Optionally, a Combobox.GroupLabel can be rendered as a child to provide a label for the group.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Group = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroup>,\n\tComboboxGroupProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroup\n\t\t\tclassName={cx(\"\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroup>\n\t);\n});\nGroup.displayName = \"ComboboxGroup\";\n\ntype ComboboxGroupLabelProps = Omit<\n\tPrimitive.ComboboxGroupLabelProps,\n\t\"render\"\n> &\n\tWithAsChild;\n\n/**\n * Renders a label in a combobox group.\n *\n * This component should be wrapped with Combobox.Group so the aria-labelledby is correctly set on the group element.\n *\n * You should only reach for this component when it semantically makes sense to group items together, such as when a label is needed.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst GroupLabel = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxGroupLabel>,\n\tComboboxGroupLabelProps\n>(({ asChild = false, children, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxGroupLabel\n\t\t\tclassName={cx(\"text-muted px-2 py-1 text-xs font-medium\", className)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.ComboboxGroupLabel>\n\t);\n});\nGroupLabel.displayName = \"ComboboxGroupLabel\";\n\ntype ComboboxItemValueProps = Omit<\n\tPrimitive.ComboboxItemValueProps<\"span\">,\n\t\"render\"\n> &\n\tWithAsChild;\n\n/**\n * Highlights the match between the current Combobox.Input value (userValue) and parent Combobox.Item value.\n *\n * Renders a span element with the combobox item value as children.\n * The value is split into span elements.\n * Portions of the value matching the user input will have a data-user-value attribute, while the rest will have a data-autocomplete-value attribute.\n *\n * Should only be used as a child of Combobox.Item.\n * The item value is automatically set to the value of the closest Combobox.Item component's value prop.\n * The user input value is automatically set to the combobox store's value state.\n * Both values can be overridden by providing the value and userValue props, respectively.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\">\n * 🍎\n * <Combobox.ItemValue />\n * </Combobox.Item>\n * <Combobox.Item value=\"Banana\">\n * 🍌\n * <Combobox.ItemValue />\n * </Combobox.Item>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst ItemValue = forwardRef<\n\tComponentRef<typeof Primitive.ComboboxItemValue>,\n\tComboboxItemValueProps\n>(({ asChild = false, className, ...props }, ref) => {\n\treturn (\n\t\t<Primitive.ComboboxItemValue\n\t\t\tclassName={cx(\n\t\t\t\t\"*:data-[user-value]:font-bold flex-1 shrink-0 text-strong font-normal\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\trender={\n\t\t\t\tasChild\n\t\t\t\t\t? ({ ref, ...childProps }) => <Slot ref={ref} {...childProps} />\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nItemValue.displayName = \"ComboboxItemValue\";\n\n/**\n * Renders a separator between Combobox.Items or Combobox.Groups.\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Group>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Group>\n * <Combobox.Separator />\n * <Combobox.Item>\n * Click me!\n * </Combobox.Item>\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst ComboboxSeparatorComponent = forwardRef<\n\tElementRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nComboboxSeparatorComponent.displayName = \"ComboboxSeparator\";\n\n/**\n * Fill in a React input field with autocomplete & autosuggest functionalities.\n * Choose from a list of suggested values with full keyboard support.\n * This component is based on the WAI-ARIA Combobox Pattern and is powered by the\n * ariakit Combobox.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/\n * @see https://ariakit.org/components/combobox\n *\n * @see https://mantle.ngrok.com/components/combobox\n *\n * @example\n * <Combobox.Root>\n * <Combobox.Input />\n * <Combobox.Content>\n * <Combobox.Item value=\"Apple\" />\n * <Combobox.Item value=\"Banana\" />\n * </Combobox.Content>\n * </Combobox.Root>\n */\nconst Combobox = {\n\t/**\n\t * Root component for a combobox. Provides a combobox store that controls the state of Combobox components.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Renders a popover that contains combobox content, e.g. Combobox.Items, Combobox.Groups, and Combobox.Separators.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * Renders a group for Combobox.Item elements.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * Renders a label in a combobox group.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-group-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.GroupLabel>Fruits</Combobox.GroupLabel>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tGroupLabel,\n\t/**\n\t * Renders a combobox input element that can be used to filter a list of items.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-input\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tInput,\n\t/**\n\t * Renders a combobox item inside a Combobox.Content component.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * <Combobox.Item value=\"Orange\" />\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * Highlights the match between the current Combobox.Input value and parent Combobox.Item value.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-item-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Item value=\"Apple\">\n\t * 🍎\n\t * <Combobox.ItemValue />\n\t * </Combobox.Item>\n\t * <Combobox.Item value=\"Banana\">\n\t * 🍌\n\t * <Combobox.ItemValue />\n\t * </Combobox.Item>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tItemValue,\n\t/**\n\t * Renders a separator between Combobox.Items or Combobox.Groups.\n\t *\n\t * @see https://mantle.ngrok.com/components/combobox#api-combobox-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <Combobox.Root>\n\t * <Combobox.Input />\n\t * <Combobox.Content>\n\t * <Combobox.Group>\n\t * <Combobox.Item value=\"Apple\" />\n\t * <Combobox.Item value=\"Banana\" />\n\t * </Combobox.Group>\n\t * <Combobox.Separator />\n\t * <Combobox.Item>\n\t * Click me!\n\t * </Combobox.Item>\n\t * </Combobox.Content>\n\t * </Combobox.Root>\n\t * ```\n\t */\n\tSeparator: ComboboxSeparatorComponent,\n} as const;\n\nexport {\n\t//,\n\tCombobox,\n};\n"],"mappings":"gFAEA,UAAYA,MAAe,iBAC3B,OAAS,QAAAC,MAAY,uBACrB,OAIC,iBAAAC,EACA,cAAAC,MACM,QAsBL,cAAAC,MAAA,oBAFF,IAAMC,EAAO,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,IAEjCH,EAAW,mBAAV,CAA4B,GAAGG,EAC9B,SAAAD,EACF,EAGFD,EAAK,YAAc,WAoBnB,IAAMG,EAAQC,EACb,CACC,CACC,eAAgBC,EAChB,aAAAC,EAAe,OACf,WAAAC,EAAa,SACb,UAAAC,EACA,WAAYC,EACZ,GAAGP,CACJ,EACAQ,IACI,CAEJ,IAAMC,EADYN,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOI,GAAgB,WACtBA,EAAY,EACZA,EAGJ,OACCV,EAAW,WAAV,CACA,eAJkBM,GAAgBM,IAAe,QAKjD,aAAcL,EACd,WAAYC,EACZ,UAAWK,EACV,uCACA,oFACA,+BACA,2BACA,2BACA,yDACA,kHACA,iQACA,iQACA,kPACA,yHACAJ,CACD,EACA,kBAAiBG,GAAc,OAC/B,IAAKD,EACJ,GAAGR,EACL,CAEF,CACD,EACAC,EAAM,YAAc,gBAiBpB,IAAMU,EAAUT,EAIf,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,UAAAO,EAAY,GACZ,cAAAC,EAAgB,GAChB,GAAGd,CACJ,EACAQ,IAGCX,EAAW,kBAAV,CACA,UAAWa,EACV,wKACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,UAAWF,EACX,cAAeC,EACd,GAAGd,EAEH,SAAAD,EACF,CAGH,EACAY,EAAQ,YAAc,kBAKtB,IAAMM,EAA2BC,EAAkC,MAAS,EAetEC,EAAOjB,EAIZ,CACC,CACC,QAAAU,EAAU,GACV,SAAAb,EACA,UAAAO,EACA,aAAAc,EAAe,GACf,MAAAC,EACA,GAAGrB,CACJ,EACAQ,IAGCX,EAACoB,EAAyB,SAAzB,CAAkC,MAAOI,EACzC,SAAAxB,EAAW,eAAV,CACA,UAAWa,EACV,6EACA,oCACA,2BACAJ,CACD,EACA,aAAcc,EACd,IAAKZ,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEJ,MAAOM,EACN,GAAGrB,EAEH,SAAAD,EACF,EACD,CAGH,EACAoB,EAAK,YAAc,eAwBnB,IAAMG,EAAQpB,EAGZ,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,gBAAV,CACA,UAAWa,EAAG,GAAIJ,CAAS,EAC3B,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDuB,EAAM,YAAc,gBA2BpB,IAAMC,EAAarB,EAGjB,CAAC,CAAE,QAAAU,EAAU,GAAO,SAAAb,EAAU,UAAAO,EAAW,GAAGN,CAAM,EAAGQ,IAErDX,EAAW,qBAAV,CACA,UAAWa,EAAG,2CAA4CJ,CAAS,EACnE,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EAEH,SAAAD,EACF,CAED,EACDwB,EAAW,YAAc,qBAmCzB,IAAMC,EAAYtB,EAGhB,CAAC,CAAE,QAAAU,EAAU,GAAO,UAAAN,EAAW,GAAGN,CAAM,EAAGQ,IAE3CX,EAAW,oBAAV,CACA,UAAWa,EACV,wEACAJ,CACD,EACA,IAAKE,EACL,OACCI,EACG,CAAC,CAAE,IAAAJ,EAAK,GAAGO,CAAW,IAAMlB,EAACmB,EAAA,CAAK,IAAKR,EAAM,GAAGO,EAAY,EAC5D,OAEH,GAAGf,EACL,CAED,EACDwB,EAAU,YAAc,oBAoBxB,IAAMC,EAA6BvB,EAGjC,CAAC,CAAE,UAAAI,EAAW,GAAGN,CAAM,EAAGQ,IAC3BX,EAAC6B,EAAA,CACA,IAAKlB,EACL,UAAWE,EAAG,uBAAwBJ,CAAS,EAC9C,GAAGN,EACL,CACA,EACDyB,EAA2B,YAAc,oBAsBzC,IAAME,EAAW,CAiBhB,KAAA7B,EAiBA,QAAAa,EAoBA,MAAAW,EAoBA,WAAAC,EAiBA,MAAAtB,EAkBA,KAAAkB,EAuBA,UAAAK,EAuBA,UAAWC,CACZ","names":["Primitive","Slot","createContext","forwardRef","jsx","Root","children","props","Input","forwardRef","_ariaInvalid","autoComplete","autoSelect","className","_validation","ref","validation","cx","Content","asChild","sameWidth","unmountOnHide","childProps","Slot","ComboboxItemValueContext","createContext","Item","focusOnHover","value","Group","GroupLabel","ItemValue","ComboboxSeparatorComponent","Separator","Combobox"]}
|
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 { k as SortingMode } from './direction-veAOo2is.js';
|
|
7
|
-
import { B as Button } from './button-
|
|
7
|
+
import { B as Button } from './button-CGzhQiwo.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-W2SMAR4Q.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{
|
|
1
|
+
import{a as r}from"./chunk-W2SMAR4Q.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as c}from"./chunk-AZ56JGNY.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 O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(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:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,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
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-PX63EGR2.js";import{d as p}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{
|
|
1
|
+
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-PX63EGR2.js";import{d as p}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{c as g}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as H}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,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-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>H(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","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",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var F={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{F as Dialog};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/pagination.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import
|
|
1
|
+
import{a as p}from"./chunk-MEIVQLEY.js";import"./chunk-MF2QITTY.js";import{b}from"./chunk-J6ZF5J72.js";import{a as z}from"./chunk-3H3EUKI7.js";import"./chunk-T5U5KWUW.js";import{c as m}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as P}from"./chunk-AZ56JGNY.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,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),y=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})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(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))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,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-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{
|
|
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-PX63EGR2.js";import{d as c}from"./chunk-RH46OJYB.js";import"./chunk-THKAHLEP.js";import"./chunk-6J7D73WA.js";import{c as y}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.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/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "mantle is ngrok's UI library and design system.",
|
|
4
4
|
"author": "ngrok",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.52.
|
|
6
|
+
"version": "0.52.8",
|
|
7
7
|
"homepage": "https://mantle.ngrok.com",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@ariakit/react": "0.4.18",
|
|
29
|
-
"@headlessui/react": "2.2.
|
|
29
|
+
"@headlessui/react": "2.2.8",
|
|
30
30
|
"@radix-ui/react-accordion": "1.2.12",
|
|
31
31
|
"@radix-ui/react-dialog": "1.1.15",
|
|
32
32
|
"@radix-ui/react-dropdown-menu": "2.1.16",
|
|
@@ -58,12 +58,12 @@
|
|
|
58
58
|
"@types/prismjs": "1.26.5",
|
|
59
59
|
"@types/react": "18.3.24",
|
|
60
60
|
"@types/react-dom": "18.3.7",
|
|
61
|
-
"browserslist": "4.
|
|
61
|
+
"browserslist": "4.26.0",
|
|
62
62
|
"date-fns": "4.1.0",
|
|
63
63
|
"jsdom": "26.1.0",
|
|
64
64
|
"react": "18.3.1",
|
|
65
65
|
"react-dom": "18.3.1",
|
|
66
|
-
"react-router": "7.
|
|
66
|
+
"react-router": "7.9.1",
|
|
67
67
|
"tailwindcss": "4.1.13",
|
|
68
68
|
"tsup": "8.5.0",
|
|
69
69
|
"typescript": "5.9.2",
|
package/dist/chunk-E6VQ7CJN.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{a as l}from"./chunk-3C5O3AQA.js";import{a as o}from"./chunk-I6T6YV2L.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{Slot as V}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as E}from"react";import{jsx as t,jsxs as L}from"react/jsx-runtime";var N=C("inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),A=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:p,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:n,type:g,...y},B)=>{let i=l(c??f??e),r=e?t(I,{className:"animate-spin"}):v,s={"aria-disabled":i,"data-icon-button":!0,"data-loading":e,"data-size":n,className:d("icon-button",N({appearance:u,isLoading:e,size:n}),m),disabled:i,ref:B,...y};if(b){let a=H.only(p),x=E(a);return t(V,{...s,children:x&&M(a,{},t(o,{svg:r}))})}return L("button",{...s,type:g,children:[t("span",{className:"sr-only",children:h}),t(o,{svg:r})]})});A.displayName="IconButton";export{A as a};
|
|
2
|
-
//# sourceMappingURL=chunk-E6VQ7CJN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-6\",\n\t\t\t\tsm: \"size-7\",\n\t\t\t\tmd: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n * type=\"button\"\n * icon={<TrashIcon />}\n * label=\"Delete item\"\n * appearance=\"ghost\"\n * size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tclassName: cx(\n\t\t\t\t\"icon-button\",\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport {\n\t//,\n\tIconButton,\n\ticonButtonVariants,\n};\n\nexport type {\n\t//,\n\tIconButtonProps,\n};\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA6JhE,cAAAC,EAgCA,QAAAC,MAhCA,oBAtJH,IAAMC,EAAqBC,EAC1B,2MACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EA8FMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZb,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,UAAWS,EACV,cACAtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,SAAAS,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OACCzB,EAAC6B,EAAA,CAAM,GAAGN,EACR,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EACnE,CAEF,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}
|
package/dist/chunk-MGYWQQVZ.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{a as g}from"./chunk-3C5O3AQA.js";import{a as u}from"./chunk-I6T6YV2L.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as k}from"@phosphor-icons/react/CircleNotch";import{Slot as I}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import f from"clsx";import{Children as w,cloneElement as E,forwardRef as H,isValidElement as M}from"react";import T from"tiny-invariant";import{jsx as t,jsxs as S}from"react/jsx-runtime";var A=N("inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-hidden",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),L=H(({"aria-disabled":i,appearance:e="outlined",asChild:n,children:r,className:m,disabled:h,icon:x,iconPlacement:a="start",isLoading:o=!1,priority:y="default",type:B,...P},C)=>{let l=g(i??h??o),s=o?t(k,{className:"animate-spin"}):x,c=s&&e!=="link",b={"aria-disabled":l,className:p(A({appearance:e,priority:y,isLoading:o}),c&&a==="start"&&"ps-2.5",c&&a==="end"&&"pe-2.5",m),"data-loading":o,disabled:l,ref:C,...P};if(n){let d=w.only(r);T(M(d),"When using `asChild`, Button must be passed a single child as a JSX tag.");let V=d.props?.children;return t(I,{...b,children:E(d,{},t(v,{appearance:e,icon:s,iconPlacement:a,children:V}))})}return t("button",{...b,type:B,children:t(v,{appearance:e,icon:s,iconPlacement:a,children:r})})});L.displayName="Button";var v=({appearance:i,children:e,icon:n,iconPlacement:r})=>S("span",{className:f("inline-flex items-center gap-1.5 focus-within:outline-hidden focus-visible:outline-hidden",i==="link"&&"hover:underline group-disabled/button-link:no-underline"),children:[n&&t(u,{svg:n,className:f(r==="end"&&"order-last")}),e]});export{A as a,L as b};
|
|
2
|
-
//# sourceMappingURL=chunk-MGYWQQVZ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type {\n\tButtonHTMLAttributes,\n\tComponentProps,\n\tPropsWithChildren,\n\tReactNode,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst buttonVariants = cva(\n\t\"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-hidden focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-hidden\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tfilled:\n\t\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\tghost:\n\t\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t\t * color and styling to communicate its purpose to the user\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"\",\n\t\t\t\tdefault: \"\",\n\t\t\t\tneutral: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tisLoading: false,\n\t\t\tpriority: \"default\",\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n * Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-loading\": isLoading,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<ButtonProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<InnerContent\n\t\t\t\t\t\t\tappearance={appearance}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</InnerContent>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<InnerContent\n\t\t\t\t\tappearance={appearance}\n\t\t\t\t\ticon={icon}\n\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InnerContent>\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n\tbuttonVariants,\n};\n\nexport type {\n\t//,\n\tButtonProps,\n\tButtonAppearance,\n\tButtonPriority,\n};\n\ntype InnerContentProps = PropsWithChildren &\n\tPick<ButtonProps, \"appearance\" | \"icon\" | \"iconPlacement\">;\n\nconst InnerContent = ({\n\tappearance,\n\tchildren,\n\ticon,\n\ticonPlacement,\n}: InnerContentProps) => (\n\t<span\n\t\tclassName={clsx(\n\t\t\t\"inline-flex items-center gap-1.5 focus-within:outline-hidden focus-visible:outline-hidden\",\n\t\t\tappearance === \"link\" &&\n\t\t\t\t\"hover:underline group-disabled/button-link:no-underline\",\n\t\t)}\n\t>\n\t\t{icon && (\n\t\t\t<Icon\n\t\t\t\tsvg={icon}\n\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t/>\n\t\t)}\n\t\t{children}\n\t</span>\n);\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OACjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAOnE,OAAOC,MAAe,iBAgNnB,cAAAC,EAsFF,QAAAC,MAtFE,oBA1MH,IAAMC,EAAiBC,EACtB,8MACA,CACC,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CACD,EA6FMC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACVvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,eAAgBI,EAChB,SAAAK,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMkB,EAAcC,EAAS,KAAKlB,CAAQ,EAC1CmB,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACC1B,EAAC+B,EAAA,CAAM,GAAGP,EACR,SAAAQ,EACAN,EACA,CAAC,EACD1B,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAiB,EACF,CACD,EACD,CAEF,CAEA,OACC9B,EAAC,UAAQ,GAAGwB,EAAa,KAAMR,EAC9B,SAAAhB,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAJ,EACF,EACD,CAEF,CACD,EACAL,EAAO,YAAc,SAkBrB,IAAM8B,EAAe,CAAC,CACrB,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,CACD,IACCC,EAAC,QACA,UAAWC,EACV,4FACAL,IAAe,QACd,yDACF,EAEC,UAAAE,GACAI,EAACC,EAAA,CACA,IAAKL,EACL,UAAWG,EAAKF,IAAkB,OAAS,YAAY,EACxD,EAEAF,GACF","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","InnerContent","InnerContent","appearance","children","icon","iconPlacement","jsxs","clsx","jsx","Icon"]}
|