@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

package/dist/cjs/base/ui/theme/default_theme/select_variants.js

@@ -0,0 +1,59 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var styleForChevron = {
+  // https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
+  // You can use https://www.npmjs.com/package/mini-svg-data-uri to generate the `background-image` from a svg.
+  backgroundImage: "url(\"data:image/svg+xml,%3csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.601.8h4.8a.6.6 0 01.48.96l-2.4 3.2a.6.6 0 01-.96 0l-2.4-3.2A.6.6 0 01.601.8z' fill='rgba(0%2c 0%2c 0%2c 0.5)'/%3e%3c/svg%3e\")",
+  backgroundRepeat: 'no-repeat'
+};
+var baseStyles = (0, _emotion.css)(_objectSpread(_objectSpread({
+  fontFamily: _tokens.fontFamilies.default,
+  borderRadius: _tokens.radii.default,
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingTop: 0,
+  paddingBottom: 0,
+  fontWeight: 400,
+  outline: 'none',
+  appearance: 'none',
+  border: 'none'
+}, styleForChevron), {}, {
+  '&:not(:disabled)': {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+    }
+  },
+  '&:disabled': {
+    cursor: 'default',
+    opacity: _tokens.opacities.quieter
+  }
+}));
+var selectVariants = {
+  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.dark,
+    backgroundColor: _tokens.colors.lightGray2
+  }))
+};
+var _default = exports.default = selectVariants;

package/dist/cjs/base/ui/theme/default_theme/switch_variants.js

@@ -0,0 +1,91 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _emotion = require("emotion");
+var _css_helpers = _interopRequireDefault(require("../../css_helpers"));
+var _tokens = require("./tokens");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SWITCH_WIDTH = 20;
+var SWITCH_HEIGHT = 12;
+var SWITCH_PADDING = 2;
+var CIRCLE_SIZE = SWITCH_HEIGHT - 2 * SWITCH_PADDING;
+var switchClassName = (0, _emotion.css)({
+  width: CIRCLE_SIZE,
+  height: CIRCLE_SIZE,
+  transition: '0.085s all ease-in',
+  borderRadius: _tokens.radii.circle,
+  backgroundColor: _tokens.colors.white
+});
+var switchContainerClassName = (0, _emotion.css)({
+  flex: 'none',
+  width: SWITCH_WIDTH,
+  height: SWITCH_HEIGHT,
+  padding: SWITCH_PADDING,
+  transition: '0.085s all ease-in',
+  boxSizing: 'border-box',
+  borderRadius: _tokens.radii.circle,
+  backgroundColor: _tokens.colors.darken2
+});
+var switchLabelClassName = (0, _emotion.css)({
+  cursor: 'inherit',
+  userSelect: 'none',
+  marginLeft: _tokens.space[2],
+  color: _tokens.colors.dark,
+  flex: 'auto'
+});
+var baseStyles = (0, _emotion.css)({
+  alignItems: 'center',
+  borderRadius: _tokens.radii.default,
+  boxSizing: 'border-box',
+  outline: 'none',
+  fontFamily: _tokens.fontFamilies.default,
+  backgroundColor: _tokens.colors.lightGray2,
+  '&[aria-disabled="true"]': {
+    opacity: _tokens.opacities.quieter
+  },
+  '&:not([aria-disabled="true"])': {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+    }
+  },
+  ["&[aria-checked=\"true\"] .".concat(switchClassName)]: {
+    transform: 'translateX(100%)'
+  }
+});
+var subcomponentClassNames = {
+  switchClassName,
+  switchContainerClassName,
+  switchLabelClassName: (0, _emotion.cx)(switchLabelClassName, _css_helpers.default.TRUNCATE)
+};
+var switchVariants = {
+  default: _objectSpread({
+    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+      ["&[aria-checked=\"true\"] > .".concat(switchContainerClassName)]: {
+        backgroundColor: _tokens.colors.greenBright
+      }
+    }))
+  }, subcomponentClassNames),
+  danger: _objectSpread({
+    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+      ["&[aria-checked=\"true\"] > .".concat(switchContainerClassName)]: {
+        backgroundColor: _tokens.colors.redBright
+      }
+    }))
+  }, subcomponentClassNames)
+};
+var _default = exports.default = switchVariants;

