@box/blueprint-web 12.133.0 → 12.133.1

package/dist/lib-esm/grid-list-v2/index.d.ts

@@ -1,4 +1,4 @@
-export type { FileCategory, GridListV2ActionIconButtonProps, GridListV2ActionsProps, GridListV2HeaderProps, GridListV2ItemProps, GridListV2Props, GridListV2SubtitleProps, GridListV2ThumbnailProps, GridV2Variant, } from './types';
+export type { GridListV2ActionIconButtonProps, GridListV2ActionsProps, GridListV2HeaderProps, GridListV2ItemProps, GridListV2Props, GridListV2SubtitleProps, GridListV2ThumbnailProps, GridV2Variant, } from './types';
 export declare const GridListV2: import("react").ForwardRefExoticComponent<import("./types").GridListV2Props & import("react").RefAttributes<HTMLDivElement>> & {
     Item: import("react").ForwardRefExoticComponent<import("../util-components/base-grid-list-item").BaseGridListItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("../util-components/base-grid-list-item").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/grid-list-v2/types.d.ts

@@ -1,6 +1,5 @@
 import { type RequireAllOrNone } from 'type-fest';
 import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListDescriptionProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../util-components/base-grid-list-item';
-export { type FileCategory } from '../types/file-category';
 export type { GridV2Variant } from '../util-components/base-grid-list-item';
 export type GridListV2HeaderProps = BaseGridListHeaderProps;
 export type GridListV2ThumbnailProps = BaseGridListThumbnailProps;

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item-thumbnail.js

@@ -6,92 +6,13 @@ import { Text } from '../../text/text.js';
 import { useBaseGridListItemContext } from './base-grid-list-item.js';
 import styles from './base-grid-list-item.module.js';
 
-// Color tokens grouped by visual color to minimize bundle size
-// Each token uses Blueprint variable with legacy fallback
-const C = {
-  // Watermelon Red 120 (#BE2C46) - pdf, powerpoint-presentation, code
-  red: 'var(--bp-watermelon-red-120, var(--watermelon-red-120))',
-  // Orange 130 (#A95A12) - boxcanvas, threed, vector, pages, google-slides, illustrator, presentation
-  orange: 'var(--bp-orange-130, var(--orange-120))',
-  // Green Light 135 (#197E54) - image, excel-spreadsheet, numbers, google-sheets, spreadsheet
-  green: 'var(--bp-green-light-135, var(--green-light-120))',
-  // Light Blue 115 (#1F72D6) - photoshop, dwg, keynote, video
-  lightBlue: 'var(--bp-light-blue-115, var(--light-blue-110))',
-  // Light Blue 135 (#1757A4) - word-document, google-docs, text
-  darkBlue: 'var(--bp-light-blue-135, var(--light-blue-120))',
-  // Purple Rain 100 (#9F3FED) - audio
-  purple: 'var(--bp-purple-rain-100, var(--purple-rain-100))',
-  // Text on Light (#222222) - default for unspecified categories
-  gray: 'var(--bp-gray-100, var(--gray-100))'
-};
-/** Color mapping for file categories, optimized for bundle size */
-const FILE_CATEGORY_COLORS = {
-  // Purple Rain 100
-  audio: C.purple,
-  // Orange 130
-  boxcanvas: C.orange,
-  // Default (text-on-light)
-  boxnote: C.gray,
-  // Watermelon Red 120
-  code: C.red,
-  // Default (text-on-light)
-  document: C.gray,
-  // Default (text-on-light)
-  'docuworks-binder': C.gray,
-  // Green Light 135
-  'docuworks-file': C.green,
-  // Light Blue 115
-  dwg: C.lightBlue,
-  // Green Light 135
-  'excel-spreadsheet': C.green,
-  // Light Blue 135
-  'google-docs': C.darkBlue,
-  // Green Light 135
-  'google-sheets': C.green,
-  // Orange 130
-  'google-slides': C.orange,
-  // Orange 130
-  illustrator: C.orange,
-  // Green Light 135
-  image: C.green,
-  // Default (text-on-light)
-  indesign: C.gray,
-  // Light Blue 115
-  keynote: C.lightBlue,
-  // Green Light 135
-  numbers: C.green,
-  // Orange 130
-  pages: C.orange,
-  // Watermelon Red 120
-  pdf: C.red,
-  // Light Blue 115
-  photoshop: C.lightBlue,
-  // Watermelon Red 120
-  'powerpoint-presentation': C.red,
-  // Orange 130
-  presentation: C.orange,
-  // Green Light 135
-  spreadsheet: C.green,
-  // Light Blue 135
-  text: C.darkBlue,
-  // Orange 130
-  threed: C.orange,
-  // Orange 130
-  vector: C.orange,
-  // Light Blue 115
-  video: C.lightBlue,
-  // Light Blue 135
-  'word-document': C.darkBlue,
-  // Default (text-on-light)
-  zip: C.gray
-};
 const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumbnail(props, forwardedRef) {
   const {
     children,
     className,
+    extensionColor,
     hasCustomSize,
     fileExtension,
-    fileCategory,
     statusBadge,
     ...rest
   } = props;
@@ -100,7 +21,6 @@ const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumb
   } = useBaseGridListItemContext();
   // Normalize file extension to uppercase for display (e.g., "pdf" → "PDF")
   const normalizedExtension = fileExtension?.toUpperCase();
-  const extensionColor = fileCategory ? FILE_CATEGORY_COLORS[fileCategory] : undefined;
   const hasBadges = !loading && (statusBadge || normalizedExtension);
   return jsxs("div", {
     ...rest,

package/dist/lib-esm/util-components/base-grid-list-item/index.d.ts

@@ -33,4 +33,4 @@ export declare const BaseGridList: import("react").ForwardRefExoticComponent<imp
      */
     ActionIconButton: import("react").ForwardRefExoticComponent<(Omit<import("../../primitives/icon-button/types").IconButtonVariantsProps, "ref"> | Omit<import("../../primitives/icon-button/types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 };
-export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, FileCategory, GridV2Variant, } from './types';
+export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, GridV2Variant, } from './types';

package/dist/lib-esm/util-components/base-grid-list-item/types.d.ts

@@ -1,9 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type GridListItemProps, type GridListProps as RAGridListProps } from 'react-aria-components';
 import { type IconButtonProps } from '../../primitives/icon-button';
-import { type FileCategory } from '../../types/file-category';
 import { type Modify } from '../../types/modify';
-export type { FileCategory };
 export interface BaseGridListLayoutProp {
     layoutStyle: 'grid' | 'grid-v2' | 'list' | 'list-v2' | 'small-list';
 }
@@ -79,19 +77,18 @@ export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'> & {
      */
     fileExtension?: string;
     /**
-     * File category that determines the pill's text color.
-     * Use `getFileCategoryByExtension(extension)` from `@box/item-icon` to get this value.
+     * Extension color of the file type pill
+     * Use `getColorByExtension(extension)` from `@box/item-icon` to get this value.
      * If not provided, the pill will use the default black text color.
      *
      * @example
      * ```tsx
-     * import { getFileCategoryByExtension } from '@box/item-icon';
+     * import { getColorByExtension } from '@box/item-icon';
      *
-     * const fileCategory = getFileCategoryByExtension('docx'); // returns 'word-document'
-     * // The pill will display "DOCX" with blue text (word-document color)
-     * ```
+     * const extensionColor = getColorByExtension('docx'); // returns 'var(--bp-light-blue-135, var(--light-blue-120))'
+     * The pill will display "DOCX" with dark blue text (word-document color)
      */
-    fileCategory?: FileCategory;
+    extensionColor?: string;
     /**
      * Optional status badge element to render on the thumbnail (left of the file type pill).
      * Typically used for classification badges with tooltips.
@@ -135,3 +132,4 @@ export interface BaseGridListItemContextType {
 export interface BaseGridListItemProps extends GridListItemProps, Omit<BaseGridListItemContextType, 'isItemInteracted' | 'setIsItemInteracted' | 'hasActions' | 'setHasActions'> {
     children?: ReactNode;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.133.0",
+    "version": "12.133.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.99.7",
+        "@box/blueprint-web-assets": "^4.99.8",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.33",
+        "@box/storybook-utils": "^0.16.34",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",

package/dist/lib-esm/types/file-category.d.ts

@@ -1,11 +0,0 @@
-/**
- * File category type for categorizing files by their type/format.
- *
- * These categories match those returned by `getFileCategoryByExtension` from `@box/item-icon`.
- * Due to circular dependency constraints, `@box/blueprint-web` cannot directly import
- * `@box/item-icon`, so consumers should use `getFileCategoryByExtension` in their own code to
- * map file extensions to categories.
- *
- * @see {@link https://git.dev.box.net/Box/frontend-mono/tree/master/packages/group-shared-features/item-icon | @box/item-icon}
- */
-export type FileCategory = 'audio' | 'boxcanvas' | 'boxnote' | 'code' | 'document' | 'docuworks-binder' | 'docuworks-file' | 'dwg' | 'excel-spreadsheet' | 'google-docs' | 'google-sheets' | 'google-slides' | 'illustrator' | 'image' | 'indesign' | 'keynote' | 'numbers' | 'pages' | 'pdf' | 'photoshop' | 'powerpoint-presentation' | 'presentation' | 'spreadsheet' | 'text' | 'threed' | 'vector' | 'video' | 'word-document' | 'zip';