@opensite/ui 1.7.2 → 1.7.3

package/dist/contact-dark.cjs

@@ -33,8 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 
 // components/blocks/contact/contact-dark.tsx
-var TextInput = inputs.TextInput;
-var TextArea = inputs.TextArea;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -1094,7 +1092,6 @@ function ContactDark({
   socialLinks,
   socialLinksSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -1105,10 +1102,11 @@ function ContactDark({
   infoPanelClassName,
   contactOptionsClassName,
   socialLinksClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -1165,7 +1163,14 @@ function ContactDark({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1231,103 +1236,140 @@ function ContactDark({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("grid gap-0 overflow-hidden lg:grid-cols-2", cardClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-8", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-            forms.Form,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
             {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-6", formClassName),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Card,
+          {
+            className: cn(
+              "grid gap-0 overflow-hidden lg:grid-cols-2",
+              cardClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-8", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: cn("space-y-6", formClassName),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          inputs.TextInput,
+                          {
+                            ...field,
+                            id: "first-name",
+                            placeholder: "John",
+                            error: meta.touched && !!meta.error,
+                            "aria-label": "First Name"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          inputs.TextInput,
+                          {
+                            ...field,
+                            id: "last-name",
+                            placeholder: "Doe",
+                            error: meta.touched && !!meta.error,
+                            "aria-label": "Last Name"
+                          }
+                        )
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email Address" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        inputs.TextInput,
+                        {
+                          ...field,
+                          id: "email",
+                          type: "email",
+                          placeholder: "john@example.com",
+                          error: meta.touched && !!meta.error,
+                          "aria-label": "Email Address"
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        inputs.TextArea,
+                        {
+                          ...field,
+                          id: "message",
+                          placeholder: "Tell us how we can help...",
+                          rows: 4,
+                          error: meta.touched && !!meta.error,
+                          "aria-label": "Message"
+                        }
+                      )
+                    ] }) }),
+                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
                       {
-                        ...field,
-                        id: "first-name",
-                        placeholder: "John",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "First Name"
+                        componentType: "button",
+                        type: "submit",
+                        className: cn("w-full", submitClassName),
+                        asButton: true,
+                        disabled: form.isSubmitting,
+                        children: [
+                          buttonIcon,
+                          buttonText
+                        ]
                       }
                     )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
+                    infoPanelClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: contactHeading })),
+                      contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: contactDescription })),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
+                    ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+                      "div",
                       {
-                        ...field,
-                        id: "last-name",
-                        placeholder: "Doe",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Last Name"
+                        className: cn(
+                          "mt-8 flex items-center gap-4",
+                          socialLinksClassName
+                        ),
+                        children: socialLinksContent
                       }
                     )
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email Address" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "email",
-                      type: "email",
-                      placeholder: "john@example.com",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Email Address"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextArea,
-                    {
-                      ...field,
-                      id: "message",
-                      placeholder: "Tell us how we can help...",
-                      rows: 4,
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Message"
-                    }
-                  )
-                ] }) }),
-                actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
-                  {
-                    componentType: "button",
-                    type: "submit",
-                    className: cn("w-full", submitClassName),
-                    asButton: true,
-                    disabled: form.isSubmitting,
-                    children: [
-                      buttonIcon,
-                      buttonText
-                    ]
-                  }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8", infoPanelClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: contactHeading })),
-              contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: contactDescription })),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex items-center gap-4", socialLinksClassName), children: socialLinksContent })
-          ] })
-        ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/contact-dark.css

@@ -0,0 +1,279 @@
+/* components/styles/forms.css */
+.text-input {
+  display: flex;
+  height: 2.25rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid var(--input);
+  background-color: transparent;
+  padding: 0.25rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.text-input::placeholder {
+  color: var(--muted-foreground);
+}
+.text-input:focus-visible {
+  outline: none;
+  ring: 1px;
+  ring-color: var(--ring);
+}
+.text-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.text-input--error {
+  border-color: rgb(239 68 68);
+  ring: 1px;
+  ring-color: rgb(239 68 68);
+}
+.textarea {
+  display: flex;
+  min-height: 5rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid var(--input);
+  background-color: transparent;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.textarea::placeholder {
+  color: var(--muted-foreground);
+}
+.textarea:focus-visible {
+  outline: none;
+  ring: 1px;
+  ring-color: var(--ring);
+}
+.textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.textarea--error {
+  border-color: rgb(239 68 68);
+  ring: 1px;
+  ring-color: rgb(239 68 68);
+}
+.select {
+  position: relative;
+  width: 100%;
+}
+.select-trigger {
+  display: flex;
+  height: 2.25rem;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  border: 1px solid var(--input);
+  background-color: transparent;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  cursor: pointer;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.select-trigger:hover {
+  background-color: var(--accent);
+}
+.select-trigger:focus-visible {
+  outline: none;
+  ring: 1px;
+  ring-color: var(--ring);
+}
+.select-trigger[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.select--error .select-trigger {
+  border-color: rgb(239 68 68);
+  ring: 1px;
+  ring-color: rgb(239 68 68);
+}
+.select-value {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.select-placeholder {
+  color: var(--muted-foreground);
+}
+.select-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: 0.5rem;
+}
+.select-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 0.125rem;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0;
+  transition: opacity 150ms;
+}
+.select-clear:hover {
+  opacity: 0.7;
+}
+.select-arrow {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  line-height: 1;
+}
+.select-loading {
+  font-size: 0.75rem;
+}
+.select-dropdown {
+  position: absolute;
+  z-index: 50;
+  top: 100%;
+  margin-top: 0.25rem;
+  min-width: 100%;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border: 1px solid var(--border);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+.select-search {
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+.select-search-input {
+  width: 100%;
+  border: 1px solid var(--input);
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  background-color: transparent;
+  outline: none;
+}
+.select-search-input:focus {
+  ring: 1px;
+  ring-color: var(--ring);
+}
+.select-options {
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+.select-option {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.5rem 0.375rem 2rem;
+  font-size: 0.875rem;
+  outline: none;
+  transition-property: color, background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.select-option:hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.select-option--focused {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.select-option--selected {
+  font-weight: 500;
+  background-color: var(--accent);
+}
+.select-option--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.select-no-options {
+  padding: 0.5rem 0.75rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+.select-optgroup {
+  padding: 0.25rem 0;
+}
+.select-optgroup-label {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--muted-foreground);
+}
+.field-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--foreground);
+}
+.field-required {
+  color: rgb(239 68 68);
+  margin-left: 0.125rem;
+}
+.field-description {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+  margin-bottom: 0.5rem;
+}
+.field-input {
+}
+.field-error {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgb(239 68 68);
+  margin-top: 0.5rem;
+}
+@media (min-width: 768px) {
+  .text-input,
+  .textarea,
+  .select-trigger {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}

package/dist/contact-dark.d.cts

@@ -223,6 +223,6 @@ interface ContactDarkProps {
  * />
  * ```
  */
-declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
 
 export { ContactDark, type ContactDarkProps };

package/dist/contact-dark.d.ts

@@ -223,6 +223,6 @@ interface ContactDarkProps {
  * />
  * ```
  */
-declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
+declare function ContactDark({ heading, description, contactHeading, contactDescription, buttonText, buttonIcon, actions, actionsSlot, contactOptions, contactOptionsSlot, socialLinks, socialLinksSlot, className, headerClassName, headingClassName, descriptionClassName, cardClassName, formPanelClassName, formClassName, submitClassName, infoPanelClassName, contactOptionsClassName, socialLinksClassName, background, spacing, containerClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactDarkProps): React.JSX.Element;
 
 export { ContactDark, type ContactDarkProps };