@atom-learning/components 5.5.0-beta.1 → 5.5.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/CHANGELOG.md +212 -0
- package/dist/components/action-icon/ActionIcon.d.ts +1 -1
- package/dist/components/banner/Banner.d.ts +2 -2
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +469 -102
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +3 -3
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +481 -114
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +3 -3
- package/dist/components/button/Button.d.ts +1 -1
- package/dist/components/checkbox-field/CheckboxField.js +1 -1
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.d.ts +90 -90
- package/dist/components/checkbox-tree/CheckboxTree.d.ts +344 -344
- package/dist/components/create-password-field/CreatePasswordField.d.ts +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +98 -110
- package/dist/components/date-field/DateField.d.ts +1 -1
- package/dist/components/date-field/DateField.js +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +2 -2
- package/dist/components/dismissible/index.d.ts +2 -2
- package/dist/components/dismissible-group/index.d.ts +3 -3
- package/dist/components/field-wrapper/FieldWrapper.d.ts +1 -3
- package/dist/components/field-wrapper/FieldWrapper.js +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/form/Form.d.ts +2 -3
- package/dist/components/form/Form.js +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/index.d.ts +0 -1
- package/dist/components/heading/Heading.d.ts +0 -1
- package/dist/components/heading/Heading.js +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/input/Input.d.ts +1 -3
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-field/InputField.d.ts +1 -1
- package/dist/components/input-field/InputField.js +1 -1
- package/dist/components/input-field/InputField.js.map +1 -1
- package/dist/components/keyboard-shortcut/index.d.ts +2 -2
- package/dist/components/label/Label.d.ts +1 -2
- package/dist/components/label/Label.js +1 -1
- package/dist/components/label/Label.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +162 -162
- package/dist/components/number-input/NumberInput.d.ts +1 -2
- package/dist/components/number-input/NumberInput.js +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +1 -756
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/number-input-field/NumberInputField.d.ts +1 -1
- package/dist/components/number-input-field/NumberInputField.js +1 -1
- package/dist/components/number-input-field/NumberInputField.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.d.ts +3 -3
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.d.ts +3 -3
- package/dist/components/password-field/PasswordField.d.ts +1 -1
- package/dist/components/password-field/PasswordField.js +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/search-field/SearchField.d.ts +1 -1
- package/dist/components/search-field/SearchField.js +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/search-input/SearchInput.js +1 -1
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/section-message/SectionMessage.d.ts +1 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts +9 -9
- package/dist/components/select/Select.d.ts +0 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select-field/SelectField.d.ts +1 -1
- package/dist/components/select-field/SelectField.js +1 -1
- package/dist/components/select-field/SelectField.js.map +1 -1
- package/dist/components/side-bar/SideBarComponents.d.ts +1 -1
- package/dist/components/sortable/Handle.d.ts +3 -3
- package/dist/components/sortable/index.d.ts +3 -3
- package/dist/components/stepper/StepperStepLabel.d.ts +1 -1
- package/dist/components/textarea/Textarea.d.ts +0 -1
- package/dist/components/textarea/Textarea.js +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea-field/TextareaField.d.ts +1 -1
- package/dist/components/textarea-field/TextareaField.js +1 -1
- package/dist/components/textarea-field/TextareaField.js.map +1 -1
- package/dist/components/tile/Tile.d.ts +0 -1
- package/dist/components/tile/Tile.js +1 -1
- package/dist/components/tile/Tile.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.d.ts +1 -2
- package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +1 -2
- package/dist/components/toggle-group/index.d.ts +2 -2
- package/dist/components/top-bar/TopBar.d.ts +4 -5
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/components/tree/Tree.d.ts +243 -243
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/dist/components/form/useFormCustomContext.d.ts +0 -7
- package/dist/components/form/useFormCustomContext.js +0 -2
- package/dist/components/form/useFormCustomContext.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare const Sortable: {
|
|
2
2
|
Root: {
|
|
3
|
-
({ sortableIds, onSortChange, children }:
|
|
4
|
-
sortableIds:
|
|
3
|
+
({ sortableIds, onSortChange, children }: import("react").PropsWithChildren<{
|
|
4
|
+
sortableIds: import("react").ReactText[];
|
|
5
5
|
onSortChange: (onSortChangeData: {
|
|
6
6
|
order: import("@dnd-kit/core").UniqueIdentifier[];
|
|
7
7
|
oldIndex: number;
|
|
@@ -11,7 +11,7 @@ export declare const Sortable: {
|
|
|
11
11
|
displayName: string;
|
|
12
12
|
};
|
|
13
13
|
Item: {
|
|
14
|
-
({ id, asChild, css, isDragHandle, disabled, ...rest }:
|
|
14
|
+
({ id, asChild, css, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
|
|
15
15
|
displayName: string;
|
|
16
16
|
};
|
|
17
17
|
Handle: {
|
|
@@ -371,7 +371,7 @@ export declare const StepperStepLabel: import("@atom-learning/stitches-react/typ
|
|
|
371
371
|
};
|
|
372
372
|
}> | undefined;
|
|
373
373
|
}, "as"> & {
|
|
374
|
-
as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" |
|
|
374
|
+
as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
|
|
375
375
|
}>, {
|
|
376
376
|
direction?: "horizontal" | "vertical" | undefined;
|
|
377
377
|
status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as
|
|
1
|
+
import*as e from"react";import{styled as t}from"../../stitches.js";const i=t("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",border:"1px solid $grey800",borderRadius:"$0",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",transition:"all 75ms ease-out",width:"100%","&:focus":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{state:{error:{border:"1px solid $danger"}}}}),o=e.forwardRef((r,a)=>e.createElement(i,{...r,ref:a}));o.displayName="Textarea";export{o as Textarea};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n boxShadow: 'none', // remove iOS default styling\n fontSize: '$md', // prevent iOS zooming on focus\n appearance: 'none',\n boxSizing: 'border-box',\n color: '$grey1000',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n boxShadow: 'none', // remove iOS default styling\n fontSize: '$md', // prevent iOS zooming on focus\n appearance: 'none',\n border: '1px solid $grey800',\n borderRadius: '$0',\n boxSizing: 'border-box',\n color: '$grey1000',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n minHeight: '$7',\n px: '$3',\n py: 'calc($2 + $1)', // offset the line height of the text\n resize: 'vertical',\n transition: 'all 75ms ease-out',\n width: '100%',\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n color: '$grey800',\n cursor: 'not-allowed'\n },\n '&::placeholder': {\n color: '$grey700',\n opacity: 1\n },\n variants: {\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CAAE,EAE1EH,EAAS,YAAc"}
|
|
@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper';
|
|
|
3
3
|
import { TextareaProps } from '../../components/textarea';
|
|
4
4
|
type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
|
|
5
5
|
export declare const TextareaField: {
|
|
6
|
-
({ css, hideLabel, label, name, validation, prompt, description,
|
|
6
|
+
({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: TextareaFieldProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
9
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as i from"react";import{useFormContext as f}from"react-hook-form";import{FieldWrapper as u}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as F}from"../form/useFieldError.js";import{Textarea as x}from"../textarea/Textarea.js";const a=({css:m=void 0,hideLabel:l,label:p,name:e,validation:r,prompt:d,description:s,...n})=>{const{register:o}=f(),{error:t}=F(e),c=r?o(r):o;return i.createElement(u,{css:m,description:s,error:t,fieldId:e,hideLabel:l,label:p,prompt:d,required:Boolean(r==null?void 0:r.required)},i.createElement(x,{id:e,name:e,ref:c,...t&&{state:"error"},...n}))};a.displayName="TextareaField";export{a as TextareaField};
|
|
2
2
|
//# sourceMappingURL=TextareaField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError
|
|
1
|
+
{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n css = undefined,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n ...remainingProps\n}: TextareaFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <Textarea\n id={name}\n name={name}\n ref={ref}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"4TAYO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAE9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKd,EACL,YAAaM,EACb,MAAOI,EACP,QAASP,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,YAAAA,EAAY,QAAQ,CAEtCS,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAR,EAAc,YAAc"}
|
|
@@ -3,7 +3,6 @@ import { TcolorScheme } from '../../experiments/color-scheme';
|
|
|
3
3
|
export declare const StyledTile: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
|
|
4
4
|
borderRadius?: "sm" | "md" | "lg" | undefined;
|
|
5
5
|
border?: boolean | "true" | undefined;
|
|
6
|
-
diffused?: boolean | "true" | undefined;
|
|
7
6
|
}, {
|
|
8
7
|
sm: string;
|
|
9
8
|
md: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"react";import{ColorScheme as t}from"../../experiments/color-scheme/ColorScheme.js";import{styled as s}from"../../stitches.js";const r=s("div",{all:"unset",boxSizing:"border-box",display:"flex",flexDirection:"column",position:"relative",border:"1px solid",bg:"$base1",color:"$foreground",borderColor:"transparent",variants:{borderRadius:{sm:{borderRadius:"$0"},md:{borderRadius:"$1"},lg:{borderRadius:"$3"}},border:{true:{borderColor:"$base3"}}}}),o=e.forwardRef(({children:i,colorScheme:l={},...a},d)=>e.createElement(t,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...l},e.createElement(r,{ref:d,...a},i)));o.displayName="Tile";export{r as StyledTile,o as Tile};
|
|
2
2
|
//# sourceMappingURL=Tile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n all: 'unset', // important for buttons etc\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative', // for pseudo-elements\n border: '1px solid',\n bg: '$base1',\n color: '$foreground',\n borderColor: 'transparent',\n variants: {\n borderRadius: {\n sm: { borderRadius: '$0' },\n md: { borderRadius: '$1' },\n lg: { borderRadius: '$3' }\n },\n border: {\n true: { borderColor: '$base3' }\n }
|
|
1
|
+
{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n all: 'unset', // important for buttons etc\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative', // for pseudo-elements\n border: '1px solid',\n bg: '$base1',\n color: '$foreground',\n borderColor: 'transparent',\n variants: {\n borderRadius: {\n sm: { borderRadius: '$0' },\n md: { borderRadius: '$1' },\n lg: { borderRadius: '$3' }\n },\n border: {\n true: { borderColor: '$base3' }\n }\n }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n React.forwardRef(({ children, colorScheme = {}, ...rest }, ref) => (\n <ColorScheme\n asChild\n base=\"grey1\"\n accent=\"primary2\"\n interactive=\"loContrast\"\n {...colorScheme}\n >\n <StyledTile ref={ref} {...rest}>\n {children}\n </StyledTile>\n </ColorScheme>\n ))\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,MAAOC,CAAK,EAAGC,IACzDJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAA,CAAW,IAAKO,EAAM,GAAGD,CAAAA,EACvBF,CACH,CACF,CACD,EAEHF,EAAK,YAAc"}
|
|
@@ -2,10 +2,9 @@ import React from 'react';
|
|
|
2
2
|
import { NavigatorActions } from '../../types';
|
|
3
3
|
declare const StyledTileInteractive: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "border" | "borderRadius" | "css"
|
|
5
|
+
}, "border" | "borderRadius" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
6
6
|
borderRadius?: "sm" | "md" | "lg" | undefined;
|
|
7
7
|
border?: boolean | "true" | undefined;
|
|
8
|
-
diffused?: boolean | "true" | undefined;
|
|
9
8
|
}, {
|
|
10
9
|
sm: string;
|
|
11
10
|
md: string;
|
|
@@ -2,10 +2,9 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const StyledTileToggleGroupItem: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "border" | "borderRadius" | "css"
|
|
5
|
+
}, "border" | "borderRadius" | "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
6
6
|
borderRadius?: "sm" | "md" | "lg" | undefined;
|
|
7
7
|
border?: boolean | "true" | undefined;
|
|
8
|
-
diffused?: boolean | "true" | undefined;
|
|
9
8
|
}, {
|
|
10
9
|
sm: string;
|
|
11
10
|
md: string;
|
|
@@ -1470,7 +1470,7 @@ export declare const ToggleGroup: {
|
|
|
1470
1470
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1471
1471
|
};
|
|
1472
1472
|
}> | undefined;
|
|
1473
|
-
}, "gap" | "wrap"> & ((
|
|
1473
|
+
}, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
1474
1474
|
disableDeselect?: boolean;
|
|
1475
1475
|
}, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
1476
1476
|
isFullWidth?: boolean | "true" | undefined;
|
|
@@ -2215,5 +2215,5 @@ export declare const ToggleGroup: {
|
|
|
2215
2215
|
})) & {
|
|
2216
2216
|
orientation?: "horizontal" | "vertical";
|
|
2217
2217
|
isFullWidth?: boolean;
|
|
2218
|
-
}
|
|
2218
|
+
}>;
|
|
2219
2219
|
};
|
|
@@ -3,7 +3,6 @@ import { CSS } from '../../stitches';
|
|
|
3
3
|
declare const StyledRoot: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
|
|
4
4
|
hasScrolled?: boolean | "true" | undefined;
|
|
5
5
|
size?: "md" | "lg" | undefined;
|
|
6
|
-
diffused?: boolean | "true" | undefined;
|
|
7
6
|
appearance?: "standard" | "rounded" | undefined;
|
|
8
7
|
}, {
|
|
9
8
|
sm: string;
|
|
@@ -375,7 +374,7 @@ type TopBarProps = StyledRootProps & {
|
|
|
375
374
|
className?: string;
|
|
376
375
|
};
|
|
377
376
|
export declare const TopBar: {
|
|
378
|
-
({ size,
|
|
377
|
+
({ size, className, appearance, ...props }: React.PropsWithChildren<TopBarProps>): React.JSX.Element;
|
|
379
378
|
displayName: string;
|
|
380
379
|
} & {
|
|
381
380
|
Brand: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"a", {}, {
|
|
@@ -1484,7 +1483,7 @@ export declare const TopBar: {
|
|
|
1484
1483
|
ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
1485
1484
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
1486
1485
|
}, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
1487
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1486
|
+
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1488
1487
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
1489
1488
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
1490
1489
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1853,8 +1852,8 @@ export declare const TopBar: {
|
|
|
1853
1852
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
1854
1853
|
};
|
|
1855
1854
|
}> | undefined;
|
|
1856
|
-
}, "appearance" | "size" | "theme" | "label" | "children" | "as" |
|
|
1857
|
-
theme?: "success" | "danger" | "warning" | "
|
|
1855
|
+
}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
1856
|
+
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
|
|
1858
1857
|
appearance?: "outline" | "solid" | "simple" | undefined;
|
|
1859
1858
|
size?: "xs" | "sm" | "md" | "lg" | undefined;
|
|
1860
1859
|
isRounded?: boolean | "true" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as o from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as p}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as g,TopBarBrandName as f}from"./TopBarBrand.js";const x=()=>o.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),B=r("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6"},lg:{height:"$7"}},appearance:{standard:{width:"100vw",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),$=r(p,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",className:a=c.light,appearance:i="standard",...d})=>{const{y:n}=s();return o.createElement(B,{className:a,hasScrolled:!!n,appearance:i,size:t},o.createElement($,{...d}))},b=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:f,ActionIcon:l,Divider:x});e.displayName="TopBar";export{b as TopBar};
|
|
2
2
|
//# sourceMappingURL=TopBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n bg: '$background',\n position: 'sticky',\n display: 'flex',\n alignItems: 'center',\n\n zIndex: 1,\n transition: 'box-shadow .2s ease-out',\n variants: {\n hasScrolled: {\n true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);' }\n },\n size: {\n md: { height: '$6' },\n lg: { height: '$7' }\n },\n
|
|
1
|
+
{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n bg: '$background',\n position: 'sticky',\n display: 'flex',\n alignItems: 'center',\n\n zIndex: 1,\n transition: 'box-shadow .2s ease-out',\n variants: {\n hasScrolled: {\n true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);' }\n },\n size: {\n md: { height: '$6' },\n lg: { height: '$7' }\n },\n appearance: {\n standard: {\n width: '100vw',\n top: '0',\n borderBottom: '1px solid $borderBottom'\n },\n rounded: {\n width: '100%',\n top: '$2',\n p: '$2',\n border: '1px solid #ffffff',\n borderRadius: '$round'\n }\n }\n }\n})\n\nconst Container = styled(Flex, {\n alignItems: 'center',\n height: '$4',\n mx: '$4',\n width: '100%',\n '@md': {\n mx: '$5'\n }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ntype TopBarProps = StyledRootProps & {\n css?: CSS\n className?: string\n}\n\nconst TopBarComponent = ({\n size = 'md',\n className = topBarColorSchemes['light'],\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <StyledRoot\n className={className}\n hasScrolled={!!scrollPositionY}\n appearance={appearance}\n size={size}\n >\n <Container {...props} />\n </StyledRoot>\n )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,EAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,yCAA0C,CAC/D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAAA,EAE/B,OACEb,EAAA,cAACE,EAAA,CACC,UAAWM,EACX,YAAa,CAAC,CAACI,EACf,WAAYF,EACZ,KAAMH,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGO,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOR,EAAiB,CACnD,MAAOS,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASnB,CACX,CAAC,EAEDO,EAAgB,YAAc"}
|