@rango-dev/ui 0.0.0-experimental-936229e8-20251208

package/src/components/Header/Header.styles.ts

@@ -0,0 +1,91 @@
+import { globalCss } from '@stitches/react';
+
+import { darkTheme, styled } from '../../theme.js';
+
+import { HEADER_CORNDER_RADIUS } from './Header.constants.js';
+
+export const globalHeaderStyles = globalCss({
+  '.rng-scrolled': {
+    '.rng-curve-left::before, rng-curve-right::before': {
+      borderRadius: '0 !important',
+    },
+  },
+});
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  padding: '$20 $20 $15 $20',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  position: 'relative',
+  borderTopRightRadius: '$primary',
+  borderTopLeftRadius: '$primary',
+
+  variants: {
+    titlePosition: {
+      left: {
+        justifyContent: 'start',
+      },
+      center: {
+        justifyContent: 'center',
+      },
+      right: {
+        justifyContent: 'end',
+      },
+    },
+  },
+
+  '.rng-curve-left,.rng-curve-right': {
+    width: HEADER_CORNDER_RADIUS * 2,
+    height: HEADER_CORNDER_RADIUS * 2,
+    position: 'absolute',
+    bottom: 0,
+    overflow: 'hidden',
+    transform: 'translateY(100%)',
+
+    '&:before': {
+      width: HEADER_CORNDER_RADIUS * 2,
+      height: HEADER_CORNDER_RADIUS * 2,
+      display: 'block',
+      content: '',
+      position: 'absolute',
+      bottom: 0,
+      borderRadius: '50%',
+      transition: 'border-radius 0.5s',
+    },
+  },
+  '.rng-curve-left': {
+    left: 0,
+    '&:before': {
+      left: 0,
+      boxShadow: `-${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
+    },
+  },
+  '.rng-curve-right': {
+    right: 0,
+    '&:before': {
+      right: 0,
+      boxShadow: `${HEADER_CORNDER_RADIUS}px -${HEADER_CORNDER_RADIUS}px 0 0 $$color`,
+    },
+  },
+});
+
+export const Prefix = styled('div', {
+  position: 'absolute',
+  left: '$20',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});
+
+export const Suffix = styled('div', {
+  position: 'absolute',
+  right: '$20',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});

package/src/components/Header/Header.tsx

@@ -0,0 +1,49 @@
+import type { PropTypes } from './Header.types.js';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { Typography } from '../Typography/index.js';
+
+import { Container, globalHeaderStyles, Prefix, Suffix } from './Header.styles';
+
+export function Header({
+  prefix,
+  suffix,
+  title,
+}: PropsWithChildren<PropTypes>) {
+  globalHeaderStyles();
+
+  const getTitlePosition = () => {
+    if (!prefix) {
+      return 'left';
+    }
+    if (!suffix) {
+      return 'right';
+    }
+    return 'center';
+  };
+
+  const renderTitle = () => {
+    if (!title) {
+      return null;
+    } else if (typeof title === 'string') {
+      return (
+        <Typography variant="headline" size="small">
+          {title}
+        </Typography>
+      );
+    }
+    return title;
+  };
+
+  return (
+    <Container titlePosition={getTitlePosition()}>
+      <Prefix>{prefix}</Prefix>
+      {renderTitle()}
+      <Suffix>{suffix}</Suffix>
+      <div className="rng-curve-left"></div>
+      <div className="rng-curve-right"></div>
+    </Container>
+  );
+}

package/src/components/Header/Header.types.ts

@@ -0,0 +1,5 @@
+export interface PropTypes {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title?: string | React.ReactNode;
+}

package/src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header.js';
+export { HEADER_CORNDER_RADIUS } from './Header.constants.js';

package/src/components/I18nManager/I18nManager.tsx

@@ -0,0 +1,113 @@
+import type { PropsWithChildren } from 'react';
+
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+import React, { useEffect, useReducer } from 'react';
+
+/*
+ *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
+ *e.g:
+ *"paths": {
+ *  "translations/*": ["../../translations/*"]
+ *}
+ */
+import { messages as afMessages } from '../../../../../translations/af.js';
+import { messages as arMessages } from '../../../../../translations/ar.js';
+import { messages as bnMessages } from '../../../../../translations/bn.js';
+import { messages as caMessages } from '../../../../../translations/ca.js';
+import { messages as daMessages } from '../../../../../translations/da.js';
+import { messages as deMessages } from '../../../../../translations/de.js';
+import { messages as elMessages } from '../../../../../translations/el.js';
+import { messages as enMessages } from '../../../../../translations/en.js';
+import { messages as esMessages } from '../../../../../translations/es.js';
+import { messages as fiMessages } from '../../../../../translations/fi.js';
+import { messages as filMessages } from '../../../../../translations/fil.js';
+import { messages as frMessages } from '../../../../../translations/fr.js';
+import { messages as hiMessages } from '../../../../../translations/hi.js';
+import { messages as huMessages } from '../../../../../translations/hu.js';
+import { messages as idMessages } from '../../../../../translations/id.js';
+import { messages as itMessages } from '../../../../../translations/it.js';
+import { messages as jaMessages } from '../../../../../translations/ja.js';
+import { messages as koMessages } from '../../../../../translations/ko.js';
+import { messages as ltMessages } from '../../../../../translations/lt.js';
+import { messages as msMessages } from '../../../../../translations/ms.js';
+import { messages as nlMessages } from '../../../../../translations/nl.js';
+import { messages as plMessages } from '../../../../../translations/pl.js';
+import { messages as ptMessages } from '../../../../../translations/pt.js';
+import { messages as ruMessages } from '../../../../../translations/ru.js';
+import { messages as skMessages } from '../../../../../translations/sk.js';
+import { messages as srMessages } from '../../../../../translations/sr.js';
+import { messages as svMessages } from '../../../../../translations/sv.js';
+import { messages as swMessages } from '../../../../../translations/sw.js';
+import { messages as thMessages } from '../../../../../translations/th.js';
+import { messages as trMessages } from '../../../../../translations/tr.js';
+import { messages as ukMessages } from '../../../../../translations/uk.js';
+import { messages as urMessages } from '../../../../../translations/ur.js';
+import { messages as viMessages } from '../../../../../translations/vi.js';
+import { messages as zh_CNMessages } from '../../../../../translations/zh-CN.js';
+import { messages as zh_TWMessages } from '../../../../../translations/zh-TW.js';
+
+const messages = {
+  af: afMessages,
+  ar: arMessages,
+  bn: bnMessages,
+  ca: caMessages,
+  da: daMessages,
+  de: deMessages,
+  el: elMessages,
+  en: enMessages,
+  es: esMessages,
+  fi: fiMessages,
+  fil: filMessages,
+  fr: frMessages,
+  hi: hiMessages,
+  hu: huMessages,
+  id: idMessages,
+  it: itMessages,
+  ja: jaMessages,
+  ko: koMessages,
+  lt: ltMessages,
+  ms: msMessages,
+  nl: nlMessages,
+  pl: plMessages,
+  pt: ptMessages,
+  ru: ruMessages,
+  sk: skMessages,
+  sr: srMessages,
+  sv: svMessages,
+  sw: swMessages,
+  th: thMessages,
+  tr: trMessages,
+  uk: ukMessages,
+  ur: urMessages,
+  vi: viMessages,
+  'zh-CN': zh_CNMessages,
+  'zh-TW': zh_TWMessages,
+};
+
+i18n.load(messages);
+
+export type Language = keyof typeof messages;
+interface PropTypes {
+  language: Language;
+}
+
+function I18nManager(props: PropsWithChildren<PropTypes>) {
+  const [count, forceUpdate] = useReducer((x) => x + 1, 0);
+  useEffect(() => {
+    i18n.on('change', () => {
+      forceUpdate();
+    });
+  }, [i18n]);
+  useEffect(() => {
+    i18n.activate(props.language);
+  }, [props.language]);
+
+  return (
+    <I18nProvider i18n={i18n} key={count}>
+      {props.children}
+    </I18nProvider>
+  );
+}
+
+export { I18nManager };

package/src/components/I18nManager/index.ts

@@ -0,0 +1,2 @@
+export { I18nManager } from './I18nManager.js';
+export type { Language } from './I18nManager.js';

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,34 @@
+import type { IconButtonPropTypes } from './IconButton.types.js';
+import type { PropsWithChildren, Ref } from 'react';
+
+import React from 'react';
+
+import { Button } from '../Button/index.js';
+
+// border-radius: 100% + overflow: hidden
+function IconButtonComponent(
+  props: PropsWithChildren<IconButtonPropTypes>,
+  ref: Ref<HTMLButtonElement>
+) {
+  const { style, id, className, ...otherProps } = props;
+  return (
+    <Button
+      className={`_icon-button ${className}`}
+      id={id}
+      ref={ref}
+      {...otherProps}
+      style={{
+        borderRadius: '100%',
+        lineHeight: 0,
+        ...style,
+      }}>
+      {props.children}
+    </Button>
+  );
+}
+
+const IconButton = React.forwardRef(IconButtonComponent);
+IconButton.displayName = 'IconButton';
+IconButton.toString = () => '._icon-button';
+
+export { IconButton };

package/src/components/IconButton/IconButton.types.ts

@@ -0,0 +1,14 @@
+import type { ButtonPropTypes } from '../Button/Button.types.js';
+import type { CSSProperties } from 'react';
+
+export type IconButtonPropTypes = {
+  id?: ButtonPropTypes['id'];
+  className?: ButtonPropTypes['className'];
+  size?: ButtonPropTypes['size'];
+  type?: ButtonPropTypes['type'];
+  variant?: ButtonPropTypes['variant'];
+  onClick?: ButtonPropTypes['onClick'];
+  style?: CSSProperties;
+  loading?: boolean;
+  disabled?: boolean;
+};

package/src/components/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton.js';
+export type { IconButtonPropTypes } from './IconButton.types.js';

package/src/components/List/List.styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '../../theme.js';
+
+export const BaseList = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+});

package/src/components/List/List.tsx

@@ -0,0 +1,29 @@
+import type { ListPropTypes } from './List.types.js';
+
+import React from 'react';
+
+import { ListItem } from '../ListItem/index.js';
+
+import { BaseList } from './List.styles.js';
+
+function List(props: ListPropTypes) {
+  return (
+    <BaseList as={props.as}>
+      {props.items.map((item) => {
+        const { id, type, ...itemProps } = item;
+        const container = type || props.type;
+
+        if (!!container) {
+          return React.cloneElement(container, {
+            ...itemProps,
+            key: id,
+            id,
+          });
+        }
+        return <ListItem key={id} id={id} {...itemProps} />;
+      })}
+    </BaseList>
+  );
+}
+
+export { List };

package/src/components/List/List.types.ts

@@ -0,0 +1,13 @@
+import type { ListItemPropTypes } from '../ListItem/index.js';
+import type * as Stitches from '@stitches/react';
+import type React from 'react';
+
+export interface ListPropTypes {
+  type?: React.ReactElement;
+  items: (ListItemPropTypes & {
+    id: string;
+    type?: React.ReactElement;
+  })[];
+  as?: 'div' | 'ul';
+  css?: Stitches.CSS;
+}

package/src/components/List/index.ts

@@ -0,0 +1,2 @@
+export { List } from './List.js';
+export type { ListPropTypes } from './List.types.js';

package/src/components/ListItem/ListItem.styles.ts

@@ -0,0 +1,62 @@
+import { darkTheme, styled } from '../../theme.js';
+
+export const BaseListItem = styled('li', {
+  width: '100%',
+  overflow: 'hidden',
+  borderRadius: '$xs',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '$10 $5',
+  border: 0,
+  backgroundColor: 'transparent',
+
+  '.item-start-container': {
+    paddingRight: '$10',
+    flexShrink: 0,
+
+    '& svg': {
+      display: 'block',
+    },
+  },
+  '.item-text-container': {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    textAlign: 'left',
+    '._description': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
+
+    '.item-text-title': {
+      fontWeight: 'bold',
+      display: 'flex',
+      alignItems: 'center',
+      color: '$foreground',
+    },
+  },
+  '.item-end-container': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: '$10',
+    overflow: 'hidden',
+    flexShrink: 0,
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        borderBottom: '1px solid',
+        borderColor: '$neutral300',
+        [`.${darkTheme} &`]: {
+          borderColor: '$neutral400',
+        },
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+  },
+});

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,29 @@
+import type { ListItemPropTypes } from './ListItem.types.js';
+
+import React from 'react';
+
+import { Typography } from '../Typography/index.js';
+
+import { BaseListItem } from './ListItem.styles.js';
+
+function ListItem(props: ListItemPropTypes) {
+  const { start, title, description, end, onClick, hasDivider, ...restProps } =
+    props;
+
+  return (
+    <BaseListItem hasDivider={hasDivider} onClick={onClick} {...restProps}>
+      {start && <div className="item-start-container">{start}</div>}
+      <div className="item-text-container">
+        {title && <div className="item-text-title">{title}</div>}
+        {description && (
+          <Typography variant="body" className="_description" size="small">
+            {description}
+          </Typography>
+        )}
+      </div>
+      {end && <div className="item-end-container">{end}</div>}
+    </BaseListItem>
+  );
+}
+
+export { ListItem };

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

@@ -0,0 +1,13 @@
+export type ListItemPropTypes = {
+  id?: string;
+  title?: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  start?: React.ReactNode;
+  end?: React.ReactNode;
+  as?: 'div' | 'li';
+  onClick?: () => void;
+  onKeyUp?: React.KeyboardEventHandler<HTMLLIElement>;
+  hasDivider?: boolean;
+  tabIndex?: number;
+  className?: string;
+};

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemPropTypes } from './ListItem.types.js';
+export { ListItem } from './ListItem.js';

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

@@ -0,0 +1,36 @@
+import { darkTheme, styled } from '../../theme.js';
+import { ListItem } from '../ListItem/ListItem.js';
+
+export const BaseListItemButton = styled(ListItem, {
+  transition: 'all 0.35s',
+  '&:hover': {
+    borderRadius: '$xs',
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+    cursor: 'pointer',
+  },
+  '&:active': {
+    transform: 'scale(0.99)',
+  },
+
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+  },
+
+  variants: {
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/ListItemButton/ListItemButton.tsx

@@ -0,0 +1,31 @@
+import type { ListItemButtonProps } from './ListItemButton.types.js';
+
+import React from 'react';
+
+import { BaseListItemButton } from './ListItemButton.styles.js';
+
+function ListItemButton(props: ListItemButtonProps) {
+  const { onClick, id, selected, ...restProps } = props;
+  const onClickWithKey = () => {
+    if (onClick) {
+      onClick(id);
+    }
+  };
+
+  return (
+    <BaseListItemButton
+      onClick={onClickWithKey}
+      id={id}
+      aria-label="button"
+      selected={selected}
+      onKeyUp={(e: { key: string }) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        e.key === 'Enter' && onClickWithKey();
+      }}
+      tabIndex={0}
+      {...restProps}
+    />
+  );
+}
+
+export { ListItemButton };

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

@@ -0,0 +1,9 @@
+import type { ListItemPropTypes } from '../ListItem/index.js';
+import type { CSSProperties } from '@stitches/react';
+
+export type ListItemButtonProps = Omit<ListItemPropTypes, 'onClick'> & {
+  id: string;
+  onClick: (id: string) => void;
+  style?: CSSProperties;
+  selected?: boolean;
+};

package/src/components/ListItemButton/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemButtonProps } from './ListItemButton.types.js';
+export { ListItemButton } from './ListItemButton.js';

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,35 @@
+import type { SvgIconProps } from '../SvgIcon/index.js';
+
+import React from 'react';
+
+import { SvgWithColor } from '../SvgIcon/SvgIcon.style.js';
+
+export function Logo(props: SvgIconProps) {
+  const { size = '1em', color } = props;
+  const commonProps = {
+    width: size,
+    height: size,
+    color: color,
+    className: '_icon',
+  };
+  return (
+    <SvgWithColor
+      {...commonProps}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      className="c-lekKBq">
+      <g fill="currentColor">
+        <path d="m7.641 6.333.89.492 6.982-2.896a8.471 8.471 0 0 0-.825-.939c-.05.028-.09.044-.09.044L7.315 6.097c.083.084.19.164.33.236H7.64ZM3.134 14.967l7.067-2.947-1.315-.743-5.393 2.291-1.366.578c.251.325.526.63.82.914l.187-.095v.002Z" />
+        <path d="m16.253 5.1-1.287.498c-1.03.377-5.082 1.975-5.082 1.975.662.365 1.378.759 2.008 1.102 1.612.88.592 2.812.379 3.18l-.01.014a5.873 5.873 0 0 0-.027.046s.151-1.443-.866-1.977a648.55 648.55 0 0 1-4.365-2.313c-.466-.248-.804-.7-.868-1.223-.048-.392.051-.843.521-1.238.274-.254.569-.39.569-.39l5.253-2.156s.033-.013.081-.038l1.093-.454A8.421 8.421 0 0 0 1.447 13.12l2.032-.886 4.046-1.697c-.698-.383-1.342-.739-1.648-.903-.152-.081-.344-.21-.496-.292-.82-.433-1.357-1.656-.113-3.107 0 0-.13 1.377.641 1.845.734.446 3.582 1.905 4.428 2.358.216.116.416.264.576.453.329.39.454.87.316 1.38-.006.025-.015.049-.023.073l-.016.048a1.018 1.018 0 0 1-.037.095c-.29.7-1.062.91-1.062.91L10 13.43l-4.917 2.018-1.084.476A8.42 8.42 0 0 0 16.253 5.099v.002Z" />
+      </g>
+      <path
+        fill="currentColor"
+        d="m7.53 10.53 1.36.74-.68.29-1.426-.717.745-.314ZM10.09 13.392s1.13-.8.108-1.378l-.643.268s1.072.287.535 1.11ZM9.889 7.567l-1.361-.74.695-.29 1.437.731-.771.3ZM7.41 4.705s-1.131.801-.108 1.378l.642-.268s-1.072-.287-.535-1.11Z"
+        opacity={0.4}
+        style={{
+          mixBlendMode: 'multiply',
+        }}
+      />
+    </SvgWithColor>
+  );
+}

package/src/components/Logo/index.tsx

@@ -0,0 +1 @@
+export { Logo } from './Logo.js';

package/src/components/MessageBox/CollapsibleMessageBox.styles.tsx

@@ -0,0 +1,33 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { darkTheme, styled } from '../../theme.js';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$15',
+  paddingBottom: '$5',
+  borderRadius: '$xm',
+  cursor: 'pointer',
+  $$backgroundColor: '$colors$neutral200',
+  [`.${darkTheme} &`]: {
+    $$backgroundColor: '$colors$neutral500',
+  },
+  backgroundColor: '$$backgroundColor',
+  textAlign: 'center',
+  border: 0,
+  width: '100%',
+  '&:hover': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$color: '$colors$secondary100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+});