gantri-components 2.233.0 → 2.235.6

package/dist/styles/__tests__/media-style.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/index.d.ts

@@ -1,5 +1,6 @@
 export { getButtonsColors, getThemeColor, getThemeSpacing, palette, spacing, lightTheme, darkTheme, modernLightTheme, modernDarkTheme, createTheme, } from './theme';
 export { themeStyle } from './theme-style';
+export { mediaStyle } from './media-style';
 export { type PaletteColor as Color } from './theme';
 export { ThemeProvider } from './theme-provider';
 export { ScopedThemeProvider } from './scoped-theme-provider';

package/dist/styles/media-style.d.ts

@@ -0,0 +1,56 @@
+import { DefaultTheme } from 'styled-components';
+type Breakpoint = 'lg' | 'md' | 'sm';
+type MediaStyleValue<P = Record<string, unknown>> = any | ((props: P & {
+    theme: DefaultTheme;
+}) => any);
+type MediaStyleMap<P = Record<string, unknown>> = Partial<Record<Breakpoint, MediaStyleValue<P>>>;
+/**
+ * Resolves CSS blocks per breakpoint with a `lg → md → sm` cascade, mirroring
+ * how `ResolutionAwareProp` works on component props.
+ *
+ * - `lg` is the base (no media query) and applies at every breakpoint unless
+ *   overridden.
+ * - `md` is wrapped in `@media (max-width: <md>)` and overrides `lg` for
+ *   tablet and below.
+ * - `sm` is wrapped in `@media (max-width: <sm>)` and overrides everything
+ *   for mobile only.
+ *
+ * Each block must be a `css` tagged template (or a function returning one) —
+ * this enables CSS autocomplete and syntax highlighting in your editor.
+ *
+ * Prefer this over `media.lessThan('md')` / `media.lessThan('sm')` calls
+ * spread across a stylesheet — colocates all breakpoint variants in one block.
+ *
+ * @example
+ * ```ts
+ * import styled, { mediaStyle, css } from 'gantri-components';
+ *
+ * const StyledCard = styled.div`
+ *   border: 1px solid var(--divider-t1);
+ *
+ *   ${mediaStyle({
+ *     lg: css`border-radius: 16px;`,
+ *     md: css`border-radius: 8px;`,
+ *     sm: css`border-radius: 4px;`,
+ *   })}
+ * `;
+ * ```
+ *
+ * Renders to:
+ * ```css
+ * border-radius: 16px;
+ * @media (max-width: 1024px) { border-radius: 8px; }
+ * @media (max-width: 720px)  { border-radius: 4px; }
+ * ```
+ *
+ * Use a function when you need to read styled-component props:
+ * ```ts
+ * ${mediaStyle<{ $highlighted: boolean }>({
+ *   lg: ({ $highlighted }) => css`
+ *     background: ${$highlighted ? 'var(--surface-green-t1)' : 'transparent'};
+ *   `,
+ * })}
+ * ```
+ */
+export declare const mediaStyle: <P = Record<string, unknown>>(styles: Partial<Record<Breakpoint, any>>) => import("styled-components").RuleSet<object>;
+export {};

package/dist/styles/media.d.ts

@@ -3,6 +3,13 @@ export declare const mediaBreakpoints: {
     md: string;
     sm: string;
 };
