Changelogs

Updated dependencies

• @kadena/kode-icons@0.2.0

Fixed Card Pattern heading and responsive styles

Updated primaryFont and secondaryFont to Inter

Updated the CardPattern component to allow for more flexible customization

• @kadena/kode-icons@0.1.0

Fixes for button component

Storybook brand updates

Fix mobile input element typography settings

Rename 'react-ui' to 'kode-ui'

Rename react-icons to kode-icons

Updated dependencies

Updated dependencies

• @kadena/kode-icons@0.1.0

Minimal width Form field elements fixed and Form field label orientation enhanced with the direction to flow horizontally or vertically

fix the width issue from tables

fix the grid styles which were being applied to a layer while the base styling was being applied via atoms, all styles aren't applied on a layer for layout components

Added documentation for useTheme hook

fix: make the icon on the text link component optional

fix: prevent icons from scaling down in size when their parent container shrinks in size

fix: make custom styling functions to add the default layer and remove usage of the atoms function to style components

fix styling errors caused by missing tokens references from the styling refactor

add contained prop to tabs component, this will make the content the same color as the tab

Add: rebranded table and card components

Icon token set

Add radiogroup component

• Reintroduced items prop for Tabs component to offer Dynamic collection support.

• Added tabPanelClassName prop to Tabs component to forward styles to TabPanel component.
• Added export of ITabNode type.

Readme update

Added a hook to toggle and keep theme state, removing the necessity of a theme provider context

Added a new variant to apply different colors to the Divider component

Add checkboxgroup component

Add indication arrow and add an compact version of the tooltip

Update border and radius based on layout

Update border styles for the Notification component

Added stable status to ui components

Token sync

Adds story for new System icons

