@tipp/ui 2.3.6 → 2.3.7

package/dist/molecules/index.js

@@ -1,61 +1,61 @@
 import "../chunk-QDXZVPRR.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-4WJF7WXY.js";
+import "../chunk-JCG2AUFJ.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-L6FMK2ZK.js";
-import "../chunk-CTZQFO5H.js";
-import "../chunk-DSWR2Z7U.js";
-import "../chunk-2USHC4PH.js";
-import "../chunk-UAXYYUVG.js";
-import "../chunk-66XH3MAB.js";
+} from "../chunk-TYBX7Q7B.js";
+import "../chunk-6DR4EIVU.js";
+import "../chunk-E72OTAC6.js";
+import "../chunk-KXCFAFL3.js";
+import "../chunk-2LRQWOIG.js";
+import "../chunk-CMBTJWVJ.js";
+import "../chunk-TNGEPJ3G.js";
 import "../chunk-CC5RCOSM.js";
-import "../chunk-7ADTM2PV.js";
+import "../chunk-CLFON5AH.js";
 import "../chunk-SDYFRI7L.js";
 import "../chunk-SAEPW5JF.js";
 import "../chunk-VK6INFSB.js";
-import "../chunk-H3X6UQVC.js";
+import "../chunk-4NNBXE2Q.js";
 import "../chunk-COKJ53M5.js";
 import "../chunk-VGNQAHMB.js";
-import "../chunk-GNTZY4DG.js";
 import "../chunk-GMKRNFH5.js";
 import "../chunk-QGKQ3IX7.js";
 import {
   CurriculumSidebar
-} from "../chunk-FV4BQOCL.js";
-import "../chunk-4HDV26QV.js";
-import "../chunk-4TST4UK5.js";
+} from "../chunk-IH6VDQ6C.js";
+import "../chunk-3SCBKVQQ.js";
 import "../chunk-WS7IOHVK.js";
 import "../chunk-KCC3DAOY.js";
 import "../chunk-MJMHPIYX.js";
+import "../chunk-4TST4UK5.js";
+import "../chunk-B6A7IIYJ.js";
 import {
   CurriculumSubNav
 } from "../chunk-WZRGAW43.js";
+import {
+  CurriculumProvider,
+  useCurriculumContext
+} from "../chunk-IYQJIEVM.js";
 import {
   CurriculumV2Layout
 } from "../chunk-K3Q4XLCN.js";
-import "../chunk-B6A7IIYJ.js";
 import {
   DatePickerButton
 } from "../chunk-XLTMDAE3.js";
 import {
   DatePicker
 } from "../chunk-7BLUAQBV.js";
-import {
-  ExpandTable,
-  createColumnHelper
-} from "../chunk-4WJF7WXY.js";
-import "../chunk-JCG2AUFJ.js";
-import {
-  CurriculumProvider,
-  useCurriculumContext
-} from "../chunk-IYQJIEVM.js";
 import "../chunk-JF7JAMOQ.js";
 import {
   Stepper
-} from "../chunk-M6ZYONSH.js";
+} from "../chunk-Q5Z4EHPC.js";
 import {
   TagSelector
-} from "../chunk-C2EZQALX.js";
+} from "../chunk-7IBUQ5XL.js";
 import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
@@ -67,7 +67,7 @@ import "../chunk-BXX3B3E4.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-NHNPMV5W.js";
+} from "../chunk-UMBRV35P.js";
 import {
   ForceRefresh
 } from "../chunk-EWFZXCMV.js";
@@ -76,7 +76,7 @@ import {
 } from "../chunk-5JQOU3IR.js";
 import {
   LearningPost
-} from "../chunk-F7JSPN5P.js";
+} from "../chunk-SACH3XVV.js";
 import "../chunk-7FKRQQYK.js";
 import {
   Navigation
@@ -96,49 +96,46 @@ import {
 } from "../chunk-OHNBVT52.js";
 import {
   DynamicFormField
-} from "../chunk-3JEVYSX3.js";
+} from "../chunk-N45T3WWG.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-QTQKJ4A2.js";
-import "../chunk-O2S7S5B4.js";
-import "../chunk-2OMSNCRH.js";
-import "../chunk-5ZITU5L7.js";
+import "../chunk-PB4O3U6O.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
-import "../chunk-MUPK4L3U.js";
+import "../chunk-2OMSNCRH.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-FR2GDOU2.js";
-import "../chunk-JIJLOKVN.js";
-import "../chunk-VG2DMJ2U.js";
-import "../chunk-5AVBYDPB.js";
+import "../chunk-5ZITU5L7.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
-import "../chunk-EGEQY3KT.js";
+import "../chunk-MUPK4L3U.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-DHZVOXFM.js";
+import "../chunk-JIJLOKVN.js";
+import "../chunk-VG2DMJ2U.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-W7X7KSJP.js";
+import "../chunk-VYCYVN3L.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-NFDQJVFA.js";
 import "../chunk-AH4A53SZ.js";
 import "../chunk-BESTU2AY.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.js";
-import "../chunk-B6XJN6EC.js";
-import "../chunk-RP2RGCAW.js";
-import "../chunk-W7X7KSJP.js";
-import "../chunk-VYCYVN3L.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-NFDQJVFA.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-K36TPMKL.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-RP2RGCAW.js";
 import "../chunk-R7IT4TCD.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -155,6 +152,9 @@ import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
 import "../chunk-EAXUQEO5.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-K36TPMKL.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   CurriculumBody,

package/dist/molecules/learning-post.js

@@ -1,10 +1,9 @@
 import {
   LearningPost
-} from "../chunk-F7JSPN5P.js";
+} from "../chunk-SACH3XVV.js";
 import "../chunk-7FKRQQYK.js";
 import "../chunk-EGEQY3KT.js";
 import "../chunk-BESTU2AY.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
