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

package/dist/sva-TRyehFkb.js

@@ -0,0 +1,32 @@
+import { g as f, a as j, m as v, b as O, s as _ } from "./cva-B2x59Dph.js";
+import { c as V } from "./cx-DN21T1EH.js";
+const y = (s, r) => s + "__" + r;
+function d(s) {
+  const r = Object.entries(f(s)).map(([t, a]) => [t, j(a)]), i = s.defaultVariants ?? {};
+  function m(t) {
+    const a = r.map(([e, n]) => [e, V(n(t), s.className && y(s.className, e))]);
+    return Object.fromEntries(a);
+  }
+  function p(t) {
+    const a = r.map(([e, n]) => [e, n.raw(t)]);
+    return Object.fromEntries(a);
+  }
+  const c = s.variants ?? {}, o = Object.keys(c);
+  function l(t) {
+    return _(t, o);
+  }
+  const u = (t) => ({ ...i || {}, ...O(t) }), b = Object.fromEntries(
+    Object.entries(c).map(([t, a]) => [t, Object.keys(a)])
+  );
+  return Object.assign(v(m), {
+    __cva__: !1,
+    raw: p,
+    variantMap: b,
+    variantKeys: o,
+    splitVariantProps: l,
+    getVariantProps: u
+  });
+}
+export {
+  d as s
+};

package/dist/theme-preset/config-recipes/button.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const buttonRecipe: import('@pandacss/dev').SlotRecipeConfig;

package/dist/theme-preset/config-recipes/table.d.ts

@@ -0,0 +1 @@
+export declare const tableRecipe: import('@pandacss/dev').SlotRecipeConfig;

package/dist/theme-preset/config-recipes/text.d.ts

@@ -0,0 +1 @@
+export declare const textRecipe: import('@pandacss/dev').RecipeConfig<import('@pandacss/dev').RecipeVariantRecord>;

package/dist/theme-preset/globalCss.d.ts

@@ -0,0 +1 @@
+export declare const globalCss: import('@pandacss/dev').GlobalStyleObject;

package/dist/theme-preset/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('@pandacss/dev').Preset;
+export default _default;

package/dist/theme-preset/staticCss.d.ts

@@ -0,0 +1,2 @@
+import { ExtendableOptions } from '@pandacss/types';
+export declare const staticCss: ExtendableOptions['staticCss'];

package/dist/theme-preset/storybook.d.ts

@@ -0,0 +1,4 @@
+import { ArgTypes } from '@storybook/react';
+export declare const themeArgTypes: ArgTypes;
+export declare const withThemeArgTypes: (argTypes: ArgTypes) => ArgTypes<import('@storybook/react').Args>;
+export declare const themeControlNames: string[];

package/dist/theme-preset/tokens/animationStyles.d.ts

@@ -0,0 +1 @@
+export declare const animationStyles: import('@pandacss/types').AnimationStyles;

package/dist/theme-preset/tokens/borders.d.ts

@@ -0,0 +1,50 @@
+export declare const borders: {
+    alert: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: string;
+        };
+    };
+    divider: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: "var(--iress-colour-neutral-30, #E4E5E7)";
+        };
+    };
+    input: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: "var(--iress-colour-neutral-70, #6D7278)";
+        };
+    };
+    placeholder: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: "var(--iress-colour-neutral-30, #E4E5E7)";
+        };
+    };
+    hover: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: "var(--iress-colour-primary-fill, #13213F)";
+        };
+    };
+    table: {
+        description: string;
+        value: {
+            width: string;
+            style: "solid";
+            color: "var(--iress-colour-neutral-40, #D7D8DA)";
+        };
+    };
+};

package/dist/theme-preset/tokens/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+};

package/dist/theme-preset/tokens/colors.d.ts

