@kids-reporter/routing-ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/components/input.d.ts

@@ -3,18 +3,22 @@ export type InputProps = {
     value?: string;
     onChange?: (value: string) => void;
     onClear?: () => void;
-    showClearButton?: boolean;
     children?: React.ReactNode;
     inputRef?: React.RefObject<HTMLInputElement>;
+    error?: boolean;
+    errorMessage?: string;
+    mode?: 'default' | 'search';
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>;
 declare const Input: import("react").ForwardRefExoticComponent<{
     placeholder?: string;
     value?: string;
     onChange?: (value: string) => void;
     onClear?: () => void;
-    showClearButton?: boolean;
     children?: React.ReactNode;
     inputRef?: React.RefObject<HTMLInputElement>;
+    error?: boolean;
+    errorMessage?: string;
+    mode?: "default" | "search";
 } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;
 //# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAiDA,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,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;CAC7C,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAA;AAE3E,QAAA,MAAM,KAAK;kBATK,MAAM;YACZ,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cACxB,MAAM,IAAI;sBACF,OAAO;eACd,KAAK,CAAC,SAAS;eACf,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC;wIAgH7C,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AA6DA,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;wIAyI5B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/components/input.js

@@ -35,7 +35,7 @@ const CloseIcon = ({
 });
 const inputVariants = (0, _classVarianceAuthority.cva)(
 // Base styles
-'desktop:bg-white! px-4 py-1.5 h-11 flex items-center rounded-full border border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600', {
+'px-4 py-1.5 h-11 relative flex items-center border border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white!', {
   variants: {
     state: {
       default: 'border-transparent',
@@ -43,11 +43,21 @@ const inputVariants = (0, _classVarianceAuthority.cva)(
       focus: 'border-neutral-600',
       active: 'border-neutral-600',
       unfocus: 'border-transparent',
-      error: 'border-red-600'
+      error: 'border-semantic-danger hover:border-semantic-danger'
+    },
+    mode: {
+      default: 'rounded-[12px] border-neutral-400',
+      search: 'rounded-full'
     }
   },
+  compoundVariants: [{
+    state: 'error',
+    mode: 'default',
+    className: 'border-semantic-danger'
+  }],
   defaultVariants: {
-    state: 'default'
+    state: 'default',
+    mode: 'default'
   }
 });
 const Input = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -55,11 +65,13 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   onChange,
   onClear,
-  showClearButton = true,
   className,
   onFocus,
   onBlur,
   inputRef,
+  error,
+  errorMessage,
+  mode = 'default',
   ...props
 }, ref) => {
   const [internalValue, setInternalValue] = (0, _react.useState)('');
@@ -70,7 +82,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   const hasValue = currentValue.length > 0;
 
   // Determine current state
-  const currentState = isFocused ? 'focus' : hasValue ? isActive ? 'active' : 'unfocus' : 'default';
+  const currentState = error ? 'error' : isFocused ? 'focus' : hasValue ? isActive ? 'active' : 'unfocus' : 'default';
   const handleChange = e => {
     const newValue = e.target.value;
     if (onChange) {
@@ -109,8 +121,10 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     currentRef.current?.focus();
   };
   const inputClasses = (0, _cn.cn)(inputVariants({
-    state: currentState
+    state: currentState,
+    mode
   }), className);
+  const isSearchMode = mode === 'search';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "gap-2 flex flex-col",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -118,7 +132,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "text-neutral-600",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIconSmall, {})
+        children: isSearchMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIconSmall, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "text",
         value: currentValue,
@@ -126,10 +140,17 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
         onFocus: handleFocus,
         onBlur: handleBlur,
         placeholder: placeholder,
-        className: "placeholder:font-medium ml-2 max-w-[72%] flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:text-neutral-400 focus:outline-none",
+        className: (0, _cn.cn)('flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:prose-p1 placeholder:text-neutral-400 focus:outline-none disabled:bg-neutral-100 disabled:text-neutral-400', isSearchMode && 'ml-2 max-w-[72%]'),
+        "aria-describedby": errorMessage ? `${props.id ?? 'input'}-error` : undefined,
+        "aria-invalid": !!errorMessage,
         ref: inputRef ?? innerInputRef,
         ...props
-      }), showClearButton && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        className: "-bottom-5 left-0 absolute prose-p3 text-semantic-danger",
+        id: `${props.id ?? 'input'}-error`,
+        role: "alert",
+        children: errorMessage
+      }), isSearchMode && hasValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
         type: "button",
         onClick: handleClear,
         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",

