@rikstv/shared-components 0.8.1 → 1.1.79

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-export { RiksTVProvider } from "./core/RiksTV";
-export { StrimProvider } from "./core/Strim";
-export { LightMode } from "./core/LightMode";
-export { Accordion } from "./accordion/Accordion";
-export { PrimaryButton, SecondaryButton, TertiaryButton } from "./button/Button";
-export { PrimaryIconButton, SecondaryIconButton, TertiaryIconButton } from "./button/IconButton";
-export { ToggleButton } from "./toggleButton/ToggleButton";
-export { RadioToggleInput } from "./toggle/RadioToggle";
-export { FieldSet } from "./toggle/FieldSet";
-export { TextField } from "./textfield/TextField";
-export { DisplayTitle, H1, H2, H3, H4, Body, Bold, SubBody, Tag, Meta } from "./typography/Typography";

package/dist/textfield/TextField.js

@@ -1,87 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { forwardRef } from "react";
-import { S as SubBody } from "../typography/Typography.js";
-import { a as jsxs, j as jsx } from "../core/RiksTV.js";
-const generateId = (id) => {
-  if (id) {
-    return id;
-  }
-  return `${new Date().valueOf()}`;
-};
-var textfield = "";
-const TextField = forwardRef((_a, ref) => {
-  var _b = _a, {
-    className = "",
-    id,
-    labelClass = "",
-    type = "text",
-    fullWidth = false,
-    lightBackground = false,
-    label,
-    error
-  } = _b, props = __objRest(_b, [
-    "className",
-    "id",
-    "labelClass",
-    "type",
-    "fullWidth",
-    "lightBackground",
-    "label",
-    "error"
-  ]);
-  const errorTextId = generateId();
-  const generatedId = generateId(id);
-  return /* @__PURE__ */ jsxs("div", {
-    className: `rds-form-group ${className}`,
-    children: [/* @__PURE__ */ jsx("input", __spreadValues({
-      ref,
-      id: generatedId,
-      className: `
-        rds-textfield
-        rds-textfield--input ${error ? "rds-textfield--input--error" : ""} ${fullWidth ? "rds-textfield--input--full-width" : ""} ${lightBackground ? "rds-light" : ""}
-        `,
-      type,
-      placeholder: label,
-      "aria-describedby": error ? errorTextId : void 0
-    }, props)), error && /* @__PURE__ */ jsx(SubBody, {
-      id: errorTextId,
-      className: "rds-textfield--error-text",
-      children: error
-    }), /* @__PURE__ */ jsx("label", {
-      htmlFor: generatedId,
-      className: `rds-textfield rds-textfield--label ${labelClass} ${lightBackground ? "rds-light" : ""}`,
-      children: /* @__PURE__ */ jsx("span", {
-        children: label
-      })
-    })]
-  });
-});
-TextField.displayName = "TextField";
-export { TextField as T };

package/dist/textfield/textfield.scss

@@ -1,101 +0,0 @@
-@use "../typography/typography.scss";
-@use "../core/mixin/focus" as mix;
-@use "../core/mixin/rem";
-
-.rds-form-group {
-  --input-color: var(--rds-foreground-primary);
-  --input-label-color: var(--rds-foreground-secondary);
-  --input-border-color: var(--rds-foreground-primary);
-  --input-error-color: var(--rds-feedback-error);
-  --input-bg: var(--rds-background-primary);
-
-  .rds-textfield {
-    &--input {
-      border: 1px solid var(--input-border-color);
-      background-color: var(--input-border-bg);
-      color: var(--input-color);
-      border-radius: 2px;
-
-      height: 3rem;
-      width: 100%;
-      max-width: 500px;
-      padding: 0 var(--rds-spacing--8);
-
-      &--full-width {
-        max-width: unset;
-      }
-
-      &::placeholder {
-        opacity: 0;
-      }
-
-      &::-webkit-search-cancel-button {
-        -webkit-appearance: none;
-        display: none;
-      }
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0 30px var(--rds-background-primary) inset;
-        -webkit-box-shadow: 0 0 0 30px var(--rds-background-primary) inset;
-        -webkit-text-fill-color: var(--rds-foreground-primary);
-      }
-    }
-
-    &--label {
-      cursor: text;
-      background-color: var(--input-bg);
-      position: absolute;
-      padding: 0 8px;
-      top: 50%;
-      left: var(--rds-spacing--4);
-      transform: translateY(-50%);
-      transition: 0.2s ease-in-out;
-      transition-property: top, font-size;
-
-      span {
-        @extend .rds-bold;
-        font-size: rem.convert(18px);
-        color: var(--input-label-color);
-      }
-    }
-
-    &--error-text {
-      color: var(--input-error-color);
-      margin-top: 0.5rem;
-      margin-bottom: 0.5rem;
-      position: absolute;
-    }
-
-    @include mix.with-keyboard-focus;
-  }
-}
-
-.rds-form-group {
-  position: relative;
-
-  &:focus-within {
-    .rds-textfield--label {
-      top: 0;
-      font-size: 1rem;
-    }
-  }
-
-  input:not(:placeholder-shown) + label {
-    top: 0;
-    font-size: 1rem;
-  }
-}
-
-.rds-light {
-  .rds-textfield,
-  &.rds-textfield {
-    --input-color: var(--rds-button-primary-fg);
-    --input-border-color: var(--rds-button-primary-fg);
-    --input-bg: var(--surface-background);
-    &--label {
-      span {
-        --input-label-color: var(--rds-background-primary);
-      }
-    }
-  }
-}

