@zendeskgarden/react-forms 9.0.0-next.7 → 9.0.0-next.8

package/dist/esm/styled/tiles/StyledTileLabel.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.tile_label';
+const sizeStyles = props => {
+  let marginDirection = 'left';
+  let marginTop = `${props.theme.space.base * 2}px`;
+  let marginValue;
+  if (props.theme.rtl) {
+    marginDirection = 'right';
+  }
+  if (!props.isCentered) {
+    marginValue = math(`(${props.theme.iconSizes.md} * 2) + ${props.theme.space.base * 5}px`);
+    marginTop = '0';
+  }
+  return css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
+};
+const StyledTileLabel = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledTileLabel",
+  componentId: "sc-1mypv27-0"
+})(["display:block;text-align:", ";line-height:", ";font-size:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileLabel };

package/dist/esm/styled/toggle/StyledToggleHint.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledHint } from '../common/StyledHint.js';
+
+const COMPONENT_ID = 'forms.toggle_hint';
+const StyledToggleHint = styled(StyledHint).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledToggleHint",
+  componentId: "sc-nziggu-0"
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleHint };

package/dist/esm/styled/toggle/StyledToggleInput.js

@@ -0,0 +1,40 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { StyledCheckInput } from '../checkbox/StyledCheckInput.js';
+import { StyledToggleLabel } from './StyledToggleLabel.js';
+
+const COMPONENT_ID = 'forms.toggle';
+const colorStyles = props => {
+  const SHADE = 600;
+  const backgroundColor = getColorV8('neutralHue', SHADE - 100, props.theme);
+  const hoverBackgroundColor = getColorV8('neutralHue', SHADE, props.theme);
+  const activeBackgroundColor = getColorV8('neutralHue', SHADE + 100, props.theme);
+  return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
+};
+const sizeStyles = props => {
+  const height = `${props.theme.space.base * 5}px`;
+  const width = `${props.theme.space.base * 10}px`;
+  const iconSize = props.theme.iconSizes.md;
+  const iconPosition = math(`(${height} - ${iconSize}) / 2`);
+  const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
+  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
+};
+const StyledToggleInput = styled(StyledCheckInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledToggleInput",
+  componentId: "sc-sgp47s-0"
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, props => sizeStyles(props), props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleInput };

package/dist/esm/styled/toggle/StyledToggleLabel.js

@@ -0,0 +1,28 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledCheckLabel } from '../checkbox/StyledCheckLabel.js';
+
+const COMPONENT_ID = 'forms.toggle_label';
+const sizeStyles = props => {
+  const size = props.theme.space.base * 10;
+  const padding = size + props.theme.space.base * 2;
+  return css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
+};
+const StyledToggleLabel = styled(StyledCheckLabel).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledToggleLabel",
+  componentId: "sc-e0asdk-0"
+})(["", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleLabel };

package/dist/esm/styled/toggle/StyledToggleMessage.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledMessage } from '../common/StyledMessage.js';
+import { StyledMessageIcon } from '../common/StyledMessageIcon.js';
+
+const COMPONENT_ID = 'forms.toggle_message';
+const StyledToggleMessage = styled(StyledMessage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledToggleMessage",
+  componentId: "sc-13vuvl1-0"
+})(["padding-", ":", ";& ", "{", ":", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 10px - ${props.theme.iconSizes.md}`), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleMessage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleMessage };

package/dist/esm/styled/toggle/StyledToggleSvg.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import SvgCircleSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/16/circle-sm-fill.svg.js';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.toggle_svg';
+const StyledToggleSvg = styled(SvgCircleSmFill).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.8'
+}).withConfig({
+  displayName: "StyledToggleSvg",
+  componentId: "sc-162xbyx-0"
+})(["transition:all 0.15s ease-in-out;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleSvg.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleSvg };

package/dist/esm/types/index.js

@@ -0,0 +1,11 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+const VALIDATION = ['success', 'warning', 'error'];
+const FILE_VALIDATION = ['success', 'error'];
+const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
+
+export { FILE_TYPE, FILE_VALIDATION, VALIDATION };

package/dist/esm/utils/useFieldContext.js

@@ -0,0 +1,15 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const FieldContext = createContext(undefined);
+const useFieldContext = () => {
+  const fieldContext = useContext(FieldContext);
+  return fieldContext;
+};
+
+export { FieldContext, useFieldContext as default };

package/dist/esm/utils/useFieldsetContext.js

@@ -0,0 +1,15 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const FieldsetContext = createContext(undefined);
+const useFieldsetContext = () => {
+  const fieldsetContext = useContext(FieldsetContext);
+  return fieldsetContext;
+};
+
+export { FieldsetContext, useFieldsetContext as default };

package/dist/esm/utils/useFileContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const FileContext = createContext(undefined);
+const useFileContext = () => {
+  return useContext(FileContext);
+};
+
+export { FileContext, useFileContext as default };

package/dist/esm/utils/useInputContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const InputContext = createContext(undefined);
+const useInputContext = () => {
+  return useContext(InputContext);
+};
+
+export { InputContext, useInputContext as default };

package/dist/esm/utils/useInputGroupContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const InputGroupContext = createContext(undefined);
+const useInputGroupContext = () => {
+  return useContext(InputGroupContext);
+};
+
+export { InputGroupContext, useInputGroupContext };

package/dist/esm/utils/useTilesContext.js

@@ -0,0 +1,14 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import { createContext, useContext } from 'react';
+
+const TilesContext = createContext(undefined);
+const useTilesContext = () => {
+  return useContext(TilesContext);
+};
+
+export { TilesContext, useTilesContext };