@pfct/purple 1.3.8-rc.2 → 1.4.0-npm-test.2

package/.history/src/components/Input/BaseInput/index.styled_20230620162224.ts

@@ -0,0 +1,151 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { basicColors, generateHexWithAlphaInLightMode, typography } from '../../..';
+
+type InputLabelType = {
+	active: boolean;
+};
+
+type DisabledType = {
+	disabled?: boolean;
+};
+
+export const InputWrapper = styled.div<InputLabelType & DisabledType & { error: boolean }>`
+	width: 100%;
+	height: 65px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${basicColors.white};
+	border: 1px solid ${({ active }) => (active ? basicColors.gray600 : basicColors.gray50)};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({ error }) =>
+		error &&
+		css`
+			border: 1px solid ${basicColors.red400};
+		`}
+
+	${({ active }) =>
+		active &&
+		css`
+			box-shadow: 0 2px 5px ${generateHexWithAlphaInLightMode(basicColors.gray900, '10%')};
+		`}
+
+	${({ disabled, error }) =>
+		!error
+			? !disabled
+				? css`
+						&:hover {
+							border: 1px solid ${basicColors.gray600};
+							box-shadow: 0 2px 5px ${generateHexWithAlphaInLightMode(basicColors.gray900, '10%')};
+						}
+						&:focus {
+							border: 1px solid ${basicColors.gray600};
+							outline: none;
+						}
+						&:disabled {
+							background-color: ${basicColors.gray50};
+						}
+				  `
+				: css`
+						background-color: ${basicColors.gray25};
+						color: ${basicColors.gray200};
+				  `
+			: null};
+`;
+
+export const InputTag = styled.input<{ decoration?: boolean }>`
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	padding: 28px 20px 11px 20px;
+	color: ${basicColors.gray900};
+	transition: all 0.2s;
+	border: none;
+	background-color: transparent;
+	-webkit-appearance: none;
+
+	&::-webkit-date-and-time-value {
+		text-align: initial;
+	}
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	${({ decoration }) =>
+		decoration
+			? css`
+					border-top-left-radius: 10px;
+					border-bottom-left-radius: 10px;
+			  `
+			: css`
+					border-radius: 10px;
+			  `}
+
+	${typography.title1};
+
+	&:disabled {
+		background-color: ${basicColors.gray25};
+		color: ${basicColors.gray200};
+		-webkit-text-fill-color: ${basicColors.gray200};
+		opacity: 1;
+	}
+
+	&:focus {
+		outline: none;
+	}
+`;
+
+export const DecorationItemWrapper = styled.div<DisabledType>`
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding-right: 15px;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: ${({ disabled }) => (disabled ? basicColors.gray25 : basicColors.white)};
+`;
+
+export const InputLabel = styled.label<InputLabelType>`
+	position: absolute;
+	color: ${basicColors.gray200};
+	left: 20px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({ active }) =>
+		!active
+			? css`
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${typography.title1}
+			  `
+			: css`
+					top: 11px;
+					${typography.body2}
+			  `};
+`;
+
+export const ErrorText = styled.div`
+	bottom: 0px;
+	position: relative;
+	${typography.body2};
+	color: ${basicColors.red400};
+	margin-top: 10px;
+	left: 5px;
+`;
+
+export const GuideText = styled.div`
+	${typography.title1}
+
+	position: absolute;
+	top: 28px;
+	left: 21px;
+	color: ${basicColors.gray100};
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230518172815.ts

@@ -0,0 +1,71 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { title1, typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	${title1}
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230619181154.ts

@@ -0,0 +1,72 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { title1, typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+	disabled?: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	${title1}
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230619181243.ts

@@ -0,0 +1,71 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { title1, typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	${title1}
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230619181840.ts

@@ -0,0 +1,70 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { title1, typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230619181843.ts

@@ -0,0 +1,70 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { title1, typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230619181844.ts

@@ -0,0 +1,70 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	position: absolute;
+	bottom: 11px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;

package/.history/src/components/Input/PostfixInput/index.styled_20230620110646.ts

@@ -0,0 +1,70 @@
+import * as BaseStyled from '../BaseInput/index.styled';
+import styled from '@emotion/styled';
+import { typography } from '../../../core';
+
+interface UnitProps {
+	hasValue: boolean;
+}
+
+interface InputSizerProps {
+	displayValue: string;
+}
+
+export const InputWrapper = styled(BaseStyled.InputWrapper)`
+	display: flex;
+	justify-content: space-between;
+	/** decoration 끝에 붙을 수 있도록 */
+`;
+
+export const InputTag = styled(BaseStyled.InputTag)`
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: 65px; /** input, unit 아랫선 맞추기 */
+`;
+
+export const InputAndUnitWrapper = styled.div`
+	display: flex;
+	width: 100%;
+`;
+
+export const UnitWrapper = styled.div`
+	display: block;
+	position: relative;
+	flex-grow: 1;
+`;
+
+export const Unit = styled.div<UnitProps>`
+	position: absolute;
+	bottom: 12px;
+
+	${({ hasValue }) => (hasValue ? 'left: -5px' : 'left: -10px')}
+`;
+
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+export const InputSizer = styled.div<InputSizerProps>`
+	display: inline-grid;
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: 25px;
+		${typography.title1}
+	}
+
+	&::after,
+	${InputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;