package/dist/components/input.js.map

@@ -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","hover","focus","active","unfocus","error","defaultVariants","Input","forwardRef","placeholder","onChange","onClear","showClearButton","onFocus","onBlur","inputRef","props","ref","internalValue","setInternalValue","useState","isFocused","setIsFocused","isActive","setIsActive","innerInputRef","useRef","currentValue","undefined","hasValue","length","currentState","handleChange","e","newValue","target","handleFocus","handleBlur","handleClear","preventDefault","stopPropagation","currentRef","current","inputClasses","cn","SearchIconSmall","type","onClick","_default"],"sources":["../../src/components/input.tsx"],"sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { forwardRef, 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  'desktop:bg-white! px-4 py-1.5 h-11 flex items-center rounded-full border border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600',\n  {\n    variants: {\n      state: {\n        default: 'border-transparent',\n        hover: 'border-neutral-600',\n        focus: 'border-neutral-600',\n        active: 'border-neutral-600',\n        unfocus: 'border-transparent',\n        error: 'border-red-600',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n    },\n  }\n)\n\nexport type InputProps = {\n  placeholder?: string\n  value?: string\n  onChange?: (value: string) => void\n  onClear?: () => void\n  showClearButton?: boolean\n  children?: React.ReactNode\n  inputRef?: React.RefObject<HTMLInputElement>\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'>\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      placeholder = '搜尋更多新聞、議題',\n      value,\n      onChange,\n      onClear,\n      showClearButton = true,\n      className,\n      onFocus,\n      onBlur,\n      inputRef,\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 = isFocused\n      ? 'focus'\n      : hasValue\n        ? isActive\n          ? 'active'\n          : 'unfocus'\n        : 'default'\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(inputVariants({ state: currentState }), className)\n\n    return (\n      <div className=\"gap-2 flex flex-col\">\n        <div className={inputClasses} ref={ref}>\n          <div className=\"text-neutral-600\">\n            <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=\"placeholder:font-medium ml-2 max-w-[72%] flex-1 flex-shrink-1 bg-transparent text-neutral-900 placeholder:text-neutral-400 focus:outline-none\"\n            ref={inputRef ?? innerInputRef}\n            {...props}\n          />\n\n          {showClearButton && 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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"}
+{"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","hover","focus","active","unfocus","error","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","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, 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 border-transparent bg-neutral-100 prose-p1 transition-colors duration-200 hover:border-neutral-600 desktop:bg-neutral-white!',\n  {\n    variants: {\n      state: {\n        default: 'border-transparent',\n        hover: 'border-neutral-600',\n        focus: 'border-neutral-600',\n        active: 'border-neutral-600',\n        unfocus: 'border-transparent',\n        error: 'border-semantic-danger hover:border-semantic-danger',\n      },\n      mode: {\n        default: 'rounded-[12px] border-neutral-400',\n        search: 'rounded-full',\n      },\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        mode: 'default',\n        className: 'border-semantic-danger',\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      ...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 = error\n      ? 'error'\n      : isFocused\n        ? 'focus'\n        : hasValue\n          ? isActive\n            ? 'active'\n            : 'unfocus'\n          : 'default'\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:bg-neutral-100 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            {...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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"}

package/dist/header/shared-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAwEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,2CAkEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}
+{"version":3,"file":"shared-components.d.ts","sourceRoot":"","sources":["../../src/header/shared-components.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AA2ExC,wBAAgB,QAAQ,CAAC,EAAE,WAAmB,EAAE,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,2CAgB1E;AAED,KAAK,uBAAuB,GACxB;IACE,IAAI,EAAE,SAAS,CAAA;IACf,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,GACD;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;CAC1B,CAAA;AAEL,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyEhE;AAED,wBAAgB,aAAa,CAAC,EAC5B,cAAsB,EACtB,IAAI,EACJ,iBAAiB,EACjB,YAAY,GACb,EAAE;IACD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,iBAAiB,EAAE,MAAM,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;CACrB,2CAkEA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,sBAAsB,EACtB,SAAS,GACV,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB,2CA4BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,sBAAsB,EACtB,KAAa,GACd,EAAE;IACD,sBAAsB,EAAE,MAAM,IAAI,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,2CAYA"}

package/dist/header/shared-components.js

@@ -128,7 +128,8 @@ function SearchInputSection(props) {
         className: "w-[99%]",
         inputRef: ref,
         onChange: setSearchValue,
-        value: searchValue
+        value: searchValue,
+        mode: "search"
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: searchDropdownVariants({

package/dist/header/shared-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_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","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","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 {\n  ClearIcon,\n  HamburgerIcon,\n  HamburgerIconSmall,\n  SearchIcon,\n  SettingsIcon,\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  useEffect(() => {\n    if (mode === 'inline') {\n      return\n    }\n    if (isSearchOpen) {\n      ref.current?.focus()\n      setIsFocused(true)\n      document.body.classList.add('no-scroll')\n      return\n    }\n    setIsFocused(false)\n    document.body.classList.remove('no-scroll')\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        />\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}: {\n  hideCtaButtons?: boolean\n  tags: string[]\n  searchPlaceholder: string\n  subscribeUrl: 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=\"/about#post\">投稿</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 mr-4 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      <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      >\n        <SettingsIcon />\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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"}
+{"version":3,"file":"shared-components.js","names":["Object","defineProperty","exports","value","ActionButtons","BottomNavigation","HamburgerButton","LogoLink","SearchInputSection","_classVarianceAuthority","require","_react","_components","_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","useEffect","current","focus","document","body","classList","add","remove","jsxs","onFocus","onBlur","role","method","action","undefined","Input","placeholder","name","title","inputRef","onChange","map","keyword","encodeURIComponent","hideCtaButtons","subscribeUrl","setIsSearchOpen","containerRef","buttonRef","handleClickOutside","event","containerElement","buttonElement","contains","target","addEventListener","removeEventListener","Button","variant","size","asChild","onClick","ClearIcon","SearchIcon","SettingsIcon","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 {\n  ClearIcon,\n  HamburgerIcon,\n  HamburgerIconSmall,\n  SearchIcon,\n  SettingsIcon,\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  useEffect(() => {\n    if (mode === 'inline') {\n      return\n    }\n    if (isSearchOpen) {\n      ref.current?.focus()\n      setIsFocused(true)\n      document.body.classList.add('no-scroll')\n      return\n    }\n    setIsFocused(false)\n    document.body.classList.remove('no-scroll')\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}: {\n  hideCtaButtons?: boolean\n  tags: string[]\n  searchPlaceholder: string\n  subscribeUrl: 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=\"/about#post\">投稿</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 mr-4 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      <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      >\n        <SettingsIcon />\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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"}

package/dist/styles.css

@@ -44,6 +44,9 @@
   --color-yellow-700: #926c10;
   --color-yellow-800: #705207;
 
+  /* Colors - Semantic Danger */
+  --color-semantic-danger: #c7000a;
+
   /* Typography - Font Families */
   --font-family-noto: 'Noto Sans TC', sans-serif;
 
@@ -149,6 +152,14 @@
     --paletteColor8: var(--color-neutral-white);
     --color: var(--paletteColor3);
   }
+
+  ::selection {
+    background-color: var(--color-neutral-400);
+  }
+
+  ::-moz-selection {
+    background-color: var(--color-neutral-400);
+  }
 }
 
 @layer utilities {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kids-reporter/routing-ui",
   "license": "MIT",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.7",
   "description": "Routing UI for Kids Reporter",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -18,15 +18,13 @@
     "build": "./scripts/build.sh",
     "lint": "eslint . --config ./eslint.config.mjs",
     "lint:check": "eslint . --config ./eslint.config.mjs",
-    "type-check": "tsc --noEmit",
-    "postinstall": "yarn build"
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
-    "next": "^14.2.33",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
@@ -50,5 +48,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tailwindcss": "^4.1.14"
-  }
+  },
+  "files": [
+    "dist"
+  ]
 }

package/.prettierignore

@@ -1,17 +0,0 @@
-# Build outputs
-dist/
-lib/
-.next/
-
-# Generated files
-*.tsbuildinfo
-
-# Cache
-.eslintcache
-
-# OS
-.DS_Store
-
-# Environment
-.env*.local
-.env

package/babel.config.cjs

@@ -1,31 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          node: '18',
-          browsers: ['> 1%', 'last 2 versions', 'not dead'],
-        },
-        modules: 'commonjs', // Build CommonJS modules
-      },
-    ],
-    [
-      '@babel/preset-react',
-      {
-        runtime: 'automatic',
-        development: process.env.NODE_ENV === 'development',
-        pragma: undefined, // Use automatic runtime
-        pragmaFrag: undefined, // Use automatic runtime
-      },
-    ],
-    [
-      '@babel/preset-typescript',
-      {
-        isTSX: true,
-        allExtensions: true,
-      },
-    ],
-  ],
-  plugins: ['@babel/plugin-transform-runtime'],
-}