package/dist/cjs/base/ui/theme/default_theme/text_button_variants.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+var NOT_DISABLED = '&:not([aria-disabled="true"])';
+var DISABLED = '&[aria-disabled="true"]';
+var baseStyles = (0, _emotion.css)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: _tokens.radii.default,
+  outline: 'none',
+  fontWeight: _tokens.fontWeights.strong,
+  [NOT_DISABLED]: {
+    cursor: 'pointer',
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: "0 0 0 2px ".concat(_tokens.colors.darken3)
+    }
+  },
+  [DISABLED]: {
+    opacity: _tokens.opacities.quieter
+  }
+});
+var textButtonVariants = {
+  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.blueBright
+  })),
+  dark: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.dark
+  })),
+  light: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.light
+  }))
+};
+var _default = exports.default = textButtonVariants;

package/dist/cjs/base/ui/theme/default_theme/text_styles.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var textStyles = {
+  default: {
+    small: {
+      fontSize: 1,
+      lineHeight: '14px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginY: 0
+    },
+    default: {
+      fontSize: 2,
+      lineHeight: '16px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginY: 0
+    },
+    large: {
+      fontSize: 3,
+      lineHeight: '20px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginY: 0
+    },
+    xlarge: {
+      fontSize: 4,
+      lineHeight: '24px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginY: 0
+    }
+  },
+  paragraph: {
+    small: {
+      fontSize: 1,
+      lineHeight: '16px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginTop: 0,
+      marginBottom: '1em'
+    },
+    default: {
+      fontSize: 2,
+      lineHeight: '20px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginTop: 0,
+      marginBottom: '1em'
+    },
+    large: {
+      fontSize: 3,
+      lineHeight: '22px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginTop: 0,
+      marginBottom: '1em'
+    },
+    xlarge: {
+      fontSize: 4,
+      lineHeight: '26px',
+      fontWeight: 400,
+      textColor: 'default',
+      fontFamily: 'default',
+      marginTop: 0,
+      marginBottom: '1em'
+    }
+  }
+};
+var _default = exports.default = textStyles;

