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

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

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectItemIndicator = exports.SelectItem = exports.SelectIcon = exports.SelectViewport = exports.SelectContent = exports.SelectValue = exports.SelectTrigger = exports.DropdownWrapper = exports.DROPDOWN_MAX_WIDTH = void 0;
+const Select = __importStar(require("@radix-ui/react-select"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const InputError_1 = require("../InputError/InputError");
+const styles_1 = require("../Text/styles");
+const TextInput_1 = require("../TextInput/TextInput");
+exports.DROPDOWN_MAX_WIDTH = '300px';
+exports.DropdownWrapper = styled_components_1.default.div `
+  position: relative;
+  max-width: ${({ $maxWidth }) => $maxWidth || exports.DROPDOWN_MAX_WIDTH};
+  width: 100%;
+`;
+exports.SelectTrigger = (0, styled_components_1.default)(Select.Trigger) `
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme, $height }) => $height === TextInput_1.InputHeight.Small
+    ? theme.spacing.xxsmall
+    : `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  line-height: 1.25;
+  height: ${({ $height }) => ($height === TextInput_1.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 {
+    ${styles_1.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 && InputError_1.INPUT_ERROR_CSS}
+`;
+exports.SelectValue = (0, styled_components_1.default)(Select.Value) `
+  &[data-placeholder] {
+    background-color: ${({ theme }) => theme.color.surface.primary};
+  }
+`;
+exports.SelectContent = (0, styled_components_1.default)(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;
+`;
+exports.SelectViewport = (0, styled_components_1.default)(Select.Viewport) `
+  padding: ${({ theme }) => theme.spacing.xxsmall}
+    ${({ theme }) => theme.spacing.xxxsmall};
+  max-height: 200px;
+  overflow: scroll;
+`;
+exports.SelectIcon = (0, styled_components_1.default)(Select.Icon) `
+  display: flex;
+`;
+exports.SelectItem = (0, styled_components_1.default)(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;
+  }
+`;
+exports.SelectItemIndicator = (0, styled_components_1.default)(Select.ItemIndicator) `
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;

package/dist/cjs/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/cjs/components/Icon/Icon.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports.ImageLabel = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Circle = styled_components_1.default.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;
+exports.ImageLabel = styled_components_1.default.span `
+  ${({ $top, $visible }) => $visible
+    ? (0, styled_components_1.css) `
+          position: relative;
+          top: ${$top};
+        `
+    : (0, styled_components_1.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;
+          }
+        `}
+`;
+const Icon = ({ backgroundColor, borderColor, children, circular, className, color, label, labelVisible, labelTop = '56px', }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    circular ? (react_1.default.createElement(Circle, { "$backgroundColor": backgroundColor, "$borderColor": borderColor, className: className, color: color }, children)) : (children),
+    react_1.default.createElement(exports.ImageLabel, { id: label, "$visible": labelVisible, "$top": labelTop }, label)));
+exports.Icon = Icon;

package/dist/cjs/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/cjs/components/Icon/IconGradient.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const react_1 = __importDefault(require("react"));
+const IconGradient = ({ id, variation, type = little_world_design_system_core_1.GradientTypes.v1, }) => {
+    if (type === little_world_design_system_core_1.GradientTypes.v1)
+        return (react_1.default.createElement("linearGradient", { id: id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", gradientUnits: "objectBoundingBox" },
+            react_1.default.createElement("stop", { offset: "0%", stopColor: little_world_design_system_core_1.GradientVariations[variation][0] }),
+            react_1.default.createElement("stop", { offset: "33%", stopColor: little_world_design_system_core_1.GradientVariations[variation][0] }),
+            react_1.default.createElement("stop", { offset: "100%", stopColor: little_world_design_system_core_1.GradientVariations[variation][1] })));
+    if (type === little_world_design_system_core_1.GradientTypes.v2)
+        return (react_1.default.createElement("defs", null,
+            react_1.default.createElement("linearGradient", { id: id, x1: "27.9721", y1: "99.877", x2: "116.893", y2: "99.877", gradientUnits: "userSpaceOnUse" },
+                react_1.default.createElement("stop", { stopColor: little_world_design_system_core_1.GradientVariations[variation][0] }),
+                react_1.default.createElement("stop", { offset: "1", stopColor: little_world_design_system_core_1.GradientVariations[variation][1] }))));
+    if (type === little_world_design_system_core_1.GradientTypes.v3)
+        return (react_1.default.createElement("defs", null,
+            react_1.default.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_1.default.createElement("stop", { stopColor: little_world_design_system_core_1.GradientVariations[variation][0] }),
+                react_1.default.createElement("stop", { offset: "0.18", stopColor: little_world_design_system_core_1.GradientVariations[variation][2] }),
+                react_1.default.createElement("stop", { offset: "0.55", stopColor: little_world_design_system_core_1.GradientVariations[variation][3] }),
+                react_1.default.createElement("stop", { offset: "0.83", stopColor: little_world_design_system_core_1.GradientVariations[variation][4] }),
+                react_1.default.createElement("stop", { offset: "1", stopColor: little_world_design_system_core_1.GradientVariations[variation][5] }))));
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.default = IconGradient;

package/dist/cjs/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/cjs/components/Icon/createIconComponent.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createIconComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("./Icon");
+const createReactSvg_1 = require("../../utils/createReactSvg");
+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_1.default.createElement(Icon_1.Icon, { backgroundColor: backgroundColor, borderColor: borderColor, circular: circular, className: className, style: style, color: color, label: label, labelVisible: labelVisible }, (0, createReactSvg_1.createReactSvg)(svgData, svgOptions)));
+    };
+    Component.displayName = `${name}Icon`;
+    return Component;
+};
+exports.createIconComponent = createIconComponent;

package/dist/cjs/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/cjs/components/Icon/getDefaultIconProps.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultIconProps = void 0;
+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,
+});
+exports.getDefaultIconProps = getDefaultIconProps;