package/eslint.config.mjs

@@ -1,56 +0,0 @@
-import globals from 'globals'
-
-import baseConfig, {
-  javascriptConfig,
-  typescriptConfig,
-} from '../../eslint.base.config.mjs'
-
-export default [
-  ...baseConfig,
-  // Override for routing-ui package - React/TypeScript focused
-  {
-    ...typescriptConfig,
-    files: ['src/**/*.{ts,tsx}'],
-    rules: {
-      ...typescriptConfig.rules,
-    },
-  },
-  {
-    ...javascriptConfig,
-    files: ['src/**/*.{js,jsx}'],
-    rules: {
-      ...javascriptConfig.rules,
-      // Tailwind CSS classname sorting rules
-      'no-restricted-syntax': [
-        'warn',
-        {
-          selector: 'JSXAttribute[name.name="className"]',
-          message:
-            'Tailwind CSS classes should be sorted. Use prettier-plugin-tailwindcss for automatic sorting.',
-        },
-        {
-          selector: 'JSXAttribute[name.name="class"]',
-          message:
-            'CSS classes should be sorted. Consider using a class sorting tool.',
-        },
-      ],
-    },
-  },
-  {
-    files: ['**/*.config.{js,mjs,cjs}'],
-    languageOptions: {
-      ecmaVersion: 2022,
-      sourceType: 'module',
-      globals: {
-        ...globals.node,
-        ...globals.es2022,
-      },
-    },
-    rules: {
-      'no-undef': 'error',
-    },
-  },
-  {
-    ignores: ['node_modules/**', 'dist/**', 'build/**'],
-  },
-]

