@lightsparkdev/ui 0.0.0

package/dist/styles/fields.d.cts

@@ -0,0 +1,67 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as _emotion_styled from '@emotion/styled';
+import * as react from 'react';
+import * as _emotion_react from '@emotion/react';
+import { Theme } from '@emotion/react';
+import { ThemeProp } from './colors.cjs';
+import '@emotion/css';
+import './fonts/typographyTokens.cjs';
+
+declare const maxFieldWidth = "100%";
+declare const fieldWidth = "100%";
+declare const inputSpacingPx = 24;
+declare const formButtonTopMargin = "32px";
+declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
+declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
+declare const textInputColor: ({ theme }: ThemeProp) => string;
+declare const textInputFontWeight = 600;
+declare const textInputBorderRadiusPx = 8;
+declare const textInputPaddingPx = 12;
+declare const textInputPadding = "12px";
+declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
+declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
+declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: {
+    theme: Theme;
+    disabled: boolean;
+    hasError: boolean;
+    paddingLeftPx?: number | undefined;
+    paddingRightPx?: number | undefined;
+}) => _emotion_react.SerializedStyles;
+declare const FieldError: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const aboveFieldError: ({ theme, hasError, }: {
+    theme: Theme;
+    hasError: boolean;
+}) => _emotion_react.SerializedStyles;
+declare function InputSubtext({ text, hasError, }: {
+    text?: string | undefined;
+    hasError?: boolean;
+}): _emotion_react_jsx_runtime.JSX.Element;
+declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError: boolean;
+    visible: boolean;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const labelStyle: ({ theme, hasError, }: {
+    theme: Theme;
+    hasError?: boolean;
+}) => _emotion_react.SerializedStyles;
+declare const Label: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError?: boolean;
+}, react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+declare const LabelDiv: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError?: boolean;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };

package/dist/styles/fields.d.ts

@@ -0,0 +1,67 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import * as _emotion_styled from '@emotion/styled';
+import * as react from 'react';
+import * as _emotion_react from '@emotion/react';
+import { Theme } from '@emotion/react';
+import { ThemeProp } from './colors.js';
+import '@emotion/css';
+import './fonts/typographyTokens.js';
+
+declare const maxFieldWidth = "100%";
+declare const fieldWidth = "100%";
+declare const inputSpacingPx = 24;
+declare const formButtonTopMargin = "32px";
+declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
+declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
+declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
+declare const textInputColor: ({ theme }: ThemeProp) => string;
+declare const textInputFontWeight = 600;
+declare const textInputBorderRadiusPx = 8;
+declare const textInputPaddingPx = 12;
+declare const textInputPadding = "12px";
+declare const textInputBorderColor: ({ theme }: ThemeProp) => string;
+declare const textInputBorderColorFocused: ({ theme }: ThemeProp) => string;
+declare const textInputStyle: ({ theme, disabled, hasError, paddingLeftPx, paddingRightPx, }: {
+    theme: Theme;
+    disabled: boolean;
+    hasError: boolean;
+    paddingLeftPx?: number | undefined;
+    paddingRightPx?: number | undefined;
+}) => _emotion_react.SerializedStyles;
+declare const FieldError: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const aboveFieldError: ({ theme, hasError, }: {
+    theme: Theme;
+    hasError: boolean;
+}) => _emotion_react.SerializedStyles;
+declare function InputSubtext({ text, hasError, }: {
+    text?: string | undefined;
+    hasError?: boolean;
+}): _emotion_react_jsx_runtime.JSX.Element;
+declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError: boolean;
+    visible: boolean;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const labelStyle: ({ theme, hasError, }: {
+    theme: Theme;
+    hasError?: boolean;
+}) => _emotion_react.SerializedStyles;
+declare const Label: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError?: boolean;
+}, react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+declare const LabelDiv: _emotion_styled.StyledComponent<{
+    theme?: Theme;
+    as?: react.ElementType<any>;
+} & {
+    hasError?: boolean;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };

package/dist/styles/fields.js

