@codecademy/gamut 67.6.2 → 67.6.3-alpha.22c4b5.0

package/dist/BarChart/shared/elements.js

@@ -0,0 +1,65 @@
+import _styled from "@emotion/styled/base";
+import { css } from '@codecademy/gamut-styles';
+import { motion } from 'framer-motion';
+import { Box } from '../../Box';
+
+/**
+ * Container for bars with responsive height
+ */
+export const BarWrapper = /*#__PURE__*/_styled(Box, {
+  target: "ey0wy1t3",
+  label: "BarWrapper"
+})(css({
+  display: 'flex',
+  overflow: 'hidden',
+  position: 'relative',
+  alignItems: 'center',
+  flex: 1,
+  height: {
+    _: 12,
+    sm: 20
+  },
+  borderRadius: {
+    _: 'md',
+    sm: 'xl'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9zaGFyZWQvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVMwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQmFyQ2hhcnQvc2hhcmVkL2VsZW1lbnRzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBtb3Rpb24gfSBmcm9tICdmcmFtZXItbW90aW9uJztcblxuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vLi4vQm94JztcblxuLyoqXG4gKiBDb250YWluZXIgZm9yIGJhcnMgd2l0aCByZXNwb25zaXZlIGhlaWdodFxuICovXG5leHBvcnQgY29uc3QgQmFyV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gICAgZmxleDogMSxcbiAgICBoZWlnaHQ6IHsgXzogMTIsIHNtOiAyMCB9LFxuICAgIGJvcmRlclJhZGl1czogeyBfOiAnbWQnLCBzbTogJ3hsJyB9LFxuICB9KVxuKTtcblxuY29uc3QgYmFzZUJhclN0eWxlcyA9IHtcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGJvcmRlcjogMSxcbiAgYm9yZGVyQ29sb3I6ICdib3JkZXItcHJpbWFyeScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIGhlaWdodDogJzEwMCUnLFxuICBsZWZ0OiAwLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbn0gYXMgY29uc3Q7XG5cbi8qKlxuICogQW5pbWF0ZWQgYmFyIGVsZW1lbnQgZm9yIGJhY2tncm91bmQvdG90YWwgdmFsdWUgZGlzcGxheVxuICovXG5leHBvcnQgY29uc3QgQmFja2dyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG4vKipcbiAqIEZvcmVncm91bmQgYmFyIGZvciBzdGFja2VkIGRpc3BsYXkgKHByb2dyZXNzIHZhbHVlKVxuICovXG5leHBvcnQgY29uc3QgRm9yZWdyb3VuZEJhciA9IHN0eWxlZChtb3Rpb24uY3JlYXRlKEJveCkpKFxuICBjc3Moe1xuICAgIC4uLmJhc2VCYXJTdHlsZXMsXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgQmFyc0xpc3QgPSBzdHlsZWQoJ3VsJykoXG4gIGNzcyh7XG4gICAgbGlzdFN0eWxlOiAnbm9uZScsXG4gICAgJyYgbGk6bnRoLW9mLXR5cGUoZXZlbiknOiB7XG4gICAgICBiZzogJ2JhY2tncm91bmQtc2VsZWN0ZWQnLFxuICAgIH0sXG4gIH0pXG4pO1xuIl19 */");
+const baseBarStyles = {
+  alignItems: 'center',
+  border: 1,
+  borderColor: 'border-primary',
+  borderRadius: 'inherit',
+  display: 'flex',
+  height: '100%',
+  left: 0,
+  position: 'absolute'
+};
+
+/**
+ * Animated bar element for background/total value display
+ */
+export const BackgroundBar = /*#__PURE__*/_styled(motion.create(Box), {
+  target: "ey0wy1t2",
+  label: "BackgroundBar"
+})(css({
+  ...baseBarStyles
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9zaGFyZWQvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L3NoYXJlZC9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbi8qKlxuICogQ29udGFpbmVyIGZvciBiYXJzIHdpdGggcmVzcG9uc2l2ZSBoZWlnaHRcbiAqL1xuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGZsZXg6IDEsXG4gICAgaGVpZ2h0OiB7IF86IDEyLCBzbTogMjAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHsgXzogJ21kJywgc206ICd4bCcgfSxcbiAgfSlcbik7XG5cbmNvbnN0IGJhc2VCYXJTdHlsZXMgPSB7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBib3JkZXI6IDEsXG4gIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgZGlzcGxheTogJ2ZsZXgnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG59IGFzIGNvbnN0O1xuXG4vKipcbiAqIEFuaW1hdGVkIGJhciBlbGVtZW50IGZvciBiYWNrZ3JvdW5kL3RvdGFsIHZhbHVlIGRpc3BsYXlcbiAqL1xuZXhwb3J0IGNvbnN0IEJhY2tncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuLyoqXG4gKiBGb3JlZ3JvdW5kIGJhciBmb3Igc3RhY2tlZCBkaXNwbGF5IChwcm9ncmVzcyB2YWx1ZSlcbiAqL1xuZXhwb3J0IGNvbnN0IEZvcmVncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcnNMaXN0ID0gc3R5bGVkKCd1bCcpKFxuICBjc3Moe1xuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgICcmIGxpOm50aC1vZi10eXBlKGV2ZW4pJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
+
+/**
+ * Foreground bar for stacked display (progress value)
+ */
+export const ForegroundBar = /*#__PURE__*/_styled(motion.create(Box), {
+  target: "ey0wy1t1",
+  label: "ForegroundBar"
+})(css({
+  ...baseBarStyles
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9zaGFyZWQvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L3NoYXJlZC9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbi8qKlxuICogQ29udGFpbmVyIGZvciBiYXJzIHdpdGggcmVzcG9uc2l2ZSBoZWlnaHRcbiAqL1xuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGZsZXg6IDEsXG4gICAgaGVpZ2h0OiB7IF86IDEyLCBzbTogMjAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHsgXzogJ21kJywgc206ICd4bCcgfSxcbiAgfSlcbik7XG5cbmNvbnN0IGJhc2VCYXJTdHlsZXMgPSB7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBib3JkZXI6IDEsXG4gIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgZGlzcGxheTogJ2ZsZXgnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG59IGFzIGNvbnN0O1xuXG4vKipcbiAqIEFuaW1hdGVkIGJhciBlbGVtZW50IGZvciBiYWNrZ3JvdW5kL3RvdGFsIHZhbHVlIGRpc3BsYXlcbiAqL1xuZXhwb3J0IGNvbnN0IEJhY2tncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuLyoqXG4gKiBGb3JlZ3JvdW5kIGJhciBmb3Igc3RhY2tlZCBkaXNwbGF5IChwcm9ncmVzcyB2YWx1ZSlcbiAqL1xuZXhwb3J0IGNvbnN0IEZvcmVncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcnNMaXN0ID0gc3R5bGVkKCd1bCcpKFxuICBjc3Moe1xuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgICcmIGxpOm50aC1vZi10eXBlKGV2ZW4pJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
+export const BarsList = /*#__PURE__*/_styled('ul', {
+  target: "ey0wy1t0",
+  label: "BarsList"
+})(css({
+  listStyle: 'none',
+  '& li:nth-of-type(even)': {
+    bg: 'background-selected'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYXJDaGFydC9zaGFyZWQvZWxlbWVudHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEd0IiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhckNoYXJ0L3NoYXJlZC9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5cbmltcG9ydCB7IEJveCB9IGZyb20gJy4uLy4uL0JveCc7XG5cbi8qKlxuICogQ29udGFpbmVyIGZvciBiYXJzIHdpdGggcmVzcG9uc2l2ZSBoZWlnaHRcbiAqL1xuZXhwb3J0IGNvbnN0IEJhcldyYXBwZXIgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGZsZXg6IDEsXG4gICAgaGVpZ2h0OiB7IF86IDEyLCBzbTogMjAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHsgXzogJ21kJywgc206ICd4bCcgfSxcbiAgfSlcbik7XG5cbmNvbnN0IGJhc2VCYXJTdHlsZXMgPSB7XG4gIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICBib3JkZXI6IDEsXG4gIGJvcmRlckNvbG9yOiAnYm9yZGVyLXByaW1hcnknLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgZGlzcGxheTogJ2ZsZXgnLFxuICBoZWlnaHQ6ICcxMDAlJyxcbiAgbGVmdDogMCxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG59IGFzIGNvbnN0O1xuXG4vKipcbiAqIEFuaW1hdGVkIGJhciBlbGVtZW50IGZvciBiYWNrZ3JvdW5kL3RvdGFsIHZhbHVlIGRpc3BsYXlcbiAqL1xuZXhwb3J0IGNvbnN0IEJhY2tncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuLyoqXG4gKiBGb3JlZ3JvdW5kIGJhciBmb3Igc3RhY2tlZCBkaXNwbGF5IChwcm9ncmVzcyB2YWx1ZSlcbiAqL1xuZXhwb3J0IGNvbnN0IEZvcmVncm91bmRCYXIgPSBzdHlsZWQobW90aW9uLmNyZWF0ZShCb3gpKShcbiAgY3NzKHtcbiAgICAuLi5iYXNlQmFyU3R5bGVzLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IEJhcnNMaXN0ID0gc3R5bGVkKCd1bCcpKFxuICBjc3Moe1xuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgICcmIGxpOm50aC1vZi10eXBlKGV2ZW4pJzoge1xuICAgICAgYmc6ICdiYWNrZ3JvdW5kLXNlbGVjdGVkJyxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");

package/dist/BarChart/shared/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const minBarWidth = 8;
+export declare const rightSpacerWidth = 160;

package/dist/BarChart/shared/styles.js

@@ -0,0 +1,2 @@
+export const minBarWidth = 8;
+export const rightSpacerWidth = 160;

package/dist/BarChart/shared/types.d.ts

@@ -0,0 +1,56 @@
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import { ColorAlias } from '@codecademy/gamut-styles';
+import { HTMLProps } from 'react';
+import { ButtonProps } from '../../Button';
+type BarChartAriaLabel = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+};
+type BarChartAriaLabelledBy = {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+};
+type BarChartLabel = BarChartAriaLabel | BarChartAriaLabelledBy;
+export type BarChartStyles = {
+    /** Color for text labels. Defaults to 'text' */
+    textColor?: ColorAlias;
+    /** Color for the foreground/progress bar. Defaults to 'feedback-warning' */
+    foregroundBarColor?: ColorAlias;
+    /** Color for the background/total bar. Defaults to 'paleBlue' */
+    backgroundBarColor?: ColorAlias;
+};
+export type BarProps = {
+    /** Label displayed on the y-axis for this bar */
+    yLabel: string;
+    /** The foreground/progress bar value (always shown) */
+    seriesOneValue: number;
+    /** The background/total bar value (optional - creates stacked effect when provided) */
+    seriesTwoValue?: number;
+    /** Optional gamut-icon to display next to the label */
+    icon?: React.ComponentType<GamutIconProps>;
+    /** Click handler - makes row interactive as a button */
+    onClick?: ButtonProps['onClick'];
+    /** Link href - makes row interactive as an anchor */
+    href?: HTMLProps<HTMLAnchorElement>['href'];
+};
+export type BarChartProps = BarChartLabel & {
+    /** Whether to animate bars on mount */
+    animate?: boolean;
+    /** Array of bar data to render */
+    barValues: BarProps[];
+    /** Maximum value for the x-axis scale */
+    maxRange: number;
+    /** Minimum value for the x-axis scale (usually 0) */
+    minRange: number;
+    /** Sort order for bars */
+    order?: 'ascending' | 'descending';
+    /** Property to sort bars by */
+    sortBy?: 'label' | 'value' | 'none';
+    /** Unit label to display (e.g., "XP") */
+    unit?: string;
+    /** Style configuration for colors */
+    styleConfig?: BarChartStyles;
+    /** Interval for x-axis scale markers */
+    xScale?: number;
+};
+export {};

package/dist/BarChart/shared/types.js

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

package/dist/BarChart/utils/hooks.d.ts

@@ -0,0 +1,36 @@
+import { BarChartContextProps } from '../BarChartProvider';
+import { BarChartStyles } from '../shared/types';
+export interface LabelPosition {
+    value: number;
+    positionPercent: number;
+}
+/**
+ * Hook that calculates label positions for a given range and count
+ * Returns an array of { value, positionPercent } objects
+ */
+export declare const useLabelPositions: ({ min, max, count, }: {
+    min: number;
+    max: number;
+    count: number;
+}) => LabelPosition[];
+export declare function useBarChartContext(): BarChartContextProps;
+export interface UseBarChartOptions {
+    minRange: number;
+    maxRange: number;
+    xScale?: number;
+    unit?: string;
+    styleConfig?: BarChartStyles;
+    animate?: boolean;
+}
+export declare function useBarChart({ minRange, maxRange, xScale, unit, styleConfig, animate, }: UseBarChartOptions): {
+    minRange: number;
+    maxRange: number;
+    xScale: number;
+    unit: string;
+    styleConfig: {
+        textColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        foregroundBarColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+        backgroundBarColor: "text" | "background" | "primary" | "secondary" | "danger" | "interface" | "text-secondary" | "text-accent" | "text-disabled" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-primary" | "background-disabled" | "background-error" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-selected" | "background-hover" | "shadow-primary" | "shadow-secondary" | "primary-hover" | "primary-inverse" | "secondary-hover" | "danger-hover" | "interface-hover" | "border-primary" | "border-secondary" | "border-disabled" | "border-tertiary";
+    };
+    animate: boolean;
+};

package/dist/BarChart/utils/hooks.js

@@ -0,0 +1,61 @@
+import { useContext, useMemo } from 'react';
+import { BarChartContext } from '../BarChartProvider';
+import { calculatePositionPercent, getLabel } from './index';
+const defaultStyleConfig = {
+  textColor: 'text',
+  foregroundBarColor: 'feedback-warning',
+  backgroundBarColor: 'background-primary'
+};
+
+/**
+ * Hook that calculates label positions for a given range and count
+ * Returns an array of { value, positionPercent } objects
+ */
+export const useLabelPositions = ({
+  min,
+  max,
+  count
+}) => {
+  return useMemo(() => Array.from({
+    length: count
+  }, (_, i) => {
+    const value = getLabel({
+      labelCount: count,
+      labelIndex: i,
+      min,
+      max
+    });
+    const positionPercent = calculatePositionPercent({
+      value,
+      min,
+      max
+    });
+    return {
+      value,
+      positionPercent
+    };
+  }), [min, max, count]);
+};
+export function useBarChartContext() {
+  return useContext(BarChartContext);
+}
+export function useBarChart({
+  minRange,
+  maxRange,
+  xScale,
+  unit = '',
+  styleConfig,
+  animate = false
+}) {
+  return useMemo(() => ({
+    minRange,
+    maxRange,
+    xScale: xScale ?? Math.ceil((maxRange - minRange) / 5),
+    unit,
+    styleConfig: {
+      ...defaultStyleConfig,
+      ...styleConfig
+    },
+    animate
+  }), [minRange, maxRange, xScale, unit, styleConfig, animate]);
+}

package/dist/BarChart/utils/index.d.ts

@@ -0,0 +1,83 @@
+import { BarChartProps, BarProps } from '../shared/types';
+export declare const numDigits: ({ num }: {
+    num: number;
+}) => number;
+export declare const columnBaseSize: ({ experience }: {
+    experience?: number | undefined;
+}) => {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const calculatePercent: ({ value, total, }: {
+    value: number;
+    total: number;
+}) => number;
+export declare const calculateBarWidth: ({ value, minRange, maxRange, }: {
+    value: number;
+    minRange: number;
+    maxRange: number;
+}) => number;
+export declare const calculateTicksAndRange: ({ maxTicks, minPoint, maxPoint, }: {
+    maxTicks: number;
+    minPoint: number;
+    maxPoint: number;
+}) => [number, number, number];
+/**
+ * Returns a "nice" number approximately equal to range
+ * Rounds the number if round = true
+ * Takes the ceiling if round = false.
+ * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
+ */
+export declare const niceNum: ({ range, roundDown, }: {
+    range: number;
+    roundDown: boolean;
+}) => number;
+export declare const getPercentDiff: ({ v1, v2 }: {
+    v1: number;
+    v2: number;
+}) => number;
+export declare const formatNumberUS: ({ num }: {
+    num: number;
+}) => string;
+export declare const formatNumberUSCompact: ({ num }: {
+    num: number;
+}) => string;
+/**
+ * Sort bars based on sortBy and order configuration
+ */
+export declare const sortBars: ({ bars, sortBy, order, }: {
+    bars: BarProps[];
+    sortBy: BarChartProps['sortBy'];
+    order: BarChartProps['order'];
+}) => BarProps[];
+/**
+ * Generates an accessible summary of the bar values
+ */
+export declare const getValuesSummary: ({ yLabel, seriesOneValue, seriesTwoValue, unit, }: {
+    yLabel: string;
+    seriesOneValue: number;
+    seriesTwoValue?: number | undefined;
+    unit: string;
+}) => string;
+/**
+ * Calculates the value for a given label position
+ */
+export declare const getLabel: ({ labelCount, labelIndex, min, max, }: {
+    labelCount: number;
+    labelIndex: number;
+    min: number;
+    max: number;
+}) => number;
+/**
+ * Calculates the percentage position for a given value within a range
+ * Returns a value between 0 and 100 representing the position percentage
+ */
+export declare const calculatePositionPercent: ({ value, min, max, }: {
+    value: number;
+    min: number;
+    max: number;
+}) => number;
+export { useBarChart, useBarChartContext, useLabelPositions } from './hooks';
+export type { LabelPosition, UseBarChartOptions } from './hooks';

package/dist/BarChart/utils/index.js

@@ -0,0 +1,162 @@
+export const numDigits = ({
+  num
+}) => {
+  return Math.max(Math.floor(Math.log10(Math.abs(num))), 0) + 1;
+};
+export const columnBaseSize = ({
+  experience = 3
+}) => {
+  const digits = numDigits({
+    num: experience
+  });
+  return {
+    sm: digits > 4 ? 5 : 4,
+    md: digits > 4 ? 5 : 4,
+    lg: digits > 4 ? 4 : 5,
+    xl: digits > 4 ? 5 : 4
+  };
+};
+export const calculatePercent = ({
+  value,
+  total
+}) => {
+  return value / total * 100;
+};
+export const calculateBarWidth = ({
+  value,
+  minRange,
+  maxRange
+}) => {
+  const range = maxRange - minRange;
+  const adjustedValue = value - minRange;
+  return Math.floor(calculatePercent({
+    value: adjustedValue,
+    total: range
+  }));
+};
+
+// Calculate tick spacing and nice minimum and maximum data points on the axis.
+
+export const calculateTicksAndRange = ({
+  maxTicks,
+  minPoint,
+  maxPoint
+}) => {
+  const range = niceNum({
+    range: maxPoint - minPoint,
+    roundDown: false
+  });
+  const tickSpacing = niceNum({
+    range: range / (maxTicks - 1),
+    roundDown: true
+  });
+  const niceMin = Math.floor(minPoint / tickSpacing) * tickSpacing;
+  const niceMax = Math.ceil(maxPoint / tickSpacing) * tickSpacing;
+  const tickCount = range / tickSpacing;
+  return [tickCount, niceMin, niceMax];
+};
+
+/**
+ * Returns a "nice" number approximately equal to range
+ * Rounds the number if round = true
+ * Takes the ceiling if round = false.
+ * A nice number is a simple decimal number, for example if a number is 1234, a nice number would be 1000 or 2000.
+ */
+export const niceNum = ({
+  range,
+  roundDown
+}) => {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let niceFraction;
+  if (roundDown) {
+    if (fraction < 1.5) niceFraction = 1;else if (fraction < 3) niceFraction = 2;else if (fraction < 7) niceFraction = 5;else niceFraction = 10;
+  } else if (fraction <= 1) niceFraction = 1;else if (fraction <= 2) niceFraction = 2;else if (fraction <= 5) niceFraction = 5;else niceFraction = 10;
+  return niceFraction * 10 ** exponent;
+};
+export const getPercentDiff = ({
+  v1,
+  v2
+}) => {
+  return Math.abs(v1 - v2) / ((v1 + v2) / 2) * 100;
+};
+export const formatNumberUS = ({
+  num
+}) => Intl.NumberFormat('en').format(num);
+export const formatNumberUSCompact = ({
+  num
+}) => Intl.NumberFormat('en', {
+  notation: 'compact',
+  compactDisplay: 'short'
+}).format(num);
+
+/**
+ * Sort bars based on sortBy and order configuration
+ */
+export const sortBars = ({
+  bars,
+  sortBy,
+  order
+}) => {
+  if (sortBy === 'none' || !sortBy) {
+    return bars;
+  }
+  const sorted = [...bars].sort((a, b) => {
+    if (sortBy === 'label') {
+      return a.yLabel.localeCompare(b.yLabel);
+    }
+    // sortBy === 'value' - use seriesTwoValue if available, otherwise seriesOneValue
+    const aValue = a.seriesTwoValue ?? a.seriesOneValue;
+    const bValue = b.seriesTwoValue ?? b.seriesOneValue;
+    return aValue - bValue;
+  });
+  return order === 'descending' ? sorted.reverse() : sorted;
+};
+
+/**
+ * Generates an accessible summary of the bar values
+ */
+export const getValuesSummary = ({
+  yLabel,
+  seriesOneValue,
+  seriesTwoValue,
+  unit
+}) => {
+  if (seriesTwoValue !== undefined) {
+    const gained = seriesOneValue;
+    return `${gained} ${unit} gained - now at ${seriesTwoValue} ${unit} in ${yLabel} category`;
+  }
+  return `${seriesOneValue} ${unit} in ${yLabel} category`;
+};
+
+/**
+ * Calculates the value for a given label position
+ */
+export const getLabel = ({
+  labelCount,
+  labelIndex,
+  min,
+  max
+}) => {
+  if (labelCount <= 1) return max;
+  const incrementalDecimal = labelIndex / (labelCount - 1);
+  return Math.floor(min + incrementalDecimal * (max - min));
+};
+
+/**
+ * Calculates the percentage position for a given value within a range
+ * Returns a value between 0 and 100 representing the position percentage
+ */
+export const calculatePositionPercent = ({
+  value,
+  min,
+  max
+}) => {
+  if (max === min) return 0;
+  const range = max - min;
+  const adjustedValue = value - min;
+  return adjustedValue / range * 100;
+};
+
+// Re-export hooks
+export { useBarChart, useBarChartContext, useLabelPositions } from './hooks';

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './Anchor';
 export * from './Animation';
 export * from './AppWrapper';
 export * from './Badge';
+export * from './BarChart';
 export * from './BodyPortal';
 export * from './Box';
 export * from './Breadcrumbs';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './Anchor';
 export * from './Animation';
 export * from './AppWrapper';
 export * from './Badge';
+export * from './BarChart';
 export * from './BodyPortal';
 export * from './Box';
 export * from './Breadcrumbs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.6.2",
+  "version": "67.6.3-alpha.22c4b5.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.54.0",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "598e43114b75437e1b5db66ad6a416e532780abe"
+  "gitHead": "6595237ef4895b7e05deba508a22738f9cdf07aa"
 }