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

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

@@ -0,0 +1,80 @@
+import { PopoverArrow, PopoverClose, PopoverContent, Root, } from '@radix-ui/react-popover';
+import styled, { css } from 'styled-components';
+import { slideDownAndFade, slideLeftAndFade, slideRightAndFade, slideUpAndFade, } from '../../utils/animations';
+export const PopoverRoot = styled(Root) ``;
+export const POPOVER_CONTENT_CSS = css `
+  border-radius: ${({ theme }) => theme.radius.small};
+  padding: ${({ theme }) => theme.spacing.small};
+  font-size: 16px;
+  line-height: 1.5;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  width: max-content;
+  max-width: 360px;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: ${slideLeftAndFade};
+  }
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: ${slideRightAndFade};
+  }
+`;
+export const StyledPopoverContent = styled(PopoverContent) `
+  ${POPOVER_CONTENT_CSS}
+
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+
+  ${({ $width }) => $width &&
+    `
+      width: ${$width};
+    `}
+
+  ${({ $extraPaddingTop, theme }) => $extraPaddingTop &&
+    `
+    padding-top: ${theme.spacing.medium};
+  `}
+
+  ${({ $asTooltip, theme }) => css `
+    background-color: ${$asTooltip
+    ? theme.color.surface.bold
+    : theme.color.surface.elevated};
+    color: ${$asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+    padding-right: ${$asTooltip ? theme.spacing.medium : theme.spacing.small};
+  `}
+    
+
+  &[data-state='open'][data-side='top'] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state='open'][data-side='right'] {
+    animation-name: ${slideLeftAndFade};
+  }
+  &[data-state='open'][data-side='bottom'] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state='open'][data-side='left'] {
+    animation-name: ${slideRightAndFade};
+  }
+`;
+export const StyledPopoverClose = styled(PopoverClose) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  color: ${({ $asTooltip, theme }) => $asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+`;
+export const StyledPopoverArrow = styled(PopoverArrow) `
+  fill: ${({ $asTooltip, theme }) => $asTooltip ? theme.color.surface.bold : theme.color.surface.elevated};
+`;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type ProgressBarProps = {
+    className: string;
+    max: number;
+    value: number;
+};
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,47 @@
+import * as Progress from '@radix-ui/react-progress';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+const ProgressRoot = styled(Progress.Root) `
+  position: relative;
+  overflow: hidden;
+  border-radius: 99999px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  width: 300px;
+  height: 8px;
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+`;
+const ProgressIndicator = styled(Progress.Indicator) `
+  background-color: ${({ theme }) => theme.color.surface.indicator};
+  width: 100%;
+  height: 100%;
+  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
+`;
+const ProgressBarWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.small};
+  font-family: 'Work Sans';
+`;
+const calculateProgress = (max, value) => {
+    return (value / max) * 100;
+};
+const ProgressBar = ({ className, max, value = 0, }) => {
+    const [progress, setProgress] = useState(calculateProgress(max, value));
+    useEffect(() => {
+        setProgress(calculateProgress(max, value));
+    }, [max, value]);
+    return (React.createElement(ProgressBarWrapper, { className: className },
+        React.createElement(Text, { id: "progressBarIndicator", tag: "span", type: TextTypes.Body6 },
+            value,
+            "/",
+            max),
+        React.createElement(ProgressRoot, { "aria-labelledby": "progressBarIndicator", value: value, max: max },
+            React.createElement(ProgressIndicator, { className: "ProgressIndicator", style: { transform: `translateX(-${100 - progress}%)` } }))));
+};
+export default ProgressBar;

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

@@ -0,0 +1,16 @@
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import React from 'react';
+import { RadioGroupBaseProps } from '@a-little-world/little-world-design-system-core';
+type Props = {
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    items: Array<{
+        id: string;
+        label?: string;
+        value: string;
+    }>;
+    inputRef: React.RefObject<HTMLInputElement>;
+} & RadixRadioGroup.RadioGroupProps & RadioGroupBaseProps;
+declare const RadioGroup: React.FC<Props>;
+export default RadioGroup;

package/dist/esm/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { RadioGroupVariations, } from '@a-little-world/little-world-design-system-core';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import { ItemContainer, PillItem, PillRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, RadioGroupWrapper, } from './styles';
+const RadioGroup = ({ error, items, label, labelTooltip, inputRef, type = RadioGroupVariations.Classic, value, ...rest }) => {
+    const isPill = type === RadioGroupVariations.Pill;
+    return (React.createElement(RadioGroupWrapper, null,
+        label && (React.createElement(Label, { bold: true, htmlFor: label, tooltipText: labelTooltip }, label)),
+        isPill ? (React.createElement(React.Fragment, null,
+            React.createElement(PillRoot, { ref: inputRef, value: value, name: label, ...rest }, items?.map(item => (React.createElement(PillItem, { key: item.id, value: item.value, id: item.id, "$hasError": Boolean(error) }, item.label)))),
+            React.createElement(InputError, { visible: Boolean(error), textAlign: "left" }, error))) : (React.createElement(RadioGroupRoot, { ref: inputRef, value: value, name: label, ...rest },
+            items?.map(item => (React.createElement(ItemContainer, { key: item.id },
+                React.createElement(RadioGroupItem, { value: item.value, id: item.id, "$hasError": Boolean(error) },
+                    React.createElement(RadioGroupIndicator, null)),
+                item.label && (React.createElement(Label, { htmlFor: item.id, inline: true }, item.label))))),
+            React.createElement(InputError, { visible: Boolean(error) }, error)))));
+};
+export default RadioGroup;

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

@@ -0,0 +1,12 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+export declare const RadioGroupWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RadioGroupRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const PillRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const PillItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const RadioGroupItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RadioGroupIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,90 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import styled, { css } from 'styled-components';
+const ITEM_WIDTH = '13px';
+export const RadioGroupWrapper = styled.div ``;
+export const RadioGroupRoot = styled(RadioGroup.Root) `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: flex-start;
+  width: 100%;
+`;
+export const PillRoot = styled(RadioGroup.Root) `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+export const PillItem = styled(RadioGroup.Item) `
+  all: unset;
+  font-family: 'Signika Negative';
+  font-weight: 600;
+  background: ${({ theme }) => theme.color.surface.primary};
+  border-radius: ${({ theme }) => theme.radius.small};
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.03);
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  padding: ${({ theme }) => `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  min-width: 60px;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: filter 0.2s ease-in-out;
+
+  ${({ theme }) => css `
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xsmall} ${theme.spacing.small};
+      min-width: 80px;
+    }
+  `}
+
+  &[data-state='checked'] {
+    border-color: ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.border.selected};
+  }
+
+  &:hover {
+    filter: brightness(0.97);
+    transition: filter 0.2s ease-in-out;
+  }
+`;
+export const RadioGroupItem = styled(RadioGroup.Item) `
+  all: unset;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.surface.contrast};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  border-radius: 100%;
+  margin-right: ${({ theme }) => theme.spacing.xxsmall};
+
+  &:focus {
+    box-shadow: 0 0 0 2px
+      ${({ $hasError, theme }) => $hasError ? theme.color.border.error : '#eeb612'};
+  }
+`;
+export const ItemContainer = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const RadioGroupIndicator = styled(RadioGroup.Indicator) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.color.text.primary};
+  }
+`;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface SeparatorProps {
+    background?: string;
+    className?: string;
+    color?: string;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'small' | 'medium' | 'large';
+    spacing?: string;
+}
+declare const Separator: ({ background, className, orientation, spacing, }: SeparatorProps) => React.JSX.Element;
+export default Separator;

package/dist/esm/components/Separator/Separator.js

@@ -0,0 +1,23 @@
+import * as RadixSeparator from '@radix-ui/react-separator';
+import React from 'react';
+import styled from 'styled-components';
+const StyledSeparator = styled(RadixSeparator.Root) `
+  margin: ${({ theme, $spacing }) => $spacing || theme.spacing.small} 0;
+  background: ${({ theme, $background }) => $background || theme.color.border.contrast};
+
+  &[data-orientation='vertical'] {
+    height: 100%;
+    width: 1px;
+    margin: 0 ${({ theme, $spacing }) => $spacing || theme.spacing.medium};
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 1px;
+    width: 100%;
+    margin: ${({ theme, $spacing }) => $spacing || theme.spacing.medium} 0;
+  }
+`;
+const Separator = ({ background, className, orientation = 'horizontal', spacing, }) => {
+    return (React.createElement(StyledSeparator, { className: className, orientation: orientation, decorative: true, "$background": background, "$spacing": spacing }));
+};
+export default Separator;

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

@@ -0,0 +1,6 @@
+export declare const SliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SliderRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderRange: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Steps: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,51 @@
+import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+import styled from 'styled-components';
+export const SliderWrapper = styled.div ``;
+export const SliderRoot = styled(Root) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 100%:
+  max-width: 400px;
+  height: 20px;
+`;
+export const SliderTrack = styled(Track) `
+  position: relative;
+  background-color: ${props => props.theme.color.surface.secondary};
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 3px;
+`;
+export const SliderRange = styled(Range) `
+  position: absolute;
+  background-color: ${props => props.theme.color.surface.bold};
+  border-radius: 9999px;
+  height: 100%;
+`;
+export const SliderThumb = styled(Thumb) `
+  display: block;
+  width: ${({ theme }) => theme.spacing.small};
+  height: ${({ theme }) => theme.spacing.small};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  border: 1px solid ${props => props.theme.color.border.moderate};
+
+  &:hover {
+    background-color: ${props => props.theme.color.surface.primary};
+    cursor: grab;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0px 4px ${props => props.theme.color.surface.contrast};
+  }
+`;
+export const Steps = styled.div `
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+`;

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

