dune-react 0.0.42 → 0.0.43

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.
@@ -133,7 +133,7 @@ const CenteredForm = (props) => {
133
133
  onSubmit: handleSubmit,
134
134
  children: [
135
135
  formType === "advanced" ? renderAdvancedForm() : renderSimpleForm(),
136
- /* @__PURE__ */ jsx("div", { className: cn({ "text-center": isCenter }), children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
136
+ /* @__PURE__ */ jsx("div", { className: cn({ "text-center": isCenter }), children: /* @__PURE__ */ jsx(CompoundButton, { type: "submit", label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, icon: button.icon, disabled: submitting }) })
137
137
  ]
138
138
  }
139
139
  )
@@ -120,7 +120,7 @@ const ContactModal = (props) => {
120
120
  ] }),
121
121
  /* @__PURE__ */ jsxs("form", { className: "grid gap-6", onSubmit: handleSubmit, children: [
122
122
  formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
123
- /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
123
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(CompoundButton, { type: "submit", label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, icon: button.icon, disabled: submitting }) })
124
124
  ] })
125
125
  ] });
126
126
  if (modalType === "sheet-right" || modalType === "sheet-bottom") {
@@ -66,7 +66,7 @@ const FormWithMedia = (props) => {
66
66
  }
67
67
  )
68
68
  ] }),
69
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
69
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { type: "submit", label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, icon: button.icon, disabled: submitting }) })
70
70
  ] })
71
71
  ] });
72
72
  const mediaContent = /* @__PURE__ */ jsx("div", { children: mediaType === "map" ? /* @__PURE__ */ jsx("a", { href: "#map", className: "block", children: /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "size-full object-cover" }) }) : /* @__PURE__ */ jsx(CompoundMedia, { src: media.src, alt: media.alt, className: "size-full object-cover" }) });
@@ -127,7 +127,7 @@ const HeaderFormCards = (props) => {
127
127
  /* @__PURE__ */ jsxs("div", { className: "grid auto-cols-fr grid-cols-1 gap-x-12 gap-y-12 md:grid-cols-[1fr_1fr] md:gap-x-20 md:gap-y-16", children: [
128
128
  /* @__PURE__ */ jsxs("form", { className: "grid grid-cols-1 gap-6", onSubmit: handleSubmit, children: [
129
129
  formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
130
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
130
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { type: "submit", label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, icon: button.icon, disabled: submitting }) })
131
131
  ] }),
132
132
  /* @__PURE__ */ jsx("div", { className: "mb-auto grid gap-x-4 gap-y-10 py-2 sm:grid-cols-2", children: contacts.map((contact, index) => /* @__PURE__ */ jsxs("div", { children: [
133
133
  /* @__PURE__ */ jsx("div", { className: "mb-3 md:mb-4", children: iconMap[contact.icon] ?? iconMap.email }),
@@ -1,7 +1,6 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { useState } from "react";
4
- import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
5
4
  import { Input } from "../../../shadcn/input.js";
6
5
  import { Label } from "../../../shadcn/label.js";
7
6
  import { Textarea } from "../../../shadcn/textarea.js";
@@ -11,11 +10,25 @@ import { BiEnvelope, BiPhone, BiMap } from "../../../../node_modules/.pnpm/react
11
10
  import { cn } from "../../../../utils/css-utils.js";
12
11
  import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
13
12
  const SplitInfoForm = (props) => {
14
- const { tagline, heading, description, email, phone, address, button, styles } = {
13
+ const {
14
+ tagline,
15
+ heading,
16
+ description,
17
+ email,
18
+ phone,
19
+ address,
20
+ button,
21
+ styles
22
+ } = {
15
23
  ...SplitInfoFormDefaults,
16
24
  ...props
17
25
  };
18
- const { className: sectionClassName, style: sectionStyle, css, formType = "simple" } = styles ?? {};
26
+ const {
27
+ className: sectionClassName,
28
+ style: sectionStyle,
29
+ css,
30
+ formType = "simple"
31
+ } = styles ?? {};
19
32
  const { createSubmitHandler, submitting } = useContactForm();
20
33
  const [nameInput, setNameInput] = useState("");
21
34
  const [firstName, setFirstName] = useState("");
@@ -23,13 +36,12 @@ const SplitInfoForm = (props) => {
23
36
  const [emailInput, setEmailInput] = useState("");
24
37
  const [phoneInput, setPhoneInput] = useState("");
25
38
  const [messageInput, setMessageInput] = useState("");
26
- const [topic, setTopic] = useState("");
27
39
  const handleSubmit = createSubmitHandler(
28
40
  () => ({
29
41
  name: nameInput || `${firstName} ${lastName}`.trim() || "",
30
42
  email: emailInput || "",
31
43
  phone: phoneInput || "",
32
- message: [topic, messageInput].filter(Boolean).join("\n\n") || ""
44
+ message: messageInput || ""
33
45
  }),
34
46
  () => {
35
47
  setNameInput("");
@@ -38,21 +50,44 @@ const SplitInfoForm = (props) => {
38
50
  setEmailInput("");
39
51
  setPhoneInput("");
40
52
  setMessageInput("");
41
- setTopic("");
42
53
  }
43
54
  );
44
55
  const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
45
56
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
46
57
  /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Name" }),
47
- /* @__PURE__ */ jsx(Input, { type: "text", id: "name", value: nameInput, onChange: (e) => setNameInput(e.target.value) })
58
+ /* @__PURE__ */ jsx(
59
+ Input,
60
+ {
61
+ type: "text",
62
+ id: "name",
63
+ value: nameInput,
64
+ onChange: (e) => setNameInput(e.target.value)
65
+ }
66
+ )
48
67
  ] }),
49
68
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
50
69
  /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
51
- /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: emailInput, onChange: (e) => setEmailInput(e.target.value) })
70
+ /* @__PURE__ */ jsx(
71
+ Input,
72
+ {
73
+ type: "email",
74
+ id: "email",
75
+ value: emailInput,
76
+ onChange: (e) => setEmailInput(e.target.value)
77
+ }
78
+ )
52
79
  ] }),
53
80
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
54
81
  /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone" }),
55
- /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phoneInput, onChange: (e) => setPhoneInput(e.target.value) })
82
+ /* @__PURE__ */ jsx(
83
+ Input,
84
+ {
85
+ type: "tel",
86
+ id: "phone",
87
+ value: phoneInput,
88
+ onChange: (e) => setPhoneInput(e.target.value)
89
+ }
90
+ )
56
91
  ] }),
