@box/blueprint-web 13.16.2 → 13.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/lib-esm/avatar/avatar.module.js +1 -1
  2. package/dist/lib-esm/avatar/consts.d.ts +1 -1
  3. package/dist/lib-esm/avatar/consts.js +2 -1
  4. package/dist/lib-esm/index.css +92 -70
  5. package/dist/lib-esm/navigation-menu/index.d.ts +3 -1
  6. package/dist/lib-esm/navigation-menu/navigation-menu-item.d.ts +3 -1
  7. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.d.ts +9 -2
  8. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js +25 -12
  9. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js +1 -1
  10. package/dist/lib-esm/primitives/dropdown-menu/index.d.ts +4 -2
  11. package/package.json +3 -3
package/dist/lib-esm/avatar/avatar.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"avatar":"bp_avatar_module_avatar--65941","small":"bp_avatar_module_small--65941","length-1":"bp_avatar_module_length-1--65941","text":"bp_avatar_module_text--65941","length-2":"bp_avatar_module_length-2--65941","medium":"bp_avatar_module_medium--65941","large":"bp_avatar_module_large--65941","length-3":"bp_avatar_module_length-3--65941","length-4":"bp_avatar_module_length-4--65941","xlarge":"bp_avatar_module_xlarge--65941","xxlarge":"bp_avatar_module_xxlarge--65941","badge":"bp_avatar_module_badge--65941","image":"bp_avatar_module_image--65941","loading":"bp_avatar_module_loading--65941","anonymousAvatar":"bp_avatar_module_anonymousAvatar--65941","iconContainer":"bp_avatar_module_iconContainer--65941"};
2
+ var styles = {"avatar":"bp_avatar_module_avatar--a6b5d","xsmall":"bp_avatar_module_xsmall--a6b5d","length-1":"bp_avatar_module_length-1--a6b5d","text":"bp_avatar_module_text--a6b5d","length-2":"bp_avatar_module_length-2--a6b5d","small":"bp_avatar_module_small--a6b5d","medium":"bp_avatar_module_medium--a6b5d","large":"bp_avatar_module_large--a6b5d","length-3":"bp_avatar_module_length-3--a6b5d","length-4":"bp_avatar_module_length-4--a6b5d","xlarge":"bp_avatar_module_xlarge--a6b5d","xxlarge":"bp_avatar_module_xxlarge--a6b5d","badge":"bp_avatar_module_badge--a6b5d","image":"bp_avatar_module_image--a6b5d","loading":"bp_avatar_module_loading--a6b5d","anonymousAvatar":"bp_avatar_module_anonymousAvatar--a6b5d","iconContainer":"bp_avatar_module_iconContainer--a6b5d"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/avatar/consts.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type AvatarSize, type Color } from './types';
2
2
  export declare const iconSizes: Record<AvatarSize, string>;
3
- export declare const AvatarSizes: readonly ["small", "medium", "large", "xlarge", "xxlarge"];
3
+ export declare const AvatarSizes: readonly ["xsmall", "small", "medium", "large", "xlarge", "xxlarge"];
4
4
  export declare const colorsMap: Record<string, Color>;
5
5
  export declare const colors: string[];
package/dist/lib-esm/avatar/consts.js CHANGED
@@ -1,6 +1,7 @@
1
- import { Size9, Size7, Size5, Size4, Size3, Grimace50, Orange50, PurpleRain50, WatermelonRed50, LightBlue50, Yellorange50, GreenLight50, Yellow50, DarkBlue50, BoxBlue50 } from '@box/blueprint-web-assets/tokens/tokens';
1
+ import { Size9, Size7, Size5, Size4, Size3, Size2, Grimace50, Orange50, PurpleRain50, WatermelonRed50, LightBlue50, Yellorange50, GreenLight50, Yellow50, DarkBlue50, BoxBlue50 } from '@box/blueprint-web-assets/tokens/tokens';
2
2
 
3
3
  const iconSizes = {
4
+ xsmall: Size2,
4
5
  small: Size3,
5
6
  medium: Size4,
6
7
  large: Size5,
package/dist/lib-esm/index.css CHANGED
@@ -1884,8 +1884,10 @@
1884
1884
  background-color:initial;
1885
1885
  border:none;
1886
1886
  }
1887
- .bp_avatar_module_avatar--65941[data-modern=false]{
1887
+ .bp_avatar_module_avatar--a6b5d[data-modern=false]{
1888
1888
  --avatar-background-color:var(--gray-10);
1889
+ --avatar-xsmall-width:var(--size-5);
1890
+ --avatar-xsmall-height:var(--size-5);
1889
1891
  --avatar-small-width:var(--size-6);
1890
1892
  --avatar-small-height:var(--size-6);
1891
1893
  --avatar-medium-width:var(--size-7);
@@ -1904,7 +1906,7 @@
1904
1906
  text-decoration:var(--body-default-bold-text-decoration);
1905
1907
  text-transform:var(--body-default-bold-text-case);
1906
1908
  }
1907
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_medium--65941 .bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_small--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_small--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
1909
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_medium--a6b5d .bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_small--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_small--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_xsmall--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_xsmall--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1908
1910
  font-family:var(--label-bold-font-family);
1909
1911
  font-size:var(--label-bold-font-size);
1910
1912
  font-weight:var(--label-bold-font-weight);
@@ -1913,10 +1915,10 @@
1913
1915
  text-decoration:var(--label-bold-text-decoration);
1914
1916
  text-transform:var(--label-bold-text-case);
1915
1917
  }
