@backstage/ui 0.11.2 → 0.12.0-next.1

package/dist/hooks/useDefinition/useDefinition.esm.js

@@ -0,0 +1,76 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useBreakpoint } from '../useBreakpoint.esm.js';
+import { useSurface, SurfaceProvider } from '../useSurface.esm.js';
+import { resolveResponsiveValue, processUtilityProps } from './helpers.esm.js';
+
+function useDefinition(definition, props, options) {
+  const { breakpoint } = useBreakpoint();
+  const surfaceOptions = definition.surface === "container" ? { surface: props.surface } : definition.surface === "leaf" ? { onSurface: props.onSurface } : void 0;
+  const { surface: resolvedSurface } = useSurface(surfaceOptions);
+  const ownPropKeys = new Set(Object.keys(definition.propDefs));
+  const utilityPropKeys = new Set(definition.utilityProps ?? []);
+  const ownPropsRaw = {};
+  const restProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ownPropKeys.has(key)) {
+      ownPropsRaw[key] = value;
+    } else if (!utilityPropKeys.has(key)) {
+      restProps[key] = value;
+    }
+  }
+  const ownPropsResolved = {};
+  const dataAttributes = {};
+  for (const [key, config] of Object.entries(definition.propDefs)) {
+    const rawValue = ownPropsRaw[key];
+    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
+    const finalValue = resolvedValue ?? config.default;
+    if (finalValue !== void 0) {
+      ownPropsResolved[key] = finalValue;
+      if (config.dataAttribute) {
+        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);
+      }
+    }
+  }
+  if (definition.surface === "leaf" && resolvedSurface !== void 0) {
+    const surfaceValue = typeof resolvedSurface === "object" ? resolveResponsiveValue(resolvedSurface, breakpoint) : resolvedSurface;
+    if (surfaceValue !== void 0) {
+      dataAttributes["data-on-surface"] = String(surfaceValue);
+    }
+  }
+  const { utilityClasses, utilityStyle } = processUtilityProps(
+    props,
+    definition.utilityProps ?? []
+  );
+  const utilityTarget = "root";
+  const classNameTarget = "root";
+  const classes = {};
+  for (const [name, cssKey] of Object.entries(definition.classNames)) {
+    classes[name] = clsx(
+      cssKey,
+      definition.styles[cssKey],
+      utilityTarget === name && utilityClasses,
+      classNameTarget === name && ownPropsResolved.className
+    );
+  }
+  let children;
+  let surfaceChildren;
+  if (definition.surface === "container") {
+    surfaceChildren = resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: props.children }) : props.children;
+  } else {
+    children = props.children;
+  }
+  return {
+    ownProps: {
+      classes,
+      ...ownPropsResolved,
+      ...definition.surface === "container" ? { surfaceChildren } : { children }
+    },
+    restProps,
+    dataAttributes,
+    utilityStyle
+  };
+}
+
+export { useDefinition };
+//# sourceMappingURL=useDefinition.esm.js.map

