@alto-avios/alto-ui 3.4.0 → 3.4.1

package/dist/utils/breakpoint/responsive.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from './theme/breakpoints';
+/**
+ * Accept either a single string prop='value' or an object keyed by breakpoints prop={base: 'value', md: 'value'}.
+ *
+ */
+export type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * Upgrade only the keys in K to be responsive.
+ */
+export type WithResponsive<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]?: ResponsiveProp<T[P]>;
+};
+/**
+ * Resolve a responsive prop to a single value based on the current breakpoint.
+ * This is a mobile-first approach, meaning that the base value is used for
+ * smaller breakpoints, and larger values are used for larger breakpoints.
+ */
+export declare function resolveResponsiveProp<T>(value: ResponsiveProp<T>, current: Breakpoint): T;

package/dist/utils/breakpoint/responsive.js

@@ -0,0 +1,22 @@
+import { BREAKPOINT_ORDER } from "./theme/breakpoints.js";
+function resolveResponsiveProp(value, current) {
+  if (typeof value !== "object" || value === null) {
+    return value;
+  }
+  const typedValue = value;
+  if (typedValue[current] !== void 0) {
+    return typedValue[current];
+  }
+  const startIndex = BREAKPOINT_ORDER.indexOf(current);
+  for (let i = startIndex - 1; i >= 0; i--) {
+    const lowerKey = BREAKPOINT_ORDER[i];
+    if (typedValue[lowerKey] !== void 0) {
+      return typedValue[lowerKey];
+    }
+  }
+  return Object.values(typedValue)[0];
+}
+export {
+  resolveResponsiveProp
+};
+//# sourceMappingURL=responsive.js.map

package/dist/utils/breakpoint/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/utils/breakpoint/theme/breakpoints.d.ts

@@ -0,0 +1,13 @@
+export declare const BREAKPOINTS: {
+    readonly base: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1440;
+    readonly '2xl': 1920;
+};
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Mobile-first order (small → large)
+ */
+export declare const BREAKPOINT_ORDER: Breakpoint[];

package/dist/utils/breakpoint/theme/breakpoints.js

@@ -0,0 +1,27 @@
+const BREAKPOINTS = {
+  base: 0,
+  //xs
+  sm: 480,
+  //sm
+  md: 768,
+  //md
+  lg: 1024,
+  //lg
+  xl: 1440,
+  //xl
+  "2xl": 1920
+  //2xl
+};
+const BREAKPOINT_ORDER = [
+  "base",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl"
+];
+export {
+  BREAKPOINTS,
+  BREAKPOINT_ORDER
+};
+//# sourceMappingURL=breakpoints.js.map

package/dist/utils/breakpoint/theme/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/position/position.js

@@ -14,16 +14,16 @@ import '../../assets/position.css';const styles = {
 const positionVariants = cva("", {
   variants: {
     position: {
-      absolute: styles["positionAbsolute"],
-      static: styles["positionStatic"],
-      relative: styles["positionRelative"],
-      fixed: styles["positionFixed"],
-      sticky: styles["positionSticky"],
-      inherit: styles["positionInherit"],
-      initial: styles["positionInitial"],
-      revert: styles["positionRevert"],
-      revertLayer: styles["positionRevertLayer"],
-      unset: styles["positionUnset"]
+      absolute: styles["position-absolute"],
+      static: styles["position-static"],
+      relative: styles["position-relative"],
+      fixed: styles["position-fixed"],
+      sticky: styles["position-sticky"],
+      inherit: styles["position-inherit"],
+      initial: styles["position-initial"],
+      revert: styles["position-revert"],
+      revertLayer: styles["position-revert-layer"],
+      unset: styles["position-unset"]
     }
   },
   defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",
@@ -40,7 +40,8 @@
     "class-variance-authority": "^0.7.0",
     "react-aria-components": "^1.5.0",
     "react-number-format": "^5.4.3",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "use-breakpoint": "^4.0.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
@@ -71,6 +72,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "axe-playwright": "^2.0.3",
+    "chromatic": "^11.28.2",
     "commitizen": "^4.3.1",
     "cssnano": "^7.0.4",
     "eslint": "^9.14.0",