1916
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_large--65941 .bp_avatar_module_text--65941{
1918
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_large--a6b5d .bp_avatar_module_text--a6b5d{
1917
1919
  font-size:.5rem;
1918
1920
  }
1919
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_large--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_large--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
1921
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_large--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_large--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1920
1922
  font-family:var(--body-default-bold-font-family);
1921
1923
  font-size:var(--body-default-bold-font-size);
1922
1924
  font-weight:var(--body-default-bold-font-weight);
@@ -1925,10 +1927,10 @@
1925
1927
  text-decoration:var(--body-default-bold-text-decoration);
1926
1928
  text-transform:var(--body-default-bold-text-case);
1927
1929
  }
1928
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_large--65941 .bp_avatar_module_length-3--65941.bp_avatar_module_text--65941{
1930
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_large--a6b5d .bp_avatar_module_length-3--a6b5d.bp_avatar_module_text--a6b5d{
1929
1931
  font-size:.6875rem;
1930
1932
  }
1931
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_large--65941 .bp_avatar_module_length-4--65941.bp_avatar_module_text--65941{
1933
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_large--a6b5d .bp_avatar_module_length-4--a6b5d.bp_avatar_module_text--a6b5d{
1932
1934
  font-family:var(--label-bold-font-family);
1933
1935
  font-size:var(--label-bold-font-size);
1934
1936
  font-weight:var(--label-bold-font-weight);
@@ -1937,7 +1939,7 @@
1937
1939
  text-decoration:var(--label-bold-text-decoration);
1938
1940
  text-transform:var(--label-bold-text-case);
1939
1941
  }
1940
- .bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_xlarge--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=false].bp_avatar_module_xlarge--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
1942
+ .bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_xlarge--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=false].bp_avatar_module_xlarge--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1941
1943
  font-family:var(--title-x-large-font-family);
1942
1944
  font-size:var(--title-x-large-font-size);
1943
1945
  font-weight:var(--title-x-large-font-weight);
@@ -1947,8 +1949,10 @@
1947
1949
  text-transform:var(--title-x-large-text-case);
1948
1950
  }
1949
1951
 
1950
- .bp_avatar_module_avatar--65941[data-modern=true]{
1952
+ .bp_avatar_module_avatar--a6b5d[data-modern=true]{
1951
1953
  --avatar-background-color:var(--bp-gray-10);
1954
+ --avatar-xsmall-width:var(--bp-size-050);
1955
+ --avatar-xsmall-height:var(--bp-size-050);
1952
1956
  --avatar-small-width:var(--bp-size-060);
1953
1957
  --avatar-small-height:var(--bp-size-060);
1954
1958
  --avatar-medium-width:var(--bp-size-070);
@@ -1966,7 +1970,7 @@
1966
1970
  letter-spacing:var(--bp-font-letter-spacing-01);
1967
1971
  line-height:var(--bp-font-line-height-04);
1968
1972
  }
1969
- .bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_medium--65941 .bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_small--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_small--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
1973
+ .bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_medium--a6b5d .bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_small--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_small--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_xsmall--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_xsmall--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1970
1974
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
1971
1975
  font-size:var(--bp-font-size-02);
1972
1976
  font-style:normal;
@@ -1974,7 +1978,7 @@
1974
1978
  letter-spacing:var(--bp-font-letter-spacing-02);
1975
1979
  line-height:var(--bp-font-line-height-03);
1976
1980
  }
1977
- .bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_large--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_large--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
1981
+ .bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_large--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_large--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1978
1982
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
1979
1983
  font-size:var(--bp-font-size-05);
1980
1984
  font-style:normal;
@@ -1982,10 +1986,10 @@
1982
1986
  letter-spacing:var(--bp-font-letter-spacing-01);
1983
1987
  line-height:var(--bp-font-line-height-04);
1984
1988
  }