package/dist/hooks/useDefinition/useDefinition.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useSurface, SurfaceProvider, UseSurfaceOptions } from '../useSurface';\nimport { resolveResponsiveValue, processUtilityProps } from './helpers';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  const surfaceOptions: UseSurfaceOptions | undefined =\n    definition.surface === 'container'\n      ? { surface: props.surface }\n      : definition.surface === 'leaf'\n      ? { onSurface: props.onSurface }\n      : undefined;\n\n  const { surface: resolvedSurface } = useSurface(surfaceOptions);\n\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Add data-on-surface for leaf components\n  if (definition.surface === 'leaf' && resolvedSurface !== undefined) {\n    // Handle responsive surface values - for data attributes, use the resolved string\n    const surfaceValue =\n      typeof resolvedSurface === 'object'\n        ? resolveResponsiveValue(resolvedSurface as any, breakpoint)\n        : resolvedSurface;\n    if (surfaceValue !== undefined) {\n      dataAttributes['data-on-surface'] = String(surfaceValue);\n    }\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let surfaceChildren: ReactNode | undefined;\n\n  if (definition.surface === 'container') {\n    surfaceChildren = resolvedSurface ? (\n      <SurfaceProvider surface={resolvedSurface}>\n        {props.children}\n      </SurfaceProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.surface === 'container'\n        ? { surfaceChildren }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":";;;;;;AA4BO,SAAS,aAAA,CAId,UAAA,EACA,KAAA,EACA,OAAA,EAC2B;AAC3B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AAErC,EAAA,MAAM,iBACJ,UAAA,CAAW,OAAA,KAAY,WAAA,GACnB,EAAE,SAAS,KAAA,CAAM,OAAA,EAAQ,GACzB,UAAA,CAAW,YAAY,MAAA,GACvB,EAAE,SAAA,EAAW,KAAA,CAAM,WAAU,GAC7B,MAAA;AAEN,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,WAAW,cAAc,CAAA;AAE9D,EAAA,MAAM,cAAc,IAAI,GAAA,CAAI,OAAO,IAAA,CAAK,UAAA,CAAW,QAAQ,CAAC,CAAA;AAC5D,EAAA,MAAM,kBAAkB,IAAI,GAAA,CAAI,UAAA,CAAW,YAAA,IAAgB,EAAE,CAAA;AAE7D,EAAA,MAAM,cAAmC,EAAC;AAC1C,EAAA,MAAM,YAAiC,EAAC;AAExC,EAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,EAAG;AAChD,IAAA,IAAI,WAAA,CAAY,GAAA,CAAI,GAAG,CAAA,EAAG;AACxB,MAAA,WAAA,CAAY,GAAG,CAAA,GAAI,KAAA;AAAA,IACrB,CAAA,MAAA,IAAW,CAAE,eAAA,CAAgC,GAAA,CAAI,GAAG,CAAA,EAAG;AACrD,MAAA,SAAA,CAAU,GAAG,CAAA,GAAI,KAAA;AAAA,IACnB;AAAA,EACF;AAEA,EAAA,MAAM,mBAAwC,EAAC;AAC/C,EAAA,MAAM,iBAAqD,EAAC;AAE5D,EAAA,KAAA,MAAW,CAAC,KAAK,MAAM,CAAA,IAAK,OAAO,OAAA,CAAQ,UAAA,CAAW,QAAQ,CAAA,EAAG;AAC/D,IAAA,MAAM,QAAA,GAAW,YAAY,GAAG,CAAA;AAChC,IAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,QAAA,EAAU,UAAU,CAAA;AACjE,IAAA,MAAM,UAAA,GAAa,iBAAkB,MAAA,CAAe,OAAA;AAEpD,IAAA,IAAI,eAAe,MAAA,EAAW;AAC5B,MAAA,gBAAA,CAAiB,GAAG,CAAA,GAAI,UAAA;AAExB,MAAA,IAAK,OAAe,aAAA,EAAe;AAEjC,QAAA,cAAA,CAAe,QAAQ,GAAA,CAAI,WAAA,EAAa,CAAA,CAAE,CAAA,GAAI,OAAO,UAAU,CAAA;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AAGA,EAAA,IAAI,UAAA,CAAW,OAAA,KAAY,MAAA,IAAU,eAAA,KAAoB,MAAA,EAAW;AAElE,IAAA,MAAM,eACJ,OAAO,eAAA,KAAoB,WACvB,sBAAA,CAAuB,eAAA,EAAwB,UAAU,CAAA,GACzD,eAAA;AACN,IAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,MAAA,cAAA,CAAe,iBAAiB,CAAA,GAAI,MAAA,CAAO,YAAY,CAAA;AAAA,IACzD;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,mBAAA;AAAA,IACvC,KAAA;AAAA,IACC,UAAA,CAAW,gBAAgB;AAAC,GAC/B;AAEA,EAAA,MAAM,aAAA,GAA0C,MAAA;AAChD,EAAA,MAAM,eAAA,GAA8C,MAAA;AAEpD,EAAA,MAAM,UAAkC,EAAC;AAEzC,EAAA,KAAA,MAAW,CAAC,MAAM,MAAM,CAAA,IAAK,OAAO,OAAA,CAAQ,UAAA,CAAW,UAAU,CAAA,EAAG;AAClE,IAAA,OAAA,CAAQ,IAAI,CAAA,GAAI,IAAA;AAAA,MACd,MAAA;AAAA,MACA,UAAA,CAAW,OAAO,MAAwC,CAAA;AAAA,MAC1D,kBAAkB,IAAA,IAAQ,cAAA;AAAA,MAC1B,eAAA,KAAoB,QAAQ,gBAAA,CAAiB;AAAA,KAC/C;AAAA,EACF;AAEA,EAAA,IAAI,QAAA;AACJ,EAAA,IAAI,eAAA;AAEJ,EAAA,IAAI,UAAA,CAAW,YAAY,WAAA,EAAa;AACtC,IAAA,eAAA,GAAkB,eAAA,uBACf,eAAA,EAAA,EAAgB,OAAA,EAAS,iBACvB,QAAA,EAAA,KAAA,CAAM,QAAA,EACT,IAEA,KAAA,CAAM,QAAA;AAAA,EAEV,CAAA,MAAO;AACL,IAAA,QAAA,GAAW,KAAA,CAAM,QAAA;AAAA,EACnB;AAEA,EAAA,OAAO;AAAA,IACL,QAAA,EAAU;AAAA,MACR,OAAA;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAI,WAAW,OAAA,KAAY,WAAA,GACvB,EAAE,eAAA,EAAgB,GAClB,EAAE,QAAA;AAAS,KACjB;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/hooks/useStyles.esm.js

@@ -1,25 +1,6 @@
-import { useBreakpoint, breakpoints } from './useBreakpoint.esm.js';
-import { utilityClassMap } from '../utils/utilityClassMap.esm.js';
+import { useBreakpoint } from './useBreakpoint.esm.js';
+import { resolveResponsiveValue, processUtilityProps } from './useDefinition/helpers.esm.js';
 
-function resolveResponsiveValue(value, breakpoint) {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "object" && value !== null) {
-    const index = breakpoints.findIndex((b) => b.id === breakpoint);
-    for (let i = index; i >= 0; i--) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id];
-      }
-    }
-    for (let i = 0; i < breakpoints.length; i++) {
-      if (value[breakpoints[i].id]) {
-        return value[breakpoints[i].id];
-      }
-    }
-  }
-  return void 0;
-}
 function useStyles(componentDefinition, props = {}) {
   const { breakpoint } = useBreakpoint();
   const classNames = componentDefinition.classNames;
@@ -40,38 +21,10 @@ function useStyles(componentDefinition, props = {}) {
       }
     }
   }
