@gnist/design-system 0.0.6

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -0,0 +1,82 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const componentUtils = require("@gnist/component-utils");
+const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("@gnist/themes/tokens.css.js");
+require("react-content-loader");
+const shared = require("../shared.cjs");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
+require("../../../foundation/typography/index.cjs");
+const React = require("react");
+const classNames = require("classnames");
+require("../../../foundation/logos/Logo.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const base = require("@mui/base");
+const dynamic = require("@vanilla-extract/dynamic");
+require("../../actions/buttons/PrimaryButton.cjs");
+require("../../actions/buttons/SecondaryButton.cjs");
+require("../../actions/buttons/SuccessButton.cjs");
+require("../../actions/buttons/DangerButton.cjs");
+require("../../actions/buttons/GhostButton.cjs");
+require("../../actions/buttons/TextButton.cjs");
+require("../../actions/buttons/IconButton.cjs");
+const Checkbox = require("../../actions/selectionControls/Checkbox.cjs");
+require("../../actions/selectionControls/RadioButton.cjs");
+require("../../actions/chips/ActionChip.cjs");
+require("../../actions/chips/FilterChip.cjs");
+require("../../actions/chips/TagChip.cjs");
+const inputField_css = require("../shared-styles/inputField.css.cjs");
+const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
+const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
+const select_css = require("./select.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
+const listBoxComponent = componentUtils.component("listBox", select_css.listBoxStyle, "div");
+const popUpComponent = componentUtils.component("popUp", select_css.popUpStyle, "div");
+function SelectBase(props, isMultiple, ref) {
+  var _a, _b;
+  const { contentProps, wrapperProps, commonInputProps } = shared.useSelectInputLogic(props);
+  const { selectProps } = shared.getSelectInputProps(props);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type
+  }), children: [jsxRuntime.jsx(base.Select, { className: select_css.selectStyle, style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
+      [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
+    })
+  }, ...commonInputProps, ...selectProps, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+    listbox: listBoxComponent,
+    popup: popUpComponent
+  }, onChange: (e, value) => {
+    var _a2;
+    (_a2 = selectProps.onChange) == null ? void 0 : _a2.call(selectProps, value);
+  }, children: props.options.map((option) => {
+    var _a2;
+    return jsxRuntime.jsxs(base.Option, { value: option.value, className: select_css.optionStyle, children: [jsxRuntime.jsx("div", { className: select_css.optionBackground }), isMultiple ? jsxRuntime.jsx(Checkbox.Checkbox, { label: option.label, value: Array.isArray(props.value) && ((_a2 = props.value) == null ? void 0 : _a2.includes(option.value)), readOnly: true, tabIndex: -1 }) : jsxRuntime.jsxs("div", { className: select_css.singleOptionStyle, children: [jsxRuntime.jsx("p", { children: option.label }), typeof props.value === "string" && props.value === option.value && jsxRuntime.jsx(Icon.Icon, { icon: "check" })] })] }, option.value);
+  }) }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: props.leadingIcon, className: atoms_css_js.atoms({
+    paddingRight: "xxs",
+    color: props.disabled ? "on-disabled" : "on-surface"
+  }) }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value,
+    disabled: props.disabled
+  }), style: {
+    ...dynamic.assignInlineVars({
+      [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsxRuntime.jsx("span", { style: { position: "relative" }, children: props.label }) }), jsxRuntime.jsx("span", { style: { flexGrow: "1" } }), jsxRuntime.jsx(Icon.Icon, { icon: isExpanded ? "expand_less" : "expand_more", className: atoms_css_js.atoms({
+    paddingLeft: "xxs",
+    color: props.disabled ? "on-disabled" : "on-surface"
+  }) })] })] }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, disabled: props.disabled })] });
+}
+exports.SelectBase = SelectBase;

package/dist/components/inputs/dropdowns/SelectBase.d.ts

