gantri-components 2.234.0 → 2.235.7

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

@@ -235,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.234.0",
+  "version": "2.235.7",
   "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",