@pfct/purple 1.4.0-rc.3 → 1.4.0-rc.5

package/dist/chunks/index.styled.Cw4AEFns.js

@@ -0,0 +1,76 @@
+import { css as o } from "@emotion/react";
+import i from "@emotion/styled";
+import { typography as a } from "../core/TextStyles/index.es.js";
+import { basicColors as e } from "../core/Colors/index.es.js";
+import { INPUT_HEIGHT as n, INNER_POSITION_LEFT as p, INNER_POSITION_TOP as l, INNER_POSITION_BOTTOM as r } from "../components/Input/common/InputFrame/constant.es.js";
+import { b as d, N as b } from "./index.styled.SOJ65tcg.js";
+const s = i.input`
+	${a.title1};
+
+	box-sizing: border-box;
+	width: 100%;
+	height: ${n}px;
+
+	padding-left: ${p}px;
+
+	${({ hasLabel: t }) => t ? o`
+					padding-top: ${l.hasLabel}px;
+					padding-bottom: ${r.hasLabel}px;
+			  ` : o`
+					padding-bottom: ${r.noLabel}px;
+			  `};
+
+	color: ${e.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: t }) => t ? o`
+					border-top-left-radius: 10px;
+					border-bottom-left-radius: 10px;
+			  ` : o`
+					border-radius: 10px;
+			  `}
+
+	&:disabled {
+		color: ${d};
+		-webkit-text-fill-color: ${e.gray200};
+		opacity: 1;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&::placeholder {
+		${({ hasLabel: t }) => b({ hasLabel: t })}
+	}
+`, c = i.div`
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding-right: 15px;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: ${({ disabled: t }) => t ? e.gray25 : e.white};
+`, h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  DecorationItemWrapper: c,
+  InputTag: s
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  c as D,
+  s as I,
+  h as i
+};

package/dist/chunks/index.styled.DkE3TbtV.js

@@ -0,0 +1,63 @@
+"use strict";const e=require("@emotion/react"),b=require("@emotion/styled"),s=require("../core/TextStyles/index.cjs.js"),t=require("../core/Colors/index.cjs.js"),r=require("../components/Input/common/InputFrame/constant.cjs.js"),u=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},a=u(b),i=({hasLabel:o})=>e.css`
+	${s.typography.title1}
+
+	position: absolute;
+	top: ${o?r.INNER_POSITION_TOP.hasLabel:r.INNER_POSITION_TOP.noLabel}px;
+	left: ${r.INNER_POSITION_LEFT}px;
+	color: ${t.basicColors.gray100};
+`,l=t.basicColors.gray200,n=a.default.div`
+	width: 100%;
+	height: ${r.INPUT_HEIGHT}px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${t.basicColors.white};
+	border: 1px solid ${({active:o})=>o?t.basicColors.gray600:t.basicColors.gray50};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({error:o})=>o&&e.css`
+			border: 1px solid ${t.basicColors.red400};
+		`}
+
+	${({active:o})=>o&&e.css`
+			box-shadow: 0 2px 5px ${t.generateHexWithAlphaInLightMode(t.basicColors.gray900,"10%")};
+		`}
+
+	${({disabled:o,error:d})=>d?null:o?e.css`
+						background-color: ${t.basicColors.gray25};
+						color: ${l};
+				  `:e.css`
+						&:hover {
+							border: 1px solid ${t.basicColors.gray600};
+							box-shadow: 0 2px 5px ${t.generateHexWithAlphaInLightMode(t.basicColors.gray900,"10%")};
+						}
+						&:focus {
+							border: 1px solid ${t.basicColors.gray600};
+							outline: none;
+						}
+				  `};
+`,c=a.default.label`
+	position: absolute;
+	color: ${t.basicColors.gray200};
+	left: ${r.INNER_POSITION_LEFT}px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({active:o})=>o?e.css`
+					top: 11px;
+					${s.typography.body2}
+			  `:e.css`
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${s.typography.title1}
+			  `};
+`,p=a.default.div`
+	bottom: 0px;
+	position: relative;
+	${s.typography.body2};
+	color: ${t.basicColors.red400};
+	margin-top: 10px;
+	left: 5px;
+`,x=Object.freeze(Object.defineProperty({__proto__:null,ErrorText:p,InputDisabledTextColor:l,InputLabel:c,InputWrapper:n,NotActivePlaceholderOrLabelStyle:i},Symbol.toStringTag,{value:"Module"}));exports.ErrorText=p;exports.InputDisabledTextColor=l;exports.InputLabel=c;exports.InputWrapper=n;exports.NotActivePlaceholderOrLabelStyle=i;exports.index_styled=x;

package/dist/chunks/index.styled.SOJ65tcg.js

@@ -0,0 +1,83 @@
+import { css as t } from "@emotion/react";
+import a from "@emotion/styled";
+import { typography as e } from "../core/TextStyles/index.es.js";
+import { basicColors as o, generateHexWithAlphaInLightMode as i } from "../core/Colors/index.es.js";
+import { INPUT_HEIGHT as d, INNER_POSITION_LEFT as s, INNER_POSITION_TOP as l } from "../components/Input/common/InputFrame/constant.es.js";
+const b = ({ hasLabel: r }) => t`
+	${e.title1}
+
+	position: absolute;
+	top: ${r ? l.hasLabel : l.noLabel}px;
+	left: ${s}px;
+	color: ${o.gray100};
+`, p = o.gray200, x = a.div`
+	width: 100%;
+	height: ${d}px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${o.white};
+	border: 1px solid ${({ active: r }) => r ? o.gray600 : o.gray50};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({ error: r }) => r && t`
+			border: 1px solid ${o.red400};
+		`}
+
+	${({ active: r }) => r && t`
+			box-shadow: 0 2px 5px ${i(o.gray900, "10%")};
+		`}
+
+	${({ disabled: r, error: n }) => n ? null : r ? t`
+						background-color: ${o.gray25};
+						color: ${p};
+				  ` : t`
+						&:hover {
+							border: 1px solid ${o.gray600};
+							box-shadow: 0 2px 5px ${i(o.gray900, "10%")};
+						}
+						&:focus {
+							border: 1px solid ${o.gray600};
+							outline: none;
+						}
+				  `};
+`, $ = a.label`
+	position: absolute;
+	color: ${o.gray200};
+	left: ${s}px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({ active: r }) => r ? t`
+					top: 11px;
+					${e.body2}
+			  ` : t`
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${e.title1}
+			  `};
+`, c = a.div`
+	bottom: 0px;
+	position: relative;
+	${e.body2};
+	color: ${o.red400};
+	margin-top: 10px;
+	left: 5px;
+`, h = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ErrorText: c,
+  InputDisabledTextColor: p,
+  InputLabel: $,
+  InputWrapper: x,
+  NotActivePlaceholderOrLabelStyle: b
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  c as E,
+  x as I,
+  b as N,
+  $ as a,
+  p as b,
+  h as i
+};