npm - @kids-reporter/routing-ui - Versions diffs - 0.1.0-alpha.7 → 0.1.1 - Mend

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

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.

Files changed (4) hide show

package/dist/components/input.d.ts.map +1 -1
package/dist/components/input.js +42 -11
package/dist/components/input.js.map +1 -1
package/package.json +1 -1

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AA4FA,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 CHANGED Viewed

@@ -35,25 +35,48 @@ const CloseIcon = ({
 });
 const inputVariants = (0, _classVarianceAuthority.cva)(
 // Base styles
-'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!', {
+'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', {
   variants: {
     state: {
       default: 'border-transparent',
-      hover: 'border-neutral-600',
-      focus: 'border-neutral-600',
-      active: 'border-neutral-600',
-      unfocus: 'border-transparent',
-      error: 'border-semantic-danger hover:border-semantic-danger'
+      focus: '',
+      active: '',
+      error: '',
+      disabled: 'bg-neutral-100 hover:border-neutral-400 desktop:bg-neutral-100'
     },
     mode: {
-      default: 'rounded-[12px] border-neutral-400',
-      search: 'rounded-full'
+      default: 'rounded-[12px] border-neutral-400 bg-neutral-100',
+      search: 'rounded-full border-transparent desktop:border-neutral-600'
     }
   },
   compoundVariants: [{
     state: 'error',
     mode: 'default',
-    className: 'border-semantic-danger'
+    className: 'border-semantic-danger hover:border-semantic-danger'
+  }, {
+    state: 'default',
+    mode: 'default',
+    className: 'border-neutral-400'
+  }, {
+    state: 'focus',
+    mode: 'default',
+    className: 'border-neutral-600'
+  }, {
+    state: 'active',
+    mode: 'default',
+    className: 'border-neutral-600'
+  }, {
+    state: 'default',
+    mode: 'search',
+    className: 'bg-neutral-100'
+  }, {
+    state: 'focus',
+    mode: 'search',
+    className: 'border-neutral-600'
+  }, {
+    state: 'active',
+    mode: 'search',
+    className: 'border-neutral-600'
   }],
   defaultVariants: {
     state: 'default',
@@ -72,6 +95,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   error,
   errorMessage,
   mode = 'default',
+  disabled,
   ...props
 }, ref) => {
   const [internalValue, setInternalValue] = (0, _react.useState)('');
@@ -82,7 +106,13 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   const hasValue = currentValue.length > 0;
   // Determine current state
-  const currentState = error ? 'error' : isFocused ? 'focus' : hasValue ? isActive ? 'active' : 'unfocus' : 'default';
+  const currentState = (0, _react.useMemo)(() => {
+    if (error) return 'error';
+    if (disabled) return 'disabled';
+    if (isFocused) return 'focus';
+    if (hasValue) return isActive ? 'active' : 'default';
+    return 'default';
+  }, [error, disabled, isFocused, hasValue, isActive]);
   const handleChange = e => {
     const newValue = e.target.value;
     if (onChange) {
@@ -140,10 +170,11 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
         onFocus: handleFocus,
         onBlur: handleBlur,
         placeholder: placeholder,
-        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%]'),
+        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:text-neutral-400', isSearchMode && 'ml-2 max-w-[72%]'),
         "aria-describedby": errorMessage ? `${props.id ?? 'input'}-error` : undefined,
         "aria-invalid": !!errorMessage,
         ref: inputRef ?? innerInputRef,
+        disabled: disabled,
         ...props
       }), errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         className: "-bottom-5 left-0 absolute prose-p3 text-semantic-danger",

package/dist/components/input.js.map CHANGED Viewed

	@@ -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","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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"}
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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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@kids-reporter/routing-ui",
   "license": "MIT",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.1",
   "description": "Routing UI for Kids Reporter",
   "main": "./dist/index.js",
   "module": "./dist/index.js",