1985
- .bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_large--65941 .bp_avatar_module_length-3--65941.bp_avatar_module_text--65941{
1989
+ .bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_large--a6b5d .bp_avatar_module_length-3--a6b5d.bp_avatar_module_text--a6b5d{
1986
1990
  font-size:.6875rem;
1987
1991
  }
1988
- .bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_large--65941 .bp_avatar_module_length-4--65941.bp_avatar_module_text--65941{
1992
+ .bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_large--a6b5d .bp_avatar_module_length-4--a6b5d.bp_avatar_module_text--a6b5d{
1989
1993
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
1990
1994
  font-size:var(--bp-font-size-02);
1991
1995
  font-style:normal;
@@ -1993,7 +1997,7 @@
1993
1997
  letter-spacing:var(--bp-font-letter-spacing-02);
1994
1998
  line-height:var(--bp-font-line-height-03);
1995
1999
  }
1996
- .bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_xlarge--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941[data-modern=true].bp_avatar_module_xlarge--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
2000
+ .bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_xlarge--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d[data-modern=true].bp_avatar_module_xlarge--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
1997
2001
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
1998
2002
  font-size:var(--bp-font-size-10);
1999
2003
  font-style:normal;
@@ -2002,7 +2006,7 @@
2002
2006
  line-height:var(--bp-font-line-height-06);
2003
2007
  }
2004
2008
 
2005
- .bp_avatar_module_avatar--65941{
2009
+ .bp_avatar_module_avatar--a6b5d{
2006
2010
  all:unset;
2007
2011
  align-items:center;
2008
2012
  background-color:var(--avatar-background-color);
@@ -2013,7 +2017,7 @@
2013
2017
  justify-content:center;
2014
2018
  position:relative;
2015
2019
  }
2016
- .bp_avatar_module_avatar--65941 .bp_avatar_module_text--65941{
2020
+ .bp_avatar_module_avatar--a6b5d .bp_avatar_module_text--a6b5d{
2017
2021
  align-items:center;
2018
2022
  border-radius:50%;
2019
2023
  display:flex;
@@ -2021,91 +2025,98 @@
2021
2025
  justify-content:center;
2022
2026
  width:100%;
2023
2027
  }
2024
- .bp_avatar_module_avatar--65941.bp_avatar_module_small--65941{
2028
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xsmall--a6b5d{
2029
+ height:var(--avatar-xsmall-height);
2030
+ width:var(--avatar-xsmall-width);
2031
+ }
2032
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xsmall--a6b5d .bp_avatar_module_text--a6b5d{
2033
+ font-size:.375rem;
2034
+ }
2035
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_small--a6b5d{
2025
2036
  height:var(--avatar-small-height);
2026
2037
  width:var(--avatar-small-width);
2027
2038
  }
2028
- .bp_avatar_module_avatar--65941.bp_avatar_module_small--65941 .bp_avatar_module_text--65941{
2039
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_small--a6b5d .bp_avatar_module_text--a6b5d{
2029
2040
  font-size:.5rem;
2030
2041
  }
2031
- .bp_avatar_module_avatar--65941.bp_avatar_module_medium--65941{
2042
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_medium--a6b5d{
2032
2043
  height:var(--avatar-medium-height);
2033
2044
  width:var(--avatar-medium-width);
2034
2045
  }
2035
- .bp_avatar_module_avatar--65941.bp_avatar_module_medium--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941.bp_avatar_module_medium--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
2046
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_medium--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d.bp_avatar_module_medium--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
2036
2047
  font-size:.8125rem;
2037
2048
  }
2038
- .bp_avatar_module_avatar--65941.bp_avatar_module_large--65941{
2049
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_large--a6b5d{
2039
2050
  height:var(--avatar-large-height);
2040
2051
  width:var(--avatar-large-width);
2041
2052
  }
2042
- .bp_avatar_module_avatar--65941.bp_avatar_module_large--65941 .bp_avatar_module_text--65941{
2053
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_large--a6b5d .bp_avatar_module_text--a6b5d{
2043
2054
  font-size:.5rem;
2044
2055
  }
2045
- .bp_avatar_module_avatar--65941.bp_avatar_module_large--65941 .bp_avatar_module_length-3--65941.bp_avatar_module_text--65941{
2056
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_large--a6b5d .bp_avatar_module_length-3--a6b5d.bp_avatar_module_text--a6b5d{
2046
2057
  font-size:.6875rem;
2047
2058
  }
2048
- .bp_avatar_module_avatar--65941.bp_avatar_module_xlarge--65941{
2059
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xlarge--a6b5d{
2049
2060
  height:var(--avatar-xlarge-height);
2050
2061
  width:var(--avatar-xlarge-width);
2051
2062
  }
2052
- .bp_avatar_module_avatar--65941.bp_avatar_module_xlarge--65941 .bp_avatar_module_text--65941{
2063
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xlarge--a6b5d .bp_avatar_module_text--a6b5d{
2053
2064
  font-size:1rem;
2054
2065
  }
2055
- .bp_avatar_module_avatar--65941.bp_avatar_module_xxlarge--65941{
2066
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xxlarge--a6b5d{
2056
2067
  height:var(--avatar-xxlarge-height);
2057
2068
  width:var(--avatar-xxlarge-width);
2058
2069
  }
2059
- .bp_avatar_module_avatar--65941.bp_avatar_module_xxlarge--65941 .bp_avatar_module_text--65941{
2070
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xxlarge--a6b5d .bp_avatar_module_text--a6b5d{
2060
2071
  font-size:1.25rem;
2061
2072
  }
2062
- .bp_avatar_module_avatar--65941.bp_avatar_module_xxlarge--65941 .bp_avatar_module_length-1--65941.bp_avatar_module_text--65941,.bp_avatar_module_avatar--65941.bp_avatar_module_xxlarge--65941 .bp_avatar_module_length-2--65941.bp_avatar_module_text--65941{
2073
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xxlarge--a6b5d .bp_avatar_module_length-1--a6b5d.bp_avatar_module_text--a6b5d,.bp_avatar_module_avatar--a6b5d.bp_avatar_module_xxlarge--a6b5d .bp_avatar_module_length-2--a6b5d.bp_avatar_module_text--a6b5d{
2063
2074
  font-size:2rem;
2064
2075
  }
2065
- .bp_avatar_module_avatar--65941.bp_avatar_module_xxlarge--65941 .bp_avatar_module_badge--65941{
2076
+ .bp_avatar_module_avatar--a6b5d.bp_avatar_module_xxlarge--a6b5d .bp_avatar_module_badge--a6b5d{
2066
2077
  right:-.375rem;
2067
2078
  }
2068
- .bp_avatar_module_avatar--65941 .bp_avatar_module_image--65941{
2079
+ .bp_avatar_module_avatar--a6b5d .bp_avatar_module_image--a6b5d{
2069
2080
  border-radius:50%;
2070
2081
  height:100%;
2071
2082
  object-fit:cover;
2072
2083
  width:100%;
2073
2084
  }
2074
- .bp_avatar_module_avatar--65941 .bp_avatar_module_image--65941.bp_avatar_module_loading--65941{
2085
+ .bp_avatar_module_avatar--a6b5d .bp_avatar_module_image--a6b5d.bp_avatar_module_loading--a6b5d{
2075
2086
  height:0;
2076
2087
  width:0;
2077
2088
  }
2078
2089
 
2079
- .bp_avatar_module_anonymousAvatar--65941,.bp_avatar_module_iconContainer--65941{
2090
+ .bp_avatar_module_anonymousAvatar--a6b5d,.bp_avatar_module_iconContainer--a6b5d{
2080
2091
  align-items:center;
2081
2092
  display:flex;
2082
2093
  justify-content:center;
2083
2094
  }
2084
2095
 
2085
- .bp_avatar_module_iconContainer--65941{
2096
+ .bp_avatar_module_iconContainer--a6b5d{
2086
2097
  border-radius:50%;
2087
2098
  height:100%;
2088
2099
  width:100%;
2089
2100
  }
2090
2101
 
2091
- [data-button-wrapper]:hover .bp_avatar_module_avatar--65941[data-modern=false]{
2102
+ [data-button-wrapper]:hover .bp_avatar_module_avatar--a6b5d[data-modern=false]{
2092
2103
  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
2093
2104
  cursor:pointer;
2094
2105
  }
2095
- [data-button-wrapper]:hover .bp_avatar_module_avatar--65941[data-modern=true]{
2106
+ [data-button-wrapper]:hover .bp_avatar_module_avatar--a6b5d[data-modern=true]{
2096
2107
  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-hover);
2097
2108
  cursor:pointer;
2098
2109
  }
2099
- [data-button-wrapper]:active .bp_avatar_module_avatar--65941[data-modern=false]{
2110
+ [data-button-wrapper]:active .bp_avatar_module_avatar--a6b5d[data-modern=false]{
2100
2111
  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
2101
2112
  }
2102
- [data-button-wrapper]:active .bp_avatar_module_avatar--65941[data-modern=true]{
2113
+ [data-button-wrapper]:active .bp_avatar_module_avatar--a6b5d[data-modern=true]{
2103
2114
  box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-pressed);
2104
2115
  }
2105
- [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--65941[data-modern=false]{
2116
+ [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--a6b5d[data-modern=false]{
2106
2117
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
2107
2118
  }
2108
- [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--65941[data-modern=true]{
2119
+ [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--a6b5d[data-modern=true]{
2109
2120
  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
2110
2121
  }
2111
2122
  .bp_tooltip_module_content--72fa7[data-modern=false]{
@@ -2484,7 +2495,7 @@
2484
2495
  height:var(--icon-button-size-x-small);
2485
2496
  width:var(--icon-button-size-x-small);
2486
2497
  }
2487
- .bp_dropdown_menu_module_content--0f0d1[data-modern=false]{
2498
+ .bp_dropdown_menu_module_content--d90ed[data-modern=false]{
2488
2499
  --dropdown-menu-radius:var(--radius-3);
2489
2500
  --dropdown-menu-padding:var(--space-3);
2490
2501
  --dropdown-menu-text-color:var(--text-text-on-light);
@@ -2517,6 +2528,7 @@
2517
2528
  --dropdown-menu-checkmark-left:var(--space-2);
2518
2529
  --dropdown-menu-medium-checkmark-left:var(--space-3);
2519
2530
  --dropdown-menu-backdrop-filter:none;
2531
+ --dropdown-menu-item-destructive-color:var(--text-text-destructive-on-light);
2520
2532
  font-family:var(--body-default-font-family);
2521
2533
  font-size:var(--body-default-font-size);
2522
2534
  font-weight:var(--body-default-font-weight);
@@ -2526,7 +2538,7 @@
2526
2538
  text-transform:var(--body-default-text-case);
2527
2539
  }
2528
2540
 
2529
- .bp_dropdown_menu_module_content--0f0d1[data-modern=true]{
2541
+ .bp_dropdown_menu_module_content--d90ed[data-modern=true]{
2530
2542
  --dropdown-menu-radius:var(--bp-radius-10);
2531
2543
  --dropdown-menu-padding:var(--bp-space-030);
2532
2544
  --dropdown-menu-text-color:var(--bp-text-text-on-light);
@@ -2559,6 +2571,7 @@
2559
2571
  --dropdown-menu-checkmark-left:var(--bp-space-020);
2560
2572
  --dropdown-menu-medium-checkmark-left:var(--bp-space-030);
2561
2573
  --dropdown-menu-backdrop-filter:blur(16px);
2574
+ --dropdown-menu-item-destructive-color:var(--bp-text-text-destructive-on-light);
2562
2575
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
2563
2576
  font-size:var(--bp-font-size-05);
2564
2577
  font-style:normal;
@@ -2567,7 +2580,7 @@
2567
2580
  line-height:var(--bp-font-line-height-04);
2568
2581
  }
2569
2582
 
2570
- .bp_dropdown_menu_module_content--0f0d1{
2583
+ .bp_dropdown_menu_module_content--d90ed{
2571
2584
  backdrop-filter:var(--dropdown-menu-backdrop-filter);
2572
2585
  background-color:var(--dropdown-menu-background);
2573
2586
  border:var(--dropdown-menu-border);
@@ -2582,7 +2595,7 @@
2582
2595
  padding:var(--dropdown-menu-padding);
2583
2596
  z-index:380;
2584
2597
  }
2585
- .bp_dropdown_menu_module_content--0f0d1[data-menu-fullscreen=true]{
2598
+ .bp_dropdown_menu_module_content--d90ed[data-menu-fullscreen=true]{
2586
2599
  border:unset;
2587
2600
  border-radius:unset;
2588
2601
  display:flex;
@@ -2595,27 +2608,27 @@
2595
2608
  position:relative;
2596
2609
  width:100vw;
2597
2610
  }
2598
- .bp_dropdown_menu_module_content--0f0d1[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--0f0d1{
2611
+ .bp_dropdown_menu_module_content--d90ed[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--d90ed{
2599
2612
  overflow-y:auto;
2600
2613
  padding:var(--dropdown-menu-full-screen-padding);
2601
2614
  }
2602
- .bp_dropdown_menu_module_content--0f0d1 .bp_dropdown_menu_module_subheader--0f0d1{
2615
+ .bp_dropdown_menu_module_content--d90ed .bp_dropdown_menu_module_subheader--d90ed{
2603
2616
  padding:var(--dropdown-menu-subheader-padding);
2604
2617
  }
2605
- .bp_dropdown_menu_module_content--0f0d1 .bp_dropdown_menu_module_subheader--0f0d1.bp_dropdown_menu_module_uppercased--0f0d1{
2618
+ .bp_dropdown_menu_module_content--d90ed .bp_dropdown_menu_module_subheader--d90ed.bp_dropdown_menu_module_uppercased--d90ed{
2606
2619
  text-transform:uppercase;
2607
2620
  }
2608
- .bp_dropdown_menu_module_content--0f0d1 .bp_dropdown_menu_module_dropdownMenuItemSeparator--0f0d1{
2621
+ .bp_dropdown_menu_module_content--d90ed .bp_dropdown_menu_module_dropdownMenuItemSeparator--d90ed{
2609
2622
  margin-block:var(--dropdown-menu-separator-margin);
2610
2623
  }
2611
2624
 
2612
- .bp_dropdown_menu_module_ellipsis--0f0d1{
2625
+ .bp_dropdown_menu_module_ellipsis--d90ed{
2613
2626
  overflow:hidden;
2614
2627
  text-overflow:ellipsis;
2615
2628
  white-space:nowrap;
2616
2629
  }
2617
2630
 
2618
- .bp_dropdown_menu_module_checkmark--0f0d1{
2631
+ .bp_dropdown_menu_module_checkmark--d90ed{
2619
2632
  align-items:center;
2620
2633
  display:inline-flex;
2621
2634
  justify-content:center;
@@ -2623,11 +2636,11 @@
2623
2636
  position:absolute;
2624
2637
  }
2625
2638
 
2626
- .bp_dropdown_menu_module_checkmark--0f0d1.bp_dropdown_menu_module_mediumSpacing--0f0d1{
2639
+ .bp_dropdown_menu_module_checkmark--d90ed.bp_dropdown_menu_module_mediumSpacing--d90ed{
2627
2640
  left:var(--dropdown-menu-medium-checkmark-left);
2628
2641
  }
2629
2642
 
2630
- .bp_dropdown_menu_module_item--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1{
2643
+ .bp_dropdown_menu_module_item--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed{
2631
2644
  align-items:center;
2632
2645
  border:var(--dropdown-menu-item-border);
2633
2646
  border-radius:var(--dropdown-menu-item-radius);
@@ -2640,65 +2653,74 @@
2640
2653
  -webkit-user-select:none;
2641
2654
  user-select:none;
2642
2655
  }
2643
- .bp_dropdown_menu_module_item--0f0d1[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--0f0d1[data-disabled]{
2656
+ .bp_dropdown_menu_module_item--d90ed[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--d90ed[data-disabled]{
2644
2657
  opacity:60%;
2645
2658
  pointer-events:none;
2646
2659
  }
2647
- .bp_dropdown_menu_module_item--0f0d1[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--0f0d1[data-highlighted]{
2660
+ .bp_dropdown_menu_module_item--d90ed[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--d90ed[data-highlighted]{
2648
2661
  background-color:var(--dropdown-menu-item-background-focus);
2649
2662
  border:var(--dropdown-menu-item-border-focus);
2650
2663
  }
2651
- .bp_dropdown_menu_module_item--0f0d1[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--0f0d1[data-state=open][data-highlighted]{
2664
+ .bp_dropdown_menu_module_item--d90ed[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--d90ed[data-state=open][data-highlighted]{
2652
2665
  border:var(--dropdown-menu-item-border);
2653
2666
  }
2654
- .bp_dropdown_menu_module_item--0f0d1:active,.bp_dropdown_menu_module_subMenuTrigger--0f0d1:active{
2667
+ .bp_dropdown_menu_module_item--d90ed:active,.bp_dropdown_menu_module_subMenuTrigger--d90ed:active{
2655
2668
  background-color:var(--dropdown-menu-item-background-active);
2656
2669
  border:var(--dropdown-menu-item-border-active);
2657
2670
  }
2658
- .bp_dropdown_menu_module_item--0f0d1[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--0f0d1[data-state=open]{
2671
+ .bp_dropdown_menu_module_item--d90ed[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--d90ed[data-state=open]{
2659
2672
  background-color:var(--dropdown-menu-item-background-selected);
2660
2673
  }
2661
- .bp_dropdown_menu_module_item--0f0d1:hover,.bp_dropdown_menu_module_subMenuTrigger--0f0d1:hover{
2674
+ .bp_dropdown_menu_module_item--d90ed:hover,.bp_dropdown_menu_module_subMenuTrigger--d90ed:hover{
2662
2675
  background-color:var(--dropdown-menu-item-background-hover);
2663
2676
  border:var(--dropdown-menu-item-border-hover);
2664
2677
  }
2665
- .bp_dropdown_menu_module_item--0f0d1.bp_dropdown_menu_module_radioItem--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1.bp_dropdown_menu_module_radioItem--0f0d1{
2678
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_radioItem--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_radioItem--d90ed{
2666
2679
  padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
2667
2680
  }
2668
- .bp_dropdown_menu_module_item--0f0d1.bp_dropdown_menu_module_radioItem--0f0d1 .bp_dropdown_menu_module_radioItemMediumSpacing--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1.bp_dropdown_menu_module_radioItem--0f0d1 .bp_dropdown_menu_module_radioItemMediumSpacing--0f0d1{
2681
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_radioItem--d90ed .bp_dropdown_menu_module_radioItemMediumSpacing--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_radioItem--d90ed .bp_dropdown_menu_module_radioItemMediumSpacing--d90ed{
2669
2682
  padding-inline-start:var(--dropdown-menu-radio-item-medium-padding-start);
2670
2683
  }
2671
- .bp_dropdown_menu_module_item--0f0d1.bp_dropdown_menu_module_checkboxItem--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1.bp_dropdown_menu_module_checkboxItem--0f0d1{
2684
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_checkboxItem--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_checkboxItem--d90ed{
2672
2685
  padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
2673
2686
  }
2674
- .bp_dropdown_menu_module_item--0f0d1.bp_dropdown_menu_module_checkboxItem--0f0d1 .bp_dropdown_menu_module_checkboxItemMediumSpacing--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1.bp_dropdown_menu_module_checkboxItem--0f0d1 .bp_dropdown_menu_module_checkboxItemMediumSpacing--0f0d1{
2687
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_checkboxItem--d90ed .bp_dropdown_menu_module_checkboxItemMediumSpacing--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_checkboxItem--d90ed .bp_dropdown_menu_module_checkboxItemMediumSpacing--d90ed{
2675
2688
  padding-inline-start:var(--dropdown-menu-checkbox-item-medium-padding-start);
2676
2689
  }
2677
- .bp_dropdown_menu_module_item--0f0d1 .bp_dropdown_menu_module_mediumItemLayout--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1 .bp_dropdown_menu_module_mediumItemLayout--0f0d1{
2690
+ .bp_dropdown_menu_module_item--d90ed .bp_dropdown_menu_module_mediumItemLayout--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed .bp_dropdown_menu_module_mediumItemLayout--d90ed{
2678
2691
  gap:var(--dropdown-menu-medium-item-layout-gap);
2679
2692
  justify-content:space-between;
2680
2693
  overflow:hidden;
2681
2694
  }
2682
- .bp_dropdown_menu_module_item--0f0d1 .bp_dropdown_menu_module_startElement--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1 .bp_dropdown_menu_module_startElement--0f0d1{
2695
+ .bp_dropdown_menu_module_item--d90ed .bp_dropdown_menu_module_startElement--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed .bp_dropdown_menu_module_startElement--d90ed{
2683
2696
  align-items:center;
2684
2697
  display:flex;
2685
2698
  }
2686
- .bp_dropdown_menu_module_item--0f0d1 .bp_dropdown_menu_module_menuItemMainContent--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1 .bp_dropdown_menu_module_menuItemMainContent--0f0d1{
2699
+ .bp_dropdown_menu_module_item--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed{
2687
2700
  flex-grow:1;
2688
2701
  }
2689
- .bp_dropdown_menu_module_item--0f0d1 .bp_dropdown_menu_module_endElement--0f0d1,.bp_dropdown_menu_module_subMenuTrigger--0f0d1 .bp_dropdown_menu_module_endElement--0f0d1{
2702
+ .bp_dropdown_menu_module_item--d90ed .bp_dropdown_menu_module_endElement--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed .bp_dropdown_menu_module_endElement--d90ed{
2690
2703
  align-items:center;
2691
2704
  color:var(--dropdown-menu-end-element-color);
2692
2705
  display:flex;
2693
2706
  }
2694
- .bp_dropdown_menu_module_item--0f0d1:has(.bp_dropdown_menu_module_ellipsis--0f0d1){
2707
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed{
2708
+ color:var(--dropdown-menu-item-destructive-color);
2709
+ }
2710
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed span,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_menuItemMainContent--d90ed span{
2711
+ color:inherit;
2712
+ }
2713
+ .bp_dropdown_menu_module_item--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_endElement--d90ed,.bp_dropdown_menu_module_subMenuTrigger--d90ed.bp_dropdown_menu_module_destructive--d90ed .bp_dropdown_menu_module_endElement--d90ed{
2714
+ color:var(--dropdown-menu-item-destructive-color);
2715
+ }
2716
+ .bp_dropdown_menu_module_item--d90ed:has(.bp_dropdown_menu_module_ellipsis--d90ed){
2695
2717
  border-radius:var(--dropdown-menu-item-radius);
2696
2718
  }
2697
- .bp_dropdown_menu_module_item--0f0d1:has(.bp_dropdown_menu_module_mediumItemLayout--0f0d1){
2719
+ .bp_dropdown_menu_module_item--d90ed:has(.bp_dropdown_menu_module_mediumItemLayout--d90ed){
2698
2720
  border-radius:var(--dropdown-menu-medium-item-radius);
2699
2721
  }
2700
2722
 
2701
- .bp_dropdown_menu_module_menuHeader--0f0d1{
2723
+ .bp_dropdown_menu_module_menuHeader--d90ed{
2702
2724
  align-items:center;
2703
2725
  box-shadow:var(--dropdown-menu-header-shadow);
2704
2726
  display:grid;
@@ -2708,15 +2730,15 @@
2708
2730
  padding:var(--dropdown-menu-header-padding);
2709
2731
  }
2710
2732
 
2711
- .bp_dropdown_menu_module_headerTextContent--0f0d1{
2733
+ .bp_dropdown_menu_module_headerTextContent--d90ed{
2712
2734
  display:grid;
2713
2735
  }
2714
2736
 
2715
- .bp_dropdown_menu_module_submenuCloseButton--0f0d1{
2737
+ .bp_dropdown_menu_module_submenuCloseButton--d90ed{
2716
2738
  grid-area:submenu-close;
2717
2739
  }
2718
2740
 
2719
- .bp_dropdown_menu_module_menuCloseButton--0f0d1{
2741
+ .bp_dropdown_menu_module_menuCloseButton--d90ed{
2720
2742
  grid-area:close;
2721
2743
  }
2722
2744
  .bp_divider_module_divider--2f437{
package/dist/lib-esm/navigation-menu/index.d.ts CHANGED
@@ -5,7 +5,9 @@ export declare const NavigationMenu: {
5
5
  };
6
6
  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
7
7
  Content: import("react").ForwardRefExoticComponent<import("../..").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
8
- Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
8
+ Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & {
9
+ variant?: import("../..").DropdownMenuItemVariant;
10
+ } & import("react").RefAttributes<HTMLDivElement>>;
9
11
  Link: import("react").ForwardRefExoticComponent<Omit<import("../..").LinkProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>>, "ref"> & import("react").RefAttributes<unknown>>;
10
12
  Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
11
13
  };
package/dist/lib-esm/navigation-menu/navigation-menu-item.d.ts CHANGED
@@ -10,4 +10,6 @@ export type NavigationMenuItemProps = DropdownMenuItemProps;
10
10
  * </NavigationMenu.Link>
11
11
  * </NavigationMenu.Item>
12
12
  */
13
- export declare const NavigationMenuItem: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
13
+ export declare const NavigationMenuItem: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & {
14
+ variant?: import("../primitives/dropdown-menu").DropdownMenuItemVariant;
15
+ } & React.RefAttributes<HTMLDivElement>>;
package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
2
2
  import { type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from 'react';
3
3
  import { type RequireExactlyOne } from 'type-fest';
4
- export type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps;
4
+ export type DropdownMenuItemVariant = 'destructive';
5
+ export type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & {
6
+ /** The visual style of the menu item. */
7
+ variant?: DropdownMenuItemVariant;
8
+ };
5
9
  export interface MenuItemMainContentBaseProps extends React.ComponentProps<'div'> {
6
10
  /** The label for the checkbox button.
7
11
  * It will be overwritten by the `children` prop if provided.
@@ -28,7 +32,10 @@ export type MenuItemEndElementProps = React.ComponentProps<'div'>;
28
32
  * End element of an Item, dedicated for additional text and icons.
29
33
  */
30
34
  export declare const MenuItemEndElement: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
31
- export declare const DropdownMenuItem: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & RefAttributes<HTMLDivElement>> & {
35
+ export declare const DropdownMenuItem: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & {
36
+ /** The visual style of the menu item. */
37
+ variant?: DropdownMenuItemVariant;
38
+ } & RefAttributes<HTMLDivElement>> & {
32
39
  StartElement: ForwardRefExoticComponent<Omit<MenuItemStartElementProps, "ref"> & RefAttributes<HTMLDivElement>>;
33
40
  MainContent: ForwardRefExoticComponent<(Omit<Required<Pick<MenuItemMainContentBaseProps, "children">> & Partial<Record<"label", never>> & Omit<MenuItemMainContentBaseProps, "children" | "label">, "ref"> | Omit<Required<Pick<MenuItemMainContentBaseProps, "label">> & Partial<Record<"children", never>> & Omit<MenuItemMainContentBaseProps, "children" | "label">, "ref">) & RefAttributes<HTMLDivElement>>;
34
41
  EndElement: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { Size8, Size4, bpIconIconOnLightSecondary, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
2
+ import { Size8, Size4, bpTextTextDestructiveOnLight, TextTextDestructiveOnLight, bpIconIconOnLightSecondary, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
3
3
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
4
4
  import clsx from 'clsx';
5
- import { forwardRef, useCallback, createElement } from 'react';
5
+ import { forwardRef, useCallback, createContext, useContext, createElement } from 'react';
6
6
  import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
7
7
  import { Text } from '../../text/text.js';
8
8
  import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
9
9
  import styles from './dropdown-menu.module.js';
10
10
  import { useMenuItemVariant } from './menu-item-variant-context.js';
11
11
 
12
+ const ItemVariantContext = /*#__PURE__*/createContext(undefined);
12
13
  /**
13
14
  * Based on Radix-UI [DropdownMenu Item](https://www.radix-ui.com/docs/primitives/components/dropdown-menu#item)
14
15
  */
@@ -16,6 +17,7 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
16
17
  const {
17
18
  children,
18
19
  className,
20
+ variant,
19
21
  ...rest
20
22
  } = props;
21
23
  const {
@@ -23,15 +25,20 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
23
25
  } = useMenuItemVariant();
24
26
  const sizeStyles = internalSize === 'small' ? styles.ellipsis : styles.mediumItemLayout;
25
27
  const preventDefault = useCallback(event => event.preventDefault(), []);
26
- return jsx(DropdownMenuPrimitive.Item, {
27
- ...rest,
28
- ref: forwardedRef,
29
- className: clsx(styles.item, sizeStyles, className),
30
- // If click starts at trigger button, and ends on the item, it should not trigger the item.
31
- // Note: this also has a side effect of not allowing to start click and end on a different time.
32
- // TODO: see if possible to make https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/menu/src/Menu.tsx#L646
33
- onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
34
- children: children
28
+ return jsx(ItemVariantContext.Provider, {
29
+ value: variant,
30
+ children: jsx(DropdownMenuPrimitive.Item, {
31
+ ...rest,
32
+ ref: forwardedRef,
33
+ className: clsx(styles.item, sizeStyles, {
34
+ [styles.destructive]: variant === 'destructive'
35
+ }, className),
36
+ // If click starts at trigger button, and ends on the item, it should not trigger the item.
37
+ // Note: this also has a side effect of not allowing to start click and end on a different time.
38
+ // TODO: see if possible to make https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/menu/src/Menu.tsx#L646
39
+ onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
40
+ children: children
41
+ })
35
42
  });
36
43
  });
37
44
  /**
@@ -85,8 +92,14 @@ const MenuItemStartElement = /*#__PURE__*/forwardRef(({
85
92
  const {
86
93
  enableModernizedComponents
87
94
  } = useBlueprintModernization();
95
+ const itemVariant = useContext(ItemVariantContext);
88
96
  const iconSize = internalSize === 'medium' ? Size8 : Size4;
89
- const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : IconIconOnLightSecondary;
97
+ let iconColor;
98
+ if (itemVariant === 'destructive') {
99
+ iconColor = enableModernizedComponents ? bpTextTextDestructiveOnLight : TextTextDestructiveOnLight;
100
+ } else {
101
+ iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : IconIconOnLightSecondary;
102
+ }
90
103
  return jsxs("div", {
91
104
  ...rest,
92
105
  ref: ref,
package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"content":"bp_dropdown_menu_module_content--0f0d1","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--0f0d1","subheader":"bp_dropdown_menu_module_subheader--0f0d1","uppercased":"bp_dropdown_menu_module_uppercased--0f0d1","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--0f0d1","ellipsis":"bp_dropdown_menu_module_ellipsis--0f0d1","checkmark":"bp_dropdown_menu_module_checkmark--0f0d1","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--0f0d1","item":"bp_dropdown_menu_module_item--0f0d1","radioItem":"bp_dropdown_menu_module_radioItem--0f0d1","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--0f0d1","checkboxItem":"bp_dropdown_menu_module_checkboxItem--0f0d1","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--0f0d1","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--0f0d1","startElement":"bp_dropdown_menu_module_startElement--0f0d1","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--0f0d1","endElement":"bp_dropdown_menu_module_endElement--0f0d1","menuHeader":"bp_dropdown_menu_module_menuHeader--0f0d1","headerTextContent":"bp_dropdown_menu_module_headerTextContent--0f0d1","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--0f0d1","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--0f0d1"};
2
+ var styles = {"content":"bp_dropdown_menu_module_content--d90ed","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--d90ed","subheader":"bp_dropdown_menu_module_subheader--d90ed","uppercased":"bp_dropdown_menu_module_uppercased--d90ed","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--d90ed","ellipsis":"bp_dropdown_menu_module_ellipsis--d90ed","checkmark":"bp_dropdown_menu_module_checkmark--d90ed","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--d90ed","item":"bp_dropdown_menu_module_item--d90ed","radioItem":"bp_dropdown_menu_module_radioItem--d90ed","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--d90ed","checkboxItem":"bp_dropdown_menu_module_checkboxItem--d90ed","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--d90ed","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--d90ed","startElement":"bp_dropdown_menu_module_startElement--d90ed","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--d90ed","endElement":"bp_dropdown_menu_module_endElement--d90ed","destructive":"bp_dropdown_menu_module_destructive--d90ed","menuHeader":"bp_dropdown_menu_module_menuHeader--d90ed","headerTextContent":"bp_dropdown_menu_module_headerTextContent--d90ed","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--d90ed","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--d90ed"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/primitives/dropdown-menu/index.d.ts CHANGED
@@ -9,7 +9,9 @@ export declare const DropdownMenu: {
9
9
  RadioSelectItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
10
10
  CheckboxItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
11
11
  Content: import("react").ForwardRefExoticComponent<import("./dropdown-menu-content").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
12
- Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>> & {
12
+ Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & {
13
+ variant?: import("./dropdown-menu-item").DropdownMenuItemVariant;
14
+ } & import("react").RefAttributes<HTMLDivElement>> & {
13
15
  StartElement: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-item").MenuItemStartElementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
14
16
  MainContent: import("react").ForwardRefExoticComponent<(Omit<Required<Pick<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "children">> & Partial<Record<"label", never>> & Omit<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "children" | "label">, "ref"> | Omit<Required<Pick<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "label">> & Partial<Record<"children", never>> & Omit<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "children" | "label">, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
15
17
  EndElement: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -35,7 +37,7 @@ export declare const DropdownMenu: {
35
37
  SubHeader: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
36
38
  };
37
39
  export { type DropdownMenuContentProps } from './dropdown-menu-content';
38
- export { type DropdownMenuItemProps, type MenuItemEndElementProps, type MenuItemMainContentProps, type MenuItemStartElementProps, } from './dropdown-menu-item';
40
+ export { type DropdownMenuItemProps, type DropdownMenuItemVariant, type MenuItemEndElementProps, type MenuItemMainContentProps, type MenuItemStartElementProps, } from './dropdown-menu-item';
39
41
  export { type DropdownMenuRadioGroupProps } from './dropdown-menu-radio-group';
40
42
  export { type DropdownMenuRadioSelectItemProps } from './dropdown-menu-radio-select-item';
41
43
  export { type DropdownMenuRootProps } from './dropdown-menu-root';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.16.2",
3
+ "version": "13.17.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.111.10",
50
+ "@box/blueprint-web-assets": "^4.111.11",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.17.10",
80
+ "@box/storybook-utils": "^0.17.11",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",