57
92
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
58
93
  /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
@@ -72,30 +107,52 @@ const SplitInfoForm = (props) => {
72
107
  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-6", children: [
73
108
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
74
109
  /* @__PURE__ */ jsx(Label, { htmlFor: "firstName", className: "mb-2", children: "First name" }),
75
- /* @__PURE__ */ jsx(Input, { type: "text", id: "firstName", value: firstName, onChange: (e) => setFirstName(e.target.value) })
110
+ /* @__PURE__ */ jsx(
111
+ Input,
112
+ {
113
+ type: "text",
114
+ id: "firstName",
115
+ value: firstName,
116
+ onChange: (e) => setFirstName(e.target.value)
117
+ }
118
+ )
76
119
  ] }),
77
120
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
78
121
  /* @__PURE__ */ jsx(Label, { htmlFor: "lastName", className: "mb-2", children: "Last name" }),
79
- /* @__PURE__ */ jsx(Input, { type: "text", id: "lastName", value: lastName, onChange: (e) => setLastName(e.target.value) })
122
+ /* @__PURE__ */ jsx(
123
+ Input,
124
+ {
125
+ type: "text",
126
+ id: "lastName",
127
+ value: lastName,
128
+ onChange: (e) => setLastName(e.target.value)
129
+ }
130
+ )
80
131
  ] })
81
132
  ] }),
82
133
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
83
134
  /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-2", children: "Email" }),
84
- /* @__PURE__ */ jsx(Input, { type: "email", id: "email", value: emailInput, onChange: (e) => setEmailInput(e.target.value) })
135
+ /* @__PURE__ */ jsx(
136
+ Input,
137
+ {
138
+ type: "email",
139
+ id: "email",
140
+ value: emailInput,
141
+ onChange: (e) => setEmailInput(e.target.value)
142
+ }
143
+ )
85
144
  ] }),
86
145
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
87
146
  /* @__PURE__ */ jsx(Label, { htmlFor: "phone", className: "mb-2", children: "Phone number" }),