+/**
+ * @deprecated Prefer `mediaStyle` for `lessThan('md')` / `lessThan('sm')`
+ * use cases — it colocates lg/md/sm CSS blocks in a single declaration with
+ * the same cascade as `ResolutionAwareProp`. This `media` helper remains
+ * exported for backward compatibility with `greaterThan` / `between` cases
+ * that `mediaStyle` does not cover.
+ */
 export declare const media: import("styled-media-query").MediaGenerator<{
     lg: string;
     md: string;

package/dist/styles/theme.d.ts

@@ -1,10 +1,9 @@
 import { DefaultTheme } from 'styled-components';
 import { Property } from 'csstype';
-import { ResolutionAwareProp } from '../types/resolution-aware-prop.type';
-import { ButtonSize, ButtonVariant } from '../components/button/button.types';
-import { BoxDimension } from '../components/box/box.types';
-import { LabelPosition, TextFieldSize, TextFieldVariant } from '../components/text-field';
-import { TextVariant } from '../components/typography';
+import type { ResolutionAwareProp } from '../types';
+import type { ButtonSize, ButtonVariant } from '../components/button/button.types';
+import type { BoxDimension } from '../components/box/box.types';
+import type { LabelPosition, TextFieldSize, TextFieldVariant, TextVariant } from '../components';
 export type PaletteColor = 'amber_100' | 'amber_200' | 'amber_300' | 'amber_400' | 'amber_500' | 'amber_800' | 'amber_900' | 'blue_100' | 'blue_200' | 'blue_300' | 'blue_400' | 'blue_500' | 'blue_800' | 'blue_900' | 'gold_100' | 'gold_200' | 'gold_300' | 'gold_400' | 'gold_500' | 'green_100' | 'green_200' | 'green_300' | 'green_400' | 'green_500' | 'green_800' | 'green_900' | 'monochrome_050' | 'monochrome_100' | 'monochrome_200' | 'monochrome_300' | 'monochrome_400' | 'monochrome_500' | 'monochrome_600' | 'monochrome_700' | 'monochrome_800' | 'monochrome_900' | 'monochrome_black' | 'monochrome_white' | 'pink_300' | 'pink_400' | 'pink_500' | 'red_100' | 'red_200' | 'red_300' | 'red_400' | 'red_500' | 'red_800' | 'red_900' | 'translucent_black_t1' | 'translucent_black_t2' | 'translucent_cream' | 'translucent_white' | 'yellow_100' | 'yellow_200' | 'yellow_300' | 'yellow_400' | 'yellow_500' | 'yellow_800' | 'yellow_900' | string;
 export declare const palette: Record<PaletteColor, string>;
 declare module 'styled-components' {
@@ -236,292 +235,29 @@ export interface ProductColorDetails {
     shortColorName: string;
     status: ProductColorStatus;
 }
-declare const productColorsDefinition: {
-    blossompink: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    canyon: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    carbon: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    cobalt: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    coral: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    fog: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    forest: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    gantri: {
-        availability: {
-            flag: "allowGantriColors";
-            type: "flag-gated";
-        };
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    glossysnowwhite: {
-        availability: {
-            productIds: number[];
-            type: "only-on-products";
-        };
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    hibiscus: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    lichen: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    lilac: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    magnolia: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    manzanita: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    meadow: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    midnight: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    mist: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    mustard: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    olive: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    peach: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    persimmon: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    poppy: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sage: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sand: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sedona: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sky: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    smoke: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    snow: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sproutgreen: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "archived";
-    };
-    spruce: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    stone: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    sunrise: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-    walnut: {
-        code: string;
-        fullColorName: string;
-        hexColor: string;
-        inventoryColor: string;
-        shortColorName: string;
-        status: "active";
-    };
-};
+/** Shape of a color entry before ProductColorCode is derived. */
+interface ProductColorEntry {
+    availability?: ColorAvailabilityRule;
+    code: string;
+    fullColorName: string;
+    hexColor: string;
+    inventoryColor: string;
+    shortColorName: string;
+    status: ProductColorStatus;
+}
+declare const productColorsDefinition: Record<string, ProductColorEntry>;
 export type ProductColorCode = keyof typeof productColorsDefinition;
-export declare const productColorsMap: Record<"blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut", ProductColorDetails>;
+export declare const productColorsMap: Record<string, ProductColorDetails>;
 /** All product color codes, auto-derived from productColorsMap. */
-export declare const allProductColorCodes: ("blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut")[];
+export declare const allProductColorCodes: string[];
 /** Color codes that are currently active. */
-export declare const activeProductColorCodes: ("blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut")[];
+export declare const activeProductColorCodes: string[];
 /** Color codes that have been archived (no longer offered but may exist on past orders). */
-export declare const archivedProductColorCodes: ("blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut")[];
+export declare const archivedProductColorCodes: string[];
 /** @deprecated Use archivedProductColorCodes. Kept for backward compatibility. */
-export declare const retiredProductColorCodes: ("blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut")[];
+export declare const retiredProductColorCodes: string[];
 /** Active color codes for consumer-facing UIs (excludes archived). */
-export declare const consumerProductColorCodes: ("blossompink" | "canyon" | "carbon" | "cobalt" | "coral" | "fog" | "forest" | "gantri" | "glossysnowwhite" | "hibiscus" | "lichen" | "lilac" | "magnolia" | "manzanita" | "meadow" | "midnight" | "mist" | "mustard" | "olive" | "peach" | "persimmon" | "poppy" | "sage" | "sand" | "sedona" | "sky" | "smoke" | "snow" | "sproutgreen" | "spruce" | "stone" | "sunrise" | "walnut")[];
+export declare const consumerProductColorCodes: string[];
 export declare const lightTheme: DefaultTheme;
 export declare const darkTheme: DefaultTheme;
 export declare const modernLightTheme: DefaultTheme;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "gantri-components",
-  "version": "2.233.0",
+  "version": "2.235.6",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "repository": "git@github.com:gantri/gantri-components.git",
+  "repository": "https://github.com/gantri/gantri-components.git",
   "author": "Danny <danny@gantri.com>",
   "sideEffects": false,
   "license": "MIT",