@rango-dev/ui 0.29.1-next.13 → 0.29.1-next.14

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts

@@ -6,6 +6,8 @@ export type ListItemProps = {
     end?: React.ReactNode;
     as?: 'div' | 'li';
     onClick?: () => void;
+    onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
     hasDivider?: boolean;
+    tabIndex?: number;
 };
 //# sourceMappingURL=ListItem.types.d.ts.map

package/dist/widget/ui/src/components/ListItem/ListItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC"}
+{"version":3,"file":"ListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItem/ListItem.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAgBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"ListItemButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoBjD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const BaseListItemButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    hasDivider?: boolean | "true" | undefined;
+import { ListItem } from '../ListItem/ListItem';
+export declare const BaseListItemButton: import("@stitches/react/types/styled-component").StyledComponent<typeof ListItem, {
     selected?: boolean | "true" | "false" | undefined;
 }, {
     xs: string;

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAgD7B,CAAC"}
+{"version":3,"file":"ListItemButton.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DA+B7B,CAAC"}

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.types.d.ts

@@ -4,7 +4,6 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
     id: string;
     onClick: (id: string) => void;
     style?: CSSProperties;
-    hasDivider?: boolean;
     selected?: boolean;
 };
 //# sourceMappingURL=ListItemButton.types.d.ts.map

package/dist/widget/ui/src/components/ListItemButton/ListItemButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"ListItemButton.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ListItemButton/ListItemButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,GAAG;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.29.1-next.13",
+  "version": "0.29.1-next.14",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/ListItem/ListItem.types.ts

@@ -5,5 +5,7 @@ export type ListItemProps = {
   end?: React.ReactNode;
   as?: 'div' | 'li';
   onClick?: () => void;
+  onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
   hasDivider?: boolean;
+  tabIndex?: number;
 };

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -1,26 +1,10 @@
 import { darkTheme, styled } from '../../theme';
+import { ListItem } from '../ListItem/ListItem';
 
-export const BaseListItemButton = styled('button', {
+export const BaseListItemButton = styled(ListItem, {
   transition: 'all 0.35s',
-  border: 0,
-  width: '100%',
-  backgroundColor: 'transparent',
-  fontFamily: 'inherit',
-  padding: 'unset',
-  '&:focus-visible': {
-    borderRadius: '$xs',
-
-    outline: 0,
-    $$color: '$colors$info100',
-    [`.${darkTheme} &`]: {
-      $$color: '$colors$info700',
-    },
-    backgroundColor: '$$color',
-  },
   '&:hover': {
     $$color: '$colors$info100',
-    borderRadius: '$xs',
-
     [`.${darkTheme} &`]: {
       $$color: '$colors$neutral100',
     },
@@ -30,19 +14,19 @@ export const BaseListItemButton = styled('button', {
   '&:active': {
     transform: 'scale(0.99)',
   },
-  variants: {
-    hasDivider: {
-      true: {
-        borderBottom: '1px solid',
-        $$color: '$colors$neutral300',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$neutral400',
-        },
-        borderColor: '$$color',
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
+
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
     },
+    backgroundColor: '$$color',
+  },
+
+  variants: {
     selected: {
       true: { outline: '1px solid $secondary500' },
       false: { outline: 0 },

package/src/components/ListItemButton/ListItemButton.tsx

@@ -2,25 +2,27 @@ import type { ListItemButtonProps } from './ListItemButton.types';
 
 import React from 'react';
 
-import { ListItem } from '../ListItem/ListItem';
-
 import { BaseListItemButton } from './ListItemButton.styles';
 
 function ListItemButton(props: ListItemButtonProps) {
-  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const { onClick, id, selected, ...restProps } = props;
   const onClickWithKey = () => {
     if (onClick) {
       onClick(id);
     }
   };
+
   return (
     <BaseListItemButton
-      hasDivider={hasDivider}
-      selected={selected}
       onClick={onClickWithKey}
-      style={style}>
-      <ListItem {...restProps} />
-    </BaseListItemButton>
+      aria-label="button"
+      selected={selected}
+      onKeyUp={(e: { key: string }) => {
+        e.key === 'Enter' && onClickWithKey();
+      }}
+      tabIndex={0}
+      {...restProps}
+    />
   );
 }
 

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -5,6 +5,5 @@ export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
   id: string;
   onClick: (id: string) => void;
   style?: CSSProperties;
-  hasDivider?: boolean;
   selected?: boolean;
 };