@@ -0,0 +1,156 @@
+import { ColorToken } from '../../src/styled-system/tokens';
+export declare const colors: {
+    'colour.primary.fill': {
+        description: "Used for primary buttons and the active state of form controls such as checkboxes and radio buttons. Also used for the border of tags when they have a custom button.";
+        value: "var(--iress-colour-primary-fill, #13213F)";
+    };
+    'colour.primary.fillHover': {
+        description: "Used for the hover state of primary buttons as well as hovering over active form controls.";
+        value: "var(--iress-colour-primary-fill-hover, #2B3752)";
+    };
+    'colour.primary.onFill': {
+        description: "Used as the foreground colour on primary buttons and active form controls.";
+        value: "var(--iress-colour-primary-on-fill, #ECF2FF)";
+    };
+    'colour.primary.surface': {
+        description: "Used as the background colour for secondary buttons and the focused state of menu and tab items. Also used as the background colour of active buttons.";
+        value: "var(--iress-colour-primary-surface, #D9E5FF)";
+    };
+    'colour.primary.surfaceHover': {
+        description: "Used for the hover state of secondary buttons, form controls and hovering over focused menu and tab items. Also used when hovering over table rows.";
+        value: "var(--iress-colour-primary-surface-hover, #E1EAFF)";
+    };
+    'colour.primary.text': {
+        description: "Used for text on primary buttons, active form controls and focused tab and menu items. Also used for the link text colour and tertiary buttons.";
+        value: "var(--iress-colour-primary-text, #13213F)";
+    };
+    'colour.neutral.10': {
+        description: "Used as the default background colour for most components. For tooltips, it is used as the foreground colour for the tooltip content.";
+        value: "var(--iress-colour-neutral-10, #FFFFFF)";
+    };
+    'colour.neutral.20': {
+        description: "Used as the alternating background colour for components such as tables. Used as the background colour behind panels and cards for highly interactive screens.";
+        value: "var(--iress-colour-neutral-20, #F9F9F9)";
+    };
+    'colour.neutral.30': {
+        description: "Used as the border colour for dividers, and the default divider colour for components with in-built headers and footers such as cards.";
+        value: "var(--iress-colour-neutral-30, #E4E5E7)";
+    };
+    'colour.neutral.40': {
+        description: "Used for borders in subtle interactive components, such as checkboxes and radios with hidden controls and the progress bar.";
+        value: "var(--iress-colour-neutral-40, #D7D8DA)";
+    };
+    'colour.neutral.50': {
+        description: "Used as the background colour for interactive components such as the slider.";
+        value: "var(--iress-colour-neutral-50, #AFB2B6)";
+    };
+    'colour.neutral.60': {
+        description: "Used for placeholder text in form controls and disabled states.";
+        value: "var(--iress-colour-neutral-60, #878B92)";
+    };
+    'colour.neutral.70': {
+        description: "Used for muted text such as hints and descriptions to allow for content hierarchy.";
+        value: "var(--iress-colour-neutral-70, #6D7278)";
+    };
+    'colour.neutral.80': {
+        description: "Used as the default text colour for most components. For tooltips, it is used as the background colour.";
+        value: "var(--iress-colour-neutral-80, #393F46)";
+    };
+    'colour.accent.brand': {
+        description: "The brand accent is useful for grabbing attention and to support your primary/brand colour. It should be used sparingly to draw attention to key elements.";
+        value: "var(--iress-colour-accent-brand, #FF99A8)";
+    };
+    'colour.system.success.fill': {
+        description: "Used for the background colour of primary success buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.";
+        value: "var(--iress-colour-system-success-fill, #02794D)";
+    };
+    'colour.system.success.fillHover': {
+        description: "Used for the hover state of primary success buttons.";
+        value: "var(--iress-colour-system-success-fill-hover, #01603D)";
+    };
+    'colour.system.success.onFill': {
+        description: "Used for the foreground colour of primary success buttons and badges.";
+        value: "var(--iress-colour-system-success-on-fill, #EFFBF2)";
+    };
+    'colour.system.success.surface': {
+        description: "Used for the background colour of success alerts and toasts, and the background of secondary success buttons.";
+        value: "var(--iress-colour-system-success-surface, #E6F9EB)";
+    };
+    'colour.system.success.surfaceHover': {
+        description: "Used for the hover state of secondary success buttons.";
+        value: "var(--iress-colour-system-success-surface-hover, #D5F6DE)";
+    };
+    'colour.system.success.text': {
+        description: "Used for the text colour of success alerts and toasts, and success tertiary buttons.";
+        value: "var(--iress-colour-system-success-text, #015537)";
+    };
+    'colour.system.danger.fill': {
+        description: "Used for the background colour of primary danger buttons, as well as the border of alerts and badges. It is also used for the foreground colour of icons inside toasts and alerts.";
+        value: "var(--iress-colour-system-danger-fill, #C20A0A)";
+    };
+    'colour.system.danger.fillHover': {
+        description: "Used for the hover state of primary danger buttons.";
+        value: "var(--iress-colour-system-danger-fill-hover, #A50606)";
+    };
+    'colour.system.danger.onFill': {
+        description: "Used for the foreground colour of primary danger buttons and badges.";
+        value: "var(--iress-colour-system-danger-on-fill, #FFF6F5)";
+    };
+    'colour.system.danger.surface': {
+        description: "Used for the background colour of danger alerts and toasts, and the background of secondary danger buttons.";
+        value: "var(--iress-colour-system-danger-surface, #FEE8E7)";
+    };
+    'colour.system.danger.surfaceHover': {
+        description: "Used for the hover state of secondary danger buttons.";
+        value: "var(--iress-colour-system-danger-surface-hover, #FEDEDC)";
+    };
+    'colour.system.danger.text': {
+        description: "Used for the text colour of danger alerts and toasts, and danger tertiary buttons.";
+        value: "var(--iress-colour-system-danger-text, #970202)";
+    };
+    'colour.system.warning.fill': {
+        description: "Used for the border of warning alerts and the background of warning badges.";
+        value: "var(--iress-colour-system-warning-fill, #F6C84C)";
+    };
+    'colour.system.warning.onFill': {
+        description: "Used for the foreground colour of warning badges.";
+        value: "var(--iress-colour-system-warning-on-fill, #1A1200)";
+    };
+    'colour.system.warning.surface': {
+        description: "Used for the background colour of warning alerts.";
+        value: "var(--iress-colour-system-warning-surface, #FEF4CD)";
+    };
+    'colour.system.warning.text': {
+        description: "Used for the text colour of warning alerts.";
+        value: "var(--iress-colour-system-warning-text, #1A1200)";
+    };
+    'colour.system.info.fill': {
+        description: "Used for the border of info alerts and toasts and the background of info badges.";
+        value: "var(--iress-colour-system-info-fill, #004FBD)";
+    };
+    'colour.system.info.onFill': {
+        description: "Used for the foreground colour of info badges.";
+        value: "var(--iress-colour-system-info-on-fill, #F5FAFF)";
+    };
+    'colour.system.info.surface': {
+        description: "Used for the background colour of info alerts and toasts.";
+        value: "var(--iress-colour-system-info-surface, #E5F3FF)";
+    };
+    'colour.system.info.text': {
+        description: "Used for the text colour of info alerts and toasts.";
+        value: "var(--iress-colour-system-info-text, #123987)";
+    };
+    'colour.system.backdrop.fill': {
+        description: "Used for the background colour of the backdrop.";
+        value: "var(--iress-colour-system-backdrop-fill, #393F46CC)";
+    };
+    transparent: {
+        description: string;
+        value: string;
+    };
+    alt: {
+        description: string;
+        value: "var(--iress-colour-neutral-20, #F9F9F9)";
+    };
+};
+export declare const COLOR_TOKENS: ColorToken[];

