@tipp/ui 2.3.5 → 2.3.7

package/dist/molecules/index.js

@@ -1,61 +1,61 @@
 import "../chunk-QDXZVPRR.js";
 import {
-  DatePickerButton
-} from "../chunk-ZN5L462B.js";
-import {
-  DatePicker
-} from "../chunk-P7ZFJHY5.js";
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-4WJF7WXY.js";
+import "../chunk-JCG2AUFJ.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-ZADYUJIV.js";
-import "../chunk-SVFDAVBS.js";
-import "../chunk-K4JKFIA2.js";
-import "../chunk-5RDI5OIK.js";
-import "../chunk-JNYTH4BZ.js";
-import "../chunk-NJ56ZKR4.js";
-import "../chunk-AYAO3MO4.js";
-import "../chunk-BUZDDAS6.js";
-import "../chunk-BZJSMPS7.js";
-import "../chunk-Z42FOTXC.js";
-import "../chunk-5NA6TNVC.js";
-import "../chunk-VREM33BW.js";
-import "../chunk-AQVIQODP.js";
-import "../chunk-WHZZKXOD.js";
-import "../chunk-YT4LGWIY.js";
-import "../chunk-XEM7S4HK.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-CLFON5AH.js";
+import "../chunk-SDYFRI7L.js";
+import "../chunk-SAEPW5JF.js";
+import "../chunk-VK6INFSB.js";
+import "../chunk-4NNBXE2Q.js";
+import "../chunk-COKJ53M5.js";
+import "../chunk-VGNQAHMB.js";
 import "../chunk-GMKRNFH5.js";
 import "../chunk-QGKQ3IX7.js";
 import {
   CurriculumSidebar
-} from "../chunk-EDDPJB52.js";
-import "../chunk-SZA3RAKD.js";
+} from "../chunk-IH6VDQ6C.js";
+import "../chunk-3SCBKVQQ.js";
 import "../chunk-WS7IOHVK.js";
-import "../chunk-6L4OTKID.js";
-import "../chunk-SDEDXT7A.js";
+import "../chunk-KCC3DAOY.js";
+import "../chunk-MJMHPIYX.js";
 import "../chunk-4TST4UK5.js";
+import "../chunk-B6A7IIYJ.js";
 import {
   CurriculumSubNav
-} from "../chunk-BW2VENFR.js";
+} from "../chunk-WZRGAW43.js";
 import {
   CurriculumProvider,
   useCurriculumContext
 } from "../chunk-IYQJIEVM.js";
 import {
   CurriculumV2Layout
-} from "../chunk-CQSM6JCO.js";
+} from "../chunk-K3Q4XLCN.js";
 import {
-  ExpandTable,
-  createColumnHelper
-} from "../chunk-R2LFT26A.js";
-import "../chunk-JCG2AUFJ.js";
+  DatePickerButton
+} from "../chunk-XLTMDAE3.js";
+import {
+  DatePicker
+} from "../chunk-7BLUAQBV.js";
 import "../chunk-JF7JAMOQ.js";
 import {
   Stepper
-} from "../chunk-CCNYHZOR.js";
+} from "../chunk-Q5Z4EHPC.js";
 import {
   TagSelector
-} from "../chunk-SWAF52SS.js";
+} from "../chunk-7IBUQ5XL.js";
 import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
@@ -67,24 +67,24 @@ import "../chunk-BXX3B3E4.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-QG47PWPH.js";
+} from "../chunk-UMBRV35P.js";
 import {
   ForceRefresh
-} from "../chunk-GGLDVUYU.js";
+} from "../chunk-EWFZXCMV.js";
 import {
   GhostPost
-} from "../chunk-UH6Q3TEK.js";
+} from "../chunk-5JQOU3IR.js";
 import {
   LearningPost
-} from "../chunk-IEYBSZA3.js";
+} from "../chunk-SACH3XVV.js";
 import "../chunk-7FKRQQYK.js";
 import {
   Navigation
-} from "../chunk-WMWXF44S.js";
+} from "../chunk-JRT6KTBG.js";
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-O5MYSBA3.js";
+} from "../chunk-FVNXDLRU.js";
 import {
   RadioButtonCard
 } from "../chunk-CSKNBWPB.js";
@@ -93,48 +93,49 @@ import {
 } from "../chunk-IJOOKMKQ.js";
 import {
   DownloadCard
-} from "../chunk-G7NEBNHU.js";
+} from "../chunk-OHNBVT52.js";
 import {
   DynamicFormField
-} from "../chunk-XON6DE42.js";
+} from "../chunk-N45T3WWG.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-QTQKJ4A2.js";
-import "../chunk-FR2GDOU2.js";
-import "../chunk-5ZITU5L7.js";
+import "../chunk-PB4O3U6O.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
+import "../chunk-2OMSNCRH.js";
+import "../chunk-X2GMDZ7M.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-365QMK4D.js";
 import "../chunk-6IVCARWS.js";
 import "../chunk-6DJOIRMF.js";
 import "../chunk-FPD73OHW.js";
 import "../chunk-MUPK4L3U.js";
-import "../chunk-X2GMDZ7M.js";
-import "../chunk-HYITAA4J.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-DHZVOXFM.js";
-import "../chunk-WV2HN6H4.js";
-import "../chunk-YJZJOZMK.js";
+import "../chunk-JIJLOKVN.js";
+import "../chunk-VG2DMJ2U.js";
 import "../chunk-5AVBYDPB.js";
-import "../chunk-365QMK4D.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-W7X7KSJP.js";
+import "../chunk-VYCYVN3L.js";
 import "../chunk-OHMOP5PV.js";
 import "../chunk-NFDQJVFA.js";
-import "../chunk-JQ7VQ5SB.js";
+import "../chunk-AH4A53SZ.js";
+import "../chunk-BESTU2AY.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.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-W7X7KSJP.js";
-import "../chunk-VYCYVN3L.js";
-import "../chunk-EAXUQEO5.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-K36TPMKL.js";
-import "../chunk-U3BQT7ZO.js";
-import "../chunk-4Y5BEXVN.js";
 import "../chunk-R7IT4TCD.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -150,11 +151,10 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-O2S7S5B4.js";
-import "../chunk-2OMSNCRH.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.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,17 +1,17 @@
 import {
   LearningPost
-} from "../chunk-IEYBSZA3.js";
+} from "../chunk-SACH3XVV.js";
 import "../chunk-7FKRQQYK.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-BESTU2AY.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-EAXUQEO5.js";
 import "../chunk-U3BQT7ZO.js";
-import "../chunk-4Y5BEXVN.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/navigation.js

@@ -1,11 +1,11 @@
 import {
   Navigation
-} from "../chunk-WMWXF44S.js";
+} from "../chunk-JRT6KTBG.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Navigation

package/dist/molecules/one-on-one-guide-list.js

@@ -1,12 +1,12 @@
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-O5MYSBA3.js";
-import "../chunk-WV2HN6H4.js";
-import "../chunk-25HMMI7R.js";
+} from "../chunk-FVNXDLRU.js";
+import "../chunk-JIJLOKVN.js";
 import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   OneOnOneGuideList,

package/dist/molecules/stepper.js

@@ -1,8 +1,9 @@
 import {
   Stepper
-} from "../chunk-CCNYHZOR.js";
+} from "../chunk-Q5Z4EHPC.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
-import "../chunk-K36TPMKL.js";
 import "../chunk-R7IT4TCD.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -18,8 +19,7 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
+import "../chunk-K36TPMKL.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,14 +1,14 @@
 import {
   TagSelector
-} from "../chunk-SWAF52SS.js";
+} from "../chunk-7IBUQ5XL.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-EGEQY3KT.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-U3BQT7ZO.js";
 import "../chunk-R7IT4TCD.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -24,8 +24,8 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.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.5",
+  "version": "2.3.7",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/drawer.tsx

@@ -35,7 +35,6 @@ export function Content(props: ContentProps): React.ReactNode {
 
   const mobileHeaderSize = 48;
   const desktopHeaderSize = 64;
-  const separatorSize = 1;
   const { drawerContainerRef } = usePortalContainer();
 
   return (
@@ -54,8 +53,8 @@ export function Content(props: ContentProps): React.ReactNode {
               hideHeader
                 ? '1'
                 : {
-                    initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,
-                    sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,
+                    initial: `${mobileHeaderSize}px calc(100% - ${mobileHeaderSize}px)`,
+                    sm: `${desktopHeaderSize}px calc(100% - ${desktopHeaderSize}px)`,
                   }
             }
           >

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;