@@ -0,0 +1,14 @@
+import { SelectBaseInputProps } from "../shared.js";
+import { ForwardedRef } from "react";
+export interface SelectBaseProps<TVal> extends SelectBaseInputProps<TVal> {
+    /**
+     * Values to be listed as options
+     * @default []
+     */
+    options: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare function SelectBase<T>(props: SelectBaseProps<T>, isMultiple: boolean, ref: ForwardedRef<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectBase.d.ts.map

package/dist/components/inputs/dropdowns/SelectBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA2HvC"}

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { component } from "@gnist/component-utils";
+import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import "../../../utilities/layout/Row.js";
+import "@gnist/themes/tokens.css.js";
+import "react-content-loader";
+import { useSelectInputLogic, getSelectInputProps } from "../shared.js";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import "../../../foundation/typography/index.js";
+import { useState } from "react";
+import classNames from "classnames";
+import "../../../foundation/logos/Logo.css.js";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { Select, Option } from "@mui/base";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import "../../actions/buttons/PrimaryButton.js";
+import "../../actions/buttons/SecondaryButton.js";
+import "../../actions/buttons/SuccessButton.js";
+import "../../actions/buttons/DangerButton.js";
+import "../../actions/buttons/GhostButton.js";
+import "../../actions/buttons/TextButton.js";
+import "../../actions/buttons/IconButton.js";
+import { Checkbox } from "../../actions/selectionControls/Checkbox.js";
+import "../../actions/selectionControls/RadioButton.js";
+import "../../actions/chips/ActionChip.js";
+import "../../actions/chips/FilterChip.js";
+import "../../actions/chips/TagChip.js";
+import { wrapperStyle, inputFieldWrapperRecipe, inputContentWrapper } from "../shared-styles/inputField.css.js";
+import { preInputWidth, postInputWidth } from "../shared-styles/inputFieldConstants.css.js";
+import { labelStyle } from "../shared-styles/labelStyles.css.js";
+import { listBoxStyle, popUpStyle, selectStyle, optionStyle, optionBackground, singleOptionStyle } from "./select.css.js";
+const listBoxComponent = component("listBox", listBoxStyle, "div");
+const popUpComponent = component("popUp", popUpStyle, "div");
+function SelectBase(props, isMultiple, ref) {
+  var _a, _b;
+  const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);
+  const { selectProps } = getSelectInputProps(props);
+  const [isExpanded, setIsExpanded] = useState(false);
+  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
+    disabled: props.disabled,
+    density: props.density,
+    validityType: (_a = props.validity) == null ? void 0 : _a.type
+  }), children: [jsx(Select, { className: selectStyle, style: {
+    ...assignInlineVars({
+      [preInputWidth]: wrapperProps.preInputWidth,
+      [postInputWidth]: wrapperProps.postInputWidth
+    })
+  }, ...commonInputProps, ...selectProps, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+    listbox: listBoxComponent,
+    popup: popUpComponent
+  }, onChange: (e, value) => {
+    var _a2;
+    (_a2 = selectProps.onChange) == null ? void 0 : _a2.call(selectProps, value);
+  }, children: props.options.map((option) => {
+    var _a2;
+    return jsxs(Option, { value: option.value, className: optionStyle, children: [jsx("div", { className: optionBackground }), isMultiple ? jsx(Checkbox, { label: option.label, value: Array.isArray(props.value) && ((_a2 = props.value) == null ? void 0 : _a2.includes(option.value)), readOnly: true, tabIndex: -1 }) : jsxs("div", { className: singleOptionStyle, children: [jsx("p", { children: option.label }), typeof props.value === "string" && props.value === option.value && jsx(Icon, { icon: "check" })] })] }, option.value);
+  }) }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: props.leadingIcon, className: atoms({
+    paddingRight: "xxs",
+    color: props.disabled ? "on-disabled" : "on-surface"
+  }) }), jsx("label", { id: contentProps.labelId, className: labelStyle({
+    density: props.density,
+    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    isElevated: !!props.value,
+    disabled: props.disabled
+  }), style: {
+    ...assignInlineVars({
+      [preInputWidth]: wrapperProps.preInputWidth
+    })
+  }, children: jsx("span", { style: { position: "relative" }, children: props.label }) }), jsx("span", { style: { flexGrow: "1" } }), jsx(Icon, { icon: isExpanded ? "expand_less" : "expand_more", className: atoms({
+    paddingLeft: "xxs",
+    color: props.disabled ? "on-disabled" : "on-surface"
+  }) })] })] }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, disabled: props.disabled })] });
+}
+export {
+  SelectBase
+};

