@kanda-libs/ks-component-ts 0.2.291 → 0.2.293

package/dist/library.css

@@ -2273,6 +2273,16 @@ input[type="number"]::-webkit-inner-spin-button,
   border-color: rgb(247 249 252 / var(--tw-border-opacity));
 }
 
+.border-orange-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 125 50 / var(--tw-border-opacity));
+}
+
+.border-orange-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 240 232 / var(--tw-border-opacity));
+}
+
 .border-neutral-500 {
   --tw-border-opacity: 1;
   border-color: rgb(156 173 196 / var(--tw-border-opacity));
@@ -2366,6 +2376,11 @@ input[type="number"]::-webkit-inner-spin-button,
   background-color: rgb(229 245 255 / var(--tw-bg-opacity));
 }
 
+.bg-orange-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 240 232 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(13 27 46 / var(--tw-bg-opacity));
@@ -2593,11 +2608,6 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-right: 32px;
 }
 
-.px-5 {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .py-2\.5 {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -2623,6 +2633,11 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-right: 10px;
 }
 
+.px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
 .px-6 {
   padding-left: 24px;
   padding-right: 24px;
@@ -4116,6 +4131,11 @@ input[type="range"]::-webkit-slider-thumb {
   color: rgb(156 173 196 / var(--tw-text-opacity));
 }
 
+.first\:text-orange-200:first-child {
+  --tw-text-opacity: 1;
+  color: rgb(235 125 50 / var(--tw-text-opacity));
+}
+
 .last\:right-0:last-child {
   right: 0;
 }
@@ -4159,6 +4179,11 @@ input[type="range"]::-webkit-slider-thumb {
   color: rgb(156 173 196 / var(--tw-text-opacity));
 }
 
+.last\:text-orange-200:last-child {
+  --tw-text-opacity: 1;
+  color: rgb(235 125 50 / var(--tw-text-opacity));
+}
+
 .checked\:translate-x-5:checked {
   --tw-translate-x: 20px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.2.291",
+  "version": "0.2.293",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

package/src/field/components/RadioSelect/RadioSelectUncontrolled/Option/constants.ts

@@ -1,4 +1,3 @@
-import { string } from "io-ts";
 import { StringIndexedObject } from "~/types";
 
 interface VariantProps {
@@ -9,10 +8,22 @@ interface VariantProps {
   selected: {
     option: string;
     container: string;
+    icon?: string;
   };
   notSelected: {
     option: string;
     container: string;
+    icon?: string;
+  };
+  warning: {
+    option: string;
+    container: string;
+    icon?: string;
+  };
+  warningNotSelected: {
+    option: string;
+    container: string;
+    icon?: string;
   };
   disabled?: {
     option: string;
@@ -26,6 +37,21 @@ interface VariantProps {
   };
 }
 
+// TODO: Make variant specific
+const warning = {
+  option: "bg-orange-100 cursor-pointer",
+  container:
+    "rounded bg-orange-100 flex flex-full w-full px-4 py-2 text-orange-200 border border-orange-200",
+  icon: "text-orange-200",
+};
+
+const warningNotSelected = {
+  option: "bg-orange-100 border-orange-100 cursor-pointer",
+  container:
+    "rounded bg-orange-100 flex flex-full w-full px-4 py-2 text-orange-200 border border-orange-100",
+  icon: "text-orange-200",
+};
+
 export const VARIANTS: StringIndexedObject<VariantProps> = {
   default: {
     span: "ml-3 select-none w-full text-style-f my-auto",
@@ -39,6 +65,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       option: "overflow-hidden border border-neutral-300 cursor-pointer",
       container: "bg-neutral-000 flex flex-full w-full p-4 text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl mt-2 last:mb-2",
     },
@@ -60,6 +88,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       container:
         "bg-neutral-000 flex flex-full w-full px-4 py-3.5 text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl mt-2 last:mb-2",
     },
@@ -81,6 +111,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
         "overflow-hidden border-b border-neutral-100 cursor-pointer last:border-0",
       container: "bg-neutral-000 flex flex-full w-full p-4 text-neutral-700",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl mt-2 last:mb-2",
     },
@@ -101,6 +133,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       option: "border-neutral-000 overflow-hidden cursor-pointer",
       container: "bg-neutral-000 flex flex-full w-full py-2 text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl mt-2 last:mb-2",
     },
@@ -121,6 +155,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       option: "border-neutral-000 overflow-hidden cursor-pointer",
       container: "bg-neutral-000 flex flex-full w-full text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl mt-2 last:mb-2",
     },
@@ -142,6 +178,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       container:
         "bg-neutral-000 px-3 py-2.25 flex flex-full w-full text-neutral-900 rounded hover:bg-neutral-100",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1 rounded-xl first:mt-2 last:mb-2",
     },
@@ -165,6 +203,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       container:
         "bg-neutral-000 flex flex-full w-full p-1.5 text-neutral-600 hover:text-turquoise-300",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1",
     },
