@twilio-paste/form
Advanced tools
Comparing version
@@ -0,1 +1,2 @@ | ||
"use client"; | ||
import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import*as React from"react";var Form=React.forwardRef(({element="FORM",maxWidth,children,...props},ref)=>React.createElement(Box,{as:"form",ref,element,maxWidth,display:"flex",flexDirection:"column",rowGap:"space80",...safelySpreadBoxProps(props)},children));Form.displayName="Form";import{Box as Box2,safelySpreadBoxProps as safelySpreadBoxProps2}from"@twilio-paste/box";import*as React2 from"react";var FormActions=React2.forwardRef(({children,element="FORM_ACTIONS",...props},ref)=>React2.createElement(Box2,{ref,element,...safelySpreadBoxProps2(props),display:"flex",flexDirection:"row",columnGap:"space40",marginTop:"space60"},children));FormActions.displayName="FormActions";import{Box as Box3,safelySpreadBoxProps as safelySpreadBoxProps3}from"@twilio-paste/box";import*as React3 from"react";var FormControl=React3.forwardRef(({children,element="FORM_CONTROL",...props},ref)=>React3.createElement(Box3,{ref,flexGrow:1,element,...safelySpreadBoxProps3(props)},children));FormControl.displayName="FormControl";import{Box as Box4,safelySpreadBoxProps as safelySpreadBoxProps4}from"@twilio-paste/box";import*as React4 from"react";var FormControlTwoColumn=React4.forwardRef(({children,element="FORM_CONTROL_TWO_COLUMN",...props},ref)=>React4.createElement(Box4,{display:"grid",gridTemplateColumns:"1fr 1fr",columnGap:"space50",ref,element,...safelySpreadBoxProps4(props)},children));FormControlTwoColumn.displayName="FormControlTwoColumn";import{Box as Box5,safelySpreadBoxProps as safelySpreadBoxProps5}from"@twilio-paste/box";import{useUID}from"@twilio-paste/uid-library";import*as React6 from"react";import*as React5 from"react";var FormSectionContext=React5.createContext({});var FormSection=React6.forwardRef(({children,element="FORM_SECTION",id:idProp,...props},ref)=>{let id=idProp||useUID();return React6.createElement(FormSectionContext.Provider,{value:{id}},React6.createElement(Box5,{as:"fieldset",border:"none",margin:"space0",padding:"space0",marginY:"space20",ref,element,display:"flex",flexDirection:"column",rowGap:"space80",_first:{marginTop:"space0"},_last:{marginBottom:"space0"},...safelySpreadBoxProps5(props),"aria-describedby":`${id}-section-description`,id},children))});FormSection.displayName="FormSection";import{Box as Box6,safelySpreadBoxProps as safelySpreadBoxProps6}from"@twilio-paste/box";import*as React7 from"react";var FormSectionDescription=React7.forwardRef(({children,element="FORM_SECTION_DESCRIPTION",...props},ref)=>{let{id:sectionId}=React7.useContext(FormSectionContext);return React7.createElement(Box6,{ref,...safelySpreadBoxProps6(props),element,color:"colorText",fontSize:"fontSize30",lineHeight:"lineHeight20",id:`${sectionId}-section-description`},children)});FormSectionDescription.displayName="FormSectionDescription";import{Box as Box7,safelySpreadBoxProps as safelySpreadBoxProps7}from"@twilio-paste/box";import{Heading}from"@twilio-paste/heading";import*as React8 from"react";var FormSectionHeading=React8.forwardRef(({children,element="FORM_SECTION_HEADING",variant="heading40",...props},ref)=>React8.createElement(Box7,{as:"legend",ref,...safelySpreadBoxProps7(props),element,padding:"space0"},React8.createElement(Heading,{as:"span",variant},children)));FormSectionHeading.displayName="FormSectionHeading";export{Form,FormActions,FormControl,FormControlTwoColumn,FormSection,FormSectionDescription,FormSectionHeading}; |
@@ -0,1 +1,2 @@ | ||
"use client"; | ||
"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Form:()=>Form,FormActions:()=>FormActions,FormControl:()=>FormControl,FormControlTwoColumn:()=>FormControlTwoColumn,FormSection:()=>FormSection,FormSectionDescription:()=>FormSectionDescription,FormSectionHeading:()=>FormSectionHeading});module.exports=__toCommonJS(src_exports);var import_box=require("@twilio-paste/box"),React=__toESM(require("react")),Form=React.forwardRef(({element="FORM",maxWidth,children,...props},ref)=>React.createElement(import_box.Box,{as:"form",ref,element,maxWidth,display:"flex",flexDirection:"column",rowGap:"space80",...(0,import_box.safelySpreadBoxProps)(props)},children));Form.displayName="Form";var import_box2=require("@twilio-paste/box"),React2=__toESM(require("react")),FormActions=React2.forwardRef(({children,element="FORM_ACTIONS",...props},ref)=>React2.createElement(import_box2.Box,{ref,element,...(0,import_box2.safelySpreadBoxProps)(props),display:"flex",flexDirection:"row",columnGap:"space40",marginTop:"space60"},children));FormActions.displayName="FormActions";var import_box3=require("@twilio-paste/box"),React3=__toESM(require("react")),FormControl=React3.forwardRef(({children,element="FORM_CONTROL",...props},ref)=>React3.createElement(import_box3.Box,{ref,flexGrow:1,element,...(0,import_box3.safelySpreadBoxProps)(props)},children));FormControl.displayName="FormControl";var import_box4=require("@twilio-paste/box"),React4=__toESM(require("react")),FormControlTwoColumn=React4.forwardRef(({children,element="FORM_CONTROL_TWO_COLUMN",...props},ref)=>React4.createElement(import_box4.Box,{display:"grid",gridTemplateColumns:"1fr 1fr",columnGap:"space50",ref,element,...(0,import_box4.safelySpreadBoxProps)(props)},children));FormControlTwoColumn.displayName="FormControlTwoColumn";var import_box5=require("@twilio-paste/box"),import_uid_library=require("@twilio-paste/uid-library"),React6=__toESM(require("react"));var React5=__toESM(require("react")),FormSectionContext=React5.createContext({});var FormSection=React6.forwardRef(({children,element="FORM_SECTION",id:idProp,...props},ref)=>{let id=idProp||(0,import_uid_library.useUID)();return React6.createElement(FormSectionContext.Provider,{value:{id}},React6.createElement(import_box5.Box,{as:"fieldset",border:"none",margin:"space0",padding:"space0",marginY:"space20",ref,element,display:"flex",flexDirection:"column",rowGap:"space80",_first:{marginTop:"space0"},_last:{marginBottom:"space0"},...(0,import_box5.safelySpreadBoxProps)(props),"aria-describedby":`${id}-section-description`,id},children))});FormSection.displayName="FormSection";var import_box6=require("@twilio-paste/box"),React7=__toESM(require("react"));var FormSectionDescription=React7.forwardRef(({children,element="FORM_SECTION_DESCRIPTION",...props},ref)=>{let{id:sectionId}=React7.useContext(FormSectionContext);return React7.createElement(import_box6.Box,{ref,...(0,import_box6.safelySpreadBoxProps)(props),element,color:"colorText",fontSize:"fontSize30",lineHeight:"lineHeight20",id:`${sectionId}-section-description`},children)});FormSectionDescription.displayName="FormSectionDescription";var import_box7=require("@twilio-paste/box"),import_heading=require("@twilio-paste/heading"),React8=__toESM(require("react")),FormSectionHeading=React8.forwardRef(({children,element="FORM_SECTION_HEADING",variant="heading40",...props},ref)=>React8.createElement(import_box7.Box,{as:"legend",ref,...(0,import_box7.safelySpreadBoxProps)(props),element,padding:"space0"},React8.createElement(import_heading.Heading,{as:"span",variant},children)));FormSectionHeading.displayName="FormSectionHeading"; |
{ | ||
"name": "@twilio-paste/form", | ||
"version": "12.0.0", | ||
"version": "12.0.1", | ||
"category": "layout", | ||
@@ -46,14 +46,14 @@ "status": "production", | ||
"devDependencies": { | ||
"@twilio-paste/animation-library": "^3.0.0", | ||
"@twilio-paste/box": "^11.0.0", | ||
"@twilio-paste/animation-library": "^3.0.1", | ||
"@twilio-paste/box": "^11.0.1", | ||
"@twilio-paste/color-contrast-utils": "^5.0.0", | ||
"@twilio-paste/customization": "^9.0.0", | ||
"@twilio-paste/customization": "^9.0.1", | ||
"@twilio-paste/design-tokens": "^10.3.0", | ||
"@twilio-paste/heading": "^12.0.0", | ||
"@twilio-paste/style-props": "^10.0.0", | ||
"@twilio-paste/styling-library": "^4.0.0", | ||
"@twilio-paste/text": "^11.0.0", | ||
"@twilio-paste/theme": "^12.0.0", | ||
"@twilio-paste/types": "^7.0.0", | ||
"@twilio-paste/uid-library": "^3.0.0", | ||
"@twilio-paste/heading": "^12.0.1", | ||
"@twilio-paste/style-props": "^10.0.1", | ||
"@twilio-paste/styling-library": "^4.0.1", | ||
"@twilio-paste/text": "^11.0.1", | ||
"@twilio-paste/theme": "^12.0.1", | ||
"@twilio-paste/types": "^7.0.1", | ||
"@twilio-paste/uid-library": "^3.0.1", | ||
"@types/react": "^19.0.8", | ||
@@ -60,0 +60,0 @@ "@types/react-dom": "^19.0.3", |
152541
0.02%479
0.42%