@@ -0,0 +1,192 @@
+import {
+  subtext
+} from "../chunk-QR7BKTM6.js";
+import {
+  themeOr
+} from "../chunk-ACZDUWPH.js";
+import "../chunk-WVJNZRKF.js";
+import "../chunk-JSGRNWSB.js";
+import {
+  z
+} from "../chunk-CLU2FRJZ.js";
+import "../chunk-CIGAQ47A.js";
+
+// src/styles/fields.tsx
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+var maxFieldWidth = "100%";
+var fieldWidth = "100%";
+var inputSpacingPx = 24;
+var formButtonTopMargin = "32px";
+var formButtonTopMarginStyle = css`
+  margin-top: ${formButtonTopMargin};
+`;
+var standardBorderColor = ({ theme }) => css`
+  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
+`;
+var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
+var textInputColor = ({ theme }) => theme.text;
+var textInputFontWeight = 600;
+var textInputBorderRadiusPx = 8;
+var textInputPaddingPx = 12;
+var textInputPadding = `${textInputPaddingPx}px`;
+var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
+var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputStyle = ({
+  theme,
+  disabled,
+  hasError,
+  paddingLeftPx,
+  paddingRightPx
+}) => {
+  var _a;
+  return css`
+  border-radius: ${textInputBorderRadiusPx}px;
+  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  pointer-events: ${disabled ? "none" : "auto"};
+  box-sizing: border-box;
+  font-weight: ${textInputFontWeight};
+
+  position: relative;
+  z-index: ${z.textInput};
+  font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
+  padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
+  border-style: solid;
+  border-width: ${hasError ? "2" : "1"}px;
+  border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
+  line-height: 22px;
+  outline: none;
+  /* Use low contrast by default. Some fields, eg login, need high contrast simply
+     because of quirks with default autofill styles. Clicking in to an autofilled value
+     does not change the color of the text, it just uses the default field color */
+  color: ${textInputColor({ theme })};
+  font-size: 14px;
+  width: ${fieldWidth};
+  max-width: ${maxFieldWidth};
+  text-overflow: ellipsis;
+  &:focus,
+  &:active {
+    border-color: ${textInputBorderColorFocused({ theme })};
+    border-width: 2px;
+    color: ${textInputColor({ theme })};
+    padding: ${textInputPaddingPx - 1}px;
+    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  }
+
+  &::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+
+  &:focus::placeholder {
+    color: ${textInputPlaceholderColor({ theme })};
+  }
+`;
+};
+var FieldError = styled.div`
+  background-color: rgba(242, 239, 255, 1);
+  padding: 16px 16px 8px;
+  margin-top: -8px;
+  border-radius: 0 0 8px 8px;
+  position: relative;
+  z-index: ${z.fieldError};
+`;
+var aboveFieldError = ({
+  theme,
+  hasError
+}) => css`
+  ${hasError ? "border: none !important" : ""};
+  background-color: ${theme.bg};
+  position: relative;
+  z-index: ${z.fieldError + 1};
+  ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
+`;
+var inputSubtextSeconds = 0.25;
+function InputSubtext({
+  text,
+  hasError = false
+}) {
+  const timeoutRef = useRef(null);
+  const [subtext2, setSubtext] = useState(text);
+  const [visible, setVisible] = useState(Boolean(text));
+  useLayoutEffect(() => {
+    if (text) {
+      setSubtext(text);
+      setVisible(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    } else {
+      setVisible(false);
+      timeoutRef.current = setTimeout(() => {
+        setSubtext(void 0);
+      }, inputSubtextSeconds * 1e3);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(StyledInputSubtext, { visible, hasError, children: subtext2 });
+}
+var StyledInputSubtext = styled.div`
+  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
+  margin-left: ${({ visible }) => visible ? "8px" : "0px"};
+  font-size: 12px;
+  font-size: ${({ visible }) => visible ? "12px" : "0px"};
+  opacity: ${({ visible }) => visible ? "1" : "0"};
+  overflow: hidden;
+  transition:
+    font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
+    margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
+  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
+`;
+var labelStyle = ({
+  theme,
+  hasError
+}) => css`
+  color: ${hasError ? theme.danger : theme.text};
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  & + * {
+    margin-top: 12px;
+  }
+  * ~ & {
+    margin-top: 40px;
+  }
+`;
+var Label = styled.label`
+  ${subtext}
+  ${labelStyle}
+`;
+var LabelDiv = styled.div`
+  ${subtext}
+  ${labelStyle}
+`;
+export {
+  FieldError,
+  InputSubtext,
+  Label,
+  LabelDiv,
+  StyledInputSubtext,
+  aboveFieldError,
+  fieldWidth,
+  formButtonTopMargin,
+  formButtonTopMarginStyle,
+  inputSpacingPx,
+  labelStyle,
+  maxFieldWidth,
+  standardBorderColor,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  textInputBorderRadiusPx,
+  textInputColor,
+  textInputFontWeight,
+  textInputPadding,
+  textInputPaddingPx,
+  textInputPlaceholderColor,
+  textInputStyle
+};