@zendeskgarden/react-pagination 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/styled/CursorPagination/StyledIcon.js

@@ -0,0 +1,29 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const marginStyles = props => {
+  const {
+    $type,
+    theme
+  } = props;
+  const margin = theme.space.base;
+  if (theme.rtl) {
+    return css(["margin-", ":", "px;"], $type === 'last' || $type === 'next' ? 'right' : 'left', margin);
+  }
+  return css(["margin-", ":", "px;"], $type === 'first' || $type === 'previous' ? 'right' : 'left', margin);
+};
+const StyledIcon = styled(StyledBaseIcon).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-2vzk6e-0"
+})(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/OffsetPagination/StyledGapListItem.js

@@ -0,0 +1,41 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor } from '@zendeskgarden/react-theming';
+import { StyledListItem } from './StyledListItem.js';
+
+const COMPONENT_ID = 'pagination.gap';
+const sizeStyles = props => {
+  const shift = 2;
+  const fontSize = math(`${props.theme.fontSizes.md} + ${shift}`);
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(height, fontSize);
+  const padding = `${props.theme.space.base * 1.5}px`;
+  return css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, math(`${height} * 2`), height, lineHeight, fontSize);
+};
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["color:", ";"], getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
+const StyledGapListItem = styled(StyledListItem).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledGapListItem",
+  componentId: "sc-10wd0iz-0"
+})(["display:inline-block;text-align:center;", ";", " &:hover{color:inherit;}", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledGapListItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledGapListItem };

package/dist/esm/styled/OffsetPagination/StyledList.js

@@ -0,0 +1,31 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.list';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  return css(["color:", ";"], getColor({
+    variable: 'foreground.subtle',
+    theme
+  }));
+};
+const StyledList = styled.ul.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledList",
+  componentId: "sc-1uz2jxo-0"
+})(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " :focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledList };

package/dist/esm/styled/OffsetPagination/StyledListItem.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.list_item';
+const StyledListItem = styled.li.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledListItem",
+  componentId: "sc-16j4sju-0"
+})(["box-sizing:border-box;margin-left:", ";user-select:none;&", "{margin-left:0;}", ";"], props => `${props.theme.space.base}px`, props => props.theme.rtl ? ':last-of-type' : ':first-of-type', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledListItem.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledListItem };

package/dist/esm/styled/OffsetPagination/StyledNav.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.pagination_view';
+const StyledNav = styled.nav.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledNav",
+  componentId: "sc-ppnpkw-0"
+})(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNav.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNav };

package/dist/esm/styled/OffsetPagination/StyledNavigation.js

@@ -0,0 +1,23 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPage } from './StyledPage.js';
+
+const COMPONENT_ID = 'pagination.navigation';
+const StyledNavigation = styled(StyledPage).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledNavigation",
+  componentId: "sc-1lpl8pp-0"
+})(["display:flex;align-items:center;justify-content:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledNavigation.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledNavigation };

package/dist/esm/styled/OffsetPagination/StyledPage.js

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledPageBase } from './StyledPageBase.js';
+
+const COMPONENT_ID = 'pagination.page';
+const sizeStyles = props => {
+  const height = props.theme.space.base * 8;
+  return css(["min-width:", "px;max-width:", "px;&[aria-current='true']{max-width:none;}"], height, height * 2);
+};
+const StyledPage = styled(StyledPageBase).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledPage",
+  componentId: "sc-sxjfwy-0"
+})(["", ";&[aria-current=\"true\"]{font-weight:", ";}", ";"], props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPage.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPage };

package/dist/esm/styled/OffsetPagination/StyledPageBase.js

@@ -0,0 +1,93 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'pagination.page';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const disabledColor = getColor({
+    variable: 'foreground.disabled',
+    theme
+  });
+  const defaultColor = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const hoverForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const activeForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const currentForegroundColor = activeForegroundColor;
+  const currentBackgroundColor = hoverBackgroundColor;
+  const currentHoverBackgroundColor = activeBackgroundColor;
+  const currentActiveBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  return css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme,
+    inset: true
+  }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, disabledColor);
+};
+const sizeStyles = props => {
+  const fontSize = props.theme.fontSizes.md;
+  const height = `${props.theme.space.base * 8}px`;
+  const lineHeight = getLineHeight(height, fontSize);
+  const padding = `${props.theme.space.base * 1.5}px`;
+  return css(["padding:0 ", ";height:", ";line-height:", ";font-size:", ";"], padding, height, lineHeight, fontSize);
+};
+const StyledPageBase = styled.button.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledPageBase",
+  componentId: "sc-ttwj4u-0"
+})(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledPageBase.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledPageBase };