@vuer-ai/vuer-uikit 0.0.120 → 0.0.121

package/dist/ui/waterfall/index.cjs

@@ -1,44 +1,45 @@
 'use strict';
 
-var chunk6D7FGGSX_cjs = require('../../chunk-6D7FGGSX.cjs');
+var chunkMMQR4IEY_cjs = require('../../chunk-MMQR4IEY.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
-require('../../chunk-7H7U2X45.cjs');
-require('../../chunk-QWBMDS3S.cjs');
+require('../../chunk-STJMH4NX.cjs');
+require('../../chunk-O3DFVRON.cjs');
+require('../../chunk-5HT74RHB.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
 require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-EEGQLTSQ.cjs');
+require('../../chunk-UFYHIDMC.cjs');
+require('../../chunk-4WWGBRQV.cjs');
 require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-S37MJNNP.cjs');
+require('../../chunk-OCADGDGL.cjs');
 require('../../chunk-UTS56UA5.cjs');
+var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
-require('../../chunk-RW4T7UBU.cjs');
-var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-LYGYXV7S.cjs');
-require('../../chunk-EK3BTKZP.cjs');
-require('../../chunk-JNV3UBBP.cjs');
-require('../../chunk-F3HOBNGR.cjs');
+require('../../chunk-7ICRKPIO.cjs');
+require('../../chunk-NIACIZWY.cjs');
+require('../../chunk-T2BDPMCF.cjs');
+require('../../chunk-PMG3NZF5.cjs');
 require('../../chunk-JMCH2AFN.cjs');
-require('../../chunk-W3IHFG4B.cjs');
+require('../../chunk-ZG33TW5I.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
+require('../../chunk-DVUN6GQI.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
 require('../../chunk-GEGPGQVH.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
+require('../../chunk-6LTCLQH3.cjs');
 require('../../chunk-G4FJGNY5.cjs');
 
 
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunk6D7FGGSX_cjs.Waterfall; }
+  get: function () { return chunkMMQR4IEY_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,33 +1,34 @@
-export { Waterfall } from '../../chunk-MYZHDWBF.mjs';
+export { Waterfall } from '../../chunk-LJYIEOGQ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
-import '../../chunk-FMKD5JBL.mjs';
-import '../../chunk-ZSAPBZ36.mjs';
+import '../../chunk-EZ536NLQ.mjs';
+import '../../chunk-7TD77VF4.mjs';
+import '../../chunk-OW653F7T.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
 import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-PC5DHSC4.mjs';
+import '../../chunk-7RRQ2HHL.mjs';
+import '../../chunk-NKUK73WB.mjs';
 import '../../chunk-HTAFERCZ.mjs';
-import '../../chunk-AHD46BFN.mjs';
+import '../../chunk-ZQOQB6GF.mjs';
 import '../../chunk-D5H4XX6Q.mjs';
+export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
 import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
-import '../../chunk-K2ZYSKRU.mjs';
-export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
-import '../../chunk-SRZ56OJH.mjs';
-import '../../chunk-Q37KC3CL.mjs';
-import '../../chunk-UQQBUPGF.mjs';
-import '../../chunk-SMXN2KOV.mjs';
+import '../../chunk-XZTEU7ME.mjs';
+import '../../chunk-IPMWGCAI.mjs';
+import '../../chunk-4Y5IF7R5.mjs';
+import '../../chunk-HGTL7DFT.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
-import '../../chunk-T4U3BG2V.mjs';
+import '../../chunk-EGJLY5VZ.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-XHJDRQD7.mjs';
+import '../../chunk-H3JRYX2U.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
 import '../../chunk-4NABYVCK.mjs';
-import '../../chunk-T66ETI7E.mjs';
+import '../../chunk-HBEU2PU2.mjs';
 import '../../chunk-SAGQV2YZ.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.120",
+  "version": "0.0.121",
   "files": [
     "/dist",
     "/src"
@@ -67,6 +67,7 @@
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.7",

package/src/auth/components/index.ts

@@ -1 +1 @@
-export * from "./user-avatar"
+export * from "./user-avatar";

package/src/dial/DialPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DialGroupConfig, DialSchema, LabelPositionT } from "./DialProvider";
+import type { GroupSchema, DialSchema, LabelPositionT } from "./types";
 import {
   DialBooleanInput,
   DialColorInput,
@@ -16,20 +16,55 @@ import {
   DialVec3Input,
   DialVectorInput,
 } from "./wrapped-inputs";
+import { DialInterfaceInput } from "./wrapped-inputs/DialInterfaceInput";
 
 interface DialSchemaRendererProps {
   schemas: DialSchema[];
-  groups?: DialGroupConfig[];
+  groups?: GroupSchema[];
   labelLayout?: LabelPositionT;
 }
 
+/**
+ * Generate dynamic styles based on GroupSchema
+ * Default layout: grid with 1 column
+ */
+const generateGroupStyle = (config?: GroupSchema): React.CSSProperties => {
+  const layout = config?.layout ?? "grid";
+
+  if (layout === "grid") {
+    return {
+      display: "grid",
+      gap: "0.5rem",
+      gridAutoFlow: config?.gridFlow,
+      gridTemplateColumns: config?.gridColTemplate
+        ? config.gridColTemplate
+        : config?.gridCols
+          ? `repeat(${config.gridCols}, 1fr)`
+          : "1fr",
+      gridTemplateRows: config?.gridRowTemplate
+        ? config.gridRowTemplate
+        : config?.gridRows
+          ? `repeat(${config.gridRows}, 1fr)`
+          : undefined,
+    };
+  }
+
+  // Flex layout
+  return {
+    display: "flex",
+    gap: "0.5rem",
+    flexWrap: config?.flexWrap ?? "wrap",
+    justifyContent: config?.flexJustifyContent,
+  };
+};
+
 export const DialPanel: React.FC<DialSchemaRendererProps> = ({
   schemas,
   groups: groupConfigs,
   labelLayout,
 }) => {
   // Create a map of group configurations for easy lookup
-  const groupConfigMap: Record<string, DialGroupConfig> = {};
+  const groupConfigMap: Record<string, GroupSchema> = {};
 
   // First, populate from explicit groups prop if provided
   if (groupConfigs) {
@@ -38,25 +73,12 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
     });
   }
 
-  // Then, analyze schemas to build group configs from tags if not already defined
-  schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
-    if (grouping && !groupConfigMap[grouping]) {
-      // Initialize group config if it doesn't exist
-      groupConfigMap[grouping] = { name: grouping };
-    }
-    // Check if this schema has noWrap tag and apply it to the group
-    if (grouping && schema.tags?.noWrap && groupConfigMap[grouping]) {
-      groupConfigMap[grouping].noWrap = true;
-    }
-  });
-
   // Group schemas by their grouping tag
   const groupedSchemas: Record<string, DialSchema[]> = {};
   const ungrouped: DialSchema[] = [];
 
   schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
+    const grouping = schema?.grouping;
     if (grouping) {
       if (!groupedSchemas[grouping]) {
         groupedSchemas[grouping] = [];
@@ -69,13 +91,17 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
   // Render a single schema item as an input component
   const renderSchemaInput = (schema: DialSchema) => {
-    const { name, dtype, icon, min, max, step, options, tags } = schema;
+    const { name, dtype, icon, min, max, step, options } = schema;
     // Use schema's label position if specified, otherwise fall back to panel's labelLayout prop
-    const effectiveLabelPosition = (tags?.labelPosition as LabelPositionT) || labelLayout;
+    const effectiveLabelPosition = (schema?.labelPosition as LabelPositionT) || labelLayout;
     const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
 
     // Choose the right input component based on dtype
     switch (dtype) {
+      case "interface":
+      case "object":
+        return <DialInterfaceInput name={name} />;
+
       case "vector3":
         return (
           <DialVec3Input
@@ -198,7 +224,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
               key={name}
               name={name}
               label={label}
-              options={options}
+              options={options as string[]}
               labelPosition={effectiveLabelPosition}
               icon={icon}
             />
@@ -224,6 +250,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
       case "string":
       case "text":
+      case "select":
         // If options are provided, use select
         if (options && options.length > 0) {
           return (
@@ -260,16 +287,14 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
       {Object.entries(groupedSchemas).map(([name, schemaList]) => {
         // Use group configuration
         const groupConfig = groupConfigMap[name];
-        const hasNoWrap = groupConfig?.noWrap;
-
-        // Determine grid columns - default to 3 columns
-        // If noWrap is true, use single row flex layout for backward compatibility
-        const layoutClass = hasNoWrap ? "flex flex-row flex-no-wrap gap-2" : "flex flex-row gap-2";
+        const groupStyle = generateGroupStyle(groupConfig);
 
         return (
           <div key={name} className="dial-group">
-            <div className="text-text-primary mb-2 font-medium">{name}</div>
-            <div className={`dial-row ${layoutClass}`}>{schemaList.map(renderSchemaInput)}</div>
+            <div className="text-text-primary mb-2 font-medium capitalize">{name}</div>
+            <div className="dial-row" style={groupStyle}>
+              {schemaList.map(renderSchemaInput)}
+            </div>
           </div>
         );
       })}

package/src/dial/DialProvider.tsx

@@ -1,68 +1,17 @@
-import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+import type { DialValue, DialSchema } from "./types";
 
 // Utility to check if an object is empty or nullish
 function isEmptyObject(obj: unknown): boolean {
   return obj == null || (typeof obj === "object" && Object.keys(obj).length === 0);
 }
 
-export type LabelPositionT = "left" | "top" | "inline" | undefined;
-
-// Define specific value types for dial values
-export type DialValue =
-  | string
-  | number
-  | boolean
-  | number[]
-  | string[]
-  | (boolean | number | string)[]
-  | null
-  | undefined;
-
-// Types for the dial schema
-export interface DialSchema {
-  name: string;
-  dtype: string;
-  value?: DialValue;
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: Array<string | number | { label: string; value: string | number }>;
-  dimensions?: number;
-  placeholders?: string[];
-  tooltips?: string[];
-  dtypes?: string[];
-  mins?: number[];
-  maxs?: number[];
-  steps?: number[];
-  helpText?: string;
-  icon?: string;
-  label?: string;
-  tags?: {
-    grouping?: string;
-    col?: boolean | number;
-    row?: number;
-    layout?: string;
-    labelPosition?: LabelPositionT;
-    noWrap?: boolean;
-  };
-}
-
-// Group configuration interface
-export interface DialGroupConfig {
-  name: string;
-  noWrap?: boolean;
-  [key: string]: unknown;
-}
-
-export interface DialSchemaGroup {
-  component: string;
-  schemas: DialSchema[];
-  groups?: DialGroupConfig[];
-}
-
-// Context type
-interface DialContextValue {
-  values: Record<string, DialValue>;
+/**
+ * Context value for dial schema provider
+ */
+export interface DialContextValue {
+  values: Record<string, unknown>;
   schemas: DialSchema[];
   getValue: (name: string) => DialValue;
   setValue: (name: string, value: DialValue) => void;
@@ -81,12 +30,15 @@ export const useDialSchema = () => {
   return context;
 };
 
-interface DialSchemaProviderProps {
-  children: ReactNode;
+/**
+ * Props for DialProvider component
+ */
+export interface DialProviderProps {
+  children: React.ReactNode;
   schemas: DialSchema[];
-  initialValues?: Record<string, DialValue>;
-  values?: Record<string, DialValue>; // For controlled mode
-  onValueChange?: (name: string, value: DialValue) => void;
+  initialValues?: Record<string, unknown>;
+  values?: Record<string, unknown>; // For controlled mode
+  onValueChange?: (name: string, value: unknown) => void;
 }
 
 // Provider component
@@ -96,12 +48,12 @@ export const DialProvider = ({
   initialValues = {},
   values: controlledValues,
   onValueChange,
-}: DialSchemaProviderProps) => {
+}: DialProviderProps) => {
   // Determine if component is controlled
   const isControlled = !isEmptyObject(controlledValues);
 
   // Initialize state with default values from schemas or provided initial values
-  const [internalValues, setInternalValues] = useState<Record<string, DialValue>>(() =>
+  const [internalValues, setInternalValues] = useState<Record<string, unknown>>(() =>
     Object.fromEntries(
       schemas.map((schema) => [schema.name, initialValues[schema.name] ?? schema.value]),
     ),
@@ -109,7 +61,7 @@ export const DialProvider = ({
 
   // Helper function to merge controlled values with schema defaults
   const mergeWithSchemaDefaults = useCallback(
-    (inputValues: Record<string, DialValue>) => {
+    (inputValues: Record<string, unknown>) => {
       const result = { ...inputValues };
 
       schemas.forEach((schema) => {
@@ -139,7 +91,7 @@ export const DialProvider = ({
 
   // Helper function to format values based on their type
   const formatValue = useCallback(
-    (value: DialValue): DialValue => {
+    (value: unknown): DialValue => {
       if (value === null || value === undefined) {
         return value;
       }

package/src/dial/index.ts

@@ -1,8 +1,10 @@
 // Core dial components
-export { DialProvider, useDialSchema } from './DialProvider';
-export type { DialSchema, DialSchemaGroup, DialGroupConfig, DialValue, LabelPositionT } from './DialProvider';
-export { DialPanel } from './DialPanel';
-export { IconRenderer } from './IconRenderer';
+export { DialProvider, useDialSchema } from "./DialProvider";
+
+// Export types from the types file
+export * from "./types";
+export { DialPanel } from "./DialPanel";
+export { IconRenderer } from "./IconRenderer";
 
 // All wrapped input components
 export {
@@ -24,4 +26,4 @@ export {
   DialCmInput,
   DialInchInput,
   DialTimeInput,
-} from './wrapped-inputs';
+} from "./wrapped-inputs";

package/src/dial/types.ts

@@ -0,0 +1,40 @@
+/**
+ * Dial Provider Types
+ * Runtime types for the Dial UI system, extending base types from dial-cli
+ */
+
+import type { DialSchema, GroupSchema } from "../../dial-cli/src/types";
+
+// ============= Label Position =============
+
+export type LabelPositionT = "left" | "top" | "inline" | undefined;
+
+// Define specific value types for dial values
+export type DialValue =
+  | string
+  | number
+  | boolean
+  | number[]
+  | string[]
+  | (boolean | number | string)[]
+  | object
+  | null
+  | undefined;
+
+/**
+ * Runtime schema group - extends ComponentSchema with DialSchema
+ */
+export interface DialSchemaGroup {
+  component: string;
+  description?: string;
+  schemas: DialSchema[];
+  groups?: GroupSchema[];
+}
+
+// Re-export base types for convenience
+export type {
+  // Schema types (final output)
+  DialSchema,
+  NestedTypeDefinition,
+  GroupSchema,
+} from "../../dial-cli/src/types";

package/src/dial/wrapped-inputs/ControlledInputs.tsx

@@ -14,8 +14,9 @@ import {
   Slider,
   Switch,
 } from "../../index"; // Base input component that connects to the dial store
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
@@ -108,7 +109,7 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? false) as boolean;
 
-  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name]);
+  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name, setValue]);
 
   const switchProps = {
     checked: value,
@@ -133,7 +134,7 @@ export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, icon,
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, e.target.value),
-    [name],
+    [name, setValue],
   );
 
   const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
@@ -162,7 +163,7 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
       const parsed = !isNaN(Number(val)) ? Number(val) : val;
       setValue(name, parsed);
     },
-    [name],
+    [name, setValue],
   );
 
   const selectComponent = (
@@ -199,7 +200,7 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? min) as number;
 
-  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name]);
+  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name, setValue]);
 
   const sliderProps = {
     value: [value],

package/src/dial/wrapped-inputs/DialInputs.tsx

@@ -18,8 +18,9 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Base props for all dial-wrapped inputs
 interface DialWrapperProps {

package/src/dial/wrapped-inputs/DialInterfaceInput.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from "react";
+
+import { DialPanel } from "../DialPanel";
+import { DialProvider, useDialSchema } from "../DialProvider";
+import { LabelPositionT } from "../types";
+
+interface DialInterfaceInputProps {
+  name: string;
+}
+
+export const DialInterfaceInput: React.FC<DialInterfaceInputProps> = ({ name }) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+
+  const values: Record<string, unknown> = getValue(name) as Record<string, unknown>;
+
+  const handlePropertyChange = useCallback(
+    (propName: string, value: unknown) => {
+      const newValues = { ...values };
+      newValues[propName] = value;
+      setValue(name, newValues);
+    },
+    [name, setValue, values],
+  );
+
+  const schema = schemas.find((s) => s.name === name);
+
+  if (!schema || !schema.typeDefinition?.schemas) {
+    return null;
+  }
+
+  return (
+    <DialProvider
+      schemas={schema.typeDefinition.schemas}
+      values={values}
+      onValueChange={handlePropertyChange}
+    >
+      <DialPanel
+        schemas={schema.typeDefinition.schemas}
+        groups={schema.typeDefinition.groups}
+        labelLayout={schema.labelPosition as LabelPositionT}
+      />
+    </DialProvider>
+  );
+};

package/src/dial/wrapped-inputs/DialPresetsInput.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
 import { FormLayout, Label, type LayoutType } from "../../ui";
-import { PresetsInput } from "../../ui/inputs/presets-input";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { PresetsInput } from "../../ui";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import { LabelPositionT } from "../types";
 
 const DialInputWrapper: React.FC<{
   label?: string;

package/src/dial/wrapped-inputs/DialVectorInput.tsx

@@ -65,7 +65,6 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
-  const tags = schema.tags || {};
 
   // Ensure value is an array with correct dimensions
   const vectorValue = Array.isArray(value)
@@ -76,23 +75,9 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
 
   // Determine layout from tags
-  let gridAutoFlow: "column" | "row";
-  let gridColumns: number | undefined;
-  let gridRows: number | undefined;
-
-  if (typeof tags.col === "number") {
-    gridAutoFlow = "column";
-    gridRows = tags.col;
-    gridColumns = undefined;
-  } else if (typeof tags.row === "number") {
-    gridAutoFlow = "row";
-    gridColumns = tags.row;
-    gridRows = undefined;
-  } else {
-    gridAutoFlow = "row";
-    gridColumns = undefined;
-    gridRows = undefined;
-  }
+  const gridAutoFlow = schema.vectorFlow === "column" ? "column" : "row";
+  const gridColumns = typeof schema.vectorCols === "number" ? schema.vectorCols : undefined;
+  const gridRows = typeof schema.vectorRows === "number" ? schema.vectorRows : undefined;
 
   if (hasMixedTypes) {
     // Separate number and boolean indices and values

package/src/hooks/cn.ts

@@ -14,6 +14,10 @@ const twMerge = extendTailwindMerge({
       p: ["p-xxs", "p-xs", "p-sm", "p-md", "p-lg", "p-xl"],
       py: ["py-xxs", "py-xs", "py-sm", "py-md", "py-lg", "py-xl"],
       px: ["px-xxs", "px-xs", "px-sm", "px-md", "px-lg", "px-xl"],
+      pt: ["pt-xxs", "pt-xs", "pt-sm", "pt-md", "pt-lg", "pt-xl"],
+      pb: ["pb-xxs", "pb-xs", "pb-sm", "pb-md", "pb-lg", "pb-xl"],
+      pl: ["pl-xxs", "pl-xs", "pl-sm", "pl-md", "pl-lg", "pl-xl"],
+      pr: ["pr-xxs", "pr-xs", "pr-sm", "pr-md", "pr-lg", "pr-xl"],
       "font-size": [
         "text-uk-xs",
         "text-uk-sm",
@@ -22,6 +26,7 @@ const twMerge = extendTailwindMerge({
         "text-uk-xl",
         "text-uk-xxl",
       ],
+      "text-color": ["text-text-primary", "text-text-highlight"],
     },
   },
 });