@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/index.js

@@ -0,0 +1,86 @@
+import 'focus-options-polyfill';
+import 'focus-visible';
+import * as _designSystem from './system';
+export { _designSystem as designSystem };
+import * as _hooks from './hooks';
+export { _hooks as hooks };
+import * as _server from './server';
+export { _server as server };
+import * as _utils from './utils';
+export { _utils as utils };
+export { default as ActionsDropdown } from './ActionsDropdown';
+export { default as Alert } from './Alert';
+export { default as Avatar } from './Avatar';
+export { default as Badge } from './Badge';
+export { default as Box } from './Box';
+export { default as Button } from './Button';
+export { default as Calendar } from './Calendar';
+export { default as Card } from './Card';
+export { default as Checkbox } from './Checkbox';
+export { default as CheckboxCard } from './CheckboxCard';
+export { default as CheckboxGroup } from './CheckboxGroup';
+export { default as ChurchCenterStatus } from './ChurchCenterStatus';
+export { default as Collapse } from './Collapse';
+export { default as ColumnView } from './ColumnView';
+export { default as Combobox } from './Combobox';
+export { default as DataTable } from './DataTable';
+export { default as DateField } from './DateField';
+export { default as Divider } from './Divider';
+export { default as DragDrop } from './DragDrop';
+export { default as Drawer } from './Drawer';
+export { default as Dropdown } from './Dropdown';
+export { default as EditActions } from './EditActions';
+export { default as Field } from './Field';
+export { default as Form } from './Form';
+export { default as FieldSet } from './FieldSet';
+export { default as FilterLayout } from './FilterLayout';
+export { default as GridView } from './GridView';
+export { default as Group } from './Group';
+export { default as Heading } from './Heading';
+export { default as HelperDrawer } from './HelperDrawer';
+export { default as Highlight } from './Highlight';
+export { default as Icon } from './Icon';
+export { default as Input } from './Input';
+export { default as Link } from './Link';
+export { default as LinkList } from './LinkList';
+export { default as List } from './List';
+export { default as Logo } from './Logo';
+export { default as Menu } from './Menu';
+export { default as Modal } from './Modal';
+export { default as NumberField } from './NumberField';
+export { PageActions, PageBody, PageButton, PageDropdown, PageHeader, PageTab, PageTabList, PageTitle, PageToolbar } from './Page';
+export { default as PagerView } from './PagerView';
+export { default as Pagination } from './Pagination';
+export { default as Popover } from './Popover';
+export { default as Portal } from './Portal';
+export { default as Progress } from './Progress';
+export { default as Radio } from './Radio';
+export { default as RangeSlider } from './RangeSlider';
+export { default as ScreenReader } from './ScreenReader';
+export { default as Scrim } from './Scrim';
+export { default as Section } from './Section';
+export { default as HeadingUppercase } from './HeadingUppercase';
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as SegmentedTabs } from './SegmentedTabs';
+export { default as Select } from './Select';
+export { default as Sidebar } from './Sidebar';
+export { default as Sortable } from './Sortable';
+export { default as Spinner } from './Spinner';
+export { default as StackView } from './StackView';
+export { default as StepperField } from './StepperField';
+export { default as StepperProgress } from './StepperProgress';
+export { default as Summary } from './Summary';
+export { default as Tab } from './Tab';
+export { default as Table } from './Table';
+export { default as Tabs } from './Tabs';
+export { default as Text } from './Text';
+export { default as TextArea } from './TextArea';
+export { default as ThemeProvider } from './ThemeProvider';
+export { default as TileView } from './TileView';
+export { default as TimeField } from './TimeField';
+export { default as Toolbar } from './Toolbar';
+export { default as TokenInput } from './TokenInput';
+export { default as Tooltip } from './Tooltip';
+export { default as VariantProvider } from './VariantProvider';
+export { default as Wizard } from './Wizard';
+export { default as WrapView } from './WrapView';

package/dist/esm/server.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ThemeProvider from './ThemeProvider';
+export var styleElement = /*#__PURE__*/React.createElement("style", {
+  id: "uikit-style",
+  dangerouslySetInnerHTML: {
+    __html: ThemeProvider.styleReset
+  }
+});
+export var themeInitializerElement = /*#__PURE__*/React.createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: ThemeProvider.themeInitializerScript
+  }
+});

package/dist/esm/system/box-sizes.js

@@ -0,0 +1,54 @@
+export var boxSizes = {
+  xs: {
+    boxSize: 2.5,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0,
+    radius: 2.5
+  },
+  sm: {
+    boxSize: 3,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 1,
+    paddingVertical: 0.25,
+    radius: 3
+  },
+  md: {
+    boxSize: 4,
+    fontSize: 4,
+    lineHeight: 3,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.375,
+    paddingVertical: 0.5,
+    radius: 4
+  },
+  lg: {
+    boxSize: 5,
+    fontSize: 3,
+    lineHeight: 4,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.75,
+    paddingVertical: 0.5,
+    radius: 5
+  },
+  xl: {
+    boxSize: 8,
+    fontSize: 1,
+    lineHeight: 5,
+    paddingHorizontalDense: 2,
+    paddingHorizontal: 2.25,
+    paddingVertical: 1.5,
+    radius: 6
+  }
+};
+export function getBoxSize(size) {
+  if (size === void 0) {
+    size = 'md';
+  }
+
+  return boxSizes[size] || {};
+}

