@codecademy/gamut 68.6.2-alpha.f8b396.0 → 68.6.3-alpha.57e1cd.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 (39) hide show
  1. package/dist/DatePicker/DatePicker.js +5 -2
  2. package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js +4 -3
  3. package/dist/DatePicker/DatePickerInput/Segment/index.js +1 -1
  4. package/dist/DatePicker/DatePickerInput/index.d.ts +4 -0
  5. package/dist/DatePicker/DatePickerInput/index.js +10 -13
  6. package/dist/DatePicker/types.d.ts +6 -0
  7. package/package.json +8 -11
  8. package/agent-tools/.claude-plugin/marketplace.json +0 -16
  9. package/agent-tools/.claude-plugin/plugin.json +0 -7
  10. package/agent-tools/.cursor-plugin/plugin.json +0 -7
  11. package/agent-tools/DESIGN.Codecademy.md +0 -643
  12. package/agent-tools/DESIGN.LXStudio.md +0 -437
  13. package/agent-tools/DESIGN.Percipio.md +0 -433
  14. package/agent-tools/DESIGN.md +0 -1
  15. package/agent-tools/agents/.gitkeep +0 -0
  16. package/agent-tools/rules/accessibility.mdc +0 -78
  17. package/agent-tools/skills/gamut-accessibility/SKILL.md +0 -214
  18. package/agent-tools/skills/gamut-buttons/SKILL.md +0 -96
  19. package/agent-tools/skills/gamut-color-mode/SKILL.md +0 -257
  20. package/agent-tools/skills/gamut-forms/SKILL.md +0 -84
  21. package/agent-tools/skills/gamut-layout/SKILL.md +0 -109
  22. package/agent-tools/skills/gamut-list/SKILL.md +0 -273
  23. package/agent-tools/skills/gamut-review/SKILL.md +0 -254
  24. package/agent-tools/skills/gamut-style-utilities/SKILL.md +0 -107
  25. package/agent-tools/skills/gamut-system-props/SKILL.md +0 -203
  26. package/agent-tools/skills/gamut-testing/SKILL.md +0 -221
  27. package/agent-tools/skills/gamut-theming/SKILL.md +0 -115
  28. package/agent-tools/skills/gamut-typography/SKILL.md +0 -98
  29. package/bin/commands/plugin/install.mjs +0 -212
  30. package/bin/commands/plugin/list.mjs +0 -73
  31. package/bin/commands/plugin/remove.mjs +0 -108
  32. package/bin/commands/plugin/update.mjs +0 -59
  33. package/bin/gamut.mjs +0 -96
  34. package/bin/lib/claude.mjs +0 -52
  35. package/bin/lib/cursor.mjs +0 -40
  36. package/bin/lib/design.mjs +0 -71
  37. package/bin/lib/io.mjs +0 -14
  38. package/bin/lib/resolve-plugin-dir.mjs +0 -38
  39. package/bin/lib/run-command.mjs +0 -22