package/dist/theme-preset/tokens/keyframes.d.ts

@@ -0,0 +1 @@
+export declare const keyframes: import('@pandacss/dev').CssKeyframes;

package/dist/theme-preset/tokens/layerStyles.d.ts

@@ -0,0 +1,40 @@
+import { CompositionStyles } from '@pandacss/dev';
+export declare const elevationCompositions: {
+    'elevation.raised': {
+        description: "Raised elevations sit slightly higher than default elevations. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.";
+        value: {
+            boxShadow: "var(--iress-elevation-raised-shadow, 0px 3px 5px #091E4220)";
+            border: "var(--iress-elevation-raised-border, 0.5px solid #091E4220)";
+        };
+    };
+    'elevation.floating': {
+        description: "Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.";
+        value: {
+            boxShadow: "var(--iress-elevation-floating-shadow, 0px 10px 18px #091E4215)";
+            border: "var(--iress-elevation-floating-border, 0.5px solid #091E4215)";
+        };
+    };
+    'elevation.overflow': {
+        description: "Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.";
+        value: {
+            boxShadow: "var(--iress-elevation-overflow-shadow, inset 7px 0px 5px #091E4215)";
+            border: "var(--iress-elevation-overflow-border, 0px solid transparent)";
+        };
+    };
+    'elevation.focus': {
+        description: "Focus is an outline indicating that an element is focused, usually via keyboard interaction. It is user when a user cannot interact with the page using a mouse/touch.";
+        value: {
+            boxShadow: "var(--iress-elevation-focus-shadow, 0px 0px 0px 1.5px var(--iress-colour-neutral-10, #FFFFFF), 0px 0px 0px 3.5px #0066FF)";
+        };
+    };
+    'elevation.focusCompact': {
+        description: "Focus compact is a variation of the focus elevation to indicate focus on elements that have restricted space making the default focus not aesthetically pleasing (for example, a search input in a dropdown like rich select). Avoid using where possible, as it makes the focus state less obvious.";
+        value: {
+            boxShadow: "var(--iress-elevation-focus-compact-shadow, inset 0px -2px 0px 0px #0066FF)";
+            borderColor: "var(--iress-elevation-focus-compact-border-color, #0066FF)";
+        };
+    };
+};
+export type Elevations = keyof typeof elevationCompositions;
+export declare const internalLayerStyles: CompositionStyles['layerStyles'];
+export declare const layerStyles: import('@pandacss/dev').LayerStyles;

