@yahoo/uds 3.96.0-beta.2 → 3.96.0-beta.3

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.
package/dist/cli.mjs CHANGED
@@ -299,7 +299,7 @@ const EDITOR_CONFIGS = { cursor: {
299
299
  name: "UDS Components",
300
300
  description: "Component development guidelines and patterns",
301
301
  files: [{
302
- source: "cursor/uds/components.mdc",
302
+ source: "rules/cursor/uds/components.mdc",
303
303
  target: ".cursor/rules/uds/components.mdc",
304
304
  type: "file"
305
305
  }]
@@ -308,7 +308,7 @@ const EDITOR_CONFIGS = { cursor: {
308
308
  name: "UDS Tailwind",
309
309
  description: "Tailwind CSS configuration and setup guidelines",
310
310
  files: [{
311
- source: "cursor/uds/tailwind.mdc",
311
+ source: "rules/cursor/uds/tailwind.mdc",
312
312
  target: ".cursor/rules/uds/tailwind.mdc",
313
313
  type: "file"
314
314
  }]
@@ -317,7 +317,7 @@ const EDITOR_CONFIGS = { cursor: {
317
317
  name: "UDS Icons",
318
318
  description: "Icon usage and documentation guidelines",
319
319
  files: [{
320
- source: "cursor/uds/icons.mdc",
320
+ source: "rules/cursor/uds/icons.mdc",
321
321
  target: ".cursor/rules/uds/icons.mdc",
322
322
  type: "file"
323
323
  }]
@@ -0,0 +1,25 @@
1
+ ---
2
+ description: UDS components
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ - Always fetch components type definition using the UDS mcp server
8
+ - Always fetch the possible components from uds using the UDS mcp server
9
+ - Anytime you are about to use a component, fetch the type definition
10
+ - Anytime you are about to use a component, fetch the component documentation examples
11
+ - Anytime you have to create a component, make sure you are using UDS components
12
+ - Never create already existing UDS components from scratch
13
+ - Make sure there are no type errors when you create new components
14
+ - Always use UDS UI library components instead of raw HTML tags.
15
+ - Only create custom components when UDS doesn't provide the needed functionality
16
+ - `<Box>` has `display = 'flex'` by default - use `<VStack>` for vertical stacking, `<HStack>` for horizontal, or `<div>` for simple containers
17
+ - Use `<Text>` instead of `<p>`, `<span>`, `<h1>`-`<h6>`
18
+ - Use `<Button>` instead of `<button>`
19
+ - Use `<Input>` instead of `<input>`
20
+ - Use `<Checkbox>` instead of `<input type="checkbox">`
21
+ - Use `<Radio>` instead of `<input type="radio">`
22
+ - Use `<Switch>` instead of custom toggle components
23
+ - Use `<Link>` instead of `<a>`
24
+ - Use `<Icon>` instead of SVG elements
25
+ - Fix all lint errors before completing the task
@@ -0,0 +1,8 @@
1
+ ---
2
+ description: UDS Icons
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ - Anytime you have to use an icon in a UDS component or use UDS icons outside UDS components, fetch Icon documentation for more context from the MCP server
8
+ - Always check what icons are available in UDS through the MCP server
@@ -0,0 +1,9 @@
1
+ ---
2
+ description: UDS config
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ - Never create a UDS config manually
8
+ - If `uds.config.ts` or `uds.config.js` is not present at the root of the project, ask the user to create it using UDS CLI sync command
9
+ - Make sure that tailwind configuration has the UDS tailwind plugin
@@ -134,10 +134,10 @@ declare const getStylesInternal: (props?: ({
134
134
  placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
135
135
  fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
136
136
  fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
137
- fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "extralight" | "regular" | "semibold" | "bold" | "extrabold" | undefined;
137
+ fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
138
138
  lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
139
139
  letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
140
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
140
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
141
141
  textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
142
142
  spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
143
143
  spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -190,7 +190,7 @@ declare const getStylesInternal: (props?: ({
190
190
  overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
191
191
  overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
192
192
  position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
193
- contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
193
+ contentFit?: "none" | "fill" | "contain" | "cover" | "scale-down" | undefined;
194
194
  colorMode?: "light" | "dark" | undefined;
195
195
  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
196
196
  width?: "full" | "fit" | "screen" | undefined;
@@ -134,10 +134,10 @@ declare const getStylesInternal: (props?: ({
134
134
  placeholderColor?: "primary" | "secondary" | "accent" | "brand" | "alert" | "positive" | "warning" | "info" | "brand-secondary" | "alert-secondary" | "positive-secondary" | "warning-secondary" | "info-secondary" | "white" | "black" | "transparent" | "current" | "always/white" | "always/black" | "always/transparent" | "always/current" | "always/brand" | "always/accent" | "tertiary" | "muted" | "on-color" | undefined;
135
135
  fontFamily?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "sans" | "sans-alt" | "serif" | "serif-alt" | "mono" | undefined;
136
136
  fontSize?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
137
- fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "extralight" | "regular" | "semibold" | "bold" | "extrabold" | undefined;
137
+ fontWeight?: "black" | "thin" | "medium" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "light" | "bold" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
138
138
  lineHeight?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
139
139
  letterSpacing?: "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | undefined;
140
- textAlign?: "start" | "end" | "center" | "justify" | undefined;
140
+ textAlign?: "center" | "justify" | "start" | "end" | undefined;
141
141
  textTransform?: "none" | "display1" | "display2" | "display3" | "title1" | "title2" | "title3" | "title4" | "headline1" | "body1" | "label1" | "label2" | "label3" | "label4" | "caption1" | "caption2" | "legal1" | "ui1" | "ui2" | "ui3" | "ui4" | "ui5" | "ui6" | "display1/emphasized" | "display2/emphasized" | "display3/emphasized" | "title1/emphasized" | "title2/emphasized" | "title3/emphasized" | "title4/emphasized" | "headline1/emphasized" | "body1/emphasized" | "label1/emphasized" | "label2/emphasized" | "label3/emphasized" | "label4/emphasized" | "caption1/emphasized" | "caption2/emphasized" | "legal1/emphasized" | "ui1/emphasized" | "ui2/emphasized" | "ui3/emphasized" | "ui4/emphasized" | "ui5/emphasized" | "ui6/emphasized" | "uppercase" | "lowercase" | "capitalize" | undefined;
142
142
  spacing?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
143
143
  spacingHorizontal?: "0" | "1" | "2" | "3" | "4" | "5" | "px" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | undefined;
@@ -190,7 +190,7 @@ declare const getStylesInternal: (props?: ({
190
190
  overflowX?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
191
191
  overflowY?: "hidden" | "auto" | "clip" | "visible" | "scroll" | undefined;
192
192
  position?: "static" | "fixed" | "absolute" | "relative" | "sticky" | undefined;
193
- contentFit?: "none" | "fill" | "cover" | "contain" | "scale-down" | undefined;
193
+ contentFit?: "none" | "fill" | "contain" | "cover" | "scale-down" | undefined;
194
194
  colorMode?: "light" | "dark" | undefined;
195
195
  scaleMode?: "small" | "medium" | "xSmall" | "large" | "xLarge" | "xxLarge" | "xxxLarge" | undefined;
196
196
  width?: "full" | "fit" | "screen" | undefined;
@@ -4,6 +4,6 @@ import tailwindColors from "tailwindcss/colors";
4
4
  //#region src/tailwind/utils/getTailwindAsUdsColors.d.ts
5
5
  type DeprecatedTailwindHue = 'lightBlue' | 'warmGray' | 'trueGray' | 'coolGray' | 'blueGray';
6
6
  type TailwindHue = Exclude<keyof typeof tailwindColors, DeprecatedTailwindHue>;
7
- declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "600" | "800" | "900" | "950", string>>;
7
+ declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "800" | "900" | "600" | "950", string>>;
8
8
  //#endregion
9
9
  export { getTailwindAsUdsColors };
@@ -4,6 +4,6 @@ import tailwindColors from "tailwindcss/colors";
4
4
  //#region src/tailwind/utils/getTailwindAsUdsColors.d.ts
5
5
  type DeprecatedTailwindHue = 'lightBlue' | 'warmGray' | 'trueGray' | 'coolGray' | 'blueGray';
6
6
  type TailwindHue = Exclude<keyof typeof tailwindColors, DeprecatedTailwindHue>;
7
- declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "600" | "800" | "900" | "950", string>>;
7
+ declare function getTailwindAsUdsColors(): Record<TailwindHue, Record<"50" | "100" | "200" | "300" | "500" | "700" | "400" | "800" | "900" | "600" | "950", string>>;
8
8
  //#endregion
9
9
  export { getTailwindAsUdsColors };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@yahoo/uds",
3
3
  "description": "Yahoo Universal System",
4
- "version": "3.96.0-beta.2",
4
+ "version": "3.96.0-beta.3",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
7
7
  "module": "./dist/index.js",