@loadsmart/loadsmart-ui 8.0.6 → 8.1.0-beta.1

package/dist/tools/vite-plugin-replace-jsx-runtime.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * Vite plugin to replace imports from 'react/jsx-runtime' with 'react/jsx-runtime.js'.
+ *
+ * Only necessary to keep support with react 16 on a CRA project
+ */
+export declare function replaceJsxRuntimeImport(): Plugin;

package/dist/tools.js

@@ -0,0 +1,98 @@
+import { get_default } from "./themes.js";
+import { getToken } from "./theming/index.js";
+import { toArray } from "./toArray.js";
+import { isFunction } from "@loadsmart/utils-function";
+import { isObject } from "@loadsmart/utils-object";
+//#region src/tools/conditional.ts
+/**
+* Utility to generate style/class name conditions based on a components props.
+* Expected prop values can be a single value, an array of values or a function/callback.
+* @example
+* ```jsx
+* whenProps({
+*  'prop-a': true, // checks `props['prop-a']` === true`
+*  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`
+*  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`
+*  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`
+* })
+* ```
+* @param conditions
+* @returns Returns function that consumes component props.
+*/
+function whenProps(conditions) {
+	return function(props) {
+		return toArray(conditions).some((condition) => {
+			return Object.keys(condition).every((key) => {
+				const propValue = get_default(props, key);
+				const conditionValue = condition[key];
+				if (Array.isArray(conditionValue)) return toArray(conditionValue).includes(propValue);
+				if (isFunction(conditionValue)) return Boolean(conditionValue(propValue));
+				return conditionValue === propValue;
+			});
+		});
+	};
+}
+function handleConditionObject(condition, props) {
+	return Object.keys(condition).reduce((acc, key) => {
+		let value = condition[key];
+		if (isFunction(value)) value = value(props);
+		if (value) {
+			const result = getToken(key, props) ?? key;
+			return [...acc, result];
+		}
+		return acc;
+	}, []).join(" ");
+}
+/**
+* Concatenate style properties or class names conditionally.
+* Conditions can be functions that consume components props,
+* objects, strings, or numbers (that will be coerced to strings).
+* @example
+* ```jsx
+* conditional(1, 'some-class', {
+*  'class-a': true,
+*  'class-b': (props) => props.showClassB,
+* }, (props) => props.className)
+* ```
+* @param conditions
+* @returns Returns function that consumes component props.
+*/
+function conditional(...conditions) {
+	return function(props) {
+		let classes = [];
+		for (let i = 0; i < conditions.length; i++) {
+			const condition = conditions[i];
+			if (isFunction(condition)) classes.push(condition(props));
+			else if (isObject(condition)) classes = classes.concat(handleConditionObject(condition, props));
+			else if (condition) classes.push(String(condition));
+		}
+		return classes.join(" ");
+	};
+}
+//#endregion
+//#region src/tools/prop.ts
+function compare(...args) {
+	const [value, defaultValue] = args;
+	if (value == null || value === false || Number.isNaN(value)) return defaultValue || value;
+	if (typeof value === "string" && value.length === 0) return defaultValue || value;
+	return value;
+}
+/**
+* Retrieve the key value from the props object
+* @example
+* ```jsx
+* -transform: scaleY(${(props) => props.$height || 1});
+* +transform: scaleY(${prop('$height', 1)});
+* ```
+* @param name a valid property name from the object
+* @param defaultValue a fallback value in case the property value is invalid
+* @param comparatorFn a function to be used to decide between value or defaultValue
+* @returns Returns function that consumes component props.
+*/
+function prop(name, defaultValue, comparatorFn = compare) {
+	return (props) => comparatorFn(props[name], defaultValue);
+}
+//#endregion
+export { conditional, prop, whenProps };
+
+//# sourceMappingURL=tools.js.map