package/dist/esm/system/button-themes.js

@@ -0,0 +1,281 @@
+export var buttonThemes = {
+  "default": {
+    fill: {
+      color: 'foreground',
+      backgroundColor: 'grey-3',
+      hover: {
+        backgroundColor: 'grey-4'
+      },
+      active: {
+        backgroundColor: 'grey-5'
+      }
+    },
+    outline: {
+      stroke: 'separatorSecondary',
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    },
+    naked: {
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    }
+  },
+  white: {
+    fill: {
+      color: 'primary',
+      backgroundColor: 'white',
+      hover: {
+        backgroundColor: 'grey-0'
+      },
+      active: {
+        backgroundColor: 'grey-1'
+      }
+    },
+    outline: {
+      stroke: 'white',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  light: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'light-1',
+      hover: {
+        backgroundColor: 'light-2'
+      },
+      active: {
+        backgroundColor: 'light-3'
+      }
+    },
+    outline: {
+      stroke: 'light-3',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'light-9',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  dark: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'dark-0',
+      hover: {
+        backgroundColor: 'dark-1'
+      },
+      active: {
+        backgroundColor: 'dark-2'
+      }
+    },
+    outline: {
+      stroke: 'dark-3',
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    },
+    naked: {
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    }
+  },
+  primary: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'primary',
+      hover: {
+        backgroundColor: 'primary-dark'
+      },
+      active: {
+        backgroundColor: 'primary-darker'
+      }
+    },
+    outline: {
+      stroke: 'primary',
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    },
+    naked: {
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    }
+  },
+  warning: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'yellow-5',
+      hover: {
+        backgroundColor: 'yellow-4'
+      },
+      active: {
+        backgroundColor: 'yellow-3'
+      }
+    },
+    outline: {
+      stroke: 'yellow-5',
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    },
+    naked: {
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    }
+  },
+  error: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'red-5',
+      hover: {
+        backgroundColor: 'red-4'
+      },
+      active: {
+        backgroundColor: 'red-3'
+      }
+    },
+    outline: {
+      stroke: 'red-5',
+      color: 'red-5',
+      hover: {
+        backgroundColor: 'red-0'
+      },
+      active: {
+        backgroundColor: 'red-1'
+      }
+    },
+    naked: {
+      color: 'error',
+      hover: {
+        backgroundColor: 'red-0'
+      },
+      active: {
+        backgroundColor: 'red-1'
+      }
+    }
+  },
+  success: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'green-5',
+      hover: {
+        backgroundColor: 'green-4'
+      },
+      active: {
+        backgroundColor: 'green-3'
+      }
+    },
+    outline: {
+      stroke: 'green-5',
+      color: 'green-5',
+      hover: {
+        backgroundColor: 'green-0'
+      },
+      active: {
+        backgroundColor: 'green-1'
+      }
+    },
+    naked: {
+      color: 'green',
+      hover: {
+        backgroundColor: 'green-0'
+      },
+      active: {
+        backgroundColor: 'green-1'
+      }
+    }
+  },
+  info: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-4'
+      },
+      active: {
+        backgroundColor: 'blue-3'
+      }
+    },
+    outline: {
+      stroke: 'blue-5',
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    },
+    naked: {
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    }
+  }
+};

package/dist/esm/system/colors/colors.js