@@ -12,6 +11,7 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-EAXUQEO5.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/stepper.js

@@ -1,7 +1,6 @@
 import {
   Stepper
-} from "../chunk-M6ZYONSH.js";
-import "../chunk-K36TPMKL.js";
+} from "../chunk-Q5Z4EHPC.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
@@ -20,6 +19,7 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
+import "../chunk-K36TPMKL.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,11 +1,9 @@
 import {
   TagSelector
-} from "../chunk-C2EZQALX.js";
+} from "../chunk-7IBUQ5XL.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
@@ -26,6 +24,8 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "private": false,
   "type": "module",
   "exports": {

package/src/context/dynamic-form-context.tsx

@@ -6,6 +6,7 @@ import type { DynamicFormFieldSchema } from '@/types/dynamic-form-schema-generat
 export interface DynamicFormContextValue {
   formik: FormikProps<Record<string, unknown>>;
   fields: DynamicFormFieldSchema[];
+  readonly: boolean;
   getFieldValue: (name: string) => unknown;
   getFieldError: (name: string) => string | undefined;
   getFieldTouched: (name: string) => boolean;
@@ -20,16 +21,19 @@ interface DynamicFormProviderProps {
   children: React.ReactNode;
   fields: DynamicFormFieldSchema[];
   formik: FormikProps<Record<string, unknown>>;
+  readonly?: boolean;
 }
 
 export function DynamicFormProvider({
   children,
   fields,
   formik,
+  readonly = false,
 }: DynamicFormProviderProps): React.ReactElement {
   const contextValue: DynamicFormContextValue = {
     formik,
     fields,
+    readonly,
     getFieldValue: (name: string): unknown => formik.values[name],
     getFieldError: (name: string): string | undefined => {
       const error = formik.errors[name];

package/src/molecules/dynamic-field.tsx

@@ -22,6 +22,7 @@ export function DynamicFormField({
     setFieldValue,
     handleChange,
     handleBlur,
+    readonly,
   } = useDynamicForm();
   const { name, type } = field;
 
@@ -33,9 +34,10 @@ export function DynamicFormField({
   const commonProps = {
     name,
     value: String(value || ''),
-    onChange: handleChange,
-    onBlur: handleBlur,
+    onChange: readonly ? undefined : handleChange,
+    onBlur: readonly ? undefined : handleBlur,
     error: hasError,
+    disabled: readonly,
   };
 
   switch (type) {
@@ -64,10 +66,11 @@ export function DynamicFormField({
     case 'dropdown':
       return (
         <Select.Root
-          onValueChange={(newValue: string) => {
+          onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           value={value as string}
+          disabled={readonly}
         >
           <Select.Trigger placeholder={field.placeholder} />
           <Select.Content>
@@ -83,11 +86,12 @@ export function DynamicFormField({
     case 'choice':
       return (
         <RadioGroup.Root
-          onValueChange={(newValue: string) => {
+          onValueChange={readonly ? undefined : (newValue: string) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={String(value || '')}
+          disabled={readonly}
         >
           {field.options.map((option) => (
             <RadioGroup.Item key={option.value} value={String(option.value)}>
@@ -100,11 +104,12 @@ export function DynamicFormField({
     case 'choices':
       return (
         <CheckboxGroup.Root
-          onValueChange={(newValue: string[]) => {
+          onValueChange={readonly ? undefined : (newValue: string[]) => {
             void setFieldValue(name, newValue);
           }}
           orientation={field.orientation}
           value={Array.isArray(value) ? value.map(String) : []}
+          disabled={readonly}
         >
           {field.options.map((option) => (
             <CheckboxGroup.Item key={option.value} value={String(option.value)}>
@@ -119,9 +124,10 @@ export function DynamicFormField({
         <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
           <Checkbox
             checked={Boolean(value)}
-            onCheckedChange={(checked: boolean) => {
+            onCheckedChange={readonly ? undefined : (checked: boolean) => {
               void setFieldValue(name, checked);
             }}
+            disabled={readonly}
           />
           {field.description ? (
             <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>

package/src/molecules/dynamic-form.tsx

@@ -19,6 +19,7 @@ export interface DynamicFormProps {
   initialValues?: Record<string, unknown>;
   onSubmit: (values: Record<string, unknown>) => void | Promise<void>;
   children: React.ReactNode;
+  readonly?: boolean;
 }
 
 /**
@@ -54,6 +55,7 @@ function DynamicFormRoot({
   initialValues = {},
   onSubmit,
   children,
+  readonly = false,
 }: DynamicFormProps): React.ReactElement {
   const validationSchema = useMemo(() => {
     const schema: Record<string, Yup.Schema<unknown>> = {};
@@ -119,7 +121,7 @@ function DynamicFormRoot({
   }, [formik.submitCount, formik.errors, fields]);
 
   return (
-    <DynamicFormProvider fields={fields} formik={formik}>
+    <DynamicFormProvider fields={fields} formik={formik} readonly={readonly}>
       {children}
     </DynamicFormProvider>
   );
@@ -133,14 +135,14 @@ function DynamicFormFieldList({
   fields: fieldsProp,
   labelVariant,
 }: DynamicFormFieldListProps): React.ReactElement {
-  const { formik, fields: fieldsFromContext } = useDynamicForm();
+  const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
   const fields = fieldsProp || fieldsFromContext;
 
   return (
     <>
       {fields.map((field) => {
         const errorMessage =
-          formik.touched[field.name] && formik.errors[field.name]
+          !readonly && formik.touched[field.name] && formik.errors[field.name]
             ? String(formik.errors[field.name])
             : undefined;