cherry-styled-components 0.1.14 → 0.1.16

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-6fe5d34a-0"
+	componentId: "sc-a617b4b1-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -17,7 +17,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-6fe5d34a-1"
+	componentId: "sc-a617b4b1-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -26,7 +26,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-6fe5d34a-2"
+	componentId: "sc-a617b4b1-2"
 })([
 	``,
 	`;`,
@@ -35,13 +35,21 @@ var StyledInput = styled.input.withConfig({
 	`;background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
-	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&[type="date"]{padding:17px 45px 17px 15px;@supports (-moz-appearance:none){padding:13px 15px;}}&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
+	`;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&[type="date"],&[type="datetime-local"],&[type="month"],&[type="week"],&[type="time"]{padding:17px 45px 17px 15px;@supports (-moz-appearance:none){padding:13px 15px;}}&::-webkit-datetime-edit{padding:0;margin:0;vertical-align:middle;}&::-webkit-datetime-edit-fields-wrapper{padding:4px 0;margin:0;vertical-align:middle;}&::-webkit-calendar-picker-indicator{background:transparent;cursor:pointer;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:24px;height:24px;}&::-webkit-datetime-edit-text{color:`,
 	`;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
 	`;color:`,
 	`;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
 	`;color:`,
 	`;border-radius:4px;}}&::-webkit-datetime-edit-year-field{&:focus{background:`,
 	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-hour-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-minute-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-second-field{&:focus{background:`,
+	`;color:`,
+	`;border-radius:4px;}}&::-webkit-datetime-edit-ampm-field{&:focus{background:`,
+	`;color:`,
 	`;border-radius:4px;}}&::placeholder{color:`,
 	`;}&:hover:not([disabled]){border-color:`,
 	`;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
@@ -53,7 +61,7 @@ var StyledInput = styled.input.withConfig({
 	` `,
 	` `,
 	``
-], resetButton, resetInput, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size }) => formElementHeightStyles($size), ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
+], resetButton, resetInput, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.gray, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight, ({ $size }) => formElementHeightStyles($size), ({ $size, theme }) => $size === "big" ? `font-size: ${theme.fontSizes.inputBig.lg};
 			line-height: ${theme.lineHeights.inputBig.lg};
 	` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
 			line-height: ${theme.lineHeights.inputSmall.lg};
@@ -68,11 +76,11 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-6fe5d34a-3"
+	componentId: "sc-a617b4b1-3"
 })([`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`, `;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.7);opacity:0;pointer-events:none;transition:all 0.3s ease;}`], ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-6fe5d34a-4"
+	componentId: "sc-a617b4b1-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -157,7 +165,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-6fe5d34a-5"
+	componentId: "sc-a617b4b1-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
@@ -199,7 +207,7 @@ function LocalInput({ ...props }, ref) {
 					ref
 				}),
 				props.$iconPosition === "right" && props.$icon && props.$icon,
-				props.type === "date" && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
+				(props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
 			]
 		})]
 	});

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
   "module": "./dist/index.js",
-  "types": "./dist/lib/index.d.ts",
+  "types": "./dist/src/lib/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/lib/index.d.ts",
+      "types": "./dist/src/lib/index.d.ts",
       "import": "./dist/index.js"
     }
   },

package/dist/src/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import("react").JSX.Element;
-export default App;

package/dist/src/main.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/src/toggle-theme.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-declare function ToggleTheme(): React.JSX.Element;
-export { ToggleTheme };