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

package/dist/library.css

@@ -4131,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;
 }
@@ -4174,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.292",
+  "version": "0.2.294",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

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

@@ -38,6 +38,10 @@ export interface Props {
    * Display options wrap
    */
   wrap?: boolean;
+  /**
+   * Adds a border to options when wrapping
+   */
+  wrapBorder?: boolean;
   /**
    * Display variant
    */
@@ -58,6 +62,14 @@ export interface Props {
    * 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 ({
@@ -70,9 +82,12 @@ 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(
@@ -82,48 +97,53 @@ const Option: FunctionComponent<Props> = function ({
     variant,
     inline,
     wrap,
+    wrapBorder,
     register,
     disabled,
-    warning
+    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}>
-            {icon && (
-              <Icon
-                icon={icon}
-                size={12}
-                className={classNames.icon 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,9 +27,11 @@ export default function useOption(
   variantName: RadioSelectVariant,
   inline: boolean,
   wrap: boolean,
+  wrapBorder: boolean,
   register: FieldRegisterMethod | null = null,
   disabled?: boolean,
-  warning?: boolean
+  warning?: boolean,
+  className: string = ""
 ): Hook {
   const { skeletonClasses } = useFormTheme();
 
@@ -61,8 +63,9 @@ export default function useOption(
 
   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`,
@@ -78,6 +81,7 @@ export default function useOption(
       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,20 @@ 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}>
@@ -18,10 +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

@@ -9,6 +9,8 @@ export const CLASS_NAMES = {
   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

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

package/src/generated/components/schemas/JobOverride.ts

@@ -1,16 +1,23 @@
 import * as t from "io-ts";
+import { CustomerOptions } from "./CustomerOptions";
 
-export const JobOverride = t.type({
-  action: t.union([
-    t.literal("mark_job_as_sat_note_delayed"),
-    t.literal("mark_job_as_pending"),
-    t.literal("mark_job_as_referred"),
-    t.literal("mark_job_as_action_customer"),
-    t.literal("mark_job_as_accepted"),
-    t.literal("mark_job_as_declined"),
-    t.literal("mark_job_as_cancelled"),
-  ]),
-});
+export const JobOverride = t.intersection([
+  t.type({
+    action: t.union([
+      t.literal("mark_job_as_sat_note_delayed"),
+      t.literal("mark_job_as_pending"),
+      t.literal("mark_job_as_referred"),
+      t.literal("mark_job_as_action_customer"),
+      t.literal("mark_job_as_accepted"),
+      t.literal("mark_job_as_declined"),
+      t.literal("mark_job_as_cancelled"),
+    ]),
+  }),
+  t.partial({
+    customer_options: CustomerOptions,
+    xref: t.string,
+  }),
+]);
 
 export interface JobOverride {
   action:
@@ -21,4 +28,6 @@ export interface JobOverride {
     | "mark_job_as_accepted"
     | "mark_job_as_declined"
     | "mark_job_as_cancelled";
+  customer_options?: CustomerOptions;
+  xref?: string;
 }