@@ -187,6 +227,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
         "overflow-hidden border border-neutral-300 cursor-pointer border-l-0 first:border-l",
       container: "bg-neutral-000 flex flex-full w-full p-2.5 text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "flex flex-1",
     },
@@ -195,7 +237,7 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
     },
   },
   streamline: {
-    span: "select-none w-full text-14-22-em whitespace-nowrap my-auto text-center",
+    span: "select-none w-full text-14-22-em whitespace-nowrap my-auto text-center flex flex-row items-center justify-center gap-x-2",
     skeleton: "w-full",
     skeletonWrapper: "w-10 -mt-0.5",
     handleContainer: "hidden",
@@ -209,6 +251,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       container:
         "rounded bg-neutral-000 flex flex-full w-full px-4 py-2 text-neutral-600",
     },
+    warning,
+    warningNotSelected,
     disabled: {
       option: "border border-neutral-300 cursor-not-allowed",
       container:
@@ -236,6 +280,8 @@ export const VARIANTS: StringIndexedObject<VariantProps> = {
       container:
         "rounded bg-neutral-000 flex flex-full w-full px-2.5 py-2.25 md:py-1.5 text-neutral-900",
     },
+    warning,
+    warningNotSelected,
     multiline: {
       option: "",
     },
@@ -257,6 +303,8 @@ export const CLASS_NAMES_MULTIPLE: VariantProps = {
     option: "overflow-hidden border border-neutral-300 cursor-pointer",
     container: "bg-neutral-000 flex flex-full w-full p-4 flex-row-reverse",
   },
+  warning,
+  warningNotSelected,
   multiline: {
     option: "flex flex-1 rounded-xl mt-2 last:mb-2",
   },

package/src/field/components/RadioSelect/RadioSelectUncontrolled/Option/index.tsx

@@ -3,6 +3,7 @@ import { RadioSelectVariant } from "~/field/components/RadioSelect/types";
 import { FieldRegisterMethod } from "~/field/types";
 import useOption from "./useOption";
 import Skeleton from "react-loading-skeleton";
+import { Icon } from "@kanda-libs/ks-design-library";
 
 export interface Props {
   /**
@@ -37,6 +38,10 @@ export interface Props {
    * Display options wrap
    */
   wrap?: boolean;
+  /**
+   * Adds a border to options when wrapping
+   */
+  wrapBorder?: boolean;
   /**
    * Display variant
    */
@@ -49,6 +54,22 @@ export interface Props {
    * Event handler for clicking the option
    */
   onClick?: () => void;
+  /**
+   * Whether or not to show the option in a warning state
+   */
+  warning?: boolean;
+  /**
+   * Icon to display next to the option
+   */
+  icon?: string;
+  /**
+   * Class name for the option
+   */
+  className?: string;
+  /**
+   * Footer content that is shown outside of the option
+   */
+  footer?: JSX.Element;
 }
 
 const Option: FunctionComponent<Props> = function ({
@@ -61,8 +82,13 @@ const Option: FunctionComponent<Props> = function ({
   isLoading,
   inline = false,
   wrap = false,
+  wrapBorder = true,
   register,
   onClick = () => {},
+  warning = false,
+  className = "",
+  footer,
+  icon,
 }) {
   const { id, classNames, handleProps, Handle } = useOption(
     multiple,
@@ -71,38 +97,53 @@ const Option: FunctionComponent<Props> = function ({
     variant,
     inline,
     wrap,
+    wrapBorder,
     register,
-    disabled
+    disabled,
+    warning,
+    className
   );
 
   return (
-    <label htmlFor={id} key={value} className={classNames.option as string}>
-      <div className={classNames.container as string}>
-        <div
-          className={classNames.handleContainer as string}
-          onClick={() => {
-            onClick();
-          }}
-        >
-          <Handle
-            id={id}
-            {...handleProps}
-            value={value}
-            isLoading={isLoading}
-            disabled={disabled}
-          />
-        </div>
-        {isLoading ? (
-          <div className={classNames.skeletonWrapper as string}>
-            <div className={classNames.skeleton as string}>
-              <Skeleton />
-            </div>
+    <div className="flex flex-col items-start justify-start">
+      <label htmlFor={id} key={value} className={classNames.option as string}>
+        <div className={classNames.container as string}>
+          <div
+            className={classNames.handleContainer as string}
+            onClick={() => {
+              onClick();
+            }}
+          >
+            <Handle
+              id={id}
+              {...handleProps}
+              value={value}
+              isLoading={isLoading}
+              disabled={disabled}
+            />
           </div>
-        ) : (
-          <span className={classNames.span as string}>{name}</span>
-        )}
-      </div>
-    </label>
+          {isLoading ? (
+            <div className={classNames.skeletonWrapper as string}>
+              <div className={classNames.skeleton as string}>
+                <Skeleton />
+              </div>
+            </div>
+          ) : (
+            <span className={classNames.span as string}>
+              {icon && (
+                <Icon
+                  icon={icon}
+                  size={12}
+                  className={classNames.icon as string}
+                />
+              )}
+              {name}
+            </span>
+          )}
+        </div>
+      </label>
+      {footer}
+    </div>
   );
 };
 

package/src/field/components/RadioSelect/RadioSelectUncontrolled/Option/useOption.ts

@@ -27,8 +27,11 @@ export default function useOption(
   variantName: RadioSelectVariant,
   inline: boolean,
   wrap: boolean,
+  wrapBorder: boolean,
   register: FieldRegisterMethod | null = null,
-  disabled?: boolean
+  disabled?: boolean,
+  warning?: boolean,
+  className: string = ""
 ): Hook {
   const { skeletonClasses } = useFormTheme();
 
@@ -53,12 +56,16 @@ export default function useOption(
 
   const optionFlex = inline ? ".inline.option" : ".multiline.option";
 
-  const selectedPrefix = isSelected ? "selected" : "notSelected";
+  const defaultSelectedPrefix = isSelected ? "selected" : "notSelected";
+  const warningPrefix = isSelected ? "warning" : "warningNotSelected";
+
+  const selectedPrefix = warning ? warningPrefix : defaultSelectedPrefix;
 
   const classNames = useClasses(variant, {
     option: [
+      className,
       optionFlex,
-      wrap && "mt-2 ml-2",
+      wrap && wrapBorder && "mt-2 ml-2",
       disabled && variant?.disabled?.option
         ? `.disabled.option`
         : `.${selectedPrefix}.option`,
@@ -73,6 +80,8 @@ export default function useOption(
     skeleton: [
       variant?.skeleton ? `.${selectedPrefix}.skeleton` : skeletonClasses,
     ],
+    icon: [variant?.[selectedPrefix]?.icon],
+    optionWrapper: "flex flex-col items-start justify-start",
   });
 
   /**

package/src/field/components/RadioSelect/RadioSelectUncontrolled/constants.ts

@@ -8,7 +8,7 @@ export const CLASS_NAMES = {
     optionWrapper: "flex flex-1",
   },
   wrap: {
-    container: "w-full flex flex-row flex-wrap -mt-2 -ml-2",
+    container: "w-full flex flex-row flex-wrap -mt-2 -ml-2 gap-x-2",
     optionWrapper: "flex",
   },
 };

package/src/field/components/RadioSelect/RadioSelectUncontrolled/index.tsx

@@ -6,8 +6,21 @@ import Option from "./Option";
 
 const RadioSelectUncontrolled: FunctionComponent<
   DefaultFormFieldProps<RadioSelectUncontrolledProps>
-> = function ({ name, inline = false, wrap = false, options, ...restProps }) {
-  const classNames = useRadioSelectUncontrolledClassNames(inline, wrap);
+> = function ({
+  name,
+  inline = false,
+  wrap = false,
+  wrapBorder = true,
+  options,
+  className,
+  ...restProps
+}) {
+  const classNames = useRadioSelectUncontrolledClassNames(
+    inline,
+    wrap,
+    className
+  );
+
   return (
     <div className={classNames.container}>
       {options?.map((option) => (
@@ -17,8 +30,13 @@ const RadioSelectUncontrolled: FunctionComponent<
           name={option.name}
           inline={inline}
           wrap={wrap}
+          wrapBorder={wrapBorder}
           key={option.value}
           disabled={option?.disabled || false}
+          warning={option.warning || false}
+          icon={option.icon}
+          className={option.className}
+          footer={option.footer}
           {...restProps}
         />
       ))}

package/src/field/components/RadioSelect/RadioSelectUncontrolled/useRadioSelectUncontrolledClassNames.ts

@@ -2,10 +2,12 @@ import { useMemo } from "react";
 
 import { CLASS_NAMES } from "./constants";
 import { type StringIndexedObject } from "~/types";
+import clsx from "clsx";
 
 export default function useRadioSelectUncontrolledClassNames(
   inline: boolean,
-  wrap: boolean
+  wrap: boolean,
+  className?: string
 ): StringIndexedObject<string> {
   const classNames = useMemo(() => {
     if (wrap) return CLASS_NAMES.wrap;
@@ -13,5 +15,5 @@ export default function useRadioSelectUncontrolledClassNames(
     return CLASS_NAMES.multiline;
   }, [inline, wrap]);
 
-  return classNames;
+  return { ...classNames, container: clsx(classNames.container, className) };
 }

package/src/field/components/RadioSelect/types.d.ts

@@ -16,7 +16,9 @@ export interface RadioSelectUncontrolledProps {
   multiple?: boolean;
   inline?: boolean;
   wrap?: boolean;
+  wrapBorder?: boolean;
   variant?: RadioSelectVariant;
   options?: SelectOption[];
   onClick?: () => void;
+  className?: string;
 }

package/src/field/components/RangeInput/RangeInputUncontrolled.tsx

@@ -11,6 +11,7 @@ export interface RangeInputUncontrolledProps
   steps?: string;
   formatter?: (value: string) => string;
   prefix?: string;
+  highlightLabel?: "min" | "max";
   suffix?: string;
 }
 
@@ -28,10 +29,21 @@ const RangeInputUncontrolled: FunctionComponent<
   prefix = "",
   suffix = "",
   name = "",
+  highlightLabel,
   ...restProps
 }) {
   const { ref, inputProps, minLabel, maxLabel, currentLabel, classNames } =
-    useRangeInputProps(name, min, max, steps, formatter, prefix, suffix, error);
+    useRangeInputProps(
+      name,
+      min,
+      max,
+      steps,
+      formatter,
+      prefix,
+      suffix,
+      error,
+      highlightLabel
+    );
 
   return (
     <div className={classNames.container}>
@@ -61,11 +73,11 @@ const RangeInputUncontrolled: FunctionComponent<
               <div className={classNames.cap} />
             </div>
             <div className={classNames.labels}>
-              <p className={classNames.lowerLabel}>{minLabel}</p>
+              <p className={classNames.minLowerLabel}>{minLabel}</p>
               {currentLabel && (
                 <p className={classNames.lowerLabel}>{currentLabel}</p>
               )}
-              <p className={classNames.lowerLabel}>{maxLabel}</p>
+              <p className={classNames.maxLowerLabel}>{maxLabel}</p>
             </div>
           </>
         }

package/src/field/components/RangeInput/constants.ts

@@ -2,13 +2,15 @@ export const BG_COLOR =
   "linear-gradient(to right, transparent 10px, #1cb69c 10px, #1cb69c $PCT%, #e0e7f0 $PCT%, #e0e7f0 calc(100% - 10px), transparent calc(100% - 10px))";
 
 export const CLASS_NAMES = {
-  container: "flex flex-col w-full px-5 py-4 bg-neutral-100 rounded-lg border",
+  container: "flex flex-col w-full",
   skeletonWrapper: "flex w-full",
   skeletonContainer: "w-full",
   labels: "flex flex-row justify-between first:mb-1 last:mt-1",
   upperLabel: "text-10-17-em-up text-green-600",
   lowerLabel:
     "text-12-18-em text-green-600 first:text-neutral-500 last:text-neutral-500 w-20 min-w-20 text-center first:text-left last:text-right",
+  highlightedLowerLabel:
+    "text-12-18-em text-green-600 first:text-orange-200 last:text-orange-200 w-20 min-w-20 text-center first:text-left last:text-right",
   rangeWrapper: "flex flex-row relative",
   cap: "w-2.5 h-2.5 bg-green-600 rounded-full border border-neutral-000 absolute z-0 top-[5px] first:left-0 last:right-0",
 };

package/src/field/components/RangeInput/useRangeInputProps.ts

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { BG_COLOR, CLASS_NAMES } from "./constants";
 
 import { ErrorMessage } from "~/field/types";
+import { RangeInputUncontrolledProps } from "./RangeInputUncontrolled";
 
 interface RangeClassNames {
   container: string;
@@ -14,6 +15,8 @@ interface RangeClassNames {
   upperLabel: string;
   lowerLabel: string;
   rangeWrapper: string;
+  minLowerLabel: string;
+  maxLowerLabel: string;
   cap: string;
 }
 
@@ -40,7 +43,8 @@ export default function useRangeInputProps(
   formatter: (input: string) => string,
   prefix: string,
   suffix: string,
-  error?: string | ErrorMessage
+  error?: string | ErrorMessage,
+  highlightLabel?: RangeInputUncontrolledProps["highlightLabel"]
 ): Hook {
   const value = useWatch({ name });
 
@@ -70,6 +74,14 @@ export default function useRangeInputProps(
       CLASS_NAMES.container,
       error ? "border-red-200" : "border-neutral-100"
     ),
+    minLowerLabel: clsx(
+      CLASS_NAMES.lowerLabel,
+      highlightLabel === "min" && CLASS_NAMES.highlightedLowerLabel
+    ),
+    maxLowerLabel: clsx(
+      CLASS_NAMES.lowerLabel,
+      highlightLabel === "max" && CLASS_NAMES.highlightedLowerLabel
+    ),
   };
 
   useEffect(() => {

package/src/field/components/Select/types.d.ts

@@ -5,6 +5,10 @@ export interface SelectOption {
   name: string;
   value: string;
   disabled?: boolean;
+  warning?: boolean;
+  icon?: string;
+  className?: string;
+  footer?: JSX.Element;
 }
 
 export interface SelectUncontrolledProps {