@kanda-libs/ks-component-ts 0.2.290 → 0.2.292

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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.2.290",
+  "version": "0.2.292",
   "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 {
   /**
@@ -49,6 +50,14 @@ 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;
 }
 
 const Option: FunctionComponent<Props> = function ({
@@ -63,6 +72,8 @@ const Option: FunctionComponent<Props> = function ({
   wrap = false,
   register,
   onClick = () => {},
+  warning = false,
+  icon,
 }) {
   const { id, classNames, handleProps, Handle } = useOption(
     multiple,
@@ -72,7 +83,8 @@ const Option: FunctionComponent<Props> = function ({
     inline,
     wrap,
     register,
-    disabled
+    disabled,
+    warning
   );
 
   return (
@@ -99,7 +111,16 @@ const Option: FunctionComponent<Props> = function ({
             </div>
           </div>
         ) : (
-          <span className={classNames.span as string}>{name}</span>
+          <span className={classNames.span as string}>
+            {icon && (
+              <Icon
+                icon={icon}
+                size={12}
+                className={classNames.icon as string}
+              />
+            )}
+            {name}
+          </span>
         )}
       </div>
     </label>

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

@@ -28,7 +28,8 @@ export default function useOption(
   inline: boolean,
   wrap: boolean,
   register: FieldRegisterMethod | null = null,
-  disabled?: boolean
+  disabled?: boolean,
+  warning?: boolean
 ): Hook {
   const { skeletonClasses } = useFormTheme();
 
@@ -53,7 +54,10 @@ 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: [
@@ -73,6 +77,7 @@ export default function useOption(
     skeleton: [
       variant?.skeleton ? `.${selectedPrefix}.skeleton` : skeletonClasses,
     ],
+    icon: [variant?.[selectedPrefix]?.icon],
   });
 
   /**

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

@@ -8,6 +8,7 @@ const RadioSelectUncontrolled: FunctionComponent<
   DefaultFormFieldProps<RadioSelectUncontrolledProps>
 > = function ({ name, inline = false, wrap = false, options, ...restProps }) {
   const classNames = useRadioSelectUncontrolledClassNames(inline, wrap);
+
   return (
     <div className={classNames.container}>
       {options?.map((option) => (
@@ -19,6 +20,8 @@ const RadioSelectUncontrolled: FunctionComponent<
           wrap={wrap}
           key={option.value}
           disabled={option?.disabled || false}
+          warning={option.warning || false}
+          icon={option.icon}
           {...restProps}
         />
       ))}

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

@@ -2,7 +2,7 @@ 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",

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

@@ -5,6 +5,8 @@ export interface SelectOption {
   name: string;
   value: string;
   disabled?: boolean;
+  warning?: boolean;
+  icon?: string;
 }
 
 export interface SelectUncontrolledProps {