package/dist/theme-preset/tokens/radii.d.ts

@@ -0,0 +1,42 @@
+export declare const radii: {
+    'radius.000': {
+        description: "No radius";
+        value: "var(--iress-radius-000, 0px)";
+    };
+    'radius.025': {
+        description: "25% (0.25x) radius";
+        value: "var(--iress-radius-025, calc(0.25 * var(--iress-radius-100, 1rem)))";
+    };
+    'radius.050': {
+        description: "50% (0.5x) radius";
+        value: "var(--iress-radius-050, calc(0.5 * var(--iress-radius-100, 1rem)))";
+    };
+    'radius.075': {
+        description: "75% (0.75x) radius";
+        value: "var(--iress-radius-075, calc(0.75 * var(--iress-radius-100, 1rem)))";
+    };
+    'radius.100': {
+        description: "The base unit for radius. The fallback for all other values will be calculated from this value.";
+        value: "var(--iress-radius-100, 1rem)";
+    };
+    'radius.system.badge': {
+        description: "Applies to badges and tags (that have not been designated to be a circle).";
+        value: "var(--iress-radius-system-badge, var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)) var(--iress-radius-025, calc(0.25 * 1rem)))";
+    };
+    'radius.system.button': {
+        description: "Applies to buttons and other interactive elements such as the hover state of links.";
+        value: "var(--iress-radius-system-button, var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)) var(--iress-radius-075, calc(0.75 * 1rem)))";
+    };
+    'radius.system.form': {
+        description: "Applies to form inputs and alerts.";
+        value: "var(--iress-radius-system-form, var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)) var(--iress-radius-050, calc(0.5 * 1rem)))";
+    };
+    'radius.system.layout': {
+        description: "Applies to panels, modals and slideouts.";
+        value: "var(--iress-radius-system-layout, var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem) var(--iress-radius-100, 1rem))";
+    };
+    none: {
+        description: string;
+        value: "var(--iress-radius-000, 0px)";
+    };
+};

package/dist/theme-preset/tokens/sizes.d.ts

