@a-little-world/little-world-design-system 2.10.0

package/dist/esm/components/CheckboxGrid/styles.js

@@ -0,0 +1,98 @@
+import styled, { css } from 'styled-components';
+import Checkbox from '../Checkbox/Checkbox';
+import Text from '../Text/Text';
+export const CheckboxGridWrapper = styled.div `
+  width: 100%;
+`;
+export const Grid = styled.div `
+  display: grid;
+  width: 100%;
+  row-gap: ${({ theme }) => theme.spacing.xsmall};
+  column-gap: ${({ theme }) => theme.spacing.xxsmall};
+  grid-template-columns: ${({ $columns }) => `repeat(${$columns}, minmax(max-content, 1fr))`};
+  grid-template-rows: ${({ $rows }) => `repeat(${$rows}, 1fr)`};
+  grid-auto-rows: 27.5px;
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  padding-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  overflow-x: scroll;
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  border-bottom: 1px solid
+    ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.surface.primary};
+`;
+export const ColumnHeading = styled(Text) `
+  grid-column-start: ${({ index }) => index + 1};
+  grid-column-end: ${({ index }) => index + 1};
+  grid-row-start: 1;
+  grid-row-end: 1;
+  text-align: center;
+  max-width: 100%;
+  padding: ${({ theme }) => theme.spacing.xxxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ index }) => !index &&
+    `
+    position: sticky;
+    left: 0;
+  `}
+`;
+export const RowHeading = styled(Text) `
+  grid-column-start: 1;
+  grid-column-end: 1;
+  grid-row-start: ${({ index }) => index + 2};
+  grid-row-end: ${({ index }) => index + 2};
+  text-align: center;
+  position: sticky;
+  left: 0;
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const ScrollableWrapper = styled.div `
+  overflow: scroll-x;
+  width: 100%;
+  display: contents;
+`;
+export const StyledCheckbox = styled(Checkbox) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  grid-row-start: ${({ $row }) => $row};
+  grid-column-start: ${({ $column }) => $column};
+  height: 100%;
+
+  ${({ checked, theme }) => checked &&
+    css `
+      border-color: ${theme.color.border.selected};
+    `};
+
+  ${({ $highlight, theme }) => $highlight &&
+    css `
+      background: ${theme.color.surface.accent};
+    `};
+`;
+export const BelowGrid = styled.div `
+  display: flex;
+  justify-content: space-between;
+`;
+export const Legend = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+export const Square = styled.div `
+  ${({ theme }) => css `
+    width: 20px;
+    height: 16px;
+    background: ${theme.color.surface.accent};
+    border: 1px solid ${theme.color.border.contrast};
+  `};
+`;

package/dist/esm/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { InputHeight } from '../TextInput/TextInput';
+type Options = {
+    value: string;
+    label: string;
+}[];
+export type DropdownProps = {
+    ariaLabel?: string;
+    cannotError?: boolean;
+    error?: string;
+    height?: InputHeight;
+    label?: string;
+    labelTooltip?: string;
+    lockedValue?: string;
+    maxWidth?: string;
+    options: Options;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+};
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/esm/components/Dropdown/Dropdown.js

@@ -0,0 +1,32 @@
+import * as Select from '@radix-ui/react-select';
+import React from 'react';
+import { CheckIcon, ChevronDownIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import { DropdownWrapper, SelectContent, SelectIcon, SelectItem, SelectItemIndicator, SelectTrigger, SelectValue, SelectViewport, } from './styles';
+const ARROW_DOWN_WIDTH = 13;
+const ARROW_DOWN_HEIGHT = 8;
+const isValidValue = (value, options) => options.some(option => option.value === value);
+const Option = ({ children, value, }) => {
+    return (React.createElement(SelectItem, { value: value },
+        React.createElement(Select.SelectItemText, null,
+            React.createElement(Text, null, children)),
+        React.createElement(SelectItemIndicator, null,
+            React.createElement(CheckIcon, { label: "selected item", width: "10px" }))));
+};
+const Dropdown = ({ ariaLabel, error, cannotError, disabled, height, inputRef, label, labelTooltip, lockedValue, maxWidth, onValueChange, options, placeholder, required, value, }) => {
+    const defaultValue = lockedValue || (value && isValidValue(value, options) ? value : undefined);
+    const canError = !lockedValue && !cannotError;
+    return (React.createElement(DropdownWrapper, { "$maxWidth": maxWidth },
+        label && (React.createElement(Label, { bold: true, htmlFor: ariaLabel, tooltipText: labelTooltip }, label)),
+        React.createElement(Select.Root, { disabled: disabled || !!lockedValue, onValueChange: onValueChange, required: required, defaultValue: defaultValue },
+            React.createElement(SelectTrigger, { "aria-label": ariaLabel || label, ref: inputRef, "$hasError": Boolean(error), "$height": height },
+                React.createElement(SelectValue, { placeholder: placeholder }),
+                !lockedValue && (React.createElement(SelectIcon, null,
+                    React.createElement(ChevronDownIcon, { width: ARROW_DOWN_WIDTH, height: ARROW_DOWN_HEIGHT, label: "dropdown icon" })))),
+            React.createElement(SelectContent, { position: "popper" },
+                React.createElement(SelectViewport, null, options.map(option => (React.createElement(Option, { key: option.label, value: option.value }, option.label)))))),
+        canError && React.createElement(InputError, { visible: Boolean(error) }, error)));
+};
+export default Dropdown;

package/dist/esm/components/Dropdown/styles.d.ts

@@ -0,0 +1,15 @@
+import * as Select from '@radix-ui/react-select';
+export declare const DROPDOWN_MAX_WIDTH = "300px";
+export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxWidth?: string;
+}>> & string;
+export declare const SelectTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Select.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+    $height?: string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectViewport: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItemIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/esm/components/Dropdown/styles.js