@@ -0,0 +1,12 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import React from 'react';
+type SliderProps = {
+    ariaLabel: string;
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    inputRef: React.RefObject<HTMLInputElement>;
+    steps: string[];
+} & RadixSlider.SliderProps;
+declare const Slider: ({ ariaLabel, defaultValue, inputRef, label, labelTooltip, onValueChange, value, steps, }: SliderProps) => React.JSX.Element;
+export default Slider;

package/dist/esm/components/Slider/Slider.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderWrapper, Steps, } from './styles';
+const Slider = ({ ariaLabel, defaultValue, inputRef, label, labelTooltip, onValueChange, value, steps, }) => (React.createElement(SliderWrapper, null,
+    label && (React.createElement(Label, { bold: true, htmlFor: label, tooltipText: labelTooltip }, label)),
+    React.createElement(SliderRoot, { "aria-label": ariaLabel, ref: inputRef, defaultValue: defaultValue, max: steps.length - 1, onValueChange: onValueChange, value: value || defaultValue },
+        React.createElement(SliderTrack, null,
+            React.createElement(SliderRange, null)),
+        React.createElement(SliderThumb, { "aria-label": ariaLabel })),
+    React.createElement(Steps, null, steps.map(step => (React.createElement(Text, { key: step }, step))))));
+export default Slider;

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

