@ngrok/mantle 0.1.24 → 0.1.26
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/assets/mantle.css +20 -0
- package/dist/button.js +1 -1
- package/dist/calendar.js +1 -1
- package/dist/card.js +1 -1
- package/dist/card.js.map +1 -1
- package/dist/chunk-GTKZKU43.js +2 -0
- package/dist/chunk-GTKZKU43.js.map +1 -0
- package/dist/chunk-OWOC2ZMA.js +2 -0
- package/dist/chunk-OWOC2ZMA.js.map +1 -0
- package/dist/chunk-VCISMRMX.js +2 -0
- package/dist/chunk-VCISMRMX.js.map +1 -0
- package/dist/dialog.js +1 -1
- package/dist/input.d.ts +8 -8
- package/dist/input.js +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/select.d.ts +3 -3
- package/dist/select.js +1 -1
- package/dist/select.js.map +1 -1
- package/dist/sheet.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tabs.js.map +1 -1
- package/dist/tailwind-preset.cjs +1 -1
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.d.cts +3 -0
- package/dist/tailwind-preset.d.ts +3 -0
- package/dist/tailwind-preset.js +1 -1
- package/dist/tailwind-preset.js.map +1 -1
- package/dist/text-area.d.ts +13 -14
- package/dist/text-area.js +1 -1
- package/dist/text-area.js.map +1 -1
- package/dist/{types-nznA3HrJ.d.ts → types-DcL7_eQM.d.ts} +7 -4
- package/package.json +7 -7
- package/dist/chunk-JBZQZ43T.js +0 -2
- package/dist/chunk-JBZQZ43T.js.map +0 -1
- package/dist/chunk-MFBS3YLE.js +0 -2
- package/dist/chunk-MFBS3YLE.js.map +0 -1
- package/dist/chunk-U2AR6K4J.js +0 -2
- package/dist/chunk-U2AR6K4J.js.map +0 -1
package/assets/mantle.css
CHANGED
|
@@ -615,6 +615,7 @@
|
|
|
615
615
|
--shadow-color: 0 0% 0%;
|
|
616
616
|
--shadow-first: 5%;
|
|
617
617
|
--shadow-second: 10%;
|
|
618
|
+
--navigation-shadow: hsl(0deg 0% 0% / 10%);
|
|
618
619
|
}
|
|
619
620
|
|
|
620
621
|
:root.dark {
|
|
@@ -908,6 +909,7 @@
|
|
|
908
909
|
|
|
909
910
|
--shadow-first: 15%;
|
|
910
911
|
--shadow-second: 30%;
|
|
912
|
+
--navigation-shadow: hsl(0deg 0% 0% / 40%);
|
|
911
913
|
}
|
|
912
914
|
|
|
913
915
|
:root.light-high-contrast {
|
|
@@ -1151,6 +1153,7 @@
|
|
|
1151
1153
|
|
|
1152
1154
|
--shadow-first: 100%;
|
|
1153
1155
|
--shadow-second: 100%;
|
|
1156
|
+
--navigation-shadow: hsl(0deg 0% 0% / 60%);
|
|
1154
1157
|
}
|
|
1155
1158
|
|
|
1156
1159
|
:root.dark-high-contrast {
|
|
@@ -1403,6 +1406,7 @@
|
|
|
1403
1406
|
|
|
1404
1407
|
--shadow-first: 100%;
|
|
1405
1408
|
--shadow-second: 100%;
|
|
1409
|
+
--navigation-shadow: hsl(0deg 0% 0% / 100%);
|
|
1406
1410
|
}
|
|
1407
1411
|
|
|
1408
1412
|
::selection {
|
|
@@ -1529,4 +1533,20 @@
|
|
|
1529
1533
|
scrollbar-color: hsl(var(--gray-800) / 0.5) transparent;
|
|
1530
1534
|
scrollbar-width: thin;
|
|
1531
1535
|
}
|
|
1536
|
+
|
|
1537
|
+
.scroll-shadow {
|
|
1538
|
+
background: /* Shadow Cover TOP */
|
|
1539
|
+
linear-gradient(hsl(var(--bg-base)) 30%, hsl(var(--bg-base) / 0%)) center top,
|
|
1540
|
+
/* Shadow Cover BOTTOM */ linear-gradient(hsl(var(--bg-base) / 0%), hsl(var(--bg-base)) 70%) center bottom,
|
|
1541
|
+
/* Shadow TOP */ radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
|
|
1542
|
+
/* Shadow BOTTOM */ radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
|
|
1543
|
+
bottom;
|
|
1544
|
+
background-repeat: no-repeat;
|
|
1545
|
+
background-size:
|
|
1546
|
+
100% 40px,
|
|
1547
|
+
100% 40px,
|
|
1548
|
+
100% 14px,
|
|
1549
|
+
100% 14px;
|
|
1550
|
+
background-attachment: local, local, scroll, scroll;
|
|
1551
|
+
}
|
|
1532
1552
|
}
|
package/dist/button.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as b}from"./chunk-
|
|
1
|
+
import{a as b}from"./chunk-OWOC2ZMA.js";import{b as a}from"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import"./chunk-A5H52ODC.js";export{a as Button,b as IconButton};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
package/dist/calendar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as d}from"./chunk-
|
|
1
|
+
import{a as d}from"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as e}from"./chunk-A5H52ODC.js";import{CaretLeft as s}from"@phosphor-icons/react/dist/icons/CaretLeft";import{CaretRight as i}from"@phosphor-icons/react/dist/icons/CaretRight";import{DayPicker as c}from"react-day-picker";import{jsx as t}from"react/jsx-runtime";function r({className:o,classNames:n,showOutsideDays:l=!1,...a}){return t(c,{showOutsideDays:l,className:e("",o),classNames:{months:"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",month:"space-y-4",caption:"flex justify-center pt-1 relative items-center",caption_label:"text-sm font-medium",nav:"flex items-center",nav_button:e(d({appearance:"ghost",priority:"neutral"}),"sm:h-7 sm:w-7 h-7 w-7"),nav_button_previous:"absolute left-0",nav_button_next:"absolute right-0",table:"w-full border-collapse space-y-1",head_row:"flex",head_cell:"text-body w-7 text-[0.8rem] text-center font-normal",row:"flex w-full mt-1",cell:e("overflow-hidden text-center text-sm p-0 relative focus-within:relative focus-within:z-20 sm:h-7 sm:w-7 h-7 w-7 ",a.mode==="range"?"first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md":""),day:"day size-full rounded-md [&:not([aria-selected],_[disabled])]:hover:bg-filled-accent/15",day_range_start:"day-range-start [&:not(.day-range-end)]:rounded-r-none",day_range_end:"day-range-end [&:not(.day-range-start)]:rounded-l-none",day_selected:"[&:not([disabled])]:bg-filled-accent text-on-filled [&:not([disabled])]:hover:bg-filled-accent",day_today:"[&:not([aria-selected],_[disabled])]:text-accent-600 font-medium [&:not([aria-selected],_[disabled])]:bg-filled-accent/10",day_outside:"day-outside aria-selected:text-on-filled opacity-50 text-muted",day_disabled:"text-muted opacity-50",day_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",day_hidden:"invisible",...n},components:{IconLeft:()=>t(s,{className:"h-4 w-4 shrink-0",weight:"bold"}),IconRight:()=>t(i,{className:"h-4 w-4 shrink-0",weight:"bold"})},...a})}r.displayName="Calendar";export{r as Calendar};
|
|
2
2
|
//# sourceMappingURL=calendar.js.map
|
package/dist/card.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as t}from"./chunk-A5H52ODC.js";import{Slot as c}from"@radix-ui/react-slot";import{forwardRef as o}from"react";import{jsx as i}from"react/jsx-runtime";var
|
|
1
|
+
import{a as t}from"./chunk-A5H52ODC.js";import{Slot as c}from"@radix-ui/react-slot";import{forwardRef as o}from"react";import{jsx as i}from"react/jsx-runtime";var s=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("relative divide-y divide-card-muted rounded-md border border-card bg-card",r),...d,children:e}));s.displayName="Card";var p=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("p-6",r),...d,children:e}));p.displayName="CardBody";var m=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("px-6 py-3",r),...d,children:e}));m.displayName="CardFooter";var l=o(({className:r,children:e,...d},a)=>i("div",{ref:a,className:t("px-6 py-3",r),...d,children:e}));l.displayName="CardHeader";var C=o(({className:r,asChild:e,...d},a)=>i(e?c:"h3",{ref:a,className:t("text-base font-medium text-strong",r),...d}));C.displayName="CardTitle";export{s as Card,p as CardBody,m as CardFooter,l as CardHeader,C as CardTitle};
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/card/src/card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithAsChild } from \"../../types/src/as-child\";\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container that can be used to display content in a box resembling a playing\n * card.\n */\
|
|
1
|
+
{"version":3,"sources":["../packages/card/src/card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../cx\";\nimport type { WithAsChild } from \"../../types/src/as-child\";\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container that can be used to display content in a box resembling a playing\n * card.\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cx(\"relative divide-y divide-card-muted rounded-md border border-card bg-card\", className)}\n\t\t{...rest}\n\t>\n\t\t{children}\n\t</div>\n));\nCard.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardBody = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"p-6\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardFooter = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n */\nconst CardHeader = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...rest }, ref) => (\n\t<div ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t{children}\n\t</div>\n));\nCardHeader.displayName = \"CardHeader\";\n\nexport type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `CardHeader` component.\n */\nconst CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(({ className, asChild, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : \"h3\";\n\treturn <Comp ref={ref} className={cx(\"text-base font-medium text-strong\", className)} {...props} />;\n});\nCardTitle.displayName = \"CardTitle\";\n\nexport {\n\t//,\n\tCard,\n\tCardBody,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n};\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAW1B,cAAAC,MAAA,oBADD,IAAMC,EAAOC,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACrFN,EAAC,OACA,IAAKM,EACL,UAAWC,EAAG,4EAA6EJ,CAAS,EACnG,GAAGE,EAEH,SAAAD,EACF,CACA,EACDH,EAAK,YAAc,OAKnB,IAAMO,EAAWN,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACzFN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,MAAOJ,CAAS,EAAI,GAAGE,EAClD,SAAAD,EACF,CACA,EACDI,EAAS,YAAc,WAKvB,IAAMC,EAAaP,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAC3FN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDK,EAAW,YAAc,aAKzB,IAAMC,EAAaR,EAAsC,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAC3FN,EAAC,OAAI,IAAKM,EAAK,UAAWC,EAAG,YAAaJ,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CACA,EACDM,EAAW,YAAc,aAOzB,IAAMC,EAAYT,EAAiD,CAAC,CAAE,UAAAC,EAAW,QAAAS,EAAS,GAAGC,CAAM,EAAGP,IAE9FN,EADMY,EAAUE,EAAO,KACtB,CAAK,IAAKR,EAAK,UAAWC,EAAG,oCAAqCJ,CAAS,EAAI,GAAGU,EAAO,CACjG,EACDF,EAAU,YAAc","names":["Slot","forwardRef","jsx","Card","forwardRef","className","children","rest","ref","cx","CardBody","CardFooter","CardHeader","CardTitle","asChild","props","Slot"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as w}from"./chunk-NREABJ6Y.js";import{a as h}from"./chunk-A5H52ODC.js";import{CheckCircle as R}from"@phosphor-icons/react/CheckCircle";import{Warning as E}from"@phosphor-icons/react/Warning";import{WarningDiamond as L}from"@phosphor-icons/react/WarningDiamond";import W from"clsx";import{createContext as A,forwardRef as C,useContext as N,useRef as V}from"react";import{jsx as e,jsxs as P}from"react/jsx-runtime";var I=C(({children:t,className:n,...i},a)=>{let o=!!t,p=V(null);return o?e(x,{className:n,forwardedRef:a,innerRef:p,...i,children:t}):e(x,{...i,className:n,forwardedRef:a,innerRef:p,children:e(f,{...i})})});I.displayName="Input";var f=C(({"aria-invalid":t,className:n,validation:i,...a},o)=>{let{"aria-invalid":p,forwardedRef:u,innerRef:r,validation:d,...c}=N(g),l=d??i,m=p??t??l==="error",s={...c,...a,type:a.type??c.type??"text"};return e("div",{className:"min-w-0 flex-1 text-left",children:e("input",{"aria-invalid":m,"data-validation":l||void 0,className:h("w-full bg-form placeholder:text-placeholder focus:outline-none",n),ref:w(o,u,r),...s})})});f.displayName="InputCapture";var g=A({validation:void 0,innerRef:{current:null}}),x=({"aria-invalid":t,"aria-disabled":n,children:i,className:a,disabled:o,forwardedRef:p,innerRef:u,style:r,type:d,validation:c,...l})=>{let s=t!=null&&t!=="false"?"error":c,b=t??s==="error";return e(g.Provider,{value:{"aria-invalid":t,"aria-disabled":n,disabled:o,type:d,validation:s,...l,forwardedRef:p,innerRef:u},children:P("div",{"aria-invalid":b,"aria-disabled":o??n,"data-validation":s||void 0,className:h("relative flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 sm:h-9 sm:text-sm","aria-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5","border-form text-strong has-[:focus-visible]:border-accent-600 has-[:focus-visible]:ring-focus-accent","data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:ring-focus-danger",a),onClick:()=>{u?.current?.focus()},style:r,children:[i,e(k,{name:l.name,validation:s})]})})};var k=({name:t,validation:n})=>{switch(n){case"error":return P("div",{className:"pointer-events-none order-last select-none text-danger-600",children:[e("span",{className:"sr-only",children:W("The value entered for the",t,"input has failed validation.")}),e(E,{"aria-hidden":!0,weight:"fill"})]});case"success":return e("div",{className:"pointer-events-none order-last select-none text-success-600",children:e(R,{weight:"fill"})});case"warning":return e("div",{className:"pointer-events-none order-last select-none text-warning-600",children:e(L,{weight:"fill"})});default:return null}};import{Eye as F}from"@phosphor-icons/react/Eye";import{EyeClosed as B}from"@phosphor-icons/react/EyeClosed";import O from"clsx";import{forwardRef as z,useEffect as S,useState as T}from"react";import{jsx as M,jsxs as y}from"react/jsx-runtime";var H=z(({maskHiddenValue:t=!1,onBlur:n,onFocus:i,onValueVisibilityChange:a,showValue:o=!1,...p},u)=>{let[r,d]=T(o),c=r?"text":"password",l=r?F:B;S(()=>{d(o)},[o]);let[m,s]=T(!1);return y(I,{onBlur:v=>{s(!1),n?.(v)},onFocus:v=>{s(!0),i?.(v)},type:c,ref:u,...p,children:[M(f,{className:O(t&&!r&&!m&&"max-w-6")}),y("button",{type:"button",tabIndex:-1,className:"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong",onClick:()=>{d(!r),a?.(!r)},children:[y("span",{className:"sr-only",children:["Turn password visibility ",r?"off":"on"]}),M(l,{"aria-hidden":!0})]})]})});H.displayName="PasswordInput";function j(t){return t!=null&&t instanceof HTMLInputElement}export{I as a,f as b,H as c,j as d};
|
|
2
|
+
//# sourceMappingURL=chunk-GTKZKU43.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/input/src/input.tsx","../packages/input/src/password-input.tsx","../packages/input/src/is-input.ts"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type { ElementRef, ForwardedRef, InputHTMLAttributes, MutableRefObject, PropsWithChildren } from \"react\";\nimport { createContext, forwardRef, useContext, useRef } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithAutoComplete, WithInputType, WithValidation } from \"./types\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps & PropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ children, className, ...props }, forwardedRef) => {\n\tconst hasChildren = Boolean(children);\n\tconst innerRef = useRef<ElementRef<\"input\">>(null);\n\n\tif (hasChildren) {\n\t\treturn (\n\t\t\t<InputContainer className={className} forwardedRef={forwardedRef} innerRef={innerRef} {...props}>\n\t\t\t\t{children}\n\t\t\t</InputContainer>\n\t\t);\n\t}\n\n\treturn (\n\t\t<InputContainer {...props} className={className} forwardedRef={forwardedRef} innerRef={innerRef}>\n\t\t\t<InputCapture {...props} />\n\t\t</InputContainer>\n\t);\n});\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> & BaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = { ...ctx, ...restProps, type: restProps.type ?? ctx.type ?? \"text\" };\n\n\t\treturn (\n\t\t\t<div className=\"min-w-0 flex-1 text-left\">\n\t\t\t\t<input\n\t\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\t\tdata-validation={validation || undefined} // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing\n\t\t\t\t\tclassName={cx(\"w-full bg-form placeholder:text-placeholder focus:outline-none\", className)}\n\t\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({ validation: undefined, innerRef: { current: null } });\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid ? \"error\" : _validation;\n\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\t\tdata-validation={validation || undefined} // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative flex h-11 w-full items-center gap-1.5 rounded-md border bg-form px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-4 focus-visible:outline-none focus-visible:ring-4 sm:h-9 sm:text-sm\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-6 sm:[&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong has-[:focus-visible]:border-accent-600 has-[:focus-visible]:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:border-success-600 has-[:focus-visible]:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:border-warning-600 has-[:focus-visible]:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:border-danger-600 has-[:focus-visible]:data-validation-error:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({ name, validation }: WithValidation & { name?: string }) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"pointer-events-none order-last select-none text-danger-600\">\n\t\t\t\t\t<span className=\"sr-only\">{clsx(\"The value entered for the\", name, \"input has failed validation.\")}</span>\n\t\t\t\t\t<Warning aria-hidden weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"pointer-events-none order-last select-none text-success-600\">\n\t\t\t\t\t<CheckCircle weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"pointer-events-none order-last select-none text-warning-600\">\n\t\t\t\t\t<WarningDiamond weight=\"fill\" />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\n","import { Eye } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosed } from \"@phosphor-icons/react/EyeClosed\";\nimport clsx from \"clsx\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, InputCapture } from \"./input\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\n\t\t/**\n\t\t * Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.\n\t\t * @default false\n\t\t */\n\t\tmaskHiddenValue?: boolean;\n\t\t/**\n\t\t * Callback for when the visibility of the password value changes.\n\t\t */\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/**\n\t\t * Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ maskHiddenValue = false, onBlur, onFocus, onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? Eye : EyeClosed;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\tconst [isFocused, setIsFocused] = useState(false);\n\t\tconst shouldMaskHiddenValue = maskHiddenValue && !showPassword && !isFocused;\n\n\t\treturn (\n\t\t\t<Input\n\t\t\t\tonBlur={(event) => {\n\t\t\t\t\tsetIsFocused(false);\n\t\t\t\t\tonBlur?.(event);\n\t\t\t\t}}\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tsetIsFocused(true);\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t}}\n\t\t\t\ttype={type}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<InputCapture className={clsx(shouldMaskHiddenValue && \"max-w-6\")} />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"ml-1 cursor-pointer bg-inherit p-0 text-body hover:text-strong\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetShowPassword(!showPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(!showPassword);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t\t<EyeCon aria-hidden />\n\t\t\t\t</button>\n\t\t\t</Input>\n\t\t);\n\t},\n);\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n","/**\n * Type guard for an HTMLInputElement.\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"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","names":["CheckCircle","Warning","WarningDiamond","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Warning","CheckCircle","WarningDiamond","Eye","EyeClosed","clsx","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","maskHiddenValue","onBlur","onFocus","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","Eye","EyeClosed","useEffect","isFocused","setIsFocused","Input","event","InputCapture","clsx","isInput","value"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as l}from"./chunk-MODFDUXR.js";import{a as o}from"./chunk-YPS473FU.js";import{a as d}from"./chunk-A5H52ODC.js";import{CircleNotch as V}from"@phosphor-icons/react/CircleNotch";import{Slot as z}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as P,isValidElement as T}from"react";import{jsx as t,jsxs as N}from"react/jsx-runtime";var E=C("inline-flex cursor-pointer items-center justify-center rounded-md border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"border-transparent 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",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-7 sm:size-6",sm:"size-9 sm:size-7",md:"size-11 sm:size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),c=P(({"aria-disabled":u,appearance:p,asChild:b=!1,children:m,className:f,disabled:B,icon:v,isLoading:e=!1,label:y,size:n,type:h,...g},x)=>{let r=l(u??B??e),s=e?t(V,{className:"animate-spin"}):v,i={"aria-disabled":r,className:d(E({appearance:p,isLoading:e,size:n}),f),"data-loading":e,"data-size":n,disabled:r,ref:x,...g};if(b){let a=H.only(m),I=T(a);return t(z,{...i,children:I&&M(a,{},t(o,{svg:s}))})}return N("button",{...i,type:h,children:[t("span",{className:"sr-only",children:y}),t(o,{svg:s})]})});c.displayName="IconButton";export{c as a};
|
|
2
|
+
//# sourceMappingURL=chunk-OWOC2ZMA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/button/src/icon-button.tsx"],"sourcesContent":["import { CircleNotch } 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 { cx } from \"../../cx\";\nimport { Icon } from \"../../icon\";\nimport type { VariantProps, WithAsChild } from \"../../types\";\nimport { parseBooleanish } from \"../../types\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center rounded-md border focus-within:outline-none 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\"border-transparent 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\",\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-7 sm:size-6\",\n\t\t\t\tsm: \"size-9 sm:size-7\",\n\t\t\t\tmd: \"size-11 sm: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<ButtonHTMLAttributes<HTMLButtonElement>[\"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 * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\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 ? <CircleNotch className=\"animate-spin\" /> : propIcon;\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(iconButtonVariants({ appearance, isLoading, size }), className),\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\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn <Slot {...buttonProps}>{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}</Slot>;\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 { IconButton, iconButtonVariants };\nexport type { IconButtonProps };\n"],"mappings":"wHAAA,OAAS,eAAAA,MAAmB,oCAC5B,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA8IxC,cAAAC,EAoBxB,QAAAC,MApBwB,oBAvI3B,IAAMC,EAAqBC,EAC1B,sKACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,mBACJ,GAAI,mBACJ,GAAI,mBACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EAgFMC,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,EAAYb,EAACsB,EAAA,CAAY,UAAU,eAAe,EAAKV,EAE9DW,EAAc,CACnB,gBAAiBJ,EACjB,UAAWK,EAAGtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAAGL,CAAS,EAC5E,eAAgBG,EAChB,YAAaE,EACb,SAAAI,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OAAOzB,EAAC6B,EAAA,CAAM,GAAGN,EAAc,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EAAE,CACnG,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":["CircleNotch","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","CircleNotch","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as g}from"./chunk-MODFDUXR.js";import{a as p}from"./chunk-YPS473FU.js";import{a as u}from"./chunk-A5H52ODC.js";import{CircleNotch as H}from"@phosphor-icons/react/CircleNotch";import{Slot as M}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import f from"clsx";import{Children as T,cloneElement as E,forwardRef as I,isValidElement as L}from"react";import k from"tiny-invariant";import{jsx as t,jsxs as S}from"react/jsx-runtime";var w=N("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 sm:text-sm [&>*]:focus-within:outline-none",{variants:{appearance:{filled:"h-11 border border-transparent bg-filled-accent px-3 font-medium 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 sm:h-9",ghost:"h-11 border border-transparent px-3 font-medium 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 sm:h-9",outlined:"h-11 border border-accent-600 bg-form px-3 font-medium 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 sm:h-9",link:"group border-transparent text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"border-transparent 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"},{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:"border-transparent 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"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"border-transparent 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"},{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:"border-transparent bg-filled-neutral focus-visible:border-neutral-600 focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),A=I(({"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(H,{className:"animate-spin"}):x,c=s&&e!=="link",b={"aria-disabled":l,className:u(w({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=T.only(r);k(L(d),"When using `asChild`, Button must be passed a single child as a JSX tag.");let V=d.props?.children;return t(M,{...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})})});A.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-none focus-visible:outline-none",i==="link"&&"not-disabled:group-hover:underline"),children:[n&&t(p,{svg:n,className:f(r==="end"&&"order-last")}),e]});export{w as a,A as b};
|
|
2
|
+
//# sourceMappingURL=chunk-VCISMRMX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../packages/button/src/button.tsx"],"sourcesContent":["import { CircleNotch } 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, PropsWithChildren, ReactNode } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../cx\";\nimport { Icon } from \"../../icon\";\nimport { parseBooleanish } from \"../../types\";\nimport type { VariantProps } from \"../../types/src/variant-props\";\n\nconst buttonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 sm:text-sm [&>*]:focus-within:outline-none\",\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\"h-11 border border-transparent bg-filled-accent px-3 font-medium 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 sm:h-9\",\n\t\t\t\tghost:\n\t\t\t\t\t\"h-11 border border-transparent px-3 font-medium 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 sm:h-9\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"h-11 border border-accent-600 bg-form px-3 font-medium 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 sm:h-9\",\n\t\t\t\tlink: \"group border-transparent text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline\",\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\"border-transparent 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\",\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\"border-transparent 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\",\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\"border-transparent 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\",\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\"border-transparent bg-filled-neutral focus-visible:border-neutral-600 focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active\",\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\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\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 */\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<ButtonHTMLAttributes<HTMLButtonElement>[\"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://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\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 ? <CircleNotch className=\"animate-spin\" /> : propIcon;\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 appearance={appearance} icon={icon} iconPlacement={iconPlacement}>\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 appearance={appearance} icon={icon} iconPlacement={iconPlacement}>\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 { Button, buttonVariants };\nexport type { ButtonProps };\n\ntype InnerContentProps = PropsWithChildren & Pick<ButtonProps, \"appearance\" | \"icon\" | \"iconPlacement\">;\n\nconst InnerContent = ({ appearance, children, icon, iconPlacement }: InnerContentProps) => (\n\t<span\n\t\tclassName={clsx(\n\t\t\t\"inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none\",\n\t\t\tappearance === \"link\" && \"not-disabled:group-hover:underline\",\n\t\t)}\n\t>\n\t\t{icon && <Icon svg={icon} className={clsx(iconPlacement === \"end\" && \"order-last\")} />}\n\t\t{children}\n\t</span>\n);\n"],"mappings":"wHAAA,OAAS,eAAAA,MAAmB,oCAC5B,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OACjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAEnE,OAAOC,MAAe,iBAiMK,cAAAC,EA2D1B,QAAAC,MA3D0B,oBA3L3B,IAAMC,EAAiBC,EACtB,oOACA,CACC,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,uGACP,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,EA+EMC,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,EAAYd,EAACsB,EAAA,CAAY,UAAU,eAAe,EAAKV,EAK9DW,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,CAAa,WAAY1B,EAAY,KAAMc,EAAM,cAAeR,EAC/D,SAAAiB,EACF,CACD,EACD,CAEF,CAEA,OACC9B,EAAC,UAAQ,GAAGwB,EAAa,KAAMR,EAC9B,SAAAhB,EAACiC,EAAA,CAAa,WAAY1B,EAAY,KAAMc,EAAM,cAAeR,EAC/D,SAAAJ,EACF,EACD,CAEF,CACD,EACAL,EAAO,YAAc,SAOrB,IAAM8B,EAAe,CAAC,CAAE,WAAAC,EAAY,SAAAC,EAAU,KAAAC,EAAM,cAAAC,CAAc,IACjEC,EAAC,QACA,UAAWC,EACV,wFACAL,IAAe,QAAU,oCAC1B,EAEC,UAAAE,GAAQI,EAACC,EAAA,CAAK,IAAKL,EAAM,UAAWG,EAAKF,IAAkB,OAAS,YAAY,EAAG,EACnFF,GACF","names":["CircleNotch","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","CircleNotch","hasSpecialIconPadding","buttonProps","cx","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","InnerContent","InnerContent","appearance","children","icon","iconPlacement","jsxs","clsx","jsx","Icon"]}
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as m}from"./chunk-
|
|
1
|
+
import{a as m}from"./chunk-OWOC2ZMA.js";import"./chunk-VCISMRMX.js";import"./chunk-MODFDUXR.js";import"./chunk-YPS473FU.js";import"./chunk-GJVJTVHQ.js";import{a as l}from"./chunk-A5H52ODC.js";import{X as C}from"@phosphor-icons/react/X";import*as t from"@radix-ui/react-dialog";import{forwardRef as r}from"react";import{jsx as a,jsxs as P}from"react/jsx-runtime";var x=t.Root,b=t.Trigger,d=t.Portal,N=t.Close,n=r(({className:o,...e},i)=>a(t.Overlay,{ref:i,className:l("fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0",o),...e}));n.displayName=t.Overlay.displayName;var g=r(({className:o,children:e,...i},s)=>P(d,{children:[a(n,{}),a(t.Content,{ref:s,className:l("fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh_-_2rem)] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border border-dialog bg-dialog 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-closed:slide-out-to-left-1/2 data-state-closed:slide-out-to-top-[48%] data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-state-open:slide-in-from-left-1/2 data-state-open:slide-in-from-top-[48%]",o),...i,children:e})]}));g.displayName=t.Content.displayName;var p=({className:o,children:e,...i})=>P("div",{className:l("relative min-h-16 border-b border-dialog-muted px-4 py-6 text-strong",o),...i,children:[a(D,{className:"absolute right-4 top-3.5 float-right"}),e]});p.displayName="DialogHeader";var D=({size:o="md",type:e="button",label:i="Close Dialog",appearance:s="ghost",...u})=>a(t.Close,{asChild:!0,children:a(m,{appearance:s,icon:a(C,{}),label:i,size:o,type:e,...u})}),c=({className:o,...e})=>a("div",{className:l("scrollbar flex-1 overflow-y-auto p-4 text-body",o),...e});c.displayName="DialogBody";var f=({className:o,...e})=>a("div",{className:l("flex shrink-0 flex-row-reverse gap-2 border-t border-dialog-muted px-4 py-3",o),...e});f.displayName="DialogFooter";var v=r(({className:o,...e},i)=>a(t.Title,{ref:i,className:l("text-lg font-medium leading-none text-strong",o),...e}));v.displayName=t.Title.displayName;var y=r(({className:o,...e},i)=>a(t.Description,{ref:i,className:l("text-muted",o),...e}));y.displayName=t.Description.displayName;export{x as Dialog,c as DialogBody,N as DialogClose,D as DialogCloseIconButton,g as DialogContent,y as DialogDescription,f as DialogFooter,p as DialogHeader,n as DialogOverlay,d as DialogPortal,v as DialogTitle,b as DialogTrigger};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/input.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { InputHTMLAttributes, PropsWithChildren } from 'react';
|
|
3
|
-
import { a as WithAutoComplete, b as WithInputType, W as
|
|
4
|
-
export { A as AutoComplete, I as InputType } from './types-
|
|
3
|
+
import { a as WithAutoComplete, b as WithInputType, W as WithValidation } from './types-DcL7_eQM.js';
|
|
4
|
+
export { A as AutoComplete, I as InputType } from './types-DcL7_eQM.js';
|
|
5
5
|
|
|
6
|
-
type BaseProps = WithAutoComplete & WithInputType &
|
|
6
|
+
type BaseProps = WithAutoComplete & WithInputType & WithValidation;
|
|
7
7
|
/**
|
|
8
8
|
* The props for the `Input` component.
|
|
9
9
|
*/
|
|
@@ -11,16 +11,16 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
|
|
|
11
11
|
/**
|
|
12
12
|
* Used to create interactive controls for web-based forms in order to accept data from the user
|
|
13
13
|
*/
|
|
14
|
-
declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType &
|
|
14
|
+
declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
|
|
15
15
|
children?: react.ReactNode;
|
|
16
16
|
} & react.RefAttributes<HTMLInputElement>>;
|
|
17
17
|
type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
|
|
18
18
|
/**
|
|
19
19
|
* The actual <input /> element that captures user input.
|
|
20
20
|
*/
|
|
21
|
-
declare const InputCapture: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType &
|
|
21
|
+
declare const InputCapture: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & react.RefAttributes<HTMLInputElement>>;
|
|
22
22
|
|
|
23
|
-
type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> &
|
|
23
|
+
type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
24
24
|
/**
|
|
25
25
|
* Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
|
|
26
26
|
* @default false
|
|
@@ -36,7 +36,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
|
|
|
36
36
|
*/
|
|
37
37
|
showValue?: boolean;
|
|
38
38
|
};
|
|
39
|
-
declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> &
|
|
39
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
|
|
40
40
|
/**
|
|
41
41
|
* Mask the true length of the password input with a fixed width when the value is hidden and the input is not focused.
|
|
42
42
|
* @default false
|
|
@@ -58,4 +58,4 @@ declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttri
|
|
|
58
58
|
*/
|
|
59
59
|
declare function isInput(value: unknown): value is HTMLInputElement;
|
|
60
60
|
|
|
61
|
-
export { Input, InputCapture, type InputCaptureProps, type InputProps, PasswordInput, type PasswordInputProps, WithAutoComplete, WithInputType,
|
|
61
|
+
export { Input, InputCapture, type InputCaptureProps, type InputProps, PasswordInput, type PasswordInputProps, WithAutoComplete, WithInputType, WithValidation, isInput };
|
package/dist/input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b,c,d}from"./chunk-
|
|
1
|
+
import{a,b,c,d}from"./chunk-GTKZKU43.js";import"./chunk-NREABJ6Y.js";import"./chunk-A5H52ODC.js";export{a as Input,b as InputCapture,c as PasswordInput,d as isInput};
|
|
2
2
|
//# sourceMappingURL=input.js.map
|
package/dist/radio-group.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{d as y}from"./chunk-
|
|
1
|
+
import{d as y}from"./chunk-GTKZKU43.js";import"./chunk-NREABJ6Y.js";import{a as c}from"./chunk-A5H52ODC.js";import{Radio as u,RadioGroup as H}from"@headlessui/react";import{Slot as N}from"@radix-ui/react-slot";import m from"clsx";import{Children as k,cloneElement as L,createContext as E,forwardRef as n,isValidElement as S,useContext as R,useRef as T}from"react";import{Fragment as b,jsx as a}from"react/jsx-runtime";var f=n((e,o)=>a(H,{...e,ref:o}));f.displayName="RadioGroup";var l=E({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),x=n(({children:e,className:o,...t},r)=>a(u,{className:c("group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit",o),as:"div",...t,ref:r,children:d=>a(l.Provider,{value:d,children:e})}));x.displayName="RadioItem";var z=({checked:e,disabled:o,focus:t,hover:r})=>a("span",{className:c("flex size-4 items-center justify-center rounded-full border border-form",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",t&&!o&&"border-accent-600 ring-4 ring-focus-accent",r&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff]"})}),M=({children:e,className:o,...t})=>{let r=R(l);return a("div",{className:c("radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5",o),...t,children:e==null?a(z,{...r}):typeof e=="function"?e(r):e})},P=n(({className:e,...o},t)=>a(f,{className:m("-space-y-px",e),...o,ref:t}));P.displayName="RadioGroupList";var v=n(({children:e,className:o,...t},r)=>a(u,{as:"div",className:c("group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:r,...t,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));v.displayName="RadioListItem";var C=n(({children:e,className:o,...t},r)=>a(u,{as:"div",className:m("group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600",o),...t,ref:r,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));C.displayName="RadioCard";var w=({asChild:e=!1,children:o,className:t,...r})=>{let d=R(l);return a(e?N:"div",{className:m("min-w-0 flex-1",d.disabled&&"opacity-50",t),...r,children:o})},I=n(({className:e,...o},t)=>a(f,{className:m("flex flex-row flex-nowrap -space-x-px",e),...o,ref:t}));I.displayName="RadioButtonGroup";var g=n(({children:e,className:o,...t},r)=>a(u,{as:"div",className:c("group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit","focus:outline-none aria-enabled:cursor-pointer","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:r,...t,children:d=>a(b,{children:a(l.Provider,{value:d,children:e})})}));g.displayName="RadioButton";var B=({children:e,onClick:o,onKeyDown:t,...r})=>{let d=T(null),s=R(l),p=k.only(e),G=s.disabled||!s.checked;return a("div",{ref:d,"aria-disabled":s.disabled,onKeyDown:i=>{if(s.disabled){i.stopPropagation(),i.preventDefault();return}switch(i.key){case"Enter":case"Tab":break;default:i.stopPropagation()}t?.(i)},onClick:i=>{if(s.disabled){i.stopPropagation(),i.preventDefault();return}let h=i.target;y(h)&&window.requestAnimationFrame(()=>{h.focus()}),o?.(i)},...r,children:S(p)?L(p,{disabled:s.disabled||p.props.disabled,tabIndex:G?-1:p.props.tabIndex}):null})};export{g as RadioButton,I as RadioButtonGroup,C as RadioCard,f as RadioGroup,P as RadioGroupList,M as RadioIndicator,B as RadioInputSandbox,x as RadioItem,w as RadioItemContent,v as RadioListItem};
|
|
2
2
|
//# sourceMappingURL=radio-group.js.map
|
package/dist/radio-group.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useRef } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { isInput } from \"../../input\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}
|
|
1
|
+
{"version":3,"sources":["../packages/radio-group/src/radio-group.tsx"],"sourcesContent":["import { Radio as HeadlessRadio, RadioGroup as HeadlessRadioGroup } from \"@headlessui/react\";\nimport type { RadioGroupProps as HeadlessRadioGroupProps, RadioProps as HeadlessRadioProps } from \"@headlessui/react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useRef } from \"react\";\nimport type { ElementRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport { cx } from \"../../cx\";\nimport { isInput } from \"../../input\";\nimport type { WithAsChild } from \"../../types\";\n\ntype RadioGroupProps = PropsWithChildren<Omit<HeadlessRadioGroupProps, \"as\" | \"children\">>;\n\n/**\n * A group of radio items. It manages the state of the children radios. Unstyled and simple.\n */\nconst RadioGroup = forwardRef<ElementRef<typeof HeadlessRadioGroup>, RadioGroupProps>((props, ref) => (\n\t<HeadlessRadioGroup {...props} ref={ref} />\n));\nRadioGroup.displayName = \"RadioGroup\";\n\n/**\n * The shape of the radio state context.\n */\ntype RadioStateContextValue = {\n\tautofocus: boolean;\n\tchecked: boolean;\n\tdisabled: boolean;\n\tfocus: boolean;\n\thover: boolean;\n};\n\n/**\n * The radio state. It's used to pass the state of the radio to its children components.\n * It's used internally by the radio components to manage the state/style of the radio items.\n * Used in place of css classes to avoid specificity issues and slightly improve performance.\n */\nconst RadioStateContext = createContext<RadioStateContextValue>({\n\tautofocus: false,\n\tchecked: false,\n\tdisabled: false,\n\tfocus: false,\n\thover: false,\n});\n\ntype RadioItemProps = Omit<HeadlessRadioProps, \"children\"> & PropsWithChildren;\n\n/**\n * A simple radio item that can be used inside a radio group. The \"conventional\" use-case.\n * Must be a child of `RadioGroup`.\n */\nconst RadioItem = forwardRef<ElementRef<\"div\">, RadioItemProps>(({ children, className, ...props }, ref) => (\n\t<HeadlessRadio\n\t\tclassName={cx(\n\t\t\t\"group/radio flex cursor-default gap-2 py-1 text-base focus:outline-none aria-enabled:cursor-pointer sm:text-sm [&_label]:cursor-inherit\",\n\t\t\tclassName,\n\t\t)}\n\t\tas=\"div\"\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{(ctx) => <RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>}\n\t</HeadlessRadio>\n));\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\"> & {\n\tchildren?: ReactNode | ((context: RadioStateContextValue) => ReactNode);\n};\n\n/**\n * The default radio indicator.\n * @private\n */\nconst DefaultRadioIndicator = ({ checked, disabled, focus, hover }: RadioStateContextValue) => (\n\t<span\n\t\tclassName={cx(\n\t\t\t\"flex size-4 items-center justify-center rounded-full border border-form\",\n\t\t\tdisabled && \"cursor-default opacity-50\",\n\t\t\tchecked && \"border-accent-500 bg-accent-500\",\n\t\t\tfocus && !disabled && \"border-accent-600 ring-4 ring-focus-accent\",\n\t\t\thover && \"border-accent-600\",\n\t\t)}\n\t>\n\t\t{checked && <span className=\"size-2 rounded-full bg-[#fff]\" />}\n\t</span>\n);\n\n/**\n * The selection indicator for any radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n * By default, it's a circle that changes color when checked.\n * You can customize the indicator by passing children:\n * - a different component\n * - a render-props function that receives the radio state context and should return a component.\n */\nconst RadioIndicator = ({ children, className, ...props }: RadioIndicatorProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx(\"radio-indicator inline-flex size-6 select-none items-center justify-center sm:size-5\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children == null ? (\n\t\t\t\t<DefaultRadioIndicator {...ctx} />\n\t\t\t) : typeof children === \"function\" ? (\n\t\t\t\tchildren(ctx)\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\n/**\n * A group of radio list items. Use RadioListItem as direct children.\n */\nconst RadioGroupList = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"-space-y-px\", className)} {...props} ref={ref} />;\n});\nRadioGroupList.displayName = \"RadioGroupList\";\n\ntype RadioListItemProps = RadioItemProps;\n\n/**\n * A radio list item that is used inside a `RadioGroupList`.\n */\nconst RadioListItem = forwardRef<ElementRef<\"div\">, RadioListItemProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex select-none gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioListItem.displayName = \"RadioListItem\";\n\ntype RadioItemContentProps = HTMLAttributes<HTMLDivElement> & WithAsChild;\n\ntype RadioCardProps = RadioItemProps;\n\n/**\n * A radio card item. Use it as a child of `RadioGroup`\n */\nconst RadioCard = forwardRef<ElementRef<\"div\">, RadioCardProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={clsx(\n\t\t\t\t\"group/radio relative rounded-md border border-card bg-card p-4 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md\",\n\t\t\t\t\"aria-disabled:border-form/50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 aria-enabled:hover:aria-checked:border-accent-600\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioCard.displayName = \"RadioCard\";\n\n/**\n * The content of any radio item. Use it to wrap any labels, descriptions, or content of a radio item.\n * Use it as a child of `RadioItem`, `RadioListItem`, or `RadioCard`.\n */\nconst RadioItemContent = ({ asChild = false, children, className, ...props }: RadioItemContentProps) => {\n\tconst ctx = useContext(RadioStateContext);\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={clsx(\"min-w-0 flex-1\", ctx.disabled && \"opacity-50\", className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\n/**\n * An inline group of radio buttons. Use RadioButton as direct children.\n */\nconst RadioButtonGroup = forwardRef<ElementRef<typeof RadioGroup>, RadioGroupProps>(({ className, ...props }, ref) => {\n\treturn <RadioGroup className={clsx(\"flex flex-row flex-nowrap -space-x-px\", className)} {...props} ref={ref} />;\n});\nRadioButtonGroup.displayName = \"RadioButtonGroup\";\n\ntype RadioButtonProps = RadioItemProps;\n\n/**\n * A radio button that is used inside a `RadioButtonGroup`.\n */\nconst RadioButton = forwardRef<ElementRef<\"div\">, RadioButtonProps>(({ children, className, ...props }, ref) => {\n\treturn (\n\t\t<HeadlessRadio\n\t\t\tas=\"div\"\n\t\t\tclassName={cx(\n\t\t\t\t\"group/radio relative flex flex-1 select-none items-center justify-center gap-2 border border-form px-3 py-2 text-base sm:text-sm [&_label]:cursor-inherit\",\n\t\t\t\t\"focus:outline-none aria-enabled:cursor-pointer\",\n\t\t\t\t\"first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md\",\n\t\t\t\t\"aria-disabled:opacity-50 aria-enabled:hover:z-1 aria-enabled:hover:border-accent-600\",\n\t\t\t\t\"aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-disabled:hover:aria-checked:border-accent-600\",\n\t\t\t\t\"has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(ctx) => (\n\t\t\t\t<>\n\t\t\t\t\t<RadioStateContext.Provider value={ctx}>{children}</RadioStateContext.Provider>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</HeadlessRadio>\n\t);\n});\nRadioButton.displayName = \"RadioButton\";\n\ntype RadioInputSandboxProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * A sandbox container for input elements composed within radio group items.\n * It prevents the default behavior of the radio group when clicking on the input element or accepting keyboard input.\n */\nconst RadioInputSandbox = ({ children, onClick, onKeyDown, ...props }: RadioInputSandboxProps) => {\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst ctx = useContext(RadioStateContext);\n\n\tconst singleChild = Children.only(children);\n\n\t// Prevent the child input from receiving focus when the parent radio group item is disabled or unchecked.\n\tconst shouldPreventTabIndex = ctx.disabled || !ctx.checked;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-disabled={ctx.disabled}\n\t\t\tonKeyDown={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tswitch (event.key) {\n\t\t\t\t\tcase \"Enter\":\n\t\t\t\t\tcase \"Tab\":\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t}\n\t\t\t\tonKeyDown?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tif (ctx.disabled) {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (isInput(target)) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\ttarget.focus();\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{isValidElement<HTMLInputElement>(singleChild)\n\t\t\t\t? cloneElement(singleChild, {\n\t\t\t\t\t\tdisabled: ctx.disabled || singleChild.props.disabled,\n\t\t\t\t\t\ttabIndex: shouldPreventTabIndex ? -1 : singleChild.props.tabIndex,\n\t\t\t\t\t})\n\t\t\t\t: null}\n\t\t</div>\n\t);\n};\n\nexport {\n\t//\n\tRadioButton,\n\tRadioButtonGroup,\n\tRadioCard,\n\tRadioGroup,\n\tRadioGroupList,\n\tRadioIndicator,\n\tRadioInputSandbox,\n\tRadioItem,\n\tRadioItemContent,\n\tRadioListItem,\n};\n"],"mappings":"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","names":["HeadlessRadio","HeadlessRadioGroup","Slot","clsx","Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useRef","Fragment","jsx","RadioGroup","forwardRef","props","ref","HeadlessRadioGroup","RadioStateContext","createContext","RadioItem","children","className","HeadlessRadio","cx","ctx","DefaultRadioIndicator","checked","disabled","focus","hover","RadioIndicator","useContext","RadioGroupList","clsx","RadioListItem","RadioCard","RadioItemContent","asChild","Slot","RadioButtonGroup","RadioButton","RadioInputSandbox","onClick","onKeyDown","useRef","singleChild","Children","shouldPreventTabIndex","event","target","isInput","isValidElement","cloneElement"]}
|
package/dist/select.d.ts
CHANGED
|
@@ -2,13 +2,13 @@ import * as _radix_ui_react_separator from '@radix-ui/react-separator';
|
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { FocusEvent, SelectHTMLAttributes } from 'react';
|
|
4
4
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
5
|
-
import { W as
|
|
5
|
+
import { W as WithValidation } from './types-DcL7_eQM.js';
|
|
6
6
|
|
|
7
7
|
type WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">;
|
|
8
8
|
/**
|
|
9
9
|
* Displays a list of options for the user to pick from—triggered by a button.
|
|
10
10
|
*/
|
|
11
|
-
declare const Select: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectProps, "onValueChange"> &
|
|
11
|
+
declare const Select: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectProps, "onValueChange"> & WithValidation & WithAriaInvalid & {
|
|
12
12
|
/**
|
|
13
13
|
* Event handler called when the value changes.
|
|
14
14
|
*/
|
|
@@ -31,7 +31,7 @@ declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.Selec
|
|
|
31
31
|
/**
|
|
32
32
|
* The button that toggles the select. The Select.Content will position itself adjacent to the trigger.
|
|
33
33
|
*/
|
|
34
|
-
declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid &
|
|
34
|
+
declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & WithAriaInvalid & WithValidation & react.RefAttributes<HTMLButtonElement>>;
|
|
35
35
|
/**
|
|
36
36
|
* The component that pops out when the select is open as a portal adjacent to the trigger button.
|
|
37
37
|
* It contains a scrolling viewport of the select items.
|
package/dist/select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as f}from"./chunk-NREABJ6Y.js";import{b as
|
|
1
|
+
import{a as f}from"./chunk-NREABJ6Y.js";import{b as u}from"./chunk-R3JOSY7M.js";import{a as o}from"./chunk-A5H52ODC.js";import{CaretDown as S}from"@phosphor-icons/react/CaretDown";import{CaretUp as R}from"@phosphor-icons/react/CaretUp";import{Check as N}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as T,forwardRef as l,useContext as B}from"react";import{jsx as i,jsxs as p}from"react/jsx-runtime";var g=T({}),h=l(({"aria-invalid":a,children:r,validation:t,onBlur:n,onChange:c,...s},d)=>i(e.Root,{...s,onValueChange:c,children:i(g.Provider,{value:{"aria-invalid":a,validation:t,onBlur:n,ref:d},children:r})}));h.displayName="Select";var W=e.Group,E=e.Value,P=l(({"aria-invalid":a,className:r,children:t,validation:n,...c},s)=>{let d=B(g),m=d["aria-invalid"]??a,v=m!=null&&m!=="false"?"error":d.validation??n;return p(e.Trigger,{"aria-invalid":m??v==="error","data-validation":v||void 0,className:o("flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left","focus:outline-none focus-visible:ring-4 aria-expanded:ring-4","focus-visible:border-accent-600 focus-visible:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus-visible:border-success-600 data-validation-success:focus-visible: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-visible:border-warning-600 data-validation-warning:focus-visible: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-visible:border-danger-600 data-validation-error:focus-visible:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",r),ref:f(s,d.ref),...c,children:[t,i(e.Icon,{asChild:!0,children:i(S,{className:"size-4 shrink-0",weight:"bold"})})]})});P.displayName="SelectTrigger";var b=l(({className:a,...r},t)=>i(e.ScrollUpButton,{ref:t,className:o("flex cursor-default items-center justify-center py-1",a),...r,children:i(R,{className:"size-4 shrink-0",weight:"bold"})}));b.displayName="SelectScrollUpButton";var y=l(({className:a,...r},t)=>i(e.ScrollDownButton,{ref:t,className:o("flex cursor-default items-center justify-center py-1",a),...r,children:i(S,{className:"size-4 shrink-0",weight:"bold"})}));y.displayName="SelectScrollDownButton";var x=l(({className:a,children:r,position:t="popper",width:n,...c},s)=>i(e.Portal,{children:p(e.Content,{ref:s,className:o("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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","bg-popover",t==="popper"&&"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2",n==="trigger"&&"w-[var(--radix-select-trigger-width)]",a),position:t,...c,children:[i(b,{}),i(e.Viewport,{className:o("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:r}),i(y,{})]})}));x.displayName="SelectContent";var w=l(({className:a,...r},t)=>i(e.Label,{ref:t,className:o("px-2 py-1.5 text-sm font-semibold",a),...r}));w.displayName="SelectLabel";var C=l(({className:a,children:r,...t},n)=>p(e.Item,{ref:n,className:o("relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 data-state-checked:bg-filled-accent data-state-checked:text-on-filled",a),...t,children:[i(e.ItemText,{children:r}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(N,{className:"size-4 shrink-0",weight:"bold"})})]}));C.displayName="SelectItem";var I=l(({className:a,...r},t)=>i(u,{ref:t,className:o("-mx-1 my-1 h-px w-auto",a),...r}));I.displayName="SelectSeparator";export{h as Select,x as SelectContent,W as SelectGroup,C as SelectItem,w as SelectLabel,I as SelectSeparator,P as SelectTrigger,E as SelectValue};
|
|
2
2
|
//# sourceMappingURL=select.js.map
|
package/dist/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/select/src/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { ComponentPropsWithoutRef, ElementRef, FocusEvent, Ref, SelectHTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithInvalid } from \"../../input\";\nimport { Separator } from \"../../separator\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithInvalid &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, \"onValueChange\"> &\n\tWithInvalid &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(\n\t({ \"aria-invalid\": _ariaInvalid, children, invalid, onBlur, onChange, ...props }, ref) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t\t<SelectContext.Provider value={{ \"aria-invalid\": _ariaInvalid, invalid, onBlur, ref }}>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nSelect.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithInvalid;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n */\nconst SelectTrigger = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, children, invalid: _invalid, ...props }, ref) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst invalid = ctx[\"aria-invalid\"] ?? ctx.invalid ?? _ariaInvalid ?? _invalid;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={invalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong focus:border-accent-600 focus:outline-none focus:ring-4 focus:ring-focus-accent focus-visible:border-accent-600 focus-visible:ring-focus-accent active:border-neutral-400 active:bg-neutral-500/10 active:text-strong focus-visible:active:border-accent-600 disabled:pointer-events-none disabled:opacity-50 aria-expanded:border-accent-600 aria-expanded:ring-4 aria-expanded:ring-focus-accent sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\tinvalid &&\n\t\t\t\t\t\t\"border-danger-600 focus:border-danger-600 focus:ring-focus-danger aria-expanded:border-danger-600 aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectScrollUpButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n */\nconst SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width, ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n */\nconst SelectLabel = forwardRef<\n\tElementRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label ref={ref} className={cx(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Contains a `value` prop that will be passed to the `onChange` handler of the `Select` component when selected.\n * Displays the children as the option's text.\n */\nconst SelectItem = forwardRef<\n\tElementRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items in the select.\n */\nconst SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(\n\t({ className, ...props }, ref) => (\n\t\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n\t),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"],"mappings":"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","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","forwardRef","_ariaInvalid","children","invalid","onBlur","onChange","props","ref","SelectGroup","SelectValue","SelectTrigger","className","_invalid","ctx","useContext","cx","composeRefs","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}
|
|
1
|
+
{"version":3,"sources":["../packages/select/src/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type { ComponentPropsWithoutRef, ElementRef, FocusEvent, Ref, SelectHTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../compose-refs\";\nimport { cx } from \"../../cx\";\nimport type { WithValidation } from \"../../input\";\nimport { Separator } from \"../../separator\";\n\ntype WithAriaInvalid = Pick<SelectHTMLAttributes<HTMLSelectElement>, \"aria-invalid\">;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, \"onValueChange\"> &\n\tWithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t};\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(\n\t({ \"aria-invalid\": _ariaInvalid, children, validation, onBlur, onChange, ...props }, ref) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t\t<SelectContext.Provider value={{ \"aria-invalid\": _ariaInvalid, validation, onBlur, ref }}>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nSelect.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & WithAriaInvalid & WithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n */\nconst SelectTrigger = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(\n\t({ \"aria-invalid\": ariaInValidProp, className, children, validation: _validation, ...props }, ref) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid ? \"error\" : ctx.validation ?? _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validation || undefined} // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"flex h-11 w-full items-center justify-between rounded-md border border-form bg-form px-3 py-2 text-strong placeholder:text-placeholder hover:border-neutral-400 hover:bg-form-hover hover:text-strong disabled:pointer-events-none disabled:opacity-50 sm:h-9 sm:text-sm [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"focus:outline-none focus-visible:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible: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-visible:border-success-600 data-validation-success:focus-visible: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-visible:border-warning-600 data-validation-warning:focus-visible: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-visible:border-danger-600 data-validation-error:focus-visible:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectScrollUpButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\nconst SelectScrollDownButton = forwardRef<\n\tElementRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\"flex cursor-default items-center justify-center py-1\", className)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n */\nconst SelectContent = forwardRef<ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(\n\t({ className, children, position = \"popper\", width, ...props }, ref) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-popover shadow-md data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 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\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"max-h-[var(--radix-select-content-available-height)] data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\"p-1\", position === \"popper\" && \"h-[var(--radix-select-trigger-height)] w-full\")}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n */\nconst SelectLabel = forwardRef<\n\tElementRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label ref={ref} className={cx(\"px-2 py-1.5 text-sm font-semibold\", className)} {...props} />\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Contains a `value` prop that will be passed to the `onChange` handler of the `Select` component when selected.\n * Displays the children as the option's text.\n */\nconst SelectItem = forwardRef<\n\tElementRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items in the select.\n */\nconst SelectSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(\n\t({ className, ...props }, ref) => (\n\t\t<Separator ref={ref} className={cx(\"-mx-1 my-1 h-px w-auto\", className)} {...props} />\n\t),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"],"mappings":"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","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","forwardRef","_ariaInvalid","children","validation","onBlur","onChange","props","ref","SelectGroup","SelectValue","SelectTrigger","ariaInValidProp","className","_validation","ctx","useContext","cx","composeRefs","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}
|