package/dist/cjs/base/ui/theme/default_theme/tokens.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColorsByBackgroundColor = exports.textColors = exports.space = exports.radii = exports.opacities = exports.fontWeights = exports.fontSizes = exports.fontFamilies = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
+var colors = exports.colors = {
+  // neutrals
+  white: 'hsl(0, 0%, 100%)',
+  dark: 'hsl(0, 0%, 20%)',
+  // light is the lightest text color possible.
+  light: 'hsl(0, 0%, 46%)',
+  // Light grays are solid colors used for backgrounds primarily.
+  lightGray1: 'hsl(0, 0%, 98%)',
+  lightGray2: 'hsl(0, 0%, 95%)',
+  lightGray3: 'hsl(0, 0%, 91%)',
+  lightGray4: 'hsl(0, 0%, 88%)',
+  lighten1: 'hsla(0, 0%, 100%, 0.05)',
+  lighten2: 'hsla(0, 0%, 100%, 0.1)',
+  lighten3: 'hsla(0, 0%, 100%, 0.25)',
+  lighten4: 'hsla(0, 0%, 100%, 0.5)',
+  darken1: 'hsla(0, 0%, 0%, 0.05)',
+  darken2: 'hsla(0, 0%, 0%, 0.1)',
+  darken3: 'hsla(0, 0%, 0%, 0.25)',
+  darken4: 'hsla(0, 0%, 0%, 0.5)',
+  // blue
+  blueBright: 'rgb(45, 127, 249)',
+  blue: 'rgb(18, 131, 218)',
+  blueDark1: 'rgb(39, 80, 174)',
+  blueLight1: 'rgb(156, 199, 255)',
+  blueLight2: 'rgb(207, 223, 255)',
+  // cyan
+  cyanBright: 'rgb(24, 191, 255)',
+  cyan: 'rgb(1, 169, 219)',
+  cyanDark1: 'rgb(11, 118, 183)',
+  cyanLight1: 'rgb(119, 209, 243)',
+  cyanLight2: 'rgb(208, 240, 253)',
+  // gray
+  grayBright: 'rgb(102, 102, 102)',
+  gray: 'rgb(102, 102, 102)',
+  grayDark1: 'rgb(68, 68, 68)',
+  grayLight1: 'rgb(204, 204, 204)',
+  grayLight2: 'rgb(238, 238, 238)',
+  // green
+  greenBright: 'rgb(32, 201, 51)',
+  green: 'rgb(17, 175, 34)',
+  greenDark1: 'rgb(51, 138, 23)',
+  greenLight1: 'rgb(147, 224, 136)',
+  greenLight2: 'rgb(209, 247, 196)',
+  // orange
+  orangeBright: 'rgb(255, 111, 44)',
+  orange: 'rgb(247, 101, 59)',
+  orangeDark1: 'rgb(215, 77, 38)',
+  orangeLight1: 'rgb(255, 169, 129)',
+  orangeLight2: 'rgb(254, 226, 213)',
+  // pink
+  pinkBright: 'rgb(255, 8, 194)',
+  pink: 'rgb(233, 41, 186)',
+  pinkDark1: 'rgb(178, 21, 139)',
+  pinkLight1: 'rgb(249, 157, 226)',
+  pinkLight2: 'rgb(255, 218, 246)',
+  // purple
+  purpleBright: 'rgb(139, 70, 255)',
+  purple: 'rgb(124, 57, 237)',
+  purpleDark1: 'rgb(107, 28, 176)',
+  purpleLight1: 'rgb(205, 176, 255)',
+  purpleLight2: 'rgb(237, 226, 254)',
+  // red
+  redBright: 'rgb(248, 43, 96)',
+  red: 'rgb(229, 46, 77)',
+  redDark1: 'rgb(186, 30, 69)',
+  redLight1: 'rgb(255, 158, 183)',
+  redLight2: 'rgb(255, 220, 229)',
+  // teal
+  tealBright: 'rgb(32, 217, 210)',
+  teal: 'rgb(2, 170, 164)',
+  tealDark1: 'rgb(6, 160, 155)',
+  tealLight1: 'rgb(114, 221, 195)',
+  tealLight2: 'rgb(194, 245, 233)',
+  // yellow
+  yellowBright: 'rgb(252, 180, 0)',
+  yellow: 'rgb(224, 141, 0)',
+  yellowDark1: 'rgb(184, 117, 3)',
+  yellowLight1: 'rgb(255, 214, 110)',
+  yellowLight2: 'rgb(255, 234, 182)'
+};
+var textColorsByBackgroundColor = exports.textColorsByBackgroundColor = {
+  // blue bg
+  blueBright: 'white',
+  blue: 'white',
+  blueDark1: 'rgb(207, 223, 255)',
+  blueLight1: 'rgb(0, 0, 60)',
+  blueLight2: 'rgb(0, 0, 60)',
+  // cyan bg
+  cyanBright: 'white',
+  cyan: 'white',
+  cyanDark1: 'rgb(208, 240, 253)',
+  cyanLight1: 'rgb(0, 17, 68)',
+  cyanLight2: 'rgb(0, 17, 68)',
+  // gray bg
+  grayBright: 'white',
+  gray: 'white',
+  grayDark1: 'rgb(238, 238, 238)',
+  grayLight1: 'rgb(0, 0, 0)',
+  grayLight2: 'rgb(0, 0, 0)',
+  // green bg
+  greenBright: 'white',
+  green: 'white',
+  greenDark1: 'rgb(209, 247, 196)',
+  greenLight1: 'rgb(0, 34, 0)',
+  greenLight2: 'rgb(0, 34, 0)',
+  // orange bg
+  orangeBright: 'white',
+  orange: 'white',
+  orangeDark1: 'rgb(254, 226, 213)',
+  orangeLight1: 'rgb(83, 0, 0)',
+  orangeLight2: 'rgb(83, 0, 0)',
+  // pink bg
+  pinkBright: 'white',
+  pink: 'white',
+  pinkDark1: 'rgb(255, 218, 246)',
+  pinkLight1: 'rgb(58, 0, 33)',
+  pinkLight2: 'rgb(58, 0, 33)',
+  // purple bg
+  purpleBright: 'white',
+  purple: 'white',
+  purpleDark1: 'rgb(237, 226, 254)',
+  purpleLight1: 'rgb(12, 0, 62)',
+  purpleLight2: 'rgb(12, 0, 62)',
+  // red bg
+  redBright: 'white',
+  red: 'white',
+  redDark1: 'rgb(255, 220, 229)',
+  redLight1: 'rgb(64, 0, 0)',
+  redLight2: 'rgb(64, 0, 0)',
+  // teal bg
+  tealBright: 'white',
+  teal: 'white',
+  tealDark1: 'rgb(194, 245, 233)',
+  tealLight1: 'rgb(0, 47, 46)',
+  tealLight2: 'rgb(0, 47, 46)',
+  // yellow bg
+  yellowBright: 'white',
+  yellow: 'white',
+  yellowDark1: 'rgb(255, 234, 182)',
+  yellowLight1: 'rgb(66, 10, 0)',
+  yellowLight2: 'rgb(66, 10, 0)'
+};
+var textColors = exports.textColors = {
+  dark: colors.dark,
+  default: colors.dark,
+  light: colors.light
+};
+var breakpoints = exports.breakpoints = {
+  xsmallViewport: '480px',
+  smallViewport: '640px',
+  mediumViewport: '832px',
+  largeViewport: '1152px'
+};
+var borderWidths = exports.borderWidths = {
+  default: '1px',
+  thick: '2px'
+};
+var borders = exports.borders = {
+  default: "1px solid ".concat(colors.darken2),
+  thick: "2px solid ".concat(colors.darken2)
+};
+var fontFamilies = exports.fontFamilies = {
+  default: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+  monospace: ' Menlo, Courier, monospace'
+};
+
+// On Mac OS X when `-apple-system` is used, two different fonts are rendered at different font sizes.
+// SF Pro Text is used under 21px (0-5) and SF Pro Display is used from 21px and up (6-9).
+// SF Pro Text visually looks slightly bigger than SF Pro Display.
+var fontSizes = exports.fontSizes = ['9px',
+// 0
+'11px',
+// 1
+'13px',
+// 2
+'15px',
+// 3
+'17px',
+// 4
+'19px',
+// 5
+'21px',
+// 6
+'23px',
+// 7
+'27px',
+// 8
+'35px' // 9
+];
+var fontWeights = exports.fontWeights = {
+  strong: 500
+};
+var opacities = exports.opacities = {
+  normal: 1,
+  quiet: 0.75,
+  quieter: 0.5,
+  quietest: 0.25,
+  invisible: 0
+};
+var radii = exports.radii = {
+  default: 3,
+  large: 6,
+  circle: 9999
+};
+var space = exports.space = [0, 4, 8, 16, 32, 64, 128];

package/dist/cjs/base/ui/theme/theme_context.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _default_theme = _interopRequireDefault(require("./default_theme"));
+/** @hidden */
+
+var ThemeContext = /*#__PURE__*/(0, _react.createContext)(_default_theme.default);
+var _default = exports.default = ThemeContext;

package/dist/cjs/base/ui/theme/use_theme.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _theme_context = _interopRequireDefault(require("./theme_context"));
+var useTheme = () => (0, _react.useContext)(_theme_context.default);
+var _default = exports.default = useTheme;