package/dist/components/inputs/dropdowns/SingleSelect.cjs

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const SelectBase = require("./SelectBase.cjs");
+const SingleSelect = React.forwardRef(function SingleSelect2(props, ref) {
+  return SelectBase.SelectBase(props, false, ref);
+});
+exports.SingleSelect = SingleSelect;

package/dist/components/inputs/dropdowns/SingleSelect.d.ts

@@ -0,0 +1,9 @@
+import { SelectBaseProps } from "./SelectBase.js";
+export type SingleSelectProps = SelectBaseProps<string>;
+/**
+ Single select allows users to select one item from a predefined list of options, presented in a dropdown. We typically see selects in forms.
+
+ When the user opens the list, the first option is selected, and as the user hovers or arrows down the options, selected options are highlighted.  The single select can be used with or without leading icons in the item list.
+ */
+export declare const SingleSelect: React.FC<SingleSelectProps>;
+//# sourceMappingURL=SingleSelect.d.ts.map

package/dist/components/inputs/dropdowns/SingleSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SingleSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAExD;;;;GAIG;AAEH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAIpD,CAAC"}

package/dist/components/inputs/dropdowns/SingleSelect.js

@@ -0,0 +1,9 @@
+"use client";
+import { forwardRef } from "react";
+import { SelectBase } from "./SelectBase.js";
+const SingleSelect = forwardRef(function SingleSelect2(props, ref) {
+  return SelectBase(props, false, ref);
+});
+export {
+  SingleSelect
+};

package/dist/components/inputs/dropdowns/index.cjs

@@ -0,0 +1,7 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MultiSelect = require("./MultiSelect.cjs");
+const SingleSelect = require("./SingleSelect.cjs");
+exports.MultiSelect = MultiSelect.MultiSelect;
+exports.SingleSelect = SingleSelect.SingleSelect;

package/dist/components/inputs/dropdowns/index.d.ts

@@ -0,0 +1,3 @@
+export { MultiSelect } from "./MultiSelect.js";
+export { SingleSelect } from "./SingleSelect.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/dropdowns/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/inputs/dropdowns/index.js

@@ -0,0 +1,7 @@
+"use client";
+import { MultiSelect } from "./MultiSelect.js";
+import { SingleSelect } from "./SingleSelect.js";
+export {
+  MultiSelect,
+  SingleSelect
+};

package/dist/components/inputs/dropdowns/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/inputs/dropdowns/select.css.cjs

@@ -0,0 +1,94 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const inputField_css = require("../shared-styles/inputField.css.cjs");
+const listBoxStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    flexDirection: "column",
+    marginTop: "s",
+    padding: "base",
+    borderRadius: "picker",
+    backgroundColor: "surface",
+    color: "on-surface",
+    boxShadow: "medium",
+    rowGap: "base"
+  }),
+  {
+    outline: "none",
+    maxHeight: "40vh",
+    height: "fit-content",
+    overflow: "auto"
+  }
+]);
+const popUpStyle = css.style({
+  zIndex: 1400,
+  minWidth: "280px",
+  maxWidth: "100%"
+});
+const selectStyle = css.style([
+  inputField_css.inputFieldStyle,
+  {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    cursor: "default"
+  }
+]);
+const optionStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    position: "relative",
+    height: "xl",
+    borderRadius: "picker",
+    alignItems: "center"
+  }),
+  {
+    cursor: "pointer",
+    padding: `0 ${tokens_css_js.tokens.spacing.xs}`,
+    outline: "none",
+    selectors: {
+      "&:focus,&:focus-visible": {
+        outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
+      }
+    }
+  }
+]);
+const singleOptionStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  { width: "100%" }
+]);
+const optionBackground = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    position: "absolute",
+    backgroundColor: "on-surface",
+    borderRadius: "picker"
+  }),
+  {
+    opacity: 0,
+    height: "100%",
+    width: "100%",
+    right: 0,
+    selectors: {
+      "&:hover": { opacity: tokens_css_js.tokens.opacity["on-hover"] },
+      "&:active": { opacity: tokens_css_js.tokens.opacity["on-pressed"] },
+      "&:focus,&:focus-visible": {
+        opacity: tokens_css_js.tokens.opacity["on-focus"]
+      }
+    }
+  }
+]);
+exports.listBoxStyle = listBoxStyle;
+exports.optionBackground = optionBackground;
+exports.optionStyle = optionStyle;
+exports.popUpStyle = popUpStyle;
+exports.selectStyle = selectStyle;
+exports.singleOptionStyle = singleOptionStyle;

