@sth87/shadcn-design-system 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Checkbox/Checkbox.cjs +1 -1
- package/dist/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/Select/Select.cjs +1 -1
- package/dist/cjs/components/Select/Select.cjs.map +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/styles/index.css +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +32 -32
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Select/Select.js +20 -19
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +42 -42
- package/dist/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/esm/styles/index.css +1 -1
- package/dist/types/components/Select/Select.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),L=require("../../packages/ui/src/components/checkbox.cjs");require("@radix-ui/react-slot");require("../../packages/ui/src/components/button.cjs");require("../../packages/ui/src/components/button-group.cjs");require("../../packages/ui/src/components/input.cjs");require("../../packages/ui/src/components/textarea.cjs");const f=require("../../packages/ui/src/components/label.cjs");require("../../packages/ui/src/components/select.cjs");require("../../packages/ui/src/components/combobox.cjs");require("@radix-ui/react-tooltip");const a=require("../../packages/ui/src/lib/utils.cjs"),p=require("lucide-react");require("react-day-picker");require("../../packages/ui/src/components/popover.cjs");require("@radix-ui/react-separator");require("../../packages/ui/src/components/switch.cjs");require("vaul");require("@radix-ui/react-scroll-area");require("../../packages/ui/src/components/tree-view.cjs");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-avatar");require("../../packages/ui/src/components/badge.cjs");require("@radix-ui/react-collapsible");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-dropdown-menu");require("../../packages/ui/src/components/input-otp.cjs");require("../../packages/ui/src/components/radio-group.cjs");require("../../packages/ui/src/components/sidebar.cjs");require("@radix-ui/react-slider");require("../../packages/ui/src/components/tabs.cjs");require("../../packages/ui/src/components/toggle.cjs");const b=require("../Tooltip/Tooltip.cjs"),M=require("motion/react"),D=require("../../utils/css.cjs"),g=o.forwardRef((j,C)=>{const{label:r,infoTooltip:t,helperText:i,state:d,variant:v="default",size:N="default",color:w,labelPosition:s="right",labelAlignment:c="center",icon:T,animation:k,id:y,onCheckedChange:u,...I}=j,[S,x]=o.useState(!1),P=o.useId(),n=y||P,R={default:"ds:text-muted-foreground",success:"ds:text-success",warning:"ds:text-warning",error:"ds:text-error"},z=l=>{l&&(x(!0),setTimeout(()=>x(!1),800)),u?.(l)},q=s==="top"||s==="bottom",A=q?"ds:flex-col":"ds:flex-row",_=q?"ds:gap-1.5":"ds:gap-2",F=c==="start"?"ds:items-start":c==="center"?"ds:items-center":"ds:items-end",m="ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70";return e.jsxs("div",{className:a.cn("ds:flex ds:flex-col ds:gap-1.5 ds:relative",{}),children:[e.jsxs("div",{className:a.cn("ds:flex",A,_,F),children:[(s==="top"||s==="left")&&r&&e.jsxs(f.Label,{htmlFor:n,className:m,children:[r,t&&e.jsx(b.Tooltip,{content:t,children:e.jsx(p.Info,{className:"ds:size-3.5 ds:min-w-3.5"})})]}),e.jsxs("div",{className:"ds:relative ds:inline-flex",children:[e.jsx(L.Checkbox,{ref:C,id:n,...I,variant:v,size:N,color:w,icon:T,onCheckedChange:k?z:u}),e.jsx(M.AnimatePresence,{children:S&&e.jsx("div",{className:"ds:pointer-events-none ds:absolute ds:inset-0",children:[...Array(12)].map((l,h)=>e.jsx(D.ConfettiPiece,{index:h},h))})})]}),(s==="bottom"||s==="right")&&r&&e.jsxs(f.Label,{htmlFor:n,className:m,children:[r,t&&e.jsx(b.Tooltip,{content:t,children:e.jsx(p.Info,{className:"ds:size-3.5 ds:min-w-3.5"})})]})]}),i&&e.jsx("div",{className:"ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2",children:i&&e.jsx("p",{className:a.cn("ds:text-xs",d?R?.[d]:""),children:i})})]})});g.displayName="Checkbox";exports.default=g;
|
|
2
2
|
//# sourceMappingURL=Checkbox.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n React.ComponentPropsWithoutRef<typeof SCheckbox>,\n \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n onCheckedChange?: (checked: CheckedState) => void;\n variant?: \"default\" | \"circle\";\n size?: \"sm\" | \"default\" | \"lg\";\n color?:\n | \"primary\"\n | \"secondary\"\n | \"accent\"\n | \"destructive\"\n | \"muted\"\n | \"success\"\n | \"error\"\n | \"warning\";\n icon?: React.ReactNode;\n label?: React.ReactNode;\n labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n labelAlignment?: \"start\" | \"center\" | \"end\";\n infoTooltip?: React.ReactNode;\n helperText?: React.ReactNode;\n state?: \"default\" | \"error\" | \"success\" | \"warning\";\n animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props, ref) => {\n const {\n label,\n infoTooltip,\n helperText,\n state,\n variant = \"default\",\n size = \"default\",\n color,\n labelPosition = \"right\",\n labelAlignment = \"center\",\n icon,\n animation,\n id,\n onCheckedChange,\n ...rest\n } = props;\n const [showConfetti, setShowConfetti] = useState(false);\n const generatedId = React.useId();\n const inputId = id || generatedId;\n\n // State\n const helperTextStyles = {\n default: \"ds:text-muted-foreground\",\n success: \"ds:text-success\",\n warning: \"ds:text-warning\",\n error: \"ds:text-error\",\n };\n\n const handleCheckedChange = (checked: CheckedState) => {\n if (checked) {\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 800);\n }\n onCheckedChange?.(checked);\n };\n\n const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n const gapClass = isVertical ? \"ds:gap-1.5\" : \"ds:gap-2\";\n\n const alignmentClass =\n labelAlignment === \"start\"\n ? \"ds:items-start\"\n : labelAlignment === \"center\"\n ? \"ds:items-center\"\n : \"ds:items-end\";\n\n const labelClass =\n \"ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\";\n\n return (\n <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n <
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n React.ComponentPropsWithoutRef<typeof SCheckbox>,\n \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n onCheckedChange?: (checked: CheckedState) => void;\n variant?: \"default\" | \"circle\";\n size?: \"sm\" | \"default\" | \"lg\";\n color?:\n | \"primary\"\n | \"secondary\"\n | \"accent\"\n | \"destructive\"\n | \"muted\"\n | \"success\"\n | \"error\"\n | \"warning\";\n icon?: React.ReactNode;\n label?: React.ReactNode;\n labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n labelAlignment?: \"start\" | \"center\" | \"end\";\n infoTooltip?: React.ReactNode;\n helperText?: React.ReactNode;\n state?: \"default\" | \"error\" | \"success\" | \"warning\";\n animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props, ref) => {\n const {\n label,\n infoTooltip,\n helperText,\n state,\n variant = \"default\",\n size = \"default\",\n color,\n labelPosition = \"right\",\n labelAlignment = \"center\",\n icon,\n animation,\n id,\n onCheckedChange,\n ...rest\n } = props;\n const [showConfetti, setShowConfetti] = useState(false);\n const generatedId = React.useId();\n const inputId = id || generatedId;\n\n // State\n const helperTextStyles = {\n default: \"ds:text-muted-foreground\",\n success: \"ds:text-success\",\n warning: \"ds:text-warning\",\n error: \"ds:text-error\",\n };\n\n const handleCheckedChange = (checked: CheckedState) => {\n if (checked) {\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 800);\n }\n onCheckedChange?.(checked);\n };\n\n const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n const gapClass = isVertical ? \"ds:gap-1.5\" : \"ds:gap-2\";\n\n const alignmentClass =\n labelAlignment === \"start\"\n ? \"ds:items-start\"\n : labelAlignment === \"center\"\n ? \"ds:items-center\"\n : \"ds:items-end\";\n\n const labelClass =\n \"ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\";\n\n return (\n <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n <Label htmlFor={inputId} className={labelClass}>\n {label}\n {infoTooltip && (\n <Tooltip content={infoTooltip}>\n <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n </Tooltip>\n )}\n </Label>\n )}\n\n <div className=\"ds:relative ds:inline-flex\">\n <SCheckbox\n ref={ref}\n id={inputId}\n {...rest}\n variant={variant}\n size={size}\n color={color}\n icon={icon}\n onCheckedChange={\n animation ? handleCheckedChange : onCheckedChange\n }\n />\n\n <AnimatePresence>\n {showConfetti && (\n <div className=\"ds:pointer-events-none ds:absolute ds:inset-0\">\n {[...Array(12)].map((_, i) => (\n <ConfettiPiece key={i} index={i} />\n ))}\n </div>\n )}\n </AnimatePresence>\n </div>\n\n {(labelPosition === \"bottom\" || labelPosition === \"right\") &&\n label && (\n <Label htmlFor={inputId} className={labelClass}>\n {label}\n {infoTooltip && (\n <Tooltip content={infoTooltip}>\n <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n </Tooltip>\n )}\n </Label>\n )}\n </div>\n\n {helperText && (\n <div className=\"ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2\">\n {helperText && (\n <p\n className={cn(\n \"ds:text-xs\",\n state ? helperTextStyles?.[state] : \"\"\n )}\n >\n {helperText}\n </p>\n )}\n </div>\n )}\n </div>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","infoTooltip","helperText","state","variant","size","color","labelPosition","labelAlignment","icon","animation","id","onCheckedChange","rest","showConfetti","setShowConfetti","useState","generatedId","inputId","helperTextStyles","handleCheckedChange","checked","isVertical","flexDirection","gapClass","alignmentClass","labelClass","cn","jsxs","Label","Tooltip","jsx","Info","SCheckbox","AnimatePresence","_","i","ConfettiPiece"],"mappings":"wsDAoCMA,EAAWC,EAAM,WACrB,CAACC,EAAOC,IAAQ,CACd,KAAM,CAAA,MACJC,EACA,YAAAC,EACA,WAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,UACP,MAAAC,EACA,cAAAC,EAAgB,QAChB,eAAAC,EAAiB,SACjB,KAAAC,EACA,UAAAC,EACA,GAAAC,EACA,gBAAAC,EACA,GAAGC,CAAA,EACDf,EACE,CAACgB,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAcpB,EAAM,MAAA,EACpBqB,EAAUP,GAAMM,EAGhBE,EAAmB,CACvB,QAAS,2BACT,QAAS,kBACT,QAAS,kBACT,MAAO,eAAA,EAGHC,EAAuBC,GAA0B,CACjDA,IACFN,EAAgB,EAAI,EACpB,WAAW,IAAMA,EAAgB,EAAK,EAAG,GAAG,GAE9CH,IAAkBS,CAAO,CAC3B,EAEMC,EAAaf,IAAkB,OAASA,IAAkB,SAC1DgB,EAAgBD,EAAa,cAAgB,cAC7CE,EAAWF,EAAa,aAAe,WAEvCG,EACJjB,IAAmB,QACf,iBACAA,IAAmB,SACjB,kBACA,eAEFkB,EACJ,mFAEF,cACG,MAAA,CAAI,UAAWC,EAAAA,GAAG,6CAA8C,CAAA,CAAE,EACjE,SAAA,CAAAC,OAAC,OAAI,UAAWD,EAAAA,GAAG,UAAWJ,EAAeC,EAAUC,CAAc,EACjE,SAAA,EAAAlB,IAAkB,OAASA,IAAkB,SAAWP,UACvD6B,EAAAA,MAAA,CAAM,QAASX,EAAS,UAAWQ,EACjC,SAAA,CAAA1B,EACAC,SACE6B,UAAA,CAAQ,QAAS7B,EAChB,SAAA8B,EAAAA,IAACC,EAAAA,KAAA,CAAK,UAAU,0BAAA,CAA2B,CAAA,CAC7C,CAAA,EAEJ,EAGFJ,EAAAA,KAAC,MAAA,CAAI,UAAU,6BACb,SAAA,CAAAG,EAAAA,IAACE,EAAAA,SAAA,CACC,IAAAlC,EACA,GAAImB,EACH,GAAGL,EACJ,QAAAT,EACA,KAAAC,EACA,MAAAC,EACA,KAAAG,EACA,gBACEC,EAAYU,EAAsBR,CAAA,CAAA,EAItCmB,EAAAA,IAACG,EAAAA,gBAAA,CACE,SAAApB,GACCiB,EAAAA,IAAC,MAAA,CAAI,UAAU,gDACZ,SAAA,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,IAAI,CAACI,EAAGC,IACtBL,EAAAA,IAACM,EAAAA,cAAA,CAAsB,MAAOD,CAAA,EAAVA,CAAa,CAClC,CAAA,CACH,CAAA,CAEJ,CAAA,EACF,GAEE7B,IAAkB,UAAYA,IAAkB,UAChDP,UACG6B,EAAAA,MAAA,CAAM,QAASX,EAAS,UAAWQ,EACjC,SAAA,CAAA1B,EACAC,SACE6B,UAAA,CAAQ,QAAS7B,EAChB,SAAA8B,EAAAA,IAACC,EAAAA,KAAA,CAAK,UAAU,0BAAA,CAA2B,CAAA,CAC7C,CAAA,CAAA,CAEJ,CAAA,EAEN,EAEC9B,GACC6B,EAAAA,IAAC,MAAA,CAAI,UAAU,iEACZ,SAAA7B,GACC6B,EAAAA,IAAC,IAAA,CACC,UAAWJ,EAAAA,GACT,aACAxB,EAAQgB,IAAmBhB,CAAK,EAAI,EAAA,EAGrC,SAAAD,CAAA,CAAA,CACH,CAEJ,CAAA,EAEJ,CAEJ,CACF,EAEAN,EAAS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),a=require("../../packages/ui/src/components/select.cjs"),Q=require("../../packages/ui/src/components/combobox.cjs"),x=require("../../packages/ui/src/lib/utils.cjs"),V=require("../FloatLabel.cjs"),U=require("lucide-react"),W=require("../Tooltip/Tooltip.cjs"),_=n.forwardRef(({className:
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("react"),a=require("../../packages/ui/src/components/select.cjs"),Q=require("../../packages/ui/src/components/combobox.cjs"),x=require("../../packages/ui/src/lib/utils.cjs"),V=require("../FloatLabel.cjs"),U=require("lucide-react"),W=require("../Tooltip/Tooltip.cjs"),X=require("../../packages/ui/src/components/label.cjs"),_=n.forwardRef(({className:M,label:o,helperText:v,state:m="default",size:t="normal",isFloatLabel:d,infoTooltip:j,clearable:y=!1,placeholder:N="",options:g=[],tagRender:i,multiple:p=!1,value:c,defaultValue:F,onValueChange:w,values:G,defaultValues:S,onValuesChange:q,search:h,clickToRemove:H=!0,overflowBehavior:P="wrap-when-open",disabled:I,onChange:f,onFocus:C,onBlur:k,required:b},R)=>{const u=n.useId(),[T,E]=n.useState(c??F??"");n.useEffect(()=>{!p&&c!==void 0&&E(c)},[p,c]);const A=n.useCallback(l=>{const r=l||"";c===void 0&&E(r),w?.(r),f?.(r)},[w,f,c]),D=n.useCallback(l=>{q?.(l),f?.(l)},[q,f]),J={default:"ds:text-muted-foreground",success:"ds:text-success",warning:"ds:text-warning",error:"ds:text-error"},O=d?t==="xl"||t==="lg"?t:"xl":t,K=n.useMemo(()=>{const l=new Map;return g.forEach(r=>{const s=r.group;l.has(s)||l.set(s,[]),l.get(s).push(r)}),l},[g]);return e.jsx("div",{className:M,children:e.jsxs("div",{ref:R,className:x.cn("ds:flex ds:flex-col ds:gap-1.5 ds:relative",{"ds:floating-label ds:relative":d}),children:[!d&&o&&e.jsxs(X.Label,{htmlFor:u,className:"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70",children:[e.jsxs("span",{children:[o,b&&e.jsx("span",{className:"ds:text-error ds:ml-0.5",children:"*"})]}),j&&e.jsx(W.Tooltip,{content:j,children:e.jsx(U.Info,{className:"ds:size-3.5 ds:min-w-3.5"})})]}),e.jsx("div",{className:"ds:relative",children:p?e.jsxs(a.MultiSelect,{values:G,defaultValues:typeof S=="string"?[S]:S,onValuesChange:D,children:[e.jsx(a.MultiSelectTrigger,{id:u,disabled:I,className:x.cn("ds:peer ds:w-full",{"ds:pt-5 ds:pb-1":d&&t!=="lg"},M),size:O,state:m,onFocus:C,onBlur:k,children:e.jsx(a.MultiSelectValue,{placeholder:N,clickToRemove:H&&y,overflowBehavior:P})}),d&&e.jsx(V.FloatingLabel,{htmlFor:u,size:t,infoTooltip:j,required:b,children:o}),e.jsx(a.MultiSelectContent,{search:h,children:[...K.entries()].map(([l,r])=>l?e.jsxs(n.Fragment,{children:[e.jsx(a.MultiSelectGroup,{heading:l,children:r.map(s=>e.jsx(a.MultiSelectItem,{value:s.value,disabled:s?.disabled,icon:s?.icon,tagRender:!!i,children:i?i(s):s.label},s.value))}),e.jsx(a.MultiSelectSeparator,{})]},l):r.map(s=>e.jsx(a.MultiSelectItem,{value:s.value,disabled:s?.disabled,icon:s?.icon,tagRender:!!i,children:i?i(s):s.label},s.value)))})]}):e.jsxs(e.Fragment,{children:[e.jsx(Q.Combobox,{value:c??T,options:g,placeHolder:N,emptyText:typeof h=="object"?h.emptyMessage:"No results found",onChange:A,clearable:y,disabled:I,id:u,className:x.cn("ds:peer ds:w-full ds:justify-start",{"ds:pt-5 ds:pb-1":d&&t!=="lg"}),size:O,state:m,dropdownClassName:x.cn("ds:opacity-40",{"ds:translate-y-[-8px]":d&&t!=="lg"}),searchable:!!h,tagRender:i,onFocus:C,onBlur:k}),d&&e.jsx(V.FloatingLabel,{htmlFor:u,size:t,infoTooltip:j,required:b,shouldFloat:!!(c??T),className:"ds:pointer-events-none",children:o})]})}),v&&e.jsx("p",{className:x.cn("ds:text-xs",m?J[m]:""),children:v})]})})});_.displayName="Select";exports.default=_;
|
|
2
2
|
//# sourceMappingURL=Select.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n MultiSelect as BaseMultiSelect,\n MultiSelectTrigger as BaseMultiSelectTrigger,\n MultiSelectValue as BaseMultiSelectValue,\n MultiSelectContent as BaseMultiSelectContent,\n MultiSelectItem as BaseMultiSelectItem,\n MultiSelectGroup as BaseMultiSelectGroup,\n MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n Combobox,\n type ComboboxProps,\n type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n label?: string;\n helperText?: React.ReactNode;\n state?: \"default\" | \"success\" | \"warning\" | \"error\";\n size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n isFloatLabel?: boolean;\n infoTooltip?: React.ReactNode;\n clearable?: boolean;\n placeholder?: string;\n options?: SelectOption[];\n tagRender?: (option: SelectOption) => React.ReactNode;\n multiple?: boolean;\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n values?: string[];\n defaultValues?: string | string[];\n onValuesChange?: (values: string[]) => void;\n search?: boolean | { placeholder?: string; emptyMessage?: string };\n clickToRemove?: boolean;\n overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n className?: string;\n disabled?: boolean;\n onChange?: (value: string | string[]) => void;\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n className,\n label,\n helperText,\n state = \"default\",\n size = \"normal\",\n isFloatLabel,\n infoTooltip,\n clearable = false,\n placeholder = \"\",\n options = [],\n tagRender,\n multiple = false,\n value,\n defaultValue,\n onValueChange,\n values,\n defaultValues,\n onValuesChange,\n search,\n clickToRemove = true,\n overflowBehavior = \"wrap-when-open\",\n disabled,\n onChange,\n onFocus,\n onBlur,\n required,\n },\n ref\n ) => {\n const selectId = React.useId();\n\n // For single select, use controlled value or internal state\n const [internalValue, setInternalValue] = React.useState(\n value ?? defaultValue ?? \"\"\n );\n\n React.useEffect(() => {\n if (!multiple && value !== undefined) {\n setInternalValue(value);\n }\n }, [multiple, value]);\n\n // Handle single select value change\n const handleSingleValueChange = React.useCallback(\n (newValue?: string | null) => {\n const val = newValue || \"\";\n if (value === undefined) {\n setInternalValue(val);\n }\n onValueChange?.(val);\n onChange?.(val);\n },\n [onValueChange, onChange, value]\n );\n\n // Handle multi select values change\n const handleMultiValuesChange = React.useCallback(\n (newValues: string[]) => {\n onValuesChange?.(newValues);\n onChange?.(newValues);\n },\n [onValuesChange, onChange]\n );\n\n // Helper text styles\n const helperTextStyles = {\n default: \"ds:text-muted-foreground\",\n success: \"ds:text-success\",\n warning: \"ds:text-warning\",\n error: \"ds:text-error\",\n };\n\n // Calculate current size\n const currentSize = isFloatLabel\n ? size === \"xl\" || size === \"lg\"\n ? size\n : \"xl\"\n : size;\n\n // Group options by group property\n const groupedOptions = React.useMemo(() => {\n const groups = new Map<string | undefined, SelectOption[]>();\n options.forEach((option) => {\n const group = option.group;\n if (!groups.has(group)) {\n groups.set(group, []);\n }\n groups.get(group)!.push(option);\n });\n return groups;\n }, [options]);\n\n return (\n <div className={className}>\n <div\n ref={ref}\n className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {\n \"ds:floating-label ds:relative\": isFloatLabel,\n })}\n >\n {!isFloatLabel && label && (\n <label\n htmlFor={selectId}\n className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n >\n <span>\n {label}\n {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n </span>\n {infoTooltip && (\n <Tooltip content={infoTooltip}>\n <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n </Tooltip>\n )}\n </label>\n )}\n\n <div className=\"ds:relative\">\n {!multiple ? (\n // Single Mode\n <>\n <Combobox\n value={value ?? internalValue}\n options={options}\n placeHolder={placeholder}\n emptyText={\n typeof search === \"object\"\n ? search.emptyMessage\n : \"No results found\"\n }\n onChange={handleSingleValueChange}\n clearable={clearable}\n disabled={disabled}\n id={selectId}\n className={cn(\n \"ds:peer ds:w-full ds:justify-start\",\n {\n \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n }\n // className,\n )}\n size={currentSize}\n state={state}\n dropdownClassName={cn(\"ds:opacity-40\", {\n \"ds:translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n })}\n searchable={!!search}\n tagRender={tagRender}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n {isFloatLabel && (\n <FloatingLabel\n htmlFor={selectId}\n size={size}\n infoTooltip={infoTooltip}\n required={required}\n shouldFloat={!!(value ?? internalValue)}\n className=\"ds:pointer-events-none\"\n >\n {label}\n </FloatingLabel>\n )}\n </>\n ) : (\n // Multi Mode\n <BaseMultiSelect\n values={values}\n defaultValues={\n typeof defaultValues === \"string\"\n ? [defaultValues]\n : defaultValues\n }\n onValuesChange={handleMultiValuesChange}\n >\n <BaseMultiSelectTrigger\n id={selectId}\n disabled={disabled}\n className={cn(\n \"ds:peer ds:w-full\",\n {\n \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n },\n className\n )}\n size={currentSize}\n state={state}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <BaseMultiSelectValue\n placeholder={placeholder}\n clickToRemove={clickToRemove && clearable}\n overflowBehavior={overflowBehavior}\n />\n </BaseMultiSelectTrigger>\n\n {isFloatLabel && (\n <FloatingLabel\n htmlFor={selectId}\n size={size}\n infoTooltip={infoTooltip}\n required={required}\n >\n {label}\n </FloatingLabel>\n )}\n\n <BaseMultiSelectContent search={search}>\n {[...groupedOptions.entries()].map(([group, items]) => {\n if (group) {\n return (\n <React.Fragment key={group}>\n <BaseMultiSelectGroup heading={group}>\n {items.map((option) => (\n <BaseMultiSelectItem\n key={option.value}\n value={option.value}\n disabled={option?.disabled}\n icon={option?.icon}\n tagRender={!!tagRender}\n >\n {tagRender ? tagRender(option) : option.label}\n </BaseMultiSelectItem>\n ))}\n </BaseMultiSelectGroup>\n <BaseMultiSelectSeparator />\n </React.Fragment>\n );\n }\n return items.map((option) => (\n <BaseMultiSelectItem\n key={option.value}\n value={option.value}\n disabled={option?.disabled}\n icon={option?.icon}\n tagRender={!!tagRender}\n >\n {tagRender ? tagRender(option) : option.label}\n </BaseMultiSelectItem>\n ));\n })}\n </BaseMultiSelectContent>\n </BaseMultiSelect>\n )}\n </div>\n\n {helperText && (\n <p className={cn(\"ds:text-xs\", state ? helperTextStyles[state] : \"\")}>\n {helperText}\n </p>\n )}\n </div>\n </div>\n );\n }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n MultiSelect as BaseMultiSelect,\n MultiSelectTrigger as BaseMultiSelectTrigger,\n MultiSelectValue as BaseMultiSelectValue,\n MultiSelectContent as BaseMultiSelectContent,\n MultiSelectItem as BaseMultiSelectItem,\n MultiSelectGroup as BaseMultiSelectGroup,\n MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n Combobox,\n type ComboboxProps,\n type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n label?: string;\n helperText?: React.ReactNode;\n state?: \"default\" | \"success\" | \"warning\" | \"error\";\n size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n isFloatLabel?: boolean;\n infoTooltip?: React.ReactNode;\n clearable?: boolean;\n placeholder?: string;\n options?: SelectOption[];\n tagRender?: (option: SelectOption) => React.ReactNode;\n multiple?: boolean;\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n values?: string[];\n defaultValues?: string | string[];\n onValuesChange?: (values: string[]) => void;\n search?: boolean | { placeholder?: string; emptyMessage?: string };\n clickToRemove?: boolean;\n overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n className?: string;\n disabled?: boolean;\n onChange?: (value: string | string[]) => void;\n onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n className,\n label,\n helperText,\n state = \"default\",\n size = \"normal\",\n isFloatLabel,\n infoTooltip,\n clearable = false,\n placeholder = \"\",\n options = [],\n tagRender,\n multiple = false,\n value,\n defaultValue,\n onValueChange,\n values,\n defaultValues,\n onValuesChange,\n search,\n clickToRemove = true,\n overflowBehavior = \"wrap-when-open\",\n disabled,\n onChange,\n onFocus,\n onBlur,\n required,\n },\n ref\n ) => {\n const selectId = React.useId();\n\n // For single select, use controlled value or internal state\n const [internalValue, setInternalValue] = React.useState(\n value ?? defaultValue ?? \"\"\n );\n\n React.useEffect(() => {\n if (!multiple && value !== undefined) {\n setInternalValue(value);\n }\n }, [multiple, value]);\n\n // Handle single select value change\n const handleSingleValueChange = React.useCallback(\n (newValue?: string | null) => {\n const val = newValue || \"\";\n if (value === undefined) {\n setInternalValue(val);\n }\n onValueChange?.(val);\n onChange?.(val);\n },\n [onValueChange, onChange, value]\n );\n\n // Handle multi select values change\n const handleMultiValuesChange = React.useCallback(\n (newValues: string[]) => {\n onValuesChange?.(newValues);\n onChange?.(newValues);\n },\n [onValuesChange, onChange]\n );\n\n // Helper text styles\n const helperTextStyles = {\n default: \"ds:text-muted-foreground\",\n success: \"ds:text-success\",\n warning: \"ds:text-warning\",\n error: \"ds:text-error\",\n };\n\n // Calculate current size\n const currentSize = isFloatLabel\n ? size === \"xl\" || size === \"lg\"\n ? size\n : \"xl\"\n : size;\n\n // Group options by group property\n const groupedOptions = React.useMemo(() => {\n const groups = new Map<string | undefined, SelectOption[]>();\n options.forEach((option) => {\n const group = option.group;\n if (!groups.has(group)) {\n groups.set(group, []);\n }\n groups.get(group)!.push(option);\n });\n return groups;\n }, [options]);\n\n return (\n <div className={className}>\n <div\n ref={ref}\n className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {\n \"ds:floating-label ds:relative\": isFloatLabel,\n })}\n >\n {!isFloatLabel && label && (\n <Label\n htmlFor={selectId}\n className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n >\n <span>\n {label}\n {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n </span>\n {infoTooltip && (\n <Tooltip content={infoTooltip}>\n <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n </Tooltip>\n )}\n </Label>\n )}\n\n <div className=\"ds:relative\">\n {!multiple ? (\n // Single Mode\n <>\n <Combobox\n value={value ?? internalValue}\n options={options}\n placeHolder={placeholder}\n emptyText={\n typeof search === \"object\"\n ? search.emptyMessage\n : \"No results found\"\n }\n onChange={handleSingleValueChange}\n clearable={clearable}\n disabled={disabled}\n id={selectId}\n className={cn(\n \"ds:peer ds:w-full ds:justify-start\",\n {\n \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n }\n // className,\n )}\n size={currentSize}\n state={state}\n dropdownClassName={cn(\"ds:opacity-40\", {\n \"ds:translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n })}\n searchable={!!search}\n tagRender={tagRender}\n onFocus={onFocus}\n onBlur={onBlur}\n />\n {isFloatLabel && (\n <FloatingLabel\n htmlFor={selectId}\n size={size}\n infoTooltip={infoTooltip}\n required={required}\n shouldFloat={!!(value ?? internalValue)}\n className=\"ds:pointer-events-none\"\n >\n {label}\n </FloatingLabel>\n )}\n </>\n ) : (\n // Multi Mode\n <BaseMultiSelect\n values={values}\n defaultValues={\n typeof defaultValues === \"string\"\n ? [defaultValues]\n : defaultValues\n }\n onValuesChange={handleMultiValuesChange}\n >\n <BaseMultiSelectTrigger\n id={selectId}\n disabled={disabled}\n className={cn(\n \"ds:peer ds:w-full\",\n {\n \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n },\n className\n )}\n size={currentSize}\n state={state}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <BaseMultiSelectValue\n placeholder={placeholder}\n clickToRemove={clickToRemove && clearable}\n overflowBehavior={overflowBehavior}\n />\n </BaseMultiSelectTrigger>\n\n {isFloatLabel && (\n <FloatingLabel\n htmlFor={selectId}\n size={size}\n infoTooltip={infoTooltip}\n required={required}\n >\n {label}\n </FloatingLabel>\n )}\n\n <BaseMultiSelectContent search={search}>\n {[...groupedOptions.entries()].map(([group, items]) => {\n if (group) {\n return (\n <React.Fragment key={group}>\n <BaseMultiSelectGroup heading={group}>\n {items.map((option) => (\n <BaseMultiSelectItem\n key={option.value}\n value={option.value}\n disabled={option?.disabled}\n icon={option?.icon}\n tagRender={!!tagRender}\n >\n {tagRender ? tagRender(option) : option.label}\n </BaseMultiSelectItem>\n ))}\n </BaseMultiSelectGroup>\n <BaseMultiSelectSeparator />\n </React.Fragment>\n );\n }\n return items.map((option) => (\n <BaseMultiSelectItem\n key={option.value}\n value={option.value}\n disabled={option?.disabled}\n icon={option?.icon}\n tagRender={!!tagRender}\n >\n {tagRender ? tagRender(option) : option.label}\n </BaseMultiSelectItem>\n ));\n })}\n </BaseMultiSelectContent>\n </BaseMultiSelect>\n )}\n </div>\n\n {helperText && (\n <p className={cn(\"ds:text-xs\", state ? helperTextStyles[state] : \"\")}>\n {helperText}\n </p>\n )}\n </div>\n </div>\n );\n }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Label","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),d=require("../../packages/ui/src/components/tooltip.cjs");require("@radix-ui/react-slot");require("../../packages/ui/src/components/button.cjs");require("../../packages/ui/src/components/button-group.cjs");require("../../packages/ui/src/components/input.cjs");require("../../packages/ui/src/components/textarea.cjs");require("@radix-ui/react-label");const a=require("../../packages/ui/src/lib/utils.cjs");require("../../packages/ui/src/components/select.cjs");require("../../packages/ui/src/components/combobox.cjs");require("lucide-react");require("react-day-picker");require("../../packages/ui/src/components/popover.cjs");require("@radix-ui/react-separator");require("../../packages/ui/src/components/switch.cjs");require("vaul");require("@radix-ui/react-scroll-area");require("../../packages/ui/src/components/tree-view.cjs");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-avatar");require("../../packages/ui/src/components/badge.cjs");require("../../packages/ui/src/components/checkbox.cjs");require("@radix-ui/react-collapsible");require("cmdk");require("@radix-ui/react-dialog");require("@radix-ui/react-dropdown-menu");require("../../packages/ui/src/components/input-otp.cjs");require("../../packages/ui/src/components/radio-group.cjs");require("../../packages/ui/src/components/sidebar.cjs");require("@radix-ui/react-slider");require("../../packages/ui/src/components/tabs.cjs");require("../../packages/ui/src/components/toggle.cjs");const r=require("motion/react"),C=require("../../utils/animations.cjs");function O(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(i,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return i.default=t,Object.freeze(i)}const b=O(u),S=b.memo(function({content:i,children:s,sideOffset:n=4,delayDuration:q=0,className:l,childClassName:v,position:x="top",noArrow:h=!1,animation:c,...g}){const f={stiffness:100,damping:5},y=u.useMemo(()=>C.animationClass(c,l),[c,l]),p=u.useMemo(()=>{switch(g.color){case"primary":return"ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary";case"secondary":return"ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary";case"dark":return"";case"light":return"ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200";case"inverted":return"ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white";case"success":return"ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success";case"warning":return"ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning";case"error":return"ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error";case"glass":return"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15";default:return"ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance"}},[g?.color]),o=r.useMotionValue(0),w=r.useSpring(r.useTransform(o,[-100,100],[-45,45]),f),j=r.useSpring(r.useTransform(o,[-100,100],[-50,50]),f),k=u.useCallback(m=>{const M=m.target.offsetWidth/2;o.set(m.nativeEvent.offsetX-M)},[o]),T=b.memo(()=>s?e.jsx("span",{onMouseMove:k,className:a.cn("ds:inline-block",v),children:s}):e.jsx(e.Fragment,{}));return c==="spec"?e.jsxs(r.motion.div,{className:a.cn("ds:relative ds:-me-2.5 ds:inline-block",l),whileHover:"hover",initial:"initial",children:[e.jsx(r.motion.div,{variants:{initial:{opacity:0,y:20,scale:0},hover:{opacity:1,y:-5,scale:1,transition:{type:"tween",duration:.2,ease:"easeOut"}}},style:{translateX:j,rotate:w,whiteSpace:"nowrap"},className:a.cn("ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl",p),children:e.jsx("div",{className:"ds:relative ds:z-1",children:i})}),e.jsx(T,{})]}):e.jsx(d.TooltipProvider,{delayDuration:q,children:e.jsxs(d.Tooltip,{children:[e.jsx(d.TooltipTrigger,{asChild:!0,children:s}),e.jsx(d.TooltipContent,{...g,side:x,sideOffset:n,className:a.cn(y?.className,p,{"ds:[&>span>svg]:invisible":h}),children:i})]})})});exports.Tooltip=S;
|
|
2
2
|
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n Tooltip as DsTooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider,\n type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n content: React.ReactNode;\n children: React.ReactNode;\n sideOffset?: number;\n delayDuration?: number;\n position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n className?: string;\n childClassName?: string;\n noArrow?: boolean;\n animation?: BasicAnimation;\n color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n content,\n children,\n sideOffset = 4,\n delayDuration = 0,\n className,\n childClassName,\n position = \"top\",\n noArrow = false,\n animation,\n ...props\n}: TooltipProps) {\n const springConfig = { stiffness: 100, damping: 5 };\n\n const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n return animationClass(animation, className);\n }, [animation, className]);\n\n const tooltipColor = useMemo<string>(() => {\n switch (props.color) {\n case \"primary\":\n return \"bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary\";\n case \"secondary\":\n return \"bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary\";\n case \"dark\":\n return \"\";\n case \"light\":\n return \"bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200\";\n case \"inverted\":\n return \"dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white\";\n case \"success\":\n return \"bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success\";\n case \"warning\":\n return \"bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning\";\n case \"error\":\n return \"bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error\";\n case \"glass\":\n return \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15\";\n default:\n return \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\";\n }\n }, [props?.color]);\n\n // on mouse move\n const x = useMotionValue(0);\n // rotate the tooltip\n const rotate = useSpring(\n useTransform(x, [-100, 100], [-45, 45]),\n springConfig\n );\n // translate the tooltip\n const translateX = useSpring(\n useTransform(x, [-100, 100], [-50, 50]),\n springConfig\n );\n\n const handleMouseMove = useCallback(\n (event: React.MouseEvent) => {\n const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n x.set(event.nativeEvent.offsetX - halfWidth);\n },\n [x]\n );\n\n const ChildComp = React.memo(() => {\n if (!children) return <></>;\n\n return (\n <span\n onMouseMove={handleMouseMove}\n className={cn(\"ds:inline-block\", childClassName)}\n >\n {children}\n </span>\n );\n });\n\n if (animation === \"spec\") {\n return (\n <motion.div\n className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n whileHover=\"hover\"\n initial=\"initial\"\n >\n <motion.div\n variants={{\n initial: { opacity: 0, y: 20, scale: 0 },\n hover: {\n opacity: 1,\n y: -5,\n scale: 1,\n transition: {\n type: \"tween\",\n duration: 0.2,\n ease: \"easeOut\",\n },\n },\n }}\n style={{\n translateX: translateX,\n rotate: rotate,\n whiteSpace: \"nowrap\",\n }}\n className={cn(\n \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n tooltipColor\n )}\n >\n <div className=\"ds:relative ds:z-1\">{content}</div>\n </motion.div>\n\n <ChildComp />\n </motion.div>\n );\n }\n\n return (\n <TooltipProvider delayDuration={delayDuration}>\n <DsTooltip>\n <TooltipTrigger asChild>{children}</TooltipTrigger>\n <TooltipContent\n {...props}\n side={position}\n sideOffset={sideOffset}\n className={cn(tooltipAnimation?.className, tooltipColor, {\n \"ds:[&>span>svg]:invisible\": noArrow,\n })}\n >\n {content}\n </TooltipContent>\n </DsTooltip>\n </TooltipProvider>\n );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"+5DA6BaA,EAAUC,EAAM,KAAK,SAAiB,CACjD,QAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,EACb,cAAAC,EAAgB,EAChB,UAAAC,EACA,eAAAC,EACA,SAAAC,EAAW,MACX,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAe,CAAE,UAAW,IAAK,QAAS,CAAA,EAE1CC,EAAmBC,EAAAA,QAAuC,IACvDC,EAAAA,eAAeL,EAAWJ,CAAS,EACzC,CAACI,EAAWJ,CAAS,CAAC,EAEnBU,EAAeF,EAAAA,QAAgB,IAAM,CACzC,OAAQH,EAAM,MAAA,CACZ,IAAK,UACH,MAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n Tooltip as DsTooltip,\n TooltipTrigger,\n TooltipContent,\n TooltipProvider,\n type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n content: React.ReactNode;\n children: React.ReactNode;\n sideOffset?: number;\n delayDuration?: number;\n position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n className?: string;\n childClassName?: string;\n noArrow?: boolean;\n animation?: BasicAnimation;\n color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n content,\n children,\n sideOffset = 4,\n delayDuration = 0,\n className,\n childClassName,\n position = \"top\",\n noArrow = false,\n animation,\n ...props\n}: TooltipProps) {\n const springConfig = { stiffness: 100, damping: 5 };\n\n const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n return animationClass(animation, className);\n }, [animation, className]);\n\n const tooltipColor = useMemo<string>(() => {\n switch (props.color) {\n case \"primary\":\n return \"ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary\";\n case \"secondary\":\n return \"ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary\";\n case \"dark\":\n return \"\";\n case \"light\":\n return \"ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200\";\n case \"inverted\":\n return \"ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white\";\n case \"success\":\n return \"ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success\";\n case \"warning\":\n return \"ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning\";\n case \"error\":\n return \"ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error\";\n case \"glass\":\n return \"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15\";\n default:\n return \"ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance\";\n }\n }, [props?.color]);\n\n // on mouse move\n const x = useMotionValue(0);\n // rotate the tooltip\n const rotate = useSpring(\n useTransform(x, [-100, 100], [-45, 45]),\n springConfig\n );\n // translate the tooltip\n const translateX = useSpring(\n useTransform(x, [-100, 100], [-50, 50]),\n springConfig\n );\n\n const handleMouseMove = useCallback(\n (event: React.MouseEvent) => {\n const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n x.set(event.nativeEvent.offsetX - halfWidth);\n },\n [x]\n );\n\n const ChildComp = React.memo(() => {\n if (!children) return <></>;\n\n return (\n <span\n onMouseMove={handleMouseMove}\n className={cn(\"ds:inline-block\", childClassName)}\n >\n {children}\n </span>\n );\n });\n\n if (animation === \"spec\") {\n return (\n <motion.div\n className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n whileHover=\"hover\"\n initial=\"initial\"\n >\n <motion.div\n variants={{\n initial: { opacity: 0, y: 20, scale: 0 },\n hover: {\n opacity: 1,\n y: -5,\n scale: 1,\n transition: {\n type: \"tween\",\n duration: 0.2,\n ease: \"easeOut\",\n },\n },\n }}\n style={{\n translateX: translateX,\n rotate: rotate,\n whiteSpace: \"nowrap\",\n }}\n className={cn(\n \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n tooltipColor\n )}\n >\n <div className=\"ds:relative ds:z-1\">{content}</div>\n </motion.div>\n\n <ChildComp />\n </motion.div>\n );\n }\n\n return (\n <TooltipProvider delayDuration={delayDuration}>\n <DsTooltip>\n <TooltipTrigger asChild>{children}</TooltipTrigger>\n <TooltipContent\n {...props}\n side={position}\n sideOffset={sideOffset}\n className={cn(tooltipAnimation?.className, tooltipColor, {\n \"ds:[&>span>svg]:invisible\": noArrow,\n })}\n >\n {content}\n </TooltipContent>\n </DsTooltip>\n </TooltipProvider>\n );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"+5DA6BaA,EAAUC,EAAM,KAAK,SAAiB,CACjD,QAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,EACb,cAAAC,EAAgB,EAChB,UAAAC,EACA,eAAAC,EACA,SAAAC,EAAW,MACX,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAAiB,CACf,MAAMC,EAAe,CAAE,UAAW,IAAK,QAAS,CAAA,EAE1CC,EAAmBC,EAAAA,QAAuC,IACvDC,EAAAA,eAAeL,EAAWJ,CAAS,EACzC,CAACI,EAAWJ,CAAS,CAAC,EAEnBU,EAAeF,EAAAA,QAAgB,IAAM,CACzC,OAAQH,EAAM,MAAA,CACZ,IAAK,UACH,MAAO,mGACT,IAAK,YACH,MAAO,2GACT,IAAK,OACH,MAAO,GACT,IAAK,QACH,MAAO,8FACT,IAAK,WACH,MAAO,0FACT,IAAK,UACH,MAAO,mGACT,IAAK,UACH,MAAO,mGACT,IAAK,QACH,MAAO,2FACT,IAAK,QACH,MAAO,+HACT,QACE,MAAO,+dAAA,CAEb,EAAG,CAACA,GAAO,KAAK,CAAC,EAGXM,EAAIC,EAAAA,eAAe,CAAC,EAEpBC,EAASC,EAAAA,UACbC,EAAAA,aAAaJ,EAAG,CAAC,KAAM,GAAG,EAAG,CAAC,IAAK,EAAE,CAAC,EACtCL,CAAA,EAGIU,EAAaF,EAAAA,UACjBC,EAAAA,aAAaJ,EAAG,CAAC,KAAM,GAAG,EAAG,CAAC,IAAK,EAAE,CAAC,EACtCL,CAAA,EAGIW,EAAkBC,EAAAA,YACrBC,GAA4B,CAC3B,MAAMC,EAAaD,EAAM,OAAuB,YAAc,EAC9DR,EAAE,IAAIQ,EAAM,YAAY,QAAUC,CAAS,CAC7C,EACA,CAACT,CAAC,CAAA,EAGEU,EAAY1B,EAAM,KAAK,IACtBE,EAGHyB,EAAAA,IAAC,OAAA,CACC,YAAaL,EACb,UAAWM,EAAAA,GAAG,kBAAmBtB,CAAc,EAE9C,SAAAJ,CAAA,CAAA,EAPiByB,MAAAE,EAAAA,SAAA,CAAA,CAAE,CAUzB,EAED,OAAIpB,IAAc,OAEdqB,EAAAA,KAACC,EAAAA,OAAO,IAAP,CACC,UAAWH,EAAAA,GAAG,yCAA0CvB,CAAS,EACjE,WAAW,QACX,QAAQ,UAER,SAAA,CAAAsB,EAAAA,IAACI,EAAAA,OAAO,IAAP,CACC,SAAU,CACR,QAAS,CAAE,QAAS,EAAG,EAAG,GAAI,MAAO,CAAA,EACrC,MAAO,CACL,QAAS,EACT,EAAG,GACH,MAAO,EACP,WAAY,CACV,KAAM,QACN,SAAU,GACV,KAAM,SAAA,CACR,CACF,EAEF,MAAO,CACL,WAAAV,EACA,OAAAH,EACA,WAAY,QAAA,EAEd,UAAWU,EAAAA,GACT,iMACAb,CAAA,EAGF,SAAAY,EAAAA,IAAC,MAAA,CAAI,UAAU,qBAAsB,SAAA1B,CAAA,CAAQ,CAAA,CAAA,QAG9CyB,EAAA,CAAA,CAAU,CAAA,CAAA,CAAA,EAMfC,EAAAA,IAACK,EAAAA,gBAAA,CAAgB,cAAA5B,EACf,SAAA0B,OAACG,EAAAA,QAAA,CACC,SAAA,CAAAN,EAAAA,IAACO,EAAAA,eAAA,CAAe,QAAO,GAAE,SAAAhC,CAAA,CAAS,EAClCyB,EAAAA,IAACQ,EAAAA,eAAA,CACE,GAAGzB,EACJ,KAAMH,EACN,WAAAJ,EACA,UAAWyB,EAAAA,GAAGhB,GAAkB,UAAWG,EAAc,CACvD,4BAA6BP,CAAA,CAC9B,EAEA,SAAAP,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CACF,CAEJ,CAAC"}
|