cherry-styled-components 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/input.js +19 -11
  2. package/package.json +10 -10
package/dist/input.js CHANGED
@@ -8,16 +8,16 @@ import styled, { css } from "styled-components";
8
8
  //#region src/lib/input.tsx
9
9
  var StyledInputWrapper = styled.span.withConfig({
10
10
  displayName: "input__StyledInputWrapper",
11
- componentId: "sc-6fe5d34a-0"
11
+ componentId: "sc-df1aa532-0"
12
12
  })([
13
13
  `display:inline-flex;flex-wrap:`,
14
14
  `;align-items:center;`,
15
15
  ` & .icon-calendar{position:absolute;top:50%;right:17px;left:initial;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;@supports (-moz-appearance:none){display:none;}}`,
16
16
  ``
17
- ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
17
+ ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $fullWidth }) => fullWidthStyles($fullWidth));
18
18
  var StyledLabel = styled.label.withConfig({
19
19
  displayName: "input__StyledLabel",
20
- componentId: "sc-6fe5d34a-1"
20
+ componentId: "sc-df1aa532-1"
21
21
  })([
22
22
  `display:inline-block;color:`,
23
23
  `;font-size:`,
@@ -26,7 +26,7 @@ var StyledLabel = styled.label.withConfig({
26
26
  ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
27
27
  var StyledInput = styled.input.withConfig({
28
28
  displayName: "input__StyledInput",
29
- componentId: "sc-6fe5d34a-2"
29
+ componentId: "sc-df1aa532-2"
30
30
  })([
31
31
  ``,
32
32
  `;`,
@@ -35,13 +35,21 @@ var StyledInput = styled.input.withConfig({
35
35
  `;background:`,
36
36
  `;border:solid 2px `,
37
37
  `;box-shadow:0 0 0 0px `,
38
- `;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:`,
38
+ `;transition:all 0.3s ease;word-break:keep-all;white-space:nowrap;display:inline-flex;&::-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:`,
39
39
  `;}&::-webkit-datetime-edit-month-field{&:focus{background:`,
40
40
  `;color:`,
41
41
  `;border-radius:4px;}}&::-webkit-datetime-edit-day-field{&:focus{background:`,
42
42
  `;color:`,
43
43
  `;border-radius:4px;}}&::-webkit-datetime-edit-year-field{&:focus{background:`,
44
44
  `;color:`,
45
+ `;border-radius:4px;}}&::-webkit-datetime-edit-hour-field{&:focus{background:`,
46
+ `;color:`,
47
+ `;border-radius:4px;}}&::-webkit-datetime-edit-minute-field{&:focus{background:`,
48
+ `;color:`,
49
+ `;border-radius:4px;}}&::-webkit-datetime-edit-second-field{&:focus{background:`,
50
+ `;color:`,
51
+ `;border-radius:4px;}}&::-webkit-datetime-edit-ampm-field{&:focus{background:`,
52
+ `;color:`,
45
53
  `;border-radius:4px;}}&::placeholder{color:`,
46
54
  `;}&:hover:not([disabled]){border-color:`,
47
55
  `;}&:focus:not([disabled]){box-shadow:0 0 0 4px `,
@@ -53,7 +61,7 @@ var StyledInput = styled.input.withConfig({
53
61
  ` `,
54
62
  ` `,
55
63
  ``
56
- ], 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};
64
+ ], 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};
57
65
  line-height: ${theme.lineHeights.inputBig.lg};
58
66
  ` : $size === "small" ? `font-size: ${theme.fontSizes.inputSmall.lg};
59
67
  line-height: ${theme.lineHeights.inputSmall.lg};
@@ -68,11 +76,11 @@ var StyledInput = styled.input.withConfig({
68
76
  `, ({ $fullWidth }) => fullWidthStyles($fullWidth));
69
77
  var StyledIconWrapper = styled.span.withConfig({
70
78
  displayName: "input__StyledIconWrapper",
71
- componentId: "sc-6fe5d34a-3"
79
+ componentId: "sc-df1aa532-3"
72
80
  })([`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);
73
81
  var StyledRadioCheckboxInput = styled.input.withConfig({
74
82
  displayName: "input__StyledRadioCheckboxInput",
75
- componentId: "sc-6fe5d34a-4"
83
+ componentId: "sc-df1aa532-4"
76
84
  })([
77
85
  ``,
78
86
  `;display:inline-block;background:`,
@@ -157,12 +165,12 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
157
165
  });
158
166
  var StyledCustomIconWrapper = styled.span.withConfig({
159
167
  displayName: "input__StyledCustomIconWrapper",
160
- componentId: "sc-6fe5d34a-5"
168
+ componentId: "sc-df1aa532-5"
161
169
  })([
162
170
  `position:relative;`,
163
171
  `;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,
164
172
  `;}`,
165
- ``
173
+ ` &:has(.icon-calendar) > input{padding-right:45px;@supports (-moz-appearance:none){padding-right:15px;}}`
166
174
  ], ({ $fullWidth }) => fullWidthStyles($fullWidth), ({ theme }) => theme.colors.primary, ({ $icon, $iconPosition }) => $icon && $iconPosition === "right" ? css([`& svg{right:16px;}& input{padding-right:50px;}`]) : css([`& svg{left:16px;}& svg ~ input{padding-left:50px;}`]));
167
175
  function LocalInput({ ...props }, ref) {
168
176
  if (props.type === "checkbox" || props.type === "radio") return /* @__PURE__ */ jsxs(StyledInputWrapper, {
@@ -199,7 +207,7 @@ function LocalInput({ ...props }, ref) {
199
207
  ref
200
208
  }),
201
209
  props.$iconPosition === "right" && props.$icon && props.$icon,
202
- props.type === "date" && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
210
+ (props.type === "date" || props.type === "datetime-local" || props.type === "month" || props.type === "week" || props.type === "time") && /* @__PURE__ */ jsx(IconCalendar, { className: "icon-calendar" })
203
211
  ]
204
212
  })]
205
213
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cherry-styled-components",
3
- "version": "0.1.15",
3
+ "version": "0.1.17",
4
4
  "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
5
5
  "private": false,
6
6
  "type": "module",
@@ -41,7 +41,7 @@
41
41
  "format": "prettier --write ."
42
42
  },
43
43
  "dependencies": {
44
- "lucide-react": "^1.7.0",
44
+ "lucide-react": "^1.8.0",
45
45
  "polished": "^4.3.1"
46
46
  },
47
47
  "peerDependencies": {
@@ -50,21 +50,21 @@
50
50
  "styled-components": "^6.0.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@swc/plugin-styled-components": "^12.7.0",
54
- "@types/node": "^25.5.0",
53
+ "@swc/plugin-styled-components": "^12.8.0",
54
+ "@types/node": "^25.6.0",
55
55
  "@types/react": "^19.2.14",
56
56
  "@types/react-dom": "^19.2.3",
57
57
  "@vitejs/plugin-react-swc": "^4.3.0",
58
58
  "eslint-plugin-react-hooks": "^7.0.1",
59
59
  "eslint-plugin-react-refresh": "^0.5.2",
60
- "next": "^16.2.1",
61
- "prettier": "^3.8.1",
62
- "react": "^19.2.4",
63
- "react-dom": "^19.2.4",
60
+ "next": "^16.2.3",
61
+ "prettier": "^3.8.2",
62
+ "react": "^19.2.5",
63
+ "react-dom": "^19.2.5",
64
64
  "rollup-plugin-preserve-directives": "^0.4.0",
65
- "styled-components": "^6.3.12",
65
+ "styled-components": "^6.4.0",
66
66
  "typescript": "^6.0.2",
67
- "vite": "^8.0.3",
67
+ "vite": "^8.0.8",
68
68
  "vite-plugin-dts": "^4.5.4"
69
69
  }
70
70
  }