@@ -0,0 +1,97 @@
+import { flattenPalette } from './utils';
+export var palette = {
+  primary: {
+    lightest: 'hsl(88, 24%, 92%)',
+    lighter: 'hsl(88, 32%, 86%)',
+    light: 'hsl(88, 40%, 54%)',
+    base: 'hsl(88, 44%, 40%)',
+    dark: 'hsl(88, 46%, 36%)',
+    darker: 'hsl(88, 52%, 32%)',
+    darkest: 'hsl(88, 72%, 20%)'
+  },
+  warning: {
+    lighter: 'hsl(60, 99%, 90%)',
+    light: 'hsl(56, 97%, 74%)',
+    base: 'hsl(50, 94%, 56%)',
+    dark: 'hsl(48, 93%, 48%)',
+    darker: 'hsl(42, 90%, 30%)'
+  },
+  error: {
+    lighter: 'hsl(7, 60%, 90%)',
+    light: 'hsl(7, 72%, 76%)',
+    base: 'hsl(7, 78%, 64%)',
+    dark: 'hsl(7, 80%, 52%)',
+    darker: 'hsl(7, 86%, 30%)'
+  },
+  success: {
+    lighter: 'hsl(96, 24%, 92%)',
+    light: 'hsl(96, 32%, 76%)',
+    base: 'hsl(96, 40%, 58%)',
+    dark: 'hsl(96, 44%, 50%)',
+    darker: 'hsl(96, 60%, 20%)'
+  },
+  red: ['hsl(8, 73%, 96%)', 'hsl(8, 74%, 92%)', 'hsl(8, 75%, 88%)', 'hsl(8, 76%, 68%)', 'hsl(8, 77%, 60%)', 'hsl(8, 78%, 56%)', 'hsl(8, 79%, 52%)', 'hsl(8, 80%, 48%)', 'hsl(8, 81%, 40%)', 'hsl(8, 82%, 30%)'],
+  blue: ['hsl(197, 56%, 92%)', 'hsl(197, 56%, 88%)', 'hsl(197, 56%, 72%)', 'hsl(197, 56%, 64%)', 'hsl(197, 56%, 52%)', 'hsl(197, 56%, 44%)', 'hsl(197, 56%, 40%)', 'hsl(197, 56%, 32%)', 'hsl(197, 56%, 24%)', 'hsl(197, 56%, 20%)'],
+  green: ['hsl(96, 24%, 92%)', 'hsl(96, 30%, 84%)', 'hsl(96, 32%, 76%)', 'hsl(96, 34%, 72%)', 'hsl(96, 36%, 64%)', 'hsl(96, 40%, 58%)', 'hsl(96, 44%, 50%)', 'hsl(96, 48%, 40%)', 'hsl(96, 52%, 30%)', 'hsl(96, 60%, 20%)'],
+  yellow: ['hsl(50, 89%, 90%)', 'hsl(50, 90%, 86%)', 'hsl(50, 91%, 74%)', 'hsl(50, 92%, 68%)', 'hsl(50, 93%, 62%)', 'hsl(50, 94%, 56%)', 'hsl(50, 95%, 48%)', 'hsl(50, 96%, 40%)', 'hsl(50, 97%, 32%)', 'hsl(50, 98%, 26%)'],
+  light: ['hsla(0,0%,100%,0.16)', 'hsla(0,0%,100%,0.24)', 'hsla(0,0%,100%,0.32)', 'hsla(0,0%,100%,0.44)', 'hsla(0,0%,100%,0.50)', 'hsla(0,0%,100%,0.60)', 'hsla(0,0%,100%,0.68)', 'hsla(0,0%,100%,0.76)', 'hsla(0,0%,100%,0.88)', 'hsla(0,0%,100%,0.96)'],
+  dark: ['hsla(0,0%,0%,0.04)', 'hsla(0,0%,0%,0.08)', 'hsla(0,0%,0%,0.12)', 'hsla(0,0%,0%,0.16)', 'hsla(0,0%,0%,0.24)', 'hsla(0,0%,0%,0.32)', 'hsla(0,0%,0%,0.40)', 'hsla(0,0%,0%,0.46)', 'hsla(0,0%,0%,0.54)', 'hsla(0,0%,0%,0.68)'],
+  grey: ['hsl(200,1%,98%)', 'hsl(200,1%,96%)', 'hsl(200,1%,94%)', 'hsl(200,1%,92%)', 'hsl(200,1%,90%)', 'hsl(200,1%,86%)', 'hsl(200,1%,74%)', 'hsl(200,1%,58%)', 'hsl(200,1%,46%)', 'hsl(200,1%,28%)'],
+  foreground: {
+    foreground: 'grey-9',
+    foregroundSecondary: 'grey-8',
+    foregroundTertiary: 'grey-7'
+  },
+  background: {
+    background: 'hsl(30, 9%, 99%)',
+    backgroundSecondary: 'hsl(30, 9%, 97%)',
+    backgroundTertiary: 'hsl(30, 9%, 95%)'
+  },
+  surface: {
+    surface: 'white',
+    surfaceSecondary: 'grey-0',
+    surfaceTertiary: 'grey-1'
+  },
+  separator: {
+    separator: 'grey-6',
+    separatorSecondary: 'grey-5',
+    separatorTertiary: 'grey-4',
+    separatorHover: 'separator',
+    separatorFocus: 'primary',
+    separatorFocusSecondary: 'primary-lighter'
+  },
+  highlight: {
+    highlight: 'grey-2',
+    highlightSecondary: 'grey-3'
+  },
+  link: {
+    linkForeground: 'primary',
+    linkBackground: 'hsl(200,100%,98%)'
+  },
+  days: {
+    sunday: '#7DC156',
+    monday: '#789FF8',
+    tuesday: '#A193FD',
+    wednesday: '#D18CF6',
+    thursday: '#FA7EA4',
+    friday: '#F69688',
+    saturday: '#66BEEB'
+  },
+  apps: {
+    'check-ins': '#8c6999',
+    giving: '#f4c551',
+    groups: '#f58a4f',
+    'music-stand': '#4984c4',
+    pco: '#3565cf',
+    people: '#5781cf',
+    'planning-center': '#2266f7',
+    projector: '#f19900',
+    registrations: '#569690',
+    calendar: '#cc4832',
+    services: '#6a9639'
+  }
+};
+export var colors = flattenPalette(palette);
+export function getColor(key) {
+  return key ? colors[key] : colors;
+}

package/dist/esm/system/colors/index.js

@@ -0,0 +1,2 @@
+export { colors, palette, getColor } from './colors';
+export { createTones, eachPalette, flattenPalette, generateColorScale, setAlphaChannel } from './utils';