@workday/canvas-kit-preview-react 11.1.0-833-next.0 → 11.1.0

package/dist/commonjs/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/Divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/commonjs/divider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/Divider"), exports);

package/dist/commonjs/divider/lib/Divider.d.ts

@@ -0,0 +1,34 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export declare const dividerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    space: string;
+}, never>, {
+    space: string;
+}, never, never>;
+export interface DividerProps extends CSProps {
+    /**
+     * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
+     * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+     * @default `system.space.x4` (1rem)
+     */
+    space?: string;
+}
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export declare const Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/commonjs/divider/lib/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../divider/lib/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,OAAO,EAIR,MAAM,6BAA6B,CAAC;AAGrC,eAAO,MAAM,cAAc;;;;gBAazB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,iFAKlB,CAAC"}

package/dist/commonjs/divider/lib/Divider.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.dividerStencil = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.dividerStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        space: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+    },
+    base: { name: "0e6d61", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
+}, "divider-156e29");
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+exports.Divider = common_1.createComponent('hr')({
+    displayName: 'Divider',
+    Component: ({ space, ...elemProps }, ref, Element) => (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, exports.dividerStencil({ space }))))),
+});

package/dist/commonjs/index.d.ts

@@ -1,13 +1,14 @@
 export * from './color-picker';
+export * from './divider';
 export * from './form-field';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/commonjs/index.js

@@ -11,14 +11,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./color-picker"), exports);
+__exportStar(require("./divider"), exports);
 __exportStar(require("./form-field"), exports);
 __exportStar(require("./loading-sparkles"), exports);
 __exportStar(require("./menu"), exports);
 __exportStar(require("./pill"), exports);
+__exportStar(require("./radio"), exports);
 __exportStar(require("./segmented-control"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
 __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
-__exportStar(require("./radio"), exports);

package/dist/es6/divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/Divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/es6/divider/index.js

@@ -0,0 +1 @@
+export * from './lib/Divider';

package/dist/es6/divider/lib/Divider.d.ts

@@ -0,0 +1,34 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export declare const dividerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    space: string;
+}, never>, {
+    space: string;
+}, never, never>;
+export interface DividerProps extends CSProps {
+    /**
+     * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
+     * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+     * @default `system.space.x4` (1rem)
+     */
+    space?: string;
+}
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export declare const Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/es6/divider/lib/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../divider/lib/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,OAAO,EAIR,MAAM,6BAA6B,CAAC;AAGrC,eAAO,MAAM,cAAc;;;;gBAazB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,iFAKlB,CAAC"}

package/dist/es6/divider/lib/Divider.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStencil, handleCsProp, calc, cssVar, px2rem, } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+export const dividerStencil = createStencil({
+    vars: {
+        space: cssVar(system.space.x4),
+    },
+    base: { name: "0e6d61", styles: "--space-divider-156e29:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-156e29) / 2) 0;" }
+}, "divider-156e29");
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export const Divider = createComponent('hr')({
+    displayName: 'Divider',
+    Component: ({ space, ...elemProps }, ref, Element) => (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, dividerStencil({ space }))))),
+});

package/dist/es6/index.d.ts

@@ -1,13 +1,14 @@
 export * from './color-picker';
+export * from './divider';
 export * from './form-field';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/es6/index.js

@@ -1,12 +1,13 @@
 export * from './color-picker';
+export * from './divider';
 export * from './form-field';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';

package/divider/index.ts

@@ -0,0 +1 @@
+export * from './lib/Divider';

package/divider/lib/Divider.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {
+  createStencil,
+  handleCsProp,
+  CSProps,
+  calc,
+  cssVar,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export const dividerStencil = createStencil({
+  vars: {
+    space: cssVar(system.space.x4),
+  },
+  base: ({space}) => {
+    return {
+      display: 'block',
+      height: px2rem(1),
+      border: 'none',
+      borderTop: `1px solid ${system.color.border.divider}`,
+      margin: `${calc.divide(space, 2)} 0`,
+    };
+  },
+});
+
+export interface DividerProps extends CSProps {
+  /**
+   * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
+   * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
+   * @default `system.space.x4` (1rem)
+   */
+  space?: string;
+}
+
+/**
+ * # Divider
+ * A divider to segment and visually organize content. By default, it renders a semantic `[<hr>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)` element.
+ *
+ * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider-react)
+ *
+ * The `space` prop will equally apply top and bottom margin styles.
+ * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ *
+ * @example
+ * ```tsx
+ * import { Divider } from '@workday/canvas-kit-preview-react/divider';
+ * import {system} from '@workday/canvas-tokens-web';
+ *
+ * <Divider space={system.space.x2} />
+ *
+ * ```
+ */
+export const Divider = createComponent('hr')({
+  displayName: 'Divider',
+  Component: ({space, ...elemProps}: DividerProps, ref, Element) => (
+    <Element ref={ref} {...handleCsProp(elemProps, dividerStencil({space}))} />
+  ),
+});

package/divider/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/divider",
+  "module": "../dist/es6/divider",
+  "sideEffects": false,
+  "types": "../dist/es6/divider"
+}

package/index.ts

@@ -1,12 +1,13 @@
 export * from './color-picker';
+export * from './divider';
 export * from './form-field';
 export * from './loading-sparkles';
 export * from './menu';
 export * from './pill';
+export * from './radio';
 export * from './segmented-control';
 export * from './select';
 export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './radio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.1.0-833-next.0",
+  "version": "11.1.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.1.0-833-next.0",
-    "@workday/canvas-kit-styling": "^11.1.0-833-next.0",
+    "@workday/canvas-kit-react": "^11.1.0",
+    "@workday/canvas-kit-styling": "^11.1.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "d810cce07772db36ba395b874bd25d90e6072b09"
+  "gitHead": "0b38e0b6ec6a0990e4bad0375dc57ecf15239d2c"
 }