package/dist/tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tools.js","names":["isObject","isFunction","F","getToken","ThemeToken","ThemedProps","get","toArray","WhenProps","K","value","When","P","Key","whenProps","conditions","Narrow","props","safeConditions","some","condition","keys","Object","every","key","propValue","conditionValue","Array","isArray","includes","Boolean","ConditionObject","Record","handleConditionObject","res","reduce","acc","tokenKey","result","join","Condition","conditional","classes","i","length","push","concat","String","compare","args","value","defaultValue","Number","isNaN","length","prop","P","name","K","NonNullable","comparatorFn","props"],"sources":["../src/tools/conditional.ts","../src/tools/prop.ts"],"sourcesContent":["import { isObject } from '@loadsmart/utils-object'\nimport { isFunction } from '@loadsmart/utils-function'\nimport type { F } from 'ts-toolbelt'\n\nimport { getToken } from 'theming'\nimport type { ThemeToken, ThemedProps } from 'theming'\nimport get from 'utils/toolset/get'\nimport toArray from 'utils/toolset/toArray'\n\ntype WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)\n\nexport type When<P> = {\n  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined\n}\n\n/**\n * Utility to generate style/class name conditions based on a components props.\n * Expected prop values can be a single value, an array of values or a function/callback.\n * @example\n * ```jsx\n * whenProps({\n *  'prop-a': true, // checks `props['prop-a']` === true`\n *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`\n *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`\n *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`\n * })\n * ```\n * @param conditions\n * @returns Returns function that consumes component props.\n */\nexport function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {\n  return function (props: P): boolean {\n    const safeConditions = toArray(conditions)\n\n    return safeConditions.some((condition) => {\n      const keys = Object.keys(condition)\n\n      return keys.every((key) => {\n        const propValue = get(props, key) as P[keyof P]\n        const conditionValue = condition[key as keyof typeof condition]\n\n        if (Array.isArray(conditionValue)) {\n          return toArray(conditionValue).includes(propValue)\n        }\n        if (isFunction(conditionValue)) {\n          return Boolean(conditionValue(propValue))\n        }\n        return (conditionValue as unknown) === propValue\n      })\n    })\n  }\n}\n\ntype ConditionObject<P> = Record<\n  string,\n  string | number | boolean | ((props: P) => boolean) | undefined\n>\n\nfunction handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {\n  const keys = Object.keys(condition)\n\n  const res = keys.reduce<string[]>((acc, key) => {\n    let value = condition[key]\n\n    if (isFunction(value)) {\n      value = value(props)\n    }\n\n    if (value) {\n      const tokenKey = key as ThemeToken\n\n      const result = (getToken(tokenKey, props as unknown as ThemedProps) ?? key) as string\n      return [...acc, result]\n    }\n\n    return acc\n  }, [])\n\n  return res.join(' ')\n}\n\ntype Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)\n\n/**\n * Concatenate style properties or class names conditionally.\n * Conditions can be functions that consume components props,\n * objects, strings, or numbers (that will be coerced to strings).\n * @example\n * ```jsx\n * conditional(1, 'some-class', {\n *  'class-a': true,\n *  'class-b': (props) => props.showClassB,\n * }, (props) => props.className)\n * ```\n * @param conditions\n * @returns Returns function that consumes component props.\n */\nfunction conditional<P>(...conditions: Condition<P>[]) {\n  return function (props: P): string {\n    let classes: string[] = []\n\n    for (let i = 0; i < conditions.length; i++) {\n      const condition = conditions[i]\n\n      if (isFunction(condition)) {\n        classes.push(condition(props))\n      } else if (isObject(condition)) {\n        classes = classes.concat(handleConditionObject(condition, props))\n      } else if (condition) {\n        classes.push(String(condition))\n      }\n    }\n\n    return classes.join(' ')\n  }\n}\n\nexport default conditional\n","function compare(...args: any[]): unknown {\n  const [value, defaultValue] = args\n\n  if (value == null || value === false || Number.isNaN(value)) {\n    return defaultValue || value\n  }\n\n  if (typeof value === 'string' && value.length === 0) {\n    return defaultValue || value\n  }\n\n  return value\n}\n\n/**\n * Retrieve the key value from the props object\n * @example\n * ```jsx\n * -transform: scaleY(${(props) => props.$height || 1});\n * +transform: scaleY(${prop('$height', 1)});\n * ```\n * @param name a valid property name from the object\n * @param defaultValue a fallback value in case the property value is invalid\n * @param comparatorFn a function to be used to decide between value or defaultValue\n * @returns Returns function that consumes component props.\n */\nfunction prop<P, K extends keyof P = keyof P>(\n  name: K,\n  defaultValue?: NonNullable<P[K]>,\n  comparatorFn = compare\n) {\n  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]\n}\n\nexport default prop\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBc,UAAaC,YAAqD;AAChF,QAAO,SAAUE,OAAmB;AAGlC,SAFuBV,QAAQQ,WAAW,CAEpBI,MAAMC,cAAc;AAGxC,UAFaE,OAAOD,KAAKD,UAAU,CAEvBG,OAAOC,QAAQ;IACzB,MAAMC,YAAYnB,YAAIW,OAAOO,IAAI;IACjC,MAAME,iBAAiBN,UAAUI;AAEjC,QAAIG,MAAMC,QAAQF,eAAe,CAC/B,QAAOnB,QAAQmB,eAAe,CAACG,SAASJ,UAAU;AAEpD,QAAIxB,WAAWyB,eAAe,CAC5B,QAAOI,QAAQJ,eAAeD,UAAU,CAAC;AAE3C,WAAQC,mBAA+BD;KACvC;IACF;;;AASN,SAASQ,sBAAyBb,WAA+BH,OAAkB;AAoBjF,QAnBaK,OAAOD,KAAKD,UAAU,CAElBe,QAAkBC,KAAKZ,QAAQ;EAC9C,IAAId,QAAQU,UAAUI;AAEtB,MAAIvB,WAAWS,MAAM,CACnBA,SAAQA,MAAMO,MAAM;AAGtB,MAAIP,OAAO;GAGT,MAAM4B,SAAUnC,SAFCqB,KAEkBP,MAAgC,IAAIO;AACvE,UAAO,CAAC,GAAGY,KAAKE,OAAO;;AAGzB,SAAOF;IACN,EAAE,CAAC,CAEKG,KAAK,IAAI;;;;;;;;;;;;;;;;AAmBtB,SAASE,YAAe,GAAG1B,YAA4B;AACrD,QAAO,SAAUE,OAAkB;EACjC,IAAIyB,UAAoB,EAAE;AAE1B,OAAK,IAAIC,IAAI,GAAGA,IAAI5B,WAAW6B,QAAQD,KAAK;GAC1C,MAAMvB,YAAYL,WAAW4B;AAE7B,OAAI1C,WAAWmB,UAAU,CACvBsB,SAAQG,KAAKzB,UAAUH,MAAM,CAAC;YACrBjB,SAASoB,UAAU,CAC5BsB,WAAUA,QAAQI,OAAOb,sBAAsBb,WAAWH,MAAM,CAAC;YACxDG,UACTsB,SAAQG,KAAKE,OAAO3B,UAAU,CAAC;;AAInC,SAAOsB,QAAQH,KAAK,IAAI;;;;;ACjH5B,SAASS,QAAQ,GAAGC,MAAsB;CACxC,MAAM,CAACC,OAAOC,gBAAgBF;AAE9B,KAAIC,SAAS,QAAQA,UAAU,SAASE,OAAOC,MAAMH,MAAM,CACzD,QAAOC,gBAAgBD;AAGzB,KAAI,OAAOA,UAAU,YAAYA,MAAMI,WAAW,EAChD,QAAOH,gBAAgBD;AAGzB,QAAOA;;;;;;;;;;;;;;AAeT,SAASK,KACPE,MACAN,cACAS,eAAeZ,SACf;AACA,SAAQa,UAAmBD,aAAaC,MAAMJ,OAAON,aAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "8.0.6",
+  "version": "8.1.0-beta.1",
   "description": "Miranda UI, a React UI library",
   "type": "module",
   "main": "dist/index.js",
