@iress-oss/ids-components 6.0.0-alpha.0 → 6.0.0-alpha.2

package/dist/src/styled-system/types/jsx.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
 import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
@@ -7,26 +7,43 @@ interface Dict {
   [k: string]: unknown
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
+export type DataAttrs = Record<`data-${string}`, unknown>
+
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
 }
 
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
 export interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
-  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+  defaultProps?: Partial<TProps> & DataAttrs
+  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
+  forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends StyledComponent<infer A, infer B>
   ? StyledComponent<A, Pretty<DistributiveUnion<P, B>>>
@@ -47,6 +64,6 @@ export type JsxElements = {
 
 export type Styled = JsxFactory & JsxElements
 
-export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never

package/dist/src/styled-system/types/prop-type.d.ts

@@ -56,6 +56,10 @@ export interface UtilityValues {
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	focusRing: "outside" | "inside" | "mixed" | "none";
+	focusVisibleRing: "outside" | "inside" | "mixed" | "none";
+	focusRingColor: Tokens["colors"];
+	focusRingOffset: Tokens["spacing"];
 	divideColor: Tokens["colors"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
 	inlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -69,6 +73,7 @@ export interface UtilityValues {
 	minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	boxSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
 	color: Tokens["colors"];
 	fontSmoothing: "antialiased" | "subpixel-antialiased";
 	textDecorationColor: Tokens["colors"];
@@ -80,6 +85,7 @@ export interface UtilityValues {
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
@@ -127,7 +133,8 @@ export interface UtilityValues {
 	borderSpacing: Tokens["spacing"] | "auto";
 	borderSpacingX: Tokens["spacing"];
 	borderSpacingY: Tokens["spacing"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animationName: "fieldFooter" | "iconRotation" | "loadingDots" | "loadingFadeNext" | "loadingSlideNext" | "loadingItemFill" | "loadingItemScale" | "loadingItemStroke" | "skeletonLoading" | "toggleActive";
 	rotate: "auto" | "auto-3d";
 	scale: "auto";
@@ -174,7 +181,7 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	focusable: "true" | "within";
-	gutter: "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | "spacing.400" | "spacing.500" | "spacing.600" | "spacing.700" | "spacing.800" | "spacing.900" | "spacing.1000" | "spacing.1200" | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "field.footer" | "slider.tick";
+	gutter: "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.10" | "none" | "xs" | "sm" | "md" | "lg" | "xl";
 	selectChevron: boolean;
 	selectChevronRtl: boolean;
 	tableChevron: boolean;
@@ -186,8 +193,8 @@ export interface UtilityValues {
 	sliderThumb: boolean;
 	noGutter: boolean;
 	stretch: boolean;
-	colorPalette: "colour.primary.fill" | "colour.primary.fillHover" | "colour.primary.onFill" | "colour.primary.surface" | "colour.primary.surfaceHover" | "colour.primary.text" | "colour.neutral.10" | "colour.neutral.20" | "colour.neutral.30" | "colour.neutral.40" | "colour.neutral.50" | "colour.neutral.60" | "colour.neutral.70" | "colour.neutral.80" | "colour.accent.brand" | "colour.system.success.fill" | "colour.system.success.fillHover" | "colour.system.success.onFill" | "colour.system.success.surface" | "colour.system.success.surfaceHover" | "colour.system.success.text" | "colour.system.danger.fill" | "colour.system.danger.fillHover" | "colour.system.danger.onFill" | "colour.system.danger.surface" | "colour.system.danger.surfaceHover" | "colour.system.danger.text" | "colour.system.warning.fill" | "colour.system.warning.onFill" | "colour.system.warning.surface" | "colour.system.warning.text" | "colour.system.info.fill" | "colour.system.info.onFill" | "colour.system.info.surface" | "colour.system.info.text" | "colour.system.backdrop.fill" | "transparent" | "alt";
-	textStyle: "typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | "typography.body.sm.strong" | "typography.body.sm.em" | "typography.body.md.regular" | "typography.body.md" | "typography.body.md.strong" | "typography.body.md.em" | "typography.body.lg" | "typography.body.lg.regular" | "typography.body.lg.strong" | "typography.body.lg.em" | "typography.code";
+	colorPalette: "colour.primary.fill" | "colour.primary.fillHover" | "colour.primary.onFill" | "colour.primary.surface" | "colour.primary.surfaceHover" | "colour.primary.text" | "colour.neutral.10" | "colour.neutral.20" | "colour.neutral.30" | "colour.neutral.40" | "colour.neutral.50" | "colour.neutral.60" | "colour.neutral.70" | "colour.neutral.80" | "colour.accent.brand" | "colour.system.success.fill" | "colour.system.success.fillHover" | "colour.system.success.onFill" | "colour.system.success.surface" | "colour.system.success.surfaceHover" | "colour.system.success.text" | "colour.system.danger.fill" | "colour.system.danger.fillHover" | "colour.system.danger.onFill" | "colour.system.danger.surface" | "colour.system.danger.surfaceHover" | "colour.system.danger.text" | "colour.system.warning.fill" | "colour.system.warning.onFill" | "colour.system.warning.surface" | "colour.system.warning.text" | "colour.system.info.fill" | "colour.system.info.onFill" | "colour.system.info.surface" | "colour.system.info.text" | "colour.system.backdrop.fill" | "transparent" | "page" | "alt" | "muted" | "text";
+	textStyle: "typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | "typography.body.sm.medium" | "typography.body.sm.strong" | "typography.body.sm.em" | "typography.body.md.regular" | "typography.body.md" | "typography.body.md.medium" | "typography.body.md.strong" | "typography.body.md.em" | "typography.body.lg" | "typography.body.lg.regular" | "typography.body.lg.medium" | "typography.body.lg.strong" | "typography.body.lg.em" | "typography.code";
 	layerStyle: "elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact" | "dots" | "skeleton";
 	animationStyle: "field-footer" | "icon-spin-half" | "icon-spin-1" | "icon-spin-2" | "icon-spin-3" | "loading-fade-next" | "loading-slide-next" | "skeleton-loading" | "toggle-active";
 }

package/dist/src/styled-system/types/style-props.d.ts

@@ -5907,7 +5907,7 @@ transitionDuration?: ConditionalValue<WithEscapeHatch<CssProperties["transitionD
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
    */
-transitionProperty?: ConditionalValue<WithEscapeHatch<CssProperties["transitionProperty"]>>
+transitionProperty?: ConditionalValue<WithEscapeHatch<UtilityValues["transitionProperty"] | CssVars>>
  /**
    * The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
    *
@@ -6992,6 +6992,9 @@ bgBlendMode?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundBlendMod
    */
 bgSize?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundSize"]>>
  bgGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundGradient"] | CssVars>>
+ bgLinear?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundLinear"] | CssVars>>
+ bgRadial?: ConditionalValue<WithEscapeHatch<string | number>>
+ bgConic?: ConditionalValue<WithEscapeHatch<string | number>>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -7359,13 +7362,23 @@ scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingIn
  hideBelow?: ConditionalValue<WithEscapeHatch<UtilityValues["hideBelow"] | CssVars>>
  spaceX?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceX"] | CssVars>>
  spaceY?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceY"] | CssVars>>
+ focusRing?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRing"] | CssVars>>
+ focusVisibleRing?: ConditionalValue<WithEscapeHatch<UtilityValues["focusVisibleRing"] | CssVars>>
+ focusRingColor?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingColor"] | CssVars>>
+ focusRingOffset?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingOffset"] | CssVars>>
+ focusRingWidth?: ConditionalValue<WithEscapeHatch<string | number>>
+ focusRingStyle?: ConditionalValue<WithEscapeHatch<string | number>>
  divideX?: ConditionalValue<WithEscapeHatch<string | number>>
  divideY?: ConditionalValue<WithEscapeHatch<string | number>>
  divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
  divideStyle?: ConditionalValue<WithEscapeHatch<string | number>>
+ boxSize?: ConditionalValue<WithEscapeHatch<UtilityValues["boxSize"] | CssVars>>
  fontSmoothing?: ConditionalValue<WithEscapeHatch<UtilityValues["fontSmoothing"] | CssVars>>
  truncate?: ConditionalValue<WithEscapeHatch<UtilityValues["truncate"] | CssVars>>
  backgroundGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundGradient"] | CssVars>>
+ backgroundLinear?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundLinear"] | CssVars>>
+ backgroundRadial?: ConditionalValue<WithEscapeHatch<string | number>>
+ backgroundConic?: ConditionalValue<WithEscapeHatch<string | number>>
  textGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["textGradient"] | CssVars>>
  gradientFromPosition?: ConditionalValue<WithEscapeHatch<string | number>>
  gradientToPosition?: ConditionalValue<WithEscapeHatch<string | number>>

package/dist/src/styled-system/types/system-types.d.ts

@@ -91,19 +91,95 @@ type PositionTry =
   | DashedIdent
 
 export interface ModernCssProperties {
+  /**
+   * Defines a name for the anchor element that can be referenced by positioned elements.
+   */
   anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
+
+  /**
+   * Defines the scope of anchor names within the element.
+   */
   anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
+
+  /**
+   * Controls how form elements size themselves.
+   */
   fieldSizing?: Globals | 'fixed' | 'content'
+
+  /**
+   * Controls whether interpolation of size values should allow keywords.
+   */
   interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
+
+  /**
+   * Specifies the anchor element that this positioned element should be positioned relative to.
+   */
   positionAnchor?: Globals | 'auto' | DashedIdent
+
+  /**
+   * Specifies the area within the anchor element where this positioned element should be placed.
+   */
   positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
+
+  /**
+   * Specifies the position try options for the element.
+   */
   positionTry?: Globals | StringToMultiple<PositionTry> | String
+
+  /**
+   * Specifies fallback position try options when the primary position fails.
+   */
   positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
+
+  /**
+   * Specifies the order in which position try options should be attempted.
+   */
   positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
+
+  /**
+   * Controls when the positioned element should be visible.
+   */
   positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
+
+  /**
+   * Controls whether text should wrap or not.
+   */
   textWrapMode?: Globals | 'wrap' | 'nowrap'
+
+  /**
+   * Controls trimming of spacing in text.
+   */
   textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
+
+  /**
+   * Controls the style of text wrapping.
+   */
   textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
+
+  /**
+   * Controls whether the entire element should be draggable instead of its contents.
+   */
+  WebkitUserDrag?: Globals | 'auto' | 'element' | 'none'
+
+  /**
+   * Specifies whether an element can be used to drag the entire app window (Electron).
+   */
+  WebkitAppRegion?: Globals | 'drag' | 'no-drag'
+
+  /**
+   * Sets the horizontal spacing between table borders.
+   */
+  WebkitBorderHorizontalSpacing?: Globals | String | Number
+
+  /**
+   * Sets the vertical spacing between table borders.
+   */
+  WebkitBorderVerticalSpacing?: Globals | String | Number
+
+  /**
+   * Controls the display of text content for security purposes (e.g., password fields).
+   */
+  WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'
 }
 
 export type CssProperty = keyof PropertiesFallback

package/dist/src/types.d.ts

@@ -1,7 +1,9 @@
 import { BREAKPOINTS, DISPLAY_MODES, FLOATING_UI_ALIGNS, FORM_ELEMENT_WIDTHS, GUTTER_SIZES, HEADING_LEVELS, HORIZONTAL_ALIGNS, LOGGER_LEVELS, PADDING_SIZES, SYSTEM_VALIDATION_STATUSES, TEXT_ALIGNS, TEXT_MODES, TEXT_VARIANTS, VERTICAL_ALIGNS } from './constants';
 import { IressCSSProps, IressTestProps, VariablePaddingSize } from './interfaces';
 import { PaddingSize } from './enums';
-import { SpacingToken } from './styled-system/tokens';
+import { SpacingToken as PureSpacingToken } from './styled-system/tokens';
+export type PositiveSpacingToken = Exclude<PureSpacingToken, `-${string}` | `button.${string}` | `field.${string}` | `slider.${string}`>;
+export type SpacingToken = Exclude<PureSpacingToken, `button.${string}` | `field.${string}` | `slider.${string}` | `-button.${string}` | `-field.${string}` | `-slider.${string}`>;
 export type Breakpoints = (typeof BREAKPOINTS)[number];
 export type DisplayModes = (typeof DISPLAY_MODES)[number];
 export type FloatingUIContainer = HTMLElement | null | React.MutableRefObject<HTMLElement | null>;