@@ -0,0 +1,246 @@
+export declare const containerSizes: {
+    'container.xs': {
+        value: string;
+    };
+    'container.sm': {
+        value: string;
+    };
+    'container.md': {
+        value: string;
+    };
+    'container.lg': {
+        value: string;
+    };
+    'container.xl': {
+        value: string;
+    };
+    'container.xxl': {
+        value: string;
+    };
+};
+export declare const inputSizes: {
+    'input.2': {
+        description: string;
+        value: string;
+    };
+    'input.4': {
+        description: string;
+        value: string;
+    };
+    'input.6': {
+        description: string;
+        value: string;
+    };
+    'input.8': {
+        description: string;
+        value: string;
+    };
+    'input.10': {
+        description: string;
+        value: string;
+    };
+    'input.12': {
+        description: string;
+        value: string;
+    };
+    'input.16': {
+        description: string;
+        value: string;
+    };
+    'input.25perc': {
+        description: string;
+        value: string;
+    };
+    'input.50perc': {
+        description: string;
+        value: string;
+    };
+    'input.75perc': {
+        description: string;
+        value: string;
+    };
+    'input.100perc': {
+        description: string;
+        value: string;
+    };
+};
+export declare const overlaySizes: {
+    'overlay.sm': {
+        description: string;
+        value: string;
+    };
+    'overlay.md': {
+        description: string;
+        value: string;
+    };
+    'overlay.lg': {
+        description: string;
+        value: string;
+    };
+};
+export declare const chevronSizes: {
+    'chevron.select': {
+        description: string;
+        value: string;
+    };
+    'chevron.table': {
+        description: string;
+        value: string;
+    };
+};
+export declare const heights: {
+    'input.height': {
+        description: string;
+        value: string;
+    };
+    'progress.height': {
+        description: string;
+        value: "var(--iress-spacing-200, calc(2 * var(--iress-spacing-100, .25rem)))";
+    };
+};
+export declare const sliderSizes: {
+    'slider.track': {
+        description: string;
+        value: string;
+    };
+    'slider.thumb': {
+        description: string;
+        value: string;
+    };
+    'slider.tick': {
+        description: string;
+        value: string;
+    };
+};
+export declare const toggleSizes: {
+    'toggle.width': {
+        description: string;
+        value: string;
+    };
+    'toggle.thumb': {
+        description: string;
+        value: string;
+    };
+};
+export declare const other: {
+    'typography.base': {
+        description: string;
+        value: "var(--iress-typography-base-size, .875rem)";
+    };
+};
+export declare const sizes: {
+    'typography.base': {
+        description: string;
+        value: "var(--iress-typography-base-size, .875rem)";
+    };
+    'toggle.width': {
+        description: string;
+        value: string;
+    };
+    'toggle.thumb': {
+        description: string;
+        value: string;
+    };
+    'slider.track': {
+        description: string;
+        value: string;
+    };
+    'slider.thumb': {
+        description: string;
+        value: string;
+    };
+    'slider.tick': {
+        description: string;
+        value: string;
+    };
+    'input.height': {
+        description: string;
+        value: string;
+    };
+    'progress.height': {
+        description: string;
+        value: "var(--iress-spacing-200, calc(2 * var(--iress-spacing-100, .25rem)))";
+    };
+    'chevron.select': {
+        description: string;
+        value: string;
+    };
+    'chevron.table': {
+        description: string;
+        value: string;
+    };
+    'overlay.sm': {
+        description: string;
+        value: string;
+    };
+    'overlay.md': {
+        description: string;
+        value: string;
+    };
+    'overlay.lg': {
+        description: string;
+        value: string;
+    };
+    'input.2': {
+        description: string;
+        value: string;
+    };
+    'input.4': {
+        description: string;
+        value: string;
+    };
+    'input.6': {
+        description: string;
+        value: string;
+    };
+    'input.8': {
+        description: string;
+        value: string;
+    };
+    'input.10': {
+        description: string;
+        value: string;
+    };
+    'input.12': {
+        description: string;
+        value: string;
+    };
+    'input.16': {
+        description: string;
+        value: string;
+    };
+    'input.25perc': {
+        description: string;
+        value: string;
+    };
+    'input.50perc': {
+        description: string;
+        value: string;
+    };
+    'input.75perc': {
+        description: string;
+        value: string;
+    };
+    'input.100perc': {
+        description: string;
+        value: string;
+    };
+    'container.xs': {
+        value: string;
+    };
+    'container.sm': {
+        value: string;
+    };
+    'container.md': {
+        value: string;
+    };
+    'container.lg': {
+        value: string;
+    };
+    'container.xl': {
+        value: string;
+    };
+    'container.xxl': {
+        value: string;
+    };
+};