@@ -8,6 +8,20 @@
     "dist"
   ],
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./theming": {
+      "import": "./dist/theming/index.js",
+      "types": "./dist/theming/index.d.ts"
+    },
+    "./testing": {
+      "import": "./dist/testing/index.js",
+      "types": "./dist/testing/index.d.ts"
+    }
+  },
   "scripts": {
     "start": "yarn dev",
     "dev": "storybook dev -p 6006",
@@ -40,6 +54,7 @@
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
     "@loadsmart/miranda-tokens": "^4.26.0",
+    "@rolldown/plugin-babel": "^0.2.2",
     "@storybook/addon-a11y": "^10.3.3",
     "@storybook/addon-docs": "^10.3.3",
     "@storybook/addon-links": "^10.3.3",
@@ -57,8 +72,7 @@
     "@types/node": "^24.12.0",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
-    "@types/styled-components": "^5.1.36",
-    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "babel-plugin-styled-components": "^2.1.4",
     "chance": "^1.1.13",
     "commitizen": "^4.3.1",
@@ -91,12 +105,12 @@
     "react-is": "^18.3.1",
     "semantic-release": "^25.0.3",
     "storybook": "^10.3.3",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.3.11",
     "tailwindcss": "^4.2.2",
     "ts-toolbelt": "^9.6.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.57.2",
-    "vite": "^7.3.1",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^4.5.0"
   },
@@ -105,7 +119,7 @@
     "@testing-library/react": ">=11.2.6",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": ">=5.3.0"
+    "styled-components": ">=6.0.0"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.8",