package/prettier.config.mjs

@@ -1,13 +0,0 @@
-/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-export default {
-  printWidth: 80,
-  tabWidth: 2,
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'es5',
-  bracketSpacing: true,
-  arrowParens: 'always',
-  plugins: ['prettier-plugin-tailwindcss'],
-  tailwindStylesheet: './src/styles.css',
-  tailwindFunctions: ['clsx', 'cn', 'cva'],
-}

package/scripts/build.sh

@@ -1,18 +0,0 @@
-#!/bin/bash
-
-set -e
-
-echo "Cleaning dist directory..."
-rm -rf ./dist
-mkdir -p ./dist
-
-echo "Building CJS version..."
-npx babel src --out-dir dist --extensions ".ts,.tsx" --source-maps
-
-echo "Copying CSS file..."
-cp ./src/styles.css ./dist/styles.css
-
-echo "Generating TypeScript declarations..."
-npx tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist
-
-echo "Build completed successfully!"

package/src/components/button.tsx

@@ -1,108 +0,0 @@
-'use client'
-
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import React from 'react'
-
-import { cn } from '../utils/cn'
-
-const buttonVariants = cva(
-  // Base styles
-  'font-noto gap-2.5 font-bold inline-flex cursor-pointer items-center justify-center rounded-full transition-colors duration-200',
-  {
-    variants: {
-      variant: {
-        primary: [
-          'text-white border-0 bg-red-400',
-          'hover:bg-red-500',
-          'active:bg-red-600',
-          'disabled:text-white disabled:cursor-default disabled:bg-neutral-400',
-        ],
-        secondary: [
-          'bg-white text-gray-900 border-2 border-red-400',
-          'hover:text-white hover:border-red-500 hover:bg-red-500',
-          'active:text-white active:border-red-600 active:bg-red-600',
-          'disabled:bg-white disabled:cursor-default disabled:border-neutral-400 disabled:text-neutral-400',
-        ],
-      },
-      size: {
-        44: 'h-11 px-5 py-2 text-base', // 44px height, 16px font size
-        36: 'h-9 px-4 py-2 text-sm', // 36px height, 14px font size
-        32: 'h-8 px-3 py-1 text-sm', // 32px height, 14px font size
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 44,
-    },
-  }
-)
-
-// Loading spinner icon component
-const LoadingSpinner = ({ size = 20 }: { size?: number }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 25 24"
-    fill="none"
-    className="animate-spin"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      opacity="0.5"
-      d="M12.5 2C10.5222 2 8.58879 2.58649 6.9443 3.6853C5.29981 4.78412 4.01809 6.3459 3.26121 8.17317C2.50433 10.0004 2.3063 12.0111 2.69215 13.9509C3.078 15.8907 4.03041 17.6725 5.42894 19.0711C6.82746 20.4696 8.60929 21.422 10.5491 21.8079C12.4889 22.1937 14.4996 21.9957 16.3268 21.2388C18.1541 20.4819 19.7159 19.2002 20.8147 17.5557C21.9135 15.9112 22.5 13.9778 22.5 12C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2363 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2ZM12.5 20C10.9178 20 9.37104 19.5308 8.05544 18.6518C6.73985 17.7727 5.71447 16.5233 5.10897 15.0615C4.50347 13.5997 4.34504 11.9911 4.65372 10.4393C4.9624 8.88743 5.72433 7.46197 6.84315 6.34315C7.96197 5.22433 9.38743 4.4624 10.9393 4.15372C12.4911 3.84504 14.0997 4.00346 15.5615 4.60896C17.0233 5.21447 18.2727 6.23984 19.1518 7.55544C20.0308 8.87103 20.5 10.4177 20.5 12C20.5 14.1217 19.6572 16.1566 18.1569 17.6569C16.6566 19.1571 14.6217 20 12.5 20Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5 12H22.5C22.5 10.6868 22.2413 9.38642 21.7388 8.17317C21.2362 6.95991 20.4997 5.85752 19.5711 4.92893C18.6425 4.00035 17.5401 3.26375 16.3268 2.7612C15.1136 2.25866 13.8132 2 12.5 2V4C14.6217 4 16.6566 4.84285 18.1569 6.34315C19.6571 7.84344 20.5 9.87827 20.5 12Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-export type ButtonProps = {
-  isLoading?: boolean
-  disabled?: boolean
-  asChild?: boolean
-  children: React.ReactNode
-} & VariantProps<typeof buttonVariants> &
-  React.ButtonHTMLAttributes<HTMLButtonElement>
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      isLoading = false,
-      disabled = false,
-      asChild = false,
-      size,
-      variant,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isDisabled = disabled || isLoading
-
-    const buttonClasses = cn(buttonVariants({ variant, size }), className)
-
-    const Comp = asChild ? Slot : 'button'
-
-    return (
-      <Comp
-        ref={ref}
-        className={buttonClasses}
-        disabled={isDisabled}
-        {...props}
-      >
-        {isLoading ? (
-          <LoadingSpinner size={size === 32 ? 16 : size === 36 ? 18 : 20} />
-        ) : (
-          children
-        )}
-      </Comp>
-    )
-  }
-)
-
-export default Button

package/src/components/index.tsx

@@ -1,2 +0,0 @@
-export { default as Button } from './button'
-export { default as Input } from './input'