package/dist/DatePicker/DatePicker.js CHANGED
@@ -103,7 +103,8 @@ export const DatePicker = props => {
103
103
  width: "fit-content",
104
104
  children: mode === 'range' ? /*#__PURE__*/_jsxs(_Fragment, {
105
105
  children: [/*#__PURE__*/_jsx(DatePickerInput, {
106
- name: "datePickerInputStart",
106
+ description: props.startDateDescription,
107
+ name: "datePickerInput",
107
108
  rangePart: "start",
108
109
  size: inputSize
109
110
  }), /*#__PURE__*/_jsx(Box, {
@@ -111,11 +112,13 @@ export const DatePicker = props => {
111
112
  mt: 32,
112
113
  children: isRtl ? /*#__PURE__*/_jsx(MiniArrowLeftIcon, {}) : /*#__PURE__*/_jsx(MiniArrowRightIcon, {})
113
114
  }), /*#__PURE__*/_jsx(DatePickerInput, {
114
- name: "datePickerInputEnd",
115
+ description: props.endDateDescription,
116
+ name: "datePickerInput",
115
117
  rangePart: "end",
116
118
  size: inputSize
117
119
  })]
118
120
  }) : /*#__PURE__*/_jsx(DatePickerInput, {
121
+ description: props.description,
119
122
  size: inputSize
120
123
  })
121
124
  }), /*#__PURE__*/_jsx(PopoverContainer, {
package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarBody.js CHANGED
@@ -67,19 +67,19 @@ export const CalendarBody = ({
67
67
  const containerEl = focusGridSync.calendarContainerRef.current;
68
68
  const focusInCalendarContainer = containerEl?.contains(activeEl) ?? false;
69
69
  const requested = focusGridSync.gridFocusRequested;
70
- const focusOnNavChevron = activeEl instanceof Element && activeEl.closest('[data-calendar-month-nav]') != null;
70
+ const focusOnNavChevron = activeEl instanceof Element && activeEl.closest('[data-calendar-month-nav]') !== null;
71
71
  if (!requested && (pauseGridRoving || focusOnNavChevron)) {
72
72
  return;
73
73
  }
74
74
 
75
75
  // Month navigation unmounts the active cell; focus often lands on <body>, the dialog shell,
76
76
  // or another non-grid node — not inside the container, so we must still sync.
77
- const focusLostFromCellUnmount = activeEl === document.body || activeEl === document.documentElement || activeEl instanceof HTMLElement && containerEl != null && containerEl.contains(activeEl) === false && activeEl.contains(containerEl);
77
+ const focusLostFromCellUnmount = activeEl === document.body || activeEl === document.documentElement || activeEl instanceof HTMLElement && containerEl?.contains(activeEl) === false && activeEl.contains(containerEl);
78
78
 
79
79
  // Sync DOM focus when: navigating inside this table; first focus from input (keyboard open);
80
80
  // focus is in the multi-month strip (cross-grid arrows); or focus was lost after the grid updated.
81
81
  // Do not pull focus from the input when the user opened with the mouse and never entered the surface.
82
- const shouldSyncFocus = inThisGrid || requested || focusInCalendarContainer || focusLostFromCellUnmount && containerEl != null;
82
+ const shouldSyncFocus = inThisGrid || requested || focusInCalendarContainer || focusLostFromCellUnmount && containerEl !== null;
83
83
  if (!shouldSyncFocus) return;
84
84
  const finish = success => {
85
85
  if (success && requested) {
@@ -126,6 +126,7 @@ export const CalendarBody = ({
126
126
  children: /*#__PURE__*/_jsx("tr", {
127
127
  children: weekdayLabels.map((label, i) => /*#__PURE__*/_jsx(TableHeader, {
128
128
  abbr: weekdayFullNames[i],
129
+ "aria-label": weekdayFullNames[i],
129
130
  scope: "col",
130
131
  children: label
131
132
  }, label))
package/dist/DatePicker/DatePickerInput/Segment/index.js CHANGED
@@ -24,7 +24,7 @@ export const DatePickerInputSegment = ({
24
24
  segments
25
25
  });
26
26
  const numericValue = parseSegmentNumericString(segments[field]);
27
- const ariaValue = segments[field].length > 0 && numericValue != null ? numericValue : undefined;
27
+ const ariaValue = segments[field].length > 0 && numericValue !== null ? numericValue : undefined;
28
28
  const display = segments[field].length > 0 ? segments[field] : getSegmentPlaceholder(field);
29
29
  const inputID = useId();
30
30
  const inputId = `datepicker-input-${inputID.replace(/:/g, '')}`;
package/dist/DatePicker/DatePickerInput/index.d.ts CHANGED
@@ -2,8 +2,12 @@ import type { InputWrapperProps } from '../../Form/inputs/Input';
2
2
  export type DatePickerInputProps = Omit<InputWrapperProps, 'className' | 'type' | 'icon' | 'value' | 'onChange' | 'color'> & {
3
3
  /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
4
4
  rangePart?: 'start' | 'end';
5
+ /** Description to display between the label and the input. */
6
+ description?: string;
5
7
  };
6
8
  export declare const DatePickerInput: import("react").ForwardRefExoticComponent<Omit<InputWrapperProps, "color" | "className" | "onChange" | "type" | "icon" | "value"> & {
7
9
  /** In range mode: which part of the range this input edits. Omit for single-date or combined display. */
8
10
  rangePart?: "start" | "end";
11
+ /** Description to display between the label and the input. */
12
+ description?: string;
9
13
  } & import("react").RefAttributes<HTMLDivElement>>;
package/dist/DatePicker/DatePickerInput/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { MiniCalendarIcon } from '@codecademy/gamut-icons';
2
2
  import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
3
3
  import { FlexBox } from '../../Box';
4
+ import { IconButton } from '../../Button';
4
5
  import { FormGroup } from '../../Form/elements/FormGroup';
5
6
  import { isSameDay } from '../DatePickerCalendar/Calendar/utils/dateGrid';
6
7
  import { handleDateSelectRange } from '../DatePickerCalendar/utils/dateSelect';
@@ -19,6 +20,7 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
19
20
  name,
20
21
  rangePart,
21
22
  size = 'base',
23
+ description,
22
24
  ...rest
23
25
  }, ref) => {
24
26
  const context = useDatePicker();
@@ -66,7 +68,7 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
66
68
  }, [segmentElRefs]);
67
69
  const shellRef = useCallback(el => {
68
70
  containerRef.current = el;
69
- if (typeof ref === 'function') ref(el);else if (ref != null) ref.current = el;
71
+ if (typeof ref === 'function') ref(el);else if (ref !== null) ref.current = el;
70
72
  }, [ref]);
71
73
  useEffect(() => {
72
74
  if (!isInputFocusedRef.current) {
@@ -144,7 +146,8 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
144
146
  focusCalendar();
145
147
  }, [isCalendarOpen, openCalendar, focusCalendar]);
146
148
  return /*#__PURE__*/_jsx(FormGroup, {
147
- htmlFor: inputId,
149
+ description: description,
150
+ id: inputId,
148
151
  isSoloField: true,
149
152
  label: label ?? defaultLabel,
150
153
  mb: 0,
@@ -152,7 +155,7 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
152
155
  spacing: "tight",
153
156
  width: "fit-content",
154
157
  children: /*#__PURE__*/_jsxs(SegmentedShell, {
155
- id: inputId,
158
+ "aria-labelledby": inputId,
156
159
  inputSize: size,
157
160
  ref: shellRef,
158
161
  role: "group",
@@ -199,16 +202,10 @@ export const DatePickerInput = /*#__PURE__*/forwardRef(({
199
202
  tabIndex: -1,
200
203
  type: "hidden",
201
204
  value: hiddenValue
202
- }), /*#__PURE__*/_jsx(FlexBox, {
203
- alignItems: "center",
204
- justifyContent: "center",
205
- pl: 16,
206
- pr: 8,
207
- role: "presentation",
208
- children: /*#__PURE__*/_jsx(MiniCalendarIcon, {
209
- "aria-hidden": true,
210
- size: 16
211
- })
205
+ }), /*#__PURE__*/_jsx(IconButton, {
206
+ icon: MiniCalendarIcon,
207
+ size: "small",
208
+ tip: "Open calendar"
212
209
  })]
213
210
  })
214
211
  });
package/dist/DatePicker/types.d.ts CHANGED
@@ -92,6 +92,8 @@ export interface DatePickerSingleProps extends DatePickerBaseProps<'single'> {
92
92
  * ```
93
93
  */
94
94
  onSelected: (date: Date | null) => void;
95
+ /** Description to display between the label and the input. */
96
+ description?: string;
95
97
  }
96
98
  export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
97
99
  /** Controlled start date. Pass `null` to not have a default start date. Pass a `Date` to have a default start date.
@@ -159,6 +161,10 @@ export interface DatePickerRangeProps extends DatePickerBaseProps<'range'> {
159
161
  * ```
160
162
  */
161
163
  onEndSelected: (date: Date | null) => void;
164
+ /** Description to display between the label and the start date input. */
165
+ startDateDescription?: string;
166
+ /** Description to display between the label and the end date input. */
167
+ endDateDescription?: string;
162
168
  }
163
169
  export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
164
170
  export {};
package/package.json CHANGED
@@ -1,15 +1,14 @@
1
1
  {
2
2
  "name": "@codecademy/gamut",
3
3
  "description": "Styleguide & Component library for Codecademy",
4
- "version": "68.6.2-alpha.f8b396.0",
4
+ "version": "68.6.3-alpha.57e1cd.0",
5
5
  "author": "Codecademy Engineering <dev@codecademy.com>",
6
- "bin": "./bin/gamut.mjs",
7
6
  "dependencies": {
8
- "@codecademy/gamut-icons": "9.57.6-alpha.f8b396.0",
9
- "@codecademy/gamut-illustrations": "0.58.12-alpha.f8b396.0",
10
- "@codecademy/gamut-patterns": "0.10.31-alpha.f8b396.0",
11
- "@codecademy/gamut-styles": "18.0.1-alpha.f8b396.0",
12
- "@codecademy/variance": "0.26.2-alpha.f8b396.0",
7
+ "@codecademy/gamut-icons": "9.57.6-alpha.57e1cd.0",
8
+ "@codecademy/gamut-illustrations": "0.58.12-alpha.57e1cd.0",
9
+ "@codecademy/gamut-patterns": "0.10.31-alpha.57e1cd.0",
10
+ "@codecademy/gamut-styles": "18.0.1-alpha.57e1cd.0",
11
+ "@codecademy/variance": "0.26.2-alpha.57e1cd.0",
13
12
  "@formatjs/intl-locale": "5.3.1",
14
13
  "@react-aria/interactions": "3.25.0",
15
14
  "@types/marked": "^4.0.8",
@@ -31,9 +30,7 @@
31
30
  "sanitize-markdown": "^2.6.7"
32
31
  },
33
32
  "files": [
34
- "dist",
35
- "bin",
36
- "agent-tools"
33
+ "dist"
37
34
  ],
38
35
  "license": "MIT",
39
36
  "main": "./dist/index.js",
@@ -55,7 +52,7 @@
55
52
  "build": "nx build @codecademy/gamut",
56
53
  "build:watch": "yarn build && onchange ./src -- yarn build",
57
54
  "compile": "babel ./src --out-dir ./dist --extensions \".ts,.tsx\"",
58
- "verify": "tsc --noEmit && tsc --project tsconfig.bin.json"
55
+ "verify": "tsc --noEmit"
59
56
  },
60
57
  "sideEffects": [
61
58
  "**/*.css",
package/agent-tools/.claude-plugin/marketplace.json DELETED
@@ -1,16 +0,0 @@
1
- {
2
- "name": "gamut-design-system",
3
- "owner": {
4
- "name": "Codecademy"
5
- },
6
- "metadata": {
7
- "description": "Local marketplace for @codecademy/gamut agent tools."
8
- },
9
- "plugins": [
10
- {
11
- "name": "gamut-design-system",
12
- "source": "./",
13
- "description": "Gamut design system agent tools: skills and rules for AI-assisted development."
14
- }
15
- ]
16
- }
package/agent-tools/.claude-plugin/plugin.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "name": "gamut-design-system",
3
- "version": "0.0.1",
4
- "description": "Gamut design system agent tools: skills and rules for AI-assisted development.",
5
- "license": "MIT",
6
- "keywords": ["codecademy", "gamut", "design-system", "agent-skills"]
7
- }
package/agent-tools/.cursor-plugin/plugin.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "name": "gamut-design-system",
3
- "displayName": "Gamut Design System",
4
- "version": "0.0.1",
5
- "description": "Gamut design system agent tools: skills and rules for AI-assisted development.",
6
- "keywords": ["codecademy", "gamut", "design-system", "agent-skills"]
7
- }