package/dist/toggle/FieldSet.js

@@ -1,66 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { forwardRef } from "react";
-import { R as RadioContext } from "./RadioToggle.js";
-import { j as jsx, a as jsxs } from "../core/RiksTV.js";
-const FieldSet = forwardRef((_a, ref) => {
-  var _b = _a, {
-    legend,
-    children,
-    name,
-    className = "",
-    showLegend = false
-  } = _b, rest = __objRest(_b, [
-    "legend",
-    "children",
-    "name",
-    "className",
-    "showLegend"
-  ]);
-  return /* @__PURE__ */ jsx(RadioContext.Provider, {
-    value: {
-      radioName: name
-    },
-    children: /* @__PURE__ */ jsxs("fieldset", __spreadProps(__spreadValues({
-      "data-testid": "fieldset"
-    }, rest), {
-      className: `rds-field-set ${className}`,
-      ref,
-      children: [/* @__PURE__ */ jsx("legend", {
-        className: `rds-field-set__legend ${showLegend ? "" : "sr-only"}`,
-        children: legend
-      }), children]
-    }))
-  });
-});
-FieldSet.displayName = "FieldSet";
-export { FieldSet as F };

package/dist/toggle/RadioToggle.js

@@ -1,65 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { createContext, forwardRef, useContext } from "react";
-import "../button/Button.js";
-import { a as jsxs, j as jsx } from "../core/RiksTV.js";
-const RadioContext = createContext({ radioName: "" });
-var radioToggle = "";
-const RadioToggleInput = forwardRef((_a, ref) => {
-  var _b = _a, {
-    label,
-    name,
-    className = ""
-  } = _b, rest = __objRest(_b, [
-    "label",
-    "name",
-    "className"
-  ]);
-  const {
-    radioName
-  } = useContext(RadioContext);
-  return /* @__PURE__ */ jsxs("label", {
-    className: `rds-radio-toggle ${className}`,
-    children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
-      className: "rds-radio-toggle__input"
-    }, rest), {
-      ref,
-      type: "radio",
-      name: radioName || name
-    })), /* @__PURE__ */ jsx("span", {
-      className: "rds-radio-toggle__label",
-      children: label
-    })]
-  });
-});
-RadioToggleInput.displayName = "RadioToggleInput";
-export { RadioContext as R, RadioToggleInput as a };

package/dist/toggleButton/ToggleButton.js