Fixed the accessibility issues (font-weight and color related to the badge

added the high contrast variant and fixed the inline spacing for the large variant

Add new checkbox component

Add new tabs component style and added the pagination option

Updated sync plugin and tokens

Adds base text link component

Replace old icons for new branding

Added proper sizes for the dialog

Update the textfield and numberfield components to the new branding

Package updates

Use new brand icons

feat: update textarea component to new styling

Refactor button component to match new styles and replace component throughout the mono repo

update style notification

In this PR the combobox is using the internal field component which will update the styles to the new standard

added extra color variants to the badge'

feat: updated the select component with the new styling updates. These include new size variants, font variants and consistent states like the other form elements. Breaking change: startIcon has been renamed to startVisual to be consistent with other components.

Updated dependencies \

• @kadena/kode-icons@0.0.3

Added Avatar component waiting for final tokens

Fixed Popover not rendering when element was bigger than viewport

Upgrading deps

Update input for icons to reactElement

fix: use new text and header components from react-ui package

Update tokens

Add expand animation to accordion component

Extended clickable area for the numberField buttons

Added more masking options to the MaskedValue component

Remove accordion animation

Adds NumberField component to the form section

Updated the Pagination component to use the new Button component styles and new tokens

Export progressCircle

Updated the NavHeader component export structure, components, and styles

Aria accordion component

Update Repository information to enable provenance

Updated the Tag component to use new design tokens and incorporated useTagGroup from react-aria

• Added the TagGroup component which only implements the onRemove and disabledKeys config options from useTagGroup.
• Added the TagItem component which wraps Item from react-stately
• Removed onClose prop from the Tag component so its primary purpose is for applying the tag styles
• Added the tagAsChild prop to allow consumers to place all accessibility attributes from TagItem to it's child component. An example use case would be when consumers need to use next/link as a tag

In most cases moving forward, consumers should use the TagGroup and TagItem components to compose their tags, however the Tag component is still exposed for when consumers need to compose their own custom component using the Tag styles

Updated the Breadcrumbs component to use useBreadcrumbs from react-aria

New form fields

Fix logo sizes

Cleanup old Button and Link components

Updated the Box, Stack, and Grid components props to map to the new atom utility classes

New brand logos

Updated the Box, Stack, and Grid components to accept refs

Updated input props for SelectField, TextareaField and TextField components and deprecated Input Select and Textarea in favour of the updated ones

Breadcrumbs accepts an icon element to be rendered and exposed the components in order to compose.

Use new button tokens and add small tokens utils

updated NavHeader glow initial position and scroll

Add LinkButton component

Improve react ui build system and remove ts path aliases

Used new token system

Add zIndex to Tooltip component

Updat turbo file to cache new build artifacts

Update Select and Combobox styles

Allow className on Table components

Added changes in the NavHeader component to improve visibility on mobile

Updated the Notification, Card, Divider, Tooltip, Dialog, Modal, and GradientText components to use the updated design tokens

New aria complete button without new tokens

1. Use react aria which come with one major change is onPress instead of onClick read more about why [https://react-spectrum.adobe.com/blog/building-a-button-part-1.html][1]. we added onClick to allow easy migration but it is deprecated and we should not use it for new code.
2. Unify the IconButton and Button components using <Button icon={<SomeIcon/>} /> instead of IconButton.
3. Change some props names to be consistent with react-aria naming compact -> isCompact.
4. Button is not a polymorphic component anymore we will have a separate link component.
5. iconAlign is replaced by specific icon renders props startIcon and endIcon, and icon is repurposed for icon-only buttons aka IconButton.
6. Use recipe instead of individual styleVariants.
7. color and variant are now one prop variant and all alternative variants are added as a standalone variant eg <Button color="primary" variant="alternative" /> is now <Button variant="primaryInverted" /> we use inverted postfix is used instead of alternative to match the intended color inversion behavior.
8. The isCompact variant now works for all button variations before it only worked for some color variants.

Update design tokens

Added atoms which are utility css classes based on the new design tokens

Changed icon to startIcon for form components

Update Text and Heading components to use new design tokens

Updated the Notification component API

Used react-aria to recreate the Dialog and Modal components

Setup design tokens sync

Updated the Tooltip component API and styles

Refactored Tabs component

Added TextareaCopy and InputCopy

Removing the Label component

Updated the Card component's styles and removed the stacked prop. Users can add the Divider component within a Card to achieve the same result as using the deprecated stacked prop.

Added Icons for C: & W: accounts

Refactor InputFieldWrapper for the new FormFieldWrapper component with stacked items

Added overflow prop to the Box, Stack, and Grid components

Added focus state and improved visuals for inputs

Exported the Textarea and TextareaField components

Add new width, height, and className properties to sprinkles and update Box, Stack and Grid components to use them

Corrected Tag background color Extracted maskValue string utility function from MaskedValue component Accept ReactNode as children prop for Tag component

Exported MaskOptions type

Fixed the KodeMono font

No auto-globals for vitest specs

Cleanup of duplicates, unused code and exports etc

New Button component variants and colours

Add ThumbUp and Thumbdown Icon Add close callback event for Modal component Add active state variant and ui for IconButton component Update Button default style as inline and added block props for full width

Introduced Accordion variant for navigational purposes

Renamed the ProfileCard component to ProfileSummary and refactored it to use a subcomponent structure

Updated the NavHeader component to accept an activeHref instead of index and refactored the implementation to use context instead of cloneElement

Added outline prop to select input

Added variant and inline props to Notification component

Updated leftIcon prop to icon

Added exports for the SelectField component

Aligned Button and IconButton components to have variants and active prop

Added responsiveStyle and mapToProperty styling utility functions

change the twitter icon to X

Add max-width to notification content

Added the TextArea and TextAreaField components

Minor fixes to Modal, Notification component

Upgrade typescript and @types/node dependencies

Migrate from jest to vitest

Updated all components to consistently accept a string for icon props

Initial package setup

Updated the NavHeader and NavFooter Link components to accept an asChild prop so that they can be used with external links

Refactor Accordion component to use a subcomponent structure

Updated the Link and Breadcrumb components to have the option to pass props and styles to a child component via an asChild prop. This is the new convention we are using for cases when we need to support external links like next/link

Added SelectField component