package/dist/DragDropFile.context-oKnUu6d3.js

@@ -1,33 +0,0 @@
-import React__default, { createContext, useCallback, useMemo, useContext } from "react";
-const DragDropFileContext = createContext(void 0);
-const DragDropFileProvider = ({
-  fileList,
-  onFilesAdded,
-  onFileRemoved,
-  onRetryUpload,
-  children
-}) => {
-  const onRemoveFile = useCallback((removedItem, index) => {
-    onFileRemoved([...fileList.slice(0, index), ...fileList.slice(index + 1)], removedItem, index);
-  }, [fileList]);
-  const contextValue = useMemo(() => ({
-    fileList,
-    onFilesAdded,
-    onRemoveFile,
-    onRetryUpload
-  }), [fileList, onFilesAdded, onRemoveFile, onRetryUpload]);
-  return /* @__PURE__ */ React__default.createElement(DragDropFileContext.Provider, { value: contextValue }, children);
-};
-const useDragDropFileContext = () => {
-  const context = useContext(DragDropFileContext);
-  if (!context) {
-    throw new Error("useDragDropFileContext must be used within an DragDropFileProvider");
-  }
-  return context;
-};
-export {
-  DragDropFileContext as D,
-  DragDropFileProvider as a,
-  useDragDropFileContext as u
-};
-//# sourceMappingURL=DragDropFile.context-oKnUu6d3.js.map

package/dist/DragDropFile.context-oKnUu6d3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropFile.context-oKnUu6d3.js","sources":["../src/components/DragDropFile/DragDropFile.context.tsx"],"sourcesContent":["import React, { createContext, useContext, useCallback, useMemo } from 'react'\n\nimport type { DragDropFileContextValue, DragDropFileProviderProps, FileWithStatus } from './types'\n\nexport const DragDropFileContext = createContext<DragDropFileContextValue | undefined>(undefined)\n\nexport const DragDropFileProvider = ({\n  fileList,\n  onFilesAdded,\n  onFileRemoved,\n  onRetryUpload,\n  children,\n}: DragDropFileProviderProps) => {\n  const onRemoveFile = useCallback(\n    (removedItem: FileWithStatus, index: number) => {\n      onFileRemoved([...fileList.slice(0, index), ...fileList.slice(index + 1)], removedItem, index)\n    },\n    [fileList]\n  )\n\n  const contextValue = useMemo(\n    () => ({ fileList, onFilesAdded, onRemoveFile, onRetryUpload }),\n    [fileList, onFilesAdded, onRemoveFile, onRetryUpload]\n  )\n\n  return (\n    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>\n  )\n}\n\nexport const useDragDropFileContext = (): DragDropFileContextValue => {\n  const context = useContext(DragDropFileContext)\n\n  if (!context) {\n    throw new Error('useDragDropFileContext must be used within an DragDropFileProvider')\n  }\n\n  return context\n}\n"],"names":["DragDropFileContext","createContext","undefined","DragDropFileProvider","fileList","onFilesAdded","onFileRemoved","onRetryUpload","children","onRemoveFile","useCallback","removedItem","index","slice","contextValue","useMemo","useDragDropFileContext","context","useContext","Error"],"mappings":";AAIO,MAAMA,sBAAsBC,cAAoDC,MAAS;AAEzF,MAAMC,uBAAuBA,CAAC;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACyB,MAAM;AAC/B,QAAMC,eAAeC,YACnB,CAACC,aAA6BC,UAAkB;AAC9CN,kBAAc,CAAC,GAAGF,SAASS,MAAM,GAAGD,KAAK,GAAG,GAAGR,SAASS,MAAMD,QAAQ,CAAC,CAAC,GAAGD,aAAaC,KAAK;AAAA,EAC/F,GACA,CAACR,QAAQ,CACX;AAEA,QAAMU,eAAeC,QACnB,OAAO;AAAA,IAAEX;AAAAA,IAAUC;AAAAA,IAAcI;AAAAA,IAAcF;AAAAA,EAAAA,IAC/C,CAACH,UAAUC,cAAcI,cAAcF,aAAa,CACtD;AAEA,sDACG,oBAAoB,UAApB,EAA6B,OAAOO,gBAAeN,QAAS;AAEjE;AAEO,MAAMQ,yBAAyBA,MAAgC;AACpE,QAAMC,UAAUC,WAAWlB,mBAAmB;AAE9C,MAAI,CAACiB,SAAS;AACZ,UAAM,IAAIE,MAAM,oEAAoE;AAAA,EACtF;AAEA,SAAOF;AACT;"}