@@ -1,106 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { forwardRef, useRef, useState } from "react";
-import { a as jsxs, j as jsx } from "../core/RiksTV.js";
-const generateId = (id) => {
-  if (id) {
-    return id;
-  }
-  return `${new Date().valueOf()}`;
-};
-var toggleButton = "";
-const ToggleButton = forwardRef((_a, ref) => {
-  var _b = _a, {
-    defaultChecked,
-    showLabel = true,
-    icons,
-    iconClass = "",
-    children,
-    onChange,
-    id,
-    className = ""
-  } = _b, rest = __objRest(_b, [
-    "defaultChecked",
-    "showLabel",
-    "icons",
-    "iconClass",
-    "children",
-    "onChange",
-    "id",
-    "className"
-  ]);
-  const internalRef = useRef(null);
-  const [internalId] = useState(generateId(id));
-  const [isChecked, setIsChecked] = useState(!!defaultChecked);
-  const CheckedIcon = icons && "checkedIcon" in icons ? icons.checkedIcon : null;
-  const UncheckedIcon = icons && "uncheckedIcon" in icons ? icons.uncheckedIcon : null;
-  const ToggleIcon = icons && "toggleIcon" in icons ? icons.toggleIcon : null;
-  const inputRef = ref || internalRef;
-  const handleChange = (e) => {
-    var _a2;
-    if (typeof onChange === "function") {
-      onChange(e);
-    }
-    if (typeof inputRef !== "function") {
-      setIsChecked(!!((_a2 = inputRef.current) == null ? void 0 : _a2.checked));
-    } else {
-      setIsChecked(!isChecked);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className,
-    children: [/* @__PURE__ */ jsx("input", __spreadValues({
-      id: internalId,
-      ref: inputRef,
-      type: "checkbox",
-      className: "rds-toggle-button__input",
-      onChange: handleChange,
-      defaultChecked
-    }, rest)), /* @__PURE__ */ jsx("label", {
-      "data-testid": "toggle-button__label",
-      className: `rds-toggle-button ${showLabel ? "" : "rds-toggle-button--round"}`,
-      htmlFor: internalId,
-      children: /* @__PURE__ */ jsxs("span", {
-        className: "rds-toggle-button__content",
-        children: [icons && /* @__PURE__ */ jsxs("span", {
-          className: `rds-toggle-button__rounded ${iconClass}`,
-          children: [ToggleIcon && /* @__PURE__ */ jsx(ToggleIcon, {
-            checked: isChecked
-          }), CheckedIcon && isChecked && /* @__PURE__ */ jsx(CheckedIcon, {}), UncheckedIcon && !isChecked && /* @__PURE__ */ jsx(UncheckedIcon, {})]
-        }), /* @__PURE__ */ jsx("span", {
-          "data-testid": "toggle-button__label__text",
-          className: showLabel ? "" : "sr-only",
-          children
-        })]
-      })
-    })]
-  });
-});
-ToggleButton.displayName = "ToggleButton";
-export { ToggleButton as T };

package/dist/toggleButton/internal/generateId.d.ts

@@ -1 +0,0 @@
-export declare const generateId: (id: string | undefined) => string;

package/dist/typography/Typography.js

@@ -1,95 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { forwardRef } from "react";
-import { j as jsx } from "../core/RiksTV.js";
-var typography = "";
-const typographyFactory = (factoryProps) => forwardRef((_a, ref) => {
-  var _b = _a, {
-    children,
-    lookLike = factoryProps.lookLike,
-    className = "",
-    lightBackground = false
-  } = _b, props = __objRest(_b, [
-    "children",
-    "lookLike",
-    "className",
-    "lightBackground"
-  ]);
-  const C = factoryProps.semanticElement;
-  return /* @__PURE__ */ jsx(C, __spreadProps(__spreadValues({
-    className: `rds-${lookLike} ${lightBackground ? `rds-${lookLike}--light` : ""} ${className}`
-  }, props), {
-    ref,
-    children
-  }));
-});
-const DisplayTitle = typographyFactory({
-  semanticElement: "h1",
-  lookLike: "display-title"
-});
-const H1 = typographyFactory({
-  semanticElement: "h1",
-  lookLike: "title-1"
-});
-const H2 = typographyFactory({
-  semanticElement: "h2",
-  lookLike: "title-2"
-});
-const H3 = typographyFactory({
-  semanticElement: "h3",
-  lookLike: "title-3"
-});
-const H4 = typographyFactory({
-  semanticElement: "h4",
-  lookLike: "title-4"
-});
-const Body = typographyFactory({
-  semanticElement: "p",
-  lookLike: "body"
-});
-const SubBody = typographyFactory({
-  semanticElement: "p",
-  lookLike: "sub-body"
-});
-const Tag = typographyFactory({
-  semanticElement: "span",
-  lookLike: "tag"
-});
-const Bold = typographyFactory({
-  semanticElement: "strong",
-  lookLike: "bold"
-});
-const Meta = typographyFactory({
-  semanticElement: "span",
-  lookLike: "meta"
-});
-export { Body as B, DisplayTitle as D, H1 as H, Meta as M, SubBody as S, Tag as T, H2 as a, H3 as b, H4 as c, Bold as d };