package/dist/components/inputs/dropdowns/select.css.d.ts

@@ -0,0 +1,7 @@
+export declare const listBoxStyle: string;
+export declare const popUpStyle: string;
+export declare const selectStyle: string;
+export declare const optionStyle: string;
+export declare const singleOptionStyle: string;
+export declare const optionBackground: string;
+//# sourceMappingURL=select.css.d.ts.map

package/dist/components/inputs/dropdowns/select.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/select.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,QAkBvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAIrB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,WAAW,QAkBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAoB3B,CAAC"}

package/dist/components/inputs/dropdowns/select.css.js

@@ -0,0 +1,94 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+import { inputFieldStyle } from "../shared-styles/inputField.css.js";
+const listBoxStyle = style([
+  atoms({
+    display: "flex",
+    flexDirection: "column",
+    marginTop: "s",
+    padding: "base",
+    borderRadius: "picker",
+    backgroundColor: "surface",
+    color: "on-surface",
+    boxShadow: "medium",
+    rowGap: "base"
+  }),
+  {
+    outline: "none",
+    maxHeight: "40vh",
+    height: "fit-content",
+    overflow: "auto"
+  }
+]);
+const popUpStyle = style({
+  zIndex: 1400,
+  minWidth: "280px",
+  maxWidth: "100%"
+});
+const selectStyle = style([
+  inputFieldStyle,
+  {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    cursor: "default"
+  }
+]);
+const optionStyle = style([
+  atoms({
+    display: "flex",
+    position: "relative",
+    height: "xl",
+    borderRadius: "picker",
+    alignItems: "center"
+  }),
+  {
+    cursor: "pointer",
+    padding: `0 ${tokens.spacing.xs}`,
+    outline: "none",
+    selectors: {
+      "&:focus,&:focus-visible": {
+        outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
+      }
+    }
+  }
+]);
+const singleOptionStyle = style([
+  atoms({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  { width: "100%" }
+]);
+const optionBackground = style([
+  atoms({
+    display: "flex",
+    position: "absolute",
+    backgroundColor: "on-surface",
+    borderRadius: "picker"
+  }),
+  {
+    opacity: 0,
+    height: "100%",
+    width: "100%",
+    right: 0,
+    selectors: {
+      "&:hover": { opacity: tokens.opacity["on-hover"] },
+      "&:active": { opacity: tokens.opacity["on-pressed"] },
+      "&:focus,&:focus-visible": {
+        opacity: tokens.opacity["on-focus"]
+      }
+    }
+  }
+]);
+export {
+  listBoxStyle,
+  optionBackground,
+  optionStyle,
+  popUpStyle,
+  selectStyle,
+  singleOptionStyle
+};

package/dist/components/inputs/index.cjs

@@ -0,0 +1,15 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MultiSelect = require("./dropdowns/MultiSelect.cjs");
+const SingleSelect = require("./dropdowns/SingleSelect.cjs");
+const calendar = require("./pickers/calendar.cjs");
+const TextArea = require("./textFields/TextArea.cjs");
+const TextField = require("./textFields/TextField.cjs");
+exports.MultiSelect = MultiSelect.MultiSelect;
+exports.SingleSelect = SingleSelect.SingleSelect;
+exports.Calendar = calendar.Calendar;
+exports.TextArea = TextArea.TextArea;
+exports.characterCount = TextArea.characterCount;
+exports.wordCount = TextArea.wordCount;
+exports.TextField = TextField.TextField;

package/dist/components/inputs/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./dropdowns/index.js";
+export * from "./pickers/index.js";
+export * from "./textFields/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC"}

package/dist/components/inputs/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { MultiSelect } from "./dropdowns/MultiSelect.js";
+import { SingleSelect } from "./dropdowns/SingleSelect.js";
+import { Calendar } from "./pickers/calendar.js";
+import { TextArea, characterCount, wordCount } from "./textFields/TextArea.js";
+import { TextField } from "./textFields/TextField.js";
+export {
+  Calendar,
+  MultiSelect,
+  SingleSelect,
+  TextArea,
+  TextField,
+  characterCount,
+  wordCount
+};

package/dist/components/inputs/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/components/inputs/pickers/Calendar.css.cjs

@@ -0,0 +1,152 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const states_css = require("../../../styles/states.css.cjs");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const recipes = require("@vanilla-extract/recipes");
+const containerStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    flexDirection: "column",
+    padding: "s",
+    gap: "xs",
+    borderRadius: "input",
+    boxShadow: "low",
+    backgroundColor: "surface"
+  }),
+  {
+    width: "fit-content"
+  }
+]);
+const gridStyle = css.style([
+  atoms_css_js.atoms({
+    display: "flex",
+    flexDirection: "column",
+    gap: "xs"
+  }),
+  {
+    width: "fit-content"
+  }
+]);
+const rowStyle = css.style([
+  atoms_css_js.atoms({
+    gap: "base",
+    height: "xl"
+  }),
+  {
+    display: "grid",
+    gridTemplateColumns: `repeat(7, ${tokens_css_js.tokens.size.xl} [col-start])`
+  }
+]);
+const firstDay = css.createVar();
+css.globalStyle(`${rowStyle} > *:first-child`, {
+  gridColumn: firstDay ? cssUtils.calc(firstDay).add(1).toString() : 1
+});
+const selectMonthRow = atoms_css_js.atoms({
+  display: "flex",
+  justifyContent: "space-between",
+  typography: "body-medium"
+});
+const headerCell = css.style([
+  { textAlign: "center" },
+  atoms_css_js.atoms({ typography: "detail-large" })
+]);
+const cellRecipe = recipes.recipe({
+  base: [
+    atoms_css_js.atoms({
+      typography: "body-large",
+      alignItems: "center",
+      justifyContent: "center",
+      display: "flex",
+      borderRadius: "picker"
+    }),
+    states_css.focusStyle,
+    {
+      padding: 0,
+      position: "relative",
+      height: "100%",
+      width: "100%",
+      border: "none"
+    }
+  ],
+  variants: {
+    isToday: {
+      true: {
+        border: `${tokens_css_js.tokens.stroke.small} ${tokens_css_js.tokens.color.primary} solid`
+      }
+    },
+    isSelected: {
+      true: [
+        atoms_css_js.atoms({
+          backgroundColor: "primary",
+          color: "on-primary"
+        })
+      ],
+      false: [
+        atoms_css_js.atoms({
+          color: "on-background"
+        }),
+        {
+          backgroundColor: "transparent"
+        }
+      ]
+    },
+    isHoliday: { true: {} },
+    isDisabled: {
+      true: {
+        color: tokens_css_js.tokens.color["text-variant"],
+        textDecoration: "line-through"
+      }
+    },
+    isUnavailable: {
+      true: {
+        color: tokens_css_js.tokens.color["text-variant"],
+        textDecoration: "line-through"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variants: { isSelected: false, isHoliday: true },
+      style: atoms_css_js.atoms({
+        color: "error"
+      })
+    },
+    {
+      variants: { isUnavailable: false, isDisabled: false },
+      style: states_css.stateLayers({
+        borderSize: "none",
+        borderRadius: "picker",
+        backgroundColor: "on-background",
+        setFocusState: false
+      })
+    }
+  ]
+});
+const buttonRow = atoms_css_js.atoms({
+  display: "flex",
+  gap: "base"
+});
+const arrowButton = css.style([atoms_css_js.atoms({ color: "on-background" })]);
+const cellSkeletonStyle = css.style([
+  atoms_css_js.atoms({
+    padding: "base",
+    borderRadius: "picker"
+  }),
+  {
+    boxSizing: "border-box"
+  }
+]);
+exports.arrowButton = arrowButton;
+exports.buttonRow = buttonRow;
+exports.cellRecipe = cellRecipe;
+exports.cellSkeletonStyle = cellSkeletonStyle;
+exports.containerStyle = containerStyle;
+exports.firstDay = firstDay;
+exports.gridStyle = gridStyle;
+exports.headerCell = headerCell;
+exports.rowStyle = rowStyle;
+exports.selectMonthRow = selectMonthRow;