@@ -0,0 +1,6 @@
+export declare const SliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SliderRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderRange: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Steps: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,51 @@
+import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+import styled from 'styled-components';
+export const SliderWrapper = styled.div ``;
+export const SliderRoot = styled(Root) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 100%:
+  max-width: 400px;
+  height: 20px;
+`;
+export const SliderTrack = styled(Track) `
+  position: relative;
+  background-color: ${props => props.theme.color.surface.secondary};
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 3px;
+`;
+export const SliderRange = styled(Range) `
+  position: absolute;
+  background-color: ${props => props.theme.color.surface.bold};
+  border-radius: 9999px;
+  height: 100%;
+`;
+export const SliderThumb = styled(Thumb) `
+  display: block;
+  width: ${({ theme }) => theme.spacing.small};
+  height: ${({ theme }) => theme.spacing.small};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  border: 1px solid ${props => props.theme.color.border.moderate};
+
+  &:hover {
+    background-color: ${props => props.theme.color.surface.primary};
+    cursor: grab;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0px 4px ${props => props.theme.color.surface.contrast};
+  }
+`;
+export const Steps = styled.div `
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+`;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare enum StarRatingSizes {
+    Small = 24,// px
+    Medium = 32,
+    Large = 48
+}
+export interface StarRatingProps {
+    className?: string;
+    color?: string;
+    displayNumber?: boolean;
+    displayTextRatings?: boolean;
+    enableHalfRatings?: boolean;
+    id?: string;
+    initialRating?: number;
+    ratings?: string[];
+    maxRating?: number;
+    name?: string;
+    onChange?: (rating: number) => void;
+    size?: StarRatingSizes;
+}
+declare const StarRating: ({ className, color, displayNumber, displayTextRatings, enableHalfRatings, id, initialRating, name, maxRating, onChange, ratings, size, }: StarRatingProps) => React.JSX.Element;
+export default StarRating;

package/dist/esm/components/StarRating/StarRating.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { StarIcon } from '../Icon';
+import { Rating, RatingContainer, StarContainer, StarOverlay, Stars, TextRating, VisuallyHidden, } from './styles';
+const roundToHalf = (value) => {
+    const rounded = Math.round(value * 2) / 2;
+    return Math.max(0, Math.min(rounded, 5));
+};
+const DEFAULT_RATINGS = ['Poor', 'Fair', 'Average', 'Good', 'Excellent'];
+export var StarRatingSizes;
+(function (StarRatingSizes) {
+    StarRatingSizes[StarRatingSizes["Small"] = 24] = "Small";
+    StarRatingSizes[StarRatingSizes["Medium"] = 32] = "Medium";
+    StarRatingSizes[StarRatingSizes["Large"] = 48] = "Large";
+})(StarRatingSizes || (StarRatingSizes = {}));
+const StarRating = ({ className, color, displayNumber = false, displayTextRatings = false, enableHalfRatings = false, id = 'star-rating', initialRating = 0, name = 'rating', maxRating = 5, onChange, ratings = DEFAULT_RATINGS, size = StarRatingSizes.Small, }) => {
+    const [rating, setRating] = useState(initialRating);
+    const [hoverRating, setHoverRating] = useState(0);
+    const [focusedStar, setFocusedStar] = useState(null);
+    const theme = useTheme();
+    const ratingIncrement = enableHalfRatings ? 0.5 : 1;
+    const handleMouseMove = (e, starIndex) => {
+        const { left, width } = e.currentTarget.getBoundingClientRect();
+        const percent = (e.clientX - left) / width;
+        const newRating = enableHalfRatings && percent <= 0.5 ? starIndex + 0.5 : starIndex + 1;
+        setHoverRating(roundToHalf(newRating));
+    };
+    const handleMouseLeave = () => {
+        setHoverRating(0);
+    };
+    const updateRating = useCallback((newRating) => {
+        const roundedRating = enableHalfRatings
+            ? roundToHalf(newRating)
+            : newRating;
+        setRating(roundedRating);
+        onChange?.(roundedRating);
+    }, [onChange]);
+    const calculateRating = (starNumber) => {
+        // Toggle between whole, half, and unrated for clicked star
+        let newRating;
+        if (rating === starNumber) {
+            newRating = starNumber - ratingIncrement;
+        }
+        else {
+            newRating = starNumber;
+        }
+        updateRating(newRating);
+    };
+    const handleKeyDown = (e, starIndex) => {
+        let newRating = rating;
+        setHoverRating(0);
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                // If we're at a whole number, go down by 0.5, otherwise go down by 1
+                newRating =
+                    Math.floor(rating) === rating
+                        ? Math.max(0, rating - ratingIncrement)
+                        : Math.max(0, Math.floor(rating));
+                updateRating(newRating);
+                setFocusedStar(Math.max(0, newRating - 1));
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                // If we're at a whole number, go up by 0.5, otherwise go up by 1
+                newRating =
+                    Math.floor(rating) === rating
+                        ? Math.min(maxRating, rating + ratingIncrement)
+                        : Math.min(maxRating, Math.ceil(rating));
+                updateRating(newRating);
+                setFocusedStar(Math.min(maxRating - 1, newRating - 1));
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                calculateRating((focusedStar ?? starIndex) + 1);
+                break;
+            default:
+                break;
+        }
+    };
+    const currentRating = hoverRating || rating;
+    return (React.createElement(RatingContainer, { className: className, role: "group", "aria-label": "Star rating" },
+        React.createElement(VisuallyHidden, { id: `${id}-label` },
+            "Rating: ",
+            currentRating,
+            " out of ",
+            maxRating,
+            " stars"),
+        React.createElement(Stars, null,
+            [...Array(maxRating)].map((_, index) => {
+                const fillAmount = Math.max(0, Math.min(1, currentRating - index));
+                const starNumber = index + 1;
+                const handleClick = () => {
+                    // tap devices cannot use hover rating
+                    const crossDeviceFillAmount = hoverRating ? fillAmount : 1;
+                    calculateRating(index + crossDeviceFillAmount);
+                };
+                return (React.createElement(StarContainer, { key: index, onClick: handleClick, onMouseMove: e => handleMouseMove(e, index), onMouseLeave: handleMouseLeave, onKeyDown: e => handleKeyDown(e, index), onFocus: () => setFocusedStar(index), onBlur: () => setFocusedStar(null), tabIndex: 0, role: "radio", "aria-checked": rating >= starNumber, "aria-label": `${starNumber} star${starNumber === 1 ? '' : 's'}`, "aria-describedby": `${id}-label`, name: name, type: "button" },
+                    React.createElement(StarIcon, { label: "background star", width: size, height: size, color: theme.color.surface.disabled, "aria-hidden": "true" }),
+                    React.createElement(StarOverlay, { "$fillAmount": fillAmount },
+                        React.createElement(StarIcon, { label: "filled star", width: size, height: size, color: color || theme.color.surface.selected, "aria-hidden": "true" }))));
+            }),
+            displayNumber && (React.createElement(Rating, { "aria-hidden": "true", tag: "span" }, currentRating || 0))),
+        displayTextRatings && (React.createElement(TextRating, null, ratings[Math.ceil(currentRating - 1)]))));
+};
+export default StarRating;

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

@@ -0,0 +1,35 @@
+export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Stars: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    isFocused?: boolean;
+}>> & string;
+export declare const StarOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAmount: number;
+}>> & string;
+export declare const Rating: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const TextRating: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;