@nycplanning/streetscape 0.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/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # Design System
2
+
3
+ This repo contains the primary implementation of Streetscape, NYC Planning Digital's design system. It contains code to run and publish a website with [Storybook](https://storybook.js.org/), as well as an NPM package.
4
+
5
+ ## Contributing to this repo
6
+
7
+ Once you've cloned the repo, `cd` into it and install dependencies by running `npm install`.
8
+
9
+ > Internally, we use [nvm](https://github.com/nvm-sh/nvm) to manage versions of Node.js. The `.nvmrc` file in this repo tells you which version of Node you should be using when working on it. If you are using `nvm`, you can have it switch automatically by running `nvm use` from the root of this repository.
10
+
11
+ Then, to run the Storybook site locally, simply run `npm run dev`.
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ interface StreetscapeProviderProps {
3
+ children: React.ReactNode;
4
+ }
5
+ export declare const StreetscapeProvider: ({ children }: StreetscapeProviderProps) => import("react/jsx-runtime").JSX.Element;
6
+ export {};
@@ -0,0 +1,2 @@
1
+ export { Button } from "@chakra-ui/react";
2
+ export type { ButtonProps } from "@chakra-ui/react";
@@ -0,0 +1 @@
1
+ export * from "./Button";
@@ -0,0 +1 @@
1
+ export * from "./Button";
@@ -0,0 +1,5 @@
1
+ import { theme } from "./theme";
2
+ import { StreetscapeProvider } from "./StreetscapeProvider";
3
+ export * from "@chakra-ui/layout";
4
+ export * from "./components";
5
+ export { theme, StreetscapeProvider };
package/dist/index.js ADDED
@@ -0,0 +1,190 @@
1
+ import { baseTheme as t, defineStyleConfig as o, ChakraBaseProvider as n } from "@chakra-ui/react";
2
+ import { Button as T } from "@chakra-ui/react";
3
+ import { jsx as s } from "react/jsx-runtime";
4
+ export * from "@chakra-ui/layout";
5
+ const a = {}, m = {}, i = {}, l = {
6
+ transparent: "transparent",
7
+ current: "currentColor",
8
+ white: "#FFFFFF",
9
+ gray: {
10
+ 50: "#F7FAFC",
11
+ 100: "#EDF2F7",
12
+ 200: "#E2E8F0",
13
+ 300: "#CBD5E0",
14
+ 400: "#A0AEC0",
15
+ 500: "#718096",
16
+ 600: "#4A5568",
17
+ 700: "#2D3748",
18
+ 800: "#1A202C"
19
+ },
20
+ teal: {
21
+ 50: "#E6FFFA",
22
+ 500: "#319795",
23
+ 600: "#2C7A7B",
24
+ 700: "#285E61"
25
+ }
26
+ }, c = {
27
+ sm: "0.875rem",
28
+ md: "1rem",
29
+ lg: "1.25rem",
30
+ xl: "1.5rem",
31
+ "2xl": "1.75rem",
32
+ "3xl": "2rem",
33
+ "4xl": "2.25rem"
34
+ }, p = {
35
+ bold: 700,
36
+ medium: 500,
37
+ regular: 400,
38
+ light: 300
39
+ }, g = {
40
+ heading: "Helvetica Neue, Arial, sans-serif",
41
+ body: "Helvetica Neue, Arial, sans-serif"
42
+ }, f = {}, x = {
43
+ regular: 1.5
44
+ }, d = {
45
+ none: "0",
46
+ base: "0.75rem"
47
+ }, y = {
48
+ base: "0px 4px 4px 0px rgba(0, 0, 0, 0.08) inset, 0px -4px 4px 0px rgba(0, 0, 0, 0.08) inset, 4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset, -4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset"
49
+ }, e = {
50
+ px: "1px",
51
+ 0.5: "0.125rem",
52
+ 1: "0.25rem",
53
+ 1.5: "0.375rem",
54
+ 2: "0.5rem",
55
+ 2.5: "0.625rem",
56
+ 3: "0.75rem",
57
+ 3.5: "0.875rem",
58
+ 4: "1rem",
59
+ 5: "1.25rem",
60
+ 6: "1.5rem",
61
+ 7: "1.75rem",
62
+ 8: "2rem",
63
+ 9: "2.25rem",
64
+ 10: "2.5rem",
65
+ 12: "3rem",
66
+ 14: "3.5rem",
67
+ 16: "4rem",
68
+ 20: "5rem",
69
+ 24: "6rem",
70
+ 28: "7rem",
71
+ 32: "8rem",
72
+ 36: "9rem",
73
+ 40: "10rem",
74
+ 44: "11rem",
75
+ 48: "12rem",
76
+ 52: "13rem",
77
+ 56: "14rem",
78
+ 60: "15rem",
79
+ 64: "16rem",
80
+ 72: "18rem",
81
+ 80: "20rem",
82
+ 96: "24rem"
83
+ }, b = {
84
+ ...e,
85
+ max: "max-content",
86
+ min: "min-content",
87
+ full: "100%"
88
+ }, F = t.transition, u = {}, h = {
89
+ blur: a,
90
+ borders: m,
91
+ breakpoints: i,
92
+ colors: l,
93
+ fontSizes: c,
94
+ fontWeights: p,
95
+ fonts: g,
96
+ letterSpacings: f,
97
+ lineHeights: x,
98
+ radii: d,
99
+ shadows: y,
100
+ sizes: b,
101
+ space: e,
102
+ transition: F,
103
+ zIndices: u
104
+ }, C = {
105
+ "primary.50": "teal.50",
106
+ "primary.500": "teal.500",
107
+ "primary.600": "teal.600",
108
+ "primary.700": "teal.700",
109
+ "brand.50": "#FEF8F5",
110
+ "brand.100": "#FBE4D7",
111
+ "brand.800": "#D96B27",
112
+ "brand.900": "#C85124",
113
+ "state.error": "#D13823",
114
+ "state.warning": "#ECC94B",
115
+ "state.success": "#25855A",
116
+ "state.focus": "#2B6CB0"
117
+ }, S = {
118
+ colors: C
119
+ }, A = o({
120
+ baseStyle: {
121
+ backgroundColor: "primary.600",
122
+ color: "white",
123
+ px: 6,
124
+ py: 3
125
+ },
126
+ sizes: {
127
+ sm: {},
128
+ md: {},
129
+ lg: {}
130
+ },
131
+ variants: {
132
+ primary: {},
133
+ secondary: {},
134
+ tertiary: {}
135
+ },
136
+ defaultProps: {}
137
+ }), B = {
138
+ Button: A
139
+ }, E = {
140
+ global: {
141
+ body: {
142
+ fontFamily: "body",
143
+ color: "gray.600",
144
+ lineHeight: "regular",
145
+ fontWeight: "regular"
146
+ }
147
+ }
148
+ }, z = {
149
+ emphasis: {
150
+ fontFamily: "body",
151
+ fontSize: "3xl",
152
+ fontWeight: "light"
153
+ },
154
+ lead: {
155
+ fontFamily: "body",
156
+ fontSize: "xl",
157
+ fontWeight: "regular"
158
+ },
159
+ large: {
160
+ fontFamily: "body",
161
+ fontSize: "lg",
162
+ fontWeight: "regular"
163
+ },
164
+ body: {
165
+ fontFamily: "body",
166
+ fontSize: "md",
167
+ fontWeight: "regular"
168
+ },
169
+ micro: {
170
+ fontFamily: "body",
171
+ fontSize: "sm",
172
+ fontWeight: "regular"
173
+ }
174
+ }, W = {
175
+ cssVarPrefix: "dcp"
176
+ }, D = {
177
+ components: B,
178
+ config: W,
179
+ direction: "ltr",
180
+ textStyles: z,
181
+ styles: E,
182
+ semanticTokens: S,
183
+ ...h
184
+ }, w = ({ children: r }) => /* @__PURE__ */ s(n, { theme: D, children: r });
185
+ export {
186
+ T as Button,
187
+ w as StreetscapeProvider,
188
+ D as theme
189
+ };
190
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/theme/tokens/blur.ts","../src/theme/tokens/borders.ts","../src/theme/tokens/breakpoints.ts","../src/theme/tokens/colors.ts","../src/theme/tokens/font-sizes.ts","../src/theme/tokens/font-weights.ts","../src/theme/tokens/fonts.ts","../src/theme/tokens/letter-spacing.ts","../src/theme/tokens/line-heights.ts","../src/theme/tokens/radii.ts","../src/theme/tokens/shadows.ts","../src/theme/tokens/space.ts","../src/theme/tokens/sizes.ts","../src/theme/tokens/transition.ts","../src/theme/tokens/z-indices.ts","../src/theme/tokens/index.ts","../src/theme/semantic-tokens/colors.ts","../src/theme/semantic-tokens/index.ts","../src/theme/components/button.ts","../src/theme/components/index.ts","../src/theme/styles.ts","../src/theme/text-styles.ts","../src/theme/index.ts","../src/StreetscapeProvider.tsx"],"sourcesContent":["export const blur = {};\n","export const borders = {};\n","export const breakpoints = {};\n","export const colors = {\n transparent: \"transparent\",\n current: \"currentColor\",\n white: \"#FFFFFF\",\n gray: {\n 50: \"#F7FAFC\",\n 100: \"#EDF2F7\",\n 200: \"#E2E8F0\",\n 300: \"#CBD5E0\",\n 400: \"#A0AEC0\",\n 500: \"#718096\",\n 600: \"#4A5568\",\n 700: \"#2D3748\",\n 800: \"#1A202C\",\n },\n teal: {\n 50: \"#E6FFFA\",\n 500: \"#319795\",\n 600: \"#2C7A7B\",\n 700: \"#285E61\",\n },\n};\n","export const fontSizes = {\n sm: \"0.875rem\",\n md: \"1rem\",\n lg: \"1.25rem\",\n xl: \"1.5rem\",\n \"2xl\": \"1.75rem\",\n \"3xl\": \"2rem\",\n \"4xl\": \"2.25rem\",\n};\n","export const fontWeights = {\n bold: 700,\n medium: 500,\n regular: 400,\n light: 300,\n};\n","export const fonts = {\n heading: `Helvetica Neue, Arial, sans-serif`,\n body: `Helvetica Neue, Arial, sans-serif`,\n};\n","export const letterSpacings = {};\n","export const lineHeights = {\n regular: 1.5,\n};\n","export const radii = {\n none: \"0\",\n base: \"0.75rem\",\n};\n","export const shadows = {\n base: \"0px 4px 4px 0px rgba(0, 0, 0, 0.08) inset, 0px -4px 4px 0px rgba(0, 0, 0, 0.08) inset, 4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset, -4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset\",\n};\n","export const space = {\n px: \"1px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\",\n};\n","import { space } from \"./space\";\n\nexport const sizes = {\n ...space,\n max: \"max-content\",\n min: \"min-content\",\n full: \"100%\",\n};\n","import { baseTheme } from \"@chakra-ui/react\";\n\nexport const transition = baseTheme.transition;\n","export const zIndices = {};\n","import { blur } from \"./blur\";\nimport { borders } from \"./borders\";\nimport { breakpoints } from \"./breakpoints\";\nimport { colors } from \"./colors\";\nimport { fontSizes } from \"./font-sizes\";\nimport { fontWeights } from \"./font-weights\";\nimport { fonts } from \"./fonts\";\nimport { letterSpacings } from \"./letter-spacing\";\nimport { lineHeights } from \"./line-heights\";\nimport { radii } from \"./radii\";\nimport { shadows } from \"./shadows\";\nimport { sizes } from \"./sizes\";\nimport { space } from \"./space\";\nimport { transition } from \"./transition\";\nimport { zIndices } from \"./z-indices\";\n\nexport const tokens = {\n blur,\n borders,\n breakpoints,\n colors,\n fontSizes,\n fontWeights,\n fonts,\n letterSpacings,\n lineHeights,\n radii,\n shadows,\n sizes,\n space,\n transition,\n zIndices,\n};\n","export const colors = {\n \"primary.50\": \"teal.50\",\n \"primary.500\": \"teal.500\",\n \"primary.600\": \"teal.600\",\n \"primary.700\": \"teal.700\",\n \"brand.50\": \"#FEF8F5\",\n \"brand.100\": \"#FBE4D7\",\n \"brand.800\": \"#D96B27\",\n \"brand.900\": \"#C85124\",\n \"state.error\": \"#D13823\",\n \"state.warning\": \"#ECC94B\",\n \"state.success\": \"#25855A\",\n \"state.focus\": \"#2B6CB0\",\n};\n","import { colors } from \"./colors\";\n\nexport const semanticTokens = {\n colors,\n};\n","import { defineStyleConfig } from \"@chakra-ui/react\";\n\nexport const buttonTheme = defineStyleConfig({\n baseStyle: {\n backgroundColor: \"primary.600\",\n color: \"white\",\n px: 6,\n py: 3,\n },\n sizes: {\n sm: {},\n md: {},\n lg: {},\n },\n variants: {\n primary: {},\n secondary: {},\n tertiary: {},\n },\n defaultProps: {},\n});\n","import { buttonTheme } from \"./button\";\n\nexport const components = {\n Button: buttonTheme,\n};\n","import { Styles } from \"@chakra-ui/theme-tools\";\n\nexport const styles: Styles = {\n global: {\n body: {\n fontFamily: \"body\",\n color: \"gray.600\",\n lineHeight: \"regular\",\n fontWeight: \"regular\",\n },\n },\n};\n","import { SystemStyleObjectRecord } from \"@chakra-ui/react\";\n\nexport const textStyles: SystemStyleObjectRecord = {\n emphasis: {\n fontFamily: \"body\",\n fontSize: \"3xl\",\n fontWeight: \"light\",\n },\n lead: {\n fontFamily: \"body\",\n fontSize: \"xl\",\n fontWeight: \"regular\",\n },\n large: {\n fontFamily: \"body\",\n fontSize: \"lg\",\n fontWeight: \"regular\",\n },\n body: {\n fontFamily: \"body\",\n fontSize: \"md\",\n fontWeight: \"regular\",\n },\n micro: {\n fontFamily: \"body\",\n fontSize: \"sm\",\n fontWeight: \"regular\",\n },\n};\n","import { ThemeConfig, ChakraTheme } from \"@chakra-ui/react\";\nimport { tokens } from \"./tokens\";\nimport { semanticTokens } from \"./semantic-tokens\";\nimport { components } from \"./components\";\nimport { styles } from \"./styles\";\nimport { textStyles } from \"./text-styles\";\n\nconst config: ThemeConfig = {\n cssVarPrefix: \"dcp\",\n};\n\nexport const theme: ChakraTheme = {\n components,\n config,\n direction: \"ltr\",\n textStyles,\n styles,\n semanticTokens,\n ...tokens,\n};\n","import { ChakraBaseProvider } from \"@chakra-ui/react\";\nimport { theme } from \"./theme\";\n\ninterface StreetscapeProviderProps {\n children: React.ReactNode;\n}\n\nexport const StreetscapeProvider = ({ children }: StreetscapeProviderProps) => (\n <ChakraBaseProvider theme={theme}>{children}</ChakraBaseProvider>\n);\n"],"names":["blur","borders","breakpoints","colors","fontSizes","fontWeights","fonts","letterSpacings","lineHeights","radii","shadows","space","sizes","transition","baseTheme","zIndices","tokens","semanticTokens","buttonTheme","defineStyleConfig","components","styles","textStyles","config","theme","StreetscapeProvider","children","jsx","ChakraBaseProvider"],"mappings":"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"}
@@ -0,0 +1,23 @@
1
+ export declare const buttonTheme: {
2
+ baseStyle?: {
3
+ backgroundColor: string;
4
+ color: string;
5
+ px: number;
6
+ py: number;
7
+ } | undefined;
8
+ sizes?: {
9
+ sm: {};
10
+ md: {};
11
+ lg: {};
12
+ } | undefined;
13
+ variants?: {
14
+ primary: {};
15
+ secondary: {};
16
+ tertiary: {};
17
+ } | undefined;
18
+ defaultProps?: {
19
+ size?: "sm" | "md" | "lg" | undefined;
20
+ variant?: "primary" | "secondary" | "tertiary" | undefined;
21
+ colorScheme?: string | undefined;
22
+ } | undefined;
23
+ };
@@ -0,0 +1,25 @@
1
+ export declare const components: {
2
+ Button: {
3
+ baseStyle?: {
4
+ backgroundColor: string;
5
+ color: string;
6
+ px: number;
7
+ py: number;
8
+ } | undefined;
9
+ sizes?: {
10
+ sm: {};
11
+ md: {};
12
+ lg: {};
13
+ } | undefined;
14
+ variants?: {
15
+ primary: {};
16
+ secondary: {};
17
+ tertiary: {};
18
+ } | undefined;
19
+ defaultProps?: {
20
+ size?: "sm" | "md" | "lg" | undefined;
21
+ variant?: "primary" | "secondary" | "tertiary" | undefined;
22
+ colorScheme?: string | undefined;
23
+ } | undefined;
24
+ };
25
+ };
@@ -0,0 +1,2 @@
1
+ import { ChakraTheme } from "@chakra-ui/react";
2
+ export declare const theme: ChakraTheme;
@@ -0,0 +1,14 @@
1
+ export declare const colors: {
2
+ "primary.50": string;
3
+ "primary.500": string;
4
+ "primary.600": string;
5
+ "primary.700": string;
6
+ "brand.50": string;
7
+ "brand.100": string;
8
+ "brand.800": string;
9
+ "brand.900": string;
10
+ "state.error": string;
11
+ "state.warning": string;
12
+ "state.success": string;
13
+ "state.focus": string;
14
+ };
@@ -0,0 +1,16 @@
1
+ export declare const semanticTokens: {
2
+ colors: {
3
+ "primary.50": string;
4
+ "primary.500": string;
5
+ "primary.600": string;
6
+ "primary.700": string;
7
+ "brand.50": string;
8
+ "brand.100": string;
9
+ "brand.800": string;
10
+ "brand.900": string;
11
+ "state.error": string;
12
+ "state.warning": string;
13
+ "state.success": string;
14
+ "state.focus": string;
15
+ };
16
+ };
@@ -0,0 +1,2 @@
1
+ import { Styles } from "@chakra-ui/theme-tools";
2
+ export declare const styles: Styles;
@@ -0,0 +1,2 @@
1
+ import { SystemStyleObjectRecord } from "@chakra-ui/react";
2
+ export declare const textStyles: SystemStyleObjectRecord;
@@ -0,0 +1 @@
1
+ export declare const blur: {};
@@ -0,0 +1 @@
1
+ export declare const borders: {};
@@ -0,0 +1 @@
1
+ export declare const breakpoints: {};
@@ -0,0 +1,22 @@
1
+ export declare const colors: {
2
+ transparent: string;
3
+ current: string;
4
+ white: string;
5
+ gray: {
6
+ 50: string;
7
+ 100: string;
8
+ 200: string;
9
+ 300: string;
10
+ 400: string;
11
+ 500: string;
12
+ 600: string;
13
+ 700: string;
14
+ 800: string;
15
+ };
16
+ teal: {
17
+ 50: string;
18
+ 500: string;
19
+ 600: string;
20
+ 700: string;
21
+ };
22
+ };
@@ -0,0 +1,9 @@
1
+ export declare const fontSizes: {
2
+ sm: string;
3
+ md: string;
4
+ lg: string;
5
+ xl: string;
6
+ "2xl": string;
7
+ "3xl": string;
8
+ "4xl": string;
9
+ };
@@ -0,0 +1,6 @@
1
+ export declare const fontWeights: {
2
+ bold: number;
3
+ medium: number;
4
+ regular: number;
5
+ light: number;
6
+ };
@@ -0,0 +1,4 @@
1
+ export declare const fonts: {
2
+ heading: string;
3
+ body: string;
4
+ };
@@ -0,0 +1,154 @@
1
+ export declare const tokens: {
2
+ blur: {};
3
+ borders: {};
4
+ breakpoints: {};
5
+ colors: {
6
+ transparent: string;
7
+ current: string;
8
+ white: string;
9
+ gray: {
10
+ 50: string;
11
+ 100: string;
12
+ 200: string;
13
+ 300: string;
14
+ 400: string;
15
+ 500: string;
16
+ 600: string;
17
+ 700: string;
18
+ 800: string;
19
+ };
20
+ teal: {
21
+ 50: string;
22
+ 500: string;
23
+ 600: string;
24
+ 700: string;
25
+ };
26
+ };
27
+ fontSizes: {
28
+ sm: string;
29
+ md: string;
30
+ lg: string;
31
+ xl: string;
32
+ "2xl": string;
33
+ "3xl": string;
34
+ "4xl": string;
35
+ };
36
+ fontWeights: {
37
+ bold: number;
38
+ medium: number;
39
+ regular: number;
40
+ light: number;
41
+ };
42
+ fonts: {
43
+ heading: string;
44
+ body: string;
45
+ };
46
+ letterSpacings: {};
47
+ lineHeights: {
48
+ regular: number;
49
+ };
50
+ radii: {
51
+ none: string;
52
+ base: string;
53
+ };
54
+ shadows: {
55
+ base: string;
56
+ };
57
+ sizes: {
58
+ max: string;
59
+ min: string;
60
+ full: string;
61
+ px: string;
62
+ 0.5: string;
63
+ 1: string;
64
+ 1.5: string;
65
+ 2: string;
66
+ 2.5: string;
67
+ 3: string;
68
+ 3.5: string;
69
+ 4: string;
70
+ 5: string;
71
+ 6: string;
72
+ 7: string;
73
+ 8: string;
74
+ 9: string;
75
+ 10: string;
76
+ 12: string;
77
+ 14: string;
78
+ 16: string;
79
+ 20: string;
80
+ 24: string;
81
+ 28: string;
82
+ 32: string;
83
+ 36: string;
84
+ 40: string;
85
+ 44: string;
86
+ 48: string;
87
+ 52: string;
88
+ 56: string;
89
+ 60: string;
90
+ 64: string;
91
+ 72: string;
92
+ 80: string;
93
+ 96: string;
94
+ };
95
+ space: {
96
+ px: string;
97
+ 0.5: string;
98
+ 1: string;
99
+ 1.5: string;
100
+ 2: string;
101
+ 2.5: string;
102
+ 3: string;
103
+ 3.5: string;
104
+ 4: string;
105
+ 5: string;
106
+ 6: string;
107
+ 7: string;
108
+ 8: string;
109
+ 9: string;
110
+ 10: string;
111
+ 12: string;
112
+ 14: string;
113
+ 16: string;
114
+ 20: string;
115
+ 24: string;
116
+ 28: string;
117
+ 32: string;
118
+ 36: string;
119
+ 40: string;
120
+ 44: string;
121
+ 48: string;
122
+ 52: string;
123
+ 56: string;
124
+ 60: string;
125
+ 64: string;
126
+ 72: string;
127
+ 80: string;
128
+ 96: string;
129
+ };
130
+ transition: {
131
+ property: {
132
+ common: string;
133
+ colors: string;
134
+ dimensions: string;
135
+ position: string;
136
+ background: string;
137
+ };
138
+ easing: {
139
+ "ease-in": string;
140
+ "ease-out": string;
141
+ "ease-in-out": string;
142
+ };
143
+ duration: {
144
+ "ultra-fast": string;
145
+ faster: string;
146
+ fast: string;
147
+ normal: string;
148
+ slow: string;
149
+ slower: string;
150
+ "ultra-slow": string;
151
+ };
152
+ };
153
+ zIndices: {};
154
+ };
@@ -0,0 +1 @@
1
+ export declare const letterSpacings: {};
@@ -0,0 +1,3 @@
1
+ export declare const lineHeights: {
2
+ regular: number;
3
+ };
@@ -0,0 +1,4 @@
1
+ export declare const radii: {
2
+ none: string;
3
+ base: string;
4
+ };
@@ -0,0 +1,3 @@
1
+ export declare const shadows: {
2
+ base: string;
3
+ };
@@ -0,0 +1,38 @@
1
+ export declare const sizes: {
2
+ max: string;
3
+ min: string;
4
+ full: string;
5
+ px: string;
6
+ 0.5: string;
7
+ 1: string;
8
+ 1.5: string;
9
+ 2: string;
10
+ 2.5: string;
11
+ 3: string;
12
+ 3.5: string;
13
+ 4: string;
14
+ 5: string;
15
+ 6: string;
16
+ 7: string;
17
+ 8: string;
18
+ 9: string;
19
+ 10: string;
20
+ 12: string;
21
+ 14: string;
22
+ 16: string;
23
+ 20: string;
24
+ 24: string;
25
+ 28: string;
26
+ 32: string;
27
+ 36: string;
28
+ 40: string;
29
+ 44: string;
30
+ 48: string;
31
+ 52: string;
32
+ 56: string;
33
+ 60: string;
34
+ 64: string;
35
+ 72: string;
36
+ 80: string;
37
+ 96: string;
38
+ };
@@ -0,0 +1,35 @@
1
+ export declare const space: {
2
+ px: string;
3
+ 0.5: string;
4
+ 1: string;
5
+ 1.5: string;
6
+ 2: string;
7
+ 2.5: string;
8
+ 3: string;
9
+ 3.5: string;
10
+ 4: string;
11
+ 5: string;
12
+ 6: string;
13
+ 7: string;
14
+ 8: string;
15
+ 9: string;
16
+ 10: string;
17
+ 12: string;
18
+ 14: string;
19
+ 16: string;
20
+ 20: string;
21
+ 24: string;
22
+ 28: string;
23
+ 32: string;
24
+ 36: string;
25
+ 40: string;
26
+ 44: string;
27
+ 48: string;
28
+ 52: string;
29
+ 56: string;
30
+ 60: string;
31
+ 64: string;
32
+ 72: string;
33
+ 80: string;
34
+ 96: string;
35
+ };
@@ -0,0 +1,23 @@
1
+ export declare const transition: {
2
+ property: {
3
+ common: string;
4
+ colors: string;
5
+ dimensions: string;
6
+ position: string;
7
+ background: string;
8
+ };
9
+ easing: {
10
+ "ease-in": string;
11
+ "ease-out": string;
12
+ "ease-in-out": string;
13
+ };
14
+ duration: {
15
+ "ultra-fast": string;
16
+ faster: string;
17
+ fast: string;
18
+ normal: string;
19
+ slow: string;
20
+ slower: string;
21
+ "ultra-slow": string;
22
+ };
23
+ };
@@ -0,0 +1 @@
1
+ export declare const zIndices: {};
package/package.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "name": "@nycplanning/streetscape",
3
+ "version": "0.3.0",
4
+ "type": "module",
5
+ "main": "dist/index",
6
+ "types": "dist/index.d.ts",
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "scripts": {
11
+ "dev": "concurrently \"npm:watch:*\"",
12
+ "watch:storybook": "storybook dev -p 6006",
13
+ "build": "vite build",
14
+ "build-storybook": "storybook build",
15
+ "lint": "eslint . --ext ts,tsx,js,jsx",
16
+ "typecheck": "tsc",
17
+ "theme-typings": "if [[ $PWD == *\"node_modules\"* ]]; then TOKENS_PATH=\"dist/index.d.ts\"; else TOKENS_PATH=\"src/index.ts\"; fi; chakra-cli tokens $TOKENS_PATH --strict-token-types --strict-component-types",
18
+ "watch:theme-typings": "npm run theme-typings -- --watch src/theme",
19
+ "postinstall": "npm run theme-typings",
20
+ "prepare": "husky install"
21
+ },
22
+ "dependencies": {
23
+ "@chakra-ui/cli": "^2.4.1",
24
+ "@chakra-ui/layout": "^2.3.1",
25
+ "@chakra-ui/react": "^2.8.1",
26
+ "@emotion/react": "^11.11.1",
27
+ "@emotion/styled": "^11.11.0",
28
+ "framer-motion": "^10.16.4",
29
+ "react": "^18.2.0",
30
+ "react-dom": "^18.2.0"
31
+ },
32
+ "devDependencies": {
33
+ "@chakra-ui/storybook-addon": "^5.0.1",
34
+ "@storybook/addon-a11y": "^7.4.1",
35
+ "@storybook/addon-essentials": "^7.4.1",
36
+ "@storybook/addon-interactions": "^7.4.1",
37
+ "@storybook/addon-links": "^7.4.1",
38
+ "@storybook/addon-onboarding": "^1.0.8",
39
+ "@storybook/blocks": "^7.4.1",
40
+ "@storybook/react": "^7.4.1",
41
+ "@storybook/react-vite": "^7.4.1",
42
+ "@storybook/testing-library": "^0.2.0",
43
+ "@types/react": "^18.2.15",
44
+ "@types/react-dom": "^18.2.7",
45
+ "@typescript-eslint/eslint-plugin": "^6.7.0",
46
+ "@typescript-eslint/parser": "^6.7.0",
47
+ "@vitejs/plugin-react": "^4.0.3",
48
+ "concurrently": "^8.2.1",
49
+ "eslint": "^8.49.0",
50
+ "eslint-config-prettier": "^9.0.0",
51
+ "eslint-plugin-prettier": "^5.0.0",
52
+ "eslint-plugin-react": "^7.33.2",
53
+ "eslint-plugin-react-hooks": "^4.6.0",
54
+ "eslint-plugin-storybook": "^0.6.13",
55
+ "husky": "^8.0.3",
56
+ "lint-staged": "^14.0.1",
57
+ "prettier": "3.0.3",
58
+ "storybook": "^7.4.1",
59
+ "typescript": "^5.0.2",
60
+ "vite": "^4.4.5",
61
+ "vite-plugin-dts": "^3.6.0",
62
+ "vite-plugin-externalize-deps": "^0.7.0"
63
+ },
64
+ "lint-staged": {
65
+ "*.{ts,tsx}": [
66
+ "bash -c 'npm run typecheck'",
67
+ "npm run lint -- --fix"
68
+ ]
69
+ }
70
+ }