@digitalpromise/design 4.1.0 → 4.3.0
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.
- package/dist/forms.cjs +1 -1
- package/dist/forms.d.ts +64 -0
- package/dist/forms.js +1 -1
- package/dist/{icon-CkLgh924.js → icon-BR2zaZo5.js} +695 -274
- package/dist/icon-DjGt_3uE.cjs +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +60 -0
- package/dist/index.js +2 -2
- package/dist/theme.d.ts +1 -0
- package/package.json +10 -10
- package/dist/icon-zoFkg03T.cjs +0 -1
package/dist/forms.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),g=require("./icon-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),g=require("./icon-DjGt_3uE.cjs"),I=({error:a,className:r,label:t,...l})=>{const n=l.id||l.name;return e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("input",{type:"checkbox",className:`transition-colors appearance-none cursor-pointer bg-neutral-1 border-2 border-gray-5 rounded-sm w-5 h-5 grid place-content-center hover:bg-gray-1 hover:border-neutral-5 before:hidden before:content-['\\2713'] before:text-neutral-1 before:font-bold checked:bg-blue-3 checked:border-blue-4 checked:hover:bg-blue-4 checked:hover:border-blue-5 checked:before:inline-block ${r??""}`.trim(),...l,id:n}),e.jsx("label",{"data-error":a||null,htmlFor:n,className:"data-error:text-red-4",children:t})]})},p=({children:a,error:r,instructions:t,className:l,onChange:n,remover:d,...i})=>{const s=u.useRef(null),[v,m]=u.useState(!1),[b,j]=u.useState([]),h=b.length>0,w=o=>{o.preventDefault(),m(!1),s.current&&o.dataTransfer.files.length>0&&(s.current.files=o.dataTransfer.files,o.dataTransfer.clearData(),s.current.dispatchEvent(new Event("change",{bubbles:!0})))},y=o=>{n&&n(o);const k=Array.from(o.currentTarget.files??[]).map(c=>{if(c.type.includes("image")){const F=URL.createObjectURL(c);return e.jsx("img",{alt:"",src:F,className:"max-h-full max-w-full object-contain"},c.name)}else return e.jsx("p",{children:c.name},c.name)});j(k)},N=()=>{s.current&&(s.current.value="",s.current.files=null,s.current.dispatchEvent(new Event("change",{bubbles:!0})))},x={onClick:o=>{o.preventDefault(),N()}},D=d?u.cloneElement(d,x):e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",...x,children:"Remove Files"}),f=o=>{o.preventDefault(),m(!0)};return e.jsxs("div",{children:[e.jsxs("label",{"data-showing-preview":h||null,"data-is-dragging":v||null,onDragLeave:()=>m(!1),onDragEnter:f,onDragOver:f,onDrop:w,htmlFor:i.id,"data-error":r||null,className:`flex items-center justify-center rounded-lg border border-dashed border-blue-3 px-7 py-8 font-medium text-blue-3 data-showing-preview:w-max data-showing-preview:border-gray-3 data-showing-preview:text-gray-3 data-is-dragging:border-blue-5 data-is-dragging:bg-blue-1 data-showing-preview:py-5 data-is-dragging:text-blue-4 ${l??""} cursor-default`.trim(),children:[e.jsx("input",{...i,ref:s,onChange:y,className:"sr-only",type:"file"}),h?e.jsxs(e.Fragment,{children:[e.jsx("aside",{className:"grid grid-cols-2 grid-rows-2 w-11 h-11",children:b}),D]}):a??e.jsxs("p",{className:"pointer-events-none select-none",children:[e.jsx(g.Icon,{name:"Upload"})," Click or drop to upload"]})]}),t&&e.jsx("p",{className:"font-light leading-6",children:t})]})},T=a=>{const r=e.jsx(g.Button,{type:"button",variant:"tertiary",state:"decolor",children:"Remove Image"});return e.jsx(p,{...a,multiple:!1,remover:r,accept:"image/png image/svg+xml"})},q=({noValidate:a,className:r,...t})=>e.jsx("form",{className:`container flex flex-col gap-7 max-w-[45rem] ${r??""}`.trim(),...t,noValidate:a??!0}),C=({className:a,label:r,required:t,error:l,...n})=>e.jsx("label",{"data-required":t||null,"data-error":l||null,...n,className:`text-base font-medium leading-5 data-error:text-red-4 data-required:after:content-['*'] data-required:after:text-red-4 data-required:after:ml-1 ${a??""}`.trim(),children:r}),S=({Input:a,inputProps:r,errorMessage:t,label:l,labelClassname:n})=>{const d=!!t,i=r?.id||r?.name;return e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(C,{label:l,className:n,htmlFor:i,required:r?.required,error:d}),e.jsx(a,{error:d,...r,id:i}),t&&e.jsx("p",{className:"text-red-4",children:t})]})},E=({options:a,error:r,className:t,...l})=>e.jsx("select",{...l,"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${t??""}`.trim(),children:a.map(n=>e.jsx("option",{className:"hover:bg-gray-3",value:n.value,children:n.label},[l.name,n.label].join()))}),R=({error:a,className:r,...t})=>e.jsx("input",{"data-error":a||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${r??""}`.trim(),...t,type:"text"}),$=({className:a,error:r,...t})=>e.jsx("textarea",{"data-error":r||null,className:`border border-gray-5 rounded-sm text-base leading-5 px-[0.94rem] py-[0.69rem] focus-within:border-transparent focus-within:outline-blue-4 data-error:border-red-4 data-error:outline-red-4 ${a??""}`.trim(),...t});exports.Checkbox=I;exports.Dropzone=p;exports.Form=q;exports.FormField=S;exports.Select=E;exports.SingleImageDropzone=T;exports.TextInput=R;exports.Textarea=$;
|
package/dist/forms.d.ts
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from 'react';
|
|
2
|
+
import { JSX } from 'react/jsx-runtime';
|
|
3
|
+
import { ReactElement } from 'react';
|
|
4
|
+
|
|
5
|
+
export declare const Checkbox: ({ error, className, label, ...props }: CheckboxProps) => JSX.Element;
|
|
6
|
+
|
|
7
|
+
declare type CheckboxProps = InputPropsWithoutType & FormInputProps & {
|
|
8
|
+
label: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export declare const Dropzone: ({ children, error, instructions, className, onChange: userOnChange, remover, ...props }: DropzoneProps) => JSX.Element;
|
|
12
|
+
|
|
13
|
+
declare interface DropzoneProps extends Omit<ComponentPropsWithRef<"input">, "type">, FormInputProps {
|
|
14
|
+
instructions?: string;
|
|
15
|
+
remover?: ReactElement;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export declare const Form: ({ noValidate, className, ...props }: FormProps) => JSX.Element;
|
|
19
|
+
|
|
20
|
+
export declare const FormField: <P extends FormInputProps>({ Input, inputProps, errorMessage, label, labelClassname, }: FormFieldProps<P>) => JSX.Element;
|
|
21
|
+
|
|
22
|
+
declare interface FormFieldProps<C extends FormInputProps> {
|
|
23
|
+
Input: React.ComponentType<C>;
|
|
24
|
+
inputProps: C;
|
|
25
|
+
errorMessage?: string;
|
|
26
|
+
label: string;
|
|
27
|
+
labelClassname?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
declare interface FormInputProps {
|
|
31
|
+
id?: string;
|
|
32
|
+
name?: string;
|
|
33
|
+
error?: boolean;
|
|
34
|
+
required?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
declare type FormProps = ComponentPropsWithRef<"form">;
|
|
38
|
+
|
|
39
|
+
declare type InputPropsWithoutType = Omit<ComponentPropsWithRef<"input">, "type">;
|
|
40
|
+
|
|
41
|
+
export declare const Select: ({ options, error, className, ...props }: SelectProps) => JSX.Element;
|
|
42
|
+
|
|
43
|
+
declare interface SelectProps extends ComponentPropsWithRef<"select">, FormInputProps {
|
|
44
|
+
options: {
|
|
45
|
+
value: string;
|
|
46
|
+
label: string;
|
|
47
|
+
}[];
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export declare const SingleImageDropzone: (props: SingleImageDropzoneProps) => JSX.Element;
|
|
51
|
+
|
|
52
|
+
declare type SingleImageDropzoneProps = Omit<DropzoneProps, "multiple" | "accept" | "children">;
|
|
53
|
+
|
|
54
|
+
export declare const Textarea: ({ className, error, ...props }: TextareaProps) => JSX.Element;
|
|
55
|
+
|
|
56
|
+
declare interface TextareaProps extends ComponentPropsWithRef<"textarea">, FormInputProps {
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare const TextInput: ({ error, className, ...props }: TextInputProps) => JSX.Element;
|
|
60
|
+
|
|
61
|
+
declare interface TextInputProps extends ComponentPropsWithRef<"input">, FormInputProps {
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export { }
|
package/dist/forms.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as i, jsx as e, Fragment as C } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as E, useState as p, cloneElement as T } from "react";
|
|
3
|
-
import { B as v, I as $ } from "./icon-
|
|
3
|
+
import { B as v, I as $ } from "./icon-BR2zaZo5.js";
|
|
4
4
|
const S = ({
|
|
5
5
|
error: a,
|
|
6
6
|
className: r,
|