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

package/dist/src/styled-system/jsx/create-style-context.d.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
 import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
-import type { JsxFactoryOptions } from '../types/jsx';
-import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+import type { JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';
+import type { ComponentType, ElementType } from 'react'
 
 interface UnstyledProps {
-  unstyled?: boolean
+  unstyled?: boolean | undefined
 }
 
 type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
@@ -18,29 +18,36 @@ type SlotRecipe = SvaFn | SlotRecipeFn
 
 type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
+interface WithProviderOptions<P = {}> {
+  defaultProps?: (Partial<P> & DataAttrs) | undefined
 }
 
 type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+>
+
+type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
 >
 
 type StyleContextConsumer<T extends ElementType> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 >
 
 export interface StyleContext<R extends SlotRecipe> {
-  withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+  withRootProvider: <T extends ElementType>(
+    Component: T,
+    options?: WithProviderOptions<ComponentProps<T>> | undefined
+  ) => StyleContextRootProvider<T, R>
   withProvider: <T extends ElementType>(
     Component: T,
     slot: InferSlot<R>,
-    options?: JsxFactoryOptions<ComponentProps<T>>
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
   ) => StyleContextProvider<T, R>
   withContext: <T extends ElementType>(
     Component: T,
     slot: InferSlot<R>,
-    options?: JsxFactoryOptions<ComponentProps<T>>
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
   ) => StyleContextConsumer<T>
 }
 

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

@@ -11,7 +11,7 @@ export type RadiusToken = "radius.000" | "radius.025" | "radius.050" | "radius.0
 
 export type SizeToken = "container.xs" | "container.sm" | "container.md" | "container.lg" | "container.xl" | "container.xxl" | "input.2" | "input.4" | "input.6" | "input.8" | "input.10" | "input.12" | "input.16" | "input.25perc" | "input.50perc" | "input.75perc" | "input.100perc" | "overlay.sm" | "overlay.md" | "overlay.lg" | "chevron.select" | "chevron.table" | "input.height" | "progress.height" | "slider.track" | "slider.thumb" | "slider.tick" | "toggle.width" | "toggle.thumb" | "typography.base" | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-xxl"
 
-export type SpacingToken = "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" | "button.inline" | "button.block" | "-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" | "-button.inline" | "-button.block"
+export type SpacingToken = "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" | "button.inline" | "button.block" | "field.footer" | "slider.tick" | "-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" | "-button.inline" | "-button.block" | "-field.footer" | "-slider.tick"
 
 export type ZIndexToken = "100" | "200" | "300" | "400" | "500" | "600" | "000"
 

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

@@ -46,7 +46,7 @@ export interface Conditions {
 	"_firstLetter": string
 	/** `&::first-line` */
 	"_firstLine": string
-	/** `&:is(::marker, ::-webkit-details-marker)` */
+	/** `&::marker, &::-webkit-details-marker` */
 	"_marker": string
 	/** `&::selection` */
 	"_selection": string

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,6 +7,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<`data-${string}`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -21,9 +23,9 @@ export interface AsProps {
   as?: ElementType | undefined
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
-}
+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> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
@@ -34,9 +36,9 @@ interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }

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

@@ -181,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;
@@ -194,7 +194,7 @@ export interface UtilityValues {
 	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" | "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.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";
+	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/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>;