88
- /* @__PURE__ */ jsx(Input, { type: "tel", id: "phone", value: phoneInput, onChange: (e) => setPhoneInput(e.target.value) })
89
- ] }),
90
- /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
91
- /* @__PURE__ */ jsx(Label, { htmlFor: "topic", className: "mb-2", children: "Choose a topic" }),
92
- /* @__PURE__ */ jsxs(Select, { value: topic, onValueChange: setTopic, children: [
93
- /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select one..." }) }),
94
- /* @__PURE__ */ jsxs(SelectContent, { children: [
95
- /* @__PURE__ */ jsx(SelectItem, { value: "topic-1", children: "Topic one" }),
96
- /* @__PURE__ */ jsx(SelectItem, { value: "topic-2", children: "Topic two" })
97
- ] })
98
- ] })
147
+ /* @__PURE__ */ jsx(
148
+ Input,
149
+ {
150
+ type: "tel",
151
+ id: "phone",
152
+ value: phoneInput,
153
+ onChange: (e) => setPhoneInput(e.target.value)
154
+ }
155
+ )
99
156
  ] }),
100
157
  /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center", children: [
101
158
  /* @__PURE__ */ jsx(Label, { htmlFor: "message", className: "mb-2", children: "Message" }),
@@ -111,33 +168,58 @@ const SplitInfoForm = (props) => {
111
168
  )
112
169
  ] })
113
170
  ] });
114
- return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:grid-flow-col lg:gap-x-20 lg:gap-y-16", children: [
115
- /* @__PURE__ */ jsxs("div", { children: [
116
- /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
117
- /* @__PURE__ */ jsxs("div", { className: "mb-6 md:mb-8", children: [
118
- /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
119
- /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
120
- ] }),
121
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 py-2", children: [
122
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
123
- /* @__PURE__ */ jsx(BiEnvelope, { className: "size-6 flex-none" }),
124
- /* @__PURE__ */ jsx("p", { children: email })
125
- ] }),
126
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
127
- /* @__PURE__ */ jsx(BiPhone, { className: "size-6 flex-none" }),
128
- /* @__PURE__ */ jsx("p", { children: phone })
171
+ return /* @__PURE__ */ jsx(
172
+ SectionWrapper,
173
+ {
174
+ className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
175
+ style: sectionStyle,
176
+ css,
177
+ children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:grid-flow-col lg:gap-x-20 lg:gap-y-16", children: [
178
+ /* @__PURE__ */ jsxs("div", { children: [
179
+ /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
180
+ /* @__PURE__ */ jsxs("div", { className: "mb-6 md:mb-8", children: [
181
+ /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
182
+ /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
183
+ ] }),
184
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 py-2", children: [
185
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
186
+ /* @__PURE__ */ jsx(BiEnvelope, { className: "size-6 flex-none" }),
187
+ /* @__PURE__ */ jsx("p", { children: email })
188
+ ] }),
189
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
190
+ /* @__PURE__ */ jsx(BiPhone, { className: "size-6 flex-none" }),
191
+ /* @__PURE__ */ jsx("p", { children: phone })
192
+ ] }),
193
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
194
+ /* @__PURE__ */ jsx(BiMap, { className: "size-6 flex-none" }),
195
+ /* @__PURE__ */ jsx("p", { children: address })
196
+ ] })
197
+ ] })
129
198
  ] }),
130
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
131
- /* @__PURE__ */ jsx(BiMap, { className: "size-6 flex-none" }),
132
- /* @__PURE__ */ jsx("p", { children: address })
133
- ] })
134
- ] })
135
- ] }),
136
- /* @__PURE__ */ jsxs("form", { className: "grid grid-cols-1 grid-rows-[auto_auto] gap-6", onSubmit: handleSubmit, children: [
137
- formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
138
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
139
- ] })
140
- ] }) }) });
199
+ /* @__PURE__ */ jsxs(
200
+ "form",
201
+ {
202
+ className: "grid grid-cols-1 grid-rows-[auto_auto] gap-6",
203
+ onSubmit: handleSubmit,
204
+ children: [
205
+ formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
206
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
207
+ CompoundButton,
208
+ {
209
+ type: "submit",
210
+ label: submitting ? "Submitting..." : button.label,
211
+ variant: button.variant,
212
+ size: button.size,
213
+ icon: button.icon,
214
+ disabled: submitting
215
+ }
216
+ ) })
217
+ ]
218
+ }
219
+ )
220
+ ] }) })
221
+ }
222
+ );
141
223
  };
