@kids-reporter/routing-ui 0.1.22 → 0.1.24
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AA6FA,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC5B,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,KAAK;kBAXK,MAAM;YACZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cACxB,MAAM,IAAI;eACT,KAAK,CAAC,SAAS;eACf,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;YACpC,OAAO;mBACA,MAAM;WACd,SAAS,GAAG,QAAQ;wIA8I5B,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/components/input.js
CHANGED
|
@@ -46,7 +46,7 @@ const inputVariants = (0, _classVarianceAuthority.cva)(
|
|
|
46
46
|
},
|
|
47
47
|
mode: {
|
|
48
48
|
default: 'rounded-[12px] border-neutral-400 bg-neutral-100',
|
|
49
|
-
search: 'rounded-full border-transparent desktop:border-neutral-
|
|
49
|
+
search: 'rounded-full border-transparent desktop:border-neutral-400'
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
compoundVariants: [{
|
|
@@ -68,15 +68,15 @@ const inputVariants = (0, _classVarianceAuthority.cva)(
|
|
|
68
68
|
}, {
|
|
69
69
|
state: 'default',
|
|
70
70
|
mode: 'search',
|
|
71
|
-
className: 'bg-neutral-100'
|
|
71
|
+
className: 'bg-neutral-100 desktop:border-neutral-400'
|
|
72
72
|
}, {
|
|
73
73
|
state: 'focus',
|
|
74
74
|
mode: 'search',
|
|
75
|
-
className: 'border-neutral-600'
|
|
75
|
+
className: 'border-neutral-600 bg-neutral-100 desktop:border-neutral-600 desktop:bg-transparent'
|
|
76
76
|
}, {
|
|
77
77
|
state: 'active',
|
|
78
78
|
mode: 'search',
|
|
79
|
-
className: 'border-neutral-600'
|
|
79
|
+
className: 'border-neutral-600 desktop:border-neutral-600'
|
|
80
80
|
}],
|
|
81
81
|
defaultVariants: {
|
|
82
82
|
state: 'default',
|
|
@@ -160,6 +160,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
160
160
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
161
161
|
className: inputClasses,
|
|
162
162
|
ref: ref,
|
|
163
|
+
"data-input-state": currentState,
|
|
164
|
+
"data-input-mode": mode,
|
|
163
165
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
164
166
|
className: "text-neutral-600",
|
|
165
167
|
children: isSearchMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIconSmall, {})
|
|
@@ -170,7 +172,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
170
172
|
onFocus: handleFocus,
|
|
171
173
|
onBlur: handleBlur,
|
|
172
174
|
placeholder: placeholder,
|
|
173
|
-
className: (0, _cn.cn)('flex-1
|
|
175
|
+
className: (0, _cn.cn)('flex-1 shrink bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400', isSearchMode && 'ml-2 max-w-[72%]'),
|
|
174
176
|
"aria-describedby": errorMessage ? `${props.id ?? 'input'}-error` : undefined,
|
|
175
177
|
"aria-invalid": !!errorMessage,
|
|
176
178
|
ref: inputRef ?? innerInputRef,
|
|
@@ -184,7 +186,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
184
186
|
}), isSearchMode && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
185
187
|
type: "button",
|
|
186
188
|
onClick: handleClear,
|
|
187
|
-
className: "p-1/2 ml-auto
|
|
189
|
+
className: "p-1/2 ml-auto shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200",
|
|
188
190
|
"aria-label": "Clear input",
|
|
189
191
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIcon, {})
|
|
190
192
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":["Object","defineProperty","exports","value","default","_classVarianceAuthority","require","_react","_icons","_cn","_jsxRuntime","CloseIcon","className","jsxs","width","height","viewBox","fill","xmlns","children","jsx","cx","cy","r","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","inputVariants","cva","variants","state","focus","active","error","disabled","mode","search","compoundVariants","defaultVariants","Input","forwardRef","placeholder","onChange","onClear","onFocus","onBlur","inputRef","errorMessage","props","ref","internalValue","setInternalValue","useState","isFocused","setIsFocused","isActive","setIsActive","innerInputRef","useRef","currentValue","undefined","hasValue","length","currentState","useMemo","handleChange","e","newValue","target","handleFocus","handleBlur","handleClear","preventDefault","stopPropagation","currentRef","current","inputClasses","cn","isSearchMode","SearchIconSmall","type","id","role","onClick","_default"],"sources":["../../src/components/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\n\nimport { SearchIconSmall } from '../icons'\nimport { cn } from '../utils/cn'\n\n// Close icon component\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"currentColor\" />\n <path\n d=\"M7 7l6 6M13 7l-6 6\"\n stroke=\"white\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst inputVariants = cva(\n // Base styles\n 'px-4 py-1.5 h-11 relative flex items-center border prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white',\n {\n variants: {\n state: {\n default: 'border-transparent',\n focus: '',\n active: '',\n error: '',\n disabled:\n 'bg-neutral-100 hover:border-neutral-400 desktop:bg-neutral-100',\n },\n mode: {\n default: 'rounded-[12px] border-neutral-400 bg-neutral-100',\n search: 'rounded-full border-transparent desktop:border-neutral-600',\n },\n },\n compoundVariants: [\n {\n state: 'error',\n mode: 'default',\n className: 'border-semantic-danger hover:border-semantic-danger',\n },\n {\n state: 'default',\n mode: 'default',\n className: 'border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'default',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'default',\n className: 'border-neutral-600',\n },\n\n {\n state: 'default',\n mode: 'search',\n className: 'bg-neutral-100',\n },\n {\n state: 'focus',\n mode: 'search',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'search',\n className: 'border-neutral-600',\n },\n ],\n defaultVariants: {\n state: 'default',\n mode: 'default',\n },\n }\n)\n\nexport type InputProps = {\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onClear?: () => void\n children?: React.ReactNode\n inputRef?: React.RefObject<HTMLInputElement>\n error?: boolean\n errorMessage?: string\n mode?: 'default' | 'search'\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n placeholder = '搜尋更多新聞、議題',\n value,\n onChange,\n onClear,\n className,\n onFocus,\n onBlur,\n inputRef,\n error,\n errorMessage,\n mode = 'default',\n disabled,\n ...props\n },\n ref\n ) => {\n const [internalValue, setInternalValue] = useState('')\n const [isFocused, setIsFocused] = useState(false)\n const [isActive, setIsActive] = useState(false)\n const innerInputRef = useRef<HTMLInputElement>(null)\n const currentValue = value !== undefined ? value : internalValue\n const hasValue = currentValue.length > 0\n\n // Determine current state\n const currentState = useMemo(() => {\n if (error) return 'error'\n if (disabled) return 'disabled'\n if (isFocused) return 'focus'\n if (hasValue) return isActive ? 'active' : 'default'\n return 'default'\n }, [error, disabled, isFocused, hasValue, isActive])\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n if (onChange) {\n onChange(newValue)\n } else {\n setInternalValue(newValue)\n }\n setIsActive(true)\n }\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e)\n }\n setIsFocused(true)\n setIsActive(true)\n }\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e)\n }\n setIsFocused(false)\n setIsActive(false)\n }\n\n const handleClear = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (onChange) {\n onChange('')\n } else {\n setInternalValue('')\n }\n if (onClear) {\n onClear()\n }\n\n const currentRef = inputRef ?? innerInputRef\n currentRef.current?.focus()\n }\n\n const inputClasses = cn(\n inputVariants({ state: currentState, mode }),\n className\n )\n\n const isSearchMode = mode === 'search'\n\n return (\n <div className=\"gap-2 flex flex-col\">\n <div className={inputClasses} ref={ref}>\n <div className=\"text-neutral-600\">\n {isSearchMode && <SearchIconSmall />}\n </div>\n <input\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n className={cn(\n 'flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400',\n isSearchMode && 'ml-2 max-w-[72%]'\n )}\n aria-describedby={\n errorMessage ? `${props.id ?? 'input'}-error` : undefined\n }\n aria-invalid={!!errorMessage}\n ref={inputRef ?? innerInputRef}\n disabled={disabled}\n {...props}\n />\n {errorMessage && (\n <p\n className=\"-bottom-5 left-0 absolute prose-p3 text-semantic-danger\"\n id={`${props.id ?? 'input'}-error`}\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n\n {isSearchMode && hasValue && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"p-1/2 ml-auto flex-shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200\"\n aria-label=\"Clear input\"\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </div>\n )\n }\n)\n\nexport default Input\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"input.js","names":["Object","defineProperty","exports","value","default","_classVarianceAuthority","require","_react","_icons","_cn","_jsxRuntime","CloseIcon","className","jsxs","width","height","viewBox","fill","xmlns","children","jsx","cx","cy","r","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","inputVariants","cva","variants","state","focus","active","error","disabled","mode","search","compoundVariants","defaultVariants","Input","forwardRef","placeholder","onChange","onClear","onFocus","onBlur","inputRef","errorMessage","props","ref","internalValue","setInternalValue","useState","isFocused","setIsFocused","isActive","setIsActive","innerInputRef","useRef","currentValue","undefined","hasValue","length","currentState","useMemo","handleChange","e","newValue","target","handleFocus","handleBlur","handleClear","preventDefault","stopPropagation","currentRef","current","inputClasses","cn","isSearchMode","SearchIconSmall","type","id","role","onClick","_default"],"sources":["../../src/components/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { forwardRef, useMemo, useRef, useState } from 'react'\n\nimport { SearchIconSmall } from '../icons'\nimport { cn } from '../utils/cn'\n\n// Close icon component\nconst CloseIcon = ({ className }: { className?: string }) => (\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n className={className}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"10\" cy=\"10\" r=\"10\" fill=\"currentColor\" />\n <path\n d=\"M7 7l6 6M13 7l-6 6\"\n stroke=\"white\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n)\n\nconst inputVariants = cva(\n // Base styles\n 'px-4 py-1.5 h-11 relative flex items-center border prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white',\n {\n variants: {\n state: {\n default: 'border-transparent',\n focus: '',\n active: '',\n error: '',\n disabled:\n 'bg-neutral-100 hover:border-neutral-400 desktop:bg-neutral-100',\n },\n mode: {\n default: 'rounded-[12px] border-neutral-400 bg-neutral-100',\n search: 'rounded-full border-transparent desktop:border-neutral-400',\n },\n },\n compoundVariants: [\n {\n state: 'error',\n mode: 'default',\n className: 'border-semantic-danger hover:border-semantic-danger',\n },\n {\n state: 'default',\n mode: 'default',\n className: 'border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'default',\n className: 'border-neutral-600',\n },\n {\n state: 'active',\n mode: 'default',\n className: 'border-neutral-600',\n },\n\n {\n state: 'default',\n mode: 'search',\n className: 'bg-neutral-100 desktop:border-neutral-400',\n },\n {\n state: 'focus',\n mode: 'search',\n className:\n 'border-neutral-600 bg-neutral-100 desktop:border-neutral-600 desktop:bg-transparent',\n },\n {\n state: 'active',\n mode: 'search',\n className: 'border-neutral-600 desktop:border-neutral-600',\n },\n ],\n defaultVariants: {\n state: 'default',\n mode: 'default',\n },\n }\n)\n\nexport type InputProps = {\n placeholder?: string\n value?: string\n onChange?: (value: string) => void\n onClear?: () => void\n children?: React.ReactNode\n inputRef?: React.RefObject<HTMLInputElement>\n error?: boolean\n errorMessage?: string\n mode?: 'default' | 'search'\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n placeholder = '搜尋更多新聞、議題',\n value,\n onChange,\n onClear,\n className,\n onFocus,\n onBlur,\n inputRef,\n error,\n errorMessage,\n mode = 'default',\n disabled,\n ...props\n },\n ref\n ) => {\n const [internalValue, setInternalValue] = useState('')\n const [isFocused, setIsFocused] = useState(false)\n const [isActive, setIsActive] = useState(false)\n const innerInputRef = useRef<HTMLInputElement>(null)\n const currentValue = value !== undefined ? value : internalValue\n const hasValue = currentValue.length > 0\n\n // Determine current state\n const currentState = useMemo(() => {\n if (error) return 'error'\n if (disabled) return 'disabled'\n if (isFocused) return 'focus'\n if (hasValue) return isActive ? 'active' : 'default'\n return 'default'\n }, [error, disabled, isFocused, hasValue, isActive])\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value\n if (onChange) {\n onChange(newValue)\n } else {\n setInternalValue(newValue)\n }\n setIsActive(true)\n }\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onFocus) {\n onFocus(e)\n }\n setIsFocused(true)\n setIsActive(true)\n }\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(e)\n }\n setIsFocused(false)\n setIsActive(false)\n }\n\n const handleClear = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n if (onChange) {\n onChange('')\n } else {\n setInternalValue('')\n }\n if (onClear) {\n onClear()\n }\n\n const currentRef = inputRef ?? innerInputRef\n currentRef.current?.focus()\n }\n\n const inputClasses = cn(\n inputVariants({ state: currentState, mode }),\n className\n )\n\n const isSearchMode = mode === 'search'\n\n return (\n <div className=\"gap-2 flex flex-col\">\n <div\n className={inputClasses}\n ref={ref}\n data-input-state={currentState}\n data-input-mode={mode}\n >\n <div className=\"text-neutral-600\">\n {isSearchMode && <SearchIconSmall />}\n </div>\n <input\n type=\"text\"\n value={currentValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n placeholder={placeholder}\n className={cn(\n 'flex-1 shrink bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:text-neutral-400',\n isSearchMode && 'ml-2 max-w-[72%]'\n )}\n aria-describedby={\n errorMessage ? `${props.id ?? 'input'}-error` : undefined\n }\n aria-invalid={!!errorMessage}\n ref={inputRef ?? innerInputRef}\n disabled={disabled}\n {...props}\n />\n {errorMessage && (\n <p\n className=\"-bottom-5 left-0 absolute prose-p3 text-semantic-danger\"\n id={`${props.id ?? 'input'}-error`}\n role=\"alert\"\n >\n {errorMessage}\n </p>\n )}\n\n {isSearchMode && hasValue && (\n <button\n type=\"button\"\n onClick={handleClear}\n className=\"p-1/2 ml-auto shrink-0 cursor-pointer rounded-full text-neutral-400 transition-colors hover:text-neutral-600 active:bg-neutral-200\"\n aria-label=\"Clear input\"\n >\n <CloseIcon />\n </button>\n )}\n </div>\n </div>\n )\n }\n)\n\nexport default Input\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -145,10 +145,10 @@ function SearchInputSection(props) {
|
|
|
145
145
|
children: "\u71B1\u9580\u641C\u5C0B"
|
|
146
146
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
147
147
|
className: "gap-2.5 flex flex-wrap",
|
|
148
|
-
children: tags.map(keyword => /*#__PURE__*/(0, _jsxRuntime.
|
|
148
|
+
children: tags.map(keyword => /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
|
|
149
149
|
className: "px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white",
|
|
150
150
|
href: `/search?q=${encodeURIComponent(keyword)}`,
|
|
151
|
-
children:
|
|
151
|
+
children: keyword
|
|
152
152
|
}, keyword))
|
|
153
153
|
})]
|
|
154
154
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_hooks","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useBodyScrollLock","toLock","lockID","useEffect","current","focus","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","joinUsUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","document","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport { useBodyScrollLock } from '../hooks'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useBodyScrollLock({\n toLock: mode === 'popover' && isSearchOpen,\n lockID: 'header-search-input',\n })\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n return\n }\n setIsFocused(false)\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n #{keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n joinUsUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n joinUsUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href={joinUsUrl}>加入我們</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_hooks","_icons","_cn","_jsxRuntime","searchFormVariants","cva","variants","mode","inline","popover","isSearchOpen","true","false","compoundVariants","class","searchDropdownVariants","isFocused","compactMode","jsx","href","className","rel","children","src","alt","loading","cn","width","height","props","ref","useRef","setIsFocused","useState","searchValue","setSearchValue","tags","searchPlaceholder","useBodyScrollLock","toLock","lockID","useEffect","current","focus","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","joinUsUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","document","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","onHamburgerOverlayOpen","menuItems","small","reduce","acc","item","index","label","length","HamburgerIconSmall","HamburgerIcon"],"sources":["../../src/header/shared-components.tsx"],"sourcesContent":["'use client'\nimport { cva } from 'class-variance-authority'\nimport { useEffect, useRef, useState } from 'react'\n\nimport { Button, Input } from '../components'\nimport { useBodyScrollLock } from '../hooks'\nimport {\n ClearIcon,\n HamburgerIcon,\n HamburgerIconSmall,\n SearchIcon,\n} from '../icons'\nimport type { MenuItem } from '../types'\nimport { cn } from '../utils/cn'\n\nconst searchFormVariants = cva(\n 'ease-in-out h-full transition-all duration-300',\n {\n variants: {\n mode: {\n inline: 'h-11 w-full',\n popover: 'top-0 -right-4 w-66 absolute overflow-hidden opacity-0',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n class: 'w-66 pointer-events-auto opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n ],\n }\n)\n\nconst searchDropdownVariants = cva(\n 'rounded-xl mt-2 w-66 ease-in-out h-0 p-0 z-50 bg-neutral-white opacity-0 transition-all duration-200',\n {\n variants: {\n mode: {\n inline: '',\n popover: 'top-12 -right-4 shadow-custom p-4 absolute',\n },\n isSearchOpen: {\n true: '',\n false: '',\n },\n isFocused: {\n true: '',\n false: '',\n },\n },\n compoundVariants: [\n {\n mode: 'popover',\n isSearchOpen: true,\n isFocused: true,\n class: 'p-4 h-min opacity-100',\n },\n {\n mode: 'popover',\n isSearchOpen: false,\n class: 'pointer-events-none',\n },\n {\n mode: 'inline',\n isFocused: true,\n class:\n 'translate-y-0 pt-6 mt-0 bg-neutral-transparent h-min w-full opacity-100',\n },\n {\n mode: 'inline',\n isFocused: false,\n class: '-translate-y-3 pointer-events-none w-full',\n },\n ],\n }\n)\n\nexport function LogoLink({ compactMode = false }: { compactMode?: boolean }) {\n return (\n <a href=\"/\" className=\"flex items-center\" rel=\"home\">\n <img\n src=\"/assets/images/brand-icon.svg\"\n alt=\"少年報導者 The Reporter for Kids\"\n loading=\"eager\"\n className={cn(\n 'h-5 tablet:h-6 desktop:h-8 ease-in-out w-auto transition-all duration-500',\n compactMode && 'desktop:h-[26px]'\n )}\n width={293}\n height={32}\n />\n </a>\n )\n}\n\ntype SearchInputSectionProps =\n | {\n mode: 'popover'\n isSearchOpen: boolean\n tags: string[]\n searchPlaceholder: string\n }\n | {\n mode: 'inline'\n tags: string[]\n searchPlaceholder: string\n }\n\nexport function SearchInputSection(props: SearchInputSectionProps) {\n const ref = useRef<HTMLInputElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n const [searchValue, setSearchValue] = useState('')\n\n const mode = props.mode\n const isSearchOpen = mode === 'popover' && props.isSearchOpen\n const tags = props.tags\n const searchPlaceholder = props.searchPlaceholder\n\n useBodyScrollLock({\n toLock: mode === 'popover' && isSearchOpen,\n lockID: 'header-search-input',\n })\n\n useEffect(() => {\n if (mode === 'inline') {\n return\n }\n if (isSearchOpen) {\n ref.current?.focus()\n setIsFocused(true)\n return\n }\n setIsFocused(false)\n }, [mode, isSearchOpen])\n\n return (\n <div\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n className={mode === 'inline' ? 'relative w-full' : 'h-11'}\n >\n <form\n role=\"search\"\n method=\"get\"\n action=\"/search\"\n className={searchFormVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n })}\n >\n <Input\n placeholder={searchPlaceholder}\n name=\"q\"\n title=\"Search for...\"\n aria-label=\"Search for...\"\n className=\"w-[99%]\"\n inputRef={ref}\n onChange={setSearchValue}\n value={searchValue}\n mode=\"search\"\n />\n </form>\n <div\n className={searchDropdownVariants({\n mode,\n isSearchOpen: mode === 'popover' ? isSearchOpen : undefined,\n isFocused,\n })}\n >\n <h3 className=\"font-bold mb-3 prose-p3 text-neutral-700\">熱門搜尋</h3>\n <div className=\"gap-2.5 flex flex-wrap\">\n {tags.map((keyword) => (\n <a\n key={keyword}\n className=\"px-3 py-1 font-bold cursor-pointer rounded-full bg-neutral-200 prose-p2 text-neutral-900 transition-colors duration-200 hover:bg-red-500 hover:text-neutral-white\"\n href={`/search?q=${encodeURIComponent(keyword)}`}\n >\n {keyword}\n </a>\n ))}\n </div>\n </div>\n </div>\n )\n}\n\nexport function ActionButtons({\n hideCtaButtons = false,\n tags,\n searchPlaceholder,\n subscribeUrl,\n joinUsUrl,\n}: {\n hideCtaButtons?: boolean\n tags: string[]\n searchPlaceholder: string\n subscribeUrl: string\n joinUsUrl: string\n}) {\n const [isSearchOpen, setIsSearchOpen] = useState(false)\n\n const containerRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n const containerElement = containerRef.current\n const buttonElement = buttonRef.current\n if (!containerElement || !buttonElement) return\n if (\n !containerElement.contains(event.target as Node) &&\n !buttonElement.contains(event.target as Node)\n ) {\n setIsSearchOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [])\n\n return (\n <div className=\"relative flex items-center\">\n <div className=\"mr-6 relative flex items-center\" ref={containerRef}>\n {/* CTA Buttons - Base layer */}\n {!hideCtaButtons && !isSearchOpen && (\n <div className=\"gap-4 flex items-center\">\n <Button variant=\"secondary\" size={32} asChild>\n <a href={joinUsUrl}>加入我們</a>\n </Button>\n <Button variant=\"primary\" size={32} asChild>\n <a href={subscribeUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n 訂閱\n </a>\n </Button>\n </div>\n )}\n\n <SearchInputSection\n isSearchOpen={isSearchOpen}\n mode=\"popover\"\n tags={tags}\n searchPlaceholder={searchPlaceholder}\n />\n </div>\n\n <button\n className=\"w-8 h-8 flex cursor-pointer items-center justify-center rounded-full text-neutral-600 transition-all duration-200 hover:text-neutral-800\"\n aria-label=\"搜尋\"\n onClick={() => setIsSearchOpen(!isSearchOpen)}\n ref={buttonRef}\n >\n {isSearchOpen ? <ClearIcon /> : <SearchIcon />}\n </button>\n </div>\n )\n}\n\nexport function BottomNavigation({\n onHamburgerOverlayOpen,\n menuItems,\n}: {\n onHamburgerOverlayOpen: () => void\n menuItems: MenuItem[]\n}) {\n return (\n <div className=\"py-2 px-4 flex w-full items-center justify-between border-y border-neutral-border\">\n <HamburgerButton onHamburgerOverlayOpen={onHamburgerOverlayOpen} small />\n\n {menuItems.reduce((acc, item, index) => {\n return [\n ...acc,\n <div key={item.label} className=\"flex items-center\">\n <a\n href={item.href}\n className=\"py-1 font-bold! h-6 flex items-center prose-p1 text-neutral-900 transition-colors hover:text-red-400\"\n >\n {item.label}\n </a>\n </div>,\n ...(index < menuItems.length - 1\n ? [\n <div\n key={`separator-${index}`}\n className=\"h-4 mx-2 w-px bg-neutral-border\"\n />,\n ]\n : []),\n ]\n }, [] as React.ReactNode[])}\n </div>\n )\n}\n\nexport function HamburgerButton({\n onHamburgerOverlayOpen,\n small = false,\n}: {\n onHamburgerOverlayOpen: () => void\n small?: boolean\n}) {\n return (\n <button\n className={cn(\n 'rounded-sm ease-in-out flex cursor-pointer items-center justify-center transition-all duration-300 hover:[&>svg>path:nth-child(1)]:fill-blue-500 hover:[&>svg>path:nth-child(2)]:fill-red-500 hover:[&>svg>path:nth-child(3)]:fill-yellow-500 hover:[&>svg>rect:nth-child(1)]:fill-blue-500 hover:[&>svg>rect:nth-child(2)]:fill-red-500 hover:[&>svg>rect:nth-child(3)]:fill-yellow-500',\n small ? 'w-6 h-6' : 'w-8 h-8'\n )}\n onClick={onHamburgerOverlayOpen}\n >\n {small ? <HamburgerIconSmall /> : <HamburgerIcon />}\n </button>\n )\n}\n"],"mappings":";AAAA,YAAY;;AAAAA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,aAAA,GAAAA,aAAA;AAAAF,OAAA,CAAAG,gBAAA,GAAAA,gBAAA;AAAAH,OAAA,CAAAI,eAAA,GAAAA,eAAA;AAAAJ,OAAA,CAAAK,QAAA,GAAAA,QAAA;AAAAL,OAAA,CAAAM,kBAAA,GAAAA,kBAAA;AACZ,IAAAC,uBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAOA,IAAAK,GAAA,GAAAL,OAAA;AAAgC,IAAAM,WAAA,GAAAN,OAAA;AAEhC,MAAMO,kBAAkB,GAAG,IAAAC,2BAAG,EAC5B,gDAAgD,EAChD;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,MAAM,EAAE,aAAa;MACrBC,OAAO,EAAE;IACX,CAAC;IACDC,YAAY,EAAE;MACZC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,gBAAgB,EAAE,CAChB;IACEN,IAAI,EAAE,SAAS;IACfG,YAAY,EAAE,IAAI;IAClBI,KAAK,EAAE;EACT,CAAC,EACD;IACEP,IAAI,EAAE,SAAS;IACfG,YAAY,EAAE,KAAK;IACnBI,KAAK,EAAE;EACT,CAAC;AAEL,CACF,CAAC;AAED,MAAMC,sBAAsB,GAAG,IAAAV,2BAAG,EAChC,sGAAsG,EACtG;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,MAAM,EAAE,EAAE;MACVC,OAAO,EAAE;IACX,CAAC;IACDC,YAAY,EAAE;MACZC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT,CAAC;IACDI,SAAS,EAAE;MACTL,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,gBAAgB,EAAE,CAChB;IACEN,IAAI,EAAE,SAAS;IACfG,YAAY,EAAE,IAAI;IAClBM,SAAS,EAAE,IAAI;IACfF,KAAK,EAAE;EACT,CAAC,EACD;IACEP,IAAI,EAAE,SAAS;IACfG,YAAY,EAAE,KAAK;IACnBI,KAAK,EAAE;EACT,CAAC,EACD;IACEP,IAAI,EAAE,QAAQ;IACdS,SAAS,EAAE,IAAI;IACfF,KAAK,EACH;EACJ,CAAC,EACD;IACEP,IAAI,EAAE,QAAQ;IACdS,SAAS,EAAE,KAAK;IAChBF,KAAK,EAAE;EACT,CAAC;AAEL,CACF,CAAC;AAEM,SAASpB,QAAQA,CAAC;EAAEuB,WAAW,GAAG;AAAiC,CAAC,EAAE;EAC3E,oBACE,IAAAd,WAAA,CAAAe,GAAA;IAAGC,IAAI,EAAC,GAAG;IAACC,SAAS,EAAC,mBAAmB;IAACC,GAAG,EAAC,MAAM;IAAAC,QAAA,eAClD,IAAAnB,WAAA,CAAAe,GAAA;MACEK,GAAG,EAAC,+BAA+B;MACnCC,GAAG,EAAC,sDAA6B;MACjCC,OAAO,EAAC,OAAO;MACfL,SAAS,EAAE,IAAAM,MAAE,EACX,2EAA2E,EAC3ET,WAAW,IAAI,kBACjB,CAAE;MACFU,KAAK,EAAE,GAAI;MACXC,MAAM,EAAE;IAAG,CACZ;EAAC,CACD,CAAC;AAER;AAeO,SAASjC,kBAAkBA,CAACkC,KAA8B,EAAE;EACjE,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC1C,MAAM,CAACf,SAAS,EAAEgB,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACjD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EAElD,MAAM1B,IAAI,GAAGsB,KAAK,CAACtB,IAAI;EACvB,MAAMG,YAAY,GAAGH,IAAI,KAAK,SAAS,IAAIsB,KAAK,CAACnB,YAAY;EAC7D,MAAM0B,IAAI,GAAGP,KAAK,CAACO,IAAI;EACvB,MAAMC,iBAAiB,GAAGR,KAAK,CAACQ,iBAAiB;EAEjD,IAAAC,wBAAiB,EAAC;IAChBC,MAAM,EAAEhC,IAAI,KAAK,SAAS,IAAIG,YAAY;IAC1C8B,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIlC,IAAI,KAAK,QAAQ,EAAE;MACrB;IACF;IACA,IAAIG,YAAY,EAAE;MAChBoB,GAAG,CAACY,OAAO,EAAEC,KAAK,CAAC,CAAC;MACpBX,YAAY,CAAC,IAAI,CAAC;MAClB;IACF;IACAA,YAAY,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,CAACzB,IAAI,EAAEG,YAAY,CAAC,CAAC;EAExB,oBACE,IAAAP,WAAA,CAAAyC,IAAA;IACEC,OAAO,EAAEA,CAAA,KAAMb,YAAY,CAAC,IAAI,CAAE;IAClCc,MAAM,EAAEA,CAAA,KAAMd,YAAY,CAAC,KAAK,CAAE;IAClCZ,SAAS,EAAEb,IAAI,KAAK,QAAQ,GAAG,iBAAiB,GAAG,MAAO;IAAAe,QAAA,gBAE1D,IAAAnB,WAAA,CAAAe,GAAA;MACE6B,IAAI,EAAC,QAAQ;MACbC,MAAM,EAAC,KAAK;MACZC,MAAM,EAAC,SAAS;MAChB7B,SAAS,EAAEhB,kBAAkB,CAAC;QAC5BG,IAAI;QACJG,YAAY,EAAEH,IAAI,KAAK,SAAS,GAAGG,YAAY,GAAGwC;MACpD,CAAC,CAAE;MAAA5B,QAAA,eAEH,IAAAnB,WAAA,CAAAe,GAAA,EAACnB,WAAA,CAAAoD,KAAK;QACJC,WAAW,EAAEf,iBAAkB;QAC/BgB,IAAI,EAAC,GAAG;QACRC,KAAK,EAAC,eAAe;QACrB,cAAW,eAAe;QAC1BlC,SAAS,EAAC,SAAS;QACnBmC,QAAQ,EAAEzB,GAAI;QACd0B,QAAQ,EAAErB,cAAe;QACzB7C,KAAK,EAAE4C,WAAY;QACnB3B,IAAI,EAAC;MAAQ,CACd;IAAC,CACE,CAAC,eACP,IAAAJ,WAAA,CAAAyC,IAAA;MACExB,SAAS,EAAEL,sBAAsB,CAAC;QAChCR,IAAI;QACJG,YAAY,EAAEH,IAAI,KAAK,SAAS,GAAGG,YAAY,GAAGwC,SAAS;QAC3DlC;MACF,CAAC,CAAE;MAAAM,QAAA,gBAEH,IAAAnB,WAAA,CAAAe,GAAA;QAAIE,SAAS,EAAC,0CAA0C;QAAAE,QAAA,EAAC;MAAI,CAAI,CAAC,eAClE,IAAAnB,WAAA,CAAAe,GAAA;QAAKE,SAAS,EAAC,wBAAwB;QAAAE,QAAA,EACpCc,IAAI,CAACqB,GAAG,CAAEC,OAAO,iBAChB,IAAAvD,WAAA,CAAAe,GAAA;UAEEE,SAAS,EAAC,mKAAmK;UAC7KD,IAAI,EAAE,aAAawC,kBAAkB,CAACD,OAAO,CAAC,EAAG;UAAApC,QAAA,EAEhDoC;QAAO,GAJHA,OAKJ,CACJ;MAAC,CACC,CAAC;IAAA,CACH,CAAC;EAAA,CACH,CAAC;AAEV;AAEO,SAASnE,aAAaA,CAAC;EAC5BqE,cAAc,GAAG,KAAK;EACtBxB,IAAI;EACJC,iBAAiB;EACjBwB,YAAY;EACZC;AAOF,CAAC,EAAE;EACD,MAAM,CAACpD,YAAY,EAAEqD,eAAe,CAAC,GAAG,IAAA9B,eAAQ,EAAC,KAAK,CAAC;EAEvD,MAAM+B,YAAY,GAAG,IAAAjC,aAAM,EAAiB,IAAI,CAAC;EACjD,MAAMkC,SAAS,GAAG,IAAAlC,aAAM,EAAoB,IAAI,CAAC;EAEjD,IAAAU,gBAAS,EAAC,MAAM;IACd,MAAMyB,kBAAkB,GAAIC,KAAiB,IAAK;MAChD,MAAMC,gBAAgB,GAAGJ,YAAY,CAACtB,OAAO;MAC7C,MAAM2B,aAAa,GAAGJ,SAAS,CAACvB,OAAO;MACvC,IAAI,CAAC0B,gBAAgB,IAAI,CAACC,aAAa,EAAE;MACzC,IACE,CAACD,gBAAgB,CAACE,QAAQ,CAACH,KAAK,CAACI,MAAc,CAAC,IAChD,CAACF,aAAa,CAACC,QAAQ,CAACH,KAAK,CAACI,MAAc,CAAC,EAC7C;QACAR,eAAe,CAAC,KAAK,CAAC;MACxB;IACF,CAAC;IAEDS,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEP,kBAAkB,CAAC;IAC1D,OAAO,MAAM;MACXM,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAER,kBAAkB,CAAC;IAC/D,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,IAAA/D,WAAA,CAAAyC,IAAA;IAAKxB,SAAS,EAAC,4BAA4B;IAAAE,QAAA,gBACzC,IAAAnB,WAAA,CAAAyC,IAAA;MAAKxB,SAAS,EAAC,iCAAiC;MAACU,GAAG,EAAEkC,YAAa;MAAA1C,QAAA,GAEhE,CAACsC,cAAc,IAAI,CAAClD,YAAY,iBAC/B,IAAAP,WAAA,CAAAyC,IAAA;QAAKxB,SAAS,EAAC,yBAAyB;QAAAE,QAAA,gBACtC,IAAAnB,WAAA,CAAAe,GAAA,EAACnB,WAAA,CAAA4E,MAAM;UAACC,OAAO,EAAC,WAAW;UAACC,IAAI,EAAE,EAAG;UAACC,OAAO;UAAAxD,QAAA,eAC3C,IAAAnB,WAAA,CAAAe,GAAA;YAAGC,IAAI,EAAE2C,SAAU;YAAAxC,QAAA,EAAC;UAAI,CAAG;QAAC,CACtB,CAAC,eACT,IAAAnB,WAAA,CAAAe,GAAA,EAACnB,WAAA,CAAA4E,MAAM;UAACC,OAAO,EAAC,SAAS;UAACC,IAAI,EAAE,EAAG;UAACC,OAAO;UAAAxD,QAAA,eACzC,IAAAnB,WAAA,CAAAe,GAAA;YAAGC,IAAI,EAAE0C,YAAa;YAACU,MAAM,EAAC,QAAQ;YAAClD,GAAG,EAAC,qBAAqB;YAAAC,QAAA,EAAC;UAEjE,CAAG;QAAC,CACE,CAAC;MAAA,CACN,CACN,eAED,IAAAnB,WAAA,CAAAe,GAAA,EAACvB,kBAAkB;QACjBe,YAAY,EAAEA,YAAa;QAC3BH,IAAI,EAAC,SAAS;QACd6B,IAAI,EAAEA,IAAK;QACXC,iBAAiB,EAAEA;MAAkB,CACtC,CAAC;IAAA,CACC,CAAC,eAEN,IAAAlC,WAAA,CAAAe,GAAA;MACEE,SAAS,EAAC,0IAA0I;MACpJ,cAAW,cAAI;MACf2D,OAAO,EAAEA,CAAA,KAAMhB,eAAe,CAAC,CAACrD,YAAY,CAAE;MAC9CoB,GAAG,EAAEmC,SAAU;MAAA3C,QAAA,EAEdZ,YAAY,gBAAG,IAAAP,WAAA,CAAAe,GAAA,EAACjB,MAAA,CAAA+E,SAAS,IAAE,CAAC,gBAAG,IAAA7E,WAAA,CAAAe,GAAA,EAACjB,MAAA,CAAAgF,UAAU,IAAE;IAAC,CACxC,CAAC;EAAA,CACN,CAAC;AAEV;AAEO,SAASzF,gBAAgBA,CAAC;EAC/B0F,sBAAsB;EACtBC;AAIF,CAAC,EAAE;EACD,oBACE,IAAAhF,WAAA,CAAAyC,IAAA;IAAKxB,SAAS,EAAC,mFAAmF;IAAAE,QAAA,gBAChG,IAAAnB,WAAA,CAAAe,GAAA,EAACzB,eAAe;MAACyF,sBAAsB,EAAEA,sBAAuB;MAACE,KAAK;IAAA,CAAE,CAAC,EAExED,SAAS,CAACE,MAAM,CAAC,CAACC,GAAG,EAAEC,IAAI,EAAEC,KAAK,KAAK;MACtC,OAAO,CACL,GAAGF,GAAG,eACN,IAAAnF,WAAA,CAAAe,GAAA;QAAsBE,SAAS,EAAC,mBAAmB;QAAAE,QAAA,eACjD,IAAAnB,WAAA,CAAAe,GAAA;UACEC,IAAI,EAAEoE,IAAI,CAACpE,IAAK;UAChBC,SAAS,EAAC,sGAAsG;UAAAE,QAAA,EAE/GiE,IAAI,CAACE;QAAK,CACV;MAAC,GANIF,IAAI,CAACE,KAOV,CAAC,EACN,IAAID,KAAK,GAAGL,SAAS,CAACO,MAAM,GAAG,CAAC,GAC5B,cACE,IAAAvF,WAAA,CAAAe,GAAA;QAEEE,SAAS,EAAC;MAAiC,GADtC,aAAaoE,KAAK,EAExB,CAAC,CACH,GACD,EAAE,CAAC,CACR;IACH,CAAC,EAAE,EAAuB,CAAC;EAAA,CACxB,CAAC;AAEV;AAEO,SAAS/F,eAAeA,CAAC;EAC9ByF,sBAAsB;EACtBE,KAAK,GAAG;AAIV,CAAC,EAAE;EACD,oBACE,IAAAjF,WAAA,CAAAe,GAAA;IACEE,SAAS,EAAE,IAAAM,MAAE,EACX,0XAA0X,EAC1X0D,KAAK,GAAG,SAAS,GAAG,SACtB,CAAE;IACFL,OAAO,EAAEG,sBAAuB;IAAA5D,QAAA,EAE/B8D,KAAK,gBAAG,IAAAjF,WAAA,CAAAe,GAAA,EAACjB,MAAA,CAAA0F,kBAAkB,IAAE,CAAC,gBAAG,IAAAxF,WAAA,CAAAe,GAAA,EAACjB,MAAA,CAAA2F,aAAa,IAAE;EAAC,CAC7C,CAAC;AAEb","ignoreList":[]}
|