@digitalpromise/design 4.1.0 → 4.2.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.
@@ -1,4 +1,4 @@
1
- import type { ButtonHTMLAttributes } from "react";
1
+ import { ButtonHTMLAttributes } from 'react';
2
2
  declare const variants: readonly ["primary", "secondary", "tertiary"];
3
3
  declare const states: readonly ["default", "danger", "inverse", "decolor"];
4
4
  type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -1,4 +1,4 @@
1
- import type { FormInputProps, InputPropsWithoutType } from "./types";
1
+ import { FormInputProps, InputPropsWithoutType } from './types';
2
2
  type CheckboxProps = InputPropsWithoutType & FormInputProps & {
3
3
  label: string;
4
4
  };
@@ -1,5 +1,5 @@
1
- import { ReactElement, type ComponentPropsWithRef } from "react";
2
- import type { FormInputProps } from "./types";
1
+ import { ReactElement, ComponentPropsWithRef } from 'react';
2
+ import { FormInputProps } from './types';
3
3
  interface DropzoneProps extends Omit<ComponentPropsWithRef<"input">, "type">, FormInputProps {
4
4
  instructions?: string;
5
5
  remover?: ReactElement;
@@ -1,4 +1,4 @@
1
- import { FormInputProps } from "./types";
1
+ import { FormInputProps } from './types';
2
2
  interface FormFieldProps<C extends FormInputProps> {
3
3
  Input: React.ComponentType<C>;
4
4
  inputProps: C;
@@ -1,4 +1,4 @@
1
- import { ComponentPropsWithRef } from "react";
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type FormProps = ComponentPropsWithRef<"form">;
3
3
  export declare const Form: ({ noValidate, className, ...props }: FormProps) => import("react/jsx-runtime").JSX.Element;
4
4
  export {};
@@ -1,9 +1,9 @@
1
- import { Checkbox } from "./checkbox";
2
- import { Dropzone, SingleImageDropzone } from "./dropzone";
3
- import { Form } from "./form";
4
- import { FormField } from "./form-field";
5
- import { Select } from "./select";
6
- import { TextInput } from "./text-input";
7
- import { Textarea } from "./textarea";
1
+ import { Checkbox } from './checkbox';
2
+ import { Dropzone, SingleImageDropzone } from './dropzone';
3
+ import { Form } from './form';
4
+ import { FormField } from './form-field';
5
+ import { Select } from './select';
6
+ import { TextInput } from './text-input';
7
+ import { Textarea } from './textarea';
8
8
  export { Checkbox, Dropzone, SingleImageDropzone, Form, FormField, Select, Textarea, TextInput, };
9
9
  //# sourceMappingURL=index.d.ts.map
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from "react";
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export interface LabelProps extends ComponentPropsWithRef<"label"> {
3
3
  label: string;
4
4
  error?: boolean;
@@ -1,4 +1,4 @@
1
- import type { FormInputProps } from "./types";
1
+ import { FormInputProps } from './types';
2
2
  type ListInputProps = FormInputProps & {
3
3
  onChange?: (list: string[]) => void;
4
4
  defaultValue?: string[];
@@ -1,5 +1,5 @@
1
- import { ComponentPropsWithRef } from "react";
2
- import { FormInputProps } from "./types";
1
+ import { ComponentPropsWithRef } from 'react';
2
+ import { FormInputProps } from './types';
3
3
  export interface SelectProps extends ComponentPropsWithRef<"select">, FormInputProps {
4
4
  options: {
5
5
  value: string;
@@ -1,5 +1,5 @@
1
- import type { ComponentPropsWithRef } from "react";
2
- import type { FormInputProps } from "./types";
1
+ import { ComponentPropsWithRef } from 'react';
2
+ import { FormInputProps } from './types';
3
3
  interface TextInputProps extends ComponentPropsWithRef<"input">, FormInputProps {
4
4
  }
5
5
  export declare const TextInput: ({ error, className, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
- import type { ComponentPropsWithRef } from "react";
2
- import type { FormInputProps } from "./types";
1
+ import { ComponentPropsWithRef } from 'react';
2
+ import { FormInputProps } from './types';
3
3
  interface TextareaProps extends ComponentPropsWithRef<"textarea">, FormInputProps {
4
4
  }
5
5
  export declare const Textarea: ({ className, error, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,4 @@
1
- import type { ComponentPropsWithRef } from "react";
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export interface FormInputProps {
3
3
  id?: string;
4
4
  name?: string;
@@ -1,5 +1,5 @@
1
- import { type DPGIconName } from "@digitalpromise/icons";
2
- import { type ComponentPropsWithRef } from "react";
1
+ import { DPGIconName } from '@digitalpromise/icons';
2
+ import { ComponentPropsWithRef } from 'react';
3
3
  interface IconProps extends ComponentPropsWithRef<"svg"> {
4
4
  name: DPGIconName;
5
5
  }
@@ -1,8 +1,8 @@
1
- import { default as Button } from "./button";
2
- import { default as Logo } from "./logo";
3
- import { default as Pagination } from "./pagination";
4
- import { default as Search } from "./search";
5
- import { default as Table } from "./table";
6
- export type { TableColumn } from "./table";
1
+ import { default as Button } from './button';
2
+ import { default as Logo } from './logo';
3
+ import { default as Pagination } from './pagination';
4
+ import { default as Search } from './search';
5
+ import { default as Table } from './table';
6
+ export type { TableColumn } from './table';
7
7
  export { Button, Logo, Pagination, Search, Table };
8
8
  //# sourceMappingURL=index.d.ts.map
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
2
  export interface TabProps {
3
3
  id: string;
4
4
  label: ReactNode;
@@ -1,4 +1,4 @@
1
- import type { ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
2
  export type TableColumn<TRow> = {
3
3
  key: string;
4
4
  header: string;
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-zoFkg03T.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=$;
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.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-CkLgh924.js";
3
+ import { B as v, I as $ } from "./icon-BR2zaZo5.js";
4
4
  const S = ({
5
5
  error: a,
6
6
  className: r,