-  const utilityClassList = [];
-  const generatedStyle = {};
-  const handleUtilityValue = (key, val, prefix = "") => {
-    const utilityConfig = utilityClassMap[key];
-    if (!utilityConfig) {
-      return;
-    }
-    if (utilityConfig.values.length > 0 && utilityConfig.values.includes(val)) {
-      const className = prefix ? `${prefix}${utilityConfig.class}-${val}` : `${utilityConfig.class}-${val}`;
-      utilityClassList.push(className);
-    } else if (utilityConfig.cssVar) {
-      const cssVarKey = prefix ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}` : utilityConfig.cssVar;
-      generatedStyle[cssVarKey] = val;
-      const className = prefix ? `${prefix}${utilityConfig.class}` : utilityConfig.class;
-      utilityClassList.push(className);
-    }
-  };
-  for (const key of utilityPropNames) {
-    const value = props[key];
-    if (value === void 0 || value === null) {
-      continue;
-    }
-    if (typeof value === "object" && value !== null) {
-      const breakpointValues = value;
-      for (const bp in breakpointValues) {
-        const prefix = bp === "initial" ? "" : `${bp}:`;
-        handleUtilityValue(key, breakpointValues[bp], prefix);
-      }
-    } else {
-      handleUtilityValue(key, value);
-    }
-  }
+  const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps(
+    props,
+    utilityPropNames
+  );
   const utilityPropsSet = new Set(utilityPropNames);
   const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {
     if (!utilityPropsSet.has(key)) {
@@ -90,7 +43,7 @@ function useStyles(componentDefinition, props = {}) {
   return {
     classNames,
     dataAttributes,
-    utilityClasses: utilityClassList.join(" "),
+    utilityClasses,
     style: mergedStyle,
     cleanedProps
   };

package/dist/hooks/useStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useBreakpoint, breakpoints } from './useBreakpoint';\nimport type { ComponentDefinition } from '../types';\nimport { utilityClassMap } from '../utils/utilityClassMap';\n\n/**\n * Resolve a responsive value based on the current breakpoint\n * @param value - The responsive value (string or object with breakpoint keys)\n * @param breakpoint - The current breakpoint\n * @returns The resolved value for the current breakpoint\n */\nfunction resolveResponsiveValue(\n  value: string | Record<string, string>,\n  breakpoint: string,\n): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n    // Look for value at current breakpoint or smaller\n    for (let i = index; i >= 0; i--) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n\n    // If no value found, check from smallest breakpoint up\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentDefinition - The component's definition object\n * @param props - All component props\n * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps\n */\nexport function useStyles<\n  T extends ComponentDefinition,\n  P extends Record<string, any> = Record<string, any>,\n>(\n  componentDefinition: T,\n  props: P = {} as P,\n): {\n  classNames: T['classNames'];\n  dataAttributes: Record<string, string>;\n  utilityClasses: string;\n  style: React.CSSProperties;\n  cleanedProps: P;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinition.classNames;\n  const utilityPropNames =\n    ('utilityProps' in componentDefinition\n      ? componentDefinition.utilityProps\n      : []) || [];\n\n  // Extract data attribute names from component definition\n  const dataAttributeNames =\n    'dataAttributes' in componentDefinition\n      ? Object.keys(componentDefinition.dataAttributes || {})\n      : [];\n\n  // Extract existing style from props\n  const incomingStyle = props.style || {};\n\n  // Generate data attributes from component definition\n  const dataAttributes: Record<string, string> = {};\n  for (const key of dataAttributeNames) {\n    const value = props[key];\n    if (value !== undefined && value !== null) {\n      // Handle boolean and number values directly\n      if (typeof value === 'boolean' || typeof value === 'number') {\n        dataAttributes[`data-${key}`] = String(value);\n      } else {\n        const resolvedValue = resolveResponsiveValue(value, breakpoint);\n        if (resolvedValue !== undefined) {\n          dataAttributes[`data-${key}`] = resolvedValue;\n        }\n      }\n    }\n  }\n\n  // Generate utility classes and custom styles from component's allowed utility props\n  const utilityClassList: string[] = [];\n  const generatedStyle: React.CSSProperties = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    if (\n      utilityConfig.values.length > 0 &&\n      utilityConfig.values.includes(val as string | number)\n    ) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if (utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVarKey = prefix\n        ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}`\n        : utilityConfig.cssVar;\n      // CSS custom properties need to be set on the style object as strings\n      (generatedStyle as Record<string, unknown>)[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropNames) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  // Create cleaned props by excluding only utility props\n  // All other props (including data attributes, style, children, etc.) remain\n  const utilityPropsSet = new Set<string>(utilityPropNames);\n\n  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {\n    if (!utilityPropsSet.has(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as any);\n\n  // Merge incoming style with generated styles (incoming styles take precedence)\n  const mergedStyle = {\n    ...generatedStyle,\n    ...incomingStyle,\n  };\n\n  // Add merged style to cleanedProps\n  const cleanedProps = {\n    ...cleanedPropsBase,\n    style: mergedStyle,\n  } as P;\n\n  return {\n    classNames,\n    dataAttributes,\n    utilityClasses: utilityClassList.join(' '),\n    style: mergedStyle,\n    cleanedProps,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useBreakpoint } from './useBreakpoint';\nimport type { ComponentDefinition } from '../types';\nimport {\n  resolveResponsiveValue,\n  processUtilityProps,\n} from './useDefinition/helpers';\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentDefinition - The component's definition object\n * @param props - All component props\n * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps\n */\nexport function useStyles<\n  T extends ComponentDefinition,\n  P extends Record<string, any> = Record<string, any>,\n>(\n  componentDefinition: T,\n  props: P = {} as P,\n): {\n  classNames: T['classNames'];\n  dataAttributes: Record<string, string>;\n  utilityClasses: string;\n  style: React.CSSProperties;\n  cleanedProps: P;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinition.classNames;\n  const utilityPropNames =\n    ('utilityProps' in componentDefinition\n      ? componentDefinition.utilityProps\n      : []) || [];\n\n  // Extract data attribute names from component definition\n  const dataAttributeNames =\n    'dataAttributes' in componentDefinition\n      ? Object.keys(componentDefinition.dataAttributes || {})\n      : [];\n\n  // Extract existing style from props\n  const incomingStyle = props.style || {};\n\n  // Generate data attributes from component definition\n  const dataAttributes: Record<string, string> = {};\n  for (const key of dataAttributeNames) {\n    const value = props[key];\n    if (value !== undefined && value !== null) {\n      // Handle boolean and number values directly\n      if (typeof value === 'boolean' || typeof value === 'number') {\n        dataAttributes[`data-${key}`] = String(value);\n      } else {\n        const resolvedValue = resolveResponsiveValue(value, breakpoint);\n        if (resolvedValue !== undefined) {\n          dataAttributes[`data-${key}`] = resolvedValue;\n        }\n      }\n    }\n  }\n\n  // Generate utility classes and custom styles from component's allowed utility props\n  const { utilityClasses, utilityStyle: generatedStyle } = processUtilityProps(\n    props,\n    utilityPropNames,\n  );\n\n  // Create cleaned props by excluding only utility props\n  // All other props (including data attributes, style, children, etc.) remain\n  const utilityPropsSet = new Set<string>(utilityPropNames);\n\n  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {\n    if (!utilityPropsSet.has(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as any);\n\n  // Merge incoming style with generated styles (incoming styles take precedence)\n  const mergedStyle = {\n    ...generatedStyle,\n    ...incomingStyle,\n  };\n\n  // Add merged style to cleanedProps\n  const cleanedProps = {\n    ...cleanedPropsBase,\n    style: mergedStyle,\n  } as P;\n\n  return {\n    classNames,\n    dataAttributes,\n    utilityClasses,\n    style: mergedStyle,\n    cleanedProps,\n  };\n}\n"],"names":[],"mappings":";;;AA4BO,SAAS,SAAA,CAId,mBAAA,EACA,KAAA,GAAW,EAAC,EAOZ;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,aAAa,mBAAA,CAAoB,UAAA;AACvC,EAAA,MAAM,oBACH,cAAA,IAAkB,mBAAA,GACf,oBAAoB,YAAA,GACpB,OAAO,EAAC;AAGd,EAAA,MAAM,kBAAA,GACJ,gBAAA,IAAoB,mBAAA,GAChB,MAAA,CAAO,IAAA,CAAK,oBAAoB,cAAA,IAAkB,EAAE,CAAA,GACpD,EAAC;AAGP,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,KAAA,IAAS,EAAC;AAGtC,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,KAAA,MAAW,OAAO,kBAAA,EAAoB;AACpC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AAEzC,MAAA,IAAI,OAAO,KAAA,KAAU,SAAA,IAAa,OAAO,UAAU,QAAA,EAAU;AAC3D,QAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,OAAO,KAAK,CAAA;AAAA,MAC9C,CAAA,MAAO;AACL,QAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,KAAA,EAAO,UAAU,CAAA;AAC9D,QAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,UAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,aAAA;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAA;AAAA,IACvD,KAAA;AAAA,IACA;AAAA,GACF;AAIA,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAY,gBAAgB,CAAA;AAExD,EAAA,MAAM,gBAAA,GAAmB,OAAO,IAAA,CAAK,KAAK,EAAE,MAAA,CAAO,CAAC,KAAK,GAAA,KAAQ;AAC/D,IAAA,IAAI,CAAC,eAAA,CAAgB,GAAA,CAAI,GAAG,CAAA,EAAG;AAC7B,MAAA,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA,CAAM,GAAG,CAAA;AAAA,IACtB;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAS,CAAA;AAGZ,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA,EAAO,WAAA;AAAA,IACP;AAAA,GACF;AACF;;;;"}