142
224
  const SplitInfoFormDefaults = {
143
225
  tagline: "Tagline",
@@ -145,7 +227,10 @@ const SplitInfoFormDefaults = {
145
227
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
146
228
  button: { label: "Submit" },
147
229
  buttons: [],
148
- media: { src: "https://picsum.photos/seed/contact-split/800/600", alt: "Placeholder" },
230
+ media: {
231
+ src: "https://picsum.photos/seed/contact-split/800/600",
232
+ alt: "Placeholder"
233
+ },
149
234
  email: "hello@example.com",
150
235
  phone: "+1 (555) 000-0000",
151
236
  address: "123 Sample St, Sydney NSW 2000 AU",
@@ -2,7 +2,6 @@ import { buttonsField, badgeField } from "./interactive.js";
2
2
  import { actionDefaults, actionField, buttonDefaults, buttonField, iconField, resolveActionUrl } from "./interactive.js";
3
3
  import { descriptionField, headingField, featuresField } from "./content.js";
4
4
  import { cardField, cardsField } from "./content.js";
5
- import { getPlaceholderMediaUrl, media16x9Placeholder, media1x1Placeholder, media9x16Placeholder, mediaField, mediasField } from "./media.js";
6
5
  const contentFields = {
7
6
  heading: headingField,
8
7
  description: descriptionField,
@@ -29,13 +28,7 @@ export {
29
28
  contentFieldsWithFeatures,
30
29
  descriptionField,
31
30
  featuresField,
32
- getPlaceholderMediaUrl,
33
31
  headingField,
34
32
  iconField,
35
- media16x9Placeholder,
36
- media1x1Placeholder,
37
- media9x16Placeholder,
38
- mediaField,
39
- mediasField,
40
33
  resolveActionUrl
41
34
  };
package/package.json CHANGED
@@ -1,26 +1,8 @@
1
1
  {
2
2
  "name": "dune-react",
3
- "version": "0.0.42",
3
+ "version": "0.0.43",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
- "scripts": {
7
- "dev": "vite",
8
- "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
9
- "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
10
- "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
11
- "build:sync": "pnpm build && cd ../magent && pnpm sync:dune && cd ../canvas-editor && pnpm sync:dune",
12
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
13
- "preview": "vite preview",
14
- "storybook": "storybook dev -p 8080",
15
- "preview-storybook": "npx http-server storybook-static",
16
- "build-storybook": "storybook build && cp -r skills storybook-static/skills",
17
- "deploy-storybook": "storybook-to-ghpages -- --existing-output-dir=storybook-static",
18
- "ondeploy": "pnpm build-storybook && pnpm deploy-storybook",
19
- "sync:downstream": "bash scripts/postpublish.sh",
20
- "screenshot": "tsx scripts/screenshot-components.ts",
21
- "screenshot:copy": "tsx scripts/screenshot-components.ts --skip-capture",
22
- "upload:previews": "tsx scripts/upload-previews-r2.ts"
23
- },
24
6
  "sideEffects": [
25
7
  "*.css"
26
8
  ],
@@ -424,5 +406,23 @@
424
406
  "react-icons": "5.6.0",
425
407
  "shadcn": "4.0.8",
426
408
  "zod": "4.3.6"
409
+ },
410
+ "scripts": {
411
+ "dev": "vite",
412
+ "gen:meta": "node --import ./scripts/register-mocks.mjs --import tsx/esm scripts/generate-component-meta.ts",
413
+ "build": "pnpm gen:meta && vite build && tsc --project tsconfig.build.json",
414
+ "watch": "vite build --watch & tsc --project tsconfig.build.json --watch --preserveWatchOutput &",
415
+ "build:sync": "pnpm build && cd ../magent && pnpm sync:dune && cd ../canvas-editor && pnpm sync:dune",
416
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
417
+ "preview": "vite preview",
418
+ "storybook": "storybook dev -p 8080",
419
+ "preview-storybook": "npx http-server storybook-static",
420
+ "build-storybook": "storybook build && cp -r skills storybook-static/skills",
421
+ "deploy-storybook": "storybook-to-ghpages -- --existing-output-dir=storybook-static",
422
+ "ondeploy": "pnpm build-storybook && pnpm deploy-storybook",
423
+ "sync:downstream": "bash scripts/postpublish.sh",
424
+ "screenshot": "tsx scripts/screenshot-components.ts",
425
+ "screenshot:copy": "tsx scripts/screenshot-components.ts --skip-capture",
426
+ "upload:previews": "tsx scripts/upload-previews-r2.ts"
427
427
  }
428
- }
428
+ }