@@ -0,0 +1,106 @@
+import * as Select from '@radix-ui/react-select';
+import styled from 'styled-components';
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import { BODY_5_CSS } from '../Text/styles';
+import { InputHeight } from '../TextInput/TextInput';
+export const DROPDOWN_MAX_WIDTH = '300px';
+export const DropdownWrapper = styled.div `
+  position: relative;
+  max-width: ${({ $maxWidth }) => $maxWidth || DROPDOWN_MAX_WIDTH};
+  width: 100%;
+`;
+export const SelectTrigger = styled(Select.Trigger) `
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme, $height }) => $height === InputHeight.Small
+    ? theme.spacing.xxsmall
+    : `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  line-height: 1.25;
+  height: ${({ $height }) => ($height === InputHeight.Small ? '34px' : '40px')};
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 5px;
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  width: 100%;
+  color: ${({ theme }) => theme.color.text.secondary};
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+
+  > span:first-child,
+  > span:first-child p {
+    ${BODY_5_CSS}
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover {
+    opacity: 80%;
+  }
+
+  svg {
+    color: ${({ theme }) => theme.color.text.secondary};
+  }
+
+  &[data-placeholder] {
+    background-color: ${({ theme }) => theme.color.surface.primary};
+    color: ${({ theme }) => theme.color.text.tertiary};
+
+    svg {
+      color: ${({ theme }) => theme.color.text.highlight};
+    }
+  }
+
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+`;
+export const SelectValue = styled(Select.Value) `
+  &[data-placeholder] {
+    background-color: ${({ theme }) => theme.color.surface.primary};
+  }
+`;
+export const SelectContent = styled(Select.Content) `
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.color.surface.elevated};
+  border-radius: 6px;
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 100;
+`;
+export const SelectViewport = styled(Select.Viewport) `
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xxxsmall};
+  max-height: 200px;
+  overflow: scroll;
+`;
+export const SelectIcon = styled(Select.Icon) `
+  display: flex;
+`;
+export const SelectItem = styled(Select.Item) `
+  font-size: 13px;
+  line-height: 1;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 ${({ theme }) => theme.spacing.large} 0
+    ${({ theme }) => theme.spacing.medium};
+  position: relative;
+  user-select: none;
+
+  &:disabled {
+    color: gray;
+    pointer-events: none;
+  }
+`;
+export const SelectItemIndicator = styled(Select.ItemIndicator) `
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;

package/dist/esm/components/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import React, { SVGProps } from 'react';
+import { Gradients, IconBaseProps } from '@a-little-world/little-world-design-system-core';
+export declare const ImageLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $top: string | number;
+    $visible?: boolean;
+}>> & string;
+export type IconSvgProps = Omit<IconBaseProps, 'children'> & SVGProps<SVGElement> & {
+    gradient?: Gradients;
+};
+export declare const Icon: ({ backgroundColor, borderColor, children, circular, className, color, label, labelVisible, labelTop, }: IconBaseProps) => React.JSX.Element;

package/dist/esm/components/Icon/Icon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+const Circle = styled.div `
+  background: ${({ theme, $backgroundColor }) => $backgroundColor || theme.color.surface.secondary};
+  border: 2px solid
+    ${({ theme, $borderColor }) => $borderColor || theme.color.border.contrast};
+  border-radius: 50%;
+  color: ${({ color }) => color || 'currentColor'};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+// hide element but keep visible to screen readers
+// parent requires position: relative;
+export const ImageLabel = styled.span `
+  ${({ $top, $visible }) => $visible
+    ? css `
+          position: relative;
+          top: ${$top};
+        `
+    : css `
+          position: absolute;
+          clip: rect(1px, 1px, 1px, 1px);
+          height: 1px;
+          overflow: hidden;
+
+          white-space: nowrap;
+          width: 1px;
+
+          &:focus {
+            clip: auto;
+            height: auto;
+            overflow: auto;
+            position: absolute;
+            width: auto;
+          }
+        `}
+`;
+export const Icon = ({ backgroundColor, borderColor, children, circular, className, color, label, labelVisible, labelTop = '56px', }) => (React.createElement(React.Fragment, null,
+    circular ? (React.createElement(Circle, { "$backgroundColor": backgroundColor, "$borderColor": borderColor, className: className, color: color }, children)) : (children),
+    React.createElement(ImageLabel, { id: label, "$visible": labelVisible, "$top": labelTop }, label)));

package/dist/esm/components/Icon/IconGradient.d.ts

@@ -0,0 +1,4 @@
+import { IconGradientProps } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+declare const IconGradient: ({ id, variation, type, }: IconGradientProps) => React.JSX.Element;
+export default IconGradient;

package/dist/esm/components/Icon/IconGradient.js

@@ -0,0 +1,24 @@
+import { GradientTypes, GradientVariations, } from '@a-little-world/little-world-design-system-core';
+import React from 'react';
+const IconGradient = ({ id, variation, type = GradientTypes.v1, }) => {
+    if (type === GradientTypes.v1)
+        return (React.createElement("linearGradient", { id: id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", gradientUnits: "objectBoundingBox" },
+            React.createElement("stop", { offset: "0%", stopColor: GradientVariations[variation][0] }),
+            React.createElement("stop", { offset: "33%", stopColor: GradientVariations[variation][0] }),
+            React.createElement("stop", { offset: "100%", stopColor: GradientVariations[variation][1] })));
+    if (type === GradientTypes.v2)
+        return (React.createElement("defs", null,
+            React.createElement("linearGradient", { id: id, x1: "27.9721", y1: "99.877", x2: "116.893", y2: "99.877", gradientUnits: "userSpaceOnUse" },
+                React.createElement("stop", { stopColor: GradientVariations[variation][0] }),
+                React.createElement("stop", { offset: "1", stopColor: GradientVariations[variation][1] }))));
+    if (type === GradientTypes.v3)
+        return (React.createElement("defs", null,
+            React.createElement("linearGradient", { id: id, x1: "8.6001", y1: "94.48", x2: "186.19", y2: "94.48", gradientUnits: "userSpaceOnUse", gradientTransform: "matrix(1, 0, 0, 1, 160.535599, 138.286461)" },
+                React.createElement("stop", { stopColor: GradientVariations[variation][0] }),
+                React.createElement("stop", { offset: "0.18", stopColor: GradientVariations[variation][2] }),
+                React.createElement("stop", { offset: "0.55", stopColor: GradientVariations[variation][3] }),
+                React.createElement("stop", { offset: "0.83", stopColor: GradientVariations[variation][4] }),
+                React.createElement("stop", { offset: "1", stopColor: GradientVariations[variation][5] }))));
+    return React.createElement(React.Fragment, null);
+};
+export default IconGradient;

package/dist/esm/components/Icon/createIconComponent.d.ts

@@ -0,0 +1,10 @@
+import React, { CSSProperties } from 'react';
+import { IconSvgProps } from './Icon';
+import { SvgFactoryOptions } from '@a-little-world/little-world-design-system-core';
+export declare const createIconComponent: ({ name, svgData, gradientType, }: SvgFactoryOptions) => {
+    ({ backgroundColor, borderColor, circular, className, color, gradient, height, label, labelVisible, style, width, }: IconSvgProps & {
+        style?: CSSProperties;
+        color?: string;
+    }): React.JSX.Element;
+    displayName: string;
+};

package/dist/esm/components/Icon/createIconComponent.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon } from './Icon';
+import { createReactSvg } from '../../utils/createReactSvg';
+export const createIconComponent = ({ name, svgData, gradientType, }) => {
+    const Component = ({ backgroundColor, borderColor, circular, className, color, gradient, height = 24, label, labelVisible, style, width = 24, }) => {
+        const gradientId = label
+            ? `gradient-${label.replace(/\s/g, '')}`
+            : 'gradient-icon-needs-label';
+        const svgOptions = {
+            color,
+            className: circular ? undefined : className,
+            gradient,
+            gradientId,
+            gradientType,
+            height,
+            label,
+            style,
+            width,
+        };
+        return (React.createElement(Icon, { backgroundColor: backgroundColor, borderColor: borderColor, circular: circular, className: className, style: style, color: color, label: label, labelVisible: labelVisible }, createReactSvg(svgData, svgOptions)));
+    };
+    Component.displayName = `${name}Icon`;
+    return Component;
+};

package/dist/esm/components/Icon/getDefaultIconProps.d.ts

@@ -0,0 +1,2 @@
+import { IconSvgProps } from './Icon';
+export declare const getDefaultIconProps: ({ backgroundColor, borderColor, circular, className, color, height, gradient, width, ...rest }: IconSvgProps) => IconSvgProps;

package/dist/esm/components/Icon/getDefaultIconProps.js

@@ -0,0 +1,11 @@
+export const getDefaultIconProps = ({ backgroundColor, borderColor, circular, className, color, height, gradient, width, ...rest }) => ({
+    backgroundColor,
+    borderColor,
+    circular,
+    className,
+    color: color || 'currentColor',
+    height: height || '32',
+